@fundamental-styles/theming-preview 0.24.0-rc.2 → 0.24.0-rc.22

package/fundamental-styles.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.2
+ * Fundamental Library Styles v0.24.0-rc.22
  * Copyright (c) 2022 SAP SE or an SAP affiliate company.
  * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)
  */
@@ -5088,7 +5088,7 @@
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  padding: 0 .5rem
+  padding: 0 1rem
 }
 .fd-bar::after,
 .fd-bar::before {
@@ -5132,7 +5132,7 @@
   font-size: inherit
 }
 .fd-bar__middle {
-  padding: 0 .5rem;
+  padding: 0 var(--fdBar_Middle_Area_Padding_X);
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center
@@ -5140,11 +5140,27 @@
 .fd-bar__middle:only-child {
   padding: 0
 }
+.fd-bar__left {
+  padding-left: 0;
+  padding-right: var(--fdBar_Left_Area_Padding_Right)
+}
+.fd-bar__left[dir=rtl],
+[dir=rtl] .fd-bar__left {
+  padding-right: 0;
+  padding-left: var(--fdBar_Left_Area_Padding_Right)
+}
 .fd-bar__right {
+  padding-left: --fdBar_Right_Area_Padding_Left;
+  padding-right: 0;
   -webkit-box-pack: end;
   -ms-flex-pack: end;
   justify-content: flex-end
 }
+.fd-bar__right[dir=rtl],
+[dir=rtl] .fd-bar__right {
+  padding-right: --fdBar_Right_Area_Padding_Left;
+  padding-left: 0
+}
 .fd-bar__element {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
@@ -5180,15 +5196,6 @@
   margin-right: 0;
   margin-left: .5rem
 }
-.fd-bar__element--title {
-  padding-left: .5rem;
-  padding-right: 0
-}
-.fd-bar__element--title[dir=rtl],
-[dir=rtl] .fd-bar__element--title {
-  padding-right: .5rem;
-  padding-left: 0
-}
 .fd-bar__element--full-width {
   width: 100%
 }
@@ -8734,8 +8741,10 @@ fd-carousel:focus {
 }
 .fd-checkbox__label.is-hover::before,
 .fd-checkbox__label:hover::before {
-  background-color: var(--sapField_Hover_Background);
-  border-color: var(--sapField_Hover_BorderColor)
+  background-color: var(--fdCheckbox_Hover_Background);
+  border-color: var(--sapField_Hover_BorderColor);
+  -webkit-box-shadow: var(--fdCheckbox_Hover_Shadow);
+  box-shadow: var(--fdCheckbox_Hover_Shadow)
 }
 .fd-checkbox__label:focus {
   outline: 0
@@ -8861,7 +8870,7 @@ fd-carousel:focus {
 .fd-checkbox.is-alert + .fd-checkbox__label::before,
 .fd-checkbox.is-warning + .fd-checkbox__label::before {
   background-color: var(--sapField_WarningBackground);
-  border: .125rem var(--fdCheckbox_State_Border_Type) var(--sapField_WarningColor);
+  border: var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle) var(--sapField_WarningColor);
   color: var(--sapField_TextColor)
 }
 .fd-checkbox.is-alert + .fd-checkbox__label::after,
@@ -8886,11 +8895,13 @@ fd-carousel:focus {
 .fd-checkbox.is-alert + .fd-checkbox__label:hover::before,
 .fd-checkbox.is-warning + .fd-checkbox__label.is-hover::before,
 .fd-checkbox.is-warning + .fd-checkbox__label:hover::before {
-  background-color: var(--sapField_Hover_Background)
+  background-color: var(--fdCheckbox_State_Hover_Background);
+  -webkit-box-shadow: var(--fdCheckbox_Warning_State_Shadow);
+  box-shadow: var(--fdCheckbox_Warning_State_Shadow)
 }
 .fd-checkbox.is-error + .fd-checkbox__label::before {
   background-color: var(--sapField_InvalidBackground);
-  border: .125rem var(--fdCheckbox_State_Border_Type) var(--sapField_InvalidColor);
+  border: var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle) var(--sapField_InvalidColor);
   color: var(--sapField_InvalidColor)
 }
 .fd-checkbox.is-error + .fd-checkbox__label::after {
@@ -8906,11 +8917,13 @@ fd-carousel:focus {
 }
 .fd-checkbox.is-error + .fd-checkbox__label.is-hover::before,
 .fd-checkbox.is-error + .fd-checkbox__label:hover::before {
-  background-color: var(--sapField_Hover_Background)
+  background-color: var(--fdCheckbox_State_Hover_Background);
+  -webkit-box-shadow: var(--fdCheckbox_Error_State_Shadow);
+  box-shadow: var(--fdCheckbox_Error_State_Shadow)
 }
 .fd-checkbox.is-success + .fd-checkbox__label::before {
   background-color: var(--sapField_SuccessBackground);
-  border: var(--sapField_BorderWidth) solid var(--sapField_SuccessColor);
+  border: var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle) var(--sapField_SuccessColor);
   color: var(--sapField_SuccessColor)
 }
 .fd-checkbox.is-success + .fd-checkbox__label::after {
@@ -8926,11 +8939,13 @@ fd-carousel:focus {
 }
 .fd-checkbox.is-success + .fd-checkbox__label.is-hover::before,
 .fd-checkbox.is-success + .fd-checkbox__label:hover::before {
-  background-color: var(--sapField_Hover_Background)
+  background-color: var(--fdCheckbox_State_Hover_Background);
+  -webkit-box-shadow: var(--fdCheckbox_Success_State_Shadow);
+  box-shadow: var(--fdCheckbox_Success_State_Shadow)
 }
 .fd-checkbox.is-information + .fd-checkbox__label::before {
   background-color: var(--sapField_InformationBackground);
-  border: .125rem var(--fdCheckbox_State_Border_Type) var(--sapField_InformationColor);
+  border: var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle) var(--sapField_InformationColor);
   color: var(--sapField_InformationColor)
 }
 .fd-checkbox.is-information + .fd-checkbox__label::after {
@@ -8946,12 +8961,14 @@ fd-carousel:focus {
 }
 .fd-checkbox.is-information + .fd-checkbox__label.is-hover::before,
 .fd-checkbox.is-information + .fd-checkbox__label:hover::before {
-  background-color: var(--sapField_Hover_Background)
+  background-color: var(--fdCheckbox_State_Hover_Background);
+  -webkit-box-shadow: var(--fdCheckbox_Information_State_Shadow);
+  box-shadow: var(--fdCheckbox_Information_State_Shadow)
 }
 .fd-checkbox.is-readonly + .fd-checkbox__label::before,
 .fd-checkbox[readonly] + .fd-checkbox__label::before {
   background-color: var(--sapField_ReadOnly_Background);
-  border: var(--sapField_BorderWidth) solid var(--sapField_ReadOnly_BorderColor);
+  border: var(--fdCheckbox_Readonly_Border_Width) var(--fdCheckbox_Readonly_Border_Type) var(--sapField_ReadOnly_BorderColor);
   color: var(--sapContent_NonInteractiveIconColor)
 }
 .fd-checkbox.is-readonly + .fd-checkbox__label::after,
@@ -8976,7 +8993,9 @@ fd-carousel:focus {
 .fd-checkbox.is-readonly + .fd-checkbox__label:hover::before,
 .fd-checkbox[readonly] + .fd-checkbox__label.is-hover::before,
 .fd-checkbox[readonly] + .fd-checkbox__label:hover::before {
-  background-color: var(--sapField_Hover_Background)
+  background-color: var(--fdCheckbox_State_Hover_Background);
+  -webkit-box-shadow: none;
+  box-shadow: none
 }
 .fd-checkbox.is-focus,
 .fd-checkbox:focus {
@@ -12801,6 +12820,7 @@ fd-carousel:focus {
 }
 .fd-container.fd-form-layout-grid-container .fd-row .fd-col {
   padding-top: 0;
+  padding-bottom: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
@@ -12808,17 +12828,23 @@ fd-carousel:focus {
 .fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-select__control {
   margin: .25rem 0
 }
+.fd-container.fd-form-layout-grid-container .fd-row .fd-col--compact .fd-select__control {
+  margin: .1875rem 0 .25rem 0
+}
 .fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-form-label {
   margin-right: 0;
-  padding-right: .5rem
+  white-space: initial
 }
 .fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-form-label[dir=rtl],
 [dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-form-label {
   margin-right: 0;
   margin-left: 0
 }
-.fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-form-label[dir=rtl],
-[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-form-label {
+.fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-form-label--required {
+  padding-right: .5rem
+}
+.fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-form-label--required[dir=rtl],
+[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-form-label--required {
   padding-right: 0;
   padding-left: .5rem
 }
@@ -12977,7 +13003,7 @@ fd-carousel:focus {
     padding: 1rem
   }
   .fd-container.fd-form-layout-grid-container .fd-row {
-    margin: 0 -.25rem;
+    margin: 0 -.25rem .625rem;
     min-width: calc(100% + .25rem * 2)
   }
   .fd-container.fd-form-layout-grid-container .fd-row .fd-col {
@@ -13550,8 +13576,8 @@ fd-carousel:focus {
   background-color: var(--sapGroup_TitleBackground);
   padding-left: 1rem;
   padding-right: 1rem;
-  -webkit-box-shadow: 0 var(--fdFormHeader_Border_Width) var(--fdFormHeader_Border_Width) var(--sapGroup_TitleBorderColor);
-  box-shadow: 0 var(--fdFormHeader_Border_Width) var(--fdFormHeader_Border_Width) var(--sapGroup_TitleBorderColor)
+  -webkit-box-shadow: 0 var(--fdFormHeader_Border_Width) 0 var(--sapGroup_TitleBorderColor);
+  box-shadow: 0 var(--fdFormHeader_Border_Width) 0 var(--sapGroup_TitleBorderColor)
 }
 .fd-form-header::after,
 .fd-form-header::before {
@@ -22646,7 +22672,6 @@ fd-carousel:focus {
   align-items: center;
   width: 100%;
   height: 100%;
-  padding: 1rem;
   background: var(--sapBackgroundColor)
 }
 .fd-message-page::after,
@@ -22700,8 +22725,31 @@ fd-carousel:focus {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  padding: 1rem;
   -webkit-transform: translateY(-1rem);
-  transform: translateY(-1rem)
+  transform: translateY(-1rem);
+  background: var(--fdMessage_Page_Container_Background);
+  border-radius: var(--fdMessage_Page_Container_Corner_Radius)
+}
+.fd-message-page__illustration-container {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: 400;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  max-width: 20rem;
+  max-height: 15rem
+}
+.fd-message-page__illustration-container::after,
+.fd-message-page__illustration-container::before {
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+  font-size: inherit
 }
 .fd-message-page__icon-container {
   font-size: var(--sapFontSize);
@@ -22758,7 +22806,8 @@ fd-carousel:focus {
   padding-bottom: 2rem
 }
 .fd-message-page__title {
-  margin: 1rem 0;
+  margin-top: var(--fdMessage_Page_Title_Margin_Top);
+  margin-bottom: var(--fdMessage_Page_Title_Margin_Bottom);
   text-align: center;
   font-size: var(--sapFontHeader2Size);
   color: var(--sapGroup_TitleTextColor)
@@ -22867,8 +22916,9 @@ fd-carousel:focus {
 .fd-message-strip--warning::before {
   position: absolute;
   width: 2.5rem;
-  top: .4375rem;
-  left: 0
+  top: .5rem;
+  left: 0;
+  line-height: 1
 }
 .fd-message-strip--error[dir=rtl],
 .fd-message-strip--information[dir=rtl],
@@ -29250,7 +29300,7 @@ places the element far left of the screen. so it is not visible.
   pointer-events: none
 }
 .fd-popover__wrapper {
-  border-radius: var(--sapElement_BorderCornerRadius);
+  border-radius: var(--fdPopover_Border_Radius);
   overflow: auto
 }
 .fd-popover__body {
@@ -29264,7 +29314,7 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  border-radius: var(--sapElement_BorderCornerRadius);
+  border-radius: var(--fdPopover_Border_Radius);
   border: none;
   position: absolute;
   white-space: nowrap;
@@ -29317,49 +29367,20 @@ places the element far left of the screen. so it is not visible.
   overflow: hidden
 }
 .fd-popover__body > :first-child {
-  border-top-right-radius: var(--sapElement_BorderCornerRadius);
-  border-top-left-radius: var(--sapElement_BorderCornerRadius)
+  border-top-right-radius: var(--fdPopover_Border_Radius);
+  border-top-left-radius: var(--fdPopover_Border_Radius)
 }
 .fd-popover__body > :last-child {
-  border-bottom-right-radius: var(--sapElement_BorderCornerRadius);
-  border-bottom-left-radius: var(--sapElement_BorderCornerRadius)
+  border-bottom-right-radius: var(--fdPopover_Border_Radius);
+  border-bottom-left-radius: var(--fdPopover_Border_Radius)
 }
 .fd-popover__body-header > :first-child {
-  border-top-right-radius: var(--sapElement_BorderCornerRadius);
-  border-top-left-radius: var(--sapElement_BorderCornerRadius)
+  border-top-right-radius: var(--fdPopover_Border_Radius);
+  border-top-left-radius: var(--fdPopover_Border_Radius)
 }
 .fd-popover__body-footer > * {
-  border-bottom-right-radius: var(--sapElement_BorderCornerRadius);
-  border-bottom-left-radius: var(--sapElement_BorderCornerRadius)
-}
-.fd-popover__body--compact.fd-popover__body--left::after,
-.fd-popover__body--compact.fd-popover__body--left::before,
-.fd-popover__body--compact.fd-popover__body::after,
-.fd-popover__body--compact.fd-popover__body::before {
-  left: .5rem
-}
-.fd-popover__body--compact.fd-popover__body--left[dir=rtl]::after,
-.fd-popover__body--compact.fd-popover__body--left[dir=rtl]::before,
-.fd-popover__body--compact.fd-popover__body[dir=rtl]::after,
-.fd-popover__body--compact.fd-popover__body[dir=rtl]::before,
-[dir=rtl] .fd-popover__body--compact.fd-popover__body--left::after,
-[dir=rtl] .fd-popover__body--compact.fd-popover__body--left::before,
-[dir=rtl] .fd-popover__body--compact.fd-popover__body::after,
-[dir=rtl] .fd-popover__body--compact.fd-popover__body::before {
-  left: auto;
-  right: .5rem
-}
-.fd-popover__body--compact.fd-popover__body--right::after,
-.fd-popover__body--compact.fd-popover__body--right::before {
-  left: auto;
-  right: .5rem
-}
-.fd-popover__body--compact.fd-popover__body--right[dir=rtl]::after,
-.fd-popover__body--compact.fd-popover__body--right[dir=rtl]::before,
-[dir=rtl] .fd-popover__body--compact.fd-popover__body--right::after,
-[dir=rtl] .fd-popover__body--compact.fd-popover__body--right::before {
-  left: .5rem;
-  right: auto
+  border-bottom-right-radius: var(--fdPopover_Border_Radius);
+  border-bottom-left-radius: var(--fdPopover_Border_Radius)
 }
 .fd-popover__body,
 .fd-popover__body--left {
@@ -29377,7 +29398,7 @@ places the element far left of the screen. so it is not visible.
 .fd-popover__body--left::before,
 .fd-popover__body::after,
 .fd-popover__body::before {
-  left: .625rem
+  left: var(--fdPopover_Arrow_Offset)
 }
 .fd-popover__body--left[dir=rtl]::after,
 .fd-popover__body--left[dir=rtl]::before,
@@ -29388,7 +29409,7 @@ places the element far left of the screen. so it is not visible.
 [dir=rtl] .fd-popover__body::after,
 [dir=rtl] .fd-popover__body::before {
   left: auto;
-  right: .625rem
+  right: var(--fdPopover_Arrow_Offset)
 }
 .fd-popover__body--right {
   right: var(--sapGroup_BorderWidth);
@@ -29402,13 +29423,13 @@ places the element far left of the screen. so it is not visible.
 .fd-popover__body--right::after,
 .fd-popover__body--right::before {
   left: auto;
-  right: .625rem
+  right: var(--fdPopover_Arrow_Offset)
 }
 .fd-popover__body--right[dir=rtl]::after,
 .fd-popover__body--right[dir=rtl]::before,
 [dir=rtl] .fd-popover__body--right::after,
 [dir=rtl] .fd-popover__body--right::before {
-  left: .625rem;
+  left: var(--fdPopover_Arrow_Offset);
   right: auto
 }
 .fd-popover__body--no-arrow {
@@ -29477,7 +29498,7 @@ places the element far left of the screen. so it is not visible.
   -webkit-box-shadow: var(--sapContent_Shadow2);
   box-shadow: var(--sapContent_Shadow2);
   z-index: 1000;
-  border-radius: var(--sapElement_BorderCornerRadius);
+  border-radius: var(--fdPopover_Border_Radius);
   background: var(--sapGroup_ContentBackground);
   opacity: 1
 }
@@ -29582,7 +29603,7 @@ places the element far left of the screen. so it is not visible.
   border-right-color: var(--sapGroup_ContentBackground)
 }
 .fd-popover__popper .fd-popover__arrow-x--start {
-  left: .625rem
+  left: var(--fdPopover_Arrow_Offset)
 }
 .fd-popover__popper .fd-popover__arrow-x--center {
   left: 50%;
@@ -29590,10 +29611,10 @@ places the element far left of the screen. so it is not visible.
   transform: translateX(-50%)
 }
 .fd-popover__popper .fd-popover__arrow-x--end {
-  right: .625rem
+  right: var(--fdPopover_Arrow_Offset)
 }
 .fd-popover__popper .fd-popover__arrow-y--top {
-  top: .625rem
+  top: var(--fdPopover_Arrow_Offset)
 }
 .fd-popover__popper .fd-popover__arrow-y--center {
   top: 50%;
@@ -29601,19 +29622,7 @@ places the element far left of the screen. so it is not visible.
   transform: translateY(-50%)
 }
 .fd-popover__popper .fd-popover__arrow-y--bottom {
-  bottom: .625rem
-}
-.fd-popover__popper--compact .fd-popover__arrow-x--start {
-  left: .5rem
-}
-.fd-popover__popper--compact .fd-popover__arrow-x--end {
-  right: .5rem
-}
-.fd-popover__popper--compact .fd-popover__arrow-y--top {
-  top: .5rem
-}
-.fd-popover__popper--compact .fd-popover__arrow-y--bottom {
-  bottom: .5rem
+  bottom: var(--fdPopover_Arrow_Offset)
 }
 .fd-popover__inline-help {
   padding: .75rem;
@@ -30268,8 +30277,8 @@ places the element far left of the screen. so it is not visible.
   margin-left: .75rem
 }
 .fd-quick-view > :first-child {
-  border-top-right-radius: var(--sapElement_BorderCornerRadius);
-  border-top-left-radius: var(--sapElement_BorderCornerRadius)
+  border-top-right-radius: var(--fdPopover_Border_Radius);
+  border-top-left-radius: var(--fdPopover_Border_Radius)
 }
 .fd-quick-view__content {
   font-size: var(--sapFontSize);
@@ -30634,10 +30643,10 @@ places the element far left of the screen. so it is not visible.
   border-radius: 50%
 }
 .fd-radio__label::after {
-  height: .625rem;
-  width: .625rem;
-  top: 1.0625rem;
-  left: 1.0625rem
+  height: var(--fdRadio_Inner_Content_Size);
+  width: var(--fdRadio_Inner_Content_Size);
+  top: var(--fdRadio_Inner_Content_Padding);
+  left: var(--fdRadio_Inner_Content_Padding)
 }
 .fd-radio__label.is-focus,
 .fd-radio__label:focus {
@@ -30647,7 +30656,10 @@ places the element far left of the screen. so it is not visible.
 .fd-radio__label.is-hover::before,
 .fd-radio__label:hover::before {
   background-color: var(--sapField_Hover_Background);
-  border-color: var(--sapField_Hover_BorderColor)
+  border-width: var(--sapField_BorderWidth);
+  border-color: var(--sapField_Hover_BorderColor);
+  -webkit-box-shadow: var(--fdRadio_Hover_Box_Shadow);
+  box-shadow: var(--fdRadio_Hover_Box_Shadow)
 }
 .fd-radio__label[dir=rtl]::before,
 [dir=rtl] .fd-radio__label::before {
@@ -30656,7 +30668,7 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-radio__label[dir=rtl]::after,
 [dir=rtl] .fd-radio__label::after {
-  right: 1.0625rem
+  right: var(--fdRadio_Inner_Content_Padding)
 }
 .fd-radio__label.is-empty,
 .fd-radio__label:empty {
@@ -30679,12 +30691,20 @@ places the element far left of the screen. so it is not visible.
 .fd-radio.is-alert + .fd-radio__label::before,
 .fd-radio.is-warning + .fd-radio__label::before {
   background-color: var(--sapField_WarningBackground);
-  border: .125rem var(--fdRadio_State_Border_Type) var(--sapField_WarningColor)
+  border: var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle) var(--sapField_WarningColor)
 }
 .fd-radio.is-alert + .fd-radio__label::after,
 .fd-radio.is-warning + .fd-radio__label::after {
   background: var(--sapField_TextColor)
 }
+.fd-radio.is-alert + .fd-radio__label.is-hover::before,
+.fd-radio.is-alert + .fd-radio__label:hover::before,
+.fd-radio.is-warning + .fd-radio__label.is-hover::before,
+.fd-radio.is-warning + .fd-radio__label:hover::before {
+  background-color: var(--sapField_Hover_Background);
+  -webkit-box-shadow: var(--fdRadio_Warning_Hover_Shadow);
+  box-shadow: var(--fdRadio_Warning_Hover_Shadow)
+}
 .fd-radio.is-alert + .fd-radio__label.is-hover.is-disabled,
 .fd-radio.is-alert + .fd-radio__label.is-hover:disabled,
 .fd-radio.is-alert + .fd-radio__label.is-hover[aria-disabled=true],
@@ -30701,11 +30721,17 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-radio.is-error + .fd-radio__label::before {
   background-color: var(--sapField_InvalidBackground);
-  border: .125rem var(--fdRadio_State_Border_Type) var(--sapField_InvalidColor)
+  border: var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle) var(--sapField_InvalidColor)
 }
 .fd-radio.is-error + .fd-radio__label::after {
   background: var(--sapField_InvalidColor)
 }
+.fd-radio.is-error + .fd-radio__label.is-hover::before,
+.fd-radio.is-error + .fd-radio__label:hover::before {
+  background-color: var(--sapField_Hover_Background);
+  -webkit-box-shadow: var(--fdRadio_Error_Hover_Shadow);
+  box-shadow: var(--fdRadio_Error_Hover_Shadow)
+}
 .fd-radio.is-error + .fd-radio__label.is-hover.is-disabled,
 .fd-radio.is-error + .fd-radio__label.is-hover:disabled,
 .fd-radio.is-error + .fd-radio__label.is-hover[aria-disabled=true],
@@ -30716,11 +30742,17 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-radio.is-success + .fd-radio__label::before {
   background-color: var(--sapField_SuccessBackground);
-  border: var(--sapField_BorderWidth) solid var(--sapField_SuccessColor)
+  border: var(--sapField_BorderWidth) var(--sapField_SuccessBorderStyle) var(--sapField_SuccessColor)
 }
 .fd-radio.is-success + .fd-radio__label::after {
   background: var(--sapField_SuccessColor)
 }
+.fd-radio.is-success + .fd-radio__label.is-hover::before,
+.fd-radio.is-success + .fd-radio__label:hover::before {
+  background-color: var(--sapField_Hover_Background);
+  -webkit-box-shadow: var(--fdRadio_Success_Hover_Shadow);
+  box-shadow: var(--fdRadio_Success_Hover_Shadow)
+}
 .fd-radio.is-success + .fd-radio__label.is-hover.is-disabled,
 .fd-radio.is-success + .fd-radio__label.is-hover:disabled,
 .fd-radio.is-success + .fd-radio__label.is-hover[aria-disabled=true],
@@ -30731,11 +30763,17 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-radio.is-information + .fd-radio__label::before {
   background-color: var(--sapField_InformationBackground);
-  border: .125rem var(--fdRadio_State_Border_Type) var(--sapField_InformationColor)
+  border: var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle) var(--sapField_InformationColor)
 }
 .fd-radio.is-information + .fd-radio__label::after {
   background: var(--sapField_InformationColor)
 }
+.fd-radio.is-information + .fd-radio__label.is-hover::before,
+.fd-radio.is-information + .fd-radio__label:hover::before {
+  background-color: var(--sapField_Hover_Background);
+  -webkit-box-shadow: var(--fdRadio_Information_Hover_Shadow);
+  box-shadow: var(--fdRadio_Information_Hover_Shadow)
+}
 .fd-radio.is-information + .fd-radio__label.is-hover.is-disabled,
 .fd-radio.is-information + .fd-radio__label.is-hover:disabled,
 .fd-radio.is-information + .fd-radio__label.is-hover[aria-disabled=true],
@@ -30747,12 +30785,20 @@ places the element far left of the screen. so it is not visible.
 .fd-radio.is-readonly + .fd-radio__label::before,
 .fd-radio[readonly] + .fd-radio__label::before {
   background-color: var(--sapField_ReadOnly_Background);
-  border: var(--sapField_BorderWidth) solid var(--sapField_ReadOnly_BorderColor)
+  border: var(--fdRadio_Readonly_Border_Width) var(--fdRadio_Readonly_Border_Type) var(--sapField_ReadOnly_BorderColor)
 }
 .fd-radio.is-readonly + .fd-radio__label::after,
 .fd-radio[readonly] + .fd-radio__label::after {
   background: var(--sapContent_NonInteractiveIconColor)
 }
+.fd-radio.is-readonly + .fd-radio__label.is-hover::before,
+.fd-radio.is-readonly + .fd-radio__label:hover::before,
+.fd-radio[readonly] + .fd-radio__label.is-hover::before,
+.fd-radio[readonly] + .fd-radio__label:hover::before {
+  background-color: var(--sapField_Hover_Background);
+  -webkit-box-shadow: none;
+  box-shadow: none
+}
 .fd-radio.is-readonly + .fd-radio__label.is-hover.is-disabled,
 .fd-radio.is-readonly + .fd-radio__label.is-hover:disabled,
 .fd-radio.is-readonly + .fd-radio__label.is-hover[aria-disabled=true],
@@ -30785,7 +30831,7 @@ places the element far left of the screen. so it is not visible.
 .fd-radio:disabled + .fd-radio__label,
 .fd-radio[aria-disabled=true] + .fd-radio__label {
   pointer-events: none;
-  opacity: .4
+  opacity: var(--sapContent_DisabledOpacity)
 }
 .fd-radio--compact + .fd-radio__label {
   padding: .5rem
@@ -30798,10 +30844,10 @@ places the element far left of the screen. so it is not visible.
   margin-left: 0
 }
 .fd-radio--compact + .fd-radio__label::after {
-  height: .375rem;
-  width: .375rem;
-  top: .8125rem;
-  left: .8125rem
+  height: var(--fdRadio_Inner_Content_Size_Compact);
+  width: var(--fdRadio_Inner_Content_Size_Compact);
+  top: var(--fdRadio_Inner_Content_Padding_Compact);
+  left: var(--fdRadio_Inner_Content_Padding_Compact)
 }
 .fd-radio--compact + .fd-radio__label[dir=rtl]::before,
 [dir=rtl] .fd-radio--compact + .fd-radio__label::before {
@@ -30811,7 +30857,7 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-radio--compact + .fd-radio__label[dir=rtl]::after,
 [dir=rtl] .fd-radio--compact + .fd-radio__label::after {
-  right: .8125rem
+  right: var(--fdRadio_Inner_Content_Padding_Compact)
 }
 .fd-radio--compact + .fd-radio__label.is-empty,
 .fd-radio--compact + .fd-radio__label:empty {
@@ -32603,20 +32649,20 @@ places the element far left of the screen. so it is not visible.
   margin: 0;
   border: 0;
   background-color: var(--sapShellColor);
-  -webkit-box-shadow: var(--sapContent_HeaderShadow);
-  box-shadow: var(--sapContent_HeaderShadow);
-  height: 2.75rem;
+  -webkit-box-shadow: var(--fdShellbar_Shadow);
+  box-shadow: var(--fdShellbar_Shadow);
+  height: var(--fdShellbar_Height);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: var(--sapShell_TextColor);
-  position: relative;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  color: var(--sapShell_TextColor);
+  position: relative;
   padding: 0 1rem
 }
 .fd-shellbar::after,
@@ -32695,10 +32741,11 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  color: var(--sapShell_TextColor);
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis
+  text-overflow: ellipsis;
+  margin-left: .5rem;
+  color: var(--sapShell_TextColor)
 }
 .fd-shellbar__subtitle::after,
 .fd-shellbar__subtitle::before,
@@ -32708,30 +32755,19 @@ places the element far left of the screen. so it is not visible.
   box-sizing: inherit;
   font-size: inherit
 }
-.fd-shellbar__subtitle {
-  font-size: var(--sapFontSmallSize);
-  margin-left: .5rem
-}
 .fd-shellbar__subtitle[dir=rtl],
-[dir=rtl] .fd-shellbar__subtitle {
-  margin-left: 0;
-  margin-right: .5rem
-}
-.fd-shellbar__logo,
-.fd-shellbar__product,
-.fd-shellbar__subtitle {
-  display: inline-block;
-  vertical-align: middle
+.fd-shellbar__title[dir=rtl],
+[dir=rtl] .fd-shellbar__subtitle,
+[dir=rtl] .fd-shellbar__title {
+  margin-right: .5rem;
+  margin-left: 0
 }
 .fd-shellbar__title {
   font-weight: 700;
-  padding-right: 0;
   vertical-align: middle
 }
-.fd-shellbar__title[dir=rtl],
-[dir=rtl] .fd-shellbar__title {
-  padding-right: .5rem;
-  padding-left: 0
+.fd-shellbar__subtitle {
+  font-size: var(--sapFontSmallSize)
 }
 .fd-shellbar__logo {
   font-size: var(--sapFontSize);
@@ -32744,8 +32780,6 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  padding-left: 0;
-  margin-right: .5rem;
   max-height: 2rem;
   background-repeat: no-repeat;
   background-size: contain
@@ -32756,12 +32790,6 @@ places the element far left of the screen. so it is not visible.
   box-sizing: inherit;
   font-size: inherit
 }
-.fd-shellbar__logo[dir=rtl],
-[dir=rtl] .fd-shellbar__logo {
-  padding-right: 0;
-  margin-right: 0;
-  margin-left: .5rem
-}
 .fd-shellbar__logo > * {
   line-height: 0;
   max-height: 2.5rem;
@@ -32784,8 +32812,7 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  padding-right: 0;
-  padding-left: .5rem
+  margin-left: .5rem
 }
 .fd-shellbar__action::after,
 .fd-shellbar__action::before {
@@ -32795,134 +32822,106 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-shellbar__action[dir=rtl],
 [dir=rtl] .fd-shellbar__action {
-  padding-right: .5rem;
-  padding-left: 0
+  margin-right: .5rem;
+  margin-left: 0
 }
 .fd-shellbar__action > * {
   vertical-align: middle
 }
-.fd-shellbar__action .fd-shellbar__counter--overflowed {
-  position: absolute;
-  right: .25rem;
-  top: -.25rem
-}
-.fd-shellbar__action .fd-shellbar__counter--notification {
-  max-width: 2.5rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  position: absolute;
-  background: var(--sapContent_BadgeBackground);
-  border: var(--sapContent_BadgeBackground);
-  color: var(--sapShell_TextColor);
-  line-height: .8;
-  max-height: 1rem;
-  overflow: hidden;
-  right: -.25rem;
-  top: -.25rem;
-  -webkit-transform: none;
-  transform: none
-}
-.fd-shellbar__action .fd-shellbar__counter--notification[dir=rtl],
-[dir=rtl] .fd-shellbar__action .fd-shellbar__counter--notification {
-  -webkit-transform: none;
-  transform: none;
-  right: initial;
-  left: -.25rem
-}
-.fd-shellbar__action .fd-shellbar__input-group__addon {
-  background-color: transparent
-}
-.fd-shellbar__action .fd-shellbar__input-group__addon .fd-shellbar__button {
-  border-radius: 0
-}
 .fd-shellbar__action .fd-shellbar__input-group {
-  background-color: transparent;
+  background-color: var(--fdShellbar_Input_Background);
+  border: var(--fdShellbar_Input_Border);
+  border-radius: var(--fdShellbar_Input_Border_Radius);
   cursor: text
 }
+.fd-shellbar__action .fd-shellbar__input-group.is-hover,
 .fd-shellbar__action .fd-shellbar__input-group:hover {
-  border-color: var(--sapField_BorderColor)
+  border-color: var(--sapField_BorderColor);
+  -webkit-box-shadow: var(--fdShellbar_Button_Hover_Shadow);
+  box-shadow: var(--fdShellbar_Button_Hover_Shadow)
 }
-.fd-shellbar__action .fd-shellbar__input-group .fd-shellbar__input-group__input {
+.fd-shellbar__action .fd-shellbar__input-group-input {
   border: none;
-  color: var(--sapShell_TextColor)
-}
-.fd-shellbar__action .fd-shellbar__input-group .fd-shellbar__input-group__input:hover {
-  background-color: var(--sapShell_Hover_Background)
-}
-.fd-shellbar__popover__body--right::after,
-.fd-shellbar__popover__body--right::before {
-  right: 14px
-}
-.fd-shellbar .fd-button.fd-shellbar__button {
-  position: relative;
-  border-color: transparent;
-  background: 0 0;
-  color: var(--sapShell_InteractiveTextColor);
-  overflow: visible;
-  padding: 0
+  color: var(--fdShellbar_Input_Color);
+  position: relative
 }
-.fd-shellbar .fd-button.fd-shellbar__button.is-focus,
-.fd-shellbar .fd-button.fd-shellbar__button:focus {
-  z-index: 5;
-  outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-  outline-offset: -.1875rem;
-  outline-color: var(--sapContent_ContrastFocusColor)
+.fd-shellbar__action .fd-shellbar__input-group-input.is-hover,
+.fd-shellbar__action .fd-shellbar__input-group-input.is-hover + .fd-shellbar__input-group-addon,
+.fd-shellbar__action .fd-shellbar__input-group-input:hover,
+.fd-shellbar__action .fd-shellbar__input-group-input:hover + .fd-shellbar__input-group-addon {
+  background: var(--sapShell_Hover_Background)!important
 }
-.fd-shellbar .fd-button.fd-shellbar__button.is-focus.fd-shellbar--toggled,
-.fd-shellbar .fd-button.fd-shellbar__button:focus.fd-shellbar--toggled {
-  outline-color: var(--sapContent_ContrastFocusColor)
+.fd-shellbar__action .fd-shellbar__input-group-input::-webkit-input-placeholder {
+  color: var(--fdShellbar_Input_Placeholder_Color);
+  font-style: italic
 }
-.fd-shellbar .fd-button.fd-shellbar__button.is-active,
-.fd-shellbar .fd-button.fd-shellbar__button:active {
-  background: var(--sapShell_Active_Background)
+.fd-shellbar__action .fd-shellbar__input-group-input::-moz-placeholder {
+  color: var(--fdShellbar_Input_Placeholder_Color);
+  font-style: italic
 }
-.fd-shellbar .fd-button.fd-shellbar__button:active,
-.fd-shellbar .fd-button.fd-shellbar__button:hover {
-  color: var(--sapShell_Active_TextColor)
+.fd-shellbar__action .fd-shellbar__input-group-input:-ms-input-placeholder {
+  color: var(--fdShellbar_Input_Placeholder_Color);
+  font-style: italic
 }
-.fd-shellbar .fd-button.fd-shellbar__button.is-hover,
-.fd-shellbar .fd-button.fd-shellbar__button:hover {
-  background: var(--sapShell_Hover_Background)
+.fd-shellbar__action .fd-shellbar__input-group-input::-ms-input-placeholder {
+  color: var(--fdShellbar_Input_Placeholder_Color);
+  font-style: italic
 }
-.fd-shellbar .fd-button.fd-shellbar__button.is-hover.is-disabled,
-.fd-shellbar .fd-button.fd-shellbar__button.is-hover:disabled,
-.fd-shellbar .fd-button.fd-shellbar__button.is-hover[aria-disabled=true],
-.fd-shellbar .fd-button.fd-shellbar__button:hover.is-disabled,
-.fd-shellbar .fd-button.fd-shellbar__button:hover:disabled,
-.fd-shellbar .fd-button.fd-shellbar__button:hover[aria-disabled=true] {
-  background: 0 0
+.fd-shellbar__action .fd-shellbar__input-group-input::placeholder {
+  color: var(--fdShellbar_Input_Placeholder_Color);
+  font-style: italic
 }
-.fd-shellbar .fd-button.fd-shellbar__button.sap-icon--bell::before {
-  margin-right: 0
+.fd-shellbar__action .fd-shellbar__input-group-input--select {
+  font-style: normal
 }
-.fd-shellbar .fd-button.fd-shellbar__button.sap-icon--bell[dir=rtl]::before,
-[dir=rtl] .fd-shellbar .fd-button.fd-shellbar__button.sap-icon--bell::before {
-  margin-left: 0
-}
-.fd-shellbar .fd-button.fd-shellbar__button.fd-shellbar__button--user-menu {
-  outline-offset: .1px
+.fd-shellbar__action .fd-shellbar__input-group-addon .fd-shellbar__button {
+  height: var(--fdShellbar_Input_Addon_Dimension);
+  min-width: var(--fdShellbar_Input_Addon_Dimension);
+  border-radius: var(--fdShellbar_Input_Border_Radius)
 }
-.fd-shellbar .fd-shellbar__button--icon {
+.fd-shellbar .fd-shellbar__button {
+  background: 0 0;
+  border: var(--fdShellbar_Button_Border);
   color: var(--sapShell_InteractiveTextColor)
 }
-.fd-shellbar .fd-button.fd-shellbar__button--menu {
-  font-size: var(--sapFontSize)
+.fd-shellbar .fd-shellbar__button:not(.fd-shellbar__button--menu) {
+  padding: 0
 }
-.fd-shellbar .fd-button.fd-shellbar__button--menu:hover {
+.fd-shellbar .fd-shellbar__button.is-hover,
+.fd-shellbar .fd-shellbar__button:hover {
   background: var(--sapShell_Hover_Background);
-  border-color: transparent
+  -webkit-box-shadow: var(--fdShellbar_Button_Hover_Shadow);
+  box-shadow: var(--fdShellbar_Button_Hover_Shadow)
+}
+.fd-shellbar .fd-shellbar__button.is-hover.is-disabled,
+.fd-shellbar .fd-shellbar__button.is-hover:disabled,
+.fd-shellbar .fd-shellbar__button.is-hover[aria-disabled=true],
+.fd-shellbar .fd-shellbar__button:hover.is-disabled,
+.fd-shellbar .fd-shellbar__button:hover:disabled,
+.fd-shellbar .fd-shellbar__button:hover[aria-disabled=true] {
+  background: 0 0
 }
-.fd-shellbar .fd-button.fd-shellbar__button--menu:active,
-.fd-shellbar .fd-button.fd-shellbar__button--menu:focus {
+.fd-shellbar .fd-shellbar__button.is-active,
+.fd-shellbar .fd-shellbar__button:active {
   background: var(--sapShell_Active_Background);
+  -webkit-box-shadow: var(--fdShellbar_Button_Active_Shadow);
+  box-shadow: var(--fdShellbar_Button_Active_Shadow);
   color: var(--sapShell_Active_TextColor)
 }
-.fd-shellbar .fd-button.fd-shellbar__button--menu:active::after,
-.fd-shellbar .fd-button.fd-shellbar__button--menu:focus::after {
-  border-color: var(--sapContent_ContrastFocusColor)
+.fd-shellbar .fd-shellbar__button--menu {
+  margin-left: .5rem
 }
-.fd-shellbar--s {
-  padding: 0 1rem
+.fd-shellbar .fd-shellbar__button--menu[dir=rtl],
+[dir=rtl] .fd-shellbar .fd-shellbar__button--menu {
+  margin-right: .5rem;
+  margin-left: 0
+}
+.fd-shellbar .fd-shellbar__button--menu .fd-shellbar__title {
+  margin: 0
+}
+.fd-shellbar--s .fd-shellbar__subtitle,
+.fd-shellbar--s .fd-shellbar__title {
+  display: none
 }
 .fd-shellbar--s .fd-shellbar__action--mobile {
   display: inline-block
@@ -32930,12 +32929,8 @@ places the element far left of the screen. so it is not visible.
 .fd-shellbar--s .fd-shellbar__action--desktop {
   display: none
 }
-.fd-shellbar--s .fd-shellbar__subtitle,
-.fd-shellbar--s .fd-shellbar__title {
-  display: none
-}
-.fd-shellbar--s .fd-button.fd-button--menu.fd-shellbar__button--menu {
-  padding: 0
+.fd-shellbar--s .fd-shellbar__button--menu .sap-icon--megamenu {
+  margin: 0!important
 }
 .fd-shellbar--l,
 .fd-shellbar--m {
@@ -32944,6 +32939,14 @@ places the element far left of the screen. so it is not visible.
 .fd-shellbar--xl {
   padding: 0 3rem
 }
+.fd-shellbar--l .fd-shellbar__subtitle,
+.fd-shellbar--l .fd-shellbar__title,
+.fd-shellbar--m .fd-shellbar__subtitle,
+.fd-shellbar--m .fd-shellbar__title,
+.fd-shellbar--xl .fd-shellbar__subtitle,
+.fd-shellbar--xl .fd-shellbar__title {
+  display: inline-block
+}
 .fd-shellbar--l .fd-shellbar__action--mobile,
 .fd-shellbar--m .fd-shellbar__action--mobile,
 .fd-shellbar--xl .fd-shellbar__action--mobile {
@@ -32954,17 +32957,6 @@ places the element far left of the screen. so it is not visible.
 .fd-shellbar--xl .fd-shellbar__action--desktop {
   display: inline-block
 }
-.fd-shellbar--l .fd-shellbar__subtitle,
-.fd-shellbar--l .fd-shellbar__title,
-.fd-shellbar--m .fd-shellbar__subtitle,
-.fd-shellbar--m .fd-shellbar__title,
-.fd-shellbar--xl .fd-shellbar__subtitle,
-.fd-shellbar--xl .fd-shellbar__title {
-  display: inline-block
-}
-.fd-shellbar__side-nav-control {
-  margin: 0 .25rem
-}
 .fd-nested-list {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
@@ -35879,7 +35871,7 @@ places the element far left of the screen. so it is not visible.
   -ms-flex-align: center;
   align-items: center;
   cursor: pointer;
-  padding: 0
+  padding: var(--fdSwitch_Padding)
 }
 .fd-switch::after,
 .fd-switch::before {
@@ -35907,8 +35899,7 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-switch__control {
   display: inline-block;
-  position: relative;
-  padding: .375rem 0
+  position: relative
 }
 .fd-switch__slider {
   font-size: var(--sapFontSize);
@@ -35924,12 +35915,14 @@ places the element far left of the screen. so it is not visible.
   background-color: var(--sapButton_Track_Background);
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
-  width: 3.125rem;
-  height: 1.25rem;
-  border: var(--sapButton_BorderWidth) solid var(--sapContent_ForegroundBorderColor);
+  width: var(--fdSwitch_Width);
+  height: var(--fdSwitch_Height);
+  border: var(--fdSwitch_Border);
   -webkit-transition: all .1s;
   transition: all .1s;
-  border-radius: .75rem
+  border-radius: var(--fdSwitch_Border_Radius);
+  -webkit-box-shadow: var(--fdSwitch_Shadow);
+  box-shadow: var(--fdSwitch_Shadow)
 }
 .fd-switch__slider::after,
 .fd-switch__slider::before {
@@ -35959,8 +35952,6 @@ places the element far left of the screen. so it is not visible.
   -ms-flex-align: center;
   align-items: center;
   top: 50%;
-  -webkit-transform: translate(-1.1875rem,-50%);
-  transform: translate(-1.1875rem,-50%);
   -webkit-transition: all .1s;
   transition: all .1s;
   min-width: 4.25rem
@@ -35971,6 +35962,14 @@ places the element far left of the screen. so it is not visible.
   box-sizing: inherit;
   font-size: inherit
 }
+.fd-switch .fd-switch__track {
+  -webkit-transform: translate(calc(var(--fdSwitch_Handle_Offset) * -1),-50%);
+  transform: translate(calc(var(--fdSwitch_Handle_Offset) * -1),-50%)
+}
+.fd-switch .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
+  -webkit-transform: translate(calc(var(--fdSwitch_Active_Handle_Offset) * -1),-50%);
+  transform: translate(calc(var(--fdSwitch_Active_Handle_Offset) * -1),-50%)
+}
 .fd-switch__text {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
@@ -36011,6 +36010,9 @@ places the element far left of the screen. so it is not visible.
   margin-left: .5rem;
   margin-right: 0
 }
+.fd-switch__icon {
+  position: var(--fdSwitch_Semantic_Icon_Position)
+}
 .fd-switch__icon [class*=sap-icon],
 .fd-switch__icon[class*=sap-icon] {
   display: -webkit-box;
@@ -36024,7 +36026,7 @@ places the element far left of the screen. so it is not visible.
   align-items: center;
   width: 1.75rem;
   min-width: 1.75rem;
-  font-size: .75rem;
+  font-size: var(--fdSwitch_Icon_Size);
   line-height: 1.375rem;
   -webkit-transition: visibility 0s ease 30ms,opacity 0s ease 30ms;
   transition: visibility 0s ease 30ms,opacity 0s ease 30ms
@@ -36032,12 +36034,12 @@ places the element far left of the screen. so it is not visible.
 .fd-switch__icon--off [class*=sap-icon],
 .fd-switch__icon--off[class*=sap-icon] {
   color: var(--sapNegativeElementColor);
-  margin: 0 .125rem 0 0
+  margin: var(--fdSwitch_Icon_Error_Margin)
 }
 .fd-switch__icon--on [class*=sap-icon],
 .fd-switch__icon--on[class*=sap-icon] {
   color: var(--sapPositiveElementColor);
-  margin: 0 0 0 .125rem;
+  margin: var(--fdSwitch_Icon_Success_Margin);
   visibility: hidden;
   opacity: 0
 }
@@ -36052,13 +36054,13 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  -webkit-box-sizing: content-box;
-  box-sizing: content-box;
-  border: var(--fdSwitch_Handle_Border_Width) solid var(--sapContent_ForegroundBorderColor);
-  background-color: var(--sapButton_Background);
-  min-width: 1.875rem;
-  min-height: 1.875rem;
-  border-radius: 1rem;
+  -webkit-box-sizing: var(--fdSwitch_Slider_Box_Sizing);
+  box-sizing: var(--fdSwitch_Slider_Box_Sizing);
+  border: var(--fdSwitch_Handle_Border_Width) solid var(--fdSwitch_Handle_Border_Color);
+  background-color: var(--fdSwitch_Handle_Background);
+  min-width: var(--fdSwitch_Handle_Width);
+  min-height: var(--fdSwitch_Handle_Height);
+  border-radius: var(--fdSwitch_Handle_Border_Radius);
   background-clip: padding-box
 }
 .fd-switch__handle::after,
@@ -36103,31 +36105,35 @@ places the element far left of the screen. so it is not visible.
   pointer-events: none;
   opacity: var(--sapContent_DisabledOpacity)
 }
+.fd-switch__input:focus + .fd-switch__slider {
+  outline-offset: .125rem;
+  outline-width: .125rem;
+  outline-style: solid;
+  outline-color: var(--fdSwitch_Focus_Outline_Color)
+}
 .fd-switch__input:focus + .fd-switch__slider::before {
   position: absolute;
-  display: block;
+  display: var(--fdSwitch_Focus_Border_Display);
   outline-offset: -.0625rem;
   border-width: var(--sapContent_FocusWidth);
   border-color: var(--sapContent_FocusColor);
   border-style: var(--sapContent_FocusStyle);
   content: "";
-  top: 0;
-  bottom: 0;
+  top: var(--fdSwitch_Focus_Outline_Vertical_Offset);
+  bottom: var(--fdSwitch_Focus_Outline_Vertical_Offset);
   left: 0;
   right: 0
 }
 .fd-switch__input:checked + .fd-switch__slider {
   background-color: var(--sapButton_Track_Selected_Background);
-  border-color: var(--sapButton_Selected_BorderColor)
+  border-color: var(--sapButton_Selected_BorderColor);
+  -webkit-box-shadow: var(--fdSwitch_Active_Shadow);
+  box-shadow: var(--fdSwitch_Active_Shadow)
 }
 .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle {
   background-color: var(--sapButton_Selected_Background);
   border-color: var(--sapButton_Selected_BorderColor)
 }
-.fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
-  -webkit-transform: translate(.0625rem,-50%);
-  transform: translate(.0625rem,-50%)
-}
 .fd-switch__input:checked + .fd-switch__slider .fd-switch__icon--off [class*=sap-icon],
 .fd-switch__input:checked + .fd-switch__slider .fd-switch__icon--off[class*=sap-icon] {
   opacity: 0;
@@ -36140,29 +36146,29 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-switch[dir=rtl] .fd-switch__icon--on,
 [dir=rtl] .fd-switch .fd-switch__icon--on {
-  margin: 0 .125rem 0 0
+  margin: var(--fdSwitch_Icon_Error_Margin)
 }
 .fd-switch[dir=rtl] .fd-switch__icon--off,
 [dir=rtl] .fd-switch .fd-switch__icon--off {
-  margin: 0 0 0 .125rem
+  margin: var(--fdSwitch_Icon_Success_Margin)
 }
 .fd-switch[dir=rtl] .fd-switch__track,
 [dir=rtl] .fd-switch .fd-switch__track {
-  -webkit-transform: translate(1.1875rem,-50%);
-  transform: translate(1.1875rem,-50%)
+  -webkit-transform: translate(var(--fdSwitch_Handle_Offset),-50%);
+  transform: translate(var(--fdSwitch_Handle_Offset),-50%)
 }
 .fd-switch[dir=rtl] .fd-switch__input:checked + .fd-switch__slider .fd-switch__track,
 [dir=rtl] .fd-switch .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
-  -webkit-transform: translate(-.0625rem,-50%);
-  transform: translate(-.0625rem,-50%)
+  -webkit-transform: translate(var(--fdSwitch_Active_Handle_Offset),-50%);
+  transform: translate(var(--fdSwitch_Active_Handle_Offset),-50%)
 }
 .fd-switch.is-hover .fd-switch__slider,
 .fd-switch:hover .fd-switch__slider {
-  border-color: var(--sapButton_Hover_BorderColor)
+  border-color: var(--fdSwitch_Handle_Hover_Border_Color)
 }
 .fd-switch.is-hover .fd-switch__handle,
 .fd-switch:hover .fd-switch__handle {
-  border-color: var(--sapButton_Hover_BorderColor);
+  border-color: var(--fdSwitch_Handle_Hover_Border_Color);
   background-color: var(--sapButton_Hover_Background)
 }
 .fd-switch.is-hover .fd-switch__input:checked + .fd-switch__slider,
@@ -36171,66 +36177,91 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-switch.is-hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle,
 .fd-switch:hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle {
-  border-color: var(--sapButton_Selected_Hover_BorderColor);
+  border-color: var(--fdSwitch_Handle_Selected_Hover_Border_Color);
   background-color: var(--sapButton_Selected_Hover_Background)
 }
 .fd-switch--compact {
-  padding: .25rem 0
+  padding: var(--fdSwitch_Compact_Padding)
 }
 .fd-switch--compact .fd-switch__handle {
-  min-width: 1.5rem;
-  min-height: 1.5rem
+  min-width: var(--fdSwitch_Compact_Handle_Width);
+  min-height: var(--fdSwitch_Compact_Handle_Height)
+}
+.fd-switch--compact .fd-switch__track {
+  min-width: 3.125rem
 }
 .fd-switch--compact .fd-switch__slider {
-  width: 2.375rem;
-  height: 1rem
+  width: var(--fdSwitch_Compact_Width);
+  height: var(--fdSwitch_Compact_Height)
 }
 .fd-switch--compact .fd-switch__track {
   -webkit-transform: translate(-.8125rem,-50%);
-  transform: translate(-.8125rem,-50%);
-  min-width: 3.125rem
+  transform: translate(-.8125rem,-50%)
+}
+.fd-switch--compact .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
+  -webkit-transform: translate(calc(var(--fdSwitch_Compact_Active_Handle_Offset) * -1),-50%);
+  transform: translate(calc(var(--fdSwitch_Compact_Active_Handle_Offset) * -1),-50%)
 }
 .fd-switch--compact[dir=rtl] .fd-switch__track,
 [dir=rtl] .fd-switch--compact .fd-switch__track {
   -webkit-transform: translate(.8125rem,-50%);
   transform: translate(.8125rem,-50%)
 }
+.fd-switch--compact[dir=rtl] .fd-switch__input:checked + .fd-switch__slider .fd-switch__track,
+[dir=rtl] .fd-switch--compact .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
+  -webkit-transform: translate(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset_Rtl),-50%);
+  transform: translate(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset_Rtl),-50%)
+}
 .fd-switch--semantic .fd-switch__slider {
-  width: 3.75rem;
-  height: 1.25rem;
+  width: var(--fdSwitch_Semantic_Width);
+  height: var(--fdSwitch_Semantic_Height);
   border-color: var(--sapErrorBorderColor);
-  background-color: var(--sapErrorBackground)
+  background-color: var(--fdSwitch_Semantic_Error_Background_Color);
+  -webkit-box-shadow: var(--fdSwitch_Semantic_Error_Box_Shadow);
+  box-shadow: var(--fdSwitch_Semantic_Error_Box_Shadow)
 }
 .fd-switch--semantic .fd-switch__track {
-  -webkit-transform: translate(-1.9375rem,-50%);
-  transform: translate(-1.9375rem,-50%)
+  -webkit-transform: translate(calc(var(--fdSwitch_Semantic_Handle_Offset) * -1),-50%);
+  transform: translate(calc(var(--fdSwitch_Semantic_Handle_Offset) * -1),-50%)
+}
+.fd-switch--semantic .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
+  -webkit-transform: translate(calc(var(--fdSwitch_Semantic_Handle_Active_Offset) * -1),-50%);
+  transform: translate(calc(var(--fdSwitch_Semantic_Handle_Active_Offset) * -1),-50%)
 }
 .fd-switch--semantic .fd-switch__handle {
-  background-color: var(--sapButton_Background);
-  border-color: var(--sapErrorBorderColor)
+  background-color: var(--fdSwitch_Handle_Background);
+  background-color: var(--fdSwitch_Semantic_Error_Handle_Background_Color);
+  border-color: var(--fdSwitch_Semantic_Error_Handle_Border_Color)
 }
 .fd-switch--semantic .fd-switch__input:checked + .fd-switch__slider {
   background-color: var(--fdSwitch_Semantic_Success_Background_Color);
-  border-color: var(--sapSuccessBorderColor)
-}
-.fd-switch--semantic .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
-  -webkit-transform: translate(-.0625rem,-50%);
-  transform: translate(-.0625rem,-50%)
+  border-color: var(--sapSuccessBorderColor);
+  -webkit-box-shadow: var(--fdSwitch_Semantic_Success_Box_Shadow);
+  box-shadow: var(--fdSwitch_Semantic_Success_Box_Shadow)
 }
 .fd-switch--semantic .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle {
-  border-color: var(--sapSuccessBorderColor);
-  background-color: var(--sapButton_Background)
+  border-color: var(--fdSwitch_Semantic_Success_Handle_Border_Color);
+  background-color: var(--fdSwitch_Handle_Background);
+  background-color: var(--fdSwitch_Semantic_Success_Handle_Background_Color)
 }
 .fd-switch--semantic.fd-switch--compact {
   padding: .1875rem 0
 }
 .fd-switch--semantic.fd-switch--compact .fd-switch__slider {
-  width: 3.375rem;
-  height: 1.25rem
+  width: var(--fdSwitch_Compact_Semantic_Width);
+  height: var(--fdSwitch_Compact_Semantic_Height)
+}
+.fd-switch--semantic.fd-switch--compact .fd-switch__track {
+  -webkit-transform: translate(var(--fdSwitch_Compact_Semantic_Handle_Offset),-50%);
+  transform: translate(var(--fdSwitch_Compact_Semantic_Handle_Offset),-50%)
+}
+.fd-switch--semantic.fd-switch--compact .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
+  -webkit-transform: translate(calc(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset) * -1),-50%);
+  transform: translate(calc(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset) * -1),-50%)
 }
 .fd-switch--semantic.is-hover .fd-switch__icon,
 .fd-switch--semantic:hover .fd-switch__icon {
-  color: var(--fdSwitch_Semantic_Error_Color)
+  color: var(--fdSwitch_Semantic_Icon_Error_Color)
 }
 .fd-switch--semantic.is-hover .fd-switch__slider,
 .fd-switch--semantic:hover .fd-switch__slider {
@@ -36238,8 +36269,8 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-switch--semantic.is-hover .fd-switch__handle,
 .fd-switch--semantic:hover .fd-switch__handle {
-  background-color: var(--fdSwitch_Semantic_Error_Background_Color);
-  border-color: var(--fdSwitch_Semantic_Error_Color)
+  background-color: var(--fdSwitch_Semantic_Error_Handle_Hover_Background_Color);
+  border-color: var(--fdSwitch_Semantic_Error_Handle_Hover_Border_Color)
 }
 .fd-switch--semantic.is-hover .fd-switch__input:checked + .fd-switch__slider,
 .fd-switch--semantic:hover .fd-switch__input:checked + .fd-switch__slider {
@@ -36249,21 +36280,31 @@ places the element far left of the screen. so it is not visible.
 .fd-switch--semantic.is-hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle,
 .fd-switch--semantic:hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle {
   background-color: var(--fdSwitch_Semantic_Success_Handle_Hover_Background_Color);
-  border-color: var(--fdSwitch_Semantic_Success_Border_Color)
+  border-color: var(--fdSwitch_Semantic_Success_Handle_Hover_Border_Color)
 }
 .fd-switch--semantic.is-hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__icon,
 .fd-switch--semantic:hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__icon {
-  color: var(--fdSwitch_Semantic_Success_Border_Color)
+  color: var(--fdSwitch_Semantic_Icon_Success_Color)
 }
 .fd-switch--semantic[dir=rtl] .fd-switch__track,
 [dir=rtl] .fd-switch--semantic .fd-switch__track {
-  -webkit-transform: translate(1.9375rem,-50%);
-  transform: translate(1.9375rem,-50%)
+  -webkit-transform: translate(var(--fdSwitch_Semantic_Handle_Offset),-50%);
+  transform: translate(var(--fdSwitch_Semantic_Handle_Offset),-50%)
 }
 .fd-switch--semantic[dir=rtl] .fd-switch__input:checked + .fd-switch__slider .fd-switch__track,
 [dir=rtl] .fd-switch--semantic .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
-  -webkit-transform: translate(.0625rem,-50%);
-  transform: translate(.0625rem,-50%)
+  -webkit-transform: translate(var(--fdSwitch_Semantic_Handle_Active_Offset),-50%);
+  transform: translate(var(--fdSwitch_Semantic_Handle_Active_Offset),-50%)
+}
+.fd-switch--semantic[dir=rtl].fd-switch--compact .fd-switch__track,
+[dir=rtl] .fd-switch--semantic.fd-switch--compact .fd-switch__track {
+  -webkit-transform: translate(calc(var(--fdSwitch_Compact_Semantic_Handle_Offset) * -1),-50%);
+  transform: translate(calc(var(--fdSwitch_Compact_Semantic_Handle_Offset) * -1),-50%)
+}
+.fd-switch--semantic[dir=rtl].fd-switch--compact .fd-switch__input:checked + .fd-switch__slider .fd-switch__track,
+[dir=rtl] .fd-switch--semantic.fd-switch--compact .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
+  -webkit-transform: translate(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset),-50%);
+  transform: translate(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset),-50%)
 }
 /*!
 .fd-table(--compact, --condensed, --no-horizontal-borders, --no-vertical-borders, --fixed, --hidden, --tree, --group)
@@ -39033,11 +39074,11 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-text::-moz-selection {
   color: var(--sapContent_ContrastTextColor);
-  background-color: var(--sapSelectedColor)
+  background-color: var(--fdText_Selected_Background_Color)
 }
 .fd-text::selection {
   color: var(--sapContent_ContrastTextColor);
-  background-color: var(--sapSelectedColor)
+  background-color: var(--fdText_Selected_Background_Color)
 }
 .fd-text--max-lines {
   display: -webkit-box;
@@ -40998,9 +41039,11 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  background-color: var(--sapButton_TokenBackground);
-  color: var(--sapTextColor);
   font-size: var(--sapFontSize);
+  color: var(--fdToken_Text_Color);
+  border-radius: var(--fdToken_Border_Radius);
+  background-color: var(--sapButton_TokenBackground);
+  border: var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -41010,15 +41053,13 @@ places the element far left of the screen. so it is not visible.
   -ms-flex-align: center;
   align-items: center;
   text-align: center;
-  padding: .25rem 0 .25rem .3125rem;
-  border-radius: .25rem;
+  padding: .25rem 0 .25rem var(--fdToken_Padding_Left);
   white-space: nowrap;
   max-width: 100%;
   min-width: 3.625rem;
   text-overflow: clip;
   height: 1.625rem;
-  line-height: 1.5rem;
-  border: var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor)
+  line-height: 1.5rem
 }
 .fd-token::after,
 .fd-token::before {
@@ -41029,7 +41070,7 @@ places the element far left of the screen. so it is not visible.
 .fd-token[dir=rtl],
 [dir=rtl] .fd-token {
   padding-left: 0;
-  padding-right: .3125rem
+  padding-right: var(--fdToken_Padding_Left)
 }
 .fd-token__text {
   overflow: hidden;
@@ -41093,15 +41134,17 @@ places the element far left of the screen. so it is not visible.
   box-shadow: none
 }
 .fd-token:hover {
-  background-color: var(--sapButton_Hover_Background);
-  border-color: var(--sapButton_Hover_BorderColor)
+  background-color: var(--fdToken_Background_Color_Hover);
+  border-color: var(--fdToken_Border_Color_Hover);
+  -webkit-box-shadow: var(--fdToken_Box_Shadow_Hover);
+  box-shadow: var(--fdToken_Box_Shadow_Hover)
 }
 .fd-token.is-focus,
 .fd-token:focus {
   z-index: 5;
   -webkit-box-shadow: none;
   box-shadow: none;
-  outline-offset: -.1875rem;
+  outline-offset: var(--fdToken_Outline_Offset);
   outline-width: var(--sapContent_FocusWidth);
   outline-color: var(--sapContent_FocusColor);
   outline-style: var(--sapContent_FocusStyle)
@@ -41124,6 +41167,17 @@ places the element far left of the screen. so it is not visible.
   padding-left: 0;
   padding-right: .25rem
 }
+.fd-token--compact.is-focus,
+.fd-token--compact:focus {
+  z-index: 5;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  outline-offset: var(--fdToken_Outline_Offset);
+  outline-width: var(--sapContent_FocusWidth);
+  outline-color: var(--sapContent_FocusColor);
+  outline-style: var(--sapContent_FocusStyle);
+  outline-offset: var(--fdToken_Outline_Offset_Compact)
+}
 .fd-token--selected {
   color: var(--sapButton_Selected_TextColor);
   background-color: var(--sapButton_Selected_Background);
@@ -41134,22 +41188,26 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-token--selected:hover {
   background-color: var(--sapButton_Selected_Hover_Background);
-  border-color: var(--sapButton_Selected_Hover_BorderColor)
+  border-color: var(--sapButton_Selected_Hover_BorderColor);
+  -webkit-box-shadow: var(--fdToken_Box_Shadow_Selected_Hover);
+  box-shadow: var(--fdToken_Box_Shadow_Selected_Hover)
 }
 .fd-token--selected.is-focus,
 .fd-token--selected:focus {
   z-index: 5;
   -webkit-box-shadow: none;
   box-shadow: none;
-  outline-offset: -.1875rem;
+  outline-offset: var(--fdToken_Outline_Offset);
   outline-width: var(--sapContent_FocusWidth);
   outline-color: var(--sapContent_FocusColor);
   outline-style: var(--sapContent_FocusStyle);
-  outline-color: var(--sapContent_ContrastFocusColor)
+  outline-color: var(--fdToken_Border_Color_Selected_Focus)
 }
 .fd-token--readonly {
   color: var(--sapContent_LabelColor);
-  padding: .25rem .375rem
+  background-color: var(--fdToken_Background_Color_Read_Only);
+  padding: .25rem .375rem;
+  border: var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only)
 }
 .fd-token--readonly.fd-token--compact {
   padding: .1rem .25rem
@@ -41158,6 +41216,14 @@ places the element far left of the screen. so it is not visible.
 [dir=rtl] .fd-token--readonly.fd-token--compact {
   padding-left: .25rem
 }
+.fd-token--readonly.is-hover,
+.fd-token--readonly:hover {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  color: var(--sapContent_LabelColor);
+  background-color: var(--fdToken_Background_Color_Read_Only);
+  border: var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only)
+}
 .fd-token--readonly[dir=rtl],
 [dir=rtl] .fd-token--readonly {
   padding-left: .375rem
@@ -41787,10 +41853,10 @@ places the element far left of the screen. so it is not visible.
   border-bottom: none
 }
 .fd-toolbar--auto {
-  background-color: inherit
+  background-color: var(--fdToolbar_Auto_Background)
 }
 .fd-toolbar--solid {
-  background-color: var(--sapBackgroundColor)
+  background-color: var(--fdToolbar_Solid_Background)
 }
 .fd-toolbar--transparent {
   background-color: var(--sapToolbar_Background)
@@ -41981,12 +42047,16 @@ places the element far left of the screen. so it is not visible.
 .fd-toolbar__overflow .fd-toolbar__overflow-label--text {
   margin-top: .4375rem
 }
+.fd-toolbar__title {
+  color: var(--sapGroup_TitleTextColor)
+}
 .fd-toolbar--cozy {
   height: 2.75rem;
   min-height: 2.75rem
 }
 .fd-toolbar--cozy.fd-toolbar--info {
-  height: 2rem
+  height: 2rem;
+  min-height: 2rem
 }
 .fd-toolbar--cozy .fd-toolbar__overflow {
   font-size: var(--sapFontSize);