@fundamental-styles/theming-preview 0.24.0-rc.13 → 0.24.0-rc.17

package/fundamental-styles.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.13
+ * Fundamental Library Styles v0.24.0-rc.17
  * 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)
  */
@@ -35864,7 +35864,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 {
@@ -35892,8 +35892,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);
@@ -35909,12 +35908,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 {
@@ -35944,8 +35945,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
@@ -35956,6 +35955,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);
@@ -35996,6 +36003,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;
@@ -36009,7 +36019,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
@@ -36017,12 +36027,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
 }
@@ -36037,13 +36047,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,
@@ -36088,31 +36098,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;
@@ -36125,29 +36139,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,
@@ -36156,66 +36170,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 {
@@ -36223,8 +36262,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 {
@@ -36234,21 +36273,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)
@@ -40983,9 +41032,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;
@@ -40995,15 +41046,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 {
@@ -41014,7 +41063,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;
@@ -41078,15 +41127,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)
@@ -41109,6 +41160,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);
@@ -41119,22 +41181,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
@@ -41143,6 +41209,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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fundamental-styles/theming-preview",
-    "version": "0.24.0-rc.13",
+    "version": "0.24.0-rc.17",
     "license": "Apache-2.0",
     "homepage": "https://sap.github.io/fundamental-styles/",
     "description": "Fundamental Library Styles - Theming Package Preview",
@@ -9,7 +9,7 @@
       "url": "https://github.com/SAP/fundamental-styles"
     },
     "dependencies": {
-        "fundamental-styles": "0.24.0-rc.13"
+        "fundamental-styles": "0.24.0-rc.17"
     }
   }