@sapudex/web-components 2.48.0 → 2.50.0

package/src/themes/Badge.css

@@ -28,19 +28,19 @@
 
   --udex-info-badge-color-information-border-color: var(--sapMessage_InformationBorderColor, var(--udexColorBlue7, #0070f2));
   --udex-info-badge-color-information-text-color: var(--sapInformationColor, var(--udexColorBlue9, #0040b0));
-  --udex-info-badge-color-information-background: var(--sapInformationBackground, var(--udexCoreSemanticInfo1, #ebf8ff));
+  --udex-info-badge-color-information-background: var(--sapInformationBackground, var(--udexColorBlue1, #ebf8ff));
 
-  --udex-info-badge-color-positive-border-color: var(--sapMessage_SuccessBorderColor, var(--udexCoreSemanticSuccess7, #188918));
+  --udex-info-badge-color-positive-border-color: var(--sapMessage_SuccessBorderColor, var(--udexColorGreen7, #188918));
   --udex-info-badge-color-positive-text-color: var(--sapSuccessColor, #1e592f);
-  --udex-info-badge-color-positive-background: var(--sapSuccessBackground, var(--udexCoreSemanticSuccess1, #f5fae5));
+  --udex-info-badge-color-positive-background: var(--sapSuccessBackground, var(--udexColorGreen1, #f5fae5));
 
-  --udex-info-badge-color-warning-border-color: var(--sapWarningBorderColor, var(--udexCoreSemanticWarning7, #c35500));
+  --udex-info-badge-color-warning-border-color: var(--sapWarningBorderColor, var(--udexColorMango7, #c35500));
   --udex-info-badge-color-warning-text-color: var(--sapWarningColor, #8d2a00);
-  --udex-info-badge-color-warning-background: var(--sapWarningBackground, var(--udexCoreSemanticWarning1, #fff8d6));
+  --udex-info-badge-color-warning-background: var(--sapWarningBackground, var(--udexColorMango1, #fff8d6));
 
-  --udex-info-badge-color-negative-border-color: var(--sapErrorBorderColor, var(--udexCoreSemanticError7, #d20a0a));
+  --udex-info-badge-color-negative-border-color: var(--sapErrorBorderColor, var(--udexColorRed7, #d20a0a));
   --udex-info-badge-color-negative-text-color: var(--sapErrorColor, #840606);
-  --udex-info-badge-color-negative-background: var(--sapErrorBackground,var(--udexCoreSemanticError1, #ffeaf4));
+  --udex-info-badge-color-negative-background: var(--sapErrorBackground,var(--udexColorRed1, #ffeaf4));
 
   --udex-number-badge-color-blue-text-color: var(--udexColorNeutralWhite,#ffffff);
   --udex-number-badge-color-blue-background: var(--udexColorBlue8, #0057D2);

package/src/themes/BusyIndicator.css

@@ -0,0 +1,24 @@
+:host([surface-container]) {
+  --udex-busy-indicator-backdrop-background: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 60%);
+  --udex-busy-indicator-container-background: var(--sapBaseColor, #fff);
+  --udex-busy-indicator-container-border-radius: var(--udexRadiusXL, 16px);
+  --udex-busy-indicator-container-padding-vertical: var(--udexSpacer24, 24px);
+  --udex-busy-indicator-container-padding-horizontal: var(--udexSpacer48, 48px);
+}
+
+/* Semi-transparent backdrop fills the slotted content area */
+:host([surface-container]) .ui5-busy-indicator-busy-area {
+  background: transparent;
+}
+
+:host([surface-container]) .ui5-busy-indicator-busy-area.ui5-busy-indicator-busy-area-over-content {
+  background: var(--udex-busy-indicator-backdrop-background);
+}
+
+/* White rounded card around the dots */
+:host([surface-container]) .ui5-busy-indicator-circles-wrapper {
+  background: var(--udex-busy-indicator-container-background);
+  border-radius: var(--udex-busy-indicator-container-border-radius);
+  padding: var(--udex-busy-indicator-container-padding-vertical) var(--udex-busy-indicator-container-padding-horizontal);
+  box-shadow: var(--sapContent_Shadow3);
+}

package/src/themes/Button.css

@@ -25,18 +25,18 @@
   /* Default */
   --udex-button-color-primary-standard-default-background: var(--sapButton_Emphasized_Background, var(--udexColorBlue8));
   --udex-button-color-primary-standard-default-border-color: var(--sapButton_Emphasized_BorderColor, var(--udexColorBlue8));
-  --udex-button-color-primary-standard-default-text-and-icon: var(--sapButton_Emphasized_TextColor, var(--udexCoreTextLight));
+  --udex-button-color-primary-standard-default-text-and-icon: var(--sapButton_Emphasized_TextColor, var(--udexColorNeutralWhite));
   /* Hover */
   --udex-button-color-primary-standard-hover-background: var(--sapButton_Emphasized_Hover_Background, var(--udexColorBlue9));
   --udex-button-color-primary-standard-hover-border-color: var(--sapButton_Emphasized_Hover_BorderColor, var(--udexColorBlue9));
-  --udex-button-color-primary-standard-hover-text-and-icon: var(--sapButton_Emphasized_Hover_TextColor, var(--udexCoreTextLight));
+  --udex-button-color-primary-standard-hover-text-and-icon: var(--sapButton_Emphasized_Hover_TextColor, var(--udexColorNeutralWhite));
   /* Active */
   --udex-button-color-primary-standard-active-background: var(--sapButton_Emphasized_Active_Background, var(--udexColorNeutralWhite));
   --udex-button-color-primary-standard-active-border: var(--sapButton_Emphasized_Active_BorderColor, var(--udexColorBlue9));
   --udex-button-color-primary-standard-active-text-and-icon: var(--sapButton_Emphasized_Active_TextColor, var(--udexColorBlue9));
   /* Disabled */
   --udex-button-color-primary-standard-disabled-background: var(--sapButton_Emphasized_Background, var(--udexColorBlue8));
-  --udex-button-color-primary-standard-disabled-text-and-icon: var(--sapButton_Emphasized_TextColor, var(--udexCoreTextLight));
+  --udex-button-color-primary-standard-disabled-text-and-icon: var(--sapButton_Emphasized_TextColor, var(--udexColorNeutralWhite));
   /* Toggled default */
   --udex-button-color-primary-toggled-default-background: var(--sapButton_Selected_Background, var(--udexColorNeutralWhite));
   --udex-button-color-primary-toggled-default-border: var(--sapButton_Selected_BorderColor, var(--udexColorBlue9));
@@ -137,97 +137,97 @@
   /* Positive design */
 
   /* Default */
-  --udex-button-color-positive-standard-default-background: var(--sapButton_Accept_Background, var(--udexCoreSemanticSuccess2));
-  --udex-button-color-positive-standard-default-border: var(--sapButton_Accept_BorderColor, var(--udexCoreSemanticSuccess7));
-  --udex-button-color-positive-standard-default-text-and-icon: var(--sapButton_Accept_TextColor, var(--udexCoreSemanticSuccess8));
+  --udex-button-color-positive-standard-default-background: var(--sapButton_Accept_Background, var(--udexColorGreen2));
+  --udex-button-color-positive-standard-default-border: var(--sapButton_Accept_BorderColor, var(--udexColorGreen7));
+  --udex-button-color-positive-standard-default-text-and-icon: var(--sapButton_Accept_TextColor, var(--udexColorGreen8));
   /* Hover */
-  --udex-button-color-positive-standard-hover-background: var(--sapButton_Accept_Hover_Background, var(--udexCoreSemanticSuccess3));
-  --udex-button-color-positive-standard-hover-border: var(--sapButton_Accept_Hover_BorderColor, var(--udexCoreSemanticSuccess10));
-  --udex-button-color-positive-standard-hover-text-and-icon: var(--sapButton_Accept_Hover_TextColor, var(--udexCoreSemanticSuccess10));
+  --udex-button-color-positive-standard-hover-background: var(--sapButton_Accept_Hover_Background, var(--udexColorGreen3));
+  --udex-button-color-positive-standard-hover-border: var(--sapButton_Accept_Hover_BorderColor, var(--udexColorGreen10));
+  --udex-button-color-positive-standard-hover-text-and-icon: var(--sapButton_Accept_Hover_TextColor, var(--udexColorGreen10));
   /* Active */
   --udex-button-color-positive-standard-active-background: var(--sapButton_Accept_Active_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-positive-standard-active-border: var(--sapButton_Accept_Active_BorderColor, var(--udexCoreSemanticSuccess10));
-  --udex-button-color-positive-standard-active-text-and-icon: var(--sapButton_Accept_Active_TextColor, var(--udexCoreSemanticSuccess10));
+  --udex-button-color-positive-standard-active-border: var(--sapButton_Accept_Active_BorderColor, var(--udexColorGreen10));
+  --udex-button-color-positive-standard-active-text-and-icon: var(--sapButton_Accept_Active_TextColor, var(--udexColorGreen10));
   /* Disabled */
-  --udex-button-color-positive-standard-disabled-background: var(--sapButton_Accept_Background, var(--udexCoreSemanticSuccess2));
-  --udex-button-color-positive-standard-disabled-border: var(--sapButton_Accept_BorderColor, var(--udexCoreSemanticSuccess7));
-  --udex-button-color-positive-standard-disabled-text-and-icon: var(--sapButton_Accept_TextColor, var(--udexCoreSemanticSuccess8));
+  --udex-button-color-positive-standard-disabled-background: var(--sapButton_Accept_Background, var(--udexColorGreen2));
+  --udex-button-color-positive-standard-disabled-border: var(--sapButton_Accept_BorderColor, var(--udexColorGreen7));
+  --udex-button-color-positive-standard-disabled-text-and-icon: var(--sapButton_Accept_TextColor, var(--udexColorGreen8));
   /* Toggled default */
   --udex-button-color-positive-toggled-default-background: var(--sapButton_Accept_Selected_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-positive-toggled-default-border: var(--sapButton_Accept_Selected_BorderColor, var(--udexCoreSemanticSuccess10));
-  --udex-button-color-positive-toggled-default-text-and-icon: var(--sapButton_Accept_Selected_TextColor, var(--udexCoreSemanticSuccess10));
+  --udex-button-color-positive-toggled-default-border: var(--sapButton_Accept_Selected_BorderColor, var(--udexColorGreen10));
+  --udex-button-color-positive-toggled-default-text-and-icon: var(--sapButton_Accept_Selected_TextColor, var(--udexColorGreen10));
   /* Toggled hover */
-  --udex-button-color-positive-toggled-hover-background: var(--sapButton_Accept_Selected_Hover_Background, var(--udexCoreSemanticSuccess2));
-  --udex-button-color-positive-toggled-hover-border: var(--sapButton_Accept_Selected_Hover_BorderColor, var(--udexCoreSemanticSuccess8));
-  --udex-button-color-positive-toggled-hover-text-and-icon: var(--sapButton_Accept_TextColor, var(--udexCoreSemanticSuccess8));
+  --udex-button-color-positive-toggled-hover-background: var(--sapButton_Accept_Selected_Hover_Background, var(--udexColorGreen2));
+  --udex-button-color-positive-toggled-hover-border: var(--sapButton_Accept_Selected_Hover_BorderColor, var(--udexColorGreen8));
+  --udex-button-color-positive-toggled-hover-text-and-icon: var(--sapButton_Accept_TextColor, var(--udexColorGreen8));
   /* Toggled disabled */
   --udex-button-color-positive-toggled-disabled-background: var(--sapButton_Accept_Selected_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-positive-toggled-disabled-border: var(--sapButton_Accept_Selected_BorderColor, var(--udexCoreSemanticSuccess10));
-  --udex-button-color-positive-toggled-disabled-text-and-icon: var(--sapButton_Accept_Selected_TextColor, var(--udexCoreSemanticSuccess10));
+  --udex-button-color-positive-toggled-disabled-border: var(--sapButton_Accept_Selected_BorderColor, var(--udexColorGreen10));
+  --udex-button-color-positive-toggled-disabled-text-and-icon: var(--sapButton_Accept_Selected_TextColor, var(--udexColorGreen10));
 
 
   /* Negative design */
 
   /* Default */
-  --udex-button-color-negative-standard-default-background: var(--sapButton_Reject_Background, var(--udexCoreSemanticError2));
-  --udex-button-color-negative-standard-default-border: var(--sapButton_Reject_BorderColor, var(--udexCoreSemanticError7));
-  --udex-button-color-negative-standard-default-text-and-icon: var(--sapButton_Reject_TextColor, var(--udexCoreSemanticError8));
+  --udex-button-color-negative-standard-default-background: var(--sapButton_Reject_Background, var(--udexColorRed2));
+  --udex-button-color-negative-standard-default-border: var(--sapButton_Reject_BorderColor, var(--udexColorRed7));
+  --udex-button-color-negative-standard-default-text-and-icon: var(--sapButton_Reject_TextColor, var(--udexColorRed8));
   /* Hover */
-  --udex-button-color-negative-standard-hover-background: var(--sapButton_Reject_Hover_Background, var(--udexCoreSemanticError3));
-  --udex-button-color-negative-standard-hover-border: var(--sapButton_Reject_Hover_BorderColor, var(--udexCoreSemanticError10));
-  --udex-button-color-negative-standard-hover-text-and-icon: var(--sapButton_Reject_Hover_TextColor, var(--udexCoreSemanticError10));
+  --udex-button-color-negative-standard-hover-background: var(--sapButton_Reject_Hover_Background, var(--udexColorRed3));
+  --udex-button-color-negative-standard-hover-border: var(--sapButton_Reject_Hover_BorderColor, var(--udexColorRed10));
+  --udex-button-color-negative-standard-hover-text-and-icon: var(--sapButton_Reject_Hover_TextColor, var(--udexColorRed10));
   /* Active */
   --udex-button-color-negative-standard-active-background: var(--sapButton_Reject_Active_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-negative-standard-active-border: var(--sapButton_Reject_Active_BorderColor, var(--udexCoreSemanticError10));
-  --udex-button-color-negative-standard-active-text-and-icon: var(--sapButton_Reject_Active_TextColor, var(--udexCoreSemanticError10));
+  --udex-button-color-negative-standard-active-border: var(--sapButton_Reject_Active_BorderColor, var(--udexColorRed10));
+  --udex-button-color-negative-standard-active-text-and-icon: var(--sapButton_Reject_Active_TextColor, var(--udexColorRed10));
   /* Disabled */
-  --udex-button-color-negative-standard-disabled-background: var(--sapButton_Reject_Background, var(--udexCoreSemanticError2));
-  --udex-button-color-negative-standard-disabled-border: var(--sapButton_Reject_BorderColor, var(--udexCoreSemanticError7));
-  --udex-button-color-negative-standard-disabled-text-and-icon: var(--sapButton_Reject_TextColor, var(--udexCoreSemanticError8));
+  --udex-button-color-negative-standard-disabled-background: var(--sapButton_Reject_Background, var(--udexColorRed2));
+  --udex-button-color-negative-standard-disabled-border: var(--sapButton_Reject_BorderColor, var(--udexColorRed7));
+  --udex-button-color-negative-standard-disabled-text-and-icon: var(--sapButton_Reject_TextColor, var(--udexColorRed8));
   /* Toggled default */
   --udex-button-color-negative-toggled-default-background: var(--sapButton_Reject_Selected_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-negative-toggled-default-border: var(--sapButton_Reject_Selected_BorderColor, var(--udexCoreSemanticError10));
-  --udex-button-color-negative-toggled-default-text-and-icon: var(--sapButton_Reject_Selected_TextColor, var(--udexCoreSemanticError10));
+  --udex-button-color-negative-toggled-default-border: var(--sapButton_Reject_Selected_BorderColor, var(--udexColorRed10));
+  --udex-button-color-negative-toggled-default-text-and-icon: var(--sapButton_Reject_Selected_TextColor, var(--udexColorRed10));
   /* Toggled hover */
-  --udex-button-color-negative-toggled-hover-background: var(--sapButton_Reject_Selected_Hover_Background, var(--udexCoreSemanticError2));
-  --udex-button-color-negative-toggled-hover-border: var(--sapButton_Reject_Selected_Hover_BorderColor, var(--udexCoreSemanticError8));
-  --udex-button-color-negative-toggled-hover-text-and-icon: var(--udexCoreSemanticError8, #AA0808);
+  --udex-button-color-negative-toggled-hover-background: var(--sapButton_Reject_Selected_Hover_Background, var(--udexColorRed2));
+  --udex-button-color-negative-toggled-hover-border: var(--sapButton_Reject_Selected_Hover_BorderColor, var(--udexColorRed8));
+  --udex-button-color-negative-toggled-hover-text-and-icon: var(--udexColorRed8, #AA0808);
   /* Toggled disabled */
   --udex-button-color-negative-toggled-disabled-background: var(--sapButton_Reject_Selected_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-negative-toggled-disabled-border: var(--sapButton_Reject_Selected_BorderColor, var(--udexCoreSemanticError10));
-  --udex-button-color-negative-toggled-disabled-text-and-icon: var(--sapButton_Reject_Selected_TextColor, var(--udexCoreSemanticError10));
+  --udex-button-color-negative-toggled-disabled-border: var(--sapButton_Reject_Selected_BorderColor, var(--udexColorRed10));
+  --udex-button-color-negative-toggled-disabled-text-and-icon: var(--sapButton_Reject_Selected_TextColor, var(--udexColorRed10));
 
 
   /* Warning design */
 
   /* Default */
-  --udex-button-color-warning-standard-default-background: var(--sapButton_Attention_Background, var(--udexCoreSemanticWarning2));
-  --udex-button-color-warning-standard-default-border: var(--sapButton_Attention_BorderColor, var(--udexCoreSemanticWarning7));
-  --udex-button-color-warning-standard-default-text-and-icon: var(--sapButton_Attention_TextColor, var(--udexCoreSemanticWarning8));
+  --udex-button-color-warning-standard-default-background: var(--sapButton_Attention_Background, var(--udexColorMango2));
+  --udex-button-color-warning-standard-default-border: var(--sapButton_Attention_BorderColor, var(--udexColorMango7));
+  --udex-button-color-warning-standard-default-text-and-icon: var(--sapButton_Attention_TextColor, var(--udexColorMango8));
   /* Hover */
-  --udex-button-color-warning-standard-hover-background: var(--sapButton_Attention_Hover_Background, var(--udexCoreSemanticWarning3));
-  --udex-button-color-warning-standard-hover-border: var(--sapButton_Attention_Hover_BorderColor, var(--udexCoreSemanticWarning10));
-  --udex-button-color-warning-standard-hover-text-and-icon: var(--sapButton_Attention_Hover_TextColor, var(--udexCoreSemanticWarning10));
+  --udex-button-color-warning-standard-hover-background: var(--sapButton_Attention_Hover_Background, var(--udexColorMango3));
+  --udex-button-color-warning-standard-hover-border: var(--sapButton_Attention_Hover_BorderColor, var(--udexColorMango10));
+  --udex-button-color-warning-standard-hover-text-and-icon: var(--sapButton_Attention_Hover_TextColor, var(--udexColorMango10));
   /* Active */
   --udex-button-color-warning-standard-active-background: var(--sapButton_Attention_Active_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-warning-standard-active-border: var(--sapButton_Attention_Active_BorderColor, var(--udexCoreSemanticWarning10));
-  --udex-button-color-warning-standard-active-text-and-icon: var(--sapButton_Attention_Active_TextColor, var(--udexCoreSemanticWarning10));
+  --udex-button-color-warning-standard-active-border: var(--sapButton_Attention_Active_BorderColor, var(--udexColorMango10));
+  --udex-button-color-warning-standard-active-text-and-icon: var(--sapButton_Attention_Active_TextColor, var(--udexColorMango10));
   /* Disabled */
-  --udex-button-color-warning-standard-disabled-background: var(--sapButton_Attention_Background, var(--udexCoreSemanticWarning2));
-  --udex-button-color-warning-standard-disabled-border: var(--sapButton_Attention_BorderColor, var(--udexCoreSemanticWarning7));
-  --udex-button-color-warning-standard-disabled-text-and-icon: var(--sapButton_Attention_TextColor, var(--udexCoreSemanticWarning8));
+  --udex-button-color-warning-standard-disabled-background: var(--sapButton_Attention_Background, var(--udexColorMango2));
+  --udex-button-color-warning-standard-disabled-border: var(--sapButton_Attention_BorderColor, var(--udexColorMango7));
+  --udex-button-color-warning-standard-disabled-text-and-icon: var(--sapButton_Attention_TextColor, var(--udexColorMango8));
   /* Toggled default */
   --udex-button-color-warning-toggled-default-background: var(--sapButton_Attention_Selected_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-warning-toggled-default-border: var(--sapButton_Attention_Selected_BorderColor, var(--udexCoreSemanticWarning10));
-  --udex-button-color-warning-toggled-default-text-and-icon: var(--sapButton_Attention_Selected_TextColor, var(--udexCoreSemanticWarning10));
+  --udex-button-color-warning-toggled-default-border: var(--sapButton_Attention_Selected_BorderColor, var(--udexColorMango10));
+  --udex-button-color-warning-toggled-default-text-and-icon: var(--sapButton_Attention_Selected_TextColor, var(--udexColorMango10));
   /* Toggled hover */
-  --udex-button-color-warning-toggled-hover-background: var(--sapButton_Attention_Selected_Hover_Background, var(--udexCoreSemanticWarning2));
-  --udex-button-color-warning-toggled-hover-border: var(--sapButton_Attention_Selected_Hover_BorderColor, var(--udexCoreSemanticWarning8));
-  --udex-button-color-warning-toggled-hover-text-and-icon: var(--sapButton_Attention_Selected_Hover_BorderColor, var(--udexCoreSemanticWarning8));
+  --udex-button-color-warning-toggled-hover-background: var(--sapButton_Attention_Selected_Hover_Background, var(--udexColorMango2));
+  --udex-button-color-warning-toggled-hover-border: var(--sapButton_Attention_Selected_Hover_BorderColor, var(--udexColorMango8));
+  --udex-button-color-warning-toggled-hover-text-and-icon: var(--sapButton_Attention_Selected_Hover_BorderColor, var(--udexColorMango8));
   /* Toggled disabled */
   --udex-button-color-warning-toggled-disabled-background: var(--sapButton_Attention_Selected_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-warning-toggled-disabled-border: var(--sapButton_Attention_Selected_BorderColor, var(--udexCoreSemanticWarning10));
-  --udex-button-color-warning-toggled-disabled-text-and-icon: var(--sapButton_Attention_Selected_TextColor, var(--udexCoreSemanticWarning10));
+  --udex-button-color-warning-toggled-disabled-border: var(--sapButton_Attention_Selected_BorderColor, var(--udexColorMango10));
+  --udex-button-color-warning-toggled-disabled-text-and-icon: var(--sapButton_Attention_Selected_TextColor, var(--udexColorMango10));
 }
 
 :host([desktop][active]) .ui5-button-root:focus-within:before {

package/src/themes/Divider.css

@@ -1,5 +1,5 @@
 :host {
-  --udex-divider-color: var(--udexCoreDividerLight, #D5DADD);
+  --udex-divider-color: var(--udexColorGrey3, #D5DADD);
   --udex-divider-padding: var(--udexSpacer2) 0;
 }
 

package/src/themes/Dropdown.css

@@ -1,6 +1,6 @@
 :host {
   --udex-dropdown-box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,0.3));
-  --udex-dropdown-border-color-default: var(--sapField_BorderColor, var(--udexCoreBorderDefault));
+  --udex-dropdown-border-color-default: var(--sapField_BorderColor, var(--udexColorGrey6));
   --udex-dropdown-border-radius: var(--udexRadiusM, 8px);
   --udex-dropdown-border-width: var(--sapElement_BorderWidth, 1px);
   --udex-dropdown-horizontal-distance: 0;

package/src/themes/FilterMenu.css

@@ -26,7 +26,7 @@
   --udex-filter-menu-popover-max-width: 640px;
 
   --udex-filter-menu-popover-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,0.3));
-  --udex-filter-menu-popover-border-color: var(--sapField_BorderColor, var(--udexCoreBorderDefault));
+  --udex-filter-menu-popover-border-color: var(--sapField_BorderColor, var(--udexColorGrey6));
   --udex-filter-menu-popover-border-width: var(--sapElement_BorderWidth, 1px);
   --udex-filter-menu-popover-border-radius: var(--udexRadiusM, 8px);
 
@@ -171,7 +171,7 @@
 
 [ui5-popover]::part(footer) {
   justify-content: flex-start;
-  border-color: var(--sapField_BorderColor, var(--udexCoreBorderDefault));
+  border-color: var(--sapField_BorderColor, var(--udexColorGrey6));
   box-shadow: var(--sapContent_Shadow1, 0 2px 8px 0 rgba(34,54,73,0.3));
 }
 

package/src/themes/Footer.css

@@ -1,7 +1,7 @@
 :host {
   --udex-footer-container-xl-max-width: 1432px;
   --udex-footer-container-l-max-width: 1456px;
-  --udex-footer-background-color: var(--udexCoreSurfaceHigher, #EAECEE);
+  --udex-footer-background-color: var(--udexColorGrey2, #EAECEE);
   --udex-footer-icon-color: var(--udexColorGrey9, #223548);
   --udex-footer-text-color: var(--sapShell_NeutralColor, #475E75);
   --udex-footer-expandable-link-text-color: var(--sapTitleColor, #000);

package/src/themes/HeroBanner.css

@@ -78,6 +78,8 @@
 #udex-hero-banner__additionalContent {
   position: relative;
   display: flex;
+  flex-direction: column;
+  justify-content: center;
   max-height: var(--udexHeroBannerSlotMaxHeight);
   flex-basis: 100%;
   flex-grow: 1;

package/src/themes/ImageGridTableItem.css

@@ -7,7 +7,7 @@
   --udex-image-grid-table-item-hover-scale: 1.1;
   --udex-image-grid-table-item-max-width-image-mobile: 160px;
   --udex-image-grid-table-item-body-color: var(--udexColorGrey7, #223548);
-  --udex-image-grid-table-item-headline-color: var(--udexCoreHeadingDark, #000);
+  --udex-image-grid-table-item-headline-color: var(--udexColorNeutralBlack, #000);
 }
 
 .udex-image-grid-table-item {

package/src/themes/InputGroup.css

@@ -20,5 +20,5 @@
 }
 
 udex-status-message {
-  --udex-status-message-supporting-text-paddings: var(--udexSpacer20) 0 0;
+  --udex-status-message-supporting-text-paddings: var(--udexSpacer12) 0 0;
 }

package/src/themes/MastheadShell.css

@@ -19,7 +19,7 @@
   --udex-column-width-l: calc((100% - 2 * var(--udex-grid-margin-l) - 11 * var(--udex-grid-gutter)) / 12);
   --udex-column-width-xl: calc((100% - 2 * var(--udex-grid-margin-xl) - 11 * var(--udex-grid-gutter)) / 12);
   --udex-masthead-shell-search-container-width-xl: calc(8 * var(--udex-column-width-xl) + 7 * var(--udex-grid-gutter));
-  --udex-masthead-shell-close-button-divider-color: var(--udexCoreDividerLight, #D5DADD);
+  --udex-masthead-shell-close-button-divider-color: var(--udexColorGrey3, #D5DADD);
   --udex-masthead-shell-z-index: 10;
   --udex-masthead-shell-container-xl-max-width: 1432px;
   --udex-masthead-shell-container-l-max-width: 1456px;
@@ -90,7 +90,7 @@
   width: var(--udex-masthead-shell-co-brand-width);
   margin-inline-end: var(--udexSpacer24);
   padding-inline-start: var(--udexSpacer16);
-  border-inline-start: 1px solid var(--udexCoreDividerLight, #D5DADD);
+  border-inline-start: 1px solid var(--udexColorGrey3, #D5DADD);
 }
 
 .udex-masthead-shell__co-brand,

package/src/themes/MediaPlayer.css

@@ -1465,52 +1465,23 @@ video::-webkit-media-text-track-display {
 }
 
 .vjs-loading-spinner {
-  background-clip: padding-box;
-  border: .6em solid #2b333fb3;
-  border-radius: 50%;
   box-sizing: border-box;
   display: none;
-  height: 5em;
-  left: 50%;
-  opacity: .85;
   position: absolute;
-  text-align: left;
-  top: 50%;
-  transform: translate(-50%,-50%);
+  inset: 0;
   visibility: hidden;
-  width: 5em
+  background: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 60%);
+  align-items: center;
+  justify-content: center;
 }
 
 .vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner {
-  align-items: center;
   animation: vjs-spinner-show 0s linear .3s forwards;
   display: flex;
-  justify-content: center
 }
 
 .vjs-loading-spinner:after,.vjs-loading-spinner:before {
-  border: inherit;
-  border-color: #fff #0000 #0000;
-  border-radius: inherit;
-  box-sizing: inherit;
-  content: "";
-  height: inherit;
-  opacity: 1;
-  position: absolute;
-  width: inherit
-}
-
-.vjs-seeking .vjs-loading-spinner:after,.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:before {
-  animation: vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite
-}
-
-.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:before {
-  border-top-color: #fff
-}
-
-.vjs-seeking .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:after {
-  animation-delay: .44s;
-  border-top-color: #fff
+  content: none;
 }
 
 .vjs-chapters-button .vjs-menu ul {

package/src/themes/PhoneNumberField.css

@@ -12,16 +12,16 @@
   --udex-phone-number-field-color-standard-active-icon: var(--sapSelectedColor, #0040b0);
 
   --udex-phone-number-field-color-error-default-background: var(--sapField_InvalidBackground, #fff);
-  --udex-phone-number-field-color-error-default-border: var(--udexCoreSemanticError6, #ee3939);
-  --udex-phone-number-field-color-error-default-control-button-border: var(--udexCoreSemanticError4, #ff8cb2);
+  --udex-phone-number-field-color-error-default-border: var(--udexColorRed6, #ee3939);
+  --udex-phone-number-field-color-error-default-control-button-border: var(--udexColorRed4, #ff8cb2);
 
   --udex-phone-number-field-color-error-hover-border: var(--sapField_InvalidColor, #d20a0a);
-  --udex-phone-number-field-color-error-active-border: var(--udexCoreSemanticError9, #840606);
-  --udex-phone-number-field-color-error-active-icon: var(--udexCoreSemanticError9, #840606);
+  --udex-phone-number-field-color-error-active-border: var(--udexColorRed9, #840606);
+  --udex-phone-number-field-color-error-active-icon: var(--udexColorRed9, #840606);
 
   --udex-phone-number-field-color-success-default-background: var(--sapField_SuccessBackground, #fff);
-  --udex-phone-number-field-color-success-default-border: var(--udexCoreSemanticSuccess6, #36a41d);
-  --udex-phone-number-field-color-success-default-control-button-border: var(--udexCoreSemanticSuccess6, #36a41d);
+  --udex-phone-number-field-color-success-default-border: var(--udexColorGreen6, #36a41d);
+  --udex-phone-number-field-color-success-default-control-button-border: var(--udexColorGreen6, #36a41d);
 
   --udex-phone-number-field-color-success-hover-border: var(--sapField_SuccessColor, #188918);
   --udex-phone-number-field-color-success-active-border: var(--sapSuccessColor, #1e592f);

package/src/themes/ProgressBar.css

@@ -8,6 +8,10 @@
   --udex-progress-bar-icon-right-position: -24px;
 }
 
+:host([value-state="Information"]) .ui5-progress-indicator-bar {
+  background-color:  var(--udexColorBlue7);
+}
+
 .ui5-progress-indicator-icon {
   width: var(--udex-progress-bar-icon-size);
   height: var(--udex-progress-bar-icon-size);

package/src/themes/PromoTile.css

@@ -14,10 +14,10 @@
   --udex-promo-tile-icon-height: 100%;
   --udex-promo-tile-icon-fill-color: inherit;
   --udex-promo-tile-eyebrow-color: var(--udexColorBlue8, #0057D2);
-  --udex-promo-tile-header-color-light: var(--udexCoreHeadingLight, #FFFFFF);
-  --udex-promo-tile-header-color-dark: var(--udexCoreHeadingDark, #000000);
-  --udex-promo-tile-text-color-light: var(--udexCoreTextLight, #FFFFFF);
-  --udex-promo-tile-text-color-dark: var(--udexCoreTextDark, #223548);
+  --udex-promo-tile-header-color-light: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-promo-tile-header-color-dark: var(--udexColorNeutralBlack, #000000);
+  --udex-promo-tile-text-color-light: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-promo-tile-text-color-dark: var(--udexColorGrey9, #223548);
 }
 
 :host ::slotted([slot="pictogram"]) {
@@ -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/Review.css

@@ -1,6 +1,6 @@
 :host {
-  --udex-review-color: var(--udexCoreTextDark, #223548);
-  --udex-review-rating-color: var(--udexCoreHeadingDark, #000000);
+  --udex-review-color: var(--udexColorGrey9, #223548);
+  --udex-review-rating-color: var(--udexColorNeutralBlack, #000000);
   --udex-review-container-inline-padding: 0;
   --udex-review-container-vertical-padding: var(--udexSpacer32);
   --udex-review-container-vertical-padding-xs: var(--udexSpacer24);