From 3bd5bfa8be6e7c54eb41ebcdbda0f40c3af7d49d Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Mon, 31 Aug 2026 18:51:26 +0300 Subject: [PATCH 1/4] feat(ui5-avatar-badge): add colorScheme property for extended color palette Adds a new `colorScheme` property accepting `Accent1` through `Accent10`, matching the color scheme values available on `ui5-avatar`. The semantic `state` property takes precedence over `colorScheme` when set to any value other than `None`. CSS custom properties inherited from the parent Avatar are reused so the badge background and icon color stay in sync with the avatar across all themes without duplicating theme token mappings. Fixes: #13925 --- .../cypress/specs/visuals/AvatarBadge.cy.tsx | 27 ++++ packages/main/src/AvatarBadge.ts | 20 +++ packages/main/src/themes/AvatarBadge.css | 18 +++ packages/main/test/pages/Avatar.html | 116 +++++++++++++++--- .../main/Avatar/AvatarBadge.mdx | 6 + .../AvatarBadge/ColorSchemes/ColorSchemes.md | 5 + .../main/AvatarBadge/ColorSchemes/main.js | 4 + .../main/AvatarBadge/ColorSchemes/sample.html | 59 +++++++++ .../main/AvatarBadge/ColorSchemes/sample.tsx | 23 ++++ 9 files changed, 262 insertions(+), 16 deletions(-) create mode 100644 packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/ColorSchemes.md create mode 100644 packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/main.js create mode 100644 packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.html create mode 100644 packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx diff --git a/packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx b/packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx index c57255facff7b..6d9c7bc0b9252 100644 --- a/packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx +++ b/packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx @@ -91,4 +91,31 @@ describe("AvatarBadge visual", () => { ); cy.screenshot(); }); + + it("extended color palette - all accents", () => { + cy.mount( +
+ {["Accent1", "Accent2", "Accent3", "Accent4", "Accent5", "Accent6", "Accent7", "Accent8", "Accent9", "Accent10"].map((scheme) => ( + + + + ))} +
+ ); + cy.screenshot(); + }); + + it("extended color palette - semantic state overrides colorScheme", () => { + cy.mount( + + + + ); + // semantic state wins - Negative red styling should apply + cy.get("[ui5-avatar]") + .find("[ui5-avatar-badge]") + .should("have.attr", "state", "Negative") + .should("have.attr", "color-scheme", "Accent3"); + cy.screenshot(); + }); }); diff --git a/packages/main/src/AvatarBadge.ts b/packages/main/src/AvatarBadge.ts index 0ecfaebbe4a5f..d5c9ec028dc43 100644 --- a/packages/main/src/AvatarBadge.ts +++ b/packages/main/src/AvatarBadge.ts @@ -12,6 +12,7 @@ import AvatarBadgeTemplate from "./AvatarBadgeTemplate.js"; import AvatarBadgeCss from "./generated/themes/AvatarBadge.css.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; +import type AvatarColorScheme from "./types/AvatarColorScheme.js"; const ICON_NOT_FOUND = "ICON_NOT_FOUND"; @@ -87,12 +88,31 @@ class AvatarBadge extends UI5Element { * - `Negative` - Red, used for error/rejected states * - `Information` - Blue, used for informational states * + * **Note:** `state` takes precedence over `colorScheme`. When `state` is set + * to any value other than `None`, the semantic styling applies and `colorScheme` is ignored. + * * @default "None" * @public */ @property() state: `${ValueState}` = ValueState.None; + /** + * Defines the color scheme of the badge from the extended color palette. + * + * Available options are `Accent1` through `Accent10`. + * + * **Note:** This is a decorative property. `state` takes precedence - when + * `state` is set to any value other than `None`, the semantic state styling + * applies and `colorScheme` is ignored. + * + * @default undefined + * @public + * @since 2.27.0 + */ + @property() + colorScheme?: `${AvatarColorScheme}`; + /** * @private */ diff --git a/packages/main/src/themes/AvatarBadge.css b/packages/main/src/themes/AvatarBadge.css index d4a51c539ac18..123017a63ab09 100644 --- a/packages/main/src/themes/AvatarBadge.css +++ b/packages/main/src/themes/AvatarBadge.css @@ -38,6 +38,24 @@ color: var(--sapInformativeTextColor); } +/* Extended color palette - applies only when no semantic state overrides */ +:host([color-scheme="Accent1"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent1, var(--sapAccentColor1)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent1-color, var(--sapContent_ImagePlaceholderForegroundColor)); } +:host([color-scheme="Accent2"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent2, var(--sapAccentColor2)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent2-color, var(--sapContent_ImagePlaceholderForegroundColor)); } +:host([color-scheme="Accent3"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent3, var(--sapAccentColor3)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent3-color, var(--sapContent_ImagePlaceholderForegroundColor)); } +:host([color-scheme="Accent4"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent4, var(--sapAccentColor4)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent4-color, var(--sapContent_ImagePlaceholderForegroundColor)); } +:host([color-scheme="Accent5"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent5, var(--sapAccentColor5)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent5-color, var(--sapContent_ImagePlaceholderForegroundColor)); } +:host([color-scheme="Accent6"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent6, var(--sapAccentColor6)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent6-color, var(--sapContent_ImagePlaceholderForegroundColor)); } +:host([color-scheme="Accent7"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent7, var(--sapAccentColor7)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent7-color, var(--sapContent_ImagePlaceholderForegroundColor)); } +:host([color-scheme="Accent8"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent8, var(--sapAccentColor8)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent8-color, var(--sapContent_ImagePlaceholderForegroundColor)); } +:host([color-scheme="Accent9"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent9, var(--sapAccentColor9)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent9-color, var(--sapContent_ImagePlaceholderForegroundColor)); } +:host([color-scheme="Accent10"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent10, var(--sapAccentColor10)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent10-color, var(--sapContent_ImagePlaceholderForegroundColor)); } + +:host([color-scheme^="Accent"]:is([state="None"], :not([state]))) { + background: var(--_ui5-avatar-badge-bg); + border-color: var(--_ui5-avatar-badge-color); + color: var(--_ui5-avatar-badge-color); +} + .ui5-avatar-badge-icon { width: var(--_ui5-avatar-badge-icon-size); height: var(--_ui5-avatar-badge-icon-size); diff --git a/packages/main/test/pages/Avatar.html b/packages/main/test/pages/Avatar.html index 5cfb13726062c..eeb42dc010728 100644 --- a/packages/main/test/pages/Avatar.html +++ b/packages/main/test/pages/Avatar.html @@ -287,22 +287,106 @@

Avatar Badge - With Initials and Color Schemes

-

Avatar Badge - With Icons

- - - - - - - - - - - - - - - +

Avatar Badge - Extended Color Palette (Avatar color-scheme / Badge color-scheme)

+
+
+ + + +

Accent1 / Accent1

+
+
+ + + +

Accent2 / Accent2

+
+
+ + + +

Accent3 / Accent3

+
+
+ + + +

Accent4 / Accent4

+
+
+ + + +

Accent5 / Accent5

+
+
+ + + +

Accent6 / Accent6

+
+
+ + + +

Accent7 / Accent7

+
+
+ + + +

Accent8 / Accent8

+
+
+ + + +

Accent9 / Accent9

+
+
+ + + +

Accent10 / Accent10

+
+
+
+ +
+

Avatar Badge - Extended Color Palette with Value State (Avatar color-scheme / Badge state)

+

Semantic state takes precedence over colorScheme.

+
+
+ + + +

Accent1 / None

+
+
+ + + +

Accent1 / Positive

+
+
+ + + +

Accent1 / Critical

+
+
+ + + +

Accent1 / Negative

+
+
+ + + +

Accent1 / Information

+
+
diff --git a/packages/website/docs/_components_pages/main/Avatar/AvatarBadge.mdx b/packages/website/docs/_components_pages/main/Avatar/AvatarBadge.mdx index f86f5918928ea..4c60fb0f02f19 100644 --- a/packages/website/docs/_components_pages/main/Avatar/AvatarBadge.mdx +++ b/packages/website/docs/_components_pages/main/Avatar/AvatarBadge.mdx @@ -4,6 +4,7 @@ slug: ../../AvatarBadge import Basic from "../../../_samples/main/AvatarBadge/Basic/Basic.md"; import ValueStates from "../../../_samples/main/AvatarBadge/ValueStates/ValueStates.md"; +import ColorSchemes from "../../../_samples/main/AvatarBadge/ColorSchemes/ColorSchemes.md"; <%COMPONENT_OVERVIEW%> @@ -18,3 +19,8 @@ import ValueStates from "../../../_samples/main/AvatarBadge/ValueStates/ValueSta The AvatarBadge supports different states to indicate status or notifications. + +### Extended Color Palette +The AvatarBadge supports the extended color palette (`Accent1` through `Accent10`) via the `colorScheme` property, matching the avatar's own color scheme. + + diff --git a/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/ColorSchemes.md b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/ColorSchemes.md new file mode 100644 index 0000000000000..0c062a836e844 --- /dev/null +++ b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/ColorSchemes.md @@ -0,0 +1,5 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; +import react from '!!raw-loader!./sample.tsx'; + + diff --git a/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/main.js b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/main.js new file mode 100644 index 0000000000000..03a733dc9e16d --- /dev/null +++ b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/main.js @@ -0,0 +1,4 @@ +import "@ui5/webcomponents/dist/Avatar.js"; +import "@ui5/webcomponents/dist/AvatarBadge.js"; +// Icons +import "@ui5/webcomponents-icons/dist/employee.js"; diff --git a/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.html b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.html new file mode 100644 index 0000000000000..a85e00df65bb5 --- /dev/null +++ b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.html @@ -0,0 +1,59 @@ + + + + + + + + Sample + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx new file mode 100644 index 0000000000000..3a8c5ae17068e --- /dev/null +++ b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx @@ -0,0 +1,23 @@ +import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; +import AvatarClass from "@ui5/webcomponents/dist/Avatar.js"; +import "@ui5/webcomponents-icons/dist/employee.js"; +import AvatarBadgeClass from "@ui5/webcomponents/dist/AvatarBadge.js"; + +const Avatar = createReactComponent(AvatarClass); +const AvatarBadge = createReactComponent(AvatarBadgeClass); + +const accents = ["Accent1", "Accent2", "Accent3", "Accent4", "Accent5", "Accent6", "Accent7", "Accent8", "Accent9", "Accent10"]; + +function App() { + return ( +
+ {accents.map((scheme) => ( + + + + ))} +
+ ); +} + +export default App; From dff66478781d4de4772c13568bb54f39c3b5f3c0 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Tue, 1 Sep 2026 11:17:40 +0300 Subject: [PATCH 2/4] fix(ui5-avatar-badge): type accents array as const in React sample --- .../docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx index 3a8c5ae17068e..912082bd2c820 100644 --- a/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx +++ b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx @@ -6,7 +6,7 @@ import AvatarBadgeClass from "@ui5/webcomponents/dist/AvatarBadge.js"; const Avatar = createReactComponent(AvatarClass); const AvatarBadge = createReactComponent(AvatarBadgeClass); -const accents = ["Accent1", "Accent2", "Accent3", "Accent4", "Accent5", "Accent6", "Accent7", "Accent8", "Accent9", "Accent10"]; +const accents = ["Accent1", "Accent2", "Accent3", "Accent4", "Accent5", "Accent6", "Accent7", "Accent8", "Accent9", "Accent10"] as const; function App() { return ( From ac3e67de1d71f20f1512273607e6e360fcba4ea1 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Tue, 1 Sep 2026 14:40:24 +0300 Subject: [PATCH 3/4] feat(ui5-avatar-badge): switch colorScheme to indication color palette Replace the AccentN color scheme values with numeric "1"-"10" values backed by sapIndicationColor_N_* tokens, matching the ui5-tag pattern. Each color scheme gets its own per-rule declaration (no catch-all), adds a box-shadow via sapContent_Shadow1, and uses dedicated border color tokens instead of reusing the text color token. Update test page, website sample (HTML + React), docs description, and Cypress visual tests to reflect the new values. --- .../cypress/specs/visuals/AvatarBadge.cy.tsx | 6 +-- packages/main/src/AvatarBadge.ts | 13 +++--- packages/main/src/themes/AvatarBadge.css | 28 +++++-------- packages/main/test/pages/Avatar.html | 40 +++++++++---------- .../main/Avatar/AvatarBadge.mdx | 2 +- .../main/AvatarBadge/ColorSchemes/sample.html | 40 +++++++++---------- .../main/AvatarBadge/ColorSchemes/sample.tsx | 6 +-- 7 files changed, 64 insertions(+), 71 deletions(-) diff --git a/packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx b/packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx index 6d9c7bc0b9252..057e81c57d6b3 100644 --- a/packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx +++ b/packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx @@ -95,7 +95,7 @@ describe("AvatarBadge visual", () => { it("extended color palette - all accents", () => { cy.mount(
- {["Accent1", "Accent2", "Accent3", "Accent4", "Accent5", "Accent6", "Accent7", "Accent8", "Accent9", "Accent10"].map((scheme) => ( + {["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"].map((scheme) => ( @@ -108,14 +108,14 @@ describe("AvatarBadge visual", () => { it("extended color palette - semantic state overrides colorScheme", () => { cy.mount( - + ); // semantic state wins - Negative red styling should apply cy.get("[ui5-avatar]") .find("[ui5-avatar-badge]") .should("have.attr", "state", "Negative") - .should("have.attr", "color-scheme", "Accent3"); + .should("have.attr", "color-scheme", "3"); cy.screenshot(); }); }); diff --git a/packages/main/src/AvatarBadge.ts b/packages/main/src/AvatarBadge.ts index d5c9ec028dc43..a19fd98269e13 100644 --- a/packages/main/src/AvatarBadge.ts +++ b/packages/main/src/AvatarBadge.ts @@ -12,7 +12,6 @@ import AvatarBadgeTemplate from "./AvatarBadgeTemplate.js"; import AvatarBadgeCss from "./generated/themes/AvatarBadge.css.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; -import type AvatarColorScheme from "./types/AvatarColorScheme.js"; const ICON_NOT_FOUND = "ICON_NOT_FOUND"; @@ -98,20 +97,20 @@ class AvatarBadge extends UI5Element { state: `${ValueState}` = ValueState.None; /** - * Defines the color scheme of the badge from the extended color palette. + * Defines the color scheme of the badge using the indication color palette. * - * Available options are `Accent1` through `Accent10`. + * Available options are `"1"` through `"10"`, matching the indication colors + * used by components such as `ui5-tag`. * - * **Note:** This is a decorative property. `state` takes precedence - when - * `state` is set to any value other than `None`, the semantic state styling - * applies and `colorScheme` is ignored. + * **Note:** `state` takes precedence - when `state` is set to any value other than `None`, + * the semantic state styling applies and `colorScheme` is ignored. * * @default undefined * @public * @since 2.27.0 */ @property() - colorScheme?: `${AvatarColorScheme}`; + colorScheme?: string; /** * @private diff --git a/packages/main/src/themes/AvatarBadge.css b/packages/main/src/themes/AvatarBadge.css index 123017a63ab09..58ad79c8e75d1 100644 --- a/packages/main/src/themes/AvatarBadge.css +++ b/packages/main/src/themes/AvatarBadge.css @@ -38,23 +38,17 @@ color: var(--sapInformativeTextColor); } -/* Extended color palette - applies only when no semantic state overrides */ -:host([color-scheme="Accent1"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent1, var(--sapAccentColor1)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent1-color, var(--sapContent_ImagePlaceholderForegroundColor)); } -:host([color-scheme="Accent2"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent2, var(--sapAccentColor2)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent2-color, var(--sapContent_ImagePlaceholderForegroundColor)); } -:host([color-scheme="Accent3"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent3, var(--sapAccentColor3)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent3-color, var(--sapContent_ImagePlaceholderForegroundColor)); } -:host([color-scheme="Accent4"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent4, var(--sapAccentColor4)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent4-color, var(--sapContent_ImagePlaceholderForegroundColor)); } -:host([color-scheme="Accent5"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent5, var(--sapAccentColor5)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent5-color, var(--sapContent_ImagePlaceholderForegroundColor)); } -:host([color-scheme="Accent6"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent6, var(--sapAccentColor6)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent6-color, var(--sapContent_ImagePlaceholderForegroundColor)); } -:host([color-scheme="Accent7"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent7, var(--sapAccentColor7)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent7-color, var(--sapContent_ImagePlaceholderForegroundColor)); } -:host([color-scheme="Accent8"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent8, var(--sapAccentColor8)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent8-color, var(--sapContent_ImagePlaceholderForegroundColor)); } -:host([color-scheme="Accent9"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent9, var(--sapAccentColor9)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent9-color, var(--sapContent_ImagePlaceholderForegroundColor)); } -:host([color-scheme="Accent10"]:is([state="None"], :not([state]))) { --_ui5-avatar-badge-bg: var(--ui5-avatar-accent10, var(--sapAccentColor10)); --_ui5-avatar-badge-color: var(--ui5-avatar-accent10-color, var(--sapContent_ImagePlaceholderForegroundColor)); } - -:host([color-scheme^="Accent"]:is([state="None"], :not([state]))) { - background: var(--_ui5-avatar-badge-bg); - border-color: var(--_ui5-avatar-badge-color); - color: var(--_ui5-avatar-badge-color); -} +/* Extended color palette - applies only when state is None */ +:host([color-scheme="1"][state="None"]) { background: var(--sapIndicationColor_1_Background); border-color: var(--sapIndicationColor_1_BorderColor); color: var(--sapIndicationColor_1_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="2"][state="None"]) { background: var(--sapIndicationColor_2_Background); border-color: var(--sapIndicationColor_2_BorderColor); color: var(--sapIndicationColor_2_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="3"][state="None"]) { background: var(--sapIndicationColor_3_Background); border-color: var(--sapIndicationColor_3_BorderColor); color: var(--sapIndicationColor_3_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="4"][state="None"]) { background: var(--sapIndicationColor_4_Background); border-color: var(--sapIndicationColor_4_BorderColor); color: var(--sapIndicationColor_4_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="5"][state="None"]) { background: var(--sapIndicationColor_5_Background); border-color: var(--sapIndicationColor_5_BorderColor); color: var(--sapIndicationColor_5_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="6"][state="None"]) { background: var(--sapIndicationColor_6_Background); border-color: var(--sapIndicationColor_6_BorderColor); color: var(--sapIndicationColor_6_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="7"][state="None"]) { background: var(--sapIndicationColor_7_Background); border-color: var(--sapIndicationColor_7_BorderColor); color: var(--sapIndicationColor_7_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="8"][state="None"]) { background: var(--sapIndicationColor_8_Background); border-color: var(--sapIndicationColor_8_BorderColor); color: var(--sapIndicationColor_8_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="9"][state="None"]) { background: var(--sapIndicationColor_9_Background); border-color: var(--sapIndicationColor_9_BorderColor); color: var(--sapIndicationColor_9_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="10"][state="None"]) { background: var(--sapIndicationColor_10_Background); border-color: var(--sapIndicationColor_10_BorderColor); color: var(--sapIndicationColor_10_TextColor); box-shadow: var(--sapContent_Shadow1); } .ui5-avatar-badge-icon { width: var(--_ui5-avatar-badge-icon-size); diff --git a/packages/main/test/pages/Avatar.html b/packages/main/test/pages/Avatar.html index eeb42dc010728..46cd134ddadc6 100644 --- a/packages/main/test/pages/Avatar.html +++ b/packages/main/test/pages/Avatar.html @@ -291,63 +291,63 @@

Avatar Badge - Extended Color Palette (Avatar color-scheme / Badge color-sch
- + -

Accent1 / Accent1

+

Accent1 / colorScheme 1

- + -

Accent2 / Accent2

+

Accent2 / colorScheme 2

- + -

Accent3 / Accent3

+

Accent3 / colorScheme 3

- + -

Accent4 / Accent4

+

Accent4 / colorScheme 4

- + -

Accent5 / Accent5

+

Accent5 / colorScheme 5

- + -

Accent6 / Accent6

+

Accent6 / colorScheme 6

- + -

Accent7 / Accent7

+

Accent7 / colorScheme 7

- + -

Accent8 / Accent8

+

Accent8 / colorScheme 8

- + -

Accent9 / Accent9

+

Accent9 / colorScheme 9

- + -

Accent10 / Accent10

+

Accent10 / colorScheme 10

diff --git a/packages/website/docs/_components_pages/main/Avatar/AvatarBadge.mdx b/packages/website/docs/_components_pages/main/Avatar/AvatarBadge.mdx index 4c60fb0f02f19..d8187109a2413 100644 --- a/packages/website/docs/_components_pages/main/Avatar/AvatarBadge.mdx +++ b/packages/website/docs/_components_pages/main/Avatar/AvatarBadge.mdx @@ -21,6 +21,6 @@ The AvatarBadge supports different states to indicate status or notifications. ### Extended Color Palette -The AvatarBadge supports the extended color palette (`Accent1` through `Accent10`) via the `colorScheme` property, matching the avatar's own color scheme. +The AvatarBadge supports an extended color palette via the `colorScheme` property. Use values `"1"` through `"10"` to apply indication colors — vivid background, border, and text tones drawn from the SAP indication color tokens, with a subtle box shadow to enhance visibility. diff --git a/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.html b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.html index a85e00df65bb5..7d2fab3857e08 100644 --- a/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.html +++ b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.html @@ -11,44 +11,44 @@ - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + diff --git a/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx index 912082bd2c820..c0f0bf0e98b7d 100644 --- a/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx +++ b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx @@ -6,13 +6,13 @@ import AvatarBadgeClass from "@ui5/webcomponents/dist/AvatarBadge.js"; const Avatar = createReactComponent(AvatarClass); const AvatarBadge = createReactComponent(AvatarBadgeClass); -const accents = ["Accent1", "Accent2", "Accent3", "Accent4", "Accent5", "Accent6", "Accent7", "Accent8", "Accent9", "Accent10"] as const; +const schemes = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"] as const; function App() { return (
- {accents.map((scheme) => ( - + {schemes.map((scheme) => ( + ))} From 679be1dd47b6e8db649b8cb3cf2a2d951f4e4669 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Tue, 1 Sep 2026 16:14:16 +0300 Subject: [PATCH 4/4] - removed unnecessary tag reference --- packages/main/src/AvatarBadge.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/main/src/AvatarBadge.ts b/packages/main/src/AvatarBadge.ts index a19fd98269e13..d851659201cf5 100644 --- a/packages/main/src/AvatarBadge.ts +++ b/packages/main/src/AvatarBadge.ts @@ -99,8 +99,7 @@ class AvatarBadge extends UI5Element { /** * Defines the color scheme of the badge using the indication color palette. * - * Available options are `"1"` through `"10"`, matching the indication colors - * used by components such as `ui5-tag`. + * Available options are `"1"` through `"10"`, matching the indication colors. * * **Note:** `state` takes precedence - when `state` is set to any value other than `None`, * the semantic state styling applies and `colorScheme` is ignored.