@fundamental-styles/theming-preview 0.24.0-rc.41 → 0.24.0-rc.44

package/fundamental-styles.css

@@ -1,7 +1,7 @@
 
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.41
+ * Fundamental Library Styles v0.24.0-rc.44
  * 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)
  */
@@ -22030,7 +22030,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   list-style: none;
   -webkit-box-shadow: var(--sapContent_Shadow1);
           box-shadow: var(--sapContent_Shadow1);
-  border-radius: var(--sapElement_BorderCornerRadius);
+  border-radius: var(--fdButton_Menu_Border_Radius);
 }
 .fd-menu__list::before, .fd-menu__list::after, .fd-menu__sublist::before, .fd-menu__sublist::after {
   -webkit-box-sizing: inherit;
@@ -22122,12 +22122,12 @@ fd-carousel:focus, fd-carousel.is-focus {
   font-size: inherit;
 }
 .fd-menu__item:first-child {
-  border-top-right-radius: var(--sapElement_BorderCornerRadius);
-  border-top-left-radius: var(--sapElement_BorderCornerRadius);
+  border-top-right-radius: var(--fdButton_Menu_Border_Radius);
+  border-top-left-radius: var(--fdButton_Menu_Border_Radius);
 }
 .fd-menu__item:last-child {
-  border-bottom-right-radius: var(--sapElement_BorderCornerRadius);
-  border-bottom-left-radius: var(--sapElement_BorderCornerRadius);
+  border-bottom-right-radius: var(--fdButton_Menu_Border_Radius);
+  border-bottom-left-radius: var(--fdButton_Menu_Border_Radius);
 }
 .fd-menu__link {
   font-size: var(--sapFontSize);
@@ -22355,7 +22355,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   overflow-y: scroll;
   -webkit-box-shadow: var(--sapContent_Shadow1);
           box-shadow: var(--sapContent_Shadow1);
-  border-radius: var(--sapElement_BorderCornerRadius);
+  border-radius: var(--fdButton_Menu_Border_Radius);
 }
 .fd-menu--full-width {
   max-width: 100%;
@@ -35033,6 +35033,8 @@ places the element far left of the screen. so it is not visible.
   width: 100%;
   max-width: 100%;
   border-collapse: collapse;
+  border-bottom-left-radius: var(--fdTable_Border_Radius);
+  border-bottom-right-radius: var(--fdTable_Border_Radius);
   /****** Elements ******/
   /****** Modifiers ******/
 }
@@ -35085,17 +35087,26 @@ places the element far left of the screen. so it is not visible.
   border-left: var(--sapList_BorderWidth) solid var(--sapList_TableFixedBorderColor);
 }
 .fd-table__header {
-  border-top: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
+  border-top: var(--fdTable_Header_Border_Top);
   border-left: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
   border-right: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
 }
 .fd-table__header .fd-table__row {
-  border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
+  border-bottom: var(--fdTable_Header_Border_Bottom);
 }
 .fd-table__header .fd-table__cell {
   height: 2.75rem;
   background-color: var(--sapList_HeaderBackground);
   color: var(--sapList_HeaderTextColor);
+  font-weight: var(--fdTable_Header_Cell_Font_Weight);
+}
+.fd-table__header .fd-table__cell:hover, .fd-table__header .fd-table__cell.is-hover {
+  background-color: var(--fdTable_Header_Cell_Hover_Background);
+  color: var(--fdTable_Header_Cell_Hover_Active_Color);
+}
+.fd-table__header .fd-table__cell:active, .fd-table__header .fd-table__cell.is-active {
+  background-color: var(--fdTable_Header_Cell_Active_Background);
+  color: var(--fdTable_Header_Cell_Hover_Active_Color);
 }
 .fd-table__header .fd-table__cell--fixed {
   margin-top: -0.0625rem;
@@ -35286,7 +35297,7 @@ places the element far left of the screen. so it is not visible.
   color: var(--sapList_Active_TextColor);
 }
 .fd-table__cell--activable:active .fd-table__cell, .fd-table__cell--activable.is-active .fd-table__cell, .fd-table__row--activable:active .fd-table__cell, .fd-table__row--activable.is-active .fd-table__cell {
-  border-bottom-color: var(--sapList_SelectionBorderColor);
+  border-bottom-color: var(--fdTable_Cell_Active_Border_Bottom_Color);
 }
 .fd-table__cell--activable:active .fd-table__cell:hover, .fd-table__cell--activable:active .fd-table__cell.is-hover, .fd-table__cell--activable.is-active .fd-table__cell:hover, .fd-table__cell--activable.is-active .fd-table__cell.is-hover, .fd-table__row--activable:active .fd-table__cell:hover, .fd-table__row--activable:active .fd-table__cell.is-hover, .fd-table__row--activable.is-active .fd-table__cell:hover, .fd-table__row--activable.is-active .fd-table__cell.is-hover {
   background-color: var(--sapList_Active_Background);
@@ -35323,7 +35334,7 @@ places the element far left of the screen. so it is not visible.
   color: var(--sapList_Active_TextColor);
 }
 .fd-table__cell--activable[aria-selected=true]:active .fd-table__cell, .fd-table__cell--activable[aria-selected=true].is-active .fd-table__cell, .fd-table__cell--activable.is-selected:active .fd-table__cell, .fd-table__cell--activable.is-selected.is-active .fd-table__cell, .fd-table__row--activable[aria-selected=true]:active .fd-table__cell, .fd-table__row--activable[aria-selected=true].is-active .fd-table__cell, .fd-table__row--activable.is-selected:active .fd-table__cell, .fd-table__row--activable.is-selected.is-active .fd-table__cell {
-  border-bottom-color: var(--sapList_SelectionBorderColor);
+  border-bottom-color: var(--fdTable_Cell_Active_Border_Bottom_Color);
 }
 .fd-table__cell--activable[aria-selected=true]:active .fd-table__cell:hover, .fd-table__cell--activable[aria-selected=true]:active .fd-table__cell.is-hover, .fd-table__cell--activable[aria-selected=true].is-active .fd-table__cell:hover, .fd-table__cell--activable[aria-selected=true].is-active .fd-table__cell.is-hover, .fd-table__cell--activable.is-selected:active .fd-table__cell:hover, .fd-table__cell--activable.is-selected:active .fd-table__cell.is-hover, .fd-table__cell--activable.is-selected.is-active .fd-table__cell:hover, .fd-table__cell--activable.is-selected.is-active .fd-table__cell.is-hover, .fd-table__row--activable[aria-selected=true]:active .fd-table__cell:hover, .fd-table__row--activable[aria-selected=true]:active .fd-table__cell.is-hover, .fd-table__row--activable[aria-selected=true].is-active .fd-table__cell:hover, .fd-table__row--activable[aria-selected=true].is-active .fd-table__cell.is-hover, .fd-table__row--activable.is-selected:active .fd-table__cell:hover, .fd-table__row--activable.is-selected:active .fd-table__cell.is-hover, .fd-table__row--activable.is-selected.is-active .fd-table__cell:hover, .fd-table__row--activable.is-selected.is-active .fd-table__cell.is-hover {
   background-color: var(--sapList_Active_Background);
@@ -35502,7 +35513,7 @@ places the element far left of the screen. so it is not visible.
   color: var(--sapList_Active_TextColor);
 }
 .fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover):active + .fd-table__row--secondary .fd-table__cell, .fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover).is-active + .fd-table__row--secondary .fd-table__cell {
-  border-bottom-color: var(--sapList_SelectionBorderColor);
+  border-bottom-color: var(--fdTable_Cell_Active_Border_Bottom_Color);
 }
 .fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover):active + .fd-table__row--secondary .fd-table__cell:hover, .fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover):active + .fd-table__row--secondary .fd-table__cell.is-hover, .fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover).is-active + .fd-table__row--secondary .fd-table__cell:hover, .fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover).is-active + .fd-table__row--secondary .fd-table__cell.is-hover {
   background-color: var(--sapList_Active_Background);
@@ -35573,6 +35584,18 @@ places the element far left of the screen. so it is not visible.
   margin-top: -0.25rem;
   position: absolute;
 }
+.fd-table--condensed .fd-table__body .fd-table__cell--focusable:focus, .fd-table--condensed .fd-table__body .fd-table__cell--focusable.is-focus,
+.fd-table--condensed .fd-table__body .fd-table__row--focusable:focus,
+.fd-table--condensed .fd-table__body .fd-table__row--focusable.is-focus,
+.fd-table--condensed .fd-table__footer .fd-table__cell--focusable:focus,
+.fd-table--condensed .fd-table__footer .fd-table__cell--focusable.is-focus,
+.fd-table--condensed .fd-table__footer .fd-table__row--focusable:focus,
+.fd-table--condensed .fd-table__footer .fd-table__row--focusable.is-focus {
+  outline-offset: var(--fdTable_Condensed_Focus_Outline_Offset);
+  outline-width: var(--sapContent_FocusWidth);
+  outline-color: var(--sapContent_FocusColor);
+  outline-style: var(--sapContent_FocusStyle);
+}
 .fd-table--condensed.fd-table--tree .fd-table__body .fd-table__cell .fd-table__expand, .fd-table--condensed.fd-table--group .fd-table__body .fd-table__cell .fd-table__expand {
   height: 1.5rem;
 }
@@ -35869,7 +35892,10 @@ places the element far left of the screen. so it is not visible.
   width: 2rem;
 }
 .fd-table--group .fd-table__body .fd-table__cell--group {
-  background-color: var(--sapList_HeaderBackground);
+  background-color: var(--fdTable_Group_Header_Background);
+  border-bottom-color: var(--fdTable_Group_Header_Border_Color);
+  border-top-color: var(--fdTable_Group_Header_Border_Color);
+  font-weight: var(--fdTable_Header_Cell_Font_Weight);
 }
 .fd-table--tree .fd-table__body .fd-table__cell[data-nesting-level="1"], .fd-table--group .fd-table__body .fd-table__cell[data-nesting-level="1"] {
   padding-left: 2.75rem;

package/package.json

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