@danske/sapphire-css 32.2.0 → 33.0.0

package/components/textField/textField.module.css

@@ -1,19 +1,19 @@
 .sapphire-text-field {
-  width: var(--sapphire-text-field-size-width-control);
-  outline: solid var(--sapphire-text-field-size-width-border)
-    var(--sapphire-text-field-color-border-default);
-  outline-offset: calc(0px - var(--sapphire-text-field-size-width-border));
+  width: var(--sapphire-semantic-size-width-control-default);
+  outline: solid var(--sapphire-semantic-size-border-sm)
+    var(--sapphire-semantic-color-border-field-default);
+  outline-offset: calc(0px - var(--sapphire-semantic-size-border-sm));
   box-sizing: border-box;
   overflow-x: hidden;
   display: flex;
   align-items: center;
-  border-radius: var(--sapphire-text-field-size-radius);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
   cursor: text;
-  color: var(--sapphire-text-field-color-content-control);
-  background-color: var(--sapphire-text-field-color-background-control);
-  height: var(--sapphire-text-field-size-height-field-l);
-  font-family: var(--sapphire-text-field-font-name);
-  font-size: var(--sapphire-text-field-size-font-content-l);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  background-color: var(--sapphire-semantic-color-background-field-default);
+  height: var(--sapphire-semantic-size-height-input-lg);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-size: var(--sapphire-semantic-size-font-control-default);
   /* 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
    * occurs for bold fonts on dark backgrounds but depending on the font, it
@@ -29,9 +29,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.sapphire-text-field--medium {
-  height: var(--sapphire-text-field-size-height-field-m);
-  font-size: var(--sapphire-text-field-size-font-content-m);
+.sapphire-text-field--md {
+  height: var(--sapphire-semantic-size-height-input-md);
+  font-size: var(--sapphire-semantic-size-font-control-md);
 }
 
 .sapphire-text-field__input {
@@ -39,14 +39,14 @@
   width: 100%;
   height: 100%;
   margin: 0;
-  padding: 0 var(--sapphire-text-field-size-spacing-control-horizontal-l);
-  line-height: var(--sapphire-text-field-size-line-height-content);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  line-height: var(--sapphire-semantic-size-line-height-md);
 
   font-family: inherit;
   font-size: inherit;
-  font-weight: var(--sapphire-text-field-size-font-weight-input);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
 
-  caret-color: var(--sapphire-text-field-color-caret);
+  caret-color: var(--sapphire-semantic-color-background-action-primary-default);
   color: inherit;
 
   background-color: transparent;
@@ -54,8 +54,8 @@
   outline: none;
 }
 
-.sapphire-text-field--medium .sapphire-text-field__input {
-  padding: 0 var(--sapphire-text-field-size-spacing-control-horizontal-m);
+.sapphire-text-field--md .sapphire-text-field__input {
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
 }
 
 /**
@@ -63,10 +63,10 @@
  */
 .sapphire-text-field__input::placeholder {
   opacity: 1; /* some browsers set a lower than 1 opacity */
-  color: var(--sapphire-text-field-color-placeholder);
+  color: var(--sapphire-semantic-color-content-default-secondary);
 }
 
-/** 
+/**
  * Input text alignment
  */
 .sapphire-text-field__input--align-right {
@@ -78,7 +78,7 @@
  * (this supports a prefix/postfix)
  */
 .sapphire-text-field:not(.sapphire-text-field--multiline) {
-  gap: var(--sapphire-text-field-size-spacing-control-gap);
+  gap: var(--sapphire-semantic-size-spacing-20);
 }
 
 /**
@@ -91,14 +91,14 @@
 }
 
 .sapphire-text-field .sapphire-text-field__prefix {
-  color: var(--sapphire-text-field-color-affix);
+  color: var(--sapphire-semantic-color-content-default-primary);
   flex-shrink: 0;
   z-index: 1;
-  margin-left: var(--sapphire-text-field-size-spacing-control-horizontal-l);
+  margin-left: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
 }
 
-.sapphire-text-field--medium .sapphire-text-field__prefix {
-  margin-left: var(--sapphire-text-field-size-spacing-control-horizontal-m);
+.sapphire-text-field--md .sapphire-text-field__prefix {
+  margin-left: var(--sapphire-semantic-size-spacing-control-horizontal-md);
 }
 
 /**
@@ -111,14 +111,14 @@
 }
 
 .sapphire-text-field .sapphire-text-field__postfix {
-  color: var(--sapphire-text-field-color-affix);
+  color: var(--sapphire-semantic-color-content-default-primary);
   flex-shrink: 0;
   z-index: 1;
-  margin-right: var(--sapphire-text-field-size-spacing-control-horizontal-l);
+  margin-right: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
 }
 
-.sapphire-text-field--medium .sapphire-text-field__postfix {
-  margin-right: var(--sapphire-text-field-size-spacing-control-horizontal-m);
+.sapphire-text-field--md .sapphire-text-field__postfix {
+  margin-right: var(--sapphire-semantic-size-spacing-control-horizontal-md);
 }
 
 /**
@@ -127,14 +127,14 @@
 
 .sapphire-text-field .sapphire-text-field__prefix--icon,
 .sapphire-text-field .sapphire-text-field__postfix--icon {
-  width: var(--sapphire-text-field-size-affix-icon-width-l);
-  height: var(--sapphire-text-field-size-affix-icon-height-l);
+  width: var(--sapphire-semantic-size-icon-lg);
+  height: var(--sapphire-semantic-size-icon-lg);
 }
 
-.sapphire-text-field--medium .sapphire-text-field__prefix--icon,
-.sapphire-text-field--medium .sapphire-text-field__postfix--icon {
-  width: var(--sapphire-text-field-size-affix-icon-width-m);
-  height: var(--sapphire-text-field-size-affix-icon-height-m);
+.sapphire-text-field--md .sapphire-text-field__prefix--icon,
+.sapphire-text-field--md .sapphire-text-field__postfix--icon {
+  width: var(--sapphire-semantic-size-icon-md);
+  height: var(--sapphire-semantic-size-icon-md);
 }
 
 /**
@@ -151,20 +151,20 @@
 .sapphire-text-field--multiline .sapphire-text-field__input {
   resize: none;
   width: 100%;
-  padding: var(--sapphire-text-field-size-spacing-control-vertical-l)
-    var(--sapphire-text-field-size-spacing-control-horizontal-l);
+  padding: var(--sapphire-semantic-size-spacing-control-vertical-lg)
+    var(--sapphire-semantic-size-spacing-control-horizontal-lg);
   scroll-padding-bottom: var(
-    --sapphire-text-field-size-spacing-control-vertical-l
+    --sapphire-semantic-size-spacing-control-vertical-lg
   );
 }
 
-.sapphire-text-field--medium
+.sapphire-text-field--md
   .sapphire-text-field--multiline
   .sapphire-text-field__input {
-  padding: var(--sapphire-text-field-size-spacing-control-vertical-m)
-    var(--sapphire-text-field-size-spacing-control-horizontal-m);
+  padding: var(--sapphire-semantic-size-spacing-control-vertical-md)
+    var(--sapphire-semantic-size-spacing-control-horizontal-md);
   scroll-padding-bottom: var(
-    --sapphire-text-field-size-spacing-control-vertical-m
+    --sapphire-semantic-size-spacing-control-vertical-md
   );
 }
 
@@ -177,18 +177,18 @@
 }
 
 .sapphire-text-field__counter {
-  color: var(--sapphire-text-field-color-counter-default);
-  padding-left: var(--sapphire-text-field-size-spacing-note-horizontal);
+  color: var(--sapphire-semantic-color-content-default-secondary);
+  padding-left: var(--sapphire-semantic-size-spacing-20);
   margin-left: auto;
 }
 
 .sapphire-text-field__counter--error {
-  color: var(--sapphire-text-field-color-counter-error);
+  color: var(--sapphire-semantic-color-content-negative-secondary-default);
 }
 
 .sapphire-text-field--error {
-  outline: solid var(--sapphire-text-field-size-width-border)
-    var(--sapphire-text-field-color-border-error);
+  outline: solid var(--sapphire-semantic-size-border-sm)
+    var(--sapphire-semantic-color-border-field-error);
 }
 
 /**
@@ -196,39 +196,39 @@
  */
 .sapphire-text-field.is-focus,
 .sapphire-text-field:focus-within {
-  outline: solid var(--sapphire-text-field-size-focus-ring)
-    var(--sapphire-text-field-color-focus-ring);
-  outline-offset: calc(0px - var(--sapphire-text-field-size-focus-ring));
+  outline: solid var(--sapphire-semantic-size-focus-ring)
+    var(--sapphire-semantic-color-focus-ring);
+  outline-offset: calc(0px - var(--sapphire-semantic-size-focus-ring));
 }
 
 .sapphire-text-field.is-focus .sapphire-text-field__input:autofill,
 .sapphire-text-field:focus-within .sapphire-text-field__input:autofill {
-  /* 
+  /*
   * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
-  * Overriding background-color property of auto filled input is not possible, 
+  * Overriding background-color property of auto filled input is not possible,
   * so box-shadow is used here to achieve the same look.
-  * Fixes the state when the field is focused and the user is hovering 
+  * Fixes the state when the field is focused and the user is hovering
   * or focusing on the list of browser autofilling suggestions.
   */
-  box-shadow: 0 0 0 var(--sapphire-text-field-size-height-field-l) inset
-    var(--sapphire-text-field-color-background-control) !important;
+  box-shadow: 0 0 0 var(--sapphire-semantic-size-height-input-lg) inset
+    var(--sapphire-semantic-color-background-surface) !important;
 }
 
 /**
  * Stepper
- * 
+ *
  * This is used in some numeric inputs
  */
 .sapphire-text-field__stepper {
   display: flex;
   flex-direction: column;
   justify-items: stretch;
-  padding: var(--sapphire-text-field-size-spacing-control-stepper)
+  padding: var(--sapphire-semantic-size-spacing-5)
     calc(
-      var(--sapphire-text-field-size-spacing-control-stepper) +
-        var(--sapphire-text-field-size-width-border)
+      var(--sapphire-semantic-size-spacing-5) +
+        var(--sapphire-semantic-size-border-sm)
     );
-  gap: var(--sapphire-text-field-size-spacing-control-stepper);
+  gap: var(--sapphire-semantic-size-spacing-5);
 }
 
 .sapphire-text-field:has(.sapphire-text-field__stepper)
@@ -240,7 +240,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--sapphire-text-field-size-width-stepper-l);
+  width: var(--sapphire-semantic-size-icon-md);
 
   /* In Safari buttons get a 2px border
    * https://github.com/necolas/normalize.css/blob/master/normalize.css#L160-L169
@@ -253,7 +253,7 @@
 
   /* shape */
   border-radius: var(
-    --sapphire-text-field-size-radius
+    --sapphire-semantic-size-radius-sm
   ); /* same as the control */
   border-style: solid;
   border-width: 0;
@@ -262,29 +262,35 @@
   /* transition */
   /* we don't want to transition outline-offset */
   transition-property: opacity, background-color, color;
-  transition-duration: var(--sapphire-text-field-time-transition);
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: ease-in-out;
   cursor: pointer;
 
   /* color */
-  background-color: var(--sapphire-text-field-color-background-stepper-default);
-  color: var(--sapphire-text-field-color-content-stepper-default);
+  background-color: var(
+    --sapphire-semantic-color-background-action-tertiary-default
+  );
+  color: var(--sapphire-semantic-color-content-action-tertiary-default);
 }
 
 .sapphire-text-field__stepper-button:not(:active):not(.is-active):not(
     .js-hover
   ):hover,
 .sapphire-text-field__stepper-button:not(:active):not(.is-active).is-hover {
-  background-color: var(--sapphire-text-field-color-background-stepper-hover);
-  color: var(--sapphire-text-field-color-content-stepper-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-action-tertiary-hover
+  );
+  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
 }
 
 .sapphire-text-field__stepper-button.is-active,
 .sapphire-text-field__stepper-button:active {
-  background-color: var(--sapphire-text-field-color-background-stepper-active);
-  color: var(--sapphire-text-field-color-content-stepper-active);
+  background-color: var(
+    --sapphire-semantic-color-background-action-tertiary-active
+  );
+  color: var(--sapphire-semantic-color-content-action-tertiary-active);
 }
 
-.sapphire-text-field--medium.sapphire-text-field__stepper-button {
-  width: var(--sapphire-text-field-size-width-stepper-m);
+.sapphire-text-field--md.sapphire-text-field__stepper-button {
+  width: var(--sapphire-semantic-size-icon-sm);
 }

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

@@ -1,6 +1,6 @@
 declare const styles: {
   readonly "sapphire-text-field": string;
-  readonly "sapphire-text-field--medium": string;
+  readonly "sapphire-text-field--md": string;
   readonly "sapphire-text-field__input": string;
   readonly "sapphire-text-field__input--align-right": string;
   readonly "sapphire-text-field--multiline": string;

package/components/toast/toast.module.css

@@ -29,7 +29,7 @@
 .sapphire-toast-container {
   pointer-events: none;
   position: fixed;
-  margin: var(--sapphire-toast-size-offset);
+  margin: var(--sapphire-semantic-size-spacing-40);
 }
 
 /* Placement */
@@ -85,11 +85,11 @@
   width: max-content;
 
   overflow: hidden;
-  max-width: var(--sapphire-toast-size-width-max);
-  min-width: var(--sapphire-toast-size-width-min);
-  box-shadow: var(--sapphire-toast-shadow);
+  max-width: var(--sapphire-global-size-generic-1400);
+  min-width: var(--sapphire-global-size-generic-750);
+  box-shadow: var(--sapphire-global-shadow-sm);
   border-radius: var(--sapphire-semantic-size-radius-popover);
-  animation-duration: var(--sapphire-toast-time-transition);
+  animation-duration: var(--sapphire-semantic-time-motion-default);
 
   /* Ease-out Cubic */
   animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
@@ -122,7 +122,7 @@
 .sapphire-toast--queued {
   opacity: 0;
   animation-name: fade-in;
-  animation-delay: var(--sapphire-toast-time-transition);
+  animation-delay: var(--sapphire-semantic-time-motion-default);
   animation-fill-mode: forwards;
 }
 
@@ -137,17 +137,15 @@
   align-items: center;
   justify-content: space-between;
 
-  background-color: var(
-    --sapphire-semantic-color-background-surface-primary-default
-  );
+  background-color: var(--sapphire-semantic-color-background-surface);
   color: var(--sapphire-semantic-color-content-default-primary);
-  font-family: var(--sapphire-toast-font-name);
-  font-size: var(--sapphire-toast-size-font);
-  font-weight: var(--sapphire-toast-font-weight);
-  line-height: var(--sapphire-toast-size-line-height);
-  padding: var(--sapphire-toast-size-spacing-vertical)
-    var(--sapphire-toast-size-spacing-horizontal);
-  padding-right: var(--sapphire-toast-size-spacing-end);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-size: var(--sapphire-global-size-font-88);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  line-height: var(--sapphire-semantic-size-line-height-md);
+  padding: var(--sapphire-semantic-size-spacing-20)
+    var(--sapphire-semantic-size-spacing-40);
+  padding-right: var(--sapphire-semantic-size-spacing-20);
 }
 
 .sapphire-toast__content--success {
@@ -196,12 +194,12 @@
   -moz-osx-font-smoothing: grayscale;
 
   /* sizing */
-  height: var(--sapphire-semantic-size-height-control-s);
-  width: var(--sapphire-semantic-size-height-control-s);
+  height: var(--sapphire-semantic-size-height-control-sm);
+  width: var(--sapphire-semantic-size-height-control-sm);
   flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */
 
   /* shape */
-  border-radius: var(--sapphire-semantic-size-height-control-s);
+  border-radius: var(--sapphire-semantic-size-height-control-sm);
   border-style: solid;
   border-width: 0;
   border-color: transparent;

package/components/tooltip/tooltip.module.css

@@ -9,16 +9,16 @@
 
 .sapphire-tooltip {
   display: inline-block;
-  box-shadow: var(--sapphire-tooltip-shadow);
-  max-width: var(--sapphire-tooltip-size-width-max);
-  border-radius: var(--sapphire-tooltip-size-radius);
+  box-shadow: var(--sapphire-semantic-shadow-popover);
+  max-width: var(--sapphire-global-size-generic-750);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
   overflow-wrap: break-word;
   overflow: hidden;
   /* if implemented as focusable, we don't want the outline because this is not
    * an an interactive element in itself */
   outline: none;
 
-  animation: fade-in var(--sapphire-tooltip-time-transition) ease-in-out;
+  animation: fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;
 
   /* 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
@@ -36,12 +36,12 @@
 }
 
 .sapphire-tooltip__content {
-  background-color: var(--sapphire-tooltip-color-background);
-  color: var(--sapphire-tooltip-color-content);
-  font-family: var(--sapphire-tooltip-font-name);
-  font-weight: var(--sapphire-tooltip-font-weight);
-  font-size: var(--sapphire-tooltip-size-font);
-  line-height: var(--sapphire-tooltip-size-line-height);
-  padding: var(--sapphire-tooltip-size-spacing-vertical)
-    var(--sapphire-tooltip-size-spacing-horizontal);
+  background-color: var(--sapphire-semantic-color-background-surface);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+  font-size: var(--sapphire-global-size-font-88);
+  line-height: var(--sapphire-semantic-size-line-height-md);
+  padding: var(--sapphire-semantic-size-spacing-10)
+    var(--sapphire-semantic-size-spacing-20);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "32.2.0",
+  "version": "33.0.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -66,7 +66,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^40.0.1"
+    "@danske/sapphire-design-tokens": "^41.0.0"
   },
-  "gitHead": "fd750fe463ba6d4f8a15c35e6f660fd6e46d0ec7"
+  "gitHead": "42619f28a8015091b0481151c8c9ddde0074fe0a"
 }

package/themes/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/themes/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/themes/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/cjs/june-dark.d.ts

@@ -1,5 +0,0 @@
-import '@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/fira/fontFace.css';
-import '@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/playfair/fontFace.css';
-import type { Theme } from '.';
-declare const theme: Theme;
-export default theme;

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

@@ -1,13 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-require("@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/fira/fontFace.css");
-require("@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/playfair/fontFace.css");
-var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-tokens/build/themes/june-dark/css/tokens.module.css"));
-var theme = {
-    themeClassName: tokens_module_css_1["default"]['sapphire-theme-june-dark'],
-    contrastThemeClassName: tokens_module_css_1["default"]['sapphire-theme-contrast']
-};
-exports["default"] = theme;

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

@@ -1,5 +0,0 @@
-import '@danske/sapphire-design-tokens/build/themes/june/assets/fonts/fira/fontFace.css';
-import '@danske/sapphire-design-tokens/build/themes/june/assets/fonts/playfair/fontFace.css';
-import type { Theme } from '.';
-declare const theme: Theme;
-export default theme;

package/build/themes/cjs/june.js

@@ -1,13 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-require("@danske/sapphire-design-tokens/build/themes/june/assets/fonts/fira/fontFace.css");
-require("@danske/sapphire-design-tokens/build/themes/june/assets/fonts/playfair/fontFace.css");
-var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-tokens/build/themes/june/css/tokens.module.css"));
-var theme = {
-    themeClassName: tokens_module_css_1["default"]['sapphire-theme-june'],
-    contrastThemeClassName: tokens_module_css_1["default"]['sapphire-theme-contrast']
-};
-exports["default"] = theme;

package/build/themes/esm/june-dark.d.ts

@@ -1,5 +0,0 @@
-import '@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/fira/fontFace.css';
-import '@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/playfair/fontFace.css';
-import type { Theme } from '.';
-declare const theme: Theme;
-export default theme;

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

@@ -1,8 +0,0 @@
-import '@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/fira/fontFace.css';
-import '@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/playfair/fontFace.css';
-import styles from '@danske/sapphire-design-tokens/build/themes/june-dark/css/tokens.module.css';
-var theme = {
-    themeClassName: styles['sapphire-theme-june-dark'],
-    contrastThemeClassName: styles['sapphire-theme-contrast']
-};
-export default theme;

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

@@ -1,5 +0,0 @@
-import '@danske/sapphire-design-tokens/build/themes/june/assets/fonts/fira/fontFace.css';
-import '@danske/sapphire-design-tokens/build/themes/june/assets/fonts/playfair/fontFace.css';
-import type { Theme } from '.';
-declare const theme: Theme;
-export default theme;

package/build/themes/esm/june.js

@@ -1,8 +0,0 @@
-import '@danske/sapphire-design-tokens/build/themes/june/assets/fonts/fira/fontFace.css';
-import '@danske/sapphire-design-tokens/build/themes/june/assets/fonts/playfair/fontFace.css';
-import styles from '@danske/sapphire-design-tokens/build/themes/june/css/tokens.module.css';
-var theme = {
-    themeClassName: styles['sapphire-theme-june'],
-    contrastThemeClassName: styles['sapphire-theme-contrast']
-};
-export default theme;

package/themes/default-dark.css

@@ -1,2 +0,0 @@
-@import '~@danske/sapphire-design-tokens/build/themes/default-dark/assets/fonts/danske/fontFace.css';
-@import '~@danske/sapphire-design-tokens/build/themes/default-dark/css/tokens.css';

package/themes/june-dark.css

@@ -1,3 +0,0 @@
-@import '~@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/fira/fontFace.css';
-@import '~@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/playfair/fontFace.css';
-@import '~@danske/sapphire-design-tokens/build/themes/june-dark/css/tokens.css';

package/themes/june-dark.d.ts

@@ -1,5 +0,0 @@
-import '@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/fira/fontFace.css';
-import '@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/playfair/fontFace.css';
-import type { Theme } from '.';
-declare const theme: Theme;
-export default theme;

package/themes/june-dark.js

@@ -1,13 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-require("@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/fira/fontFace.css");
-require("@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/playfair/fontFace.css");
-var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-tokens/build/themes/june-dark/css/tokens.module.css"));
-var theme = {
-    themeClassName: tokens_module_css_1["default"]['sapphire-theme-june-dark'],
-    contrastThemeClassName: tokens_module_css_1["default"]['sapphire-theme-contrast']
-};
-exports["default"] = theme;

package/themes/june-dark.scss

@@ -1,3 +0,0 @@
-@use '@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/fira/fontFace.css';
-@use '@danske/sapphire-design-tokens/build/themes/june-dark/assets/fonts/playfair/fontFace.css';
-@use '@danske/sapphire-design-tokens/build/themes/june-dark/css/tokens.css';

package/themes/june.css

@@ -1,3 +0,0 @@
-@import '~@danske/sapphire-design-tokens/build/themes/june/assets/fonts/fira/fontFace.css';
-@import '~@danske/sapphire-design-tokens/build/themes/june/assets/fonts/playfair/fontFace.css';
-@import '~@danske/sapphire-design-tokens/build/themes/june/css/tokens.css';

package/themes/june.d.ts

@@ -1,5 +0,0 @@
-import '@danske/sapphire-design-tokens/build/themes/june/assets/fonts/fira/fontFace.css';
-import '@danske/sapphire-design-tokens/build/themes/june/assets/fonts/playfair/fontFace.css';
-import type { Theme } from '.';
-declare const theme: Theme;
-export default theme;

package/themes/june.js

@@ -1,13 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-require("@danske/sapphire-design-tokens/build/themes/june/assets/fonts/fira/fontFace.css");
-require("@danske/sapphire-design-tokens/build/themes/june/assets/fonts/playfair/fontFace.css");
-var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-tokens/build/themes/june/css/tokens.module.css"));
-var theme = {
-    themeClassName: tokens_module_css_1["default"]['sapphire-theme-june'],
-    contrastThemeClassName: tokens_module_css_1["default"]['sapphire-theme-contrast']
-};
-exports["default"] = theme;

package/themes/june.scss

@@ -1,3 +0,0 @@
-@use '@danske/sapphire-design-tokens/build/themes/june/assets/fonts/fira/fontFace.css';
-@use '@danske/sapphire-design-tokens/build/themes/june/assets/fonts/playfair/fontFace.css';
-@use '@danske/sapphire-design-tokens/build/themes/june/css/tokens.css';