@danske/sapphire-css 31.2.1 → 32.0.0

package/components/accordion/accordion.module.css

@@ -134,7 +134,7 @@
   transition: transform var(--sapphire-accordion-time-transition-arrow)
     ease-in-out;
 }
-.sapphire-accordion__item--open .sapphire-accordion__item-arrow {
+.sapphire-accordion__item--open > :first-child .sapphire-accordion__item-arrow {
   transform: rotate(180deg);
 }
 
@@ -159,11 +159,13 @@
   padding-left: var(--sapphire-accordion-size-spacing-body-horizontal);
 }
 
-.sapphire-accordion__item--open .sapphire-accordion__item-content-wrapper {
+.sapphire-accordion__item--open > .sapphire-accordion__item-content-wrapper {
   grid-template-rows: 1fr;
 }
 
-.sapphire-accordion__item--open .sapphire-accordion__item-content {
+.sapphire-accordion__item--open
+  > .sapphire-accordion__item-content-wrapper
+  > .sapphire-accordion__item-content {
   padding-top: var(--sapphire-accordion-size-spacing-body-top);
   padding-bottom: var(--sapphire-accordion-size-spacing-body-bottom);
   visibility: visible;

package/components/backdrop/backdrop.module.css

@@ -1,4 +1,4 @@
-@keyframes fade-in {
+@keyframes backdrop-fade-in {
   from {
     background-color: transparent;
   }
@@ -8,7 +8,7 @@
   }
 }
 
-@keyframes fade-out {
+@keyframes backdrop-fade-out {
   from {
     background-color: var(--sapphire-backdrop-color-background);
   }
@@ -25,12 +25,12 @@
   justify-content: center;
   align-items: center;
 
-  animation-name: fade-in;
+  animation-name: backdrop-fade-in;
   animation-duration: var(--sapphire-backdrop-time-transition);
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
 }
 
 .sapphire-backdrop--exiting {
-  animation-name: fade-out;
+  animation-name: backdrop-fade-out;
 }

package/components/backdrop/backdrop.module.css.d.ts

@@ -1,8 +1,8 @@
 declare const styles: {
   readonly "sapphire-backdrop": string;
-  readonly "fade-in": string;
+  readonly "backdrop-fade-in": string;
   readonly "sapphire-backdrop--exiting": string;
-  readonly "fade-out": string;
+  readonly "backdrop-fade-out": string;
 };
 export = styles;
 

package/components/dialog/dialog.module.css

@@ -58,76 +58,3 @@
 .sapphire-dialog--large {
   width: var(--sapphire-dialog-size-width-l);
 }
-
-.sapphire-dialog-header {
-  padding: var(--sapphire-dialog-size-spacing-header-top-default)
-    var(--sapphire-dialog-size-spacing-header-right-default)
-    var(--sapphire-dialog-size-spacing-header-bottom-default)
-    var(--sapphire-dialog-size-spacing-header-left-default);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.sapphire-dialog--passive .sapphire-dialog-header {
-  padding: var(--sapphire-dialog-size-spacing-header-top-passive)
-    var(--sapphire-dialog-size-spacing-header-right-passive)
-    var(--sapphire-dialog-size-spacing-header-bottom-passive)
-    var(--sapphire-dialog-size-spacing-header-left-passive);
-}
-
-.sapphire-dialog-close-button-container {
-  align-self: flex-start;
-}
-
-.sapphire-dialog-body {
-  padding: var(--sapphire-dialog-size-spacing-body-top-default)
-    var(--sapphire-dialog-size-spacing-body-right-default)
-    var(--sapphire-dialog-size-spacing-body-bottom-default)
-    var(--sapphire-dialog-size-spacing-body-left-default);
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.sapphire-dialog--passive .sapphire-dialog-body {
-  padding: var(--sapphire-dialog-size-spacing-body-top-passive)
-    var(--sapphire-dialog-size-spacing-body-right-passive)
-    var(--sapphire-dialog-size-spacing-body-bottom-passive)
-    var(--sapphire-dialog-size-spacing-body-left-passive);
-}
-
-.sapphire-dialog-footer {
-  padding: var(--sapphire-dialog-size-spacing-footer-top-default)
-    var(--sapphire-dialog-size-spacing-footer-right-default)
-    var(--sapphire-dialog-size-spacing-footer-bottom-default)
-    var(--sapphire-dialog-size-spacing-footer-left-default);
-}
-
-.sapphire-dialog-header + .sapphire-dialog-body {
-  /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
-  border-top: var(--sapphire-dialog-size-border) solid transparent;
-}
-
-.sapphire-dialog-header + .sapphire-dialog-body.sapphire-dialog-body--scrolled {
-  border-top: var(--sapphire-dialog-size-border) solid
-    var(--sapphire-dialog-color-separator);
-}
-
-.sapphire-dialog-body + .sapphire-dialog-footer {
-  /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
-  border-top: var(--sapphire-dialog-size-border) solid transparent;
-}
-
-.sapphire-dialog-body.sapphire-dialog-body--scrollable
-  + .sapphire-dialog-footer {
-  border-top: var(--sapphire-dialog-size-border) solid
-    var(--sapphire-dialog-color-separator);
-}
-
-.sapphire-dialog:has(.sapphire-dialog-body--scrollable)
-  > .sapphire-dialog-footer {
-  padding: var(--sapphire-dialog-size-spacing-footer-top-scrollable)
-    var(--sapphire-dialog-size-spacing-footer-right-scrollable)
-    var(--sapphire-dialog-size-spacing-footer-bottom-scrollable)
-    var(--sapphire-dialog-size-spacing-footer-left-scrollable);
-}

package/components/dialog/dialog.module.css.d.ts

@@ -7,13 +7,6 @@ declare const styles: {
   readonly "sapphire-dialog--small": string;
   readonly "sapphire-dialog--medium": string;
   readonly "sapphire-dialog--large": string;
-  readonly "sapphire-dialog-header": string;
-  readonly "sapphire-dialog--passive": string;
-  readonly "sapphire-dialog-close-button-container": string;
-  readonly "sapphire-dialog-body": string;
-  readonly "sapphire-dialog-footer": string;
-  readonly "sapphire-dialog-body--scrolled": string;
-  readonly "sapphire-dialog-body--scrollable": string;
 };
 export = styles;
 

package/components/feedbackMessage/feedbackMessage.module.css

@@ -50,5 +50,6 @@
 .sapphire-feedback-message__body {
   color: var(--sapphire-feedback-message-color-content-body);
   font-family: var(--sapphire-feedback-message-font-name);
+  font-size: var(--sapphire-global-size-font-88);
   line-height: var(--sapphire-feedback-message-size-line-height);
 }

package/components/modalLayout/modalLayout.module.css

@@ -0,0 +1,90 @@
+.sapphire-modal-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background-color: var(
+    --sapphire-semantic-color-background-surface-primary-default
+  );
+  font-family: var(--sapphire-semantic-font-name-default);
+  color: var(--sapphire-semantic-color-content-default-primary);
+}
+
+.sapphire-modal-layout__header-container {
+  flex-shrink: 0;
+}
+
+.sapphire-modal-layout__header {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--sapphire-semantic-size-spacing-50)
+    var(--sapphire-semantic-size-spacing-container-horizontal-m);
+  gap: var(--sapphire-semantic-size-spacing-40);
+}
+
+.sapphire-modal-layout__body {
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-grow: 1;
+  padding: 0 var(--sapphire-semantic-size-spacing-container-horizontal-m);
+}
+
+.sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding {
+  padding: 0;
+}
+
+.sapphire-modal-layout__footer-container {
+  flex-shrink: 0;
+}
+
+.sapphire-modal-layout__footer {
+  padding: var(--sapphire-semantic-size-spacing-70)
+    var(--sapphire-semantic-size-spacing-container-horizontal-m)
+    var(--sapphire-semantic-size-spacing-70)
+    var(--sapphire-semantic-size-spacing-container-horizontal-m);
+}
+
+/** Container for heading and subheading **/
+.sapphire-modal-layout__heading-container {
+  flex: 1;
+  padding: var(--sapphire-semantic-size-spacing-20) 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.sapphire-modal-layout__subheading {
+  color: var(--sapphire-semantic-color-content-default-secondary);
+  margin-top: var(--sapphire-semantic-size-spacing-10);
+}
+
+.sapphire-modal-layout__close-button-container {
+  margin-left: var(--sapphire-semantic-size-spacing-50);
+}
+
+.sapphire-modal-layout__header-container + .sapphire-modal-layout__body {
+  /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
+  border-top: var(--sapphire-semantic-size-border-s) solid transparent;
+}
+
+.sapphire-modal-layout__header-container
+  + .sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled {
+  border-top: var(--sapphire-semantic-size-border-s) solid
+    var(--sapphire-semantic-color-border-separator-default);
+}
+
+.sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer))
+  .sapphire-modal-layout__body {
+  padding-bottom: var(--sapphire-semantic-size-spacing-50);
+}
+
+.sapphire-modal-layout__body + .sapphire-modal-layout__footer-container {
+  /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
+  border-top: var(--sapphire-semantic-size-border-s) solid transparent;
+}
+
+.sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable
+  + .sapphire-modal-layout__footer-container {
+  border-top: var(--sapphire-semantic-size-border-s) solid
+    var(--sapphire-semantic-color-border-separator-default);
+}

package/components/modalLayout/modalLayout.module.css.d.ts

@@ -0,0 +1,16 @@
+declare const styles: {
+  readonly "sapphire-modal-layout": string;
+  readonly "sapphire-modal-layout__header-container": string;
+  readonly "sapphire-modal-layout__header": string;
+  readonly "sapphire-modal-layout__body": string;
+  readonly "sapphire-modal-layout__body--no-padding": string;
+  readonly "sapphire-modal-layout__footer-container": string;
+  readonly "sapphire-modal-layout__footer": string;
+  readonly "sapphire-modal-layout__heading-container": string;
+  readonly "sapphire-modal-layout__subheading": string;
+  readonly "sapphire-modal-layout__close-button-container": string;
+  readonly "sapphire-modal-layout__body--scrolled": string;
+  readonly "sapphire-modal-layout__body--scrollable": string;
+};
+export = styles;
+

package/components/panel/panel.module.css

@@ -1,12 +1,8 @@
 .sapphire-panel {
-  background-color: var(--sapphire-panel-color-background);
-  font-family: var(--sapphire-panel-font-name);
-  color: var(--sapphire-panel-color-content);
   box-sizing: border-box;
   overflow: hidden;
   max-width: 100%;
-  display: flex;
-  flex-direction: column;
+  display: block;
   height: 100%;
   outline: 0;
   transition: transform var(--sapphire-panel-time-transition) ease-in-out;
@@ -14,18 +10,6 @@
   width: var(--sapphire-panel-size-width-l);
 }
 
-/* Temporary alternative to `.sapphire-panel` if one wants to render the panel inline
- * TODO: split panel into 2 independent blocks: panel layout and the panel content.
- * UC-2757
- */
-.sapphire-panel-inline {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--sapphire-panel-color-background);
-  font-family: var(--sapphire-panel-font-name);
-  color: var(--sapphire-panel-color-content);
-}
-
 .sapphire-panel--visible {
   transform: translateX(0%);
 }
@@ -33,73 +17,3 @@
 .sapphire-panel--small {
   width: var(--sapphire-panel-size-width-s);
 }
-
-.sapphire-panel-header {
-  flex-shrink: 0;
-}
-
-.sapphire-panel-body {
-  overflow-y: auto;
-  overflow-x: hidden;
-  flex-grow: 1;
-  padding: 0 var(--sapphire-panel-size-spacing-side);
-}
-
-.sapphire-panel-body.sapphire-panel-body--no-padding {
-  padding: 0;
-}
-
-.sapphire-panel-footer {
-  flex-shrink: 0;
-}
-
-/** Container for heading and subheading **/
-.sapphire-panel-panel-heading-container {
-  flex: 1;
-  padding: var(--sapphire-panel-size-spacing-heading-vertical) 0;
-}
-
-.sapphire-panel-panel-header {
-  flex-shrink: 0;
-  display: flex;
-  justify-content: space-between;
-  padding: var(--sapphire-panel-size-spacing-header-vertical)
-    var(--sapphire-panel-size-spacing-side);
-  gap: var(--sapphire-panel-size-spacing-header-gap);
-}
-
-.sapphire-panel-panel-header-subheading {
-  color: var(--sapphire-panel-color-subheading);
-  margin-top: var(--sapphire-panel-size-spacing-heading-gap);
-}
-
-.sapphire-panel-panel-footer {
-  padding: var(--sapphire-panel-size-spacing-footer-top)
-    var(--sapphire-panel-size-spacing-side)
-    var(--sapphire-panel-size-spacing-footer-bottom)
-    var(--sapphire-panel-size-spacing-side);
-}
-
-.sapphire-panel-panel-header-close-button-container {
-  margin-left: var(--sapphire-panel-size-spacing-close-icon-left);
-}
-
-.sapphire-panel-header + .sapphire-panel-body {
-  /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
-  border-top: var(--sapphire-panel-size-border) solid transparent;
-}
-
-.sapphire-panel-header + .sapphire-panel-body.sapphire-panel-body--scrolled {
-  border-top: var(--sapphire-panel-size-border) solid
-    var(--sapphire-panel-color-separator);
-}
-
-.sapphire-panel-body + .sapphire-panel-footer {
-  /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
-  border-top: var(--sapphire-panel-size-border) solid transparent;
-}
-
-.sapphire-panel-body.sapphire-panel-body--scrollable + .sapphire-panel-footer {
-  border-top: var(--sapphire-panel-size-border) solid
-    var(--sapphire-panel-color-separator);
-}

package/components/panel/panel.module.css.d.ts

@@ -1,19 +1,7 @@
 declare const styles: {
   readonly "sapphire-panel": string;
-  readonly "sapphire-panel-inline": string;
   readonly "sapphire-panel--visible": string;
   readonly "sapphire-panel--small": string;
-  readonly "sapphire-panel-header": string;
-  readonly "sapphire-panel-body": string;
-  readonly "sapphire-panel-body--no-padding": string;
-  readonly "sapphire-panel-footer": string;
-  readonly "sapphire-panel-panel-heading-container": string;
-  readonly "sapphire-panel-panel-header": string;
-  readonly "sapphire-panel-panel-header-subheading": string;
-  readonly "sapphire-panel-panel-footer": string;
-  readonly "sapphire-panel-panel-header-close-button-container": string;
-  readonly "sapphire-panel-body--scrolled": string;
-  readonly "sapphire-panel-body--scrollable": string;
 };
 export = styles;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "31.2.1",
+  "version": "32.0.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -68,5 +68,5 @@
   "dependencies": {
     "@danske/sapphire-design-tokens": "^39.2.0"
   },
-  "gitHead": "a8ebdf9b67baf003c82173820a5244a9755d7f95"
+  "gitHead": "f697803e6f03705b063ff5d4c89debde608208db"
 }