From a58a1a443c31e45a36a7950287a61d306bd71c19 Mon Sep 17 00:00:00 2001 From: Georgi Date: Wed, 28 Jul 2021 10:49:24 +0300 Subject: [PATCH] feat(ui5-badge): update design (#3529) --- packages/main/src/Badge.hbs | 4 +- packages/main/src/Badge.js | 27 +++++-- packages/main/src/themes/Badge.css | 79 +++++++++++-------- .../main/src/themes/base/Badge-parameters.css | 38 ++++++--- .../sap_belize_hcb/Badge-parameters.css | 37 ++++++--- .../sap_belize_hcw/Badge-parameters.css | 37 ++++++--- .../sap_fiori_3_hcb/Badge-parameters.css | 37 ++++++--- .../sap_fiori_3_hcw/Badge-parameters.css | 37 ++++++--- packages/main/test/pages/Badge.html | 2 +- packages/theme-base/css-vars-usage.json | 9 --- 10 files changed, 211 insertions(+), 96 deletions(-) diff --git a/packages/main/src/Badge.hbs b/packages/main/src/Badge.hbs index 2e525e4785cd..0018974aa338 100644 --- a/packages/main/src/Badge.hbs +++ b/packages/main/src/Badge.hbs @@ -1,7 +1,5 @@
- {{#if hasIcon}} - - {{/if}} + {{#if hasText}} diff --git a/packages/main/src/Badge.js b/packages/main/src/Badge.js index 60ae255be751..08872a4abdac 100644 --- a/packages/main/src/Badge.js +++ b/packages/main/src/Badge.js @@ -32,6 +32,22 @@ const metadata = { type: String, defaultValue: "1", }, + + /** + * Defines if the badge has an icon. + * @private + */ + _hasIcon: { + type: Boolean, + }, + + /** + * Defines if the badge has only an icon (and no text). + * @private + */ + _iconOnly: { + type: Boolean, + }, }, managedSlots: true, slots: /** @lends sap.ui.webcomponents.main.Badge.prototype */ { @@ -114,11 +130,8 @@ class Badge extends UI5Element { } onBeforeRendering() { - if (this.hasIcon) { - this.setAttribute("__has-icon", ""); - } else { - this.removeAttribute("__has-icon"); - } + this._hasIcon = this.hasIcon; + this._iconOnly = this.iconOnly; } get hasText() { @@ -129,6 +142,10 @@ class Badge extends UI5Element { return !!this.icon.length; } + get iconOnly() { + return this.hasIcon && !this.hasText; + } + get badgeDescription() { return this.i18nBundle.getText(BADGE_DESCRIPTION); } diff --git a/packages/main/src/themes/Badge.css b/packages/main/src/themes/Badge.css index 439b429555aa..c8936b75ff7b 100644 --- a/packages/main/src/themes/Badge.css +++ b/packages/main/src/themes/Badge.css @@ -2,28 +2,49 @@ :host(:not([hidden])) { display: inline-block; - height: 1.125em; + height: 1em; min-width: 1.125em; max-width: 100%; - padding: 0 0.625em; - color: var(--sapTextColor); + padding: 0 0.3125em; + color: var(--sapAccentColor1); background: var(--sapLegendBackgroundColor1); - border: solid 1px var(--sapLegendColor1); - border-radius: 1.125em; + border: solid 0.0625em var(--sapAccentColor1); + border-radius: 0.5em; box-sizing: border-box; font-family: "72override", var(--sapFontFamily); text-align: center; letter-spacing: 0.0125em; } -/* Bagde with Icon */ -:host([__has-icon]) { - padding: 0 0.3125em; +.ui5-badge-root { + display: flex; + align-items: center; + width: 100%; + height: 100%; + box-sizing: border-box; +} + +.ui5-badge-text { + width: 100%; + overflow: hidden; + white-space: nowrap; + font-weight: bold; + text-overflow: ellipsis; + text-transform: uppercase; + letter-spacing: inherit; + font-size: var(--ui5-badge-font-size); /* origin from --sapFontSmallSize (0.75rem) */ +} + +:host([_icon-only]) { + padding: 0 0.1875em; } ::slotted([ui5-icon]) { - width: .75em; - height: .75em; + width: 0.75em; + height: 0.75em; + min-width: 0.75em; + min-height: 0.75em; + color: inherit; } /* IE 11 specific selector */ @@ -31,90 +52,82 @@ display: flex; } -:host([__has-icon]) .ui5-badge-text { - padding-left: 0.1875em; +:host([_has-icon]) .ui5-badge-text { + padding-left: 0.125em; } /* RTL */ -:host([__has-icon]) .ui5-badge-root[dir="rtl"] .ui5-badge-text { +:host([_has-icon]) .ui5-badge-root[dir="rtl"] .ui5-badge-text { padding-left: 0; - padding-right: 0.1875em; + padding-right: 0.125em; } /* Scheme 1 */ :host([color-scheme="1"]) { background-color: var(--ui5-badge-color-scheme-1-background); border-color: var(--ui5-badge-color-scheme-1-border); + color: var(--ui5-badge-color-scheme-1-color); } /* Scheme 2 */ :host([color-scheme="2"]) { background-color: var(--ui5-badge-color-scheme-2-background); border-color: var(--ui5-badge-color-scheme-2-border); + color: var(--ui5-badge-color-scheme-2-color); } /* Scheme 3 */ :host([color-scheme="3"]) { background-color: var(--ui5-badge-color-scheme-3-background); border-color: var(--ui5-badge-color-scheme-3-border); + color: var(--ui5-badge-color-scheme-3-color); } /* Scheme 4 */ :host([color-scheme="4"]) { background-color: var(--ui5-badge-color-scheme-4-background); border-color: var(--ui5-badge-color-scheme-4-border); + color: var(--ui5-badge-color-scheme-4-color); } /* Scheme 5 */ :host([color-scheme="5"]) { background-color: var(--ui5-badge-color-scheme-5-background); border-color: var(--ui5-badge-color-scheme-5-border); + color: var(--ui5-badge-color-scheme-5-color); } /* Scheme 6 */ :host([color-scheme="6"]) { background-color: var(--ui5-badge-color-scheme-6-background); border-color: var(--ui5-badge-color-scheme-6-border); + color: var(--ui5-badge-color-scheme-6-color); } /* Scheme 7 */ :host([color-scheme="7"]) { background-color: var(--ui5-badge-color-scheme-7-background); border-color: var(--ui5-badge-color-scheme-7-border); + color: var(--ui5-badge-color-scheme-7-color); } /* Scheme 8 */ :host([color-scheme="8"]) { background-color: var(--ui5-badge-color-scheme-8-background); border-color: var(--ui5-badge-color-scheme-8-border); + color: var(--ui5-badge-color-scheme-8-color); } /* Scheme 9 */ :host([color-scheme="9"]) { background-color: var(--ui5-badge-color-scheme-9-background); border-color: var(--ui5-badge-color-scheme-9-border); + color: var(--ui5-badge-color-scheme-9-color); } /* Scheme 10 */ :host([color-scheme="10"]) { background-color: var(--ui5-badge-color-scheme-10-background); border-color: var(--ui5-badge-color-scheme-10-border); -} - -.ui5-badge-root { - display: flex; - align-items: center; - width: 100%; - height: 100%; - box-sizing: border-box; -} - -.ui5-badge-text { - width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - text-transform: uppercase; - letter-spacing: inherit; - font-size: var(--ui5-badge-font-size); /* origin from --sapFontSmallSize (0.75rem) */ -} + color: var(--ui5-badge-color-scheme-10-color); +} \ No newline at end of file diff --git a/packages/main/src/themes/base/Badge-parameters.css b/packages/main/src/themes/base/Badge-parameters.css index 48313a294972..b1a77be9fbd7 100644 --- a/packages/main/src/themes/base/Badge-parameters.css +++ b/packages/main/src/themes/base/Badge-parameters.css @@ -1,23 +1,43 @@ :root { --ui5-badge-font-size: 0.75em; /* origin from --sapFontSmallSize (0.75rem) */ + --ui5-badge-color-scheme-1-background: var(--sapLegendBackgroundColor1); - --ui5-badge-color-scheme-1-border: var(--sapLegendColor1); + --ui5-badge-color-scheme-1-border: var(--sapAccentColor1); + --ui5-badge-color-scheme-1-color: var(--sapAccentColor1); + --ui5-badge-color-scheme-2-background: var(--sapLegendBackgroundColor2); - --ui5-badge-color-scheme-2-border: var(--sapLegendColor2); + --ui5-badge-color-scheme-2-border: var(--sapAccentColor2); + --ui5-badge-color-scheme-2-color: var(--sapAccentColor2); + --ui5-badge-color-scheme-3-background: var(--sapLegendBackgroundColor3); - --ui5-badge-color-scheme-3-border: var(--sapLegendColor3); + --ui5-badge-color-scheme-3-border: var(--sapAccentColor3); + --ui5-badge-color-scheme-3-color: var(--sapAccentColor3); + --ui5-badge-color-scheme-4-background: var(--sapLegendBackgroundColor5); - --ui5-badge-color-scheme-4-border: var(--sapLegendColor5); + --ui5-badge-color-scheme-4-border: var(--sapAccentColor4); + --ui5-badge-color-scheme-4-color: var(--sapAccentColor4); + --ui5-badge-color-scheme-5-background: var(--sapLegendBackgroundColor20); - --ui5-badge-color-scheme-5-border: var(--sapLegendColor20); + --ui5-badge-color-scheme-5-border: var(--sapAccentColor5); + --ui5-badge-color-scheme-5-color: var(--sapAccentColor5); + --ui5-badge-color-scheme-6-background: var(--sapLegendBackgroundColor6); - --ui5-badge-color-scheme-6-border: var(--sapLegendColor6); + --ui5-badge-color-scheme-6-border: var(--sapAccentColor6); + --ui5-badge-color-scheme-6-color: var(--sapAccentColor6); + --ui5-badge-color-scheme-7-background: var(--sapLegendBackgroundColor7); - --ui5-badge-color-scheme-7-border: var(--sapLegendColor7); + --ui5-badge-color-scheme-7-border: var(--sapAccentColor7); + --ui5-badge-color-scheme-7-color: var(--sapAccentColor7); + --ui5-badge-color-scheme-8-background: var(--sapLegendBackgroundColor8); - --ui5-badge-color-scheme-8-border: var(--sapLegendColor8); + --ui5-badge-color-scheme-8-border: var(--sapAccentColor8); + --ui5-badge-color-scheme-8-color: var(--sapAccentColor8); + --ui5-badge-color-scheme-9-background: var(--sapLegendBackgroundColor10); - --ui5-badge-color-scheme-9-border: var(--sapLegendColor10); + --ui5-badge-color-scheme-9-border: var(--sapAccentColor10); + --ui5-badge-color-scheme-9-color: var(--sapAccentColor10); + --ui5-badge-color-scheme-10-background: var(--sapLegendBackgroundColor9); --ui5-badge-color-scheme-10-border: var(--sapAccentColor9); + --ui5-badge-color-scheme-10-color: var(--sapAccentColor9); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/Badge-parameters.css b/packages/main/src/themes/sap_belize_hcb/Badge-parameters.css index 24eb30237948..46c3db3e4806 100644 --- a/packages/main/src/themes/sap_belize_hcb/Badge-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/Badge-parameters.css @@ -2,23 +2,42 @@ :root { --ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-1-color: var(--sapTextColor); + + --ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-2-color: var(--sapTextColor); + + --ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-3-color: var(--sapTextColor); + + --ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-4-color: var(--sapTextColor); + + --ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-5-color: var(--sapTextColor); + + --ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-6-color: var(--sapTextColor); + + --ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-7-color: var(--sapTextColor); + + --ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-8-color: var(--sapTextColor); + + --ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-9-color: var(--sapTextColor); + + --ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-10-color: var(--sapTextColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcw/Badge-parameters.css b/packages/main/src/themes/sap_belize_hcw/Badge-parameters.css index 24eb30237948..46c3db3e4806 100644 --- a/packages/main/src/themes/sap_belize_hcw/Badge-parameters.css +++ b/packages/main/src/themes/sap_belize_hcw/Badge-parameters.css @@ -2,23 +2,42 @@ :root { --ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-1-color: var(--sapTextColor); + + --ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-2-color: var(--sapTextColor); + + --ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-3-color: var(--sapTextColor); + + --ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-4-color: var(--sapTextColor); + + --ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-5-color: var(--sapTextColor); + + --ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-6-color: var(--sapTextColor); + + --ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-7-color: var(--sapTextColor); + + --ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-8-color: var(--sapTextColor); + + --ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-9-color: var(--sapTextColor); + + --ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-10-color: var(--sapTextColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcb/Badge-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/Badge-parameters.css index 24eb30237948..46c3db3e4806 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/Badge-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/Badge-parameters.css @@ -2,23 +2,42 @@ :root { --ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-1-color: var(--sapTextColor); + + --ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-2-color: var(--sapTextColor); + + --ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-3-color: var(--sapTextColor); + + --ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-4-color: var(--sapTextColor); + + --ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-5-color: var(--sapTextColor); + + --ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-6-color: var(--sapTextColor); + + --ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-7-color: var(--sapTextColor); + + --ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-8-color: var(--sapTextColor); + + --ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-9-color: var(--sapTextColor); + + --ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-10-color: var(--sapTextColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcw/Badge-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/Badge-parameters.css index 24eb30237948..46c3db3e4806 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/Badge-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/Badge-parameters.css @@ -2,23 +2,42 @@ :root { --ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground); - --ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-1-color: var(--sapTextColor); + + --ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-2-color: var(--sapTextColor); + + --ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-3-color: var(--sapTextColor); + + --ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-4-color: var(--sapTextColor); + + --ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-5-color: var(--sapTextColor); + + --ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-6-color: var(--sapTextColor); + + --ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-7-color: var(--sapTextColor); + + --ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-8-color: var(--sapTextColor); + + --ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-9-color: var(--sapTextColor); + + --ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground); --ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-10-color: var(--sapTextColor); } \ No newline at end of file diff --git a/packages/main/test/pages/Badge.html b/packages/main/test/pages/Badge.html index a7296e1516e8..9c273578689b 100644 --- a/packages/main/test/pages/Badge.html +++ b/packages/main/test/pages/Badge.html @@ -35,7 +35,7 @@

Badges

- This is a info label
+ This is an info label
Required Required Required
Hello world
Damn you are right
diff --git a/packages/theme-base/css-vars-usage.json b/packages/theme-base/css-vars-usage.json index cf9756f60c35..b4087fdecb7b 100644 --- a/packages/theme-base/css-vars-usage.json +++ b/packages/theme-base/css-vars-usage.json @@ -160,15 +160,6 @@ "--sapLegendBackgroundColor9", "--sapLegendBackgroundColor10", "--sapLegendBackgroundColor20", - "--sapLegendColor1", - "--sapLegendColor2", - "--sapLegendColor3", - "--sapLegendColor5", - "--sapLegendColor6", - "--sapLegendColor7", - "--sapLegendColor8", - "--sapLegendColor10", - "--sapLegendColor20", "--sapLink_SubtleColor", "--sapLinkColor", "--sapList_Active_Background",