Skip to content

Commit f01b2eb

Browse files
nnaydenownnaydenow
authored
feat(framework): introduce loadBaseThemingCSSVariables configuration (#12699)
Introduce a new `loadBaseThemingCSSVariables` configuration setting, allowing applications to control whether the CSS variables from the `@sap-theming/theming-base-content` package should be loaded. Part of: #12491
1 parent ff6d49b commit f01b2eb

File tree

15 files changed

+177
-34
lines changed

15 files changed

+177
-34
lines changed

‎docs/2-advanced/01-configuration.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ There are several configuration settings that affect all UI5 Web Components glob
1515
| [secondaryCalendarType](#calendarType) | `Gregorian`, `Islamic`, `Buddhist`, `Japanese`, `Persian` | `undefined` | Default secondary calendar type to be used for date-related components | Date/time components (`ui5-date-picker`, etc.) |
1616
| [noConflict](#noConflict) | `true`, `false` | `false` | When set to true, all events will be fired with a `ui5-` prefix only | Components that fire events (most do) |
1717
| [formatSettings](#formatSettings) | See the [Format settings](#formatSettings) section below | `{}` | Allows to override locale-specific configuration | Date/time components (`ui5-date-picker`, etc.) |
18+
| [loadBaseThemingCSSVariables](#loadBaseThemingCSSVariables) | `true`, `false` | `true` | Whether to load CSS variables from `@sap-theming/theming-base-content` package | Framework |
1819
| [fetchDefaultLanguage](#fetchDefaultLanguage) | `true`, `false` | `false` | Whether to fetch assets even for the default language | Framework |
1920
| [defaultFontLoading](#defaultFontLoading) | `true`, `false` | `true` | Whether to fetch default font faces | Framework |
2021
| [enableDefaultTooltips](#enableDefaultTooltips) | `true`, `false` | `true` | Whether to display default tooltips | Components (Icon, Button, RatingIndicator, etc.) |
@@ -219,6 +220,23 @@ Example:
219220
}
220221
</script>
221222
```
223+
224+
### loadBaseThemingCSSVariables
225+
<a name="loadBaseThemingCSSVariables"></a>
226+
227+
This configuration option controls whether the framework should load the CSS variables from `@sap-theming/theming-base-content` package.
228+
229+
Typically, you would not need to modify this setting. However, if your application provides its **own** instance or version of `@sap-theming/theming-base-content` and you prefer the framework **not** to load the built-in base theming CSS variables, you can set `loadBaseThemingCSSVariables` to `false`.
230+
231+
Example:
232+
```html
233+
<script data-ui5-config type="application/json">
234+
{
235+
"loadBaseThemingCSSVariables": false
236+
}
237+
</script>
238+
```
239+
222240
### defaultFontLoading
223241
<a name="defaultFontLoading"></a>
224242

‎packages/base/src/InitialConfiguration.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ type InitialConfig = {
2424
formatSettings: FormatSettings,
2525
fetchDefaultLanguage: boolean,
2626
defaultFontLoading: boolean,
27+
loadBaseThemingCSSVariables: boolean,
2728
enableDefaultTooltips: boolean,
2829
};
2930

@@ -40,6 +41,7 @@ let initialConfig: InitialConfig = {
4041
formatSettings: {},
4142
fetchDefaultLanguage: false,
4243
defaultFontLoading: true,
44+
loadBaseThemingCSSVariables: true,
4345
enableDefaultTooltips: true,
4446
};
4547

@@ -94,6 +96,11 @@ const getDefaultFontLoading = () => {
9496
return initialConfig.defaultFontLoading;
9597
};
9698

99+
const getLoadBaseThemingCSSVariables = () => {
100+
initConfiguration();
101+
return initialConfig.loadBaseThemingCSSVariables;
102+
};
103+
97104
const getEnableDefaultTooltips = () => {
98105
initConfiguration();
99106
return initialConfig.enableDefaultTooltips;
@@ -255,6 +262,7 @@ export {
255262
getTimezone,
256263
getFormatSettings,
257264
getDefaultFontLoading,
265+
getLoadBaseThemingCSSVariables,
258266
resetConfiguration,
259267
getEnableDefaultTooltips,
260268
};

‎packages/base/src/config/Theme.ts‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
1+
import { getTheme as getConfiguredTheme, getLoadBaseThemingCSSVariables as getConfiguredLoadBaseThemingCSSVariables } from "../InitialConfiguration.js";
22
import { reRenderAllUI5Elements } from "../Render.js";
33
import applyTheme from "../theming/applyTheme.js";
44
import getThemeDesignerTheme from "../theming/getThemeDesignerTheme.js";
@@ -7,6 +7,7 @@ import { boot, isBooted } from "../Boot.js";
77
import { attachConfigurationReset } from "./ConfigurationReset.js";
88

99
let curTheme: string | undefined;
10+
let loadBaseThemingCSSVariables: boolean | undefined;
1011

1112
attachConfigurationReset(() => {
1213
curTheme = undefined;
@@ -57,6 +58,36 @@ const getDefaultTheme = (): string => {
5758
return DEFAULT_THEME;
5859
};
5960

61+
/**
62+
* Returns the current configuration for loading base theming CSS variables.
63+
*
64+
* @public
65+
* @since 2.17.0
66+
* @returns {boolean}
67+
*/
68+
const getLoadBaseThemingCSSVariables = () => {
69+
if (loadBaseThemingCSSVariables === undefined) {
70+
loadBaseThemingCSSVariables = getConfiguredLoadBaseThemingCSSVariables();
71+
}
72+
73+
return loadBaseThemingCSSVariables;
74+
};
75+
76+
/**
77+
* Configures whether to load base theming CSS variables.
78+
*
79+
* - When set to `true` (default), base theming CSS variables are loaded.
80+
* - When set to `false`, base theming CSS variables are not loaded.
81+
*
82+
* **Note:** This method should be called before the boot process.
83+
*
84+
* @public
85+
* @since 2.17.0
86+
*/
87+
const setLoadBaseThemingCSSVariables = (value: boolean) => {
88+
loadBaseThemingCSSVariables = value;
89+
};
90+
6091
/**
6192
* Returns if the given theme name is the one currently applied.
6293
* @private
@@ -98,4 +129,6 @@ export {
98129
isLegacyThemeFamily,
99130
isLegacyThemeFamilyAsync,
100131
getDefaultTheme,
132+
getLoadBaseThemingCSSVariables,
133+
setLoadBaseThemingCSSVariables,
101134
};

‎packages/base/src/theming/applyTheme.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { fireThemeLoaded } from "./ThemeLoaded.js";
55
import { attachCustomThemeStylesToHead, getThemeRoot } from "../config/ThemeRoot.js";
66
import { DEFAULT_THEME } from "../generated/AssetParameters.js";
77
import { getCurrentRuntimeIndex } from "../Runtimes.js";
8+
import { getLoadBaseThemingCSSVariables } from "../config/Theme.js";
89

910
// eslint-disable-next-line
1011
export let _lib = "ui5";
@@ -33,6 +34,10 @@ const loadComponentPackages = async (theme: string, externalThemeName?: string)
3334
const registeredPackages = getRegisteredPackages();
3435

3536
const packagesStylesPromises = [...registeredPackages].map(async packageName => {
37+
if (getLoadBaseThemingCSSVariables() !== true && packageName === `${BASE_THEME_PACKAGE}-raw`) {
38+
return;
39+
}
40+
3641
if (packageName === BASE_THEME_PACKAGE) {
3742
return;
3843
}

‎packages/compat/cypress/specs/Table.cy.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -509,7 +509,6 @@ describe("Table general interaction", () => {
509509
cy.get("@popinChange")
510510
.should(stub => {
511511
expect(stub).to.have.been.calledTwice;
512-
debugger
513512
// @ts-ignore
514513
expect(stub.args.slice(-1)[0][0].detail.poppedColumns.length).to.equal(2);
515514
})

‎packages/main/src/bundle.common.bootstrap.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,13 @@ import { resetConfiguration } from "@ui5/webcomponents-base/dist/InitialConfigur
6060
import { sanitizeHTML, URLListValidator } from "@ui5/webcomponents-base/dist/util/HTMLSanitizer.js";
6161

6262
import { getAnimationMode, setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
63-
import { getTheme, setTheme, isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
63+
import {
64+
getTheme,
65+
setTheme,
66+
isLegacyThemeFamily,
67+
getLoadBaseThemingCSSVariables,
68+
setLoadBaseThemingCSSVariables,
69+
} from "@ui5/webcomponents-base/dist/config/Theme.js";
6470
import { getThemeRoot, setThemeRoot } from "@ui5/webcomponents-base/dist/config/ThemeRoot.js";
6571
import { getTimezone, setTimezone } from "@ui5/webcomponents-base/dist/config/Timezone.js";
6672
import { getLanguage, setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
@@ -104,6 +110,8 @@ const testAssets = {
104110
getFirstDayOfWeek,
105111
getTimezone,
106112
setTimezone,
113+
getLoadBaseThemingCSSVariables,
114+
setLoadBaseThemingCSSVariables,
107115
},
108116
invisibleMessage: {
109117
announce,

‎packages/main/test/pages/Button.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
</head>
2020

21-
<body class="button1auto">
21+
<body class="button1auto" style="background-color: var(--sapButton_Emphasized_Background);">
2222
<ui5-button design="Negative" icon="decline">Reject</ui5-button>
2323
<ui5-button design="Positive" icon="add">Add</ui5-button>
2424
<ui5-button icon="home" id="icon-only-comment"><!----><!----></ui5-button>

‎packages/main/test/pages/theming/Themes7.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Theming</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8+
<meta charset="utf-8">
9+
<script data-ui5-config type="application/json">
10+
{
11+
"loadBaseThemingCSSVariables": true
12+
}
13+
</script>
14+
<script src="../%VITE_BUNDLE_PATH%" type="module"></script>
15+
</head>
16+
17+
<body style="background-color: var(--sapButton_Emphasized_Background);">
18+
<ui5-button>Some content</ui5-button>
19+
</body>
20+
21+
</html>

‎packages/main/test/pages/theming/Themes8.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Theming</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8+
<meta charset="utf-8">
9+
<script data-ui5-config type="application/json">
10+
{
11+
"loadBaseThemingCSSVariables": false
12+
}
13+
</script>
14+
<script src="../%VITE_BUNDLE_PATH%" type="module"></script>
15+
</head>
16+
17+
<body style="background-color: var(--sapButton_Emphasized_Background);">
18+
<ui5-button>Some content</ui5-button>
19+
</body>
20+
21+
</html>

‎packages/theming/package-scripts.cjs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,11 @@ module.exports = {
2424
src: `ui5nps-script "${TOOLS_LIB}copy-and-watch/index.js" "src/**/*.{json}" dist/`,
2525
typescript: "tsc",
2626
postcss: `ui5nps-script "${TOOLS_LIB}/css-processors/css-processor-themes.mjs"`,
27-
jsonImports: `ui5nps-script "${jsonImportsScript}" src/themes src/generated/json-imports`,
27+
jsonImports: {
28+
default: "ui5nps build.jsonImports.scoped build.jsonImports.raw",
29+
scoped: `ui5nps-script "${jsonImportsScript}" src/themes src/generated/json-imports`,
30+
raw: `ui5nps-script "${jsonImportsScript}" src/themes src/generated/json-imports -raw`,
31+
}
2832
},
2933
generateReport: `ui5nps-script "${generateReportScript}"`,
3034
},

0 commit comments

Comments
 (0)