@sapudex/web-components 2.49.0 → 2.51.0

package/src/themes/MessageStrip.css

@@ -1,26 +1,150 @@
 :host {
-  --udex-message-strip-color-action-background: var(--sapBackgroundColor, #fff);
-  --udex-message-strip-color-action-border: var(--udexColorBlue7, #0070f2);
-  --udex-message-strip-color-action-close-icon: var(--udexColorGrey7, #475e75);
-  --udex-message-strip-color-information-status: var(--sapInformativeElementColor, #0070f2);
-  --udex-message-strip-color-success-status: var(--sapPositiveElementColor, #188918);
-  --udex-message-strip-color-warning-status: var(--sapCriticalElementColor, #c35500);
-  --udex-message-strip-color-error-status: var(--sapNegativeElementColor, #d20a0a);
+  --udex-message-strip-color-action-background: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-message-strip-color-action-border: var(--udexColorBlue8, #0057D2);
+  --udex-message-strip-color-action-text: var(--udexColorGrey9, #223548);
+  --udex-message-strip-color-action-icon: var(--udexColorBlue8, #0057D2);
+
+  --udex-message-strip-color-non-semantic-close-icon: var(--udexColorGrey7, #475e75);
+
+  --udex-message-strip-color-information-background: var(--udexColorBlue1, #EBF8FF);
+  --udex-message-strip-color-success-background: var(--udexColorGreen1, #F5FAE5);
+  --udex-message-strip-color-warning-background: var(--udexColorMango1, #FFF8D6);
+  --udex-message-strip-color-error-background: var(--udexColorRed1, #FFEAF4);
+
+  --udex-message-strip-color-information-border: var(--udexColorBlue6, #1B90FF);
+  --udex-message-strip-color-success-border: var(--udexColorGreen6, #36A41D);
+  --udex-message-strip-color-warning-border: var(--udexColorMango6, #E76500);
+  --udex-message-strip-color-error-border: var(--udexColorRed6, #EE3939);
+
+  --udex-message-strip-color-information-status: var(--udexColorBlue8, #0057D2);
+  --udex-message-strip-color-success-status: var(--udexColorGreen8, #256F3A);
+  --udex-message-strip-color-warning-status: var(--udexColorMango8, #A93E00);
+  --udex-message-strip-color-error-status: var(--udexColorRed8, #AA0808);
+
   --udex-message-strip-close-icon-top: calc(50% - 13px);
+
   --udex-message-strip-min-height: 20px;
   --udex-message-strip-padding-inline-no-icon: var(--udexSpacer12, 12px);
   --udex-message-strip-padding-block-no-icon: var(--udexSpacer8, 8px);
   --udex-message-strip-border-width: 1px;
   --udex-message-strip-padding: var(--udexSpacer8, 8px) 36px;
   --udex-message-strip-padding-hide-icon: var(--udexSpacer8, 12px);
+
+  /* Grey Light */
+  --udex-message-strip-color-grey-light-background: var(--udexColorGrey1, #F5F6F7);
+  --udex-message-strip-color-grey-light-border: var(--udexColorGrey3, #D5DADD);
+  --udex-message-strip-color-grey-light-text: var(--udexColorGrey8, #354A5F);
+
+  /* Grey Dark */
+  --udex-message-strip-color-grey-dark-background: var(--udexColorGrey8, #354A5F);
+  --udex-message-strip-color-grey-dark-border: var(--udexColorGrey9, #223548);
+  --udex-message-strip-color-grey-dark-text: var(--udexColorGrey1, #F5F6F7);
+
+  /* Red Light */
+  --udex-message-strip-color-red-light-background: var(--udexColorRed1, #FFEAF4);
+  --udex-message-strip-color-red-light-border: var(--udexColorRed3, #FFB2D2);
+  --udex-message-strip-color-red-light-text: var(--udexColorRed8, #AA0808);
+
+  /* Red Dark */
+  --udex-message-strip-color-red-dark-background: var(--udexColorRed8, #AA0808);
+  --udex-message-strip-color-red-dark-border: var(--udexColorRed9, #840606);
+  --udex-message-strip-color-red-dark-text: var(--udexColorRed1, #FFEAF4);
+
+  /* Mango Light */
+  --udex-message-strip-color-mango-light-background: var(--udexColorMango1, #FFF8D6);
+  --udex-message-strip-color-mango-light-border: var(--udexColorMango3, #FFDF72);
+  --udex-message-strip-color-mango-light-text: var(--udexColorMango8, #A93E00);
+
+  /* Mango Dark */
+  --udex-message-strip-color-mango-dark-background: var(--udexColorMango8, #A93E00);
+  --udex-message-strip-color-mango-dark-border: var(--udexColorMango9, #8D2A00);
+  --udex-message-strip-color-mango-dark-text: var(--udexColorMango1, #FFF8D6);
+
+  /* Green Light */
+  --udex-message-strip-color-green-light-background: var(--udexColorGreen1, #F5FAE5);
+  --udex-message-strip-color-green-light-border: var(--udexColorGreen3, #BDE986);
+  --udex-message-strip-color-green-light-text: var(--udexColorGreen8, #256F3A);
+
+  /* Green Dark */
+  --udex-message-strip-color-green-dark-background: var(--udexColorGreen8, #256F3A);
+  --udex-message-strip-color-green-dark-border: var(--udexColorGreen9, #1E592F);
+  --udex-message-strip-color-green-dark-text: var(--udexColorGreen1, #F5FAE5);
+
+  /* Teal Light */
+  --udex-message-strip-color-teal-light-background: var(--udexColorTeal1, #DAFDF5);
+  --udex-message-strip-color-teal-light-border: var(--udexColorTeal3, #64EDD2);
+  --udex-message-strip-color-teal-light-text: var(--udexColorTeal8, #046C7A);
+
+  /* Teal Dark */
+  --udex-message-strip-color-teal-dark-background: var(--udexColorTeal8, #046C7A);
+  --udex-message-strip-color-teal-dark-border: var(--udexColorTeal9, #035663);
+  --udex-message-strip-color-teal-dark-text: var(--udexColorTeal1, #DAFDF5);
+
+  /* Blue Light */
+  --udex-message-strip-color-blue-light-background: var(--udexColorBlue1, #EBF8FF);
+  --udex-message-strip-color-blue-light-border: var(--udexColorBlue3, #A6E0FF);
+  --udex-message-strip-color-blue-light-text: var(--udexColorBlue8, #0057D2);
+
+  /* Blue Dark */
+  --udex-message-strip-color-blue-dark-background: var(--udexColorBlue8, #0057D2);
+  --udex-message-strip-color-blue-dark-border: var(--udexColorBlue9, #0040B0);
+  --udex-message-strip-color-blue-dark-text: var(--udexColorBlue1, #EBF8FF);
+
+  /* Indigo Light */
+  --udex-message-strip-color-indigo-light-background: var(--udexColorIndigo1, #F1ECFF);
+  --udex-message-strip-color-indigo-light-border: var(--udexColorIndigo3, #D3B6FF);
+  --udex-message-strip-color-indigo-light-text: var(--udexColorIndigo8, #470CED);
+
+  /* Indigo Dark */
+  --udex-message-strip-color-indigo-dark-background: var(--udexColorIndigo8, #470CED);
+  --udex-message-strip-color-indigo-dark-border: var(--udexColorIndigo9, #2C13AD);
+  --udex-message-strip-color-indigo-dark-text: var(--udexColorIndigo1, #F1ECFF);
+
+  /* Pink Light */
+  --udex-message-strip-color-pink-light-background: var(--udexColorPink1, #FFF0FA);
+  --udex-message-strip-color-pink-light-border: var(--udexColorPink3, #FFAFED);
+  --udex-message-strip-color-pink-light-text: var(--udexColorPink8, #A100C2);
+
+  /* Pink Dark */
+  --udex-message-strip-color-pink-dark-background: var(--udexColorPink8, #A100C2);
+  --udex-message-strip-color-pink-dark-border: var(--udexColorPink9, #7800A4);
+  --udex-message-strip-color-pink-dark-text: var(--udexColorPink1, #FFF0FA);
+
+  /* Raspberry Light */
+  --udex-message-strip-color-raspberry-light-background: var(--udexColorRaspberry1, #FFF0F5);
+  --udex-message-strip-color-raspberry-light-border: var(--udexColorRaspberry3, #FECBDA);
+  --udex-message-strip-color-raspberry-light-text: var(--udexColorRaspberry8, #BA066C);
+
+  /* Raspberry Dark */
+  --udex-message-strip-color-raspberry-dark-background: var(--udexColorRaspberry8, #BA066C);
+  --udex-message-strip-color-raspberry-dark-border: var(--udexColorRaspberry9, #9B015D);
+  --udex-message-strip-color-raspberry-dark-text: var(--udexColorRaspberry1, #FFF0F5);
+
+  font-family: var(--sapFontFamily, "72 Brand Variable", "Arial", "Helvetica", "sans-serif");
+  color: var(--sapTextColor);
 }
 
-:host [udex-button] {
+/* :host [udex-button] {
   --udex-button-color-tertiary-standard-default-text-and-icon: var(--udex-message-strip-color-action-close-icon);
-}
+} */
 
-:host([design="Action"]) .udex-message-strip {
+:host([design="Action"]) .udex-message-strip,
+:host([design="Neutral"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-action-background);
   border-color: var(--udex-message-strip-color-action-border);
+  color: var(--udex-message-strip-color-action-text);
+}
+
+:host([design="Action"]) .udex-message-strip ::slotted(*:not([udex-link])),
+:host([design="Neutral"]) .udex-message-strip ::slotted(*:not([udex-link])) {
+  color: var(--udex-message-strip-color-action-text);
+}
+
+:host([design="Action"]) .ui5-message-strip-icon-wrapper [ui5-icon],
+:host([design="Action"]) .ui5-message-strip-icon-wrapper ::slotted([ui5-icon]),
+:host([design="Neutral"]) .ui5-message-strip-icon-wrapper [ui5-icon],
+:host([design="Neutral"]) .ui5-message-strip-icon-wrapper ::slotted([ui5-icon]) {
+  color: var(--udex-message-strip-color-action-icon);
 }
 
 .ui5-message-strip-root.ui5-message-strip-root-hide-icon {
@@ -58,18 +182,268 @@
   vertical-align: middle;
 }
 
+:host([design="Information"]) .ui5-message-strip-icon-wrapper [ui5-icon],
 :host([design="Information"]) .message-strip__text-status {
   color: var(--udex-message-strip-color-information-status);
 }
 
+:host([design="Positive"]) .ui5-message-strip-icon-wrapper [ui5-icon],
 :host([design="Positive"]) .message-strip__text-status {
   color: var(--udex-message-strip-color-success-status);
 }
 
+:host([design="Warning"]) .ui5-message-strip-icon-wrapper [ui5-icon],
 :host([design="Warning"]) .message-strip__text-status {
   color: var(--udex-message-strip-color-warning-status);
 }
 
+:host([design="Negative"]) .ui5-message-strip-icon-wrapper [ui5-icon],
 :host([design="Negative"]) .message-strip__text-status {
   color: var(--udex-message-strip-color-error-status);
 }
+
+.ui5-message-strip-root--info {
+  background-color: var(--udex-message-strip-color-information-background);
+  border-color: var(--udex-message-strip-color-information-border);
+}
+
+.ui5-message-strip-root--positive {
+  background-color: var(--udex-message-strip-color-success-background);
+  border-color: var(--udex-message-strip-color-success-border);
+}
+
+.ui5-message-strip-root--negative {
+  background-color: var(--udex-message-strip-color-error-background);
+  border-color: var(--udex-message-strip-color-error-border);
+}
+
+.ui5-message-strip-root--critical {
+  background-color: var(--udex-message-strip-color-warning-background);
+  border-color: var(--udex-message-strip-color-warning-border);
+}
+
+/* ── Decorative Light variants ─────────────────────────────────────────────
+   ::slotted(*:not([udex-link])) overrides text/icon color without touching
+   links, which keep their natural blue.
+   Close button keeps its default dark icon.
+────────────────────────────────────────────────────────────────────────── */
+
+:host([design="GreyLight"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-grey-light-background);
+  border-color: var(--udex-message-strip-color-grey-light-border);
+  color: var(--udex-message-strip-color-grey-light-text);
+}
+
+:host([design="GreyLight"]) .udex-message-strip ::slotted(*:not([udex-link])) {
+  color: var(--udex-message-strip-color-grey-light-text);
+}
+
+:host([design="RedLight"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-red-light-background);
+  border-color: var(--udex-message-strip-color-red-light-border);
+  color: var(--udex-message-strip-color-red-light-text);
+}
+
+:host([design="RedLight"]) .udex-message-strip ::slotted(*:not([udex-link])) {
+  color: var(--udex-message-strip-color-red-light-text);
+}
+
+:host([design="MangoLight"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-mango-light-background);
+  border-color: var(--udex-message-strip-color-mango-light-border);
+  color: var(--udex-message-strip-color-mango-light-text);
+}
+
+:host([design="MangoLight"]) .udex-message-strip ::slotted(*:not([udex-link])) {
+  color: var(--udex-message-strip-color-mango-light-text);
+}
+
+:host([design="GreenLight"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-green-light-background);
+  border-color: var(--udex-message-strip-color-green-light-border);
+  color: var(--udex-message-strip-color-green-light-text);
+}
+
+:host([design="GreenLight"]) .udex-message-strip ::slotted(*:not([udex-link])) {
+  color: var(--udex-message-strip-color-green-light-text);
+}
+
+:host([design="TealLight"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-teal-light-background);
+  border-color: var(--udex-message-strip-color-teal-light-border);
+  color: var(--udex-message-strip-color-teal-light-text);
+}
+
+:host([design="TealLight"]) .udex-message-strip ::slotted(*:not([udex-link])) {
+  color: var(--udex-message-strip-color-teal-light-text);
+}
+
+:host([design="BlueLight"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-blue-light-background);
+  border-color: var(--udex-message-strip-color-blue-light-border);
+  color: var(--udex-message-strip-color-blue-light-text);
+}
+
+:host([design="BlueLight"]) .udex-message-strip ::slotted(*:not([udex-link])) {
+  color: var(--udex-message-strip-color-blue-light-text);
+}
+
+:host([design="IndigoLight"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-indigo-light-background);
+  border-color: var(--udex-message-strip-color-indigo-light-border);
+  color: var(--udex-message-strip-color-indigo-light-text);
+}
+
+:host([design="IndigoLight"]) .udex-message-strip ::slotted(*:not([udex-link])) {
+  color: var(--udex-message-strip-color-indigo-light-text);
+}
+
+:host([design="PinkLight"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-pink-light-background);
+  border-color: var(--udex-message-strip-color-pink-light-border);
+  color: var(--udex-message-strip-color-pink-light-text);
+}
+
+:host([design="PinkLight"]) .udex-message-strip ::slotted(*:not([udex-link])) {
+  color: var(--udex-message-strip-color-pink-light-text);
+}
+
+:host([design="RaspberryLight"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-raspberry-light-background);
+  border-color: var(--udex-message-strip-color-raspberry-light-border);
+  color: var(--udex-message-strip-color-raspberry-light-text);
+}
+
+:host([design="RaspberryLight"]) .udex-message-strip ::slotted(*:not([udex-link])) {
+  color: var(--udex-message-strip-color-raspberry-light-text);
+}
+
+/* ── Decorative Dark variants ──────────────────────────────────────────────
+   color on :host cascades to slotted text.
+   ::slotted(*) explicitly overrides elements that set their own color
+   (ui5-icon, udex-link, etc.) so everything stays white.
+   Close button is also overridden to white with semi-transparent states.
+────────────────────────────────────────────────────────────────────────── */
+
+:host([design="GreyDark"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-grey-dark-background);
+  border-color: var(--udex-message-strip-color-grey-dark-border);
+}
+
+:host([design="GreyDark"]) .udex-message-strip ::slotted(*) {
+  color: var(--udex-message-strip-color-grey-dark-text);
+}
+
+:host([design="RedDark"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-red-dark-background);
+  border-color: var(--udex-message-strip-color-red-dark-border);
+}
+
+:host([design="RedDark"]) .udex-message-strip ::slotted(*) {
+  color: var(--udex-message-strip-color-red-dark-text);
+}
+
+:host([design="MangoDark"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-mango-dark-background);
+  border-color: var(--udex-message-strip-color-mango-dark-border);
+}
+
+:host([design="MangoDark"]) .udex-message-strip ::slotted(*) {
+  color: var(--udex-message-strip-color-mango-dark-text);
+}
+
+:host([design="GreenDark"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-green-dark-background);
+  border-color: var(--udex-message-strip-color-green-dark-border);
+}
+
+:host([design="GreenDark"]) .udex-message-strip ::slotted(*) {
+  color: var(--udex-message-strip-color-green-dark-text);
+}
+
+:host([design="TealDark"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-teal-dark-background);
+  border-color: var(--udex-message-strip-color-teal-dark-border);
+}
+
+:host([design="TealDark"]) .udex-message-strip ::slotted(*) {
+  color: var(--udex-message-strip-color-teal-dark-text);
+}
+
+:host([design="BlueDark"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-blue-dark-background);
+  border-color: var(--udex-message-strip-color-blue-dark-border);
+}
+
+:host([design="BlueDark"]) .udex-message-strip ::slotted(*) {
+  color: var(--udex-message-strip-color-blue-dark-text);
+}
+
+:host([design="IndigoDark"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-indigo-dark-background);
+  border-color: var(--udex-message-strip-color-indigo-dark-border);
+}
+
+:host([design="IndigoDark"]) .udex-message-strip ::slotted(*) {
+  color: var(--udex-message-strip-color-indigo-dark-text);
+}
+
+:host([design="PinkDark"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-pink-dark-background);
+  border-color: var(--udex-message-strip-color-pink-dark-border);
+}
+
+:host([design="PinkDark"]) .udex-message-strip ::slotted(*) {
+  color: var(--udex-message-strip-color-pink-dark-text);
+}
+
+:host([design="RaspberryDark"]) .udex-message-strip {
+  background-color: var(--udex-message-strip-color-raspberry-dark-background);
+  border-color: var(--udex-message-strip-color-raspberry-dark-border);
+}
+
+:host([design="RaspberryDark"]) .udex-message-strip ::slotted(*) {
+  color: var(--udex-message-strip-color-raspberry-dark-text);
+}
+
+/* ── Close button: shared Light variant overrides ──────────────────────── */
+:host([design="GreyLight"]) [udex-button],
+:host([design="RedLight"]) [udex-button],
+:host([design="MangoLight"]) [udex-button],
+:host([design="GreenLight"]) [udex-button],
+:host([design="TealLight"]) [udex-button],
+:host([design="BlueLight"]) [udex-button],
+:host([design="IndigoLight"]) [udex-button],
+:host([design="PinkLight"]) [udex-button],
+:host([design="RaspberryLight"]) [udex-button] {
+  --udex-button-color-tertiary-standard-default-text-and-icon: var(--udex-message-strip-color-non-semantic-close-icon);
+  --udex-button-color-tertiary-standard-hover-background: rgba(0, 0, 0, 0.10);
+  --udex-button-color-tertiary-standard-active-text-and-icon: var(--udexColorGrey7, #475e75);
+  --udex-button-color-tertiary-standard-active-border: var(--udexColorGrey7, #475e75);
+  --udex-button-color-tertiary-standard-hover-text-and-icon: var(--udexColorGrey7, #475e75);
+  --udex-button-focus-border-color: var(--udexColorGrey7, #475e75);
+  --_ui5_button_focused_border: 0.125rem solid var(--udexColorGrey7, #475e75);
+  --_ui5_button_pressed_focused_border_color: var(--udexColorGrey7, #475e75);
+}
+
+/* ── Close button: shared Dark variant overrides ───────────────────────── */
+:host([design="GreyDark"]) [udex-button],
+:host([design="RedDark"]) [udex-button],
+:host([design="MangoDark"]) [udex-button],
+:host([design="GreenDark"]) [udex-button],
+:host([design="TealDark"]) [udex-button],
+:host([design="BlueDark"]) [udex-button],
+:host([design="IndigoDark"]) [udex-button],
+:host([design="PinkDark"]) [udex-button],
+:host([design="RaspberryDark"]) [udex-button] {
+  --udex-button-color-tertiary-standard-default-text-and-icon: var(--udexColorNeutralWhite, #ffffff);
+  --udex-button-color-tertiary-standard-hover-text-and-icon: var(--udexColorNeutralWhite, #ffffff);
+  --udex-button-color-tertiary-standard-hover-background: rgba(0, 0, 0, 0.10);
+  --udex-button-color-tertiary-standard-hover-border: var(--udexColorNeutralWhite, #ffffff);
+  --udex-button-color-tertiary-standard-active-text-and-icon: var(--udexColorNeutralWhite, #ffffff);
+  --udex-button-color-tertiary-standard-active-background: transparent;
+  --udex-button-color-tertiary-standard-active-border: var(--udexColorNeutralWhite, #ffffff);
+  --udex-button-focus-border-color: var(--udexColorNeutralWhite, #ffffff);
+  --_ui5_button_focused_border: 0.125rem solid var(--udexColorNeutralWhite, #ffffff);
+  --_ui5_button_pressed_focused_border_color: var(--udexColorNeutralWhite, #ffffff);
+}

package/src/themes/Modal.css

@@ -28,7 +28,7 @@
 }
 
 :host .ui5-popup-root .ui5-popup-content  {
-	padding: var(--udex-modal-and-overlay-modal-content-padding-vertical) calc(var(--udex-modal-and-overlay-modal-content-padding-horizontal) - var(--sapScrollBar_Dimension, 12px)) var(--udex-modal-and-overlay-modal-content-padding-vertical) var(--udex-modal-and-overlay-modal-content-padding-horizontal);
+	padding: var(--udex-modal-and-overlay-modal-content-padding-vertical) calc(var(--udex-modal-and-overlay-modal-content-padding-horizontal) - var(--udex-modal-scrollbar-width, 0px)) var(--udex-modal-and-overlay-modal-content-padding-vertical) var(--udex-modal-and-overlay-modal-content-padding-horizontal);
   scrollbar-gutter: stable;
 }
 
@@ -38,7 +38,7 @@
 }
 
 :host([type="basic"]) .ui5-popup-root .ui5-popup-content {
-  padding: 0 calc(var(--udex-modal-and-overlay-modal-content-padding-horizontal) - var(--sapScrollBar_Dimension, 12px)) 0 var(--udex-modal-and-overlay-modal-content-padding-horizontal);
+  padding: 0 calc(var(--udex-modal-and-overlay-modal-content-padding-horizontal) - var(--udex-modal-scrollbar-width, 0px)) 0 var(--udex-modal-and-overlay-modal-content-padding-horizontal);
   scrollbar-gutter: stable;
 }
 

package/src/themes/PromoTile.css

@@ -155,3 +155,159 @@
     flex-direction: column;
   }
 }
+
+/* Button overrides for dark (Evening) color scheme backgrounds */
+
+.udex-promo-tile--dark [udex-button] {
+  --udex-button-focus-border-color: var(--udexColorNeutralWhite, #FFFFFF);
+  --sapContent_FocusColor: var(--udexColorNeutralWhite, #FFFFFF);
+
+  /* Primary */
+  --udex-button-color-primary-standard-default-background: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-primary-standard-default-border-color: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-primary-standard-default-text-and-icon: var(--udexColorBlue8, #0057D2);
+  --udex-button-color-primary-standard-hover-background: var(--udexColorGrey4, #A9B4BE);
+  --udex-button-color-primary-standard-hover-border-color: var(--udexColorGrey3, #D5DADD);
+  --udex-button-color-primary-standard-hover-text-and-icon: var(--udexColorBlue10, #002A86);
+  --udex-button-color-primary-standard-active-background: var(--udexColorNeutralBlack70, #000000B3);
+  --udex-button-color-primary-standard-active-border: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-primary-standard-active-text-and-icon: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-primary-standard-disabled-background: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-primary-standard-disabled-text-and-icon: var(--udexColorBlue8, #0057D2);
+  /* Primary toggled */
+  --udex-button-color-primary-toggled-default-background: var(--udexColorNeutralBlack40, #00000066);
+  --udex-button-color-primary-toggled-default-border: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-primary-toggled-default-text-and-icon: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-primary-toggled-hover-background: var(--udexColorBlue10, #002A86);
+  --udex-button-color-primary-toggled-hover-border: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-primary-toggled-hover-text-and-icon: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-primary-toggled-disabled-background: var(--udexColorNeutralBlack40, #00000066);
+  --udex-button-color-primary-toggled-disabled-border: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-primary-toggled-disabled-text-and-icon: var(--udexColorBlue4, #89D1FF);
+
+  /* Secondary */
+  --udex-button-color-secondary-standard-default-background: var(--udexColorNeutralWhite0, #FFFFFF00);
+  --udex-button-color-secondary-standard-default-border: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-secondary-standard-default-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-secondary-standard-hover-background: var(--udexColorNeutralBlack10, #0000001A);
+  --udex-button-color-secondary-standard-hover-border: var(--udexColorGrey5, #8396A8);
+  --udex-button-color-secondary-standard-hover-text-and-icon: var(--udexColorBlue3, #A6E0FF);
+  --udex-button-color-secondary-standard-active-background: var(--udexColorNeutralBlack40, #00000066);
+  --udex-button-color-secondary-standard-active-border: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-secondary-standard-active-text-and-icon: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-secondary-standard-disabled-background: var(--udexColorNeutralWhite0, #FFFFFF00);
+  --udex-button-color-secondary-standard-disabled-border: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-secondary-standard-disabled-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);
+  /* Secondary toggled */
+  --udex-button-color-secondary-toggled-default-background: var(--udexColorNeutralWhite0, #FFFFFF00);
+  --udex-button-color-secondary-toggled-default-border: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-secondary-toggled-default-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-secondary-toggled-hover-background: var(--udexColorNeutralBlack10, #0000001A);
+  --udex-button-color-secondary-toggled-hover-border: var(--udexColorGrey5, #8396A8);
+  --udex-button-color-secondary-toggled-hover-text-and-icon: var(--udexColorBlue3, #A6E0FF);
+  --udex-button-color-secondary-toggled-disabled-background: var(--udexColorNeutralWhite0, #FFFFFF00);
+  --udex-button-color-secondary-toggled-disabled-border: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-secondary-toggled-disabled-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);
+
+  /* Tertiary */
+  --udex-button-color-tertiary-standard-default-background: var(--udexColorNeutralWhite0, #FFFFFF00);
+  --udex-button-color-tertiary-standard-default-border: var(--udexColorNeutralWhite0, #FFFFFF00);
+  --udex-button-color-tertiary-standard-default-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-tertiary-standard-hover-background: var(--udexColorNeutralBlack10, #0000001A);
+  --udex-button-color-tertiary-standard-hover-border: var(--udexColorGrey5, #8396A8);
+  --udex-button-color-tertiary-standard-hover-text-and-icon: var(--udexColorBlue3, #A6E0FF);
+  --udex-button-color-tertiary-standard-active-background: var(--udexColorNeutralBlack40, #00000066);
+  --udex-button-color-tertiary-standard-active-border: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-tertiary-standard-active-text-and-icon: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-tertiary-standard-disabled-background: var(--udexColorNeutralBlack, #000000);
+  --udex-button-color-tertiary-standard-disabled-border: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-tertiary-standard-disabled-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);
+  /* Tertiary toggled */
+  --udex-button-color-tertiary-toggled-default-background: var(--udexColorNeutralWhite0, #FFFFFF00);
+  --udex-button-color-tertiary-toggled-default-border: var(--udexColorNeutralWhite0, #FFFFFF00);
+  --udex-button-color-tertiary-toggled-default-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-tertiary-toggled-hover-background: var(--udexColorNeutralBlack10, #0000001A);
+  --udex-button-color-tertiary-toggled-hover-border: var(--udexColorGrey5, #8396A8);
+  --udex-button-color-tertiary-toggled-hover-text-and-icon: var(--udexColorBlue3, #A6E0FF);
+  --udex-button-color-tertiary-toggled-disabled-background: var(--udexColorNeutralWhite0, #FFFFFF00);
+  --udex-button-color-tertiary-toggled-disabled-border: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-tertiary-toggled-disabled-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);
+
+  /* Invisible */
+  --udex-button-color-invisible-standard-default-text-and-icon: var(--udexColorBlue3, #A6E0FF);
+  --udex-button-color-invisible-standard-hover-text-and-icon: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-invisible-standard-active-text-and-icon: var(--udexColorBlue5, #4DB1FF);
+  --udex-button-color-invisible-standard-disabled-text-and-icon: var(--udexColorBlue3, #A6E0FF);
+
+  /* Positive */
+  --udex-button-color-positive-standard-default-background: var(--udexColorGreen8, #256F3A);
+  --udex-button-color-positive-standard-default-border: var(--udexColorGreen3, #BDE986);
+  --udex-button-color-positive-standard-default-text-and-icon: var(--udexColorGreen2, #EBF5CB);
+  --udex-button-color-positive-standard-hover-background: var(--udexColorGreen10, #164323);
+  --udex-button-color-positive-standard-hover-border: var(--udexColorGreen3, #BDE986);
+  --udex-button-color-positive-standard-hover-text-and-icon: var(--udexColorGreen3, #BDE986);
+  --udex-button-color-positive-standard-active-background: var(--udexColorGrey11, #12171C);
+  --udex-button-color-positive-standard-active-border: var(--udexColorGreen4, #97DD40);
+  --udex-button-color-positive-standard-active-text-and-icon: var(--udexColorGreen4, #97DD40);
+  --udex-button-color-positive-standard-disabled-background: var(--udexColorGreen8, #256F3A);
+  --udex-button-color-positive-standard-disabled-border: var(--udexColorGreen3, #BDE986);
+  --udex-button-color-positive-standard-disabled-text-and-icon: var(--udexColorGreen2, #EBF5CB);
+  /* Positive toggled */
+  --udex-button-color-positive-toggled-default-background: var(--udexColorGrey11, #12171C);
+  --udex-button-color-positive-toggled-default-border: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-positive-toggled-default-text-and-icon: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-positive-toggled-hover-background: var(--udexColorBlue10, #002A86);
+  --udex-button-color-positive-toggled-hover-border: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-positive-toggled-hover-text-and-icon: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-positive-toggled-disabled-background: var(--udexColorGrey11, #12171C);
+  --udex-button-color-positive-toggled-disabled-border: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-positive-toggled-disabled-text-and-icon: var(--udexColorBlue4, #89D1FF);
+
+  /* Negative */
+  --udex-button-color-negative-standard-default-background: var(--udexColorRed8, #AA0808);
+  --udex-button-color-negative-standard-default-border: var(--udexColorRed3, #FFB2D2);
+  --udex-button-color-negative-standard-default-text-and-icon: var(--udexColorRed2, #FFD5EA);
+  --udex-button-color-negative-standard-hover-background: var(--udexColorRed10, #5A0404);
+  --udex-button-color-negative-standard-hover-border: var(--udexColorRed3, #FFB2D2);
+  --udex-button-color-negative-standard-hover-text-and-icon: var(--udexColorRed3, #FFB2D2);
+  --udex-button-color-negative-standard-active-background: var(--udexColorGrey11, #12171C);
+  --udex-button-color-negative-standard-active-border: var(--udexColorRed4, #FF8CB2);
+  --udex-button-color-negative-standard-active-text-and-icon: var(--udexColorRed4, #FF8CB2);
+  --udex-button-color-negative-standard-disabled-background: var(--udexColorRed8, #AA0808);
+  --udex-button-color-negative-standard-disabled-border: var(--udexColorRed3, #FFB2D2);
+  --udex-button-color-negative-standard-disabled-text-and-icon: var(--udexColorRed2, #FFD5EA);
+  /* Negative toggled */
+  --udex-button-color-negative-toggled-default-background: var(--udexColorGrey11, #12171C);
+  --udex-button-color-negative-toggled-default-border: var(--udexColorRed3, #FFB2D2);
+  --udex-button-color-negative-toggled-default-text-and-icon: var(--udexColorRed3, #FFB2D2);
+  --udex-button-color-negative-toggled-hover-background: var(--udexColorMango4, #FFC933);
+  --udex-button-color-negative-toggled-hover-border: var(--udexColorNeutralBlack, #000000);
+  --udex-button-color-negative-toggled-hover-text-and-icon: var(--udexColorNeutralBlack, #000000);
+  --udex-button-color-negative-toggled-disabled-background: var(--udexColorBlue4, #89D1FF);
+  --udex-button-color-negative-toggled-disabled-border: var(--udexColorNeutralBlack, #000000);
+  --udex-button-color-negative-toggled-disabled-text-and-icon: var(--udexColorNeutralBlack, #000000);
+
+  /* Warning */
+  --udex-button-color-warning-standard-default-background: var(--udexColorMango8, #A93E00);
+  --udex-button-color-warning-standard-default-border: var(--udexColorMango3, #FFDF72);
+  --udex-button-color-warning-standard-default-text-and-icon: var(--udexColorMango2, #FFF3B8);
+  --udex-button-color-warning-standard-hover-background: var(--udexColorMango10, #6D1900);
+  --udex-button-color-warning-standard-hover-border: var(--udexColorMango3, #FFDF72);
+  --udex-button-color-warning-standard-hover-text-and-icon: var(--udexColorMango3, #FFDF72);
+  --udex-button-color-warning-standard-active-background: var(--udexColorGrey11, #12171C);
+  --udex-button-color-warning-standard-active-border: var(--udexColorMango4, #FFC933);
+  --udex-button-color-warning-standard-active-text-and-icon: var(--udexColorMango4, #FFC933);
+  --udex-button-color-warning-standard-disabled-background: var(--udexColorMango8, #A93E00);
+  --udex-button-color-warning-standard-disabled-border: var(--udexColorMango3, #FFDF72);
+  --udex-button-color-warning-standard-disabled-text-and-icon: var(--udexColorMango2, #FFF3B8);
+  /* Warning toggled */
+  --udex-button-color-warning-toggled-default-background: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-warning-toggled-default-border: var(--udexColorMango10, #6D1900);
+  --udex-button-color-warning-toggled-default-text-and-icon: var(--udexColorMango10, #6D1900);
+  --udex-button-color-warning-toggled-hover-background: var(--udexColorMango2, #FFF3B8);
+  --udex-button-color-warning-toggled-hover-border: var(--udexColorMango8, #A93E00);
+  --udex-button-color-warning-toggled-hover-text-and-icon: var(--udexColorMango8, #A93E00);
+  --udex-button-color-warning-toggled-disabled-background: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-color-warning-toggled-disabled-border: var(--udexColorMango10, #6D1900);
+  --udex-button-color-warning-toggled-disabled-text-and-icon: var(--udexColorMango10, #6D1900);
+}

package/src/themes/RadioButton.css

@@ -31,7 +31,7 @@
 }
 
 :host([text]) .ui5-radio-root {
-  padding-inline-end: 0;
+  padding: 0;
 }
 
 .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer,
@@ -82,7 +82,7 @@
 [ui5-label].ui5-radio-label {
   font-family: var(--sapFontFamily);
   font-size: var(--udexTypographyBodySFontSize, var(--sapFontSize, 16px));
-  padding: 0 0 0 var(--udex-radio-button-label-offset);
+  padding-inline-start: var(--udex-radio-button-label-offset);
   color: var(--udex-radio-button-label-color);
 }
 

package/src/themes/Search.css

@@ -124,10 +124,8 @@
   width: 50px;
 }
 
-:host([mode="Home Search"]) .udex-search__container:not(.udex-search__container--has-value),
-:host([mode="Home Search"]) .udex-search__container:not(.udex-search__container--has-value) .udex-search__field,
-:host([mode="Home Search"]) .udex-search-prefix .udex-search__container:not(.udex-search__container--has-value),
-:host([mode="Home Search"]) .udex-search-prefix .udex-search__container:not(.udex-search__container--has-value) .udex-search__field {
+:host([mode="Home Search"]) .udex-search__container:not(:hover):not(.udex-search__container--focus),
+:host([mode="Home Search"]) .udex-search__container:not(:hover):not(.udex-search__container--focus) .udex-search__field {
   background-color: var(--udex-input-background-color);
 }
 
@@ -186,6 +184,8 @@
   background: var(--udex-input-color-background-light);
 }
 
+
+
 .udex-search-mode-home-search .udex-search__field {
   padding: var(--udex-home-input-padding-vertical) var(--udex-home-input-padding-right) var(--udex-home-input-padding-vertical) var(--udex-home-input-padding-left);
 }
@@ -393,6 +393,8 @@ input[type="search"]::-webkit-search-results-decoration {
   white-space: nowrap;
 }
 
+.udex-search__prefix-button:focus, 
+.udex-search__prefix-button:focus-visible,
 .udex-search__prefix-button:hover {
   cursor: pointer;
   background-color: var(--udexColorNeutralWhite);