@sapudex/web-components 2.48.0 → 2.49.0

package/src/themes/AccordionItem.css

@@ -1,9 +1,9 @@
 :host {
   --udex-accordion-item-icon-color: var(--udexColorBlue8, #0057D2);
-  --udex-accordion-item-headline-color: var(--sapTitleColor, var(--udexCoreHeadingDark));
+  --udex-accordion-item-headline-color: var(--sapTitleColor, var(--udexColorNeutralBlack));
   --udex-accordion-item-headline-hover-color: var(--udexColorBlue8, #0057D2);
-  --udex-accordion-item-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px)); 
-  --udex-accordion-item-headline-large-font-size: var(--sapFontHeader4Size, var(--udexTypographyHeadingMediumXXSFontSize, 20px)); 
+  --udex-accordion-item-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));
+  --udex-accordion-item-headline-large-font-size: var(--sapFontHeader4Size, var(--udexTypographyHeadingMediumXXSFontSize, 20px));
   --udex-accordion-item-title-font-weight: var(--udexTypographyFontWeightMedium, 500);
   --udex-accordion-item-border-color: var(--sapShell_BorderColor, var(--udexColorGrey3));
   --udex-accordion-item-border-width: 1px;
@@ -58,7 +58,7 @@
   color: var(--udex-accordion-item-headline-hover-color);
 }
 .udex-accordion-item__header:hover ~ [udex-divider] {
-  --udex-divider-color: var(--udex-accordion-item-headline-hover-color); 
+  --udex-divider-color: var(--udex-accordion-item-headline-hover-color);
 }
 
 .udex-accordion-item__header:hover {

package/src/themes/AccordionSpotlight.css

@@ -0,0 +1,264 @@
+:host {
+  --udex-accordion-spotlight-nav-width: 25%;
+  --udex-accordion-spotlight-nav-gap: var(--udexSpacer16, 16px);
+  --udex-accordion-spotlight-nav-gap-mobile: var(--udexSpacer16, 16px);
+  --udex-accordion-spotlight-nav-color: var(--udexColorGrey7, #475E75);
+  --udex-accordion-spotlight-nav-font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  --udex-accordion-spotlight-nav-font-family: var(--sapFontFamily, sans-serif);
+  --udex-accordion-spotlight-gap: var(--udexSpacer48, 48px);
+  --udex-accordion-spotlight-btn-color: var(--udexColorNeutralBlack, #000);
+  --udex-accordion-spotlight-btn-color-hover: var(--udexColorBlue8, #0057D2);
+  --udex-accordion-spotlight-btn-color-active: var(--udexColorBlue8, #0057D2);
+  --udex-accordion-spotlight-btn-font-size: var(--udexTypographyHeadingRegularXXSFontSize, 20px);
+  --udex-accordion-spotlight-btn-font-weight: var(--udexTypographyFontWeightMedium, 500);
+  --udex-accordion-spotlight-btn-font-family: var(--sapFontFamily, sans-serif);
+  --udex-accordion-spotlight-btn-line-height: 1.1;
+  --udex-accordion-spotlight-btn-padding: var(--udexSpacer16, 16px);
+  --udex-accordion-spotlight-indicator-color: var(--udexColorBlue8, #0057D2);
+  --udex-accordion-spotlight-indicator-width: 3px;
+  --udex-accordion-spotlight-border-color: var(--udexColorGrey3, #D5DADD);
+  --udex-accordion-spotlight-content-font-family: var(--sapFontFamily, sans-serif);
+  --udex-accordion-spotlight-content-font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  --udex-accordion-spotlight-content-line-height: var(--udexTypographyBodyLineHeight, 1.5);
+  --udex-accordion-spotlight-transition: color 200ms ease-in;
+  --udex-accordion-spotlight-panel-duration: 500ms;
+  --udex-accordion-spotlight-panel-easing: ease;
+  --udex-accordion-spotlight-media-width: 100%;
+  --udex-accordion-spotlight-border-radius: var(--udexRadiusM, 8px);
+
+  display: block;
+}
+
+.udex-accordion-spotlight {
+  display: flex;
+  gap: var(--udex-accordion-spotlight-gap);
+  width: 100%;
+  overflow: hidden;
+}
+
+.udex-accordion-spotlight__nav {
+  flex: 0 0 var(--udex-accordion-spotlight-nav-width);
+  align-self: var(--udex-accordion-spotlight-nav-alignment, flex-start);
+  font-family: var(--udex-accordion-spotlight-nav-font-family);
+  font-size: var(--udex-accordion-spotlight-nav-font-size);
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+  color: var(--udex-accordion-spotlight-nav-color);
+  line-height: var(--udex-accordion-spotlight-content-line-height);
+}
+
+.udex-accordion-spotlight__nav-holder {
+  gap: var(--udex-accordion-spotlight-nav-gap);
+  border-inline-start: 1px solid var(--udex-accordion-spotlight-border-color);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.udex-accordion-spotlight__play-button {
+  margin-block-end: var(--udexSpacer16, 16px);
+  align-self: flex-start;
+  margin-inline-start: var(--udexSpacer16, 16px);
+}
+
+:host([vertical-alignment="Center"]) {
+  --udex-accordion-spotlight-nav-alignment: center;
+}
+
+:host([placement="End"]) .udex-accordion-spotlight__nav {
+  order: 1;
+}
+
+.udex-accordion-spotlight__nav-item {
+  position: relative;
+  padding: var(--udex-accordion-spotlight-btn-padding);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.udex-accordion-spotlight-item__expand {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  width: 100%;
+  margin-block-start: 0;
+  transition:
+    grid-template-rows var(--udex-accordion-spotlight-panel-duration) var(--udex-accordion-spotlight-panel-easing),
+    opacity var(--udex-accordion-spotlight-panel-duration) var(--udex-accordion-spotlight-panel-easing),
+    margin-block-start var(--udex-accordion-spotlight-panel-duration) var(--udex-accordion-spotlight-panel-easing);
+}
+
+.udex-accordion-spotlight-item__expand--open {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  margin-block-start: var(--udexSpacer16, 16px);
+}
+
+.udex-accordion-spotlight-item__expand-inner {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: var(--udexSpacer16, 16px);
+  padding-inline: 4px;
+  margin-inline: -4px;
+  padding-block-end: 4px;
+  margin-block-end: -4px;
+}
+
+.udex-accordion-spotlight-item__button {
+  background: none;
+  border: 0;
+  padding: 0;
+  border-radius: 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  text-align: start;
+  color: var(--udex-accordion-spotlight-btn-color);
+  font-family: var(--udex-accordion-spotlight-btn-font-family);
+  font-size: var(--udex-accordion-spotlight-btn-font-size);
+  font-weight: var(--udex-accordion-spotlight-btn-font-weight);
+  line-height: var(--udex-accordion-spotlight-btn-line-height);
+}
+
+.udex-accordion-spotlight-item__button:hover {
+  color: var(--udex-accordion-spotlight-btn-color-hover);
+}
+
+.udex-accordion-spotlight-item__button:focus,
+.udex-accordion-spotlight-item__button:focus-visible {
+  outline: none;
+}
+
+:host([desktop]) .udex-accordion-spotlight-item__button:focus,
+.udex-accordion-spotlight-item__button:focus-visible {
+  outline: 2px solid var(--udex-accordion-spotlight-indicator-color);
+  border-radius: var(--udexRadiusXXS, 2px);
+}
+
+.udex-accordion-spotlight-item__button--active {
+  color: var(--udex-accordion-spotlight-btn-color-active);
+}
+
+.udex-accordion-spotlight-item__button--active::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: -1px;
+  inset-block: 0;
+  width: var(--udex-accordion-spotlight-indicator-width);
+  background-color: var(--udex-accordion-spotlight-indicator-color);
+  border-start-end-radius: var(--udexRadiusXXS, 2px);
+  border-end-end-radius: var(--udexRadiusXXS, 2px);
+  z-index: 1;
+}
+
+.udex-accordion-spotlight__content {
+  flex: 1 1 0;
+  font-family: var(--udex-accordion-spotlight-content-font-family);
+  font-size: var(--udex-accordion-spotlight-content-font-size);
+  line-height: var(--udex-accordion-spotlight-content-line-height);
+  padding-inline-start: var(--udexSpacer16, 16px);
+  display: grid;
+}
+
+.udex-accordion-spotlight__content > .udex-accordion-spotlight__panel {
+  grid-area: 1 / 1;
+  display: block;
+  transition: opacity var(--udex-accordion-spotlight-panel-duration) var(--udex-accordion-spotlight-panel-easing);
+}
+
+.udex-accordion-spotlight__panel {
+  opacity: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.udex-accordion-spotlight__panel--open {
+  opacity: 1;
+  height: auto;
+  pointer-events: auto;
+}
+
+.udex-accordion-spotlight__panel-inner {
+  overflow: hidden;
+}
+
+.udex-accordion-spotlight-item__links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udexSpacer4, 4px);
+}
+
+.udex-accordion-spotlight__footer {
+  margin-block-start: var(--udexSpacer20, 20px);
+  margin-inline-start: var(--udexSpacer16, 16px);
+}
+
+.udex-accordion-spotlight__media {
+  flex: 1 1 0;
+  display: flex;
+  align-items: var(--udex-accordion-spotlight-nav-alignment, flex-start);
+  overflow: hidden;
+}
+
+.udex-accordion-spotlight__media ::slotted(img),
+.udex-accordion-spotlight__media ::slotted(video) {
+  display: block;
+  width: var(--udex-accordion-spotlight-media-width);
+  border-radius: var(--udex-accordion-spotlight-border-radius);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .udex-accordion-spotlight__panel,
+  .udex-accordion-spotlight-item__expand,
+  .udex-accordion-spotlight-item__button {
+    transition: none;
+  }
+}
+
+@media (max-width: 979px) {
+  .udex-accordion-spotlight__nav-item:has(~ .udex-accordion-spotlight__nav-item) {
+    margin-bottom: var(--udex-accordion-spotlight-nav-gap-mobile);
+  }
+
+  .udex-accordion-spotlight__nav-holder {
+    gap: 0;
+  }
+
+  .udex-accordion-spotlight__media {
+    width: 100%;
+    flex: 0 0 auto;
+    margin-block-start: var(--udexSpacer16, 16px);
+  }
+
+  .udex-accordion-spotlight {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .udex-accordion-spotlight__nav {
+    flex: 0 0 100%;
+    width: 100%;
+  }
+
+  .udex-accordion-spotlight__panel {
+    height: inherit;
+    display: grid;
+    grid-template-rows: 0fr;
+    transition:
+      grid-template-rows var(--udex-accordion-spotlight-panel-duration) var(--udex-accordion-spotlight-panel-easing),
+      opacity var(--udex-accordion-spotlight-panel-duration) var(--udex-accordion-spotlight-panel-easing);
+  }
+
+  .udex-accordion-spotlight__panel--open {
+    grid-template-rows: 1fr;
+    margin: var(--udexSpacer8, 8px) 0 var(--udexSpacer24, 24px);
+  }
+
+  .udex-accordion-spotlight__panel-inner {
+    padding-inline-start: var(--udexSpacer16, 16px);
+    font-family: var(--udex-accordion-spotlight-content-font-family);
+    font-size: var(--udex-accordion-spotlight-content-font-size);
+    line-height: var(--udex-accordion-spotlight-content-line-height);
+  }
+}

package/src/themes/AccordionSpotlightItem.css

@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}

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/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/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,