diff --git a/packages/main/src/themes/Badge.css b/packages/main/src/themes/Badge.css index d97a14f6d6be..79f5d587d7dc 100644 --- a/packages/main/src/themes/Badge.css +++ b/packages/main/src/themes/Badge.css @@ -16,7 +16,7 @@ font-family: var(--_ui5-badge-font); font-weight: var(--_ui5-badge-font-weight); text-align: center; - letter-spacing: 0.0125em; + letter-spacing: var(--_ui5-badge-letter-spacing); } .ui5-badge-root { @@ -40,7 +40,7 @@ } :host([_icon-only]) { - padding: 0 0.1875em; + padding-inline: var(--_ui5-badge-padding-inline-icon-only); } ::slotted([ui5-icon]) { diff --git a/packages/main/src/themes/base/Badge-parameters.css b/packages/main/src/themes/base/Badge-parameters.css index 8fa5d2fbe691..ba669253b7aa 100644 --- a/packages/main/src/themes/base/Badge-parameters.css +++ b/packages/main/src/themes/base/Badge-parameters.css @@ -3,6 +3,7 @@ --_ui5-badge-border: 0.0625em solid; --_ui5-badge-border-radius: 0.5rem; --_ui5-badge-padding-inline: 0.3125em; + --_ui5-badge-padding-inline-icon-only: 0.1875rem; --_ui5-badge-text-transform: uppercase; --_ui5-badge-icon-gap: 0.125rem; --_ui5-badge-font-size: var(--sapFontSmallSize); @@ -11,6 +12,7 @@ --_ui5-badge-default-border-color: var(--ui5-badge-color-scheme-1-border); --_ui5-badge-default-background: var(--ui5-badge-color-scheme-1-background); --_ui5-badge-default-color: var(--ui5-badge-color-scheme-1-color); + --_ui5-badge-letter-spacing: 0.0125em; --ui5-badge-color-scheme-1-background: var(--sapLegendBackgroundColor1); --ui5-badge-color-scheme-1-border: var(--sapAccentColor1); diff --git a/packages/main/src/themes/sap_horizon/Badge-parameters.css b/packages/main/src/themes/sap_horizon/Badge-parameters.css index eeaaf95fdf83..17d61f820921 100644 --- a/packages/main/src/themes/sap_horizon/Badge-parameters.css +++ b/packages/main/src/themes/sap_horizon/Badge-parameters.css @@ -5,6 +5,7 @@ --_ui5-badge-border: none; --_ui5-badge-border-radius: 0.25rem; --_ui5-badge-padding-inline: 0.375em; + --_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline); --_ui5-badge-text-transform: none; --_ui5-badge-icon-gap: 0.25rem; --_ui5-badge-font-size: var(--sapFontSize); @@ -13,6 +14,7 @@ --_ui5-badge-default-border-color: transparent; --_ui5-badge-default-background: var(--ui5-badge-color-scheme-1-background); --_ui5-badge-default-color: var(--ui5-badge-color-scheme-1-color); + --_ui5-badge-letter-spacing: normal; --ui5-badge-color-scheme-1-background: var(--sapAvatar_1_Background); --ui5-badge-color-scheme-1-color: var(--sapAvatar_1_TextColor); diff --git a/packages/main/src/themes/sap_horizon_dark/Badge-parameters.css b/packages/main/src/themes/sap_horizon_dark/Badge-parameters.css index eeaaf95fdf83..17d61f820921 100644 --- a/packages/main/src/themes/sap_horizon_dark/Badge-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Badge-parameters.css @@ -5,6 +5,7 @@ --_ui5-badge-border: none; --_ui5-badge-border-radius: 0.25rem; --_ui5-badge-padding-inline: 0.375em; + --_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline); --_ui5-badge-text-transform: none; --_ui5-badge-icon-gap: 0.25rem; --_ui5-badge-font-size: var(--sapFontSize); @@ -13,6 +14,7 @@ --_ui5-badge-default-border-color: transparent; --_ui5-badge-default-background: var(--ui5-badge-color-scheme-1-background); --_ui5-badge-default-color: var(--ui5-badge-color-scheme-1-color); + --_ui5-badge-letter-spacing: normal; --ui5-badge-color-scheme-1-background: var(--sapAvatar_1_Background); --ui5-badge-color-scheme-1-color: var(--sapAvatar_1_TextColor); diff --git a/packages/main/src/themes/sap_horizon_hcb/Badge-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Badge-parameters.css index 4a966764e713..e0482082825e 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Badge-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Badge-parameters.css @@ -5,6 +5,7 @@ --_ui5-badge-border: none; --_ui5-badge-border-radius: 0.25rem; --_ui5-badge-padding-inline: 0.375em; + --_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline); --_ui5-badge-text-transform: none; --_ui5-badge-icon-gap: 0.25rem; --_ui5-badge-font-size: var(--sapFontSize); @@ -13,6 +14,7 @@ --_ui5-badge-default-border-color: transparent; --_ui5-badge-default-background: var(--ui5-badge-color-scheme-1-background); --_ui5-badge-default-color: var(--ui5-badge-color-scheme-1-color); + --_ui5-badge-letter-spacing: normal; --ui5-badge-color-scheme-1-background: #362401; --ui5-badge-color-scheme-1-color: #FDA503; diff --git a/packages/main/src/themes/sap_horizon_hcw/Badge-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Badge-parameters.css index cd88dc54a9ec..3177531bae69 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Badge-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Badge-parameters.css @@ -5,6 +5,7 @@ --_ui5-badge-border: none; --_ui5-badge-border-radius: 0.25rem; --_ui5-badge-padding-inline: 0.375em; + --_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline); --_ui5-badge-text-transform: none; --_ui5-badge-icon-gap: 0.25rem; --_ui5-badge-font-size: var(--sapFontSize); @@ -13,6 +14,7 @@ --_ui5-badge-default-border-color: transparent; --_ui5-badge-default-background: var(--ui5-badge-color-scheme-1-background); --_ui5-badge-default-color: var(--ui5-badge-color-scheme-1-color); + --_ui5-badge-letter-spacing: normal; --ui5-badge-color-scheme-1-background: #FFC218; --ui5-badge-color-scheme-1-color: #5F2900;