@danske/sapphire-css 32.2.1 → 33.0.1

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

@@ -7,6 +7,6 @@ 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'],
-    contrastThemeClassName: tokens_module_css_1["default"]['sapphire-theme-contrast']
+    themeContrastModifierClassName: tokens_module_css_1["default"]['sapphire-theme--contrast']
 };
 exports["default"] = theme;

package/build/themes/cjs/default.js

@@ -7,6 +7,7 @@ require("@danske/sapphire-design-tokens/build/themes/default/assets/fonts/danske
 var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-tokens/build/themes/default/css/tokens.module.css"));
 var theme = {
     themeClassName: tokens_module_css_1["default"]['sapphire-theme-default'],
-    contrastThemeClassName: tokens_module_css_1["default"]['sapphire-theme-contrast']
+    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/index.d.ts

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

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

@@ -2,6 +2,6 @@ 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'],
-    contrastThemeClassName: styles['sapphire-theme-contrast']
+    themeContrastModifierClassName: styles['sapphire-theme--contrast']
 };
 export default theme;

package/build/themes/esm/default.js

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

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

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

package/components/accordion/accordion.module.css

@@ -25,17 +25,17 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  line-height: var(--sapphire-accordion-size-line-height);
-  font-family: var(--sapphire-accordion-font-name);
-  background-color: var(--sapphire-accordion-color-background-item);
-  color: var(--sapphire-accordion-color-content);
-  box-shadow: 0 -1px 0 0 var(--sapphire-accordion-color-border);
+  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);
 }
 
 /* Adds bottom border to the last accordion item as default */
 .sapphire-accordion__item:last-child {
-  border-bottom: var(--sapphire-accordion-size-width-border) solid
-    var(--sapphire-accordion-color-border);
+  border-bottom: var(--sapphire-semantic-size-border-sm) solid
+    var(--sapphire-semantic-color-border-separator-default);
 }
 
 .sapphire-accordion--without-last-divider .sapphire-accordion__item:last-child {
@@ -51,7 +51,7 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  opacity: var(--sapphire-accordion-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
 }
 
 /* Header */
@@ -61,8 +61,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--sapphire-accordion-size-spacing-header-vertical)
-    var(--sapphire-accordion-size-spacing-header-horizontal);
+  padding: var(--sapphire-semantic-size-spacing-30)
+    var(--sapphire-semantic-size-spacing-40);
   border: none;
   background-color: inherit;
   font-family: inherit;
@@ -79,7 +79,9 @@
   ):hover,
 .sapphire-accordion__item:not(.is-disabled)
   .sapphire-accordion__item-header:not(:active):not(.is-active).is-hover {
-  background-color: var(--sapphire-accordion-color-background-header-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-default
+  );
 }
 
 /* Active header */
@@ -90,7 +92,9 @@
   .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-accordion-color-background-header-active);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-hover
+  );
 }
 
 /* Focus header */
@@ -104,16 +108,16 @@
 .sapphire-accordion__item:not(.is-disabled)
   .sapphire-accordion__item-header:not(.js-focus):focus-visible {
   outline: none;
-  box-shadow: inset 0px 0px 0px var(--sapphire-accordion-size-focus-ring)
-    var(--sapphire-accordion-color-focus-ring);
+  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
+    var(--sapphire-semantic-color-focus-ring);
   border: 0;
-  border-radius: var(--sapphire-accordion-size-radius);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
 }
 
-/* Remove the top box-shadow border (divider) from: 
+/* Remove the top box-shadow border (divider) from:
 - first item of the accordion
 - the focused item itself when the accordion is opened and header is focused
-- the accordion item that is immediately preceded by a closed focused item 
+- the accordion item that is immediately preceded by a closed focused item
 - the focused item itself when the accordion is closed and header is focused
 */
 .sapphire-accordion__item:first-child,
@@ -128,7 +132,7 @@
   box-shadow: none;
 }
 
-/* Remove closed item's box-shadow & bottom border if header is focused 
+/* Remove closed item's box-shadow & bottom border if header is focused
   The border-bottom removal is intended if the last accordion item is focused
 */
 .sapphire-accordion__item:not(.sapphire-accordion__item--open):has(
@@ -140,8 +144,8 @@
 }
 
 .sapphire-accordion__item-heading {
-  font-size: var(--sapphire-accordion-size-font-heading);
-  font-weight: var(--sapphire-accordion-font-weight-heading);
+  font-size: var(--sapphire-semantic-size-font-text-lg);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
   text-align: left;
   flex: 1;
   /* Wrap if title is long */
@@ -153,10 +157,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: var(--sapphire-accordion-size-height-arrow);
-  height: var(--sapphire-accordion-size-height-arrow);
-  transition: transform var(--sapphire-accordion-time-transition-arrow)
-    ease-in-out;
+  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;
 }
 .sapphire-accordion__item--open > :first-child .sapphire-accordion__item-arrow {
   transform: rotate(180deg);
@@ -167,20 +170,19 @@
 .sapphire-accordion__item-content-wrapper {
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows var(--sapphire-accordion-time-transition-body)
+  transition: grid-template-rows var(--sapphire-semantic-time-motion-quick)
     ease-in-out;
 }
 
 .sapphire-accordion__item-content {
-  font-size: var(--sapphire-accordion-size-font-content);
-  font-weight: var(--sapphire-accordion-font-weight-content);
+  font-size: var(--sapphire-semantic-size-font-text-lg);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
   overflow: hidden;
   visibility: hidden;
-  transition: padding-top var(--sapphire-accordion-time-transition-body)
-      ease-in-out,
-    padding-bottom var(--sapphire-accordion-time-transition-body) ease-in-out;
-  padding-right: var(--sapphire-accordion-size-spacing-body-horizontal);
-  padding-left: var(--sapphire-accordion-size-spacing-body-horizontal);
+  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);
 }
 
 .sapphire-accordion__item--open > .sapphire-accordion__item-content-wrapper {
@@ -190,16 +192,12 @@
 .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);
+  padding-top: var(--sapphire-semantic-size-spacing-40);
+  padding-bottom: var(--sapphire-semantic-size-spacing-50);
   visibility: visible;
 }
 
 .sapphire-accordion--negative-margin-self {
-  margin-left: calc(
-    var(--sapphire-accordion-size-spacing-body-horizontal) * -1
-  );
-  width: calc(
-    100% + (var(--sapphire-accordion-size-spacing-body-horizontal) * 2)
-  );
+  margin-left: calc(var(--sapphire-semantic-size-spacing-40) * -1);
+  width: calc(100% + (var(--sapphire-semantic-size-spacing-40) * 2));
 }

package/components/avatar/avatar.module.css

@@ -4,19 +4,21 @@
   justify-content: center;
   align-items: center;
 
-  height: var(--sapphire-avatar-size-height-m);
-  width: var(--sapphire-avatar-size-height-m);
-  border-radius: var(--sapphire-avatar-size-radius-m);
+  height: var(--sapphire-semantic-size-height-control-md);
+  width: var(--sapphire-semantic-size-height-control-md);
+  border-radius: var(--sapphire-semantic-size-height-control-md);
 
   white-space: nowrap;
-  font-family: var(--sapphire-avatar-font-name);
-  font-weight: var(--sapphire-avatar-font-weight);
-  font-size: var(--sapphire-avatar-size-font-m);
+  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-style: normal;
   text-transform: capitalize;
   /* Passive color by default */
-  background-color: var(--sapphire-avatar-color-background-passive);
-  color: var(--sapphire-avatar-color-content-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
@@ -34,111 +36,119 @@
 }
 
 /* Sizes */
-.sapphire-avatar--extra-small {
-  height: var(--sapphire-avatar-size-height-xs);
-  width: var(--sapphire-avatar-size-height-xs);
-  border-radius: var(--sapphire-avatar-size-radius-xs);
-  font-size: var(--sapphire-avatar-size-font-xs);
+.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--small {
-  height: var(--sapphire-avatar-size-height-s);
-  width: var(--sapphire-avatar-size-height-s);
-  border-radius: var(--sapphire-avatar-size-radius-s);
-  font-size: var(--sapphire-avatar-size-font-s);
+.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);
 }
 
-.sapphire-avatar--large {
-  height: var(--sapphire-avatar-size-height-l);
-  width: var(--sapphire-avatar-size-height-l);
-  border-radius: var(--sapphire-avatar-size-radius-l);
-  font-size: var(--sapphire-avatar-size-font-l);
+.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--extra-large {
-  height: var(--sapphire-avatar-size-height-xl);
-  width: var(--sapphire-avatar-size-height-xl);
-  border-radius: var(--sapphire-avatar-size-radius-xl);
-  font-size: var(--sapphire-avatar-size-font-xl);
+.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);
 }
 
 /* Colors and variants */
 .sapphire-avatar--positive {
-  color: var(--sapphire-avatar-color-content-positive);
-  background-color: var(--sapphire-avatar-color-background-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-avatar-color-content-negative);
-  background-color: var(--sapphire-avatar-color-background-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-avatar-color-content-warning);
-  background-color: var(--sapphire-avatar-color-background-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-avatar-color-content-informative);
-  background-color: var(--sapphire-avatar-color-background-informative);
+  color: var(--sapphire-semantic-color-content-informative-secondary-default);
+  background-color: var(
+    --sapphire-semantic-color-background-informative-secondary-default
+  );
 }
 
 .sapphire-avatar--aqua {
-  background-color: var(--sapphire-avatar-color-background-aqua);
+  background-color: var(--sapphire-global-color-secondary-aqua-75);
 }
 
 .sapphire-avatar--copper {
-  background-color: var(--sapphire-avatar-color-background-copper);
+  background-color: var(--sapphire-global-color-secondary-copper-75);
 }
 
 .sapphire-avatar--electro {
-  background-color: var(--sapphire-avatar-color-background-electro);
+  background-color: var(--sapphire-global-color-secondary-electro-75);
 }
 
 .sapphire-avatar--indigo {
-  background-color: var(--sapphire-avatar-color-background-indigo);
+  background-color: var(--sapphire-global-color-secondary-indigo-75);
 }
 
 .sapphire-avatar--lime {
-  background-color: var(--sapphire-avatar-color-background-lime);
+  background-color: var(--sapphire-global-color-secondary-lime-75);
 }
 
 .sapphire-avatar--pink {
-  background-color: var(--sapphire-avatar-color-background-pink);
+  background-color: var(--sapphire-global-color-secondary-pink-75);
 }
 
 .sapphire-avatar--violet {
-  background-color: var(--sapphire-avatar-color-background-violet);
+  background-color: var(--sapphire-global-color-secondary-violet-75);
 }
 
 .sapphire-avatar--gold {
-  background-color: var(--sapphire-avatar-color-background-gold);
+  background-color: var(--sapphire-global-color-secondary-gold-75);
 }
 
 .sapphire-avatar--beige {
-  background-color: var(--sapphire-avatar-color-background-beige);
+  background-color: var(--sapphire-global-color-secondary-beige-75);
 }
 
 .sapphire-avatar--orchid {
-  background-color: var(--sapphire-avatar-color-background-orchid);
+  background-color: var(--sapphire-global-color-secondary-orchid-75);
 }
 
 .sapphire-avatar--gray {
-  background-color: var(--sapphire-avatar-color-background-gray);
+  background-color: var(--sapphire-global-color-secondary-gray-75);
 }
 
 .sapphire-avatar--cobalt {
-  background-color: var(--sapphire-avatar-color-background-cobalt);
+  background-color: var(--sapphire-global-color-secondary-cobalt-75);
 }
 
 .sapphire-avatar--forestGreen {
-  background-color: var(--sapphire-avatar-color-background-forest-green);
+  background-color: var(--sapphire-global-color-secondary-forest-green-75);
 }
 
 .sapphire-avatar--teal {
-  background-color: var(--sapphire-avatar-color-background-teal);
+  background-color: var(--sapphire-global-color-secondary-teal-75);
 }
 
 .sapphire-avatar--orange {
-  background-color: var(--sapphire-avatar-color-background-orange);
+  background-color: var(--sapphire-global-color-secondary-orange-75);
 }

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

@@ -1,9 +1,9 @@
 declare const styles: {
   readonly "sapphire-avatar": string;
-  readonly "sapphire-avatar--extra-small": string;
-  readonly "sapphire-avatar--small": string;
-  readonly "sapphire-avatar--large": string;
-  readonly "sapphire-avatar--extra-large": 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;

package/components/backdrop/backdrop.module.css

@@ -4,13 +4,13 @@
   }
 
   to {
-    background-color: var(--sapphire-backdrop-color-background);
+    background-color: var(--sapphire-semantic-color-background-backdrop);
   }
 }
 
 @keyframes backdrop-fade-out {
   from {
-    background-color: var(--sapphire-backdrop-color-background);
+    background-color: var(--sapphire-semantic-color-background-backdrop);
   }
 
   to {
@@ -26,7 +26,7 @@
   align-items: center;
 
   animation-name: backdrop-fade-in;
-  animation-duration: var(--sapphire-backdrop-time-transition);
+  animation-duration: var(--sapphire-semantic-time-fade-default);
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
 }