@fundamental-styles/theming-preview 0.24.0-rc.5 → 0.24.0-rc.8

package/fundamental-styles.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.5
+ * Fundamental Library Styles v0.24.0-rc.8
  * 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 {
@@ -12801,6 +12813,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 +12821,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 +12996,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 +13569,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 {
@@ -30594,10 +30613,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 {
@@ -30607,7 +30626,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 {
@@ -30616,7 +30638,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 {
@@ -30639,12 +30661,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],
@@ -30661,11 +30691,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],
@@ -30676,11 +30712,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],
@@ -30691,11 +30733,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],
@@ -30707,12 +30755,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],
@@ -30745,7 +30801,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
@@ -30758,10 +30814,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 {
@@ -30771,7 +30827,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.5",
+    "version": "0.24.0-rc.8",
     "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.5"
+        "fundamental-styles": "0.24.0-rc.8"
     }
   }