From 960cca816a636de3d2e0822132c3cdb9de83a816 Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Wed, 15 Jul 2026 15:35:24 +0300 Subject: [PATCH 1/6] fix(ui5-color-palette): fix hover background shape mismatch in color palette popover buttons Issue: The Default Color and More colors... buttons inside the color palette popover are placed in wrapper elements (ui5-cp-default-color-button-wrapper and ui5-cp-more-colors-wrapper) that have a specific shape due to the popover's border-radius clipping. On hover, the button rendered its own background with four fully rounded corners, visually conflicting with the wrapper shape. Solution: Apply the hover background color on the wrapper elements instead of letting the button render it. The button's own hover background and border are overridden to transparent via CSS custom properties scoped to those wrappers, so the highlight takes the correct shape of the wrapper. Fixes: https://github.com/UI5/webcomponents/issues/13763 --- packages/main/src/themes/ColorPalette.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/main/src/themes/ColorPalette.css b/packages/main/src/themes/ColorPalette.css index d30219e69c619..ff18368357396 100644 --- a/packages/main/src/themes/ColorPalette.css +++ b/packages/main/src/themes/ColorPalette.css @@ -108,6 +108,17 @@ flex-direction: column; } +.ui5-cp-default-color-button-wrapper:hover, +.ui5-cp-more-colors-wrapper:hover { + background-color: var(--sapButton_Lite_Hover_Background); +} + +.ui5-cp-default-color-button-wrapper .ui5-cp-default-color-button, +.ui5-cp-more-colors-wrapper .ui5-cp-more-colors { + --sapButton_Lite_Hover_Background: transparent; + --sapButton_Lite_Hover_BorderColor: transparent; +} + .ui5-cp-separator { height: 0.0625rem; background: var(--sapToolbar_SeparatorColor); From 57f5f19f4283735f037d343d5389c8f1ebf6679d Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Wed, 15 Jul 2026 16:45:24 +0300 Subject: [PATCH 2/6] fix(ui5-color-palette): fix hover background shape mismatch in color palette popover buttons Issue: The Default Color and More colors... buttons inside the color palette popover are placed in wrapper elements that have a specific shape due to the popover's border-radius clipping. On hover, the button rendered its own background with four fully rounded corners, visually conflicting with the wrapper shape. Additionally, the buttons displayed a visible border and used the blue link text color from the Transparent button design instead of the standard text color. Solution: Override CSS custom properties on the button elements inside the wrappers. Setting --_ui5_button_border_radius to 0 removes the button's own corner rounding so the rectangular hover background fills the full wrapper area, relying on the popover's overflow: hidden to clip the corners correctly. Setting --sapButton_Lite_BorderColor and --sapButton_Lite_Hover_BorderColor to transparent removes the visible border in both normal and hover states. Setting --sapButton_Lite_TextColor and --sapButton_Lite_Hover_TextColor to --sapTextColor aligns the text color with the design specification. Fixes: https://github.com/UI5/webcomponents/issues/13763 --- packages/main/src/themes/ColorPalette.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/main/src/themes/ColorPalette.css b/packages/main/src/themes/ColorPalette.css index ff18368357396..a00720502e160 100644 --- a/packages/main/src/themes/ColorPalette.css +++ b/packages/main/src/themes/ColorPalette.css @@ -127,4 +127,9 @@ .ui5-cp-default-color-button, .ui5-cp-more-colors { padding: 0.0625rem; + --_ui5_button_border_radius: 0; + --sapButton_Lite_BorderColor: transparent; + --sapButton_Lite_Hover_BorderColor: transparent; + --sapButton_Lite_TextColor: var(--sapTextColor); + --sapButton_Lite_Hover_TextColor: var(--sapTextColor); } \ No newline at end of file From 68f06ae3130915e1be7a95efce6a52b5d734c0bd Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Wed, 15 Jul 2026 16:48:51 +0300 Subject: [PATCH 3/6] fix(ui5-color-palette): fix hover background shape mismatch in color palette popover buttons --- packages/main/src/themes/ColorPalette.css | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/main/src/themes/ColorPalette.css b/packages/main/src/themes/ColorPalette.css index a00720502e160..0b19f9a4b03fa 100644 --- a/packages/main/src/themes/ColorPalette.css +++ b/packages/main/src/themes/ColorPalette.css @@ -108,17 +108,6 @@ flex-direction: column; } -.ui5-cp-default-color-button-wrapper:hover, -.ui5-cp-more-colors-wrapper:hover { - background-color: var(--sapButton_Lite_Hover_Background); -} - -.ui5-cp-default-color-button-wrapper .ui5-cp-default-color-button, -.ui5-cp-more-colors-wrapper .ui5-cp-more-colors { - --sapButton_Lite_Hover_Background: transparent; - --sapButton_Lite_Hover_BorderColor: transparent; -} - .ui5-cp-separator { height: 0.0625rem; background: var(--sapToolbar_SeparatorColor); From 30186f520adce92f89dd0778d7665593ca1304ba Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Wed, 15 Jul 2026 16:59:00 +0300 Subject: [PATCH 4/6] fix(ui5-color-palette): fix hover background shape mismatch in color palette popover buttons Issue: The Default Color and More colors... buttons inside the color palette popover are placed in wrapper elements that have a specific shape due to the popover's border-radius clipping. On hover, the button rendered its own background with four fully rounded corners, visually conflicting with the wrapper shape. Additionally, the buttons used the blue link text color from the Transparent button design instead of the standard text color. Solution: Override --_ui5_button_border_radius to 0 on the button elements so the rectangular hover background fills the full wrapper area, relying on the popover's overflow: hidden to clip the corners correctly. Introduce --_ui5_color-palette-button-text-color in the component parameters and use it to override --sapButton_Lite_TextColor and --sapButton_Lite_Hover_TextColor, scoped only to those buttons. Fixes: https://github.com/UI5/webcomponents/issues/13763 --- packages/main/src/themes/ColorPalette.css | 6 ++---- packages/main/src/themes/base/ColorPalette-parameters.css | 1 + 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/main/src/themes/ColorPalette.css b/packages/main/src/themes/ColorPalette.css index 0b19f9a4b03fa..1f682c7d652db 100644 --- a/packages/main/src/themes/ColorPalette.css +++ b/packages/main/src/themes/ColorPalette.css @@ -117,8 +117,6 @@ .ui5-cp-more-colors { padding: 0.0625rem; --_ui5_button_border_radius: 0; - --sapButton_Lite_BorderColor: transparent; - --sapButton_Lite_Hover_BorderColor: transparent; - --sapButton_Lite_TextColor: var(--sapTextColor); - --sapButton_Lite_Hover_TextColor: var(--sapTextColor); + --sapButton_Lite_TextColor: var(--_ui5_color-palette-button-text-color); + --sapButton_Lite_Hover_TextColor: var(--_ui5_color-palette-button-text-color); } \ No newline at end of file diff --git a/packages/main/src/themes/base/ColorPalette-parameters.css b/packages/main/src/themes/base/ColorPalette-parameters.css index 00886b31870df..08d040f7d0c47 100644 --- a/packages/main/src/themes/base/ColorPalette-parameters.css +++ b/packages/main/src/themes/base/ColorPalette-parameters.css @@ -23,4 +23,5 @@ --_ui5_color-palette-item-mobile-focus-sides-inset: 0.25rem 0.25rem; --_ui5_color-palette-item-after-mobile-focus-border: var(--_ui5_color-palette-item-after-focus-color); --_ui5-color-palette-item-background-color: transparent; + --_ui5_color-palette-button-text-color: var(--sapTextColor); } \ No newline at end of file From 3c3ef5fb01bc7be6213f2d55745c3f5353054a90 Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Thu, 16 Jul 2026 10:49:26 +0300 Subject: [PATCH 5/6] fix(ui5-color-palette): fix hover background shape mismatch in color palette popover buttons Issue: The Default Color and More colors... buttons inside the color palette popover are placed in wrapper elements that have a specific shape due to the popover's border-radius clipping. On hover, the button rendered its own background with four fully rounded corners, visually conflicting with the wrapper shape. Solution: Override --_ui5_button_border_radius to 0 on the button elements so the rectangular hover background fills the full wrapper area, relying on the popover's overflow: hidden to clip the corners to match the wrapper shape. Fixes: https://github.com/UI5/webcomponents/issues/13763 --- packages/main/src/themes/ColorPalette.css | 2 -- packages/main/src/themes/base/ColorPalette-parameters.css | 1 - 2 files changed, 3 deletions(-) diff --git a/packages/main/src/themes/ColorPalette.css b/packages/main/src/themes/ColorPalette.css index 1f682c7d652db..71fed94d201b0 100644 --- a/packages/main/src/themes/ColorPalette.css +++ b/packages/main/src/themes/ColorPalette.css @@ -117,6 +117,4 @@ .ui5-cp-more-colors { padding: 0.0625rem; --_ui5_button_border_radius: 0; - --sapButton_Lite_TextColor: var(--_ui5_color-palette-button-text-color); - --sapButton_Lite_Hover_TextColor: var(--_ui5_color-palette-button-text-color); } \ No newline at end of file diff --git a/packages/main/src/themes/base/ColorPalette-parameters.css b/packages/main/src/themes/base/ColorPalette-parameters.css index 08d040f7d0c47..00886b31870df 100644 --- a/packages/main/src/themes/base/ColorPalette-parameters.css +++ b/packages/main/src/themes/base/ColorPalette-parameters.css @@ -23,5 +23,4 @@ --_ui5_color-palette-item-mobile-focus-sides-inset: 0.25rem 0.25rem; --_ui5_color-palette-item-after-mobile-focus-border: var(--_ui5_color-palette-item-after-focus-color); --_ui5-color-palette-item-background-color: transparent; - --_ui5_color-palette-button-text-color: var(--sapTextColor); } \ No newline at end of file From 47df57d0e2b8b5a2c1dad521ad27c3af9708f18e Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Thu, 16 Jul 2026 11:22:13 +0300 Subject: [PATCH 6/6] fix(ui5-color-palette): fix hover background shape mismatch in color palette popover buttons Issue: The Default Color and More colors... buttons inside the color palette popover are placed in wrapper elements that have a specific shape due to the popover's border-radius clipping. On hover, the button rendered its own background with four fully rounded corners, visually conflicting with the wrapper shape. Solution: Set border-radius: 0 on the button elements. The rectangular hover background fills the full wrapper area and the popover's overflow: hidden clips the corners to match the wrapper shape. Fixes: https://github.com/UI5/webcomponents/issues/13763 --- packages/main/src/themes/ColorPalette.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/themes/ColorPalette.css b/packages/main/src/themes/ColorPalette.css index 71fed94d201b0..d34acb7bde2fa 100644 --- a/packages/main/src/themes/ColorPalette.css +++ b/packages/main/src/themes/ColorPalette.css @@ -116,5 +116,5 @@ .ui5-cp-default-color-button, .ui5-cp-more-colors { padding: 0.0625rem; - --_ui5_button_border_radius: 0; + border-radius: 0; } \ No newline at end of file