feat(ui5-avatar-badge): add colorScheme property for extended color palette - #14009
Conversation
…alette 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
|
🚀 Deployed on https://pr-14009--ui5-webcomponents-preview.netlify.app |
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.
👋 Heads-up: dev close is in effectThanks for the contribution! This repository is currently in dev close ahead of release This PR appears to introduce public-API changes (detected by diffing the Custom Elements Manifest against the latest published version on npm):
Could you please hold off on merging into If this change must ship in the current release, please request a review from one or two members of @UI5/ui5-team-webc so the team can sign off explicitly.
Posted automatically by the Dev Close Notice workflow. |
|
🧹 Preview deployment cleaned up: https://pr-14009--ui5-webcomponents.netlify.app |
Adds a new
colorSchemeproperty accepting values"1"through"10",backed by the SAP indication color tokens (
sapIndicationColor_N_*).This follows the same pattern used by
ui5-tagand avoids introducinga new enum, keeping the API intentionally loose to match established
conventions.
Each value maps directly to its own CSS rule setting background,
border-color, and text color from the indication palette, plus a
box-shadow via
sapContent_Shadow1for visual depth. The semanticstateproperty takes precedence overcolorSchemewhen set to anyvalue other than
None.Fixes: #13925
JIRA: BGSOFUIPIRIN-7121