├── index.cjs
├── content
└── Base
│ ├── baseLib
│ ├── baseTheme
│ │ ├── fonts
│ │ │ ├── 72-Bold.woff
│ │ │ ├── 72-Black.woff
│ │ │ ├── 72-Black.woff2
│ │ │ ├── 72-Bold.woff2
│ │ │ ├── 72-Italic.woff
│ │ │ ├── 72-Light.woff
│ │ │ ├── 72-Light.woff2
│ │ │ ├── SAP-icons.ttf
│ │ │ ├── SAP-icons.woff
│ │ │ ├── 72-Bold-full.woff
│ │ │ ├── 72-Condensed.woff
│ │ │ ├── 72-Italic.woff2
│ │ │ ├── 72-Regular.woff
│ │ │ ├── 72-Regular.woff2
│ │ │ ├── 72-Semibold.woff
│ │ │ ├── 72-Semibold.woff2
│ │ │ ├── 72Mono-Bold.woff
│ │ │ ├── 72Mono-Bold.woff2
│ │ │ ├── SAP-icons-TNT.ttf
│ │ │ ├── SAP-icons.woff2
│ │ │ ├── 72-Black-full.woff
│ │ │ ├── 72-Black-full.woff2
│ │ │ ├── 72-Bold-full.woff2
│ │ │ ├── 72-BoldItalic.woff
│ │ │ ├── 72-BoldItalic.woff2
│ │ │ ├── 72-Condensed.woff2
│ │ │ ├── 72-Italic-full.woff
│ │ │ ├── 72-Light-full.woff
│ │ │ ├── 72-Light-full.woff2
│ │ │ ├── 72Mono-Regular.woff
│ │ │ ├── SAP-icons-TNT.woff
│ │ │ ├── SAP-icons-TNT.woff2
│ │ │ ├── 72-Condensed-full.woff
│ │ │ ├── 72-CondensedBold.woff
│ │ │ ├── 72-CondensedBold.woff2
│ │ │ ├── 72-Italic-full.woff2
│ │ │ ├── 72-Regular-full.woff
│ │ │ ├── 72-Regular-full.woff2
│ │ │ ├── 72-Semibold-full.woff
│ │ │ ├── 72-Semibold-full.woff2
│ │ │ ├── 72-SemiboldDuplex.woff
│ │ │ ├── 72Mono-Bold-full.woff
│ │ │ ├── 72Mono-Bold-full.woff2
│ │ │ ├── 72Mono-Regular.woff2
│ │ │ ├── 72-BoldItalic-full.woff
│ │ │ ├── 72-BoldItalic-full.woff2
│ │ │ ├── 72-Condensed-full.woff2
│ │ │ ├── 72-SemiboldDuplex.woff2
│ │ │ ├── 72Mono-Regular-full.woff
│ │ │ ├── 72-CondensedBold-full.woff
│ │ │ ├── 72-CondensedBold-full.woff2
│ │ │ ├── 72-SemiboldDuplex-full.woff
│ │ │ ├── 72Mono-Regular-full.woff2
│ │ │ ├── 72-SemiboldDuplex-full.woff2
│ │ │ ├── BusinessSuiteInAppSymbols.ttf
│ │ │ ├── BusinessSuiteInAppSymbols.woff
│ │ │ └── BusinessSuiteInAppSymbols.woff2
│ │ ├── preview.less
│ │ ├── css_variables.less
│ │ └── .theming
│ ├── sap_horizon
│ │ ├── fonts
│ │ │ ├── SAP-icons.ttf
│ │ │ ├── SAP-icons.woff
│ │ │ ├── SAP-icons.woff2
│ │ │ ├── SAP-icons-TNT.ttf
│ │ │ ├── SAP-icons-TNT.woff
│ │ │ ├── SAP-icons-TNT.woff2
│ │ │ ├── BusinessSuiteInAppSymbols.ttf
│ │ │ ├── BusinessSuiteInAppSymbols.woff
│ │ │ └── BusinessSuiteInAppSymbols.woff2
│ │ ├── skeleton.less
│ │ ├── preview.less
│ │ ├── css_variables.less
│ │ ├── avatar.svg
│ │ └── .theming
│ ├── sap_fiori_3_light_dark
│ │ ├── css_variables.css
│ │ ├── .theming
│ │ └── avatar.svg
│ ├── .theming
│ ├── sap_base_fiori
│ │ ├── base.less
│ │ ├── skeleton.less
│ │ ├── preview.less
│ │ ├── css_variables.less
│ │ └── .theming
│ ├── sap_belize
│ │ ├── skeleton.less
│ │ ├── preview.less
│ │ ├── css_variables.less
│ │ ├── avatar.svg
│ │ └── .theming
│ ├── sap_belize_hcb
│ │ ├── skeleton.less
│ │ ├── preview.less
│ │ ├── css_variables.less
│ │ ├── avatar.svg
│ │ └── .theming
│ ├── sap_fiori_3
│ │ ├── skeleton.less
│ │ ├── preview.less
│ │ ├── css_variables.less
│ │ ├── avatar.svg
│ │ └── .theming
│ ├── sap_belize_hcw
│ │ ├── skeleton.less
│ │ ├── preview.less
│ │ ├── css_variables.less
│ │ ├── avatar.svg
│ │ └── .theming
│ ├── sap_belize_plus
│ │ ├── skeleton.less
│ │ ├── preview.less
│ │ ├── css_variables.less
│ │ ├── avatar.svg
│ │ └── .theming
│ ├── sap_fiori_3_dark
│ │ ├── skeleton.less
│ │ ├── preview.less
│ │ ├── css_variables.less
│ │ ├── avatar.svg
│ │ └── .theming
│ ├── sap_fiori_3_hcb
│ │ ├── skeleton.less
│ │ ├── preview.less
│ │ ├── css_variables.less
│ │ ├── avatar.svg
│ │ └── .theming
│ ├── sap_horizon_dark
│ │ ├── skeleton.less
│ │ ├── preview.less
│ │ ├── css_variables.less
│ │ ├── avatar.svg
│ │ └── .theming
│ ├── sap_horizon_hcb
│ │ ├── skeleton.less
│ │ ├── preview.less
│ │ ├── css_variables.less
│ │ ├── avatar.svg
│ │ └── .theming
│ ├── sap_fiori_3_hcw
│ │ ├── skeleton.less
│ │ ├── preview.less
│ │ ├── css_variables.less
│ │ ├── avatar.svg
│ │ └── .theming
│ ├── sap_horizon_hcw
│ │ ├── skeleton.less
│ │ ├── preview.less
│ │ ├── css_variables.less
│ │ ├── avatar.svg
│ │ └── .theming
│ ├── sap_fiori_3_set
│ │ ├── avatar.svg
│ │ ├── css_variables.css
│ │ └── .theming
│ └── sap_horizon_set
│ │ ├── avatar.svg
│ │ ├── css_variables.css
│ │ └── .theming
│ └── .theming
├── docs
├── view
│ ├── Main.view.xml
│ ├── GettingStarted.view.xml
│ ├── Overview.view.xml
│ ├── Icons.view.xml
│ └── Parameters.view.xml
├── controller
│ ├── GettingStarted.controller.js
│ ├── Overview.controller.js
│ ├── Base.controller.js
│ ├── Icons.controller.js
│ └── Parameters.controller.js
├── fragment
│ ├── OverviewButton.fragment.xml
│ └── ThemeSelect.fragment.xml
├── util
│ ├── uniq.js
│ └── parametersGet.js
├── types
│ └── sap.ui.define.d.ts
├── jsconfig.json
├── model
│ ├── categories.json
│ ├── Themes.model.js
│ ├── formatter.js
│ ├── docs.json
│ └── Icons.model.js
├── test
│ └── unit
│ │ ├── controller
│ │ ├── GettingStarted.controller.qunit.js
│ │ ├── Overview.controller.qunit.js
│ │ ├── Base.controller.qunit.js
│ │ └── Icons.controller.qunit.js
│ │ ├── util
│ │ ├── uniq.qunit.js
│ │ └── parametersGet.qunit.js
│ │ ├── model
│ │ ├── formatter.qunit.js
│ │ ├── Themes.model.qunit.js
│ │ ├── Parameters.model.qunit.js
│ │ └── Icons.model.qunit.js
│ │ ├── unitTests.qunit.html
│ │ ├── unitTests.qunit.js
│ │ └── Component.qunit.js
├── index.html
├── Component.js
└── manifest.json
├── index.mjs
├── .reuse
└── dep5
├── package.json
└── README.md
/index.cjs:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 |
5 | module.exports = {
6 | resourcePath: path.join(__dirname, 'content')
7 | };
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Bold.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Black.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Black.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Black.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Black.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Bold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Bold.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Italic.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Light.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Light.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Light.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Light.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/SAP-icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/SAP-icons.ttf
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/SAP-icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/SAP-icons.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Bold-full.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Bold-full.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Condensed.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Condensed.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Italic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Italic.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Regular.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Regular.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Semibold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Semibold.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Semibold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Semibold.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72Mono-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72Mono-Bold.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72Mono-Bold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72Mono-Bold.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/SAP-icons-TNT.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/SAP-icons-TNT.ttf
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/SAP-icons.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/SAP-icons.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon/fonts/SAP-icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/sap_horizon/fonts/SAP-icons.ttf
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon/fonts/SAP-icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/sap_horizon/fonts/SAP-icons.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon/fonts/SAP-icons.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/sap_horizon/fonts/SAP-icons.woff2
--------------------------------------------------------------------------------
/docs/view/Main.view.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Black-full.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Black-full.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Black-full.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Black-full.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Bold-full.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Bold-full.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-BoldItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-BoldItalic.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-BoldItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-BoldItalic.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Condensed.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Condensed.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Italic-full.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Italic-full.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Light-full.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Light-full.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Light-full.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Light-full.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72Mono-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72Mono-Regular.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/SAP-icons-TNT.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/SAP-icons-TNT.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/SAP-icons-TNT.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/SAP-icons-TNT.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon/fonts/SAP-icons-TNT.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/sap_horizon/fonts/SAP-icons-TNT.ttf
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Condensed-full.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Condensed-full.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-CondensedBold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-CondensedBold.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-CondensedBold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-CondensedBold.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Italic-full.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Italic-full.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Regular-full.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Regular-full.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Regular-full.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Regular-full.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Semibold-full.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Semibold-full.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Semibold-full.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Semibold-full.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72Mono-Bold-full.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72Mono-Bold-full.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72Mono-Bold-full.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72Mono-Bold-full.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72Mono-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72Mono-Regular.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon/fonts/SAP-icons-TNT.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/sap_horizon/fonts/SAP-icons-TNT.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon/fonts/SAP-icons-TNT.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/sap_horizon/fonts/SAP-icons-TNT.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-BoldItalic-full.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-BoldItalic-full.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-BoldItalic-full.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-BoldItalic-full.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-Condensed-full.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-Condensed-full.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72Mono-Regular-full.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72Mono-Regular-full.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-CondensedBold-full.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-CondensedBold-full.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-CondensedBold-full.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-CondensedBold-full.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex-full.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex-full.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72Mono-Regular-full.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72Mono-Regular-full.woff2
--------------------------------------------------------------------------------
/index.mjs:
--------------------------------------------------------------------------------
1 | import {fileURLToPath} from 'node:url';
2 | import {dirname, join} from 'node:path';
3 |
4 | export const resourcePath = join(dirname(fileURLToPath(import.meta.url)), 'content');
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex-full.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex-full.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/BusinessSuiteInAppSymbols.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/BusinessSuiteInAppSymbols.ttf
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/BusinessSuiteInAppSymbols.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/BusinessSuiteInAppSymbols.woff
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/fonts/BusinessSuiteInAppSymbols.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/baseTheme/fonts/BusinessSuiteInAppSymbols.woff2
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon/fonts/BusinessSuiteInAppSymbols.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/sap_horizon/fonts/BusinessSuiteInAppSymbols.ttf
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon/fonts/BusinessSuiteInAppSymbols.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/sap_horizon/fonts/BusinessSuiteInAppSymbols.woff
--------------------------------------------------------------------------------
/docs/controller/GettingStarted.controller.js:
--------------------------------------------------------------------------------
1 | sap.ui.define(['tc/controller/Base.controller'], BaseController => {
2 | return BaseController.extend('tc.controller.GettingStarted', {});
3 | });
4 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon/fonts/BusinessSuiteInAppSymbols.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/theming-base-content/HEAD/content/Base/baseLib/sap_horizon/fonts/BusinessSuiteInAppSymbols.woff2
--------------------------------------------------------------------------------
/docs/fragment/OverviewButton.fragment.xml:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_light_dark/css_variables.css:
--------------------------------------------------------------------------------
1 | @import url("../sap_fiori_3/css_variables.css") only screen and (prefers-color-scheme: light);
2 | @import url("../sap_fiori_3_dark/css_variables.css") only screen and (prefers-color-scheme: dark);
--------------------------------------------------------------------------------
/docs/util/uniq.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | sap.ui.define([], () => {
4 | /**
5 | * @template T
6 | * @param {T[]} arr
7 | * @return {T[]}
8 | */
9 | return function(arr) {
10 | return Array.from(new Set(arr));
11 | }
12 | });
13 |
--------------------------------------------------------------------------------
/content/Base/baseLib/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Library",
3 | "sId": "baseLib",
4 | "sLabel": "SAP Base Library of SAP Base Framework",
5 | "sDescription": "SAP Base Library contains theming data shared by all HTML based SAP UI frameworks.",
6 | "sVendor": "SAP"
7 | }
--------------------------------------------------------------------------------
/docs/types/sap.ui.define.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace sap {
2 | namespace ui {
3 | function define(dependencies: string[], factory: (...modules: any[]) => any): void;
4 | function define(factory: (...modules: any[]) => any): void;
5 | export {define};
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/docs/controller/Overview.controller.js:
--------------------------------------------------------------------------------
1 | sap.ui.define(['tc/controller/Base.controller'], BaseController => {
2 | return BaseController.extend('tc.controller.Overview', {
3 | navToIcons(library) {
4 | this.getRouter().navTo('icons', {library});
5 | }
6 | });
7 | });
8 |
--------------------------------------------------------------------------------
/docs/fragment/ThemeSelect.fragment.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
--------------------------------------------------------------------------------
/docs/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "checkJs": true,
4 | "module": "AMD",
5 | "lib": ["DOM", "ESNext"],
6 | "typeRoots": ["./types/sap.ui.define.d.ts"]
7 | },
8 | "typeAcquisition": {
9 | "enable": true
10 | },
11 | "include": ["controller/*.js", "model/*.js", "*.js", "util/*.js", "./types/*.d.ts"]
12 | }
--------------------------------------------------------------------------------
/.reuse/dep5:
--------------------------------------------------------------------------------
1 | Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
2 | Upstream-Name: Theming Base Content
3 | Upstream-Contact: Dominik Schreiber
4 | Source: https://github.com/SAP/theming-base-content
5 |
6 | Files: *
7 | Copyright: 2012-2022 SAP SE or an SAP affiliate company and Theming Base Content contributors
8 | License: Apache-2.0
--------------------------------------------------------------------------------
/docs/model/categories.json:
--------------------------------------------------------------------------------
1 | {
2 | "Categories": {
3 | "Main": "Main parameters are used throughout the theme; many component specific parameters are connected to the main parameters",
4 | "Assistant": "Parameters for the Joule assistant",
5 | "Image": "Image resources and properties",
6 | "Shell": "Parameters for the SAP Build Workzone launchpad",
7 | "Semantic": "Semantic colors convey meaning"
8 | }
9 | }
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/preview.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:32Z"}
5 | */
6 |
7 | @import "base.less";
8 |
9 | /******************* FILE /Base/baseLib/baseTheme/preview.less (Version 11.32.3) *******************/
10 |
11 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_base_fiori/base.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:32Z"}
5 | */
6 |
7 |
8 | /******************* FILE /Base/baseLib/sap_base_fiori/base.less (Version 11.32.3) *******************/
9 |
10 | @sapSapThemeId: sap_base_fiori;
11 |
--------------------------------------------------------------------------------
/docs/test/unit/controller/GettingStarted.controller.qunit.js:
--------------------------------------------------------------------------------
1 | sap.ui.define([
2 | 'tc/controller/Base.controller',
3 | 'tc/controller/GettingStarted.controller'
4 | ], (BaseController, GettingStartedController) => {
5 | QUnit.module('GettingStarted.controller');
6 |
7 | QUnit.test('constructor() (UITD2-2840, UITD2-3069)', assert => {
8 | assert.ok(new GettingStartedController() instanceof BaseController, 'should be a BaseController');
9 | });
10 | });
11 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize/skeleton.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_base_fiori/skeleton.less";
8 |
9 | /******************* FILE /Base/baseLib/sap_belize/skeleton.less (Version 11.32.3) *******************/
10 |
11 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon/skeleton.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../baseTheme/skeleton.less";
8 |
9 | /******************* FILE /Base/baseLib/sap_horizon/skeleton.less (Version 11.32.3) *******************/
10 |
11 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_base_fiori/skeleton.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:32Z"}
5 | */
6 |
7 | @import "../baseTheme/skeleton.less";
8 |
9 | /******************* FILE /Base/baseLib/sap_base_fiori/skeleton.less (Version 11.32.3) *******************/
10 |
11 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize_hcb/skeleton.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_belize/skeleton.less";
8 |
9 | /******************* FILE /Base/baseLib/sap_belize_hcb/skeleton.less (Version 11.32.3) *******************/
10 |
11 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3/skeleton.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_base_fiori/skeleton.less";
8 |
9 | /******************* FILE /Base/baseLib/sap_fiori_3/skeleton.less (Version 11.32.3) *******************/
10 |
11 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize_hcw/skeleton.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_belize_hcb/skeleton.less";
8 |
9 | /******************* FILE /Base/baseLib/sap_belize_hcw/skeleton.less (Version 11.32.3) *******************/
10 |
11 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize_plus/skeleton.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_belize/skeleton.less";
8 |
9 | /******************* FILE /Base/baseLib/sap_belize_plus/skeleton.less (Version 11.32.3) *******************/
10 |
11 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_dark/skeleton.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_fiori_3/skeleton.less";
8 |
9 | /******************* FILE /Base/baseLib/sap_fiori_3_dark/skeleton.less (Version 11.32.3) *******************/
10 |
11 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_hcb/skeleton.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_fiori_3/skeleton.less";
8 |
9 | /******************* FILE /Base/baseLib/sap_fiori_3_hcb/skeleton.less (Version 11.32.3) *******************/
10 |
11 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_dark/skeleton.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_horizon/skeleton.less";
8 |
9 | /******************* FILE /Base/baseLib/sap_horizon_dark/skeleton.less (Version 11.32.3) *******************/
10 |
11 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_hcb/skeleton.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_horizon/skeleton.less";
8 |
9 | /******************* FILE /Base/baseLib/sap_horizon_hcb/skeleton.less (Version 11.32.3) *******************/
10 |
11 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_hcw/skeleton.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_fiori_3_hcb/skeleton.less";
8 |
9 | /******************* FILE /Base/baseLib/sap_fiori_3_hcw/skeleton.less (Version 11.32.3) *******************/
10 |
11 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_hcw/skeleton.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_horizon_hcb/skeleton.less";
8 |
9 | /******************* FILE /Base/baseLib/sap_horizon_hcw/skeleton.less (Version 11.32.3) *******************/
10 |
11 |
--------------------------------------------------------------------------------
/docs/test/unit/util/uniq.qunit.js:
--------------------------------------------------------------------------------
1 | sap.ui.define(['tc/util/uniq'], uniq => {
2 | QUnit.module('uniq');
3 |
4 | QUnit.test('unique values (UITD2-2840, UITD2-3069)', assert => {
5 | assert.deepEqual(uniq([1, 2, 3, 4, 5]), [1, 2, 3, 4, 5], 'should return the same array');
6 | });
7 |
8 | QUnit.test('duplicate values (UITD2-2840, UITD2-3069)', assert => {
9 | assert.deepEqual(uniq([1, 2, 2, 3, 3, 4, 5]), [1, 2, 3, 4, 5], 'should remove duplicates');
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon/preview.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../baseTheme/preview.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_horizon/preview.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize/preview.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_base_fiori/preview.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_belize/preview.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3/preview.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_base_fiori/preview.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_fiori_3/preview.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_base_fiori/preview.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:32Z"}
5 | */
6 |
7 | @import "../baseTheme/preview.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_base_fiori/preview.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize_hcb/preview.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_belize/preview.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_belize_hcb/preview.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize_plus/preview.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_belize/preview.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_belize_plus/preview.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_hcb/preview.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_fiori_3/preview.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_fiori_3_hcb/preview.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_hcb/preview.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_horizon/preview.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_horizon_hcb/preview.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize_hcw/preview.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_belize_hcb/preview.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_belize_hcw/preview.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_dark/preview.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_fiori_3/preview.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_fiori_3_dark/preview.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_hcw/preview.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_fiori_3_hcb/preview.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_fiori_3_hcw/preview.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_dark/preview.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_horizon/preview.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_horizon_dark/preview.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_hcw/preview.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_horizon_hcb/preview.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_horizon_hcw/preview.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_base_fiori/css_variables.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:32Z"}
5 | */
6 |
7 | @import "../baseTheme/css_variables.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_base_fiori/css_variables.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize/css_variables.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_base_fiori/css_variables.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_belize/css_variables.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize_hcb/css_variables.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_belize/css_variables.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_belize_hcb/css_variables.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3/css_variables.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_base_fiori/css_variables.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_fiori_3/css_variables.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize_hcw/css_variables.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_belize_hcb/css_variables.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_belize_hcw/css_variables.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize_plus/css_variables.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_belize/css_variables.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_belize_plus/css_variables.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_dark/css_variables.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_fiori_3/css_variables.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_fiori_3_dark/css_variables.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_hcb/css_variables.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_fiori_3/css_variables.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_fiori_3_hcb/css_variables.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_base_fiori/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_base_fiori",
4 | "sLabel": "SAP Base Theme for Fiori",
5 | "sDescription": "The SAP Base Theme for Fiori is the theme all other Fiori themes are derived from.",
6 | "sVendor": "SAP",
7 | "oExtends": "Base.baseLib.baseTheme",
8 | "sTextDirections": "LTR,RTL",
9 | "sBuildOptions": "SKIP",
10 | "sFallbackThemeId": "sap_belize",
11 | "sType": "ABSTRACT",
12 | "sThemability": "PUBLIC",
13 | "sReleaseStage": "GENERAL_AVAILABILITY"
14 | }
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_hcw/css_variables.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_fiori_3_hcb/css_variables.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_fiori_3_hcw/css_variables.less (Version 11.32.3) *******************/
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon/css_variables.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../baseTheme/css_variables.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_horizon/css_variables.less (Version 11.32.3) *******************/
11 |
12 | @sapField_HorizonNGEnabled: 1;
13 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_hcb/css_variables.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_horizon/css_variables.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_horizon_hcb/css_variables.less (Version 11.32.3) *******************/
11 |
12 | @sapField_HorizonNGEnabled: 1;
13 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_dark/css_variables.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_horizon/css_variables.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_horizon_dark/css_variables.less (Version 11.32.3) *******************/
11 |
12 | @sapField_HorizonNGEnabled: 1;
13 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_hcw/css_variables.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:33Z"}
5 | */
6 |
7 | @import "../sap_horizon_hcb/css_variables.less";
8 | @import "base.less";
9 |
10 | /******************* FILE /Base/baseLib/sap_horizon_hcw/css_variables.less (Version 11.32.3) *******************/
11 |
12 | @sapField_HorizonNGEnabled: 1;
13 |
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/css_variables.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2012-2025 SAP SE or an SAP affiliate company and Theming Base Content contributors. Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
3 | * Theming Engine 16.1.14
4 | * data:{"sModified":"2025-12-12T06:08:32Z"}
5 | */
6 |
7 | @import "base.less";
8 | @import "skeleton.less";
9 |
10 | /******************* FILE /Base/baseLib/baseTheme/css_variables.less (Version 11.32.3) *******************/
11 |
12 | @sapCss_SAP-icons-TNT: true;
13 | @sapCss_SAP-icons-Business-Suite: true;
14 | @sapCss_SvgIconBase: false;
15 |
--------------------------------------------------------------------------------
/docs/controller/Base.controller.js:
--------------------------------------------------------------------------------
1 | sap.ui.define([
2 | 'sap/ui/core/Theming',
3 | 'sap/ui/core/UIComponent',
4 | 'sap/ui/core/mvc/Controller'
5 | ], (Theming, UIComponent, Controller) => {
6 | return Controller.extend('tc.controller.Base', {
7 | getRouter() {
8 | return UIComponent.getRouterFor(this);
9 | },
10 |
11 | onThemeChange(event) {
12 | const theme = event.getParameter('selectedItem').getText();
13 |
14 | this.getView().getModel('themes').setProperty('/SelectedTheme', theme);
15 | Theming.setTheme(theme);
16 | },
17 |
18 | navTo(target) {
19 | this.getRouter().navTo(target);
20 | },
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/docs/test/unit/controller/Overview.controller.qunit.js:
--------------------------------------------------------------------------------
1 | sap.ui.define([
2 | 'tc/controller/Overview.controller'
3 | ], OverviewController => {
4 | QUnit.module('Overview.controller');
5 |
6 | QUnit.test('navToIcons() (UITD2-2840, UITD2-3069)', assert => {
7 | let route = null;
8 | const overviewController = new OverviewController();
9 | overviewController.getRouter = () => ({
10 | navTo: (target, args) => route = {target, args}
11 | });
12 |
13 | overviewController.navToIcons('SAP-icons');
14 | assert.deepEqual(route, {target: 'icons', args: {library: 'SAP-icons'}}, 'should navTo("icons", {library: "${library}"})');
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/docs/test/unit/model/formatter.qunit.js:
--------------------------------------------------------------------------------
1 | sap.ui.define(['tc/model/formatter'], formatter => {
2 | QUnit.module('formatter');
3 |
4 | QUnit.test('glyphToEntity() (UITD2-2840, UITD2-3069)', assert => {
5 | assert.equal(formatter.glyphToEntity('0x1234'), 'Ӓ', 'should convert 0x1234 to Ӓ');
6 | });
7 |
8 | QUnit.test('glyphToContent() (UITD2-2840, UITD2-3069)', assert => {
9 | assert.equal(formatter.glyphToContent('0x1234'), '\\1234', 'should convert 0x1234 to \\1234');
10 | });
11 |
12 | QUnit.test('glyphToUnicode() (UITD2-2840, UITD2-3069)', assert => {
13 | assert.equal(formatter.glyphToUnicode('0x1234'), 'ሴ', 'should convert 0x1234 to ሴ');
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Theming base content
6 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_light_dark/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_fiori_3_light_dark",
4 | "sLabel": "SAP Quartz Light/Dark",
5 | "sHelpLink": "https://experience.sap.com/fiori-design-web/quartz-light-colors/",
6 | "sVendor": "SAP",
7 | "aBuildFiles": [],
8 | "aFiles": [],
9 | "sFallbackThemeId": "sap_fiori_3",
10 | "sType": "SET",
11 | "sThemability": "PRIVATE",
12 | "aTags": [
13 | "Fiori_3"
14 | ],
15 | "sReleaseStage": "DEVELOPMENT",
16 | "mSet": {
17 | "aThemes": [
18 | {
19 | "sId": "sap_fiori_3",
20 | "sColorScheme": "LIGHT",
21 | "bDefault": true
22 | },
23 | {
24 | "sId": "sap_fiori_3_dark",
25 | "sColorScheme": "DARK"
26 | }
27 | ]
28 | }
29 | }
--------------------------------------------------------------------------------
/docs/Component.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | sap.ui.define([
4 | 'sap/ui/core/UIComponent',
5 | 'tc/model/Icons.model',
6 | 'tc/model/Parameters.model',
7 | 'tc/model/Themes.model'
8 | ], (UIComponent, iconsModel, parametersModel, themesModel) => {
9 | return UIComponent.extend('tc.Component', {
10 | metadata: {
11 | interfaces: ['sap.ui.core.IAsyncContentCreation'],
12 | manifest: 'json'
13 | },
14 |
15 | init() {
16 | UIComponent.prototype.init.apply(this, arguments);
17 |
18 | this.setModel(iconsModel, 'icons');
19 | this.setModel(parametersModel, 'parameters');
20 | this.setModel(themesModel, 'themes');
21 |
22 | this.getRouter().initialize();
23 | }
24 | })
25 | });
26 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@sap-theming/theming-base-content",
3 | "version": "11.32.3",
4 | "description": "Theming Base Content",
5 | "author": "SAP SE (https://www.sap.com)",
6 | "main": "index.cjs",
7 | "license": "Apache-2.0",
8 | "keywords": [
9 | "theming",
10 | "sap-theming",
11 | "themes"
12 | ],
13 | "repository": {
14 | "type": "git",
15 | "url": "https://github.com/SAP/theming-base-content"
16 | },
17 | "dependencies": {},
18 | "files": [
19 | "content/**/.theming",
20 | "content/Base/baseLib/**/*.{less,css,scss,info,properties,woff2,woff,ttf,png,gif,html}",
21 | "content/Base/baseLib/*/*.{json,svg}",
22 | "content/Base/baseLib/*/fonts/*.json",
23 | "CHANGELOG.md",
24 | "index.cjs",
25 | "index.mjs"
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_set/avatar.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
8 |
9 |
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_set/avatar.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
8 |
9 |
11 |
12 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_light_dark/avatar.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
8 |
9 |
11 |
12 |
--------------------------------------------------------------------------------
/docs/model/Themes.model.js:
--------------------------------------------------------------------------------
1 | sap.ui.define([
2 | 'sap/ui/core/Theming',
3 | 'sap/ui/model/json/JSONModel'
4 | ], (Theming, JSONModel) => {
5 | const themesModel = new JSONModel({
6 | Themes: [
7 | {Theme: 'sap_horizon', Avatar: null},
8 | {Theme: 'sap_horizon_dark', Avatar: null},
9 | {Theme: 'sap_horizon_hcb', Avatar: null},
10 | {Theme: 'sap_horizon_hcw', Avatar: null},
11 | {Theme: 'sap_fiori_3', Avatar: null},
12 | {Theme: 'sap_fiori_3_dark', Avatar: null},
13 | {Theme: 'sap_fiori_3_hcb', Avatar: null},
14 | {Theme: 'sap_fiori_3_hcw', Avatar: null}
15 | ],
16 | SelectedTheme: Theming.getTheme()
17 | });
18 |
19 | Theming.attachApplied(() => {
20 | themesModel.setProperty('/SelectedTheme', Theming.getTheme());
21 | });
22 |
23 | return themesModel;
24 | });
25 |
--------------------------------------------------------------------------------
/docs/test/unit/unitTests.qunit.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Unit tests for theming base content
6 |
10 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_set/css_variables.css:
--------------------------------------------------------------------------------
1 | @import url("../sap_fiori_3/css_variables.css") only screen and (prefers-color-scheme: light) and (prefers-contrast: no-preference), screen and (prefers-color-scheme: light) and (prefers-contrast: less);
2 | @import url("../sap_fiori_3_dark/css_variables.css") only screen and (prefers-color-scheme: dark) and (prefers-contrast: no-preference), screen and (prefers-color-scheme: dark) and (prefers-contrast: less);
3 | @import url("../sap_fiori_3_hcw/css_variables.css") only screen and (prefers-color-scheme: light) and (prefers-contrast: custom), screen and (prefers-color-scheme: light) and (prefers-contrast: more);
4 | @import url("../sap_fiori_3_hcb/css_variables.css") only screen and (prefers-color-scheme: dark) and (prefers-contrast: custom), screen and (prefers-color-scheme: dark) and (prefers-contrast: more);
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_set/css_variables.css:
--------------------------------------------------------------------------------
1 | @import url("../sap_horizon/css_variables.css") only screen and (prefers-color-scheme: light) and (prefers-contrast: no-preference), screen and (prefers-color-scheme: light) and (prefers-contrast: less);
2 | @import url("../sap_horizon_dark/css_variables.css") only screen and (prefers-color-scheme: dark) and (prefers-contrast: no-preference), screen and (prefers-color-scheme: dark) and (prefers-contrast: less);
3 | @import url("../sap_horizon_hcw/css_variables.css") only screen and (prefers-color-scheme: light) and (prefers-contrast: custom), screen and (prefers-color-scheme: light) and (prefers-contrast: more);
4 | @import url("../sap_horizon_hcb/css_variables.css") only screen and (prefers-color-scheme: dark) and (prefers-contrast: custom), screen and (prefers-color-scheme: dark) and (prefers-contrast: more);
--------------------------------------------------------------------------------
/docs/test/unit/unitTests.qunit.js:
--------------------------------------------------------------------------------
1 | QUnit.config.autostart = false;
2 |
3 | sap.ui.require(['sap/ui/core/Core'], async Core => {
4 | await Core.ready();
5 |
6 | sap.ui.require([
7 | 'tc/test/unit/controller/Base.controller.qunit',
8 | 'tc/test/unit/controller/GettingStarted.controller.qunit',
9 | 'tc/test/unit/controller/Icons.controller.qunit',
10 | 'tc/test/unit/controller/Overview.controller.qunit',
11 | 'tc/test/unit/controller/Parameters.controller.qunit',
12 | 'tc/test/unit/model/formatter.qunit',
13 | 'tc/test/unit/model/Icons.model.qunit',
14 | 'tc/test/unit/model/Parameters.model.qunit',
15 | 'tc/test/unit/model/Themes.model.qunit',
16 | 'tc/test/unit/util/parametersGet.qunit',
17 | 'tc/test/unit/util/uniq.qunit',
18 | 'tc/test/unit/Component.qunit'
19 | ], () => {
20 | QUnit.start();
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_set/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_fiori_3_set",
4 | "sLabel": "SAP Quartz (Set)",
5 | "sVendor": "SAP",
6 | "aBuildFiles": [],
7 | "aFiles": [],
8 | "sType": "SET",
9 | "sThemability": "PRIVATE",
10 | "sReleaseStage": "GENERAL_AVAILABILITY",
11 | "sReleaseDate": "20220419T00:00:00Z",
12 | "mSet": {
13 | "aThemes": [
14 | {
15 | "sId": "sap_fiori_3",
16 | "sContrast": "LOW",
17 | "sColorScheme": "LIGHT",
18 | "bDefault": true
19 | },
20 | {
21 | "sId": "sap_fiori_3_dark",
22 | "sContrast": "LOW",
23 | "sColorScheme": "DARK"
24 | },
25 | {
26 | "sId": "sap_fiori_3_hcw",
27 | "sContrast": "HIGH",
28 | "sColorScheme": "LIGHT"
29 | },
30 | {
31 | "sId": "sap_fiori_3_hcb",
32 | "sContrast": "HIGH",
33 | "sColorScheme": "DARK"
34 | }
35 | ]
36 | }
37 | }
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_set/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_horizon_set",
4 | "sLabel": "SAP Horizon (Set)",
5 | "sVendor": "SAP",
6 | "aBuildFiles": [],
7 | "aFiles": [],
8 | "sType": "SET",
9 | "sThemability": "PRIVATE",
10 | "sReleaseStage": "GENERAL_AVAILABILITY",
11 | "sReleaseDate": "20220419T00:00:00Z",
12 | "mSet": {
13 | "aThemes": [
14 | {
15 | "sId": "sap_horizon",
16 | "sContrast": "LOW",
17 | "sColorScheme": "LIGHT",
18 | "bDefault": true
19 | },
20 | {
21 | "sId": "sap_horizon_dark",
22 | "sContrast": "LOW",
23 | "sColorScheme": "DARK"
24 | },
25 | {
26 | "sId": "sap_horizon_hcw",
27 | "sContrast": "HIGH",
28 | "sColorScheme": "LIGHT"
29 | },
30 | {
31 | "sId": "sap_horizon_hcb",
32 | "sContrast": "HIGH",
33 | "sColorScheme": "DARK"
34 | }
35 | ]
36 | }
37 | }
--------------------------------------------------------------------------------
/docs/model/formatter.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /** @typedef {string} Glyph matching /^0x[0-9a-f]{4}$/i */
4 | /** @typedef {string} Entity matching /^&#[0-9a-f]{4};$/i */
5 | /** @typedef {string} Content matching /^\\[0-9a-f]{4}$/i */
6 | /** @typedef {string} Unicode */
7 |
8 | sap.ui.define([], () => {
9 | return {
10 | /**
11 | * @param {Glyph} glyph
12 | * @return {Entity}
13 | */
14 | glyphToEntity(glyph) {
15 | return `&#${glyph.slice('0x'.length)};`;
16 | },
17 |
18 | /**
19 | * @param {Glyph} glyph
20 | * @return {Content}
21 | */
22 | glyphToContent(glyph) {
23 | return `\\${glyph.slice('0x'.length)}`;
24 | },
25 |
26 | /**
27 | * @param {Glyph} glyph
28 | * @return {Unicode}
29 | */
30 | glyphToUnicode(glyph) {
31 | return String.fromCharCode(glyph);
32 | }
33 | }
34 | });
35 |
--------------------------------------------------------------------------------
/content/Base/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Framework",
3 | "sId": "Base",
4 | "sLabel": "SAP Base Framework",
5 | "sDescription": "The SAP Base Framework contains theming data shared by all HTML based SAP UI frameworks.",
6 | "sVendor": "SAP",
7 | "sVersion": "11.32.3",
8 | "aBuildFiles": [
9 | "preview",
10 | "css_variables"
11 | ],
12 | "aFiles": [
13 | "base",
14 | "preview",
15 | "css_variables",
16 | "skeleton"
17 | ],
18 | "sCompiler": "SapLess",
19 | "sCompilerOptions": "FORCE_PARAMETER_RESOLUTION",
20 | "sFallbackThemeId": "sap_horizon",
21 | "sSourcePathPattern": "/%frameworkId%/%libId%/%themeId%/%fileId%.less",
22 | "sRuntimePathPattern": "/%frameworkId%/%libId%/%themeId%/%fileId%.css",
23 | "sRuntimeResourcePathPattern": "%../%%frameworkId%/%libId%/%themeId%",
24 | "sBaseLibraryId": "baseLib",
25 | "sBaseThemeId": "baseTheme",
26 | "sBaseFileId": "base"
27 | }
--------------------------------------------------------------------------------
/content/Base/baseLib/baseTheme/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "baseTheme",
4 | "sLabel": "SAP Base Theme of the SAP Base Framework",
5 | "sDescription": "The SAP Base Theme is the theme all other themes are derived from.",
6 | "sVendor": "SAP",
7 | "sType": "ABSTRACT",
8 | "sThemability": "PRIVATE",
9 | "sReleaseStage": "GENERAL_AVAILABILITY",
10 | "aBadgeParametersDef": [
11 | "sapBrandColor",
12 | "sapHighlightColor",
13 | "sapBaseColor",
14 | "sapShellColor",
15 | "sapBackgroundColor",
16 | "sapTextColor",
17 | "sapLinkColor",
18 | "sapContent_Selected_TextColor",
19 | "sapContent_Shadow0",
20 | "sapField_Background",
21 | "sapField_BorderColor",
22 | "sapShell_Background",
23 | "sapShell_TextColor",
24 | "sapShell_InteractiveTextColor",
25 | "sapShell_GroupTitleTextColor",
26 | "sapShell_Shadow",
27 | "sapShell_Navigation_Background",
28 | "sapShell_Navigation_TextColor",
29 | "sapTile_Background",
30 | "sapTile_BorderColor",
31 | "sapTile_BorderCornerRadius",
32 | "sapTile_TextColor",
33 | "sapTile_TitleTextColor"
34 | ]
35 | }
--------------------------------------------------------------------------------
/docs/model/docs.json:
--------------------------------------------------------------------------------
1 | {
2 | "Overview": "The theming base content design system offers colors, typography, shadows and metrics for component development. You find all base theming parameters which are intended to be used for component development in the CSS custom properties file of the theming base content.
There are three kinds of parameters which are exposed for component development
Internal parameters contain primary and secondary colors that make up the essence of the theme and can be very different in each theme. These parameters are not intended for use in the component implementation and are not exposed as CSS custom properties. You do not find these parameters in the parameter list.Main parameters are high-level parameters, such as sapBrandColor, sapBaseColor and sapHighlightColor. They provide a base that can connect to several component parameters.Component parameters that represent the design of a component. Component parameters can be connected to other component parameters.
4 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize_hcw/avatar.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_hcb/avatar.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_hcw/avatar.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_hcb/avatar.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_hcw/avatar.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize/avatar.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize_plus/avatar.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3/avatar.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon/avatar.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_dark/avatar.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_dark/avatar.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/docs/test/unit/controller/Base.controller.qunit.js:
--------------------------------------------------------------------------------
1 | sap.ui.define([
2 | 'sap/ui/core/Theming',
3 | 'sap/ui/core/UIComponent',
4 | 'tc/controller/Base.controller'
5 | ], (Theming, UIComponent, BaseController) => {
6 | QUnit.module('Base.controller');
7 |
8 | QUnit.test('getRouter() (UITD2-2840, UITD2-3069)', assert => {
9 | const ROUTER = Symbol('router');
10 | const getRouterFor = UIComponent.getRouterFor;
11 | UIComponent.getRouterFor = () => ROUTER;
12 | assert.equal(new BaseController().getRouter(), ROUTER, 'should return what UIComponent.getRouterFor(this) returns');
13 | UIComponent.getRouterFor = getRouterFor;
14 | });
15 |
16 | QUnit.test('onThemeChange() (UITD2-2840, UITD2-3069)', assert => {
17 | const THEME = 'my_theme';
18 |
19 | let actualTheme = null;
20 | const setTheme = Theming.setTheme;
21 | Theming.setTheme = _ => actualTheme = _;
22 |
23 | const modelUpdates = [];
24 | const baseController = new BaseController();
25 | baseController.getView = () => ({
26 | getModel: model => ({
27 | setProperty: (path, value) => modelUpdates.push({model, path, value})
28 | })
29 | });
30 |
31 | baseController.onThemeChange({
32 | getParameter: () => ({
33 | getText: () => THEME
34 | })
35 | });
36 |
37 | Theming.setTheme = setTheme;
38 |
39 | assert.ok(modelUpdates.some(({model, path, value}) => model === 'themes' && path === '/SelectedTheme' && value === THEME), 'should update /SelectedTheme of the themes model');
40 | assert.equal(actualTheme, THEME, 'should call Theming.setTheme()');
41 | });
42 |
43 | QUnit.test('navTo() (UITD2-2840, UITD2-3069)', assert => {
44 | let target = null;
45 | const getRouterFor = UIComponent.getRouterFor;
46 | UIComponent.getRouterFor = () => ({
47 | navTo: _ => target = _
48 | });
49 |
50 | const TARGET = 'my-target';
51 | new BaseController().navTo(TARGET);
52 |
53 | assert.equal(target, TARGET, 'should call navTo() on the underlying router');
54 |
55 | UIComponent.getRouterFor = getRouterFor;
56 | });
57 | });
58 |
--------------------------------------------------------------------------------
/docs/test/unit/util/parametersGet.qunit.js:
--------------------------------------------------------------------------------
1 | sap.ui.define([
2 | 'sap/ui/core/Theming',
3 | 'sap/ui/core/theming/Parameters',
4 | 'tc/util/parametersGet'
5 | ], (Theming, Parameters, parametersGet) => {
6 | QUnit.module('parametersGet()');
7 |
8 | QUnit.test('should resolve with the requested parameters (UITD2-2840, UITD2-3069)', async assert => {
9 | const get = Parameters.get;
10 |
11 | Parameters.get = () => ({sapBrandColor: 'lime'});
12 | assert.deepEqual(await parametersGet('sapBrandColor'), {sapBrandColor: 'lime'}, 'should resolve with synchronous result');
13 |
14 | Parameters.get = ({callback}) => {
15 | setTimeout(() => callback({sapBrandColor: 'pink'}));
16 | return null;
17 | };
18 | assert.deepEqual(await parametersGet('sapBrandColor'), {sapBrandColor: 'pink'}, 'should resolve with asynchronous result');
19 |
20 | Parameters.get = ({callback}) => {
21 | setTimeout(() => callback({sapBrandColor: 'green'}));
22 | return {sapBrandColor: 'blue'};
23 | };
24 | assert.deepEqual(await parametersGet('sapBrandColor'), {sapBrandColor: 'blue'}, 'should resolve with the synchronous result if both synchronous and asynchronous are available');
25 |
26 | const getThemeRoot = Theming.getThemeRoot;
27 | Theming.getThemeRoot = () => null;
28 |
29 | Parameters.get = () => ({
30 | 'sapFontUrl_SAP-icons-TNT_woff2': 'url("/sap/ui/core/themes/base/fonts/SAP-icons-TNT.woff2")',
31 | 'sapFontUrl_SAP-icons-Business-Suite_woff2': 'url("/sap/ui/core/themes/base/fonts/SAP-icons-Business-Suite.woff2")'
32 | });
33 | assert.deepEqual(await parametersGet(['sapFontUrl_SAP-icons-TNT_woff2', 'sapFontUrl_SAP-icons-Business-Suite_woff2']), {
34 | 'sapFontUrl_SAP-icons-TNT_woff2': 'url("/sap/tnt/themes/base/fonts/SAP-icons-TNT.woff2")',
35 | 'sapFontUrl_SAP-icons-Business-Suite_woff2': 'url("/sap/ushell/themes/base/fonts/SAP-icons-Business-Suite.woff2")'
36 | }, 'should rewrite wrong font URLs in UI5 for SAP-icons-TNT and SAP-icons-Business-Suite');
37 |
38 | Theming.getThemeRoot = getThemeRoot;
39 | Parameters.get = get;
40 | });
41 | });
--------------------------------------------------------------------------------
/docs/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "_version": "1.64.0",
3 | "sap.app": {
4 | "id": "tc"
5 | },
6 | "sap.ui5": {
7 | "dependencies": {
8 | "minUI5Version": "1.127.0",
9 | "libs": {
10 | "sap.m": {},
11 | "sap.ui.core": {}
12 | }
13 | },
14 | "rootView": {
15 | "viewName": "tc.view.Main",
16 | "type": "XML",
17 | "id": "app"
18 | },
19 | "models": {
20 | "categories": {
21 | "type": "sap.ui.model.json.JSONModel",
22 | "uri": "./model/categories.json"
23 | },
24 | "docs": {
25 | "type": "sap.ui.model.json.JSONModel",
26 | "uri": "./model/docs.json"
27 | }
28 | },
29 | "resources": {
30 | "css": [{
31 | "uri": "./css/tc.css"
32 | }]
33 | },
34 | "routing": {
35 | "config": {
36 | "routerClass": "sap.m.routing.Router",
37 | "type": "View",
38 | "viewType": "XML",
39 | "path": "tc.view",
40 | "controlId": "app",
41 | "controlAggregation": "pages"
42 | },
43 | "routes": [
44 | {
45 | "pattern": "",
46 | "name": "overview",
47 | "target": "overview"
48 | },
49 | {
50 | "pattern": "parameters:?query:",
51 | "name": "parameters",
52 | "target": "parameters"
53 | },
54 | {
55 | "pattern": "icons/{library}:?query:",
56 | "name": "icons",
57 | "target": "icons"
58 | },
59 | {
60 | "pattern": "getting-started",
61 | "name": "getting-started",
62 | "target": "getting-started"
63 | }
64 | ],
65 | "targets": {
66 | "overview": {
67 | "id": "overview",
68 | "name": "Overview",
69 | "level": 0
70 | },
71 | "parameters": {
72 | "id": "parameters",
73 | "name": "Parameters",
74 | "level": 1
75 | },
76 | "icons": {
77 | "id": "icons",
78 | "name": "Icons",
79 | "level": 1
80 | },
81 | "getting-started": {
82 | "id": "getting-started",
83 | "name": "GettingStarted",
84 | "level": 1
85 | }
86 | }
87 | }
88 | }
89 | }
--------------------------------------------------------------------------------
/docs/view/GettingStarted.view.xml:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
13 |
15 |
16 |
17 |
20 |
21 |
22 |
23 |
24 |
25 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/docs/controller/Icons.controller.js:
--------------------------------------------------------------------------------
1 | sap.ui.define([
2 | 'sap/ui/model/Filter',
3 | 'sap/ui/model/FilterOperator',
4 | 'tc/model/formatter',
5 | 'tc/controller/Base.controller'
6 | ], (Filter, {Contains}, formatter, BaseController) => {
7 | return BaseController.extend('tc.controller.Icons', {
8 | formatter,
9 |
10 | onInit() {
11 | this.getRouter().getRoute('icons').attachMatched(this.onRouteMatched, this);
12 | },
13 |
14 | onRouteMatched(event) {
15 | const args = event.getParameter('arguments');
16 | const query = args['?query'] || {};
17 | const library = args.library;
18 | const view = this.getView();
19 | const libraries = Object.keys(view.getModel('icons').getData());
20 |
21 | if (libraries.includes(library)) {
22 | this.library = library;
23 | const iconsPage = view.byId('iconsPage');
24 |
25 | libraries.forEach(lib => iconsPage.removeStyleClass(`tcIcons--${lib}`));
26 | iconsPage.addStyleClass(`tcIcons--${library}`);
27 |
28 | const search = query.search || '';
29 | const group = query.group || null;
30 | const iconsModel = view.getModel('icons');
31 |
32 | iconsModel.setProperty(`/${this.library}/SelectedGroup`, group);
33 | iconsModel.setProperty(`/${this.library}/Search`, search);
34 |
35 | view.bindElement({
36 | path: `/${library}`,
37 | model: 'icons'
38 | });
39 |
40 | view.byId('icons').getBinding('items').filter([
41 | new Filter({path: 'Groups', test: gs => !group || gs.some(({Group}) => Group === group)}),
42 | new Filter({
43 | filters: [
44 | new Filter({path: 'Name', operator: Contains, value1: search}),
45 | new Filter({path: 'Glyph', operator: Contains, value1: search}),
46 | new Filter({path: 'Groups', test: gs => gs.some(({Group}) => Group.includes(search))}),
47 | new Filter({path: 'Tags', test: ts => ts.some(({Tag}) => Tag.includes(search))})
48 | ],
49 | and: false
50 | })
51 | ]);
52 | } else {
53 | this.getRouter().navTo('overview');
54 | }
55 | },
56 |
57 | pushState({search = null, group = null} = {}) {
58 | this.getRouter().navTo('icons', {
59 | library: this.library,
60 | '?query': {
61 | search: search || this.getView().getModel('icons').getProperty(`/${this.library}/Search`) || '',
62 | group: group || this.getView().getModel('icons').getProperty(`/${this.library}/SelectedGroup`) || ''
63 | }
64 | });
65 | },
66 |
67 | onSearch(event) {
68 | this.pushState({search: event.getParameter('query')});
69 | },
70 |
71 | onGroupChange(event) {
72 | this.pushState({group: event.getParameter('selectedItem').getText()});
73 | }
74 | });
75 | });
76 |
--------------------------------------------------------------------------------
/docs/view/Overview.view.xml:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
13 |
15 |
16 |
17 |
20 |
21 |
22 |
23 |
24 |
25 |
27 |
28 |
29 |
30 |
33 |
34 |
35 |
36 |
39 |
40 |
41 |
42 |
45 |
46 |
47 |
48 |
51 |
52 |
53 |
54 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/docs/test/unit/Component.qunit.js:
--------------------------------------------------------------------------------
1 | sap.ui.define([
2 | 'sap/ui/core/Theming',
3 | 'sap/ui/core/theming/Parameters'
4 | ], (Theming, Parameters) => {
5 | let get;
6 | let getThemeRoot;
7 | let getTheme;
8 | let windowFetch;
9 |
10 | QUnit.module('Component', {
11 | before() {
12 | get = Parameters.get;
13 | Parameters.get = () => ({
14 | 'sapFontUrl_SAP-icons-TNT_woff2': '/sap/tnt/themes/base/fonts/SAP-icons-TNT.woff2',
15 | 'sapFontUrl_SAP-icons-TNT_woff': '/sap/tnt/themes/base/fonts/SAP-icons-TNT.woff',
16 | 'sapFontUrl_SAP-icons-TNT_ttf': '/sap/tnt/themes/base/fonts/SAP-icons-TNT.ttf',
17 | 'sapFontUrl_SAP-icons-Business-Suite_woff2': '/sap/tnt/themes/base/fonts/SAP-icons-Business-Suite.woff2',
18 | 'sapFontUrl_SAP-icons-Business-Suite_woff': '/sap/tnt/themes/base/fonts/SAP-icons-Business-Suite.woff',
19 | 'sapFontUrl_SAP-icons-Business-Suite_ttf': '/sap/tnt/themes/base/fonts/SAP-icons-Business-Suite.ttf'
20 | });
21 |
22 | getThemeRoot = Theming.getThemeRoot;
23 | Theming.getThemeRoot = () => '/themeroot/UI5';
24 | getTheme = Theming.getTheme;
25 | Theming.getTheme = () => 'my_horizon';
26 |
27 | windowFetch = window.fetch;
28 | window.fetch = async url => {
29 | if ([
30 | '/sap-themes/Base/baseLib/baseTheme/fonts/SAP-icons.json',
31 | '/sap-themes/Base/baseLib/baseTheme/fonts/SAP-icons-TNT.json',
32 | '/sap-themes/Base/baseLib/baseTheme/fonts/BusinessSuiteInAppSymbols.json'
33 | ].includes(url)) {
34 | return {json: () => ({})};
35 | } else if (url === '/themeroot/Base/baseLib/baseTheme/base.less') {
36 | return {text: () => ''};
37 | } else {
38 | return windowFetch(url);
39 | }
40 | };
41 | },
42 | after() {
43 | window.fetch = windowFetch;
44 | Theming.getTheme = getTheme;
45 | Theming.getThemeRoot = getThemeRoot;
46 | Parameters.get = get;
47 | }
48 | });
49 |
50 | QUnit.test('init() (UITD2-2840, UITD2-3069)', async assert => {
51 | ['Icons', 'Parameters', 'Themes'].forEach(_ =>
52 | sap.ui.loader._.unloadResources(`tc/model/${_}.model.js`, false, true, true)
53 | );
54 |
55 | const [iconsModel, parametersModel, themesModel, Component] = await new Promise(resolve => sap.ui.require([
56 | 'tc/model/Icons.model',
57 | 'tc/model/Parameters.model',
58 | 'tc/model/Themes.model',
59 | 'tc/Component'
60 | ], (...modules) => resolve(modules)));
61 |
62 | const component = new Component();
63 | const models = {};
64 | component.setModel = (model, name) => models[name] = model;
65 | let routerInitialized = false;
66 | component.getRouter = () => ({initialize: () => routerInitialized = true});
67 |
68 | component.init();
69 |
70 | assert.equal(models.icons, iconsModel, 'should initialize the icons model');
71 | assert.equal(models.parameters, parametersModel, 'should initialize the parameters model');
72 | assert.equal(models.themes, themesModel, 'should initialize the themes model');
73 | assert.ok(routerInitialized, 'should initialize the router');
74 | });
75 | });
--------------------------------------------------------------------------------
/docs/view/Icons.view.xml:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
13 |
15 |
16 |
17 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
31 |
33 |
34 |
35 |
36 |
37 |
38 |
48 |
50 |
52 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/docs/view/Parameters.view.xml:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
12 |
14 |
15 |
16 |
19 |
20 |
21 |
22 |
23 |
40 |
41 |
42 |
53 |
55 |
64 |
66 |
67 |
68 |
69 |
74 |
75 |
76 |
77 |
82 |
83 |
84 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize_hcb/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_belize_hcb",
4 | "sLabel": "SAP High Contrast Black (Belize)",
5 | "sDescription": "High Contrast themes provide high contrast ratio by default.",
6 | "sHelpLink": "https://experience.sap.com/fiori-design-web/theming/#accessibility",
7 | "sVendor": "SAP",
8 | "oExtends": "Base.baseLib.sap_belize",
9 | "sTextDirections": "LTR,RTL",
10 | "sFallbackThemeId": "sap_hcb",
11 | "sFlavorFallbackThemeId": "sap_horizon_hcb",
12 | "sType": "STANDARD",
13 | "sThemability": "PUBLIC",
14 | "aTags": [
15 | "Fiori_2",
16 | "Fiori_3",
17 | "HighContrast"
18 | ],
19 | "sReleaseStage": "GENERAL_AVAILABILITY",
20 | "sReleaseDate": "2016-01-01T00:00:00Z",
21 | "aBadgeParameters": [
22 | {
23 | "Id": "sapBrandColor",
24 | "CssValue": "#795100",
25 | "Label": "Brand Color",
26 | "Tags": "Quick,Base,Color,Mobile"
27 | },
28 | {
29 | "Id": "sapHighlightColor",
30 | "CssValue": "#795100",
31 | "Label": "Highlight Color",
32 | "Tags": "Quick,Base,Content,Color"
33 | },
34 | {
35 | "Id": "sapBaseColor",
36 | "CssValue": "#000",
37 | "Label": "Base Color",
38 | "Tags": "Quick,Base,Color,Mobile"
39 | },
40 | {
41 | "Id": "sapShellColor",
42 | "CssValue": "#000",
43 | "Label": "Shell Header Color",
44 | "Tags": "Quick,Base,Shell,Color"
45 | },
46 | {
47 | "Id": "sapBackgroundColor",
48 | "CssValue": "#000",
49 | "Label": "Background Color",
50 | "Tags": "Quick,Base,Color,Mobile"
51 | },
52 | {
53 | "Id": "sapTextColor",
54 | "CssValue": "#fff",
55 | "Label": "Text Color",
56 | "Tags": "Quick,Base,Content,Color,Font,Mobile"
57 | },
58 | {
59 | "Id": "sapLinkColor",
60 | "CssValue": "#fff",
61 | "Label": "Link Color",
62 | "Tags": "Quick,Base,Content,Color,Font,Link"
63 | },
64 | {
65 | "Id": "sapContent_Selected_TextColor",
66 | "CssValue": "#fff",
67 | "Label": "Selected Text Color",
68 | "Tags": "Base,Content,Color,Font"
69 | },
70 | {
71 | "Id": "sapContent_Shadow0",
72 | "CssValue": "0 0 0 0.0625rem #fff",
73 | "Label": "Shadow Level 0",
74 | "Tags": "Base,Content"
75 | },
76 | {
77 | "Id": "sapField_Background",
78 | "CssValue": "#000",
79 | "Label": "Field Background Color",
80 | "Tags": "Base,Field,Color"
81 | },
82 | {
83 | "Id": "sapField_BorderColor",
84 | "CssValue": "#fff",
85 | "Label": "Field Border Color",
86 | "Tags": "Base,Field,Color"
87 | },
88 | {
89 | "Id": "sapShell_Background",
90 | "CssValue": "#000",
91 | "Label": "Shell Background Color",
92 | "Tags": "Base,Shell,Color"
93 | },
94 | {
95 | "Id": "sapShell_TextColor",
96 | "CssValue": "#fff",
97 | "Label": "Shell Text Color",
98 | "Tags": "Base,Shell,Color,Font,Mobile"
99 | },
100 | {
101 | "Id": "sapShell_InteractiveTextColor",
102 | "CssValue": "#fff",
103 | "Label": "Shell Interactive Text Color",
104 | "Tags": "Base,Shell,Color,Font"
105 | },
106 | {
107 | "Id": "sapShell_GroupTitleTextColor",
108 | "CssValue": "#fff",
109 | "Label": "Shell Group Title Text Color",
110 | "Tags": "Base,Shell,Color,Font"
111 | },
112 | {
113 | "Id": "sapShell_Shadow",
114 | "CssValue": "0 0.125rem 0 0 #fff",
115 | "Label": "Shell Shadow",
116 | "Tags": "Base,Shell"
117 | },
118 | {
119 | "Id": "sapShell_Navigation_Background",
120 | "CssValue": "#000",
121 | "Label": "Shell Navigation Area Background",
122 | "Tags": "Base,Shell,Color"
123 | },
124 | {
125 | "Id": "sapShell_Navigation_TextColor",
126 | "CssValue": "#fff",
127 | "Label": "Shell Navigation Text Color",
128 | "Tags": "Base,Shell,Color,Font"
129 | },
130 | {
131 | "Id": "sapTile_Background",
132 | "CssValue": "#000",
133 | "Label": "Tile Background Color",
134 | "Tags": "Base,Tile,Color"
135 | },
136 | {
137 | "Id": "sapTile_BorderColor",
138 | "CssValue": "#fff",
139 | "Label": "Tile Border Color",
140 | "Tags": "Base,Tile,Color"
141 | },
142 | {
143 | "Id": "sapTile_BorderCornerRadius",
144 | "CssValue": "0.25rem",
145 | "Label": "Tile Border Corner Radius",
146 | "Tags": "Base,Tile,Dimension"
147 | },
148 | {
149 | "Id": "sapTile_TextColor",
150 | "CssValue": "#fff",
151 | "Label": "Tile Text Color",
152 | "Tags": "Base,Tile,Color,Font"
153 | },
154 | {
155 | "Id": "sapTile_TitleTextColor",
156 | "CssValue": "#fff",
157 | "Label": "Tile Title Text Color",
158 | "Tags": "Base,Tile,Color,Font"
159 | }
160 | ]
161 | }
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize_hcw/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_belize_hcw",
4 | "sLabel": "SAP High Contrast White (Belize)",
5 | "sDescription": "High Contrast themes provide high contrast ratio by default.",
6 | "sHelpLink": "https://experience.sap.com/fiori-design-web/theming/#accessibility",
7 | "sVendor": "SAP",
8 | "oExtends": "Base.baseLib.sap_belize_hcb",
9 | "sTextDirections": "LTR,RTL",
10 | "sFallbackThemeId": "sap_hcb",
11 | "sFlavorFallbackThemeId": "sap_horizon_hcw",
12 | "sType": "STANDARD",
13 | "sThemability": "PUBLIC",
14 | "aTags": [
15 | "Fiori_2",
16 | "Fiori_3",
17 | "HighContrast"
18 | ],
19 | "sReleaseStage": "GENERAL_AVAILABILITY",
20 | "sReleaseDate": "2016-01-01T00:00:00Z",
21 | "aBadgeParameters": [
22 | {
23 | "Id": "sapBrandColor",
24 | "CssValue": "#e97624",
25 | "Label": "Brand Color",
26 | "Tags": "Quick,Base,Color,Mobile"
27 | },
28 | {
29 | "Id": "sapHighlightColor",
30 | "CssValue": "#e97624",
31 | "Label": "Highlight Color",
32 | "Tags": "Quick,Base,Content,Color"
33 | },
34 | {
35 | "Id": "sapBaseColor",
36 | "CssValue": "#fff",
37 | "Label": "Base Color",
38 | "Tags": "Quick,Base,Color,Mobile"
39 | },
40 | {
41 | "Id": "sapShellColor",
42 | "CssValue": "#fff",
43 | "Label": "Shell Header Color",
44 | "Tags": "Quick,Base,Shell,Color"
45 | },
46 | {
47 | "Id": "sapBackgroundColor",
48 | "CssValue": "#fff",
49 | "Label": "Background Color",
50 | "Tags": "Quick,Base,Color,Mobile"
51 | },
52 | {
53 | "Id": "sapTextColor",
54 | "CssValue": "#000",
55 | "Label": "Text Color",
56 | "Tags": "Quick,Base,Content,Color,Font,Mobile"
57 | },
58 | {
59 | "Id": "sapLinkColor",
60 | "CssValue": "#000",
61 | "Label": "Link Color",
62 | "Tags": "Quick,Base,Content,Color,Font,Link"
63 | },
64 | {
65 | "Id": "sapContent_Selected_TextColor",
66 | "CssValue": "#000",
67 | "Label": "Selected Text Color",
68 | "Tags": "Base,Content,Color,Font"
69 | },
70 | {
71 | "Id": "sapContent_Shadow0",
72 | "CssValue": "0 0 0 0.0625rem #000",
73 | "Label": "Shadow Level 0",
74 | "Tags": "Base,Content"
75 | },
76 | {
77 | "Id": "sapField_Background",
78 | "CssValue": "#fff",
79 | "Label": "Field Background Color",
80 | "Tags": "Base,Field,Color"
81 | },
82 | {
83 | "Id": "sapField_BorderColor",
84 | "CssValue": "#000",
85 | "Label": "Field Border Color",
86 | "Tags": "Base,Field,Color"
87 | },
88 | {
89 | "Id": "sapShell_Background",
90 | "CssValue": "#fff",
91 | "Label": "Shell Background Color",
92 | "Tags": "Base,Shell,Color"
93 | },
94 | {
95 | "Id": "sapShell_TextColor",
96 | "CssValue": "#000",
97 | "Label": "Shell Text Color",
98 | "Tags": "Base,Shell,Color,Font,Mobile"
99 | },
100 | {
101 | "Id": "sapShell_InteractiveTextColor",
102 | "CssValue": "#000",
103 | "Label": "Shell Interactive Text Color",
104 | "Tags": "Base,Shell,Color,Font"
105 | },
106 | {
107 | "Id": "sapShell_GroupTitleTextColor",
108 | "CssValue": "#000",
109 | "Label": "Shell Group Title Text Color",
110 | "Tags": "Base,Shell,Color,Font"
111 | },
112 | {
113 | "Id": "sapShell_Shadow",
114 | "CssValue": "0 0.125rem 0 0 #000",
115 | "Label": "Shell Shadow",
116 | "Tags": "Base,Shell"
117 | },
118 | {
119 | "Id": "sapShell_Navigation_Background",
120 | "CssValue": "#fff",
121 | "Label": "Shell Navigation Area Background",
122 | "Tags": "Base,Shell,Color"
123 | },
124 | {
125 | "Id": "sapShell_Navigation_TextColor",
126 | "CssValue": "#000",
127 | "Label": "Shell Navigation Text Color",
128 | "Tags": "Base,Shell,Color,Font"
129 | },
130 | {
131 | "Id": "sapTile_Background",
132 | "CssValue": "#fff",
133 | "Label": "Tile Background Color",
134 | "Tags": "Base,Tile,Color"
135 | },
136 | {
137 | "Id": "sapTile_BorderColor",
138 | "CssValue": "#000",
139 | "Label": "Tile Border Color",
140 | "Tags": "Base,Tile,Color"
141 | },
142 | {
143 | "Id": "sapTile_BorderCornerRadius",
144 | "CssValue": "0.25rem",
145 | "Label": "Tile Border Corner Radius",
146 | "Tags": "Base,Tile,Dimension"
147 | },
148 | {
149 | "Id": "sapTile_TextColor",
150 | "CssValue": "#000",
151 | "Label": "Tile Text Color",
152 | "Tags": "Base,Tile,Color,Font"
153 | },
154 | {
155 | "Id": "sapTile_TitleTextColor",
156 | "CssValue": "#000",
157 | "Label": "Tile Title Text Color",
158 | "Tags": "Base,Tile,Color,Font"
159 | }
160 | ]
161 | }
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_hcb/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_horizon_hcb",
4 | "sLabel": "SAP High Contrast Black (Horizon)",
5 | "sDescription": "High Contrast themes provide high contrast ratio by default.",
6 | "sHelpLink": "https://experience.sap.com/fiori-design-web/theming/#accessibility",
7 | "sVendor": "SAP",
8 | "oExtends": "Base.baseLib.sap_horizon",
9 | "sTextDirections": "LTR,RTL",
10 | "sFallbackThemeId": "sap_fiori_3_hcb",
11 | "sFlavorFallbackThemeId": "sap_horizon_hcb",
12 | "sType": "STANDARD",
13 | "sThemability": "PUBLIC",
14 | "aTags": [
15 | "Fiori_3",
16 | "HighContrast",
17 | "DarkColorScheme"
18 | ],
19 | "sReleaseStage": "GENERAL_AVAILABILITY",
20 | "sReleaseDate": "2022-04-19T00:00:00Z",
21 | "aBadgeParameters": [
22 | {
23 | "Id": "sapBrandColor",
24 | "CssValue": "#795100",
25 | "Label": "Brand Color",
26 | "Tags": "Quick,Base,Color,Mobile"
27 | },
28 | {
29 | "Id": "sapHighlightColor",
30 | "CssValue": "#795100",
31 | "Label": "Highlight Color",
32 | "Tags": "Quick,Base,Content,Color"
33 | },
34 | {
35 | "Id": "sapBaseColor",
36 | "CssValue": "#000",
37 | "Label": "Base Color",
38 | "Tags": "Quick,Base,Color,Mobile"
39 | },
40 | {
41 | "Id": "sapShellColor",
42 | "CssValue": "#000",
43 | "Label": "Shell Header Color",
44 | "Tags": "Quick,Base,Shell,Color"
45 | },
46 | {
47 | "Id": "sapBackgroundColor",
48 | "CssValue": "#000",
49 | "Label": "Background Color",
50 | "Tags": "Quick,Base,Color,Mobile"
51 | },
52 | {
53 | "Id": "sapTextColor",
54 | "CssValue": "#fff",
55 | "Label": "Text Color",
56 | "Tags": "Quick,Base,Content,Color,Font,Mobile"
57 | },
58 | {
59 | "Id": "sapLinkColor",
60 | "CssValue": "#fff",
61 | "Label": "Link Color",
62 | "Tags": "Quick,Base,Content,Color,Font,Link"
63 | },
64 | {
65 | "Id": "sapContent_Selected_TextColor",
66 | "CssValue": "#fff",
67 | "Label": "Selected Text Color",
68 | "Tags": "Base,Content,Color,Font"
69 | },
70 | {
71 | "Id": "sapContent_Shadow0",
72 | "CssValue": "0 0 0 0.0625rem #fff",
73 | "Label": "Shadow Level 0",
74 | "Tags": "Base,Content"
75 | },
76 | {
77 | "Id": "sapField_Background",
78 | "CssValue": "#000",
79 | "Label": "Field Background Color",
80 | "Tags": "Base,Field,Color"
81 | },
82 | {
83 | "Id": "sapField_BorderColor",
84 | "CssValue": "#fff",
85 | "Label": "Field Border Color",
86 | "Tags": "Base,Field,Color"
87 | },
88 | {
89 | "Id": "sapShell_Background",
90 | "CssValue": "#000",
91 | "Label": "Shell Background Color",
92 | "Tags": "Base,Shell,Color"
93 | },
94 | {
95 | "Id": "sapShell_TextColor",
96 | "CssValue": "#fff",
97 | "Label": "Shell Text Color",
98 | "Tags": "Base,Shell,Color,Font,Mobile"
99 | },
100 | {
101 | "Id": "sapShell_InteractiveTextColor",
102 | "CssValue": "#fff",
103 | "Label": "Shell Interactive Text Color",
104 | "Tags": "Base,Shell,Color,Font"
105 | },
106 | {
107 | "Id": "sapShell_GroupTitleTextColor",
108 | "CssValue": "#fff",
109 | "Label": "Shell Group Title Text Color",
110 | "Tags": "Base,Shell,Color,Font"
111 | },
112 | {
113 | "Id": "sapShell_Shadow",
114 | "CssValue": "0 0.125rem 0 0 #fff",
115 | "Label": "Shell Shadow",
116 | "Tags": "Base,Shell"
117 | },
118 | {
119 | "Id": "sapShell_Navigation_Background",
120 | "CssValue": "#000",
121 | "Label": "Shell Navigation Area Background",
122 | "Tags": "Base,Shell,Color"
123 | },
124 | {
125 | "Id": "sapShell_Navigation_TextColor",
126 | "CssValue": "#fff",
127 | "Label": "Shell Navigation Text Color",
128 | "Tags": "Base,Shell,Color,Font"
129 | },
130 | {
131 | "Id": "sapTile_Background",
132 | "CssValue": "#000",
133 | "Label": "Tile Background Color",
134 | "Tags": "Base,Tile,Color"
135 | },
136 | {
137 | "Id": "sapTile_BorderColor",
138 | "CssValue": "#fff",
139 | "Label": "Tile Border Color",
140 | "Tags": "Base,Tile,Color"
141 | },
142 | {
143 | "Id": "sapTile_BorderCornerRadius",
144 | "CssValue": "0.25rem",
145 | "Label": "Tile Border Corner Radius",
146 | "Tags": "Base,Tile,Dimension"
147 | },
148 | {
149 | "Id": "sapTile_TextColor",
150 | "CssValue": "#fff",
151 | "Label": "Tile Text Color",
152 | "Tags": "Base,Tile,Color,Font"
153 | },
154 | {
155 | "Id": "sapTile_TitleTextColor",
156 | "CssValue": "#fff",
157 | "Label": "Tile Title Text Color",
158 | "Tags": "Base,Tile,Color,Font"
159 | }
160 | ]
161 | }
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_hcw/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_horizon_hcw",
4 | "sLabel": "SAP High Contrast White (Horizon)",
5 | "sDescription": "High Contrast themes provide high contrast ratio by default.",
6 | "sHelpLink": "https://experience.sap.com/fiori-design-web/theming/#accessibility",
7 | "sVendor": "SAP",
8 | "oExtends": "Base.baseLib.sap_horizon_hcb",
9 | "sTextDirections": "LTR,RTL",
10 | "sFallbackThemeId": "sap_fiori_3_hcw",
11 | "sFlavorFallbackThemeId": "sap_horizon_hcw",
12 | "sType": "STANDARD",
13 | "sThemability": "PUBLIC",
14 | "aTags": [
15 | "Fiori_3",
16 | "HighContrast",
17 | "LightColorScheme"
18 | ],
19 | "sReleaseStage": "GENERAL_AVAILABILITY",
20 | "sReleaseDate": "2022-04-19T00:00:00Z",
21 | "aBadgeParameters": [
22 | {
23 | "Id": "sapBrandColor",
24 | "CssValue": "#e97624",
25 | "Label": "Brand Color",
26 | "Tags": "Quick,Base,Color,Mobile"
27 | },
28 | {
29 | "Id": "sapHighlightColor",
30 | "CssValue": "#e97624",
31 | "Label": "Highlight Color",
32 | "Tags": "Quick,Base,Content,Color"
33 | },
34 | {
35 | "Id": "sapBaseColor",
36 | "CssValue": "#fff",
37 | "Label": "Base Color",
38 | "Tags": "Quick,Base,Color,Mobile"
39 | },
40 | {
41 | "Id": "sapShellColor",
42 | "CssValue": "#fff",
43 | "Label": "Shell Header Color",
44 | "Tags": "Quick,Base,Shell,Color"
45 | },
46 | {
47 | "Id": "sapBackgroundColor",
48 | "CssValue": "#fff",
49 | "Label": "Background Color",
50 | "Tags": "Quick,Base,Color,Mobile"
51 | },
52 | {
53 | "Id": "sapTextColor",
54 | "CssValue": "#000",
55 | "Label": "Text Color",
56 | "Tags": "Quick,Base,Content,Color,Font,Mobile"
57 | },
58 | {
59 | "Id": "sapLinkColor",
60 | "CssValue": "#000",
61 | "Label": "Link Color",
62 | "Tags": "Quick,Base,Content,Color,Font,Link"
63 | },
64 | {
65 | "Id": "sapContent_Selected_TextColor",
66 | "CssValue": "#000",
67 | "Label": "Selected Text Color",
68 | "Tags": "Base,Content,Color,Font"
69 | },
70 | {
71 | "Id": "sapContent_Shadow0",
72 | "CssValue": "0 0 0 0.0625rem #000",
73 | "Label": "Shadow Level 0",
74 | "Tags": "Base,Content"
75 | },
76 | {
77 | "Id": "sapField_Background",
78 | "CssValue": "#fff",
79 | "Label": "Field Background Color",
80 | "Tags": "Base,Field,Color"
81 | },
82 | {
83 | "Id": "sapField_BorderColor",
84 | "CssValue": "#000",
85 | "Label": "Field Border Color",
86 | "Tags": "Base,Field,Color"
87 | },
88 | {
89 | "Id": "sapShell_Background",
90 | "CssValue": "#fff",
91 | "Label": "Shell Background Color",
92 | "Tags": "Base,Shell,Color"
93 | },
94 | {
95 | "Id": "sapShell_TextColor",
96 | "CssValue": "#000",
97 | "Label": "Shell Text Color",
98 | "Tags": "Base,Shell,Color,Font,Mobile"
99 | },
100 | {
101 | "Id": "sapShell_InteractiveTextColor",
102 | "CssValue": "#000",
103 | "Label": "Shell Interactive Text Color",
104 | "Tags": "Base,Shell,Color,Font"
105 | },
106 | {
107 | "Id": "sapShell_GroupTitleTextColor",
108 | "CssValue": "#000",
109 | "Label": "Shell Group Title Text Color",
110 | "Tags": "Base,Shell,Color,Font"
111 | },
112 | {
113 | "Id": "sapShell_Shadow",
114 | "CssValue": "0 0.125rem 0 0 #000",
115 | "Label": "Shell Shadow",
116 | "Tags": "Base,Shell"
117 | },
118 | {
119 | "Id": "sapShell_Navigation_Background",
120 | "CssValue": "#fff",
121 | "Label": "Shell Navigation Area Background",
122 | "Tags": "Base,Shell,Color"
123 | },
124 | {
125 | "Id": "sapShell_Navigation_TextColor",
126 | "CssValue": "#000",
127 | "Label": "Shell Navigation Text Color",
128 | "Tags": "Base,Shell,Color,Font"
129 | },
130 | {
131 | "Id": "sapTile_Background",
132 | "CssValue": "#fff",
133 | "Label": "Tile Background Color",
134 | "Tags": "Base,Tile,Color"
135 | },
136 | {
137 | "Id": "sapTile_BorderColor",
138 | "CssValue": "#000",
139 | "Label": "Tile Border Color",
140 | "Tags": "Base,Tile,Color"
141 | },
142 | {
143 | "Id": "sapTile_BorderCornerRadius",
144 | "CssValue": "0.25rem",
145 | "Label": "Tile Border Corner Radius",
146 | "Tags": "Base,Tile,Dimension"
147 | },
148 | {
149 | "Id": "sapTile_TextColor",
150 | "CssValue": "#000",
151 | "Label": "Tile Text Color",
152 | "Tags": "Base,Tile,Color,Font"
153 | },
154 | {
155 | "Id": "sapTile_TitleTextColor",
156 | "CssValue": "#000",
157 | "Label": "Tile Title Text Color",
158 | "Tags": "Base,Tile,Color,Font"
159 | }
160 | ]
161 | }
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_horizon",
4 | "sLabel": "SAP Morning Horizon",
5 | "sDescription": "The SAP Horizon themes are recommended as basis for custom themes for Horizon.\nSAP Morning Horizon provides a color scheme suitable for normal working conditions.",
6 | "sHelpLink": "https://experience.sap.com/fiori-design-web/morning-horizon/",
7 | "sVendor": "SAP",
8 | "oExtends": "Base.baseLib.baseTheme",
9 | "sTextDirections": "LTR,RTL",
10 | "sFallbackThemeId": "sap_fiori_3",
11 | "sType": "STANDARD",
12 | "sThemability": "PUBLIC",
13 | "aTags": [
14 | "Fiori_3",
15 | "LightColorScheme"
16 | ],
17 | "sReleaseStage": "GENERAL_AVAILABILITY",
18 | "sReleaseDate": "2022-04-19T00:00:00Z",
19 | "aBadgeParameters": [
20 | {
21 | "Id": "sapBrandColor",
22 | "CssValue": "#0070f2",
23 | "Label": "Brand Color",
24 | "Tags": "Quick,Base,Color,Mobile"
25 | },
26 | {
27 | "Id": "sapHighlightColor",
28 | "CssValue": "#0064d9",
29 | "Label": "Highlight Color",
30 | "Tags": "Quick,Base,Content,Color"
31 | },
32 | {
33 | "Id": "sapBaseColor",
34 | "CssValue": "#fff",
35 | "Label": "Base Color",
36 | "Tags": "Quick,Base,Color,Mobile"
37 | },
38 | {
39 | "Id": "sapShellColor",
40 | "CssValue": "#fff",
41 | "Label": "Shell Header Color",
42 | "Tags": "Quick,Base,Shell,Color"
43 | },
44 | {
45 | "Id": "sapBackgroundColor",
46 | "CssValue": "#f5f6f7",
47 | "Label": "Background Color",
48 | "Tags": "Quick,Base,Color,Mobile"
49 | },
50 | {
51 | "Id": "sapTextColor",
52 | "CssValue": "#131e29",
53 | "Label": "Text Color",
54 | "Tags": "Quick,Base,Content,Color,Font,Mobile"
55 | },
56 | {
57 | "Id": "sapLinkColor",
58 | "CssValue": "#0064d9",
59 | "Label": "Link Color",
60 | "Tags": "Quick,Base,Content,Color,Font,Link"
61 | },
62 | {
63 | "Id": "sapContent_Selected_TextColor",
64 | "CssValue": "#0064d9",
65 | "Label": "Selected Text Color",
66 | "Tags": "Base,Content,Color,Font"
67 | },
68 | {
69 | "Id": "sapContent_Shadow0",
70 | "CssValue": "0 0 0.125rem 0 rgba(34,53,72,0.2), 0 0.125rem 0.25rem 0 rgba(34,53,72,0.2)",
71 | "Label": "Shadow Level 0",
72 | "Tags": "Base,Content"
73 | },
74 | {
75 | "Id": "sapField_Background",
76 | "CssValue": "#eff1f2",
77 | "Label": "Field Background Color",
78 | "Tags": "Base,Field,Color"
79 | },
80 | {
81 | "Id": "sapField_BorderColor",
82 | "CssValue": "#556b81",
83 | "Label": "Field Border Color",
84 | "Tags": "Base,Field,Color"
85 | },
86 | {
87 | "Id": "sapShell_Background",
88 | "CssValue": "#eff1f2",
89 | "Label": "Shell Background Color",
90 | "Tags": "Base,Shell,Color"
91 | },
92 | {
93 | "Id": "sapShell_TextColor",
94 | "CssValue": "#131e29",
95 | "Label": "Shell Text Color",
96 | "Tags": "Base,Shell,Color,Font,Mobile"
97 | },
98 | {
99 | "Id": "sapShell_InteractiveTextColor",
100 | "CssValue": "#131e29",
101 | "Label": "Shell Interactive Text Color",
102 | "Tags": "Base,Shell,Color,Font"
103 | },
104 | {
105 | "Id": "sapShell_GroupTitleTextColor",
106 | "CssValue": "#131e29",
107 | "Label": "Shell Group Title Text Color",
108 | "Tags": "Base,Shell,Color,Font"
109 | },
110 | {
111 | "Id": "sapShell_Shadow",
112 | "CssValue": "0 0.125rem 0.125rem 0 rgba(34,53,72,0.15), inset 0 -0.0625rem 0 0 rgba(34,53,72,0.2)",
113 | "Label": "Shell Shadow",
114 | "Tags": "Base,Shell"
115 | },
116 | {
117 | "Id": "sapShell_Navigation_Background",
118 | "CssValue": "#fff",
119 | "Label": "Shell Navigation Area Background",
120 | "Tags": "Base,Shell,Color"
121 | },
122 | {
123 | "Id": "sapShell_Navigation_TextColor",
124 | "CssValue": "#131e29",
125 | "Label": "Shell Navigation Text Color",
126 | "Tags": "Base,Shell,Color,Font"
127 | },
128 | {
129 | "Id": "sapTile_Background",
130 | "CssValue": "#fff",
131 | "Label": "Tile Background Color",
132 | "Tags": "Base,Tile,Color"
133 | },
134 | {
135 | "Id": "sapTile_BorderColor",
136 | "CssValue": "transparent",
137 | "Label": "Tile Border Color",
138 | "Tags": "Base,Tile,Color"
139 | },
140 | {
141 | "Id": "sapTile_BorderCornerRadius",
142 | "CssValue": "1rem",
143 | "Label": "Tile Border Corner Radius",
144 | "Tags": "Base,Tile,Dimension"
145 | },
146 | {
147 | "Id": "sapTile_TextColor",
148 | "CssValue": "#556b82",
149 | "Label": "Tile Text Color",
150 | "Tags": "Base,Tile,Color,Font"
151 | },
152 | {
153 | "Id": "sapTile_TitleTextColor",
154 | "CssValue": "#131e29",
155 | "Label": "Tile Title Text Color",
156 | "Tags": "Base,Tile,Color,Font"
157 | }
158 | ]
159 | }
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_horizon_dark/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_horizon_dark",
4 | "sLabel": "SAP Evening Horizon",
5 | "sDescription": "The SAP Horizon themes are recommended as basis for custom themes for Horizon.\nSAP Evening Horizon provides a color scheme suitable for low lighted types of environment.",
6 | "sHelpLink": "https://experience.sap.com/fiori-design-web/evening-horizon/",
7 | "sVendor": "SAP",
8 | "oExtends": "Base.baseLib.sap_horizon",
9 | "sTextDirections": "LTR,RTL",
10 | "sFallbackThemeId": "sap_fiori_3_dark",
11 | "sFlavorFallbackThemeId": "sap_horizon_dark",
12 | "sType": "STANDARD",
13 | "sThemability": "PUBLIC",
14 | "aTags": [
15 | "Fiori_3",
16 | "DarkColorScheme"
17 | ],
18 | "sReleaseStage": "GENERAL_AVAILABILITY",
19 | "sReleaseDate": "2022-04-19T00:00:00Z",
20 | "aBadgeParameters": [
21 | {
22 | "Id": "sapBrandColor",
23 | "CssValue": "#0070f2",
24 | "Label": "Brand Color",
25 | "Tags": "Quick,Base,Color,Mobile"
26 | },
27 | {
28 | "Id": "sapHighlightColor",
29 | "CssValue": "#4db1ff",
30 | "Label": "Highlight Color",
31 | "Tags": "Quick,Base,Content,Color"
32 | },
33 | {
34 | "Id": "sapBaseColor",
35 | "CssValue": "#1d232a",
36 | "Label": "Base Color",
37 | "Tags": "Quick,Base,Color,Mobile"
38 | },
39 | {
40 | "Id": "sapShellColor",
41 | "CssValue": "#1d232a",
42 | "Label": "Shell Header Color",
43 | "Tags": "Quick,Base,Shell,Color"
44 | },
45 | {
46 | "Id": "sapBackgroundColor",
47 | "CssValue": "#12171c",
48 | "Label": "Background Color",
49 | "Tags": "Quick,Base,Color,Mobile"
50 | },
51 | {
52 | "Id": "sapTextColor",
53 | "CssValue": "#f5f6f7",
54 | "Label": "Text Color",
55 | "Tags": "Quick,Base,Content,Color,Font,Mobile"
56 | },
57 | {
58 | "Id": "sapLinkColor",
59 | "CssValue": "#008fff",
60 | "Label": "Link Color",
61 | "Tags": "Quick,Base,Content,Color,Font,Link"
62 | },
63 | {
64 | "Id": "sapContent_Selected_TextColor",
65 | "CssValue": "#4db1ff",
66 | "Label": "Selected Text Color",
67 | "Tags": "Base,Content,Color,Font"
68 | },
69 | {
70 | "Id": "sapContent_Shadow0",
71 | "CssValue": "0 0 0.125rem 0 rgba(255,255,255,0.6), 0 0.125rem 0.5rem 0 rgba(0,0,0,0.2)",
72 | "Label": "Shadow Level 0",
73 | "Tags": "Base,Content"
74 | },
75 | {
76 | "Id": "sapField_Background",
77 | "CssValue": "#242e38",
78 | "Label": "Field Background Color",
79 | "Tags": "Base,Field,Color"
80 | },
81 | {
82 | "Id": "sapField_BorderColor",
83 | "CssValue": "#a9b4be",
84 | "Label": "Field Border Color",
85 | "Tags": "Base,Field,Color"
86 | },
87 | {
88 | "Id": "sapShell_Background",
89 | "CssValue": "#12171c",
90 | "Label": "Shell Background Color",
91 | "Tags": "Base,Shell,Color"
92 | },
93 | {
94 | "Id": "sapShell_TextColor",
95 | "CssValue": "#f5f6f7",
96 | "Label": "Shell Text Color",
97 | "Tags": "Base,Shell,Color,Font,Mobile"
98 | },
99 | {
100 | "Id": "sapShell_InteractiveTextColor",
101 | "CssValue": "#f5f6f7",
102 | "Label": "Shell Interactive Text Color",
103 | "Tags": "Base,Shell,Color,Font"
104 | },
105 | {
106 | "Id": "sapShell_GroupTitleTextColor",
107 | "CssValue": "#f5f6f7",
108 | "Label": "Shell Group Title Text Color",
109 | "Tags": "Base,Shell,Color,Font"
110 | },
111 | {
112 | "Id": "sapShell_Shadow",
113 | "CssValue": "0 0.125rem 0.125rem 0 rgba(0,0,0,0.8), inset 0 -0.0625rem 0 0 rgba(255,255,255,0.2)",
114 | "Label": "Shell Shadow",
115 | "Tags": "Base,Shell"
116 | },
117 | {
118 | "Id": "sapShell_Navigation_Background",
119 | "CssValue": "#1d232a",
120 | "Label": "Shell Navigation Area Background",
121 | "Tags": "Base,Shell,Color"
122 | },
123 | {
124 | "Id": "sapShell_Navigation_TextColor",
125 | "CssValue": "#f5f6f7",
126 | "Label": "Shell Navigation Text Color",
127 | "Tags": "Base,Shell,Color,Font"
128 | },
129 | {
130 | "Id": "sapTile_Background",
131 | "CssValue": "#1d232a",
132 | "Label": "Tile Background Color",
133 | "Tags": "Base,Tile,Color"
134 | },
135 | {
136 | "Id": "sapTile_BorderColor",
137 | "CssValue": "transparent",
138 | "Label": "Tile Border Color",
139 | "Tags": "Base,Tile,Color"
140 | },
141 | {
142 | "Id": "sapTile_BorderCornerRadius",
143 | "CssValue": "1rem",
144 | "Label": "Tile Border Corner Radius",
145 | "Tags": "Base,Tile,Dimension"
146 | },
147 | {
148 | "Id": "sapTile_TextColor",
149 | "CssValue": "#8396a8",
150 | "Label": "Tile Text Color",
151 | "Tags": "Base,Tile,Color,Font"
152 | },
153 | {
154 | "Id": "sapTile_TitleTextColor",
155 | "CssValue": "#f5f6f7",
156 | "Label": "Tile Title Text Color",
157 | "Tags": "Base,Tile,Color,Font"
158 | }
159 | ]
160 | }
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_hcb/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_fiori_3_hcb",
4 | "sLabel": "SAP High Contrast Black (Quartz)",
5 | "sDescription": "High Contrast themes provide high contrast ratio by default.",
6 | "sHelpLink": "https://experience.sap.com/fiori-design-web/theming/#accessibility",
7 | "sVendor": "SAP",
8 | "oExtends": "Base.baseLib.sap_fiori_3",
9 | "sTextDirections": "LTR,RTL",
10 | "sFallbackThemeId": "sap_belize_hcb",
11 | "sFlavorFallbackThemeId": "sap_horizon_hcb",
12 | "sType": "STANDARD",
13 | "sThemability": "PUBLIC",
14 | "aTags": [
15 | "Fiori_3",
16 | "HighContrast",
17 | "DarkColorScheme"
18 | ],
19 | "mOverrides": {
20 | "UI5.sap/ui/core": [
21 | {
22 | "[,1.69.0)": {
23 | "sReleaseStage": "DEVELOPMENT"
24 | }
25 | }
26 | ],
27 | "UR.baseLib": [
28 | {
29 | "[10.30.7.311165.0,10.30.7.325480.0)": {
30 | "sReleaseStage": "DEVELOPMENT"
31 | }
32 | }
33 | ]
34 | },
35 | "sReleaseStage": "GENERAL_AVAILABILITY",
36 | "sReleaseDate": "2021-08-26T00:00:00Z",
37 | "aBadgeParameters": [
38 | {
39 | "Id": "sapBrandColor",
40 | "CssValue": "#795100",
41 | "Label": "Brand Color",
42 | "Tags": "Quick,Base,Color,Mobile"
43 | },
44 | {
45 | "Id": "sapHighlightColor",
46 | "CssValue": "#795100",
47 | "Label": "Highlight Color",
48 | "Tags": "Quick,Base,Content,Color"
49 | },
50 | {
51 | "Id": "sapBaseColor",
52 | "CssValue": "#000",
53 | "Label": "Base Color",
54 | "Tags": "Quick,Base,Color,Mobile"
55 | },
56 | {
57 | "Id": "sapShellColor",
58 | "CssValue": "#000",
59 | "Label": "Shell Header Color",
60 | "Tags": "Quick,Base,Shell,Color"
61 | },
62 | {
63 | "Id": "sapBackgroundColor",
64 | "CssValue": "#000",
65 | "Label": "Background Color",
66 | "Tags": "Quick,Base,Color,Mobile"
67 | },
68 | {
69 | "Id": "sapTextColor",
70 | "CssValue": "#fff",
71 | "Label": "Text Color",
72 | "Tags": "Quick,Base,Content,Color,Font,Mobile"
73 | },
74 | {
75 | "Id": "sapLinkColor",
76 | "CssValue": "#fff",
77 | "Label": "Link Color",
78 | "Tags": "Quick,Base,Content,Color,Font,Link"
79 | },
80 | {
81 | "Id": "sapContent_Selected_TextColor",
82 | "CssValue": "#fff",
83 | "Label": "Selected Text Color",
84 | "Tags": "Base,Content,Color,Font"
85 | },
86 | {
87 | "Id": "sapContent_Shadow0",
88 | "CssValue": "0 0 0 0.0625rem #fff",
89 | "Label": "Shadow Level 0",
90 | "Tags": "Base,Content"
91 | },
92 | {
93 | "Id": "sapField_Background",
94 | "CssValue": "#000",
95 | "Label": "Field Background Color",
96 | "Tags": "Base,Field,Color"
97 | },
98 | {
99 | "Id": "sapField_BorderColor",
100 | "CssValue": "#fff",
101 | "Label": "Field Border Color",
102 | "Tags": "Base,Field,Color"
103 | },
104 | {
105 | "Id": "sapShell_Background",
106 | "CssValue": "#000",
107 | "Label": "Shell Background Color",
108 | "Tags": "Base,Shell,Color"
109 | },
110 | {
111 | "Id": "sapShell_TextColor",
112 | "CssValue": "#fff",
113 | "Label": "Shell Text Color",
114 | "Tags": "Base,Shell,Color,Font,Mobile"
115 | },
116 | {
117 | "Id": "sapShell_InteractiveTextColor",
118 | "CssValue": "#fff",
119 | "Label": "Shell Interactive Text Color",
120 | "Tags": "Base,Shell,Color,Font"
121 | },
122 | {
123 | "Id": "sapShell_GroupTitleTextColor",
124 | "CssValue": "#fff",
125 | "Label": "Shell Group Title Text Color",
126 | "Tags": "Base,Shell,Color,Font"
127 | },
128 | {
129 | "Id": "sapShell_Shadow",
130 | "CssValue": "0 0.125rem 0 0 #fff",
131 | "Label": "Shell Shadow",
132 | "Tags": "Base,Shell"
133 | },
134 | {
135 | "Id": "sapShell_Navigation_Background",
136 | "CssValue": "#000",
137 | "Label": "Shell Navigation Area Background",
138 | "Tags": "Base,Shell,Color"
139 | },
140 | {
141 | "Id": "sapShell_Navigation_TextColor",
142 | "CssValue": "#fff",
143 | "Label": "Shell Navigation Text Color",
144 | "Tags": "Base,Shell,Color,Font"
145 | },
146 | {
147 | "Id": "sapTile_Background",
148 | "CssValue": "#000",
149 | "Label": "Tile Background Color",
150 | "Tags": "Base,Tile,Color"
151 | },
152 | {
153 | "Id": "sapTile_BorderColor",
154 | "CssValue": "#fff",
155 | "Label": "Tile Border Color",
156 | "Tags": "Base,Tile,Color"
157 | },
158 | {
159 | "Id": "sapTile_BorderCornerRadius",
160 | "CssValue": "0.25rem",
161 | "Label": "Tile Border Corner Radius",
162 | "Tags": "Base,Tile,Dimension"
163 | },
164 | {
165 | "Id": "sapTile_TextColor",
166 | "CssValue": "#fff",
167 | "Label": "Tile Text Color",
168 | "Tags": "Base,Tile,Color,Font"
169 | },
170 | {
171 | "Id": "sapTile_TitleTextColor",
172 | "CssValue": "#fff",
173 | "Label": "Tile Title Text Color",
174 | "Tags": "Base,Tile,Color,Font"
175 | }
176 | ]
177 | }
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_hcw/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_fiori_3_hcw",
4 | "sLabel": "SAP High Contrast White (Quartz)",
5 | "sDescription": "High Contrast themes provide high contrast ratio by default.",
6 | "sHelpLink": "https://experience.sap.com/fiori-design-web/theming/#accessibility",
7 | "sVendor": "SAP",
8 | "oExtends": "Base.baseLib.sap_fiori_3_hcb",
9 | "sTextDirections": "LTR,RTL",
10 | "sFallbackThemeId": "sap_belize_hcw",
11 | "sFlavorFallbackThemeId": "sap_horizon_hcw",
12 | "sType": "STANDARD",
13 | "sThemability": "PUBLIC",
14 | "aTags": [
15 | "Fiori_3",
16 | "HighContrast",
17 | "LightColorScheme"
18 | ],
19 | "mOverrides": {
20 | "UI5.sap/ui/core": [
21 | {
22 | "[,1.69.0)": {
23 | "sReleaseStage": "DEVELOPMENT"
24 | }
25 | }
26 | ],
27 | "UR.baseLib": [
28 | {
29 | "[10.30.7.311165.0,10.30.7.325480.0)": {
30 | "sReleaseStage": "DEVELOPMENT"
31 | }
32 | }
33 | ]
34 | },
35 | "sReleaseStage": "GENERAL_AVAILABILITY",
36 | "sReleaseDate": "2021-08-26T00:00:00Z",
37 | "aBadgeParameters": [
38 | {
39 | "Id": "sapBrandColor",
40 | "CssValue": "#e97624",
41 | "Label": "Brand Color",
42 | "Tags": "Quick,Base,Color,Mobile"
43 | },
44 | {
45 | "Id": "sapHighlightColor",
46 | "CssValue": "#e97624",
47 | "Label": "Highlight Color",
48 | "Tags": "Quick,Base,Content,Color"
49 | },
50 | {
51 | "Id": "sapBaseColor",
52 | "CssValue": "#fff",
53 | "Label": "Base Color",
54 | "Tags": "Quick,Base,Color,Mobile"
55 | },
56 | {
57 | "Id": "sapShellColor",
58 | "CssValue": "#fff",
59 | "Label": "Shell Header Color",
60 | "Tags": "Quick,Base,Shell,Color"
61 | },
62 | {
63 | "Id": "sapBackgroundColor",
64 | "CssValue": "#fff",
65 | "Label": "Background Color",
66 | "Tags": "Quick,Base,Color,Mobile"
67 | },
68 | {
69 | "Id": "sapTextColor",
70 | "CssValue": "#000",
71 | "Label": "Text Color",
72 | "Tags": "Quick,Base,Content,Color,Font,Mobile"
73 | },
74 | {
75 | "Id": "sapLinkColor",
76 | "CssValue": "#000",
77 | "Label": "Link Color",
78 | "Tags": "Quick,Base,Content,Color,Font,Link"
79 | },
80 | {
81 | "Id": "sapContent_Selected_TextColor",
82 | "CssValue": "#000",
83 | "Label": "Selected Text Color",
84 | "Tags": "Base,Content,Color,Font"
85 | },
86 | {
87 | "Id": "sapContent_Shadow0",
88 | "CssValue": "0 0 0 0.0625rem #000",
89 | "Label": "Shadow Level 0",
90 | "Tags": "Base,Content"
91 | },
92 | {
93 | "Id": "sapField_Background",
94 | "CssValue": "#fff",
95 | "Label": "Field Background Color",
96 | "Tags": "Base,Field,Color"
97 | },
98 | {
99 | "Id": "sapField_BorderColor",
100 | "CssValue": "#000",
101 | "Label": "Field Border Color",
102 | "Tags": "Base,Field,Color"
103 | },
104 | {
105 | "Id": "sapShell_Background",
106 | "CssValue": "#fff",
107 | "Label": "Shell Background Color",
108 | "Tags": "Base,Shell,Color"
109 | },
110 | {
111 | "Id": "sapShell_TextColor",
112 | "CssValue": "#000",
113 | "Label": "Shell Text Color",
114 | "Tags": "Base,Shell,Color,Font,Mobile"
115 | },
116 | {
117 | "Id": "sapShell_InteractiveTextColor",
118 | "CssValue": "#000",
119 | "Label": "Shell Interactive Text Color",
120 | "Tags": "Base,Shell,Color,Font"
121 | },
122 | {
123 | "Id": "sapShell_GroupTitleTextColor",
124 | "CssValue": "#000",
125 | "Label": "Shell Group Title Text Color",
126 | "Tags": "Base,Shell,Color,Font"
127 | },
128 | {
129 | "Id": "sapShell_Shadow",
130 | "CssValue": "0 0.125rem 0 0 #000",
131 | "Label": "Shell Shadow",
132 | "Tags": "Base,Shell"
133 | },
134 | {
135 | "Id": "sapShell_Navigation_Background",
136 | "CssValue": "#fff",
137 | "Label": "Shell Navigation Area Background",
138 | "Tags": "Base,Shell,Color"
139 | },
140 | {
141 | "Id": "sapShell_Navigation_TextColor",
142 | "CssValue": "#000",
143 | "Label": "Shell Navigation Text Color",
144 | "Tags": "Base,Shell,Color,Font"
145 | },
146 | {
147 | "Id": "sapTile_Background",
148 | "CssValue": "#fff",
149 | "Label": "Tile Background Color",
150 | "Tags": "Base,Tile,Color"
151 | },
152 | {
153 | "Id": "sapTile_BorderColor",
154 | "CssValue": "#000",
155 | "Label": "Tile Border Color",
156 | "Tags": "Base,Tile,Color"
157 | },
158 | {
159 | "Id": "sapTile_BorderCornerRadius",
160 | "CssValue": "0.25rem",
161 | "Label": "Tile Border Corner Radius",
162 | "Tags": "Base,Tile,Dimension"
163 | },
164 | {
165 | "Id": "sapTile_TextColor",
166 | "CssValue": "#000",
167 | "Label": "Tile Text Color",
168 | "Tags": "Base,Tile,Color,Font"
169 | },
170 | {
171 | "Id": "sapTile_TitleTextColor",
172 | "CssValue": "#000",
173 | "Label": "Tile Title Text Color",
174 | "Tags": "Base,Tile,Color,Font"
175 | }
176 | ]
177 | }
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_fiori_3",
4 | "sLabel": "SAP Quartz Light",
5 | "sDescription": "The SAP Quartz themes are recommended as basis for custom themes for Fiori 3.\nSAP Quartz Light provides a color scheme suitable for normal working conditions.",
6 | "sHelpLink": "https://experience.sap.com/fiori-design-web/quartz-light-colors/",
7 | "sVendor": "SAP",
8 | "oExtends": "Base.baseLib.sap_base_fiori",
9 | "sTextDirections": "LTR,RTL",
10 | "sFallbackThemeId": "sap_belize",
11 | "sType": "STANDARD",
12 | "sThemability": "PUBLIC",
13 | "aTags": [
14 | "Fiori_3",
15 | "LightColorScheme"
16 | ],
17 | "mOverrides": {
18 | "UI5.sap/ui/core": [
19 | {
20 | "(,1.65.0)": {
21 | "sReleaseStage": "DEVELOPMENT"
22 | }
23 | }
24 | ],
25 | "UR.baseLib": [
26 | {
27 | "(,10.30.7.312925.0]": {
28 | "sReleaseStage": "DEVELOPMENT"
29 | }
30 | }
31 | ]
32 | },
33 | "sReleaseStage": "GENERAL_AVAILABILITY",
34 | "sReleaseDate": "2019-01-01T00:00:00Z",
35 | "aBadgeParameters": [
36 | {
37 | "Id": "sapBrandColor",
38 | "CssValue": "#0a6ed1",
39 | "Label": "Brand Color",
40 | "Tags": "Quick,Base,Color,Mobile"
41 | },
42 | {
43 | "Id": "sapHighlightColor",
44 | "CssValue": "#0854a0",
45 | "Label": "Highlight Color",
46 | "Tags": "Quick,Base,Content,Color"
47 | },
48 | {
49 | "Id": "sapBaseColor",
50 | "CssValue": "#fff",
51 | "Label": "Base Color",
52 | "Tags": "Quick,Base,Color,Mobile"
53 | },
54 | {
55 | "Id": "sapShellColor",
56 | "CssValue": "#354a5f",
57 | "Label": "Shell Header Color",
58 | "Tags": "Quick,Base,Shell,Color"
59 | },
60 | {
61 | "Id": "sapBackgroundColor",
62 | "CssValue": "#f7f7f7",
63 | "Label": "Background Color",
64 | "Tags": "Quick,Base,Color,Mobile"
65 | },
66 | {
67 | "Id": "sapTextColor",
68 | "CssValue": "#232629",
69 | "Label": "Text Color",
70 | "Tags": "Quick,Base,Content,Color,Font,Mobile"
71 | },
72 | {
73 | "Id": "sapLinkColor",
74 | "CssValue": "#0a6ed1",
75 | "Label": "Link Color",
76 | "Tags": "Quick,Base,Content,Color,Font,Link"
77 | },
78 | {
79 | "Id": "sapContent_Selected_TextColor",
80 | "CssValue": "#fff",
81 | "Label": "Selected Text Color",
82 | "Tags": "Base,Content,Color,Font"
83 | },
84 | {
85 | "Id": "sapContent_Shadow0",
86 | "CssValue": "0 0 0 0.0625rem rgba(0,0,0,0.1), 0 0.125rem 0.5rem 0 rgba(0,0,0,0.1)",
87 | "Label": "Shadow Level 0",
88 | "Tags": "Base,Content"
89 | },
90 | {
91 | "Id": "sapField_Background",
92 | "CssValue": "#fff",
93 | "Label": "Field Background Color",
94 | "Tags": "Base,Field,Color"
95 | },
96 | {
97 | "Id": "sapField_BorderColor",
98 | "CssValue": "#89919a",
99 | "Label": "Field Border Color",
100 | "Tags": "Base,Field,Color"
101 | },
102 | {
103 | "Id": "sapShell_Background",
104 | "CssValue": "#edeff0",
105 | "Label": "Shell Background Color",
106 | "Tags": "Base,Shell,Color"
107 | },
108 | {
109 | "Id": "sapShell_TextColor",
110 | "CssValue": "#fff",
111 | "Label": "Shell Text Color",
112 | "Tags": "Base,Shell,Color,Font,Mobile"
113 | },
114 | {
115 | "Id": "sapShell_InteractiveTextColor",
116 | "CssValue": "#d1e8ff",
117 | "Label": "Shell Interactive Text Color",
118 | "Tags": "Base,Shell,Color,Font"
119 | },
120 | {
121 | "Id": "sapShell_GroupTitleTextColor",
122 | "CssValue": "#232629",
123 | "Label": "Shell Group Title Text Color",
124 | "Tags": "Base,Shell,Color,Font"
125 | },
126 | {
127 | "Id": "sapShell_Shadow",
128 | "CssValue": "0 0.125rem 0.125rem 0 rgba(0,0,0,0.08), inset 0 -0.0625rem 0 0 rgba(0,0,0,0.18)",
129 | "Label": "Shell Shadow",
130 | "Tags": "Base,Shell"
131 | },
132 | {
133 | "Id": "sapShell_Navigation_Background",
134 | "CssValue": "#354a5f",
135 | "Label": "Shell Navigation Area Background",
136 | "Tags": "Base,Shell,Color"
137 | },
138 | {
139 | "Id": "sapShell_Navigation_TextColor",
140 | "CssValue": "#fff",
141 | "Label": "Shell Navigation Text Color",
142 | "Tags": "Base,Shell,Color,Font"
143 | },
144 | {
145 | "Id": "sapTile_Background",
146 | "CssValue": "#fff",
147 | "Label": "Tile Background Color",
148 | "Tags": "Base,Tile,Color"
149 | },
150 | {
151 | "Id": "sapTile_BorderColor",
152 | "CssValue": "transparent",
153 | "Label": "Tile Border Color",
154 | "Tags": "Base,Tile,Color"
155 | },
156 | {
157 | "Id": "sapTile_BorderCornerRadius",
158 | "CssValue": ".25rem",
159 | "Label": "Tile Border Corner Radius",
160 | "Tags": "Base,Tile,Dimension"
161 | },
162 | {
163 | "Id": "sapTile_TextColor",
164 | "CssValue": "#6a6d70",
165 | "Label": "Tile Text Color",
166 | "Tags": "Base,Tile,Color,Font"
167 | },
168 | {
169 | "Id": "sapTile_TitleTextColor",
170 | "CssValue": "#232629",
171 | "Label": "Tile Title Text Color",
172 | "Tags": "Base,Tile,Color,Font"
173 | }
174 | ]
175 | }
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_fiori_3_dark/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_fiori_3_dark",
4 | "sLabel": "SAP Quartz Dark",
5 | "sDescription": "The SAP Quartz themes are recommended as basis for custom themes for Fiori 3.\nSAP Quartz Dark provides a color scheme suitable for low lighted types of environment.",
6 | "sHelpLink": "https://experience.sap.com/fiori-design-web/quartz-dark-colors/",
7 | "sVendor": "SAP",
8 | "oExtends": "Base.baseLib.sap_fiori_3",
9 | "sTextDirections": "LTR,RTL",
10 | "sFallbackThemeId": "sap_belize_plus",
11 | "sFlavorFallbackThemeId": "sap_horizon_dark",
12 | "sType": "STANDARD",
13 | "sThemability": "PUBLIC",
14 | "aTags": [
15 | "Fiori_3",
16 | "DarkColorScheme"
17 | ],
18 | "mOverrides": {
19 | "UI5.sap/ui/core": [
20 | {
21 | "[,1.71.27)": {
22 | "sReleaseStage": "DEVELOPMENT"
23 | }
24 | }
25 | ],
26 | "UR.baseLib": [
27 | {
28 | "[10.30.7.311165.0,10.30.7.322142.0)": {
29 | "sReleaseStage": "DEVELOPMENT"
30 | }
31 | }
32 | ]
33 | },
34 | "sReleaseStage": "GENERAL_AVAILABILITY",
35 | "sReleaseDate": "2020-01-01T00:00:00Z",
36 | "aBadgeParameters": [
37 | {
38 | "Id": "sapBrandColor",
39 | "CssValue": "#91c8f6",
40 | "Label": "Brand Color",
41 | "Tags": "Quick,Base,Color,Mobile"
42 | },
43 | {
44 | "Id": "sapHighlightColor",
45 | "CssValue": "#91c8f6",
46 | "Label": "Highlight Color",
47 | "Tags": "Quick,Base,Content,Color"
48 | },
49 | {
50 | "Id": "sapBaseColor",
51 | "CssValue": "#29313a",
52 | "Label": "Base Color",
53 | "Tags": "Quick,Base,Color,Mobile"
54 | },
55 | {
56 | "Id": "sapShellColor",
57 | "CssValue": "#354a5f",
58 | "Label": "Shell Header Color",
59 | "Tags": "Quick,Base,Shell,Color"
60 | },
61 | {
62 | "Id": "sapBackgroundColor",
63 | "CssValue": "#1c2228",
64 | "Label": "Background Color",
65 | "Tags": "Quick,Base,Color,Mobile"
66 | },
67 | {
68 | "Id": "sapTextColor",
69 | "CssValue": "#fafafa",
70 | "Label": "Text Color",
71 | "Tags": "Quick,Base,Content,Color,Font,Mobile"
72 | },
73 | {
74 | "Id": "sapLinkColor",
75 | "CssValue": "#2994ee",
76 | "Label": "Link Color",
77 | "Tags": "Quick,Base,Content,Color,Font,Link"
78 | },
79 | {
80 | "Id": "sapContent_Selected_TextColor",
81 | "CssValue": "#29313a",
82 | "Label": "Selected Text Color",
83 | "Tags": "Base,Content,Color,Font"
84 | },
85 | {
86 | "Id": "sapContent_Shadow0",
87 | "CssValue": "0 0 0 0.0625rem rgba(255,255,255,0.2), 0 0.125rem 0.5rem 0 rgba(0,0,0,0.3)",
88 | "Label": "Shadow Level 0",
89 | "Tags": "Base,Content"
90 | },
91 | {
92 | "Id": "sapField_Background",
93 | "CssValue": "#29313a",
94 | "Label": "Field Background Color",
95 | "Tags": "Base,Field,Color"
96 | },
97 | {
98 | "Id": "sapField_BorderColor",
99 | "CssValue": "#8696a9",
100 | "Label": "Field Border Color",
101 | "Tags": "Base,Field,Color"
102 | },
103 | {
104 | "Id": "sapShell_Background",
105 | "CssValue": "#232a31",
106 | "Label": "Shell Background Color",
107 | "Tags": "Base,Shell,Color"
108 | },
109 | {
110 | "Id": "sapShell_TextColor",
111 | "CssValue": "#fafafa",
112 | "Label": "Shell Text Color",
113 | "Tags": "Base,Shell,Color,Font,Mobile"
114 | },
115 | {
116 | "Id": "sapShell_InteractiveTextColor",
117 | "CssValue": "#d1e8ff",
118 | "Label": "Shell Interactive Text Color",
119 | "Tags": "Base,Shell,Color,Font"
120 | },
121 | {
122 | "Id": "sapShell_GroupTitleTextColor",
123 | "CssValue": "#fafafa",
124 | "Label": "Shell Group Title Text Color",
125 | "Tags": "Base,Shell,Color,Font"
126 | },
127 | {
128 | "Id": "sapShell_Shadow",
129 | "CssValue": "0 0.125rem 0.125rem 0 rgba(0,0,0,0.8), inset 0 -0.0625rem 0 0 rgba(255,255,255,0.2)",
130 | "Label": "Shell Shadow",
131 | "Tags": "Base,Shell"
132 | },
133 | {
134 | "Id": "sapShell_Navigation_Background",
135 | "CssValue": "#354a5f",
136 | "Label": "Shell Navigation Area Background",
137 | "Tags": "Base,Shell,Color"
138 | },
139 | {
140 | "Id": "sapShell_Navigation_TextColor",
141 | "CssValue": "#fafafa",
142 | "Label": "Shell Navigation Text Color",
143 | "Tags": "Base,Shell,Color,Font"
144 | },
145 | {
146 | "Id": "sapTile_Background",
147 | "CssValue": "#29313a",
148 | "Label": "Tile Background Color",
149 | "Tags": "Base,Tile,Color"
150 | },
151 | {
152 | "Id": "sapTile_BorderColor",
153 | "CssValue": "transparent",
154 | "Label": "Tile Border Color",
155 | "Tags": "Base,Tile,Color"
156 | },
157 | {
158 | "Id": "sapTile_BorderCornerRadius",
159 | "CssValue": ".25rem",
160 | "Label": "Tile Border Corner Radius",
161 | "Tags": "Base,Tile,Dimension"
162 | },
163 | {
164 | "Id": "sapTile_TextColor",
165 | "CssValue": "#d3d7d9",
166 | "Label": "Tile Text Color",
167 | "Tags": "Base,Tile,Color,Font"
168 | },
169 | {
170 | "Id": "sapTile_TitleTextColor",
171 | "CssValue": "#fafafa",
172 | "Label": "Tile Title Text Color",
173 | "Tags": "Base,Tile,Color,Font"
174 | }
175 | ]
176 | }
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize_plus/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_belize_plus",
4 | "sLabel": "SAP Belize Deep",
5 | "sDescription": "The SAP Belize theme is a light theme, but has some dark contrast areas such as the footer bar and the notifications in the Fiori launchpad. SAP Belize Deep has more dominant contrast areas compared to SAP Belize.",
6 | "sHelpLink": "https://experience.sap.com/fiori-design-web/colors/",
7 | "sVendor": "SAP",
8 | "oExtends": "Base.baseLib.sap_belize",
9 | "aBundled": [
10 | "sap_belize"
11 | ],
12 | "sTextDirections": "LTR,RTL",
13 | "sFallbackThemeId": "sap_belize",
14 | "sFlavorFallbackThemeId": "sap_horizon_dark",
15 | "sType": "STANDARD",
16 | "sThemability": "PRIVATE",
17 | "mCssScopes": {
18 | "css_variables": {
19 | "sEmbeddingMethod": "APPEND",
20 | "aScopes": [
21 | {
22 | "sLabel": "Contrast",
23 | "sSelector": "sapContrastPlus",
24 | "sThemeIdSuffix": "Contrast",
25 | "sThemability": "PUBLIC",
26 | "aThemabilityFilter": [
27 | "Color"
28 | ],
29 | "sEmbeddedFile": "css_variables",
30 | "sEmbeddedCompareFile": "sap_belize.css_variables"
31 | }
32 | ],
33 | "sBaseFile": "sap_belize.css_variables"
34 | }
35 | },
36 | "sReleaseStage": "GENERAL_AVAILABILITY",
37 | "sReleaseDate": "2016-01-01T00:00:00Z",
38 | "aBadgeParameters": [
39 | {
40 | "Id": "sapBrandColor",
41 | "CssValue": "#427cac",
42 | "Label": "Brand Color",
43 | "Tags": "Quick,Base,Color,Mobile"
44 | },
45 | {
46 | "Id": "sapHighlightColor",
47 | "CssValue": "#91c8f6",
48 | "Label": "Highlight Color",
49 | "Tags": "Quick,Base,Content,Color"
50 | },
51 | {
52 | "Id": "sapBaseColor",
53 | "CssValue": "#3f5161",
54 | "Label": "Base Color",
55 | "Tags": "Quick,Base,Color,Mobile"
56 | },
57 | {
58 | "Id": "sapShellColor",
59 | "CssValue": "transparent",
60 | "Label": "Shell Header Color",
61 | "Tags": "Quick,Base,Shell,Color"
62 | },
63 | {
64 | "Id": "sapBackgroundColor",
65 | "CssValue": "#3f5161",
66 | "Label": "Background Color",
67 | "Tags": "Quick,Base,Color,Mobile"
68 | },
69 | {
70 | "Id": "sapTextColor",
71 | "CssValue": "#fafafa",
72 | "Label": "Text Color",
73 | "Tags": "Quick,Base,Content,Color,Font,Mobile"
74 | },
75 | {
76 | "Id": "sapLinkColor",
77 | "CssValue": "#7ed0ff",
78 | "Label": "Link Color",
79 | "Tags": "Quick,Base,Content,Color,Font,Link"
80 | },
81 | {
82 | "Id": "sapContent_Selected_TextColor",
83 | "CssValue": "#2f3c48",
84 | "Label": "Selected Text Color",
85 | "Tags": "Base,Content,Color,Font"
86 | },
87 | {
88 | "Id": "sapContent_Shadow0",
89 | "CssValue": "0 0 0 1px rgba(255,255,255,0.2)",
90 | "Label": "Shadow Level 0",
91 | "Tags": "Base,Content"
92 | },
93 | {
94 | "Id": "sapField_Background",
95 | "CssValue": "#495e70",
96 | "Label": "Field Background Color",
97 | "Tags": "Base,Field,Color"
98 | },
99 | {
100 | "Id": "sapField_BorderColor",
101 | "CssValue": "#7891a7",
102 | "Label": "Field Border Color",
103 | "Tags": "Base,Field,Color"
104 | },
105 | {
106 | "Id": "sapShell_Background",
107 | "CssValue": "#6585a3",
108 | "Label": "Shell Background Color",
109 | "Tags": "Base,Shell,Color"
110 | },
111 | {
112 | "Id": "sapShell_TextColor",
113 | "CssValue": "#fff",
114 | "Label": "Shell Text Color",
115 | "Tags": "Base,Shell,Color,Font,Mobile"
116 | },
117 | {
118 | "Id": "sapShell_InteractiveTextColor",
119 | "CssValue": "#fff",
120 | "Label": "Shell Interactive Text Color",
121 | "Tags": "Base,Shell,Color,Font"
122 | },
123 | {
124 | "Id": "sapShell_GroupTitleTextColor",
125 | "CssValue": "#fafafa",
126 | "Label": "Shell Group Title Text Color",
127 | "Tags": "Base,Shell,Color,Font"
128 | },
129 | {
130 | "Id": "sapShell_Shadow",
131 | "CssValue": "0 0.125rem 0 0 #597895",
132 | "Label": "Shell Shadow",
133 | "Tags": "Base,Shell"
134 | },
135 | {
136 | "Id": "sapShell_Navigation_Background",
137 | "CssValue": "transparent",
138 | "Label": "Shell Navigation Area Background",
139 | "Tags": "Base,Shell,Color"
140 | },
141 | {
142 | "Id": "sapShell_Navigation_TextColor",
143 | "CssValue": "#fafafa",
144 | "Label": "Shell Navigation Text Color",
145 | "Tags": "Base,Shell,Color,Font"
146 | },
147 | {
148 | "Id": "sapTile_Background",
149 | "CssValue": "#3f5161",
150 | "Label": "Tile Background Color",
151 | "Tags": "Base,Tile,Color"
152 | },
153 | {
154 | "Id": "sapTile_BorderColor",
155 | "CssValue": "transparent",
156 | "Label": "Tile Border Color",
157 | "Tags": "Base,Tile,Color"
158 | },
159 | {
160 | "Id": "sapTile_BorderCornerRadius",
161 | "CssValue": ".25rem",
162 | "Label": "Tile Border Corner Radius",
163 | "Tags": "Base,Tile,Dimension"
164 | },
165 | {
166 | "Id": "sapTile_TextColor",
167 | "CssValue": "#ddd",
168 | "Label": "Tile Text Color",
169 | "Tags": "Base,Tile,Color,Font"
170 | },
171 | {
172 | "Id": "sapTile_TitleTextColor",
173 | "CssValue": "#fafafa",
174 | "Label": "Tile Title Text Color",
175 | "Tags": "Base,Tile,Color,Font"
176 | }
177 | ]
178 | }
--------------------------------------------------------------------------------
/content/Base/baseLib/sap_belize/.theming:
--------------------------------------------------------------------------------
1 | {
2 | "sEntity": "Theme",
3 | "sId": "sap_belize",
4 | "sLabel": "SAP Belize",
5 | "sDescription": "The SAP Belize theme is a light theme, but has some dark contrast areas such as the footer bar and the notifications in the Fiori launchpad.\nThe SAP Belize theme is the default theme for Fiori 2. However it can still be used for Fiori 3.",
6 | "sHelpLink": "https://experience.sap.com/fiori-design-web/colors/",
7 | "sVendor": "SAP",
8 | "oExtends": "Base.baseLib.sap_base_fiori",
9 | "aBundled": [
10 | "sap_belize_plus"
11 | ],
12 | "sTextDirections": "LTR,RTL",
13 | "sFallbackThemeId": "sap_bluecrystal",
14 | "sType": "STANDARD",
15 | "sThemability": "PUBLIC",
16 | "mCssScopes": {
17 | "css_variables": {
18 | "sEmbeddingMethod": "APPEND",
19 | "aScopes": [
20 | {
21 | "sLabel": "Contrast",
22 | "sSelector": "sapContrast",
23 | "sThemeIdSuffix": "Contrast",
24 | "sThemability": "PUBLIC",
25 | "aThemabilityFilter": [
26 | "Color"
27 | ],
28 | "sEmbeddedFile": "sap_belize_plus.css_variables",
29 | "sEmbeddedCompareFile": "css_variables"
30 | }
31 | ],
32 | "sBaseFile": "css_variables"
33 | }
34 | },
35 | "aTags": [
36 | "Fiori_2",
37 | "Fiori_3"
38 | ],
39 | "sReleaseStage": "GENERAL_AVAILABILITY",
40 | "sReleaseDate": "2016-01-01T00:00:00Z",
41 | "aBadgeParameters": [
42 | {
43 | "Id": "sapBrandColor",
44 | "CssValue": "#427cac",
45 | "Label": "Brand Color",
46 | "Tags": "Quick,Base,Color,Mobile"
47 | },
48 | {
49 | "Id": "sapHighlightColor",
50 | "CssValue": "#427cac",
51 | "Label": "Highlight Color",
52 | "Tags": "Quick,Base,Content,Color"
53 | },
54 | {
55 | "Id": "sapBaseColor",
56 | "CssValue": "#eff4f9",
57 | "Label": "Base Color",
58 | "Tags": "Quick,Base,Color,Mobile"
59 | },
60 | {
61 | "Id": "sapShellColor",
62 | "CssValue": "transparent",
63 | "Label": "Shell Header Color",
64 | "Tags": "Quick,Base,Shell,Color"
65 | },
66 | {
67 | "Id": "sapBackgroundColor",
68 | "CssValue": "#fafafa",
69 | "Label": "Background Color",
70 | "Tags": "Quick,Base,Color,Mobile"
71 | },
72 | {
73 | "Id": "sapTextColor",
74 | "CssValue": "#333",
75 | "Label": "Text Color",
76 | "Tags": "Quick,Base,Content,Color,Font,Mobile"
77 | },
78 | {
79 | "Id": "sapLinkColor",
80 | "CssValue": "#0070b1",
81 | "Label": "Link Color",
82 | "Tags": "Quick,Base,Content,Color,Font,Link"
83 | },
84 | {
85 | "Id": "sapContent_Selected_TextColor",
86 | "CssValue": "#fff",
87 | "Label": "Selected Text Color",
88 | "Tags": "Base,Content,Color,Font"
89 | },
90 | {
91 | "Id": "sapContent_Shadow0",
92 | "CssValue": "0 0 0 1px rgba(0,0,0,0.15)",
93 | "Label": "Shadow Level 0",
94 | "Tags": "Base,Content"
95 | },
96 | {
97 | "Id": "sapField_Background",
98 | "CssValue": "#fff",
99 | "Label": "Field Background Color",
100 | "Tags": "Base,Field,Color"
101 | },
102 | {
103 | "Id": "sapField_BorderColor",
104 | "CssValue": "#bfbfbf",
105 | "Label": "Field Border Color",
106 | "Tags": "Base,Field,Color"
107 | },
108 | {
109 | "Id": "sapShell_Background",
110 | "CssValue": "#cad8e6",
111 | "Label": "Shell Background Color",
112 | "Tags": "Base,Shell,Color"
113 | },
114 | {
115 | "Id": "sapShell_TextColor",
116 | "CssValue": "#346187",
117 | "Label": "Shell Text Color",
118 | "Tags": "Base,Shell,Color,Font,Mobile"
119 | },
120 | {
121 | "Id": "sapShell_InteractiveTextColor",
122 | "CssValue": "#346187",
123 | "Label": "Shell Interactive Text Color",
124 | "Tags": "Base,Shell,Color,Font"
125 | },
126 | {
127 | "Id": "sapShell_GroupTitleTextColor",
128 | "CssValue": "#333",
129 | "Label": "Shell Group Title Text Color",
130 | "Tags": "Base,Shell,Color,Font"
131 | },
132 | {
133 | "Id": "sapShell_Shadow",
134 | "CssValue": "0 0.125rem 0 0 #b9cbde",
135 | "Label": "Shell Shadow",
136 | "Tags": "Base,Shell"
137 | },
138 | {
139 | "Id": "sapShell_Navigation_Background",
140 | "CssValue": "transparent",
141 | "Label": "Shell Navigation Area Background",
142 | "Tags": "Base,Shell,Color"
143 | },
144 | {
145 | "Id": "sapShell_Navigation_TextColor",
146 | "CssValue": "#333",
147 | "Label": "Shell Navigation Text Color",
148 | "Tags": "Base,Shell,Color,Font"
149 | },
150 | {
151 | "Id": "sapTile_Background",
152 | "CssValue": "#fff",
153 | "Label": "Tile Background Color",
154 | "Tags": "Base,Tile,Color"
155 | },
156 | {
157 | "Id": "sapTile_BorderColor",
158 | "CssValue": "transparent",
159 | "Label": "Tile Border Color",
160 | "Tags": "Base,Tile,Color"
161 | },
162 | {
163 | "Id": "sapTile_BorderCornerRadius",
164 | "CssValue": ".25rem",
165 | "Label": "Tile Border Corner Radius",
166 | "Tags": "Base,Tile,Dimension"
167 | },
168 | {
169 | "Id": "sapTile_TextColor",
170 | "CssValue": "#666",
171 | "Label": "Tile Text Color",
172 | "Tags": "Base,Tile,Color,Font"
173 | },
174 | {
175 | "Id": "sapTile_TitleTextColor",
176 | "CssValue": "#333",
177 | "Label": "Tile Title Text Color",
178 | "Tags": "Base,Tile,Color,Font"
179 | }
180 | ]
181 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://api.reuse.software/info/github.com/SAP/theming-base-content)
2 |
3 | # SAP Theming Base Content
4 |
5 | This repository provides color, font and metric definitions of SAP themes to be used by application UIs and UI frameworks.
6 |
7 | ## Description
8 | The SAP Theming Base Content contains all necessary data to connect to the SAP global theming infrastructure.
9 | The content exposes the central set of colors, metrics and resources of a theme which can be connected by HTML based UI frameworks to get the right values for their specific CSS.
10 | The consumption is done by the usage of parameter sets exposed in files of the Base Content.
11 | When a HTML based UI framework uses the exposed parameters, it also benefits from the fact that it is integrated in the branding tool of SAP, the [UI Theme Designer](https://cloudplatform.sap.com/capabilities/product-info.UI-Theme-Designer.1bb55da4-292a-4f33-8d97-49ba1d1638f0.html), allowing a customer to create his own custom theme based on SAP themes.
12 |
13 | ## Installation
14 | This repository contains all the source files and generated files a framework needs to connect to the theming infrastructure.
15 | There is no installation needed to consume the files.
16 | You can clone the repository or get wanted the ZIP/TAR from the release section of this repository.
17 | You can also consume the `SAP theming Base Content` via [npm](https://docs.npmjs.com/getting-started/what-is-npm):
18 | ```sh
19 | npm install @sap-theming/theming-base-content
20 | ```
21 |
22 | ## Usage
23 | The SAP Theming Base Content is structured in the “content” of the project folder
24 | The Base Framework content is backward compatible. Therefore, the latest released version can be used for all older versions.
25 |
26 | ## Content
27 | The SAP Theming Base Content contains
28 | 1) the [Less CSS](http://lesscss.org/) parameter set exposed in the file [base.less](./content/Base/baseLib/sap_fiori_3/base.less)`. The parameters values are defined by CSS values or calculation formulas with selcontained dependencies.
29 | 2) the [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) parameter set exposed by the CSS file [css_variables.css](./content/Base/baseLib/sap_fiori_3/css_variables.css). The parameter dependencies are resolved.
30 | 3) the [SASS Variables](https://sass-lang.com/) parameter set exposed by the SCSS file [sass_variables.scss](./content/Base/baseLib/sap_fiori_3/sass_variables.scss). The parameter dependencies are resolved.
31 | 4) the [Less CSS](http://lesscss.org/) parameter set exposed by the less file [less_variables.less](./content/Base/baseLib/sap_fiori_3/less_variables.less). The parameter dependencies are resolved.
32 | 5) the JSON parameter set exposed by the less file [variables.json](./content/Base/baseLib/sap_fiori_3/variables.json). The parameter dependencies are resolved.
33 | 6) resources (fonts, images, SVGs etc.)
34 |
35 | ## Consumption of CSS Parameters
36 | The CSS parameters are exposed by a file `css_variables.css` in each theme folder
37 | e.g. `Base/baseLib/sap_fiori_3/css_varables.css`
38 |
39 | After you have downloaded this file, you can use the calculated CSS parameter values.
40 |
41 | ### Resource Parameters
42 | CSS parameters which refer to an URL (e.g. `sapCompanyLogo`) are handled a bit different. The CSS variables are applied as a simple string token replacement in the browser. Therefore, there is no URL resolution based on the location of the parameter definition. As a workaround, we introduced a CSS class for each resource CSS parameter that can be used by the consuming HTML.
43 |
44 | ```css
45 | ...
46 | .background-image--sapCompanyLogo {
47 | background-image: var(--sapCompanyLogo);
48 | }
49 | ...
50 | ```
51 |
52 | The class selector contains the declaration type of the class property and the name of the CSS parameter.
53 |
54 | ### SAP Custom Font Parameters
55 | The custom fonts which have to be used for the specific theme are not declared by a font-face at-rule.
56 | There are CSS parameters pointing to the locations.
57 |
58 | ```css
59 | :root {
60 | ...
61 | --sapFontUrl_72_Regular_woff2: url('../../../Base/baseLib/baseTheme/fonts/72-Regular.woff2');
62 | --sapFontUrl_72_Regular_woff: url('../../../Base/baseLib/baseTheme/fonts/72-Regular.woff');
63 | --sapFontUrl_72_...
64 | }
65 | ```
66 | Unfortunately, these parameters cannot be used to define a font-face declaration. It seems that the font-face is not part of the “:root” scope. Therefore, it is necessary to define the font declaration you need in your own CSS.
67 |
68 | ## Consumption of LESS Parameters
69 | Samples how to refer the parameters and integrate in theming infrastructure are documented in the module `@sap-theming/theming-examples-less` (not yet available).
70 |
71 | ## Serve Resources in NodeJS (express Example)
72 | You can `require` the theming-base-content module to get the location of the resources.
73 | ```js
74 | 'use strict';
75 |
76 | const express = require("express");
77 | const app = express();
78 | const baseContentResourcePath = require('@sap-theming/theming-base-content').resourcePath;
79 |
80 | app.use(express.static(baseContentResourcePath));
81 |
82 | app.listen(3000, () => console.log('Try http://localhost:3000/Base/baseLib/baseTheme/fonts/72-Regular.woff2'));
83 | ```
84 |
85 | ## Contributing
86 | This repository is containing the SAP Open Source Theming Content releases build internally. It is a channel for external distribution. This repository is not open for external contributions.
87 |
--------------------------------------------------------------------------------
/docs/model/Icons.model.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /** @typedef {Object} IconMapping maps icon ids to glyphs */
4 | /** @typedef {{groups: {name: string, text: string, icons: {name: string}[]}[]}} Groups lists name/text/list of icon ids of groups */
5 | /** @typedef {Object} Tags maps icon ids to tags */
6 |
7 | sap.ui.define([
8 | 'sap/ui/VersionInfo',
9 | 'sap/ui/core/IconPool',
10 | 'sap/ui/core/Theming',
11 | 'sap/ui/model/json/JSONModel',
12 | 'tc/util/uniq'
13 | ], (VersionInfo, IconPool, Theming, JSONModel, uniq) => {
14 | /**
15 | * @example
16 | * await getIcons() // =>
17 | * // {
18 | * // 'SAP-icons': {
19 | * // '0xe000': {
20 | * // names: ['accidental-leave'],
21 | * // groups: [],
22 | * // tags: ['leave'],
23 | * // rtl: 'flip'
24 | * // },
25 | * // …
26 | * // },
27 | * // …
28 | * // }
29 | * @return {Promise>>}
30 | */
31 | async function getIconLibraries() {
32 | if (Theming.getThemeRoot()) {
33 | // new icons
34 | const fonts = Theming.getThemeRoot()
35 | .replace(/\/UI5\/?$/, '/Base/baseLib/baseTheme/fonts')
36 | .replace('/themeroot/', '/sap-themes/');
37 | const [icons, tnt, bs] = await Promise.all(['SAP-icons', 'SAP-icons-TNT', 'BusinessSuiteInAppSymbols'].map(_ => fetch(`${fonts}/${_}.json`)
38 | .then(_ => _.json())
39 | ));
40 |
41 | return {
42 | 'SAP-icons': icons,
43 | 'SAP-icons-TNT': tnt,
44 | 'SAP-icons-Business-Suite': bs
45 | };
46 | } else {
47 | // legacy icons
48 | const {version} = await VersionInfo.load();
49 | const ui5Root = document.getElementById('sap-ui-bootstrap').getAttribute('src')
50 | .replace(new RegExp(version.split('.').slice(0, 2).join('\\.')), version)
51 | .replace(/\/resources\/sap-ui-core\.js$/, '');
52 | const [tnt, bs, iconsGroups, iconsTags, tntGroups, tntTags, bsGroups, bsTags] =
53 | /** @type {[{config: {path: Object}, icons: IconMapping}, IconMapping, Groups, Tags, Groups, Tags, Groups, Tags]} */ (await Promise.all([
54 | 'resources/sap/tnt/themes/base/fonts/SAP-icons-TNT.json',
55 | 'resources/sap/ushell/themes/base/fonts/BusinessSuiteInAppSymbols.json',
56 | 'test-resources/sap/m/demokit/iconExplorer/webapp/model/SAP-icons/groups.json',
57 | 'test-resources/sap/m/demokit/iconExplorer/webapp/model/SAP-icons/tags.json',
58 | 'test-resources/sap/m/demokit/iconExplorer/webapp/model/SAP-icons-TNT/groups.json',
59 | 'test-resources/sap/m/demokit/iconExplorer/webapp/model/SAP-icons-TNT/tags.json',
60 | 'test-resources/sap/m/demokit/iconExplorer/webapp/model/BusinessSuiteInAppSymbols/groups.json',
61 | 'test-resources/sap/m/demokit/iconExplorer/webapp/model/BusinessSuiteInAppSymbols/tags.json',
62 | ].map(url => fetch(`${ui5Root}/${url}`).then(res => res.json()))));
63 |
64 | return {
65 | 'SAP-icons': Object.fromEntries(IconPool.getIconNames().map(name => {
66 | const info = IconPool.getIconInfo(name);
67 |
68 | return [`0x${info.content.charCodeAt(0).toString(16)}`, {
69 | names: [name],
70 | groups: iconsGroups.groups.filter(({icons}) => icons.map(({name}) => name).includes(name)).map(({name}) => name),
71 | tags: iconsTags[name]?.tags || iconsTags[name.toLowerCase()]?.tags || [],
72 | rtl: 'flip'
73 | }]
74 | })),
75 | 'SAP-icons-TNT': Object.fromEntries(Object.entries(tnt.icons).map(([name, glyph]) => [glyph, {
76 | names: [name],
77 | groups: tntGroups.groups.filter(({icons}) => icons.map(({name}) => name).includes(name)).map(({name}) => name),
78 | tags: tntTags[name]?.tags || tntTags[name.toLowerCase()]?.tags || [],
79 | rtl: 'flip'
80 | }])),
81 | 'SAP-icons-Business-Suite': Object.fromEntries(Object.entries(bs.icons).map(([name, glyph]) => [glyph, {
82 | names: [name],
83 | groups: bsGroups.groups.filter(({icons}) => icons.map(({name}) => name).includes(name)).map(({name}) => name),
84 | tags: bsTags[name]?.tags || bsTags[name.toLowerCase()]?.tags || [],
85 | rtl: 'flip'
86 | }]))
87 | };
88 | }
89 | }
90 |
91 | const iconsModel = new JSONModel(Object.fromEntries(
92 | ['SAP-icons', 'SAP-icons-TNT', 'SAP-icons-Business-Suite'].map(Library => [Library, {
93 | Library,
94 | Groups: [],
95 | SelectedGroup: null,
96 | Tags: [],
97 | SelectedTag: null,
98 | Icons: [],
99 | Search: ''
100 | }])
101 | ));
102 |
103 | getIconLibraries().then(libraries => {
104 | iconsModel.setData(Object.fromEntries(Object.entries(libraries).map(([Library, icons]) => {
105 | const iconEntries = Object.entries(icons);
106 |
107 | return [Library, {
108 | Library,
109 | Groups: [null].concat(uniq(iconEntries.map(([, {groups}]) => groups).flat()).map(Group => ({Group}))),
110 | SelectedGroup: null,
111 | Tags: [null].concat(uniq(iconEntries.map(([, {tags}]) => tags).flat()).map(Tag => ({Tag}))),
112 | SelectedTag: null,
113 | Icons: iconEntries.map(([Glyph, {names, groups, tags}]) => ({
114 | Glyph,
115 | Name: names[0],
116 | Groups: groups.map(Group => ({Group})),
117 | Tags: tags.map(Tag => ({Tag}))
118 | })),
119 | Search: ''
120 | }];
121 | })));
122 | });
123 |
124 | return iconsModel;
125 | });
126 |
--------------------------------------------------------------------------------
/docs/test/unit/model/Parameters.model.qunit.js:
--------------------------------------------------------------------------------
1 | sap.ui.define([
2 | 'sap/ui/core/Theming',
3 | 'sap/ui/core/theming/Parameters'
4 | ], (Theming, Parameters) => {
5 | const DATA = {
6 | Parameters: [{
7 | Parameter: 'sapBrandColor',
8 | Label: 'Brand Color',
9 | Description: 'The color which builds your brand.',
10 | Tags: ['Quick', 'Base', 'Color', 'Mobile', 'Protected'],
11 | Protected: true,
12 | Category: 'Main',
13 | Type: 'color',
14 | Value: '#0070f2'
15 | }, {
16 | Parameter: 'sapHighlightColor',
17 | Label: 'Highlight Color',
18 | Description: 'The color which is used to highlight screen elements.',
19 | Tags: ['Quick', 'Base', 'Content', 'Color', 'Protected'],
20 | Protected: true,
21 | Category: 'Main',
22 | Type: 'color',
23 | Value: '#0064d9'
24 | }, {
25 | Parameter: 'sapFontUrl_SAP-icons-TNT_woff2',
26 | Category: 'Internal',
27 | Type: 'asset',
28 | Value: 'url("https://example.com/SAP-icons-TNT.woff2")',
29 | }, {
30 | Parameter: 'sapFontUrl_SAP-icons-TNT_woff',
31 | Category: 'Internal',
32 | Type: 'asset',
33 | Value: 'url("https://example.com/SAP-icons-TNT.woff")',
34 | }, {
35 | Parameter: 'sapFontUrl_SAP-icons-TNT_ttf',
36 | Category: 'Internal',
37 | Type: 'asset',
38 | Value: 'url("https://example.com/SAP-icons-TNT.ttf")',
39 | }, {
40 | Parameter: 'sapFontUrl_SAP-icons-Business-Suite_woff2',
41 | Category: 'Internal',
42 | Type: 'asset',
43 | Value: 'url("https://example.com/SAP-icons-Business-Suite.woff2")',
44 | }, {
45 | Parameter: 'sapFontUrl_SAP-icons-Business-Suite_woff',
46 | Category: 'Internal',
47 | Type: 'asset',
48 | Value: 'url("https://example.com/SAP-icons-Business-Suite.woff")',
49 | }, {
50 | Parameter: 'sapFontUrl_SAP-icons-Business-Suite_ttf',
51 | Category: 'Internal',
52 | Type: 'asset',
53 | Value: 'url("https://example.com/SAP-icons-Business-Suite.ttf")',
54 | }],
55 | Search: ''
56 | };
57 | DATA.SelectedTypes = Array.from(new Set(DATA.Parameters.map(({Type}) => Type)));
58 | DATA.Types = DATA.SelectedTypes.map(Type => ({Type}));
59 | DATA.SelectedCategories = Array.from(new Set(DATA.Parameters.map(({Category}) => Category)));
60 | DATA.Categories = DATA.SelectedCategories.map(Category => ({Category}));
61 |
62 | QUnit.module('Parameters.model');
63 |
64 | let parametersGet;
65 | let attachApplied;
66 | for (const [test, {}] of Object.entries({
67 | 'theming-base-content from UI5': {}
68 | }))
69 | QUnit.test(`${test} (UITD2-2840, UITD2-3069)`, async assert => {
70 | // before
71 | sap.ui.loader._.unloadResources('tc/model/Parameters.model.js', false, true, true);
72 |
73 | const windowFetch = window.fetch;
74 | window.fetch = async (url, options) => {
75 | if (
76 | url.endsWith('/Base/baseLib/baseTheme/base.less') ||
77 | url.endsWith('/sap/ui/core/themes/base/base.less')
78 | ) {
79 | return {text: () => DATA.Parameters.map(_ => `// ===== FILE /Base/baseLib/baseTheme/base.less =====
80 | ${Object.entries(_)
81 | .filter(([k]) => k !== 'Parameter' && k !== 'Value')
82 | .map(([k, v]) => `// [${k} ${Array.isArray(v) ? v.map(_ => JSON.stringify(_)).join(', ') : JSON.stringify(v)}]`)
83 | .join('\n')}
84 | @${_.Parameter}: ${_.Value};`).join('\n\n')};
85 | } else {
86 | return windowFetch(url, options);
87 | }
88 | };
89 |
90 | parametersGet = Parameters.get;
91 | Parameters.get = ({name: _}) => Object.fromEntries((Array.isArray(_) ? _ : [_]).map(_ => [_, DATA.Parameters.find(({Parameter}) => Parameter === _).Value]));
92 |
93 | let appliedHandler;
94 | attachApplied = Theming.attachApplied;
95 | Theming.attachApplied = _ => appliedHandler = _;
96 |
97 | const parametersModel = await new Promise(res => sap.ui.require(['tc/model/Parameters.model'], _ => res(_)));
98 | let data = null;
99 | const setDataPromise = new Promise(res => parametersModel.setData = _=> {
100 | data = _;
101 | res();
102 | });
103 | let properties = {
104 | '/Parameters': DATA.Parameters
105 | };
106 | parametersModel.getProperty = prop => properties[prop];
107 | const setPropertyPromise = new Promise(res => parametersModel.setProperty = (prop, val) => {
108 | properties[prop] = val;
109 | res();
110 | });
111 |
112 | // 1. empty
113 |
114 | assert.deepEqual(parametersModel.getData(), {...DATA, Parameters: [], Types: [], Categories: [], SelectedTypes: [], SelectedCategories: []}, 'should be initialized with empty values');
115 |
116 | // 2. initialized
117 |
118 | await setDataPromise;
119 | assert.deepEqual(data, DATA, 'should contain the parsed data');
120 |
121 | const tcFontFaces = document.getElementById('tc-font-faces');
122 | DATA.Parameters
123 | .filter(({Parameter}) => Parameter.startsWith('sapFontUrl_'))
124 | .forEach(({Parameter, Value}) => {
125 | assert.ok(tcFontFaces.textContent.includes(Value), `should add an @font-face definition containing @${Parameter}`);
126 | });
127 |
128 | // 3. updated
129 |
130 | DATA.Parameters
131 | .filter(({Parameter}) => Parameter.startsWith('sapFontUrl_'))
132 | .forEach(_ => _.Value = _.Value.replace('example.com', 'example.org'));
133 | appliedHandler();
134 |
135 | await setPropertyPromise;
136 | assert.deepEqual(properties['/Parameters'], DATA.Parameters, 'should update the parameters');
137 | DATA.Parameters
138 | .filter(({Parameter}) => Parameter.startsWith('sapFontUrl_'))
139 | .forEach(({Parameter, Value}) => {
140 | assert.ok(tcFontFaces.textContent.includes(Value), `should update the @font-face definition containing @${Parameter}`);
141 | });
142 |
143 | // after
144 |
145 | Parameters.get = parametersGet;
146 | window.fetch = windowFetch;
147 | });
148 | });
149 |
--------------------------------------------------------------------------------
/docs/test/unit/controller/Icons.controller.qunit.js:
--------------------------------------------------------------------------------
1 | sap.ui.define([
2 | 'tc/controller/Icons.controller'
3 | ], IconsController => {
4 | QUnit.module('Icons.controller');
5 |
6 | QUnit.test('onInit() (UITD2-2840, UITD2-3069)', assert => {
7 | const iconsController = new IconsController();
8 | const MATCHED_HANDLER = [];
9 | iconsController.getRouter = () => ({
10 | getRoute: () => ({
11 | attachMatched: (fn, ctx) => MATCHED_HANDLER.push({fn, ctx})
12 | })
13 | });
14 | iconsController.onInit();
15 |
16 | assert.equal(MATCHED_HANDLER[0].fn, iconsController.onRouteMatched, 'should register the onRouteMatched function');
17 | assert.equal(MATCHED_HANDLER[0].ctx, iconsController, 'should register the iconsController');
18 | });
19 |
20 | QUnit.test('onRouteMatched() (UITD2-2840, UITD2-3069)', assert => {
21 | const iconsPage = {
22 | styleClass: ['tcIcons--SAP-icons-TNT']
23 | };
24 | const model = {
25 | 'SAP-icons': {},
26 | 'SAP-icons-TNT': {}
27 | };
28 | let filter = null;
29 | const iconsController = new IconsController();
30 | iconsController.getView = () => ({
31 | getModel: () => ({
32 | getData: () => model,
33 | setProperty: (path, value) => model[path.split('/')[1]][path.split('/')[2]] = value
34 | }),
35 | byId: id => {
36 | switch (id) {
37 | case 'iconsPage':
38 | return {
39 | removeStyleClass: _ => iconsPage.styleClass = iconsPage.styleClass.filter(it => it !== _),
40 | addStyleClass: _ => iconsPage.styleClass.push(_)
41 | };
42 | case 'icons':
43 | return {
44 | getBinding: () => ({
45 | filter: _ => filter = _
46 | })
47 | };
48 | }
49 | },
50 | bindElement: () => {}
51 | });
52 | let target = null;
53 | iconsController.getRouter = () => ({
54 | navTo: _ => target = _
55 | });
56 |
57 | iconsController.onRouteMatched({
58 | getParameter: () => ({})
59 | });
60 | assert.equal(target, 'overview', '"" should navTo("overview") if library not found');
61 |
62 | iconsController.onRouteMatched({
63 | getParameter: () => ({
64 | library: 'SAP-icons'
65 | })
66 | });
67 | assert.deepEqual(iconsPage.styleClass, ['tcIcons--SAP-icons'], '"?library=SAP-icons" should update the page styleClass to the matched library');
68 | assert.equal(model['SAP-icons'].SelectedGroup, null, '"?library=SAP-icons" should default the selected group to null');
69 | assert.equal(model['SAP-icons'].Search, '', '"?library=SAP-icons" should default the search to ""');
70 |
71 | iconsController.onRouteMatched({
72 | getParameter: () => ({
73 | library: 'SAP-icons-TNT',
74 | '?query': {
75 | search: 'arrow',
76 | group: 'arrows'
77 | }
78 | })
79 | });
80 | assert.deepEqual(iconsPage.styleClass, ['tcIcons--SAP-icons-TNT'], '"?library=SAP-icons-TNT#search=arrow&group=arrows" should update the page styleClass to the matched library');
81 | assert.equal(model['SAP-icons-TNT'].SelectedGroup, 'arrows', '"?library=SAP-icons-TNT#search=arrow&group=arrows" should update the SelectedGroup of the matched library');
82 | assert.equal(model['SAP-icons-TNT'].Search, 'arrow', '"?library=SAP-icons-TNT#search=arrow&group=arrows" should update the Search of the matched library');
83 | assert.equal(filter.length, 2, '"?library=SAP-icons-TNT#search=arrow&group=arrows" should filter the items binding');
84 | });
85 |
86 | QUnit.test('pushState() (UITD2-2840, UITD2-3069)', assert => {
87 | let route = null;
88 | const iconsController = new IconsController();
89 | iconsController.getRouter = () => ({
90 | navTo: (target, args) => route = {target, args}
91 | });
92 | iconsController.library = 'SAP-icons'
93 | const model = {}
94 | iconsController.getView = () => ({
95 | getModel: () => ({
96 | getProperty: _ => model[_]
97 | })
98 | });
99 |
100 | iconsController.pushState();
101 | assert.deepEqual(route, {target: 'icons', args: {
102 | library: 'SAP-icons',
103 | '?query': {search: '', group: ''}
104 | }}, 'pushState() should default to search="" group=""');
105 |
106 | iconsController.pushState({})
107 | assert.deepEqual(route, {target: 'icons', args: {
108 | library: 'SAP-icons',
109 | '?query': {search: '', group: ''}
110 | }}, 'pushState({}) should default to search="" group=""');
111 |
112 | Object.assign(model, {'/SAP-icons-TNT/Search': 'search', '/SAP-icons-TNT/SelectedGroup': 'group'});
113 | iconsController.library = 'SAP-icons-TNT';
114 | iconsController.pushState({});
115 | assert.deepEqual(route, {target: 'icons', args: {
116 | library: 'SAP-icons-TNT',
117 | '?query': {search: 'search', group: 'group'}
118 | }}, 'pushState({}) should default to the values of the icons model');
119 |
120 | iconsController.pushState({search: 'mysearch', group: 'mygroup'});
121 | assert.deepEqual(route, {target: 'icons', args: {
122 | library: 'SAP-icons-TNT',
123 | '?query': {search: 'mysearch', group: 'mygroup'}
124 | }}, 'pushState({search: "mysearch", group: "mygroup"}) should use the given values');
125 | });
126 |
127 | QUnit.test('onSearch() (UITD2-2840, UITD2-3069)', assert => {
128 | let state = null;
129 | const iconsController = new IconsController();
130 | iconsController.pushState = _ => state = _;
131 |
132 | iconsController.onSearch({
133 | getParameter: () => 'mysearch'
134 | });
135 | assert.deepEqual(state, {search: 'mysearch'}, 'should push the search to the state');
136 | });
137 |
138 | QUnit.test('onGroupChange() (UITD2-2840, UITD2-3069)', assert => {
139 | let state = null;
140 | const iconsController = new IconsController();
141 | iconsController.pushState = _ => state = _;
142 |
143 | iconsController.onGroupChange({
144 | getParameter: () => ({
145 | getText: () => 'mygroup'
146 | })
147 | });
148 | assert.deepEqual(state, {group: 'mygroup'}, 'should push the group to the state');
149 | });
150 | });
151 |
--------------------------------------------------------------------------------
/docs/test/unit/model/Icons.model.qunit.js:
--------------------------------------------------------------------------------
1 | sap.ui.define([
2 | 'sap/ui/core/IconPool',
3 | 'sap/ui/core/Theming'
4 | ], (IconPool, Theming) => {
5 | const METADATA = {
6 | 'SAP-icons': {
7 | Library: 'SAP-icons',
8 | Groups: [null, {Group: 'med'}, {Group: 'status'}],
9 | SelectedGroup: null,
10 | Tags: [null, {Tag: 'accidental'}, {Tag: 'leave'}],
11 | SelectedTag: null,
12 | Icons: [{
13 | Glyph: '0xe000',
14 | Name: 'accidental-leave',
15 | Groups: [{Group: 'med'}, {Group: 'status'}],
16 | Tags: [{Tag: 'accidental'}, {Tag: 'leave'}]
17 | }],
18 | Search: ''
19 | },
20 | 'SAP-icons-TNT': {
21 | Library: 'SAP-icons-TNT',
22 | Groups: [null, {Group: 'technical'}],
23 | SelectedGroup: null,
24 | Tags: [null, {Tag: 'system'}, {Tag: 'hexagon'}],
25 | SelectedTag: null,
26 | Icons: [{
27 | Glyph: '0xe000',
28 | Name: 'technicalsystem',
29 | Groups: [{Group: 'technical'}],
30 | Tags: [{Tag: 'system'}, {Tag: 'hexagon'}]
31 | }],
32 | Search: ''
33 | },
34 | 'SAP-icons-Business-Suite': {
35 | Library: 'SAP-icons-Business-Suite',
36 | Groups: [null, {Group: 'objects'}, {Group: 'medical'}],
37 | SelectedGroup: null,
38 | Tags: [null, {Tag: 'heart'}, {Tag: 'medical'}],
39 | SelectedTag: null,
40 | Icons: [{
41 | Glyph: '0xe000',
42 | Name: 'icon-heart',
43 | Groups: [{Group: 'objects'}, {Group: 'medical'}],
44 | Tags: [{Tag: 'heart'}, {Tag: 'medical'}]
45 | }],
46 | Search: ''
47 | }
48 | };
49 | const EMPTY_METADATA = Object.fromEntries(Object.entries(METADATA).map(([k, v]) => [k, {...v, Groups: [], Tags: [], Icons: []}]));
50 |
51 | /**
52 | * @param {keyof METADATA} lib
53 | * @return {Object}
54 | */
55 | function libFromMetadata(lib) {
56 | return Object.fromEntries(METADATA[lib].Icons.map(({Glyph, Name, Groups, Tags}) => [Glyph, {
57 | names: [Name],
58 | groups: Groups.map(({Group}) => Group),
59 | tags: Tags.map(({Tag}) => Tag),
60 | rtl: 'flip'
61 | }]));
62 | }
63 |
64 | /**
65 | * @param {keyof METADATA} lib
66 | * @return {{groups: {name: string, text: string, icons: {name: string}[]}[]}}
67 | */
68 | function groupsFromMetadata(lib) {
69 | return ({
70 | groups: METADATA[lib].Groups.filter(Boolean).map(({Group}) => ({
71 | name: Group,
72 | text: Group,
73 | icons: METADATA[lib].Icons.filter(({Groups}) => Groups.some(({Group: _}) => _ === Group)).map(({Name}) => ({name: Name}))
74 | }))
75 | })
76 | }
77 |
78 | /**
79 | * @param {keyof METADATA} lib
80 | * @return {Object}
81 | */
82 | function tagsFromMetadata(lib) {
83 | return Object.fromEntries(METADATA[lib].Icons.map(({Name, Tags}) => [Name, {tags: Tags.map(({Tag}) => Tag)}]))
84 | }
85 |
86 | QUnit.module('Icons.model');
87 |
88 | let getIconNames;
89 | let getIconInfo;
90 | let getThemeRoot;
91 | for (const [test, {before, after, responses}] of Object.entries({
92 | 'legacy metadata': {
93 | before: () => {
94 | getIconNames = IconPool.getIconNames;
95 | IconPool.getIconNames = () => METADATA['SAP-icons'].Icons.map(({Name}) => Name);
96 |
97 | getIconInfo = IconPool.getIconInfo;
98 | IconPool.getIconInfo = _ => ({content: String.fromCharCode(parseInt(METADATA['SAP-icons'].Icons.find(({Name}) => Name === _).Glyph))})},
99 | after: () => {
100 | IconPool.getIconInfo = getIconInfo;
101 | IconPool.getIconNames = getIconNames;
102 | },
103 | responses: {
104 | '/sap/tnt/themes/base/fonts/SAP-icons-TNT.json': {
105 | config: {path: {'^sap_horizon.*': 'sap/tnt/themes/base/fonts/horizon'}},
106 | icons: Object.fromEntries(METADATA['SAP-icons-TNT'].Icons.map(({Glyph, Name}) => [Name, Glyph]))
107 | },
108 | '/sap/ushell/themes/base/fonts/BusinessSuiteInAppSymbols.json': {
109 | config: {},
110 | icons: Object.fromEntries(METADATA['SAP-icons-Business-Suite'].Icons.map(({ Glyph, Name }) => [Name, Glyph]))
111 | },
112 | '/SAP-icons/groups.json': groupsFromMetadata('SAP-icons'),
113 | '/SAP-icons/tags.json': tagsFromMetadata('SAP-icons'),
114 | '/SAP-icons-TNT/groups.json': groupsFromMetadata('SAP-icons-TNT'),
115 | '/SAP-icons-TNT/tags.json': tagsFromMetadata('SAP-icons-TNT'),
116 | '/BusinessSuiteInAppSymbols/groups.json': groupsFromMetadata('SAP-icons-Business-Suite'),
117 | '/BusinessSuiteInAppSymbols/tags.json': tagsFromMetadata('SAP-icons-Business-Suite')
118 | }
119 | },
120 | 'base content metadata': {
121 | before: () => {
122 | getThemeRoot = Theming.getThemeRoot;
123 | Theming.getThemeRoot = () => '/themeroot/UI5/';
124 | },
125 | after: () => Theming.getThemeRoot = getThemeRoot,
126 | responses: {
127 | '/Base/baseLib/baseTheme/fonts/SAP-icons.json': libFromMetadata('SAP-icons'),
128 | '/Base/baseLib/baseTheme/fonts/SAP-icons-TNT.json': libFromMetadata('SAP-icons-TNT'),
129 | '/Base/baseLib/baseTheme/fonts/BusinessSuiteInAppSymbols.json': libFromMetadata('SAP-icons-Business-Suite')
130 | }
131 | }
132 | })) {
133 | QUnit.test(`${test} (UITD2-2840, UITD2-3069)`, async assert => {
134 | sap.ui.loader._.unloadResources('tc/model/Icons.model.js', false, true, true);
135 |
136 | const windowFetch = window.fetch;
137 | window.fetch = async (url, options) => {
138 | for (const [responseUrl, response] of Object.entries(responses)) {
139 | if (url.endsWith(responseUrl)) {
140 | return {json: () => response};
141 | }
142 | }
143 | return windowFetch(url, options);
144 | };
145 | before();
146 |
147 | const iconsModel = await new Promise(res => sap.ui.require(['tc/model/Icons.model'], _ => res(_)));
148 | let data = null;
149 | const setDataPromise = new Promise(res => iconsModel.setData = _ => {
150 | data = _;
151 | res();
152 | });
153 |
154 | assert.deepEqual(iconsModel.getData(), EMPTY_METADATA, 'should be initialized with empty default values');
155 |
156 | await setDataPromise;
157 | assert.deepEqual(data, METADATA, 'should contain the parsed metadata');
158 |
159 | after();
160 | window.fetch = windowFetch;
161 | });
162 | }
163 | });
164 |
--------------------------------------------------------------------------------
/docs/controller/Parameters.controller.js:
--------------------------------------------------------------------------------
1 | /** @typedef {null|string|string[]} Category */
2 |
3 | sap.ui.define([
4 | 'sap/ui/model/Filter',
5 | 'sap/ui/model/FilterOperator',
6 | 'sap/m/GroupHeaderListItem',
7 | 'tc/controller/Base.controller',
8 | 'tc/util/uniq'
9 | ], (Filter, {Contains}, GroupHeaderListItem, BaseController, uniq) => {
10 | /**
11 | * @param {Category} c
12 | * @return {string}
13 | */
14 | function categoryToString(c) {
15 | return typeof c === 'string' ? c
16 | : Array.isArray(c) ? c.join(' > ')
17 | : 'Internal';
18 | }
19 |
20 | return BaseController.extend('tc.controller.Parameters', {
21 | /** @type {Object} */
22 | filters: {},
23 |
24 | /**
25 | * @param {Category} a
26 | * @param {Category} b
27 | * @return {number}
28 | */
29 | compareCategory(a, b) {
30 | const cA = categoryToString(a).toLowerCase();
31 | const cB = categoryToString(b).toLowerCase();
32 |
33 | return cA === 'main' ? (cB === 'main' ? 0 : -1)
34 | : cB === 'main' ? (cA === 'main' ? 0 : 1)
35 | : cA === 'internal' ? (cB === 'internal' ? 0 : 1)
36 | : cB === 'internal' ? (cA === 'internal' ? 0 : -1)
37 | : cA.localeCompare(cB);
38 | },
39 |
40 | selectedCategories() {
41 | if (!this._selectedCategories) {
42 | this._selectedCategories = uniq(this.getView().getModel('parameters').getProperty('/SelectedCategories').map(_ => _.toLowerCase()));
43 | }
44 |
45 | return this._selectedCategories;
46 | },
47 |
48 | filterCategory(category) {
49 | const cat = categoryToString(category).toLowerCase();
50 | const cats = this.selectedCategories();
51 |
52 | return cats.length > 0 && cats.some(_ => cat.startsWith(_));
53 | },
54 |
55 | selectedTypes() {
56 | if (!this._selectedTypes) {
57 | this._selectedTypes = this.getView().getModel('parameters').getProperty('/SelectedTypes').map(_ => _.toLowerCase());
58 | }
59 |
60 | return this._selectedTypes;
61 | },
62 |
63 | filterType(t) {
64 | const types = this.selectedTypes();
65 |
66 | return types.length > 0 && types.includes(t.toLowerCase());
67 | },
68 |
69 | /**
70 | * @param {string} a
71 | * @param {string} b
72 | * @return {number}
73 | */
74 | compareParameter(a, b) {
75 | if (a.replace(/\d.*/g, '') === b.replace(/\d.*/g, '')) {
76 | const diff = parseInt(a.replace(/[^\d]/g, '')) - parseInt(b.replace(/[^\d]/g, ''));
77 |
78 | if (diff !== 0) {
79 | return diff;
80 | }
81 | }
82 |
83 | return a.localeCompare(b);
84 | },
85 |
86 | getGroup(context) {
87 | return categoryToString(context.getProperty('Category'));
88 | },
89 |
90 | getGroupHeader(group) {
91 | return new GroupHeaderListItem({
92 | title: group.key,
93 | count: `{categories>/Categories/${group.key}}`
94 | });
95 | },
96 |
97 | pushState({search = null, types = null, categories = null} = {}) {
98 | this.getRouter().navTo('parameters', {
99 | '?query': {
100 | search: search || this.getView().getModel('parameters').getProperty('/Search'),
101 | types: uniq(types || this.getView().getModel('parameters').getProperty('/SelectedTypes')).join(','),
102 | categories: uniq(categories || this.getView().getModel('parameters').getProperty('/SelectedCategories')).join(',')
103 | }
104 | });
105 | },
106 |
107 | onInit() {
108 | this.getRouter().getRoute('parameters').attachMatched(this.onRouteMatched, this);
109 | },
110 |
111 | onSearch(event) {
112 | this.pushState({search: event.getParameter('query')});
113 | },
114 |
115 | onCategoriesSelectionChange(event) {
116 | const {selectAll, selected, changedItem} = event.getParameters();
117 |
118 | delete this._selectedCategories;
119 | this.pushState({categories: selectAll
120 | ? (selected
121 | ? this.getView().getModel('parameters').getProperty('/Categories').map(({Category}) => Category)
122 | : [])
123 | : (selected
124 | ? uniq(this.getView().getModel('parameters').getProperty('/SelectedCategories').concat([changedItem.getKey()]))
125 | : this.getView().getModel('parameters').getProperty('/SelectedCategories').filter(_ => _ !== changedItem.getKey()))});
126 | },
127 |
128 | onCategoriesSelectionFinish(event) {
129 | delete this._selectedCategories;
130 | this.pushState({categories: event.getParameters().selectedItems.map(_ => _.getKey())});
131 | },
132 |
133 | onTypesSelectionChange(event) {
134 | const {selectAll, selected, changedItem} = event.getParameters();
135 |
136 | delete this._selectedTypes;
137 | this.pushState({types: selectAll
138 | ? (selected
139 | ? this.getView().getModel('parameters').getProperty('/Types').map(({Type}) => Type)
140 | : [])
141 | : (selected
142 | ? uniq(this.getView().getModel('parameters').getProperty('/SelectedTypes').concat([changedItem.getKey()]))
143 | : this.getView().getModel('parameters').getProperty('/SelectedTypes').filter(_ => _ !== changedItem.getKey()))});
144 | },
145 |
146 | onTypesSelectionFinish(event) {
147 | delete this._selectedTypes;
148 | this.pushState({types: event.getParameters().selectedItems.map(_ => _.getKey())});
149 | },
150 |
151 | onRouteMatched(event) {
152 | const query = event.getParameter('arguments')['?query'];
153 | const parametersModel = this.getView().getModel('parameters');
154 |
155 | if (
156 | query &&
157 | typeof query.types === 'string' &&
158 | typeof query.categories === 'string' &&
159 | typeof query.search === 'string'
160 | ) {
161 | const search = query.search;
162 |
163 | delete this._selectedTypes;
164 | parametersModel.setProperty('/SelectedTypes', uniq(query.types.split(',').filter(Boolean).map(_ => _.trim())));
165 | delete this._selectedCategories;
166 | parametersModel.setProperty('/SelectedCategories', uniq(query.categories.split(',').filter(Boolean).map(_ => _.trim())));
167 | parametersModel.setProperty('/Search', search);
168 |
169 | this.getView().byId('parameters').getBinding('items').filter([
170 | new Filter({path: 'Type', test: c => this.filterType(c)}),
171 | new Filter({path: 'Category', test: c => this.filterCategory(c)}),
172 | new Filter({
173 | filters: [
174 | new Filter({path: 'Parameter', operator: Contains, value1: search}),
175 | new Filter({path: 'Label', operator: Contains, value1: search}),
176 | new Filter({path: 'Description', operator: Contains, value1: search})
177 | ],
178 | and: false
179 | })
180 | ]);
181 | } else {
182 | this.pushState({
183 | search: query?.search
184 | ? query.search
185 | : '',
186 | types: query?.types
187 | ? uniq(query.types.split(',').filter(Boolean).map(_ => _.trim()))
188 | : this.getView().getModel('parameters').getProperty('/Types').map(({Type}) => Type),
189 | categories: query?.categories
190 | ? uniq(query.categories.split(',').filter(Boolean).map(_ => _.trim()))
191 | : this.getView().getModel('parameters').getProperty('/Categories').map(({Category}) => Category)
192 | });
193 | }
194 | }
195 | });
196 | });
197 |
--------------------------------------------------------------------------------