diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts index 09c2c192842e..b61d87c83d22 100644 --- a/packages/base/src/UI5Element.ts +++ b/packages/base/src/UI5Element.ts @@ -44,6 +44,8 @@ import type I18nBundle from "./i18nBundle.js"; import { fetchCldr } from "./asset-registries/LocaleData.js"; import getLocale from "./locale/getLocale.js"; import { getLanguageChangePending } from "./config/Language.js"; +import { getThemeProperties } from "./asset-registries/Themes.js"; +import { getTheme } from "./config/Theme.js"; const DEV_MODE = true; let autoId = 0; @@ -1327,6 +1329,8 @@ abstract class UI5Element extends HTMLElement { return this.i18nBundleStorage; } + static themeProperties?: string; + /** * Registers a UI5 Web Component in the browser window object * @public @@ -1344,6 +1348,7 @@ abstract class UI5Element extends HTMLElement { const bundleName = pair[1].bundleName; this.i18nBundleStorage[bundleName] = i18nBundles[index]; }); + this.themeProperties = await getThemeProperties("@ui5/webcomponents", getTheme()); this.asyncFinished = true; }; this.definePromise = defineSequence(); diff --git a/packages/base/src/css/SystemCSSVars.css b/packages/base/src/css/SystemCSSVars.css index e67be961039c..b7b806d3b723 100644 --- a/packages/base/src/css/SystemCSSVars.css +++ b/packages/base/src/css/SystemCSSVars.css @@ -1,9 +1,13 @@ :root { --_ui5_content_density:cozy; + --_compact_size: 0; + --_cozy_size: 1; } [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { --_ui5_content_density:compact; + --_compact_size: 1; + --_cozy_size: 0; } diff --git a/packages/base/src/theming/applyTheme.ts b/packages/base/src/theming/applyTheme.ts index c8f7d729c156..d07306ece37e 100644 --- a/packages/base/src/theming/applyTheme.ts +++ b/packages/base/src/theming/applyTheme.ts @@ -45,7 +45,8 @@ const loadComponentPackages = async (theme: string, externalThemeName?: string) const cssData = await getThemeProperties(packageName, theme, externalThemeName); if (cssData) { - createOrUpdateStyle(cssData, `data-ui5-component-properties-${getCurrentRuntimeIndex()}`, packageName); + // + // createOrUpdateStyle(cssData, `data-ui5-component-properties-${getCurrentRuntimeIndex()}`, packageName); } }); diff --git a/packages/base/src/theming/getEffectiveStyle.ts b/packages/base/src/theming/getEffectiveStyle.ts index 8e3c52363916..704c90ffaceb 100644 --- a/packages/base/src/theming/getEffectiveStyle.ts +++ b/packages/base/src/theming/getEffectiveStyle.ts @@ -3,6 +3,7 @@ import getStylesString from "./getStylesString.js"; import { getFeature } from "../FeaturesRegistry.js"; import type UI5Element from "../UI5Element.js"; import type OpenUI5Enablement from "../features/OpenUI5Enablement.js"; +import { getThemeProperties } from "../asset-registries/Themes.js"; const effectiveStyleMap = new Map(); @@ -24,8 +25,9 @@ const getEffectiveStyle = (ElementClass: typeof UI5Element) => { const customStyle = getCustomCSS(tag) || ""; const builtInStyles = getStylesString(ElementClass.styles); + const properties = ElementClass.themeProperties?.replaceAll(":root", ":host") || ""; - const effectiveStyle = `${builtInStyles} ${customStyle} ${busyIndicatorStyles}`; + const effectiveStyle = `${builtInStyles} ${customStyle} ${busyIndicatorStyles} ${properties}`; effectiveStyleMap.set(key, effectiveStyle); } diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html index e69731ecb522..0b95844e9060 100644 --- a/packages/fiori/test/pages/ShellBar.html +++ b/packages/fiori/test/pages/ShellBar.html @@ -1,5 +1,5 @@ - + Shell Bar diff --git a/packages/main/src/themes/base/Button-parameters.css b/packages/main/src/themes/base/Button-parameters.css index 3b83a42ff009..6110285c671c 100644 --- a/packages/main/src/themes/base/Button-parameters.css +++ b/packages/main/src/themes/base/Button-parameters.css @@ -3,7 +3,8 @@ --_ui5_button_focused_border_radius: 0.25rem; --_ui5_button_focused_inner_border_radius: 0; --_ui5_button_base_min_width: 2.5rem; - --_ui5_button_base_height: var(--sapElement_Height); + /* --_ui5_button_base_height: if(style(--_cozy_size): var(--sapElement_Height); else: var(--sapElement_Compact_Height)); */ + --_ui5_button_base_height: calc(var(--_cozy_size) * var(--sapElement_Height) + var(--_compact_size) * var(--sapElement_Compact_Height)); --_ui5_button_border_radius: var(--sapButton_BorderCornerRadius); --_ui5_button_base_padding: 0.6875rem; --_ui5_button_base_icon_margin: 0.563rem; diff --git a/packages/main/src/themes/base/rtl-parameters.css b/packages/main/src/themes/base/rtl-parameters.css index 6542c9f3a67e..1a222016f90c 100644 --- a/packages/main/src/themes/base/rtl-parameters.css +++ b/packages/main/src/themes/base/rtl-parameters.css @@ -41,4 +41,10 @@ --_ui5_segmented_btn_item_border_left: 0.0625rem; --_ui5_segmented_btn_item_border_right: 0px; --_ui5-shellbar-notification-btn-count-offset: auto; +} + +:host(:dir(rtl)), +:dir(rtl) { + background-color: rgb(239, 185, 185); + --my-height: 200px; } \ No newline at end of file diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 20eab2e85cca..327f0cce16bb 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -176,7 +176,7 @@ --_ui5_bar_base_height: 2.5rem; --_ui5_bar_subheader_height: 2.25rem; - --_ui5_button_base_height: var(--sapElement_Compact_Height); + /* --_ui5_button_base_height: var(--sapElement_Compact_Height); */ --_ui5_button_base_padding: 0.4375rem; --_ui5_button_base_min_width: 2rem; --_ui5-button-badge-diameter: 0.625rem; diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html index e33b12c4c453..9825448635a0 100644 --- a/packages/main/test/pages/Button.html +++ b/packages/main/test/pages/Button.html @@ -15,11 +15,18 @@ - + - Reject + Reject Add @@ -148,6 +155,7 @@
+ text Cozy Emphasized