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

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.14
  * 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)
  */
@@ -40983,9 +40983,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 +40997,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 +41014,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 +41078,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 +41111,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 +41132,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 +41160,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.14",
     "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.14"
     }
   }