@fundamental-styles/theming-preview 0.24.0-rc.6 → 0.24.0-rc.9

package/fundamental-styles.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.6
+ * Fundamental Library Styles v0.24.0-rc.9
  * 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)
  */
@@ -12813,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
@@ -12820,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
 }
@@ -12989,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 {
@@ -13562,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 {
@@ -30606,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 {
@@ -30619,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 {
@@ -30628,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 {
@@ -30651,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],
@@ -30673,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],
@@ -30688,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],
@@ -30703,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],
@@ -30719,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],
@@ -30757,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
@@ -30770,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 {
@@ -30783,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 {
@@ -39005,11 +39049,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;

package/package.json

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