@fundamental-styles/theming-preview 0.24.0-rc.72 → 0.24.0-rc.75

package/fundamental-styles.css

@@ -1,7 +1,7 @@
 
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.72
+ * Fundamental Library Styles v0.24.0-rc.75
  * 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)
  */
@@ -6754,41 +6754,59 @@
                 .fd-calendar__text
 */
 .fd-calendar .fd-calendar__item {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
   overflow: hidden;
   position: relative;
   height: 2.75rem;
   margin: 0.0625rem;
   min-width: 2.125rem;
-  border-radius: var(--fdCalendar_BorderCornerRadius);
+  border-radius: var(--fdCalendar_Border_Radius);
   background-color: var(--sapLegend_WorkingBackground);
   -webkit-box-flex: 1;
       -ms-flex: 1 1 0.375rem;
           flex: 1 1 0.375rem;
   cursor: pointer;
 }
-.fd-calendar .fd-calendar__item--side-helper {
+.fd-calendar .fd-calendar__item::before, .fd-calendar .fd-calendar__item::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
+}
+.fd-calendar .fd-calendar__item:hover, .fd-calendar .is-hover.fd-calendar__item {
+  background-color: var(--sapList_Hover_Background);
+}
+.fd-calendar__content--dates .fd-calendar__item--side-helper {
   -ms-flex-item-align: center;
       align-self: center;
   pointer-events: none;
   height: 1.875rem;
   background-color: var(--sapList_Background);
 }
-.fd-calendar .fd-calendar__item--other-month {
+.fd-calendar__content--dates .fd-calendar__item--other-month {
   background-color: var(--sapList_Background);
 }
-.fd-calendar .fd-calendar__item--other-month:hover, .fd-calendar .is-hover.fd-calendar__item--other-month {
+.fd-calendar__content--dates .fd-calendar__item--other-month:hover, .fd-calendar__content--dates .is-hover.fd-calendar__item--other-month {
   background-color: var(--sapList_Hover_Background);
 }
-.fd-calendar .fd-calendar__item--weekend {
+.fd-calendar__content--dates .fd-calendar__item--weekend {
   background-color: var(--sapLegend_NonWorkingBackground);
 }
-.fd-calendar .fd-calendar__item--weekend:hover, .fd-calendar .is-hover.fd-calendar__item--weekend {
+.fd-calendar__content--dates .fd-calendar__item--weekend:hover, .fd-calendar__content--dates .is-hover.fd-calendar__item--weekend {
   background-color: var(--sapList_Hover_Background);
 }
-.fd-calendar .fd-calendar__item--range.fd-calendar__item--current, .fd-calendar .fd-calendar__item--current {
+.fd-calendar .fd-calendar__item--current, .fd-calendar__content--dates .fd-calendar__item--range.fd-calendar__item--current {
   border: solid medium var(--sapLegend_CurrentDateTime) !important;
 }
-.fd-calendar .fd-calendar__item--current:active::after, .fd-calendar .is-active.fd-calendar__item--current::after {
+.fd-calendar .fd-calendar__item--current:active::after, .fd-calendar__content--dates .fd-calendar__item--range.fd-calendar__item--current:active::after, .fd-calendar .is-active.fd-calendar__item--current::after, .fd-calendar__content--dates .is-active.fd-calendar__item--range.fd-calendar__item--current::after {
   border: var(--fdCalendar_Active_Item_Border);
   content: " ";
   position: absolute;
@@ -6797,41 +6815,41 @@
   right: auto;
   width: calc(100% - 0.125rem);
   height: calc(100% - 0.125rem);
-  border-radius: calc(var(--fdCalendar_BorderCornerRadius) / 2);
+  border-radius: calc(var(--fdCalendar_Border_Radius) / 2);
 }
-[dir=rtl] .fd-calendar .fd-calendar__item--current:active::after, .fd-calendar [dir=rtl] .fd-calendar__item--current:active::after, .fd-calendar .fd-calendar__item--current:active::after[dir=rtl], [dir=rtl] .fd-calendar .is-active.fd-calendar__item--current::after, .fd-calendar [dir=rtl] .is-active.fd-calendar__item--current::after, .fd-calendar .is-active.fd-calendar__item--current::after[dir=rtl] {
+[dir=rtl] .fd-calendar .fd-calendar__item--current:active::after, .fd-calendar [dir=rtl] .fd-calendar__item--current:active::after, [dir=rtl] .fd-calendar__content--dates .fd-calendar__item--range.fd-calendar__item--current:active::after, .fd-calendar__content--dates [dir=rtl] .fd-calendar__item--range.fd-calendar__item--current:active::after, .fd-calendar .fd-calendar__item--current:active::after[dir=rtl], .fd-calendar__content--dates .fd-calendar__item--range.fd-calendar__item--current:active::after[dir=rtl], [dir=rtl] .fd-calendar .is-active.fd-calendar__item--current::after, .fd-calendar [dir=rtl] .is-active.fd-calendar__item--current::after, [dir=rtl] .fd-calendar__content--dates .is-active.fd-calendar__item--range.fd-calendar__item--current::after, .fd-calendar__content--dates [dir=rtl] .is-active.fd-calendar__item--range.fd-calendar__item--current::after, .fd-calendar .is-active.fd-calendar__item--current::after[dir=rtl], .fd-calendar__content--dates .is-active.fd-calendar__item--range.fd-calendar__item--current::after[dir=rtl] {
   left: auto;
   right: 0.0625rem;
 }
-.fd-calendar .fd-calendar__item:active, .fd-calendar .fd-calendar__item.is-active {
+.fd-calendar__content--dates .fd-calendar__item:active, .fd-calendar__content--dates .fd-calendar__item.is-active {
   background-color: var(--sapContent_Selected_Background);
   border: var(--fdCalendar_Active_Item_Border);
   font-weight: var(--fdCalendar_Active_Item_Font_Weight);
 }
-.fd-calendar .fd-calendar__item:hover:active, .fd-calendar .fd-calendar__item.is-active:hover, .fd-calendar .is-hover.fd-calendar__item:active, .fd-calendar .is-hover.fd-calendar__item.is-active {
+.fd-calendar__content--dates .fd-calendar__item:hover:active, .fd-calendar__content--dates .fd-calendar__item.is-active:hover, .fd-calendar__content--dates .is-hover.fd-calendar__item:active, .fd-calendar__content--dates .is-hover.fd-calendar__item.is-active {
   background-color: var(--fdCalendar_Item_Active_Background_Hover);
 }
-.fd-calendar .fd-calendar__item:focus:active, .fd-calendar .fd-calendar__item.is-active:focus, .fd-calendar .is-focus.fd-calendar__item:active, .fd-calendar .is-focus.fd-calendar__item.is-active {
+.fd-calendar__content--dates .fd-calendar__item:focus:active, .fd-calendar__content--dates .fd-calendar__item.is-active:focus, .fd-calendar__content--dates .is-focus.fd-calendar__item:active, .fd-calendar__content--dates .is-focus.fd-calendar__item.is-active {
   z-index: 5;
   -webkit-box-shadow: none;
           box-shadow: none;
   outline-color: var(--fdCalendar_Active_Focus_Item_Outline_Color);
 }
-.fd-calendar .fd-calendar__item--range {
+.fd-calendar__content--dates .fd-calendar__item--range {
   border: solid 0.0625rem var(--sapList_SelectionBorderColor);
   background-color: var(--sapList_SelectionBackgroundColor);
 }
-.fd-calendar .fd-calendar__item--range:hover, .fd-calendar .is-hover.fd-calendar__item--range {
+.fd-calendar__content--dates .fd-calendar__item--range:hover, .fd-calendar__content--dates .is-hover.fd-calendar__item--range {
   background-color: var(--sapList_Hover_SelectionBackground);
 }
-.fd-calendar__item[aria-disabled=true], .fd-calendar__item.is-disabled, .fd-calendar__item:disabled {
+.fd-calendar__content--dates .fd-calendar__item[aria-disabled=true], .fd-calendar__content--dates .fd-calendar__item.is-disabled, .fd-calendar__content--dates .fd-calendar__item:disabled {
   pointer-events: none;
   opacity: 0.4;
 }
-.fd-calendar__item[aria-disabled=true]:hover, .fd-calendar__item.is-disabled:hover, .fd-calendar__item:hover:disabled {
+.fd-calendar__content--dates .fd-calendar__item[aria-disabled=true]:hover, .fd-calendar__content--dates .fd-calendar__item.is-disabled:hover, .fd-calendar__content--dates .fd-calendar__item:hover:disabled {
   cursor: not-allowed;
 }
-.fd-calendar__item:focus, .fd-calendar__item.is-focus {
+.fd-calendar__content--dates .fd-calendar__item:focus, .fd-calendar__content--dates .fd-calendar__item.is-focus {
   -webkit-box-shadow: none;
           box-shadow: none;
   outline-offset: -0.1875rem;
@@ -6881,7 +6899,7 @@
   width: 20rem;
   padding: 1rem;
   background-color: var(--sapList_Background);
-  border-radius: var(--fdCalendar_BorderCornerRadius);
+  border-radius: var(--fdCalendar_Border_Radius);
 }
 .fd-calendar::before, .fd-calendar::after {
   -webkit-box-sizing: inherit;
@@ -7021,11 +7039,24 @@
   border: none;
   -webkit-box-shadow: none;
           box-shadow: none;
-  border-radius: 0;
+  border-radius: var(--fdCalendar_Month_Year_Item_Border_Radius);
 }
 .fd-calendar__content--years .fd-calendar__item .fd-calendar__text, .fd-calendar__content--months .fd-calendar__item .fd-calendar__text {
   color: inherit;
 }
+.fd-calendar__content--dates .fd-calendar__item:focus, .fd-calendar__content--dates .fd-calendar__item.is-focus {
+  z-index: 5;
+}
+.fd-calendar__content--dates .fd-calendar__item:active .fd-calendar__text, .fd-calendar__content--dates .fd-calendar__item.is-active .fd-calendar__text {
+  color: var(--sapContent_Selected_TextColor);
+}
+.fd-calendar__content--dates .fd-calendar__item--side-helper .fd-calendar__text {
+  color: var(--sapContent_LabelColor);
+  font-size: var(--sapFontSmallSize);
+}
+.fd-calendar__content--dates .fd-calendar__item--other-month .fd-calendar__text {
+  color: var(--sapContent_LabelColor);
+}
 .fd-calendar__content--screen-reader-only {
   position: absolute;
   clip: rect(0 0 0 0);
@@ -7095,42 +7126,9 @@
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-calendar__item {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-.fd-calendar__item::before, .fd-calendar__item::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
-}
-.fd-calendar__item:hover, .fd-calendar__item.is-hover {
-  background-color: var(--sapList_Hover_Background);
-}
-.fd-calendar__item:focus, .fd-calendar__item.is-focus {
-  z-index: 5;
-}
 .fd-calendar .fd-calendar__item {
   display: inline-block;
 }
-.fd-calendar .fd-calendar__item:active .fd-calendar__text, .fd-calendar .fd-calendar__item.is-active .fd-calendar__text {
-  color: var(--sapContent_Selected_TextColor);
-}
-.fd-calendar .fd-calendar__item--side-helper .fd-calendar__text {
-  color: var(--sapContent_LabelColor);
-  font-size: var(--sapFontSmallSize);
-}
-.fd-calendar .fd-calendar__item--other-month .fd-calendar__text {
-  color: var(--sapContent_LabelColor);
-}
 .fd-calendar .fd-calendar__item--current .fd-calendar__text::before {
   content: "";
   position: absolute;
@@ -9997,7 +9995,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--fdDynamicPage_Title_Collapsed_Font_Size);
+  color: var(--fdDynamicPage_Subtitle_Color);
   font-size: var(--sapFontSize);
   margin-top: 0.25rem;
 }
@@ -10888,7 +10886,7 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
-  background-color: var(--sapField_Background);
+  background-color: var(--fdFeed_List_Item_Background);
   max-width: 40rem;
 }
 .fd-feed-list::before, .fd-feed-list::after {
@@ -10944,7 +10942,10 @@
   font-size: inherit;
 }
 .fd-feed-list__body + .fd-feed-list__body {
-  border-top: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
+  border-top: var(--fdFeed_List_Item_Border_Top);
+}
+.fd-feed-list__body + .fd-feed-list__body:last-child {
+  border-bottom: var(--fdFeed_List_Item_Border_Bottom);
 }
 .fd-feed-list--no-border .fd-feed-list__body {
   padding: 1rem 1rem 0.75rem;
@@ -10956,9 +10957,10 @@
 }
 .fd-feed-list--no-border .fd-feed-list__body:last-child {
   padding-bottom: 1rem;
+  border-bottom: none;
 }
 .fd-feed-list__link--more {
-  text-transform: uppercase;
+  text-transform: var(--fdFeed_List_Item_More_Transform);
   cursor: pointer;
 }
 .fd-feed-list__actions {
@@ -11060,7 +11062,7 @@
   font-size: inherit;
 }
 .fd-feed-list__footer--byline {
-  color: var(--sapNeutralTextColor);
+  color: var(--fdFeed_List_Item_Byline_Text_Color);
 }
 .fd-feed-list__footer--byline:not(:last-child)::after {
   content: "•";
@@ -11119,6 +11121,13 @@
           box-sizing: inherit;
   font-size: inherit;
 }
+.fd-feed-list--s .fd-feed-list__action > .fd-button {
+  padding-left: var(--fdFeed_List_Mobile_Actions_Button_Padding_X);
+  padding-right: var(--fdFeed_List_Mobile_Actions_Button_Padding_X);
+  height: var(--fdFeed_List_Mobile_Actions_Button_Padding_Height);
+  max-height: var(--fdFeed_List_Mobile_Actions_Button_Padding_Height);
+  min-width: var(--fdFeed_List_Mobile_Actions_Button_Padding_Width);
+}
 [dir=rtl] .fd-feed-list--s .fd-feed-list__action, .fd-feed-list--s .fd-feed-list__action[dir=rtl] {
   padding-right: 0.75rem;
   padding-bottom: initial;
@@ -34588,24 +34597,18 @@ places the element far left of the screen. so it is not visible.
   pointer-events: none;
   opacity: var(--sapContent_DisabledOpacity);
 }
-.fd-switch__input:focus + .fd-switch__slider {
-  outline-offset: 0.125rem;
-  outline-width: 0.125rem;
-  outline-style: solid;
-  outline-color: var(--fdSwitch_Focus_Outline_Color);
-}
 .fd-switch__input:focus + .fd-switch__slider::before {
   position: absolute;
-  display: var(--fdSwitch_Focus_Border_Display);
-  outline-offset: -0.0625rem;
+  display: block;
   border-width: var(--sapContent_FocusWidth);
   border-color: var(--sapContent_FocusColor);
   border-style: var(--sapContent_FocusStyle);
   content: "";
   top: var(--fdSwitch_Focus_Outline_Vertical_Offset);
   bottom: var(--fdSwitch_Focus_Outline_Vertical_Offset);
-  left: 0;
-  right: 0;
+  left: var(--fdSwitch_Focus_Outline_Horizontal_Offset);
+  right: var(--fdSwitch_Focus_Outline_Horizontal_Offset);
+  border-radius: var(--fdSwitch_Focus_Outline_Border_Radius);
 }
 .fd-switch__input:checked + .fd-switch__slider {
   background-color: var(--sapButton_Track_Selected_Background);

package/package.json

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