@danske/sapphire-css 39.0.1 → 40.0.0

package/build/themes/cjs/default-dark.js

@@ -7,6 +7,7 @@ require("@danske/sapphire-design-tokens/build/themes/default-dark/assets/fonts/d
 var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-tokens/build/themes/default-dark/css/tokens.module.css"));
 var theme = {
     themeClassName: tokens_module_css_1["default"]['sapphire-theme-default-dark'],
+    themeSecondaryModifierClassName: tokens_module_css_1["default"]['sapphire-theme--secondary'],
     themeContrastModifierClassName: tokens_module_css_1["default"]['sapphire-theme--contrast']
 };
 exports["default"] = theme;

package/build/themes/cjs/default.js

@@ -8,6 +8,7 @@ var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-token
 var theme = {
     themeClassName: tokens_module_css_1["default"]['sapphire-theme-default'],
     themeSecondaryModifierClassName: tokens_module_css_1["default"]['sapphire-theme--secondary'],
+    themeTertiaryModifierClassName: tokens_module_css_1["default"]['sapphire-theme--tertiary'],
     themeContrastModifierClassName: tokens_module_css_1["default"]['sapphire-theme--contrast']
 };
 exports["default"] = theme;

package/build/themes/cjs/index.d.ts

@@ -2,5 +2,6 @@ export { default as tokens } from '@danske/sapphire-design-tokens/build/themes';
 export interface Theme {
     themeClassName: string;
     themeSecondaryModifierClassName?: string;
+    themeTertiaryModifierClassName?: string;
     themeContrastModifierClassName?: string;
 }

package/build/themes/esm/default-dark.js

@@ -2,6 +2,7 @@ import '@danske/sapphire-design-tokens/build/themes/default-dark/assets/fonts/da
 import styles from '@danske/sapphire-design-tokens/build/themes/default-dark/css/tokens.module.css';
 var theme = {
     themeClassName: styles['sapphire-theme-default-dark'],
+    themeSecondaryModifierClassName: styles['sapphire-theme--secondary'],
     themeContrastModifierClassName: styles['sapphire-theme--contrast']
 };
 export default theme;

package/build/themes/esm/default.js

@@ -3,6 +3,7 @@ import styles from '@danske/sapphire-design-tokens/build/themes/default/css/toke
 var theme = {
     themeClassName: styles['sapphire-theme-default'],
     themeSecondaryModifierClassName: styles['sapphire-theme--secondary'],
+    themeTertiaryModifierClassName: styles['sapphire-theme--tertiary'],
     themeContrastModifierClassName: styles['sapphire-theme--contrast']
 };
 export default theme;

package/build/themes/esm/index.d.ts

@@ -2,5 +2,6 @@ export { default as tokens } from '@danske/sapphire-design-tokens/build/themes';
 export interface Theme {
     themeClassName: string;
     themeSecondaryModifierClassName?: string;
+    themeTertiaryModifierClassName?: string;
     themeContrastModifierClassName?: string;
 }

package/components/accordion/accordion.module.css

@@ -27,15 +27,15 @@
   position: relative;
   line-height: var(--sapphire-semantic-size-line-height-md);
   font-family: var(--sapphire-semantic-font-name-default);
-  background-color: var(--sapphire-semantic-color-background-surface);
-  color: var(--sapphire-semantic-color-content-default-primary);
-  box-shadow: 0 -1px 0 0 var(--sapphire-semantic-color-border-separator-default);
+  background: var(--sapphire-semantic-color-background-surface);
+  color: var(--sapphire-semantic-color-foreground-primary);
+  box-shadow: 0 -1px 0 0 var(--sapphire-semantic-color-border-secondary);
 }
 
 /* Adds bottom border to the last accordion item as default */
 .sapphire-accordion__item:last-child {
   border-bottom: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-separator-default);
+    var(--sapphire-semantic-color-border-secondary);
 }
 
 .sapphire-accordion--without-last-divider .sapphire-accordion__item:last-child {
@@ -61,14 +61,15 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--sapphire-semantic-size-spacing-30)
-    var(--sapphire-semantic-size-spacing-40);
+  padding: var(--sapphire-semantic-size-spacing-sm)
+    var(--sapphire-semantic-size-spacing-md);
   border: none;
-  background-color: inherit;
+  background: inherit;
   font-family: inherit;
   line-height: inherit;
   color: inherit;
   width: 100%;
+  background: var(--sapphire-semantic-color-background-action-tertiary-default);
 }
 
 /* Hover header */
@@ -79,9 +80,7 @@
   ):hover,
 .sapphire-accordion__item:not(.is-disabled)
   .sapphire-accordion__item-header:not(:active):not(.is-active).is-hover {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-default
-  );
+  background: var(--sapphire-semantic-color-background-action-tertiary-hover);
 }
 
 /* Active header */
@@ -92,9 +91,7 @@
   .sapphire-accordion__item-header:active,
 .sapphire-accordion__item:not(.is-disabled)
   .sapphire-accordion__item-header:not(.js-focus):focus-visible:active {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-hover
-  );
+  background: var(--sapphire-semantic-color-background-action-tertiary-active);
 }
 
 /* Focus header */
@@ -144,8 +141,8 @@
 }
 
 .sapphire-accordion__item-heading {
-  font-size: var(--sapphire-semantic-size-font-text-lg);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-semantic-size-font-body-md);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
   text-align: left;
   flex: 1;
   /* Wrap if title is long */
@@ -159,7 +156,8 @@
   align-items: center;
   width: var(--sapphire-semantic-size-height-control-md);
   height: var(--sapphire-semantic-size-height-control-md);
-  transition: transform var(--sapphire-semantic-time-motion-quick) ease-in-out;
+  transition: transform var(--sapphire-semantic-time-motion-quick)
+    var(--sapphire-semantic-transitions-dynamic);
 }
 .sapphire-accordion__item--open > :first-child .sapphire-accordion__item-arrow {
   transform: rotate(180deg);
@@ -171,18 +169,20 @@
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows var(--sapphire-semantic-time-motion-quick)
-    ease-in-out;
+    var(--sapphire-semantic-transitions-dynamic);
 }
 
 .sapphire-accordion__item-content {
-  font-size: var(--sapphire-semantic-size-font-text-lg);
+  font-size: var(--sapphire-semantic-size-font-body-md);
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
   overflow: hidden;
   visibility: hidden;
-  transition: padding-top var(--sapphire-semantic-time-motion-quick) ease-in-out,
-    padding-bottom var(--sapphire-semantic-time-motion-quick) ease-in-out;
-  padding-right: var(--sapphire-semantic-size-spacing-40);
-  padding-left: var(--sapphire-semantic-size-spacing-40);
+  transition: padding-top var(--sapphire-semantic-time-motion-quick)
+      var(--sapphire-semantic-transitions-dynamic),
+    padding-bottom var(--sapphire-semantic-time-motion-quick)
+      var(--sapphire-semantic-transitions-fade);
+  padding-right: var(--sapphire-semantic-size-spacing-md);
+  padding-left: var(--sapphire-semantic-size-spacing-md);
 }
 
 .sapphire-accordion__item--open > .sapphire-accordion__item-content-wrapper {
@@ -192,12 +192,12 @@
 .sapphire-accordion__item--open
   > .sapphire-accordion__item-content-wrapper
   > .sapphire-accordion__item-content {
-  padding-top: var(--sapphire-semantic-size-spacing-40);
-  padding-bottom: var(--sapphire-semantic-size-spacing-50);
+  padding-top: var(--sapphire-semantic-size-spacing-md);
+  padding-bottom: var(--sapphire-semantic-size-spacing-4xl);
   visibility: visible;
 }
 
 .sapphire-accordion--negative-margin-self {
-  margin-left: calc(var(--sapphire-semantic-size-spacing-40) * -1);
-  width: calc(100% + (var(--sapphire-semantic-size-spacing-40) * 2));
+  margin-left: calc(var(--sapphire-semantic-size-spacing-md) * -1);
+  width: calc(100% + (var(--sapphire-semantic-size-spacing-md) * 2));
 }

package/components/avatar/avatar.module.css

@@ -10,15 +10,10 @@
 
   white-space: nowrap;
   font-family: var(--sapphire-semantic-font-name-default);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
-  font-size: var(--sapphire-global-size-font-100);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
+  font-size: var(--sapphire-semantic-size-font-body-md);
   font-style: normal;
   text-transform: capitalize;
-  /* Passive color by default */
-  background-color: var(
-    --sapphire-semantic-color-background-passive-secondary-default
-  );
-  color: var(--sapphire-semantic-color-content-default-primary);
 
   /* The below is meant to address a font rendering quirk in OSX where the text
    * looks bolder than intended due to subpixel rendering. This quirk generally
@@ -33,122 +28,104 @@
    */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  color: var(--sapphire-semantic-color-foreground-on-decorative-neutral);
+  background: var(--sapphire-semantic-color-background-decorative-neutral);
 }
 
 /* Sizes */
-.sapphire-avatar--xs {
-  height: var(--sapphire-semantic-size-height-control-xs);
-  width: var(--sapphire-semantic-size-height-control-xs);
-  border-radius: var(--sapphire-semantic-size-height-control-xs);
-  font-size: var(--sapphire-semantic-size-font-control-sm);
-}
 
 .sapphire-avatar--sm {
   height: var(--sapphire-semantic-size-height-control-sm);
   width: var(--sapphire-semantic-size-height-control-sm);
   border-radius: var(--sapphire-semantic-size-height-control-sm);
-  font-size: var(--sapphire-semantic-size-font-control-md);
+  font-size: var(--sapphire-semantic-size-font-body-sm);
 }
 
 .sapphire-avatar--lg {
   height: var(--sapphire-semantic-size-height-control-lg);
   width: var(--sapphire-semantic-size-height-control-lg);
   border-radius: var(--sapphire-semantic-size-height-control-lg);
-  font-size: var(--sapphire-global-size-font-112);
-}
-
-.sapphire-avatar--xl {
-  height: var(--sapphire-semantic-size-height-control-xl);
-  width: var(--sapphire-semantic-size-height-control-xl);
-  border-radius: var(--sapphire-semantic-size-height-control-xl);
-  font-size: var(--sapphire-global-size-font-130);
+  font-size: var(--sapphire-global-size-font-125);
 }
 
 /* Colors and variants */
-.sapphire-avatar--positive {
-  color: var(--sapphire-semantic-color-content-positive-secondary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-positive-secondary-default
-  );
-}
-
-.sapphire-avatar--negative {
-  color: var(--sapphire-semantic-color-content-negative-secondary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-negative-secondary-default
-  );
-}
-
-.sapphire-avatar--warning {
-  color: var(--sapphire-semantic-color-content-warning-secondary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-warning-secondary-default
-  );
-}
-
-.sapphire-avatar--informative {
-  color: var(--sapphire-semantic-color-content-informative-secondary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-informative-secondary-default
-  );
+.sapphire-avatar--decorative-1 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-1);
+  background: var(--sapphire-semantic-color-background-decorative-1);
 }
 
-.sapphire-avatar--aqua {
-  background-color: var(--sapphire-global-color-secondary-aqua-75);
+.sapphire-avatar--decorative-2 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-2);
+  background: var(--sapphire-semantic-color-background-decorative-2);
 }
 
-.sapphire-avatar--copper {
-  background-color: var(--sapphire-global-color-secondary-copper-75);
+.sapphire-avatar--decorative-3 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-3);
+  background: var(--sapphire-semantic-color-background-decorative-3);
 }
 
-.sapphire-avatar--electro {
-  background-color: var(--sapphire-global-color-secondary-electro-75);
+.sapphire-avatar--decorative-4 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-4);
+  background: var(--sapphire-semantic-color-background-decorative-4);
 }
 
-.sapphire-avatar--indigo {
-  background-color: var(--sapphire-global-color-secondary-indigo-75);
+.sapphire-avatar--decorative-5 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-5);
+  background: var(--sapphire-semantic-color-background-decorative-5);
 }
 
-.sapphire-avatar--lime {
-  background-color: var(--sapphire-global-color-secondary-lime-75);
+.sapphire-avatar--decorative-6 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-6);
+  background: var(--sapphire-semantic-color-background-decorative-6);
 }
 
-.sapphire-avatar--pink {
-  background-color: var(--sapphire-global-color-secondary-pink-75);
+.sapphire-avatar--decorative-7 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-7);
+  background: var(--sapphire-semantic-color-background-decorative-7);
 }
 
-.sapphire-avatar--violet {
-  background-color: var(--sapphire-global-color-secondary-violet-75);
+.sapphire-avatar--decorative-8 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-8);
+  background: var(--sapphire-semantic-color-background-decorative-8);
 }
 
-.sapphire-avatar--gold {
-  background-color: var(--sapphire-global-color-secondary-gold-75);
+.sapphire-avatar--decorative-9 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-9);
+  background: var(--sapphire-semantic-color-background-decorative-9);
 }
 
-.sapphire-avatar--beige {
-  background-color: var(--sapphire-global-color-secondary-beige-75);
+.sapphire-avatar--decorative-10 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-10);
+  background: var(--sapphire-semantic-color-background-decorative-10);
 }
 
-.sapphire-avatar--orchid {
-  background-color: var(--sapphire-global-color-secondary-orchid-75);
+.sapphire-avatar--decorative-11 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-11);
+  background: var(--sapphire-semantic-color-background-decorative-11);
 }
 
-.sapphire-avatar--gray {
-  background-color: var(--sapphire-global-color-secondary-gray-75);
+.sapphire-avatar--decorative-12 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-12);
+  background: var(--sapphire-semantic-color-background-decorative-12);
 }
 
-.sapphire-avatar--cobalt {
-  background-color: var(--sapphire-global-color-secondary-cobalt-75);
+.sapphire-avatar--decorative-13 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-13);
+  background: var(--sapphire-semantic-color-background-decorative-13);
 }
 
-.sapphire-avatar--forestGreen {
-  background-color: var(--sapphire-global-color-secondary-forest-green-75);
+.sapphire-avatar--decorative-14 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-14);
+  background: var(--sapphire-semantic-color-background-decorative-14);
 }
 
-.sapphire-avatar--teal {
-  background-color: var(--sapphire-global-color-secondary-teal-75);
+.sapphire-avatar--decorative-15 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-15);
+  background: var(--sapphire-semantic-color-background-decorative-15);
 }
 
-.sapphire-avatar--orange {
-  background-color: var(--sapphire-global-color-secondary-orange-75);
+.sapphire-avatar--decorative-16 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-16);
+  background: var(--sapphire-semantic-color-background-decorative-16);
 }

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

@@ -1,28 +1,23 @@
 declare const styles: {
   readonly "sapphire-avatar": string;
-  readonly "sapphire-avatar--xs": string;
   readonly "sapphire-avatar--sm": string;
   readonly "sapphire-avatar--lg": string;
-  readonly "sapphire-avatar--xl": string;
-  readonly "sapphire-avatar--positive": string;
-  readonly "sapphire-avatar--negative": string;
-  readonly "sapphire-avatar--warning": string;
-  readonly "sapphire-avatar--informative": string;
-  readonly "sapphire-avatar--aqua": string;
-  readonly "sapphire-avatar--copper": string;
-  readonly "sapphire-avatar--electro": string;
-  readonly "sapphire-avatar--indigo": string;
-  readonly "sapphire-avatar--lime": string;
-  readonly "sapphire-avatar--pink": string;
-  readonly "sapphire-avatar--violet": string;
-  readonly "sapphire-avatar--gold": string;
-  readonly "sapphire-avatar--beige": string;
-  readonly "sapphire-avatar--orchid": string;
-  readonly "sapphire-avatar--gray": string;
-  readonly "sapphire-avatar--cobalt": string;
-  readonly "sapphire-avatar--forestGreen": string;
-  readonly "sapphire-avatar--teal": string;
-  readonly "sapphire-avatar--orange": string;
+  readonly "sapphire-avatar--decorative-1": string;
+  readonly "sapphire-avatar--decorative-2": string;
+  readonly "sapphire-avatar--decorative-3": string;
+  readonly "sapphire-avatar--decorative-4": string;
+  readonly "sapphire-avatar--decorative-5": string;
+  readonly "sapphire-avatar--decorative-6": string;
+  readonly "sapphire-avatar--decorative-7": string;
+  readonly "sapphire-avatar--decorative-8": string;
+  readonly "sapphire-avatar--decorative-9": string;
+  readonly "sapphire-avatar--decorative-10": string;
+  readonly "sapphire-avatar--decorative-11": string;
+  readonly "sapphire-avatar--decorative-12": string;
+  readonly "sapphire-avatar--decorative-13": string;
+  readonly "sapphire-avatar--decorative-14": string;
+  readonly "sapphire-avatar--decorative-15": string;
+  readonly "sapphire-avatar--decorative-16": string;
 };
 export = styles;
 

package/components/backdrop/backdrop.module.css

@@ -1,20 +1,20 @@
 @keyframes backdrop-fade-in {
   from {
-    background-color: transparent;
+    background: transparent;
   }
 
   to {
-    background-color: var(--sapphire-semantic-color-background-backdrop);
+    background: var(--sapphire-semantic-color-background-backdrop);
   }
 }
 
 @keyframes backdrop-fade-out {
   from {
-    background-color: var(--sapphire-semantic-color-background-backdrop);
+    background: var(--sapphire-semantic-color-background-backdrop);
   }
 
   to {
-    background-color: transparent;
+    background: transparent;
   }
 }
 
@@ -27,7 +27,7 @@
 
   animation-name: backdrop-fade-in;
   animation-duration: var(--sapphire-semantic-time-fade-default);
-  animation-timing-function: ease-in-out;
+  animation-timing-function: var(--sapphire-semantic-transitions-fade);
   animation-fill-mode: forwards;
 }