@fundamental-styles/theming-preview 0.24.1-rc.9 → 0.24.2-rc.1

package/fundamental-styles.css

@@ -1,7 +1,7 @@
 
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.1-rc.9
+ * Fundamental Library Styles v0.24.2-rc.1
  * 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)
  */
@@ -5142,6 +5142,34 @@
           box-sizing: inherit;
   font-size: inherit;
 }
+.fd-bar--responsive-paddings {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+@media (max-width: 599px) {
+  .fd-bar--responsive-paddings {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+@media (min-width: 600px) and (max-width: 1023px) {
+  .fd-bar--responsive-paddings {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+@media (min-width: 1024px) and (max-width: 1439px) {
+  .fd-bar--responsive-paddings {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+@media (min-width: 1440px) {
+  .fd-bar--responsive-paddings {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+}
 .fd-bar__left, .fd-bar__middle, .fd-bar__right {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
@@ -5188,14 +5216,14 @@
   padding-left: var(--fdBar_Left_Area_Padding_Right);
 }
 .fd-bar__right {
-  padding-left: --fdBar_Right_Area_Padding_Left;
+  padding-left: var(--fdBar_Right_Area_Padding_Left);
   padding-right: 0;
   -webkit-box-pack: end;
       -ms-flex-pack: end;
           justify-content: flex-end;
 }
 [dir=rtl] .fd-bar__right, .fd-bar__right[dir=rtl] {
-  padding-right: --fdBar_Right_Area_Padding_Left;
+  padding-right: var(--fdBar_Right_Area_Padding_Left);
   padding-left: 0;
 }
 .fd-bar__element {
@@ -5212,15 +5240,15 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  margin-right: 0.5rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   max-width: 100%;
   max-height: 100%;
+  margin-right: 0.5rem;
 }
 .fd-bar__element::before, .fd-bar__element::after {
   -webkit-box-sizing: inherit;
@@ -5243,8 +5271,8 @@
   margin-right: 0;
 }
 [dir=rtl] .fd-bar__element:last-child, .fd-bar__element:last-child[dir=rtl] {
-  margin-left: 0;
   margin-right: 0;
+  margin-left: 0;
 }
 .fd-bar--header {
   height: 2.5rem;
@@ -5252,6 +5280,8 @@
   -webkit-box-shadow: var(--sapContent_HeaderShadow);
           box-shadow: var(--sapContent_HeaderShadow);
   z-index: 1;
+  font-family: var(--fdBar_Header_Font_Family);
+  color: var(--fdBar_Header_Color);
 }
 .fd-bar--subheader {
   height: 2.25rem;
@@ -20815,7 +20845,7 @@
 }
 .fd-list--dropdown, .fd-list--multi-input {
   display: block;
-  min-width: 7rem;
+  min-width: 5rem;
   max-width: 40rem;
 }
 .fd-list--dropdown .fd-list__item, .fd-list--multi-input .fd-list__item {
@@ -20833,6 +20863,7 @@
   -webkit-box-flex: 1;
       -ms-flex: auto;
           flex: auto;
+  width: auto;
 }
 .fd-list--dropdown .fd-list__title--no-wrap,
 .fd-list--dropdown .fd-list__secondary--no-wrap, .fd-list--multi-input .fd-list__title--no-wrap,
@@ -20840,12 +20871,8 @@
   white-space: nowrap;
 }
 .fd-list--dropdown .fd-list__secondary, .fd-list--multi-input .fd-list__secondary {
-  width: auto;
   display: block;
 }
-.fd-list--dropdown .fd-list__title, .fd-list--multi-input .fd-list__title {
-  width: auto;
-}
 .fd-list--dropdown .fd-list__title, .fd-list--multi-input .fd-list__title {
   max-width: 24rem;
 }
@@ -22768,7 +22795,7 @@
   text-rendering: optimizeLegibility;
 }
 .fd-message-strip--warning::before {
-  content: "\e201";
+  content: "\e053";
 }
 [dir=rtl] .fd-message-strip--warning::before, .fd-message-strip--warning[dir=rtl]::before {
   display: none;
@@ -22781,7 +22808,7 @@
   text-rendering: optimizeLegibility;
 }
 [dir=rtl] .fd-message-strip--warning::after, .fd-message-strip--warning[dir=rtl]::after {
-  content: "\e201";
+  content: "\e053";
 }
 .fd-message-strip--error {
   background-color: var(--sapErrorBackground);
@@ -22798,7 +22825,7 @@
   text-rendering: optimizeLegibility;
 }
 .fd-message-strip--error::before {
-  content: "\e0b1";
+  content: "\e1ec";
 }
 [dir=rtl] .fd-message-strip--error::after, .fd-message-strip--error[dir=rtl]::after {
   font-family: "SAP-icons";
@@ -22808,7 +22835,7 @@
   text-rendering: optimizeLegibility;
 }
 [dir=rtl] .fd-message-strip--error::after, .fd-message-strip--error[dir=rtl]::after {
-  content: "\e0b1";
+  content: "\e1ec";
 }
 .fd-message-strip--success {
   background-color: var(--sapSuccessBackground);
@@ -22825,7 +22852,7 @@
   text-rendering: optimizeLegibility;
 }
 .fd-message-strip--success::before {
-  content: "\e203";
+  content: "\e1c1";
 }
 [dir=rtl] .fd-message-strip--success::after, .fd-message-strip--success[dir=rtl]::after {
   font-family: "SAP-icons";
@@ -22835,7 +22862,7 @@
   text-rendering: optimizeLegibility;
 }
 [dir=rtl] .fd-message-strip--success::after, .fd-message-strip--success[dir=rtl]::after {
-  content: "\e203";
+  content: "\e1c1";
 }
 .fd-message-strip--information {
   background-color: var(--sapInformationBackground);
@@ -22852,7 +22879,7 @@
   text-rendering: optimizeLegibility;
 }
 .fd-message-strip--information::before {
-  content: "\e202";
+  content: "\e289";
 }
 [dir=rtl] .fd-message-strip--information::after, .fd-message-strip--information[dir=rtl]::after {
   font-family: "SAP-icons";
@@ -22862,7 +22889,7 @@
   text-rendering: optimizeLegibility;
 }
 [dir=rtl] .fd-message-strip--information::after, .fd-message-strip--information[dir=rtl]::after {
-  content: "\e202";
+  content: "\e289";
 }
 .fd-message-strip--no-icon {
   padding-left: 1rem;
@@ -25226,7 +25253,7 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-list--dropdown, .fd-list--multi-input {
   display: block;
-  min-width: 7rem;
+  min-width: 5rem;
   max-width: 40rem;
 }
 .fd-list--dropdown .fd-list__item, .fd-list--multi-input .fd-list__item {
@@ -25244,6 +25271,7 @@ places the element far left of the screen. so it is not visible.
   -webkit-box-flex: 1;
       -ms-flex: auto;
           flex: auto;
+  width: auto;
 }
 .fd-list--dropdown .fd-list__title--no-wrap,
 .fd-list--dropdown .fd-list__secondary--no-wrap, .fd-list--multi-input .fd-list__title--no-wrap,
@@ -25251,12 +25279,8 @@ places the element far left of the screen. so it is not visible.
   white-space: nowrap;
 }
 .fd-list--dropdown .fd-list__secondary, .fd-list--multi-input .fd-list__secondary {
-  width: auto;
   display: block;
 }
-.fd-list--dropdown .fd-list__title, .fd-list--multi-input .fd-list__title {
-  width: auto;
-}
 .fd-list--dropdown .fd-list__title, .fd-list--multi-input .fd-list__title {
   max-width: 24rem;
 }
@@ -38759,13 +38783,12 @@ places the element far left of the screen. so it is not visible.
           box-shadow: var(--fdToken_Box_Shadow_Hover);
 }
 .fd-token:focus, .fd-token.is-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);
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .fd-token--compact {
   padding: 0.1rem 0 0.1rem 0.25rem;
@@ -38785,38 +38808,16 @@ places the element far left of the screen. so it is not visible.
   padding-right: 0.25rem;
 }
 .fd-token--compact:focus, .fd-token--compact.is-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);
-  border-color: var(--sapButton_Selected_BorderColor);
-}
-.fd-token--selected .fd-token__close {
-  color: var(--sapButton_Selected_TextColor);
-}
-.fd-token--selected:hover {
-  background-color: var(--sapButton_Selected_Hover_Background);
-  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:focus, .fd-token--selected.is-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-color: var(--fdToken_Border_Color_Selected_Focus);
+  outline-offset: var(--fdToken_Outline_Offset_Compact);
+}
+.fd-token--disabled {
+  cursor: not-allowed;
 }
 .fd-token--readonly {
   color: var(--sapContent_LabelColor);
@@ -38840,6 +38841,29 @@ places the element far left of the screen. so it is not visible.
 [dir=rtl] .fd-token--readonly, .fd-token--readonly[dir=rtl] {
   padding-left: 0.375rem;
 }
+.fd-token.fd-token--selected {
+  color: var(--sapButton_Selected_TextColor);
+  background-color: var(--sapButton_Selected_Background);
+  border-color: var(--sapButton_Selected_BorderColor);
+}
+.fd-token.fd-token--selected .fd-token__close {
+  color: var(--sapButton_Selected_TextColor);
+}
+.fd-token.fd-token--selected:hover, .fd-token.fd-token--selected.is-hover {
+  background-color: var(--sapButton_Selected_Hover_Background);
+  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.fd-token--selected:focus, .fd-token.fd-token--selected.is-focus {
+  outline-offset: var(--fdToken_Outline_Offset);
+  outline-width: var(--sapContent_FocusWidth);
+  outline-color: var(--sapContent_FocusColor);
+  outline-style: var(--sapContent_FocusStyle);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  outline-color: var(--fdToken_Border_Color_Selected_Focus);
+}
 /* Fully expanded pseudo element. Requires parent to have specified position */
 /* stylelint-disable */
 /* stylelint-enable */

package/package.json

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