@fundamental-styles/theming-preview 0.23.0-rc.5 → 0.23.0-rc.8

package/fundamental-styles.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.23.0-rc.5
+ * Fundamental Library Styles v0.23.0-rc.8
  * 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"
 }
@@ -5486,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,
@@ -5502,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,
@@ -5513,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,
@@ -5528,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;
@@ -29274,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;
@@ -29291,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 {
@@ -29305,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) {
@@ -29340,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);
@@ -29360,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);
@@ -29419,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,
@@ -29443,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);
@@ -29504,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.5",
+    "version": "0.23.0-rc.8",
     "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.5"
+        "fundamental-styles": "0.23.0-rc.8"
     }
   }