@danske/sapphire-css 16.3.0 → 25.1.0

package/components/text/text.module.css

@@ -0,0 +1,207 @@
+.sapphire-text {
+  font-family: var(--sapphire-text-font-name-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
+   * can happen in other contexts as well.
+   *
+   * These do not do anything except in webkit browsers & firefox on OSX.
+   *
+   * For more details see:
+   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+   */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.sapphire-text--strong {
+  font-weight: var(--sapphire-text-font-weight-strong);
+}
+
+.sapphire-text--underlined {
+  text-decoration: underline;
+}
+
+/* Heading */
+.sapphire-text--heading-1,
+.sapphire-text--heading-2,
+.sapphire-text--heading-3,
+.sapphire-text--heading-4,
+.sapphire-text--heading-5,
+.sapphire-text--heading-6 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  color: var(--sapphire-text-color-content-heading);
+  line-height: var(--sapphire-text-size-line-height-heading);
+}
+
+.sapphire-text--heading-1 {
+  font-family: var(--sapphire-text-font-name-heading-default-1);
+  font-weight: var(--sapphire-text-font-weight-heading-default-1);
+  font-size: var(--sapphire-text-size-font-heading-1);
+  text-transform: var(--sapphire-text-font-text-transform-heading-default-1);
+  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-1);
+}
+
+.sapphire-text--heading-2 {
+  font-family: var(--sapphire-text-font-name-heading-default-2);
+  font-weight: var(--sapphire-text-font-weight-heading-default-2);
+  font-size: var(--sapphire-text-size-font-heading-2);
+  text-transform: var(--sapphire-text-font-text-transform-heading-default-2);
+  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-2);
+}
+
+.sapphire-text--heading-3 {
+  font-family: var(--sapphire-text-font-name-heading-default-3);
+  font-weight: var(--sapphire-text-font-weight-heading-default-3);
+  font-size: var(--sapphire-text-size-font-heading-3);
+  text-transform: var(--sapphire-text-font-text-transform-heading-default-3);
+  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-3);
+}
+
+.sapphire-text--heading-4 {
+  font-family: var(--sapphire-text-font-name-heading-default-4);
+  font-weight: var(--sapphire-text-font-weight-heading-default-4);
+  font-size: var(--sapphire-text-size-font-heading-4);
+  text-transform: var(--sapphire-text-font-text-transform-heading-default-4);
+  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-4);
+}
+
+.sapphire-text--heading-5 {
+  font-family: var(--sapphire-text-font-name-heading-default-5);
+  font-weight: var(--sapphire-text-font-weight-heading-default-5);
+  font-size: var(--sapphire-text-size-font-heading-5);
+  text-transform: var(--sapphire-text-font-text-transform-heading-default-5);
+  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-5);
+}
+
+.sapphire-text--heading-6 {
+  font-family: var(--sapphire-text-font-name-heading-default-6);
+  font-weight: var(--sapphire-text-font-weight-heading-default-6);
+  font-size: var(--sapphire-text-size-font-heading-6);
+  text-transform: var(--sapphire-text-font-text-transform-heading-default-6);
+  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-6);
+}
+
+/* Alternative Heading */
+
+.sapphire-text--heading-1.sapphire-text--heading-alternative {
+  font-family: var(--sapphire-text-font-name-heading-alternative-1);
+  font-weight: var(--sapphire-text-font-weight-heading-alternative-1);
+  text-transform: var(
+    --sapphire-text-font-text-transform-heading-alternative-1
+  );
+  letter-spacing: var(
+    --sapphire-text-font-letter-spacing-heading-alternative-1
+  );
+}
+
+.sapphire-text--heading-2.sapphire-text--heading-alternative {
+  font-family: var(--sapphire-text-font-name-heading-alternative-2);
+  font-weight: var(--sapphire-text-font-weight-heading-alternative-2);
+  text-transform: var(
+    --sapphire-text-font-text-transform-heading-alternative-2
+  );
+  letter-spacing: var(
+    --sapphire-text-font-letter-spacing-heading-alternative-2
+  );
+}
+
+.sapphire-text--heading-3.sapphire-text--heading-alternative {
+  font-family: var(--sapphire-text-font-name-heading-alternative-3);
+  font-weight: var(--sapphire-text-font-weight-heading-alternative-3);
+  text-transform: var(
+    --sapphire-text-font-text-transform-heading-alternative-3
+  );
+  letter-spacing: var(
+    --sapphire-text-font-letter-spacing-heading-alternative-3
+  );
+}
+
+.sapphire-text--heading-4.sapphire-text--heading-alternative {
+  font-family: var(--sapphire-text-font-name-heading-alternative-4);
+  font-weight: var(--sapphire-text-font-weight-heading-alternative-4);
+  text-transform: var(
+    --sapphire-text-font-text-transform-heading-alternative-4
+  );
+  letter-spacing: var(
+    --sapphire-text-font-letter-spacing-heading-alternative-4
+  );
+}
+
+.sapphire-text--heading-5.sapphire-text--heading-alternative {
+  font-family: var(--sapphire-text-font-name-heading-alternative-5);
+  font-weight: var(--sapphire-text-font-weight-heading-alternative-5);
+  text-transform: var(
+    --sapphire-text-font-text-transform-heading-alternative-5
+  );
+  letter-spacing: var(
+    --sapphire-text-font-letter-spacing-heading-alternative-5
+  );
+}
+
+.sapphire-text--heading-6.sapphire-text--heading-alternative {
+  font-family: var(--sapphire-text-font-name-heading-alternative-6);
+  font-weight: var(--sapphire-text-font-weight-heading-alternative-6);
+  text-transform: var(
+    --sapphire-text-font-text-transform-heading-alternative-6
+  );
+  letter-spacing: var(
+    --sapphire-text-font-letter-spacing-heading-alternative-6
+  );
+}
+
+/* Subheading */
+.sapphire-text--subheading-1,
+.sapphire-text--subheading-2 {
+  color: var(--sapphire-text-color-content-subheading);
+  line-height: var(--sapphire-text-size-line-height-subheading);
+}
+
+.sapphire-text--subheading-1 {
+  font-size: var(--sapphire-text-size-font-subheading-1);
+}
+
+.sapphire-text--subheading-2 {
+  font-size: var(--sapphire-text-size-font-subheading-2);
+}
+
+/* Body text */
+.sapphire-text--body-1,
+.sapphire-text--body-2,
+.sapphire-text--body-3 {
+  color: var(--sapphire-text-color-content-body);
+  line-height: var(--sapphire-text-size-line-height-body);
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.sapphire-text--body-1 {
+  font-size: var(--sapphire-text-size-font-body-1);
+}
+
+.sapphire-text--body-2 {
+  font-size: var(--sapphire-text-size-font-body-2);
+}
+
+.sapphire-text--body-3 {
+  font-size: var(--sapphire-text-size-font-body-3);
+}
+
+/* Caption text */
+.sapphire-text--caption-1,
+.sapphire-text--caption-2 {
+  color: var(--sapphire-text-color-content-caption);
+  font-weight: var(--sapphire-text-font-weight-caption);
+  line-height: var(--sapphire-text-size-line-height-caption);
+}
+
+.sapphire-text--caption-1 {
+  font-size: var(--sapphire-text-size-font-caption-1);
+}
+
+.sapphire-text--caption-2 {
+  font-size: var(--sapphire-text-size-font-caption-2);
+}

package/components/textField/textField.module.css

@@ -1,9 +1,17 @@
 .sapphire-text-field {
-  display: inline-flex;
-  flex-direction: column;
-  font-family: var(--sapphire-text-field-font-name);
   width: var(--sapphire-text-field-size-width-control);
-
+  box-shadow: inset 0px 0px 0px var(--sapphire-text-field-size-width-border)
+    var(--sapphire-text-field-color-border-default);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  border-radius: var(--sapphire-text-field-size-radius);
+  cursor: text;
+  color: var(--sapphire-text-field-color-content);
+  background-color: var(--sapphire-text-field-color-background);
+  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);
   /* 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
@@ -17,37 +25,11 @@
    */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  box-sizing: border-box;
-}
-
-.sapphire-text-field__label-container {
-  display: flex;
-  align-items: center;
-  gap: var(--sapphire-text-field-size-spacing-label-horizontal);
-  min-height: var(--sapphire-text-field-size-height-label);
-  margin-bottom: var(--sapphire-text-field-size-spacing-label-vertical);
-}
-
-.sapphire-text-field__label-text {
-  font-size: var(--sapphire-text-field-size-font-label);
-  font-weight: var(--sapphire-text-field-size-font-weight-label);
-  line-height: var(--sapphire-text-field-size-line-height-label);
-  color: var(--sapphire-text-field-color-label);
 }
 
-.sapphire-text-field__input-container {
-  box-shadow: inset 0px 0px 0px var(--sapphire-text-field-size-width-border)
-    var(--sapphire-text-field-color-border-default);
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  border-radius: var(--sapphire-text-field-size-radius);
-  cursor: text;
-  color: var(--sapphire-text-field-color-content);
-  font-size: var(--sapphire-text-field-size-font-content);
-  height: var(--sapphire-text-field-size-height-field);
-  background-color: var(--sapphire-text-field-color-background);
+.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__input {
@@ -55,7 +37,7 @@
   width: 100%;
   height: 100%;
   margin: 0;
-  padding: 0 var(--sapphire-text-field-size-spacing-control-horizontal);
+  padding: 0 var(--sapphire-text-field-size-spacing-control-horizontal-l);
   line-height: var(--sapphire-text-field-size-line-height-content);
 
   font-family: inherit;
@@ -70,6 +52,10 @@
   outline: none;
 }
 
+.sapphire-text-field--medium .sapphire-text-field__input {
+  padding: 0 var(--sapphire-text-field-size-spacing-control-horizontal-m);
+}
+
 /**
  * Placeholder
  */
@@ -78,12 +64,18 @@
   color: var(--sapphire-text-field-color-placeholder);
 }
 
+/** 
+ * Input text alignment
+ */
+.sapphire-text-field__input--align-right {
+  text-align: right;
+}
+
 /**
  * Single line
  * (this supports a prefix/postfix)
  */
-.sapphire-text-field:not(.sapphire-text-field--multiline)
-  .sapphire-text-field__input-container {
+.sapphire-text-field:not(.sapphire-text-field--multiline) {
   gap: var(--sapphire-text-field-size-spacing-control-gap);
 }
 
@@ -93,23 +85,37 @@
 
 .sapphire-text-field .sapphire-text-field__affix {
   color: var(--sapphire-text-field-color-affix);
+  flex-shrink: 0;
 }
 
 .sapphire-text-field .sapphire-text-field__affix--icon {
-  width: var(--sapphire-text-field-size-affix-icon-width);
-  height: var(--sapphire-text-field-size-affix-icon-height);
+  width: var(--sapphire-text-field-size-affix-icon-width-l);
+  height: var(--sapphire-text-field-size-affix-icon-height-l);
+}
+
+.sapphire-text-field--medium .sapphire-text-field__affix--icon {
+  width: var(--sapphire-text-field-size-affix-icon-width-m);
+  height: var(--sapphire-text-field-size-affix-icon-height-m);
 }
 
-.sapphire-text-field--with-prefix .sapphire-text-field__input-container {
-  padding-left: var(--sapphire-text-field-size-spacing-control-horizontal);
+.sapphire-text-field--with-prefix {
+  padding-left: var(--sapphire-text-field-size-spacing-control-horizontal-l);
+}
+
+.sapphire-text-field--medium .sapphire-text-field--with-prefix {
+  padding-left: var(--sapphire-text-field-size-spacing-control-horizontal-m);
 }
 
 .sapphire-text-field--with-prefix .sapphire-text-field__input {
   padding-left: 0;
 }
 
-.sapphire-text-field--with-postfix .sapphire-text-field__input-container {
-  padding-right: var(--sapphire-text-field-size-spacing-control-horizontal);
+.sapphire-text-field--with-postfix {
+  padding-right: var(--sapphire-text-field-size-spacing-control-horizontal-l);
+}
+
+.sapphire-text-field--medium .sapphire-text-field--with-postfix {
+  padding-right: var(--sapphire-text-field-size-spacing-control-horizontal-m);
 }
 
 .sapphire-text-field--with-postfix .sapphire-text-field__input {
@@ -120,9 +126,8 @@
  * Multiline
  * (this does not support a prefix/postfix)
  */
-.sapphire-text-field--multiline .sapphire-text-field__input-container {
+.sapphire-text-field--multiline {
   display: inline-block;
-  width: 100%;
   line-height: 0;
   height: unset;
   padding: 0;
@@ -131,10 +136,20 @@
 .sapphire-text-field--multiline .sapphire-text-field__input {
   resize: none;
   width: 100%;
-  padding: var(--sapphire-text-field-size-spacing-control-vertical)
-    var(--sapphire-text-field-size-spacing-control-horizontal);
+  padding: var(--sapphire-text-field-size-spacing-control-vertical-l)
+    var(--sapphire-text-field-size-spacing-control-horizontal-l);
+  scroll-padding-bottom: var(
+    --sapphire-text-field-size-spacing-control-vertical-l
+  );
+}
+
+.sapphire-text-field--medium
+  .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);
   scroll-padding-bottom: var(
-    --sapphire-text-field-size-spacing-control-vertical
+    --sapphire-text-field-size-spacing-control-vertical-m
   );
 }
 
@@ -146,63 +161,26 @@
   resize: vertical;
 }
 
-/**
- * Note
- */
-
-.sapphire-text-field__note-row {
-  display: flex;
-  justify-content: space-between;
-  font-size: var(--sapphire-text-field-size-font-note);
-  line-height: var(--sapphire-text-field-size-line-height-note);
-  color: var(--sapphire-text-field-color-note-default);
-  margin-top: var(--sapphire-text-field-size-spacing-note-vertical);
-}
-
 .sapphire-text-field__counter {
   color: var(--sapphire-text-field-color-counter-default);
   padding-left: var(--sapphire-text-field-size-spacing-note-horizontal);
   margin-left: auto;
 }
 
-.sapphire-text-field__note {
-  display: block;
-  font-size: var(--sapphire-text-field-size-font-note);
-  line-height: var(--sapphire-text-field-size-line-height-note);
-  color: var(--sapphire-text-field-color-note-default);
-}
-
-.sapphire-text-field--error .sapphire-text-field__note {
-  color: var(--sapphire-text-field-color-note-error);
+.sapphire-text-field__counter--error {
+  color: var(--sapphire-text-field-color-counter-error);
 }
 
-.sapphire-text-field--error .sapphire-text-field__input-container {
+.sapphire-text-field--error {
   box-shadow: inset 0px 0px 0px var(--sapphire-text-field-size-width-border)
     var(--sapphire-text-field-color-border-error);
 }
 
-.sapphire-text-field--counter-error .sapphire-text-field__counter {
-  color: var(--sapphire-text-field-color-counter-error);
-}
-
 /**
  * Focus
  */
-.sapphire-text-field.is-focus .sapphire-text-field__input-container,
-.sapphire-text-field .sapphire-text-field__input-container:focus-within,
-.sapphire-text-field--error .sapphire-text-field__input-container:focus-within {
+.sapphire-text-field.is-focus,
+.sapphire-text-field:focus-within {
   box-shadow: inset 0px 0px 0px var(--sapphire-text-field-size-focus-ring)
     var(--sapphire-text-field-color-focus-ring);
 }
-
-/**
- * Disabled
- */
-.sapphire-text-field.is-disabled {
-  opacity: var(--sapphire-text-field-opacity-disabled);
-  cursor: not-allowed;
-}
-
-.sapphire-text-field.is-disabled .sapphire-text-field__input {
-  cursor: not-allowed;
-}

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

@@ -1,22 +1,18 @@
 declare const styles: {
   readonly "sapphire-text-field": string;
-  readonly "sapphire-text-field__label-container": string;
-  readonly "sapphire-text-field__label-text": string;
-  readonly "sapphire-text-field__input-container": string;
+  readonly "sapphire-text-field--medium": string;
   readonly "sapphire-text-field__input": string;
+  readonly "sapphire-text-field__input--align-right": string;
   readonly "sapphire-text-field--multiline": string;
   readonly "sapphire-text-field__affix": string;
   readonly "sapphire-text-field__affix--icon": string;
   readonly "sapphire-text-field--with-prefix": string;
   readonly "sapphire-text-field--with-postfix": string;
   readonly "sapphire-text-field--resizable": string;
-  readonly "sapphire-text-field__note-row": string;
   readonly "sapphire-text-field__counter": string;
-  readonly "sapphire-text-field__note": string;
+  readonly "sapphire-text-field__counter--error": string;
   readonly "sapphire-text-field--error": string;
-  readonly "sapphire-text-field--counter-error": string;
   readonly "is-focus": string;
-  readonly "is-disabled": string;
 };
 export = styles;
 

package/components/toast/toast.module.css

@@ -0,0 +1,101 @@
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0) translateX(-50%) scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) translateX(-50%) scale(1);
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.sapphire-toast-container {
+  position: fixed;
+  bottom: var(--sapphire-toast-size-offset);
+  left: 50%;
+}
+
+.sapphire-toast {
+  position: absolute;
+  bottom: 0;
+
+  /* absolute position & center */
+  transform: translateX(-50%);
+
+  /* let the text grow until max-width */
+  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);
+  border-radius: var(--sapphire-toast-size-radius);
+  animation-duration: var(--sapphire-toast-time-transition);
+
+  /* Ease-out Cubic */
+  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
+
+  /* if implemented as focusable, we don't want the outline because this is not
+   * an an interactive element in itself */
+  outline: none;
+
+  /* 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
+   * can happen in other contexts as well.
+   *
+   * These do not do anything except in webkit browsers & firefox on OSX.
+   *
+   * For more details see:
+   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+   */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.sapphire-toast--entering {
+  animation-name: fade-in-up;
+}
+
+/* This represents the toast which appears immediately after the current one
+ * disappears */
+.sapphire-toast--queued {
+  opacity: 0;
+  animation-name: fade-in-up;
+  animation-delay: var(--sapphire-toast-time-transition);
+  animation-fill-mode: forwards;
+}
+
+.sapphire-toast--exiting {
+  animation-name: fade-out;
+  animation-fill-mode: forwards;
+}
+
+.sapphire-toast__content {
+  display: flex;
+  gap: var(--sapphire-toast-size-spacing-horizontal);
+  align-items: center;
+  justify-content: space-between;
+
+  background-color: var(--sapphire-toast-color-background);
+  color: var(--sapphire-toast-color-content);
+  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);
+}

package/components/tooltip/tooltip.module.css

@@ -8,17 +8,11 @@
 }
 
 .sapphire-tooltip {
-  background-color: var(--sapphire-tooltip-color-background);
+  display: inline-block;
   box-shadow: var(--sapphire-tooltip-shadow);
-  color: var(--sapphire-tooltip-color-content);
-  line-height: var(--sapphire-tooltip-size-line-height);
   max-width: var(--sapphire-tooltip-size-width-max);
   border-radius: var(--sapphire-tooltip-size-radius);
-  font-family: var(--sapphire-tooltip-font-name);
-  font-weight: var(--sapphire-tooltip-font-weight);
-  font-size: var(--sapphire-tooltip-size-font);
-  padding: var(--sapphire-tooltip-size-spacing-vertical)
-    var(--sapphire-tooltip-size-spacing-horizontal);
+  overflow: hidden;
   /* if implemented as focusable, we don't want the outline because this is not
    * an an interactive element in itself */
   outline: none;
@@ -39,3 +33,14 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.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);
+}

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

@@ -1,6 +1,7 @@
 declare const styles: {
   readonly "sapphire-tooltip": string;
   readonly "fade-in": string;
+  readonly "sapphire-tooltip__content": string;
 };
 export = styles;
 

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "16.3.0",
-  "sideEffects": false,
+  "version": "25.1.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
+  "sideEffects": false,
   "files": [
     "/components/**/*.css",
     "/components/**/*.d.ts",
     "/themes/**/*.css",
+    "/themes/**/*.scss",
     "/themes/**/*.js",
     "/themes/**/*.d.ts",
     "/build"
@@ -27,10 +28,11 @@
   },
   "scripts": {
     "build": "yarn run build:types && yarn run build:themes",
-    "test": "yarn run test:stylelint",
+    "test": "yarn run test:stylelint && yarn run test:findUnusedTokens",
     "test:stylelint": "stylelint components/**/*.module.css",
+    "test:findUnusedTokens": "stylelint components/**/*.module.css",
     "watch:types": "yarn run types -- -w",
-    "storybook": "start-storybook -p 6007",
+    "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6007",
     "build:storybook": "build-storybook --docs -o dist",
     "build:types": "tcm -p /**/*.module.css",
     "build:themes": "yarn build:themes:esm && yarn build:themes:cjs",
@@ -43,8 +45,9 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@danske/sapphire-react": "^2.1.4",
-    "@danske/sapphire-icons": "^1.1.0",
+    "cross-env": "^7.0.3",
+    "@danske/sapphire-react": "3.0.0",
+    "@danske/sapphire-icons": "^2.0.0",
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-links": "^6.5.13",
     "@storybook/addons": "^6.5.13",
@@ -63,6 +66,6 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^19.0.0"
+    "@danske/sapphire-design-tokens": "^35.2.0"
   }
 }

package/themes/default-dark.assets.css

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

package/themes/default-dark.d.ts

@@ -1,3 +1,4 @@
 import '@danske/sapphire-design-tokens/build/themes/default-dark/assets/fonts/danske/fontFace.css';
-declare const _default: string;
-export default _default;
+import type { Theme } from '.';
+declare const theme: Theme;
+export default theme;