@fundamental-styles/theming-preview 0.23.0-rc.4 → 0.23.0-rc.7

package/fundamental-styles.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.23.0-rc.4
+ * Fundamental Library Styles v0.23.0-rc.7
  * 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)
  */
@@ -85,6 +85,12 @@
 [class*=sap-icon].sap-icon--background-positive::before {
   background-color: var(--sapPositiveElementColor)
 }
+[class*=sap-icon].sap-icon--color-information {
+  color: var(--sapInformativeElementColor)
+}
+[class*=sap-icon].sap-icon--background-information::before {
+  background-color: var(--sapInformativeElementColor)
+}
 [class*=sap-icon].is-focus,
 [class*=sap-icon]:focus {
   outline-width: var(--sapContent_FocusWidth);
@@ -148,6 +154,12 @@
 [class*=sap-icon-businessSuiteInAppSymbols].sap-icon-businessSuiteInAppSymbols--background-positive::before {
   background-color: var(--sapPositiveElementColor)
 }
+[class*=sap-icon-businessSuiteInAppSymbols].sap-icon-businessSuiteInAppSymbols--color-information {
+  color: var(--sapInformativeElementColor)
+}
+[class*=sap-icon-businessSuiteInAppSymbols].sap-icon-businessSuiteInAppSymbols--background-information::before {
+  background-color: var(--sapInformativeElementColor)
+}
 [class*=sap-icon-TNT]::before {
   font-family: SAP-icons-TNT
 }
@@ -205,6 +217,12 @@
 [class*=sap-icon-TNT].sap-icon-TNT--background-positive::before {
   background-color: var(--sapPositiveElementColor)
 }
+[class*=sap-icon-TNT].sap-icon-TNT--color-information {
+  color: var(--sapInformativeElementColor)
+}
+[class*=sap-icon-TNT].sap-icon-TNT--background-information::before {
+  background-color: var(--sapInformativeElementColor)
+}
 .sap-icon--accidental-leave::before {
   content: "\e000"
 }
@@ -4061,44 +4079,54 @@
   border: .0625rem solid var(--sapGroup_ContentBorderColor)
 }
 .fd-avatar--accent-color-1 {
-  background-color: var(--sapAccentColor1);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_1);
+  color: var(--fdAvatar_Accent_Color_1_Text);
+  border: var(--fdAvatar_Accent_Color_1_Border)
 }
 .fd-avatar--accent-color-2 {
-  background-color: var(--sapAccentColor2);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_2);
+  color: var(--fdAvatar_Accent_Color_2_Text);
+  border: var(--fdAvatar_Accent_Color_2_Border)
 }
 .fd-avatar--accent-color-3 {
-  background-color: var(--sapAccentColor3);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_3);
+  color: var(--fdAvatar_Accent_Color_3_Text);
+  border: var(--fdAvatar_Accent_Color_3_Border)
 }
 .fd-avatar--accent-color-4 {
-  background-color: var(--sapAccentColor4);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_4);
+  color: var(--fdAvatar_Accent_Color_4_Text);
+  border: var(--fdAvatar_Accent_Color_4_Border)
 }
 .fd-avatar--accent-color-5 {
-  background-color: var(--sapAccentColor5);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_5);
+  color: var(--fdAvatar_Accent_Color_5_Text);
+  border: var(--fdAvatar_Accent_Color_5_Border)
 }
 .fd-avatar--accent-color-6 {
-  background-color: var(--sapAccentColor6);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_6);
+  color: var(--fdAvatar_Accent_Color_6_Text);
+  border: var(--fdAvatar_Accent_Color_6_Border)
 }
 .fd-avatar--accent-color-7 {
-  background-color: var(--sapAccentColor7);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_7);
+  color: var(--fdAvatar_Accent_Color_7_Text);
+  border: var(--fdAvatar_Accent_Color_7_Border)
 }
 .fd-avatar--accent-color-8 {
-  background-color: var(--sapAccentColor8);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_8);
+  color: var(--fdAvatar_Accent_Color_8_Text);
+  border: var(--fdAvatar_Accent_Color_8_Border)
 }
 .fd-avatar--accent-color-9 {
-  background-color: var(--sapAccentColor9);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_9);
+  color: var(--fdAvatar_Accent_Color_9_Text);
+  border: var(--fdAvatar_Accent_Color_9_Border)
 }
 .fd-avatar--accent-color-10 {
-  background-color: var(--sapAccentColor10);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_10);
+  color: var(--fdAvatar_Accent_Color_10_Text);
+  border: var(--fdAvatar_Accent_Color_10_Border)
 }
 .fd-avatar--xs {
   padding: 0;
@@ -4411,44 +4439,54 @@
   border: .0625rem solid var(--sapGroup_ContentBorderColor)
 }
 .fd-avatar--accent-color-1 {
-  background-color: var(--sapAccentColor1);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_1);
+  color: var(--fdAvatar_Accent_Color_1_Text);
+  border: var(--fdAvatar_Accent_Color_1_Border)
 }
 .fd-avatar--accent-color-2 {
-  background-color: var(--sapAccentColor2);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_2);
+  color: var(--fdAvatar_Accent_Color_2_Text);
+  border: var(--fdAvatar_Accent_Color_2_Border)
 }
 .fd-avatar--accent-color-3 {
-  background-color: var(--sapAccentColor3);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_3);
+  color: var(--fdAvatar_Accent_Color_3_Text);
+  border: var(--fdAvatar_Accent_Color_3_Border)
 }
 .fd-avatar--accent-color-4 {
-  background-color: var(--sapAccentColor4);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_4);
+  color: var(--fdAvatar_Accent_Color_4_Text);
+  border: var(--fdAvatar_Accent_Color_4_Border)
 }
 .fd-avatar--accent-color-5 {
-  background-color: var(--sapAccentColor5);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_5);
+  color: var(--fdAvatar_Accent_Color_5_Text);
+  border: var(--fdAvatar_Accent_Color_5_Border)
 }
 .fd-avatar--accent-color-6 {
-  background-color: var(--sapAccentColor6);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_6);
+  color: var(--fdAvatar_Accent_Color_6_Text);
+  border: var(--fdAvatar_Accent_Color_6_Border)
 }
 .fd-avatar--accent-color-7 {
-  background-color: var(--sapAccentColor7);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_7);
+  color: var(--fdAvatar_Accent_Color_7_Text);
+  border: var(--fdAvatar_Accent_Color_7_Border)
 }
 .fd-avatar--accent-color-8 {
-  background-color: var(--sapAccentColor8);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_8);
+  color: var(--fdAvatar_Accent_Color_8_Text);
+  border: var(--fdAvatar_Accent_Color_8_Border)
 }
 .fd-avatar--accent-color-9 {
-  background-color: var(--sapAccentColor9);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_9);
+  color: var(--fdAvatar_Accent_Color_9_Text);
+  border: var(--fdAvatar_Accent_Color_9_Border)
 }
 .fd-avatar--accent-color-10 {
-  background-color: var(--sapAccentColor10);
-  color: var(--fdAvatar_Accent_Color)
+  background-color: var(--fdAvatar_Accent_Color_10);
+  color: var(--fdAvatar_Accent_Color_10_Text);
+  border: var(--fdAvatar_Accent_Color_10_Border)
 }
 .fd-avatar--xs {
   padding: 0;
@@ -5466,7 +5504,7 @@
   position: relative;
   display: block;
   font-size: 0;
-  color: var(--sapContent_IconColor);
+  color: var(--fdBusy_Indicator_Dot_Color);
   text-align: center
 }
 .fd-busy-indicator--l::after,
@@ -5482,7 +5520,7 @@
 .fd-busy-indicator--l.contrast,
 .fd-busy-indicator--m.contrast,
 .fd-busy-indicator.contrast {
-  color: var(--sapContent_ContrastIconColor)
+  color: var(--fdBusy_Indicator_Dot_Contrast_Color)
 }
 .fd-busy-indicator--l.contrast .fd-busy-indicator--circle-0,
 .fd-busy-indicator--l.contrast .fd-busy-indicator--circle-1,
@@ -5493,7 +5531,7 @@
 .fd-busy-indicator.contrast .fd-busy-indicator--circle-0,
 .fd-busy-indicator.contrast .fd-busy-indicator--circle-1,
 .fd-busy-indicator.contrast .fd-busy-indicator--circle-2 {
-  color: var(--sapContent_ContrastIconColor)
+  color: var(--fdBusy_Indicator_Dot_Contrast_Color)
 }
 .fd-busy-indicator--circle-0,
 .fd-busy-indicator--circle-1,
@@ -5508,7 +5546,7 @@
   padding: 0;
   margin: 0;
   border: 0;
-  color: var(--sapContent_IconColor);
+  color: var(--fdBusy_Indicator_Dot_Color);
   position: relative;
   width: .5rem;
   height: .5rem;
@@ -29254,11 +29292,11 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-popover__body[dir=rtl]::before,
 [dir=rtl] .fd-popover__body::before {
-  right: .5rem
+  right: .65rem
 }
 .fd-popover__body[dir=rtl]::after,
 [dir=rtl] .fd-popover__body::after {
-  right: .5rem
+  right: .65rem
 }
 .fd-popover__body::before {
   height: 0;
@@ -29271,7 +29309,7 @@ places the element far left of the screen. so it is not visible.
   content: "";
   position: absolute;
   top: calc(-.5rem + 1px);
-  left: .5rem;
+  left: .65rem;
   z-index: 1002
 }
 .fd-popover__body::after {
@@ -29285,7 +29323,7 @@ places the element far left of the screen. so it is not visible.
   content: "";
   position: absolute;
   top: -.5rem;
-  left: .5rem;
+  left: .65rem;
   z-index: 1001
 }
 .fd-popover__body > :not(.fd-popover__wrapper) {
@@ -29320,12 +29358,12 @@ places the element far left of the screen. so it is not visible.
 .fd-popover__body--left[dir=rtl]::before,
 [dir=rtl] .fd-popover__body--left::after,
 [dir=rtl] .fd-popover__body--left::before {
-  right: .5rem;
+  right: .65rem;
   left: unset
 }
 .fd-popover__body--left::after,
 .fd-popover__body--left::before {
-  left: .5rem
+  left: .65rem
 }
 .fd-popover__body--right {
   right: var(--sapGroup_BorderWidth);
@@ -29340,13 +29378,13 @@ places the element far left of the screen. so it is not visible.
 .fd-popover__body--right[dir=rtl]::before,
 [dir=rtl] .fd-popover__body--right::after,
 [dir=rtl] .fd-popover__body--right::before {
-  left: .5rem;
+  left: .65rem;
   right: unset
 }
 .fd-popover__body--right::after,
 .fd-popover__body--right::before {
   left: auto;
-  right: .5rem
+  right: .65rem
 }
 .fd-popover__body--no-arrow {
   -webkit-box-shadow: var(--sapContent_Shadow1);
@@ -29399,6 +29437,9 @@ places the element far left of the screen. so it is not visible.
   opacity: 0;
   visibility: hidden
 }
+.fd-popover__body--hidden {
+  display: none
+}
 .fd-popover--input-message-group .fd-popover__body,
 .fd-popover--input-message-group .fd-popover__body--no-arrow,
 .fd-popover--input-message-group .fd-popover__popper,
@@ -29423,7 +29464,8 @@ places the element far left of the screen. so it is not visible.
   margin: 0;
   border: 0;
   border: none;
-  position: absolute;
+  position: relative;
+  width: 100%;
   white-space: nowrap;
   -webkit-box-shadow: var(--sapContent_Shadow2);
   box-shadow: var(--sapContent_Shadow2);
@@ -29484,69 +29526,86 @@ places the element far left of the screen. so it is not visible.
   border-style: solid;
   border-color: transparent
 }
-.fd-popover__popper[x-out-of-boundaries] {
-  display: none
+.fd-popover__popper .fd-popover__arrow--bottom::after,
+.fd-popover__popper .fd-popover__arrow--top::after {
+  margin: 0 -.5rem
 }
-.fd-popover__popper[x-placement^=top] {
-  margin-bottom: .5rem
+.fd-popover__popper .fd-popover__arrow--end::after,
+.fd-popover__popper .fd-popover__arrow--start::after {
+  margin: -.5rem 0
 }
-.fd-popover__popper[x-placement^=top] .fd-popover__arrow {
+.fd-popover__popper .fd-popover__arrow--bottom {
   bottom: -.5rem;
-  margin: 0 .5rem;
   border-width: .5rem .5rem 0 .5rem;
   border-top-color: var(--sapContent_ForegroundBorderColor)
 }
-.fd-popover__popper[x-placement^=top] .fd-popover__arrow::after {
+.fd-popover__popper .fd-popover__arrow--bottom::after {
   bottom: 1px;
-  margin: 0 -.5rem;
   border-width: .5rem .5rem 0 .5rem;
   border-top-color: var(--sapGroup_ContentBackground)
 }
-.fd-popover__popper[x-placement^=bottom] {
-  margin-top: .5rem
-}
-.fd-popover__popper[x-placement^=bottom] .fd-popover__arrow {
+.fd-popover__popper .fd-popover__arrow--top {
   top: -.5rem;
-  margin: 0 .5rem;
   border-width: 0 .5rem .5rem .5rem;
   border-bottom-color: var(--sapContent_ForegroundBorderColor)
 }
-.fd-popover__popper[x-placement^=bottom] .fd-popover__arrow::after {
+.fd-popover__popper .fd-popover__arrow--top::after {
   top: 1px;
-  margin: 0 -.5rem;
   border-width: 0 .5rem .5rem .5rem;
   border-bottom-color: var(--sapGroup_ContentBackground)
 }
-.fd-popover__popper[x-placement^=left] {
-  margin-right: .5rem
-}
-.fd-popover__popper[x-placement^=left] .fd-popover__arrow {
+.fd-popover__popper .fd-popover__arrow--end {
   right: -.5rem;
-  margin: .5rem 0;
   border-width: .5rem 0 .5rem .5rem;
   border-left-color: var(--sapContent_ForegroundBorderColor)
 }
-.fd-popover__popper[x-placement^=left] .fd-popover__arrow::after {
+.fd-popover__popper .fd-popover__arrow--end::after {
   right: 1px;
-  margin: -.5rem 0;
   border-width: .5rem 0 .5rem .5rem;
   border-left-color: var(--sapGroup_ContentBackground)
 }
-.fd-popover__popper[x-placement^=right] {
-  margin-left: .5rem
-}
-.fd-popover__popper[x-placement^=right] .fd-popover__arrow {
+.fd-popover__popper .fd-popover__arrow--start {
   left: -.5rem;
-  margin: .5rem 0;
   border-width: .5rem .5rem .5rem 0;
   border-right-color: var(--sapContent_ForegroundBorderColor)
 }
-.fd-popover__popper[x-placement^=right] .fd-popover__arrow::after {
+.fd-popover__popper .fd-popover__arrow--start::after {
   left: 1px;
-  margin: -.5rem 0;
   border-width: .5rem .5rem .5rem 0;
   border-right-color: var(--sapGroup_ContentBackground)
 }
+.fd-popover__popper .fd-popover__arrow-x--start {
+  left: .65rem
+}
+.fd-popover__popper .fd-popover__arrow-x--center {
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%)
+}
+.fd-popover__popper .fd-popover__arrow-x--end {
+  right: .65rem
+}
+.fd-popover__popper .fd-popover__arrow-y--top {
+  top: .65rem
+}
+.fd-popover__popper .fd-popover__arrow-y--center {
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%)
+}
+.fd-popover__popper .fd-popover__arrow-y--bottom {
+  bottom: .65rem
+}
+.fd-popover__inline-help {
+  padding: .75rem;
+  font-size: var(--sapFontSmallSize)
+}
+.fd-popover__inline-help--icon .fd-popover__arrow-x--start {
+  left: .25rem
+}
+.fd-popover__inline-help--icon .fd-popover__arrow-x--end {
+  right: .25rem
+}
 .drag-placeholder {
   position: absolute;
   opacity: .3

package/package.json

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