@fundamental-styles/theming-preview 0.24.0-rc.4 → 0.24.0-rc.7

package/fundamental-styles.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.4
+ * Fundamental Library Styles v0.24.0-rc.7
  * 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)
  */
@@ -8734,8 +8734,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 +8863,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 +8888,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 +8910,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 +8932,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 +8954,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 +8986,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 {
@@ -22867,8 +22879,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],
@@ -30593,10 +30606,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 {
@@ -30606,7 +30619,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 {
@@ -30615,7 +30631,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 {
@@ -30638,12 +30654,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],
@@ -30660,11 +30684,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],
@@ -30675,11 +30705,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],
@@ -30690,11 +30726,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],
@@ -30706,12 +30748,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],
@@ -30744,7 +30794,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
@@ -30757,10 +30807,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 {
@@ -30770,7 +30820,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 {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fundamental-styles/theming-preview",
-    "version": "0.24.0-rc.4",
+    "version": "0.24.0-rc.7",
     "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.4"
+        "fundamental-styles": "0.24.0-rc.7"
     }
   }