chore(ui5-badge): update visual design (#7567)

feat(ui5-badge): update visual design Jira: 3113
SAP · Sep 12, 2023 · fe3ef36 · fe3ef36
1 parent 105db9f
commit fe3ef36
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;