From 2ddc4e94982c02a973e64b51e1500644694ca8a2 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Date: Wed, 16 Sep 2020 10:57:53 +0300 Subject: [PATCH] fix(ui5-badge): update colors to match the spec(#2216) Aligned colors to Quartz Light and Dark and High Contrast themes. Fixes: #2210 --- packages/main/src/themes/Badge.css | 40 +++++++++---------- .../main/src/themes/base/Badge-parameters.css | 20 ++++++++++ .../sap_belize_hcb/Badge-parameters.css | 24 +++++++++++ .../sap_belize_hcb/parameters-bundle.css | 2 +- .../sap_belize_hcw/Badge-parameters.css | 24 +++++++++++ .../sap_belize_hcw/parameters-bundle.css | 2 +- .../sap_fiori_3_hcb/Badge-parameters.css | 24 +++++++++++ .../sap_fiori_3_hcb/parameters-bundle.css | 2 +- .../sap_fiori_3_hcw/Badge-parameters.css | 24 +++++++++++ .../sap_fiori_3_hcw/parameters-bundle.css | 2 +- packages/theme-base/css-vars-usage.json | 4 +- 11 files changed, 142 insertions(+), 26 deletions(-) create mode 100644 packages/main/src/themes/sap_belize_hcb/Badge-parameters.css create mode 100644 packages/main/src/themes/sap_belize_hcw/Badge-parameters.css create mode 100644 packages/main/src/themes/sap_fiori_3_hcb/Badge-parameters.css create mode 100644 packages/main/src/themes/sap_fiori_3_hcw/Badge-parameters.css diff --git a/packages/main/src/themes/Badge.css b/packages/main/src/themes/Badge.css index 5320876db26d..3405dc609a25 100644 --- a/packages/main/src/themes/Badge.css +++ b/packages/main/src/themes/Badge.css @@ -41,62 +41,62 @@ /* Scheme 1 */ :host([color-scheme="1"]) { - background-color: var(--sapLegendBackgroundColor1); - border-color: var(--sapLegendColor1); + background-color: var(--ui5-badge-color-scheme-1-background); + border-color: var(--ui5-badge-color-scheme-1-border); } /* Scheme 2 */ :host([color-scheme="2"]) { - background-color: var(--sapLegendBackgroundColor2); - border-color: var(--sapLegendColor2); + background-color: var(--ui5-badge-color-scheme-2-background); + border-color: var(--ui5-badge-color-scheme-2-border); } /* Scheme 3 */ :host([color-scheme="3"]) { - background-color: var(--sapLegendBackgroundColor3); - border-color: var(--sapLegendColor3); + background-color: var(--ui5-badge-color-scheme-3-background); + border-color: var(--ui5-badge-color-scheme-3-border); } /* Scheme 4 */ :host([color-scheme="4"]) { - background-color: var(--sapLegendBackgroundColor4); - border-color: var(--sapLegendColor4); + background-color: var(--ui5-badge-color-scheme-4-background); + border-color: var(--ui5-badge-color-scheme-4-border); } /* Scheme 5 */ :host([color-scheme="5"]) { - background-color: var(--sapLegendBackgroundColor5); - border-color: var(--sapLegendColor5); + background-color: var(--ui5-badge-color-scheme-5-background); + border-color: var(--ui5-badge-color-scheme-5-border); } /* Scheme 6 */ :host([color-scheme="6"]) { - background-color: var(--sapLegendBackgroundColor6); - border-color: var(--sapLegendColor6); + background-color: var(--ui5-badge-color-scheme-6-background); + border-color: var(--ui5-badge-color-scheme-6-border); } /* Scheme 7 */ :host([color-scheme="7"]) { - background-color: var(--sapLegendBackgroundColor7); - border-color: var(--sapLegendColor7); + background-color: var(--ui5-badge-color-scheme-7-background); + border-color: var(--ui5-badge-color-scheme-7-border); } /* Scheme 8 */ :host([color-scheme="8"]) { - background-color: var(--sapLegendBackgroundColor8); - border-color: var(--sapLegendColor8); + background-color: var(--ui5-badge-color-scheme-8-background); + border-color: var(--ui5-badge-color-scheme-8-border); } /* Scheme 9 */ :host([color-scheme="9"]) { - background-color: var(--sapLegendBackgroundColor9); - border-color: var(--sapLegendColor9); + background-color: var(--ui5-badge-color-scheme-9-background); + border-color: var(--ui5-badge-color-scheme-9-border); } /* Scheme 10 */ :host([color-scheme="10"]) { - background-color: var(--sapLegendBackgroundColor10); - border-color: var(--sapLegendColor10); + background-color: var(--ui5-badge-color-scheme-10-background); + border-color: var(--ui5-badge-color-scheme-10-border); } .ui5-badge-root { diff --git a/packages/main/src/themes/base/Badge-parameters.css b/packages/main/src/themes/base/Badge-parameters.css index db509e2e0bd7..48313a294972 100644 --- a/packages/main/src/themes/base/Badge-parameters.css +++ b/packages/main/src/themes/base/Badge-parameters.css @@ -1,3 +1,23 @@ :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-2-background: var(--sapLegendBackgroundColor2); + --ui5-badge-color-scheme-2-border: var(--sapLegendColor2); + --ui5-badge-color-scheme-3-background: var(--sapLegendBackgroundColor3); + --ui5-badge-color-scheme-3-border: var(--sapLegendColor3); + --ui5-badge-color-scheme-4-background: var(--sapLegendBackgroundColor5); + --ui5-badge-color-scheme-4-border: var(--sapLegendColor5); + --ui5-badge-color-scheme-5-background: var(--sapLegendBackgroundColor20); + --ui5-badge-color-scheme-5-border: var(--sapLegendColor20); + --ui5-badge-color-scheme-6-background: var(--sapLegendBackgroundColor6); + --ui5-badge-color-scheme-6-border: var(--sapLegendColor6); + --ui5-badge-color-scheme-7-background: var(--sapLegendBackgroundColor7); + --ui5-badge-color-scheme-7-border: var(--sapLegendColor7); + --ui5-badge-color-scheme-8-background: var(--sapLegendBackgroundColor8); + --ui5-badge-color-scheme-8-border: var(--sapLegendColor8); + --ui5-badge-color-scheme-9-background: var(--sapLegendBackgroundColor10); + --ui5-badge-color-scheme-9-border: var(--sapLegendColor10); + --ui5-badge-color-scheme-10-background: var(--sapLegendBackgroundColor9); + --ui5-badge-color-scheme-10-border: 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 new file mode 100644 index 000000000000..24eb30237948 --- /dev/null +++ b/packages/main/src/themes/sap_belize_hcb/Badge-parameters.css @@ -0,0 +1,24 @@ +@import "../base/Badge-parameters.css"; + +: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-2-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css index 4cd105721d27..bf73078769dc 100644 --- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css @@ -1,6 +1,6 @@ @import "../base/sizes-parameters.css"; @import "./Avatar-parameters.css"; -@import "../base/Badge-parameters.css"; +@import "./Badge-parameters.css"; @import "./Button-parameters.css"; @import "./CalendarHeader-parameters.css"; @import "./Carousel-parameters.css"; diff --git a/packages/main/src/themes/sap_belize_hcw/Badge-parameters.css b/packages/main/src/themes/sap_belize_hcw/Badge-parameters.css new file mode 100644 index 000000000000..24eb30237948 --- /dev/null +++ b/packages/main/src/themes/sap_belize_hcw/Badge-parameters.css @@ -0,0 +1,24 @@ +@import "../base/Badge-parameters.css"; + +: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-2-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css index ecbfa3ea404d..c7bf0eff8921 100644 --- a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css @@ -1,6 +1,6 @@ @import "../base/sizes-parameters.css"; @import "./Avatar-parameters.css"; -@import "../base/Badge-parameters.css"; +@import "./Badge-parameters.css"; @import "./Button-parameters.css"; @import "./CalendarHeader-parameters.css"; @import "./Carousel-parameters.css"; 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 new file mode 100644 index 000000000000..24eb30237948 --- /dev/null +++ b/packages/main/src/themes/sap_fiori_3_hcb/Badge-parameters.css @@ -0,0 +1,24 @@ +@import "../base/Badge-parameters.css"; + +: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-2-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css index 8f4c2e596387..f86325df3a92 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css @@ -1,6 +1,6 @@ @import "../base/sizes-parameters.css"; @import "./Avatar-parameters.css"; -@import "../base/Badge-parameters.css"; +@import "./Badge-parameters.css"; @import "./Button-parameters.css"; @import "./CalendarHeader-parameters.css"; @import "./Carousel-parameters.css"; 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 new file mode 100644 index 000000000000..24eb30237948 --- /dev/null +++ b/packages/main/src/themes/sap_fiori_3_hcw/Badge-parameters.css @@ -0,0 +1,24 @@ +@import "../base/Badge-parameters.css"; + +: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-2-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor); + --ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css index 8f4c2e596387..f86325df3a92 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css @@ -1,6 +1,6 @@ @import "../base/sizes-parameters.css"; @import "./Avatar-parameters.css"; -@import "../base/Badge-parameters.css"; +@import "./Badge-parameters.css"; @import "./Button-parameters.css"; @import "./CalendarHeader-parameters.css"; @import "./Carousel-parameters.css"; diff --git a/packages/theme-base/css-vars-usage.json b/packages/theme-base/css-vars-usage.json index 3cab16df8d61..dec85f665b64 100644 --- a/packages/theme-base/css-vars-usage.json +++ b/packages/theme-base/css-vars-usage.json @@ -133,23 +133,23 @@ "--sapLegendBackgroundColor1", "--sapLegendBackgroundColor2", "--sapLegendBackgroundColor3", - "--sapLegendBackgroundColor4", "--sapLegendBackgroundColor5", "--sapLegendBackgroundColor6", "--sapLegendBackgroundColor7", "--sapLegendBackgroundColor8", "--sapLegendBackgroundColor9", "--sapLegendBackgroundColor10", + "--sapLegendBackgroundColor20", "--sapLegendColor1", "--sapLegendColor2", "--sapLegendColor3", - "--sapLegendColor4", "--sapLegendColor5", "--sapLegendColor6", "--sapLegendColor7", "--sapLegendColor8", "--sapLegendColor9", "--sapLegendColor10", + "--sapLegendColor20", "--sapLink_SubtleColor", "--sapLinkColor", "--sapList_Active_Background",