@danske/sapphire-css 32.2.1 → 33.0.0

package/components/dropzone/dropzone.module.css

@@ -5,15 +5,15 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  background-color: var(--sapphire-dropzone-color-background-default);
-  width: var(--sapphire-dropzone-size-width-zone);
-  min-width: var(--sapphire-dropzone-size-width-zone);
-  height: var(--sapphire-dropzone-size-height-zone);
-  min-height: var(--sapphire-dropzone-size-height-zone);
-  padding: var(--sapphire-dropzone-size-spacing-padding);
-  border-radius: var(--sapphire-dropzone-size-radius-border);
+  background-color: var(--sapphire-semantic-color-background-control-default);
+  width: var(--sapphire-global-size-generic-800);
+  min-width: var(--sapphire-global-size-generic-800);
+  height: var(--sapphire-global-size-generic-400);
+  min-height: var(--sapphire-global-size-generic-400);
+  padding: var(--sapphire-semantic-size-spacing-50);
+  border-radius: var(--sapphire-semantic-size-radius-lg);
   transition-property: opacity, background-color, color;
-  transition-duration: var(--sapphire-dropzone-time-transition);
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: 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
@@ -42,15 +42,15 @@
   /* Dashed borders cannot be customised, so we use a trick with the SVG image to customise it */
   mask: var(--mask-data);
   -webkit-mask: var(--mask-data);
-  background: var(--sapphire-dropzone-color-border-default);
-  border-radius: var(--sapphire-dropzone-size-radius-border);
+  background: var(--sapphire-semantic-color-border-primary-default);
+  border-radius: var(--sapphire-semantic-size-radius-lg);
   transition-property: opacity, background-color, color;
-  transition-duration: var(--sapphire-dropzone-time-transition);
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: ease-in-out;
 }
 
 .sapphire-dropzone.sapphire-dropzone--error::before {
-  background: var(--sapphire-dropzone-color-border-error);
+  background: var(--sapphire-semantic-color-border-field-error);
 }
 
 .sapphire-dropzone:not(:disabled):not(.is-disabled):not(:active):not(
@@ -59,7 +59,9 @@
 .sapphire-dropzone:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background-color: var(--sapphire-dropzone-color-background-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-hover
+  );
 }
 
 .sapphire-dropzone:not(:disabled):not(.is-disabled).sapphire-dropzone:active,
@@ -69,7 +71,9 @@
 .sapphire-dropzone:not(:disabled):not(
     .is-disabled
   ).sapphire-dropzone.is-active {
-  background-color: var(--sapphire-dropzone-color-background-active);
+  background-color: var(
+    --sapphire-semantic-color-background-selection-unselected-active
+  );
 }
 
 .sapphire-dropzone:focus {
@@ -85,21 +89,23 @@
 .sapphire-dropzone:not(.js-focus):focus-visible::before {
   mask: var(--mask-data);
   -webkit-mask: var(--mask-data);
-  background: var(--sapphire-dropzone-color-focus-ring);
+  background: var(--sapphire-semantic-color-focus-ring);
 }
 
 .sapphire-dropzone:disabled,
 .sapphire-dropzone.is-disabled {
-  opacity: var(--sapphire-dropzone-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
   cursor: not-allowed;
 }
 
 .sapphire-dropzone--dropping {
-  background: var(--sapphire-dropzone-color-background-dropping);
+  background: var(
+    --sapphire-semantic-color-background-selection-selected-hover
+  );
 }
 
 .sapphire-dropzone.sapphire-dropzone--dropping::before {
-  background: var(--sapphire-dropzone-color-border-dropping);
+  background: var(--sapphire-semantic-color-content-action-secondary-default);
 }
 
 .sapphire-dropzone__content {
@@ -110,18 +116,18 @@
 }
 
 .sapphire-dropzone__icon {
-  color: var(--sapphire-dropzone-color-content-icon-default);
-  margin-bottom: var(--sapphire-dropzone-size-spacing-icon-vertical);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  margin-bottom: var(--sapphire-semantic-size-spacing-control-vertical-lg);
 }
 
 .sapphire-dropzone--dropping .sapphire-dropzone__icon {
-  color: var(--sapphire-dropzone-color-content-icon-dropping);
+  color: var(--sapphire-semantic-color-background-action-primary-default);
 }
 
 .sapphire-dropzone__heading {
-  margin-bottom: var(--sapphire-dropzone-size-spacing-heading-vertical);
+  margin-bottom: var(--sapphire-semantic-size-spacing-control-vertical-sm);
 }
 
 .sapphire-dropzone--error .sapphire-dropzone__paragraph > * {
-  color: var(--sapphire-dropzone-color-content-font-error);
+  color: var(--sapphire-semantic-color-content-negative-secondary-default);
 }

package/components/feedbackMessage/feedbackMessage.module.css

@@ -4,39 +4,39 @@
   align-items: center;
   justify-content: center;
   margin: auto;
-  gap: var(--sapphire-feedback-message-size-spacing-gap);
-  max-width: var(--sapphire-feedback-message-size-max-width);
+  gap: var(--sapphire-semantic-size-spacing-50);
+  max-width: var(--sapphire-global-size-generic-1000);
 }
 
 .sapphire-feedback-message__icon {
-  padding: var(--sapphire-feedback-message-size-spacing-icon);
+  padding: var(--sapphire-semantic-size-spacing-30);
   border-radius: 100%; /* big enough value */
   line-height: 0; /* to make sure height won't exceed width */
 }
 
 .sapphire-feedback-message__icon--success {
   background-color: var(
-    --sapphire-feedback-message-color-background-icon-success
+    --sapphire-semantic-color-background-positive-secondary-default
   );
-  color: var(--sapphire-feedback-message-color-content-icon-success);
+  color: var(--sapphire-semantic-color-content-positive-secondary-default);
 }
 .sapphire-feedback-message__icon--error {
   background-color: var(
-    --sapphire-feedback-message-color-background-icon-error
+    --sapphire-semantic-color-background-negative-secondary-default
   );
-  color: var(--sapphire-feedback-message-color-content-icon-error);
+  color: var(--sapphire-semantic-color-content-negative-secondary-default);
 }
 .sapphire-feedback-message__icon--warning {
   background-color: var(
-    --sapphire-feedback-message-color-background-icon-warning
+    --sapphire-semantic-color-background-warning-secondary-default
   );
-  color: var(--sapphire-feedback-message-color-content-icon-warning);
+  color: var(--sapphire-semantic-color-content-warning-secondary-default);
 }
 .sapphire-feedback-message__icon--informative {
   background-color: var(
-    --sapphire-feedback-message-color-background-icon-informative
+    --sapphire-semantic-color-background-informative-secondary-default
   );
-  color: var(--sapphire-feedback-message-color-content-icon-informative);
+  color: var(--sapphire-semantic-color-content-informative-secondary-default);
 }
 
 .sapphire-feedback-message__content {
@@ -44,12 +44,12 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  gap: var(--sapphire-feedback-message-size-spacing-content-gap);
+  gap: var(--sapphire-semantic-size-spacing-30);
 }
 
 .sapphire-feedback-message__body {
-  color: var(--sapphire-feedback-message-color-content-body);
-  font-family: var(--sapphire-feedback-message-font-name);
+  color: var(--sapphire-semantic-color-content-default-secondary);
+  font-family: var(--sapphire-semantic-font-name-default);
   font-size: var(--sapphire-global-size-font-88);
-  line-height: var(--sapphire-feedback-message-size-line-height);
+  line-height: var(--sapphire-semantic-size-line-height-md);
 }

package/components/field/field.module.css

@@ -1,9 +1,9 @@
 .sapphire-field {
   display: inline-grid;
   grid-template-columns: auto; /* One column by default */
-  row-gap: var(--sapphire-field-size-spacing-vertical);
-  column-gap: var(--sapphire-field-size-spacing-horizontal);
-  font-family: var(--sapphire-field-font-name);
+  row-gap: var(--sapphire-semantic-size-spacing-20);
+  column-gap: var(--sapphire-semantic-size-spacing-40);
+  font-family: var(--sapphire-semantic-font-name-default);
   grid-auto-rows: min-content;
 
   /* The below is meant to address a font rendering quirk in OSX where the text
@@ -57,7 +57,7 @@ legend.sapphire-field__label {
  */
 .sapphire-field__control--group {
   display: flex;
-  gap: var(--sapphire-field-size-spacing-control-group);
+  gap: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
 }
 
 /**
@@ -90,14 +90,14 @@ legend.sapphire-field__label {
 .sapphire-field__note-row {
   display: flex;
   align-items: top;
-  font-size: var(--sapphire-field-size-font-note-l);
-  line-height: var(--sapphire-field-size-line-height-note-l);
-  color: var(--sapphire-field-color-note-default);
+  font-size: var(--sapphire-semantic-size-font-label-md);
+  line-height: var(--sapphire-semantic-size-line-height-md);
+  color: var(--sapphire-semantic-color-content-default-secondary);
 }
 
-.sapphire-field--medium .sapphire-field__note-row {
-  font-size: var(--sapphire-field-size-font-note-m);
-  line-height: var(--sapphire-field-size-line-height-note-m);
+.sapphire-field--md .sapphire-field__note-row {
+  font-size: var(--sapphire-semantic-size-font-label-sm);
+  line-height: var(--sapphire-semantic-size-line-height-sm);
 }
 
 .sapphire-field__note {
@@ -105,14 +105,14 @@ legend.sapphire-field__label {
 }
 
 .sapphire-field--error .sapphire-field__note {
-  color: var(--sapphire-field-color-note-error);
+  color: var(--sapphire-semantic-color-content-negative-secondary-default);
 }
 
 /**
  * Disabled
  */
 .sapphire-field.is-disabled {
-  opacity: var(--sapphire-field-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
   cursor: not-allowed;
 }
 .sapphire-field.is-disabled .sapphire-field__control * {
@@ -135,12 +135,12 @@ legend.sapphire-field__label {
   /* label is center aligned with control by default. But if the control is too long (e.g. textarea)
    * the label stays at the top (max-height)
    */
-  max-height: var(--sapphire-field-size-max-height-label-l);
+  max-height: var(--sapphire-semantic-size-height-input-lg);
 }
 
-.sapphire-field--label-placement-side.sapphire-field--medium
+.sapphire-field--label-placement-side.sapphire-field--md
   .sapphire-field__label {
-  max-height: var(--sapphire-field-size-max-height-label-m);
+  max-height: var(--sapphire-semantic-size-height-input-md);
 }
 
 .sapphire-field--label-placement-side.sapphire-field--label-alignment-top
@@ -157,7 +157,7 @@ legend.sapphire-field__label {
   display: inline-flex;
   flex-direction: column;
   width: min-content; /* this is needed to have the labels column shrunk to the largest one */
-  gap: var(--sapphire-field-size-spacing-fieldset-large);
+  gap: var(--sapphire-semantic-size-spacing-50);
 }
 
 .sapphire-fieldset .sapphire-field--label-placement-side {

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

@@ -6,7 +6,7 @@ declare const styles: {
   readonly "sapphire-field--no-shrink": string;
   readonly "sapphire-field__message": string;
   readonly "sapphire-field__note-row": string;
-  readonly "sapphire-field--medium": string;
+  readonly "sapphire-field--md": string;
   readonly "sapphire-field__note": string;
   readonly "sapphire-field--error": string;
   readonly "is-disabled": string;

package/components/fieldGroup/fieldGroup.module.css

@@ -1,8 +1,8 @@
 .sapphire-field-group {
   display: flex;
   flex-wrap: wrap;
-  column-gap: var(--sapphire-field-group-size-spacing-field-horizontal);
-  row-gap: var(--sapphire-field-group-size-spacing-field-vertical-l);
+  column-gap: var(--sapphire-semantic-size-spacing-50);
+  row-gap: var(--sapphire-semantic-size-spacing-30);
 }
 
 .sapphire-field-group--horizontal {
@@ -13,6 +13,6 @@
   flex-direction: column;
 }
 
-.sapphire-field-group--medium {
-  row-gap: var(--sapphire-field-group-size-spacing-field-vertical-m);
+.sapphire-field-group--md {
+  row-gap: var(--sapphire-semantic-size-spacing-20);
 }

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

@@ -2,7 +2,7 @@ declare const styles: {
   readonly "sapphire-field-group": string;
   readonly "sapphire-field-group--horizontal": string;
   readonly "sapphire-field-group--vertical": string;
-  readonly "sapphire-field-group--medium": string;
+  readonly "sapphire-field-group--md": string;
 };
 export = styles;
 

package/components/heading/heading.module.css

@@ -4,7 +4,7 @@
   margin-top: 0px;
   margin-bottom: 0px;
 
-  line-height: var(--sapphire-heading-size-line-height);
+  line-height: var(--sapphire-global-size-line-height-sm);
 
   /* 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
@@ -23,121 +23,73 @@
 
 /* heading levels */
 .sapphire-heading--level1 {
-  font-family: var(--sapphire-heading-font-name-default-level1);
-  font-weight: var(--sapphire-heading-font-weight-default-level1);
-  font-size: var(--sapphire-heading-size-font-level1);
-  text-transform: var(--sapphire-heading-font-text-transform-default-level1);
-  letter-spacing: var(--sapphire-heading-font-letter-spacing-default-level1);
-  color: var(--sapphire-heading-color-text-level1);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-global-size-font-220);
+  color: var(--sapphire-semantic-color-content-default-primary);
 }
 
 .sapphire-heading--level2 {
-  font-family: var(--sapphire-heading-font-name-default-level2);
-  font-weight: var(--sapphire-heading-font-weight-default-level2);
-  font-size: var(--sapphire-heading-size-font-level2);
-  text-transform: var(--sapphire-heading-font-text-transform-default-level2);
-  letter-spacing: var(--sapphire-heading-font-letter-spacing-default-level2);
-  color: var(--sapphire-heading-color-text-level2);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-global-size-font-150);
+  color: var(--sapphire-semantic-color-content-default-primary);
 }
 
 .sapphire-heading--level3 {
-  font-family: var(--sapphire-heading-font-name-default-level3);
-  font-weight: var(--sapphire-heading-font-weight-default-level3);
-  font-size: var(--sapphire-heading-size-font-level3);
-  text-transform: var(--sapphire-heading-font-text-transform-default-level3);
-  letter-spacing: var(--sapphire-heading-font-letter-spacing-default-level3);
-  color: var(--sapphire-heading-color-text-level3);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-global-size-font-130);
+  color: var(--sapphire-semantic-color-content-default-primary);
 }
 
 .sapphire-heading--level4 {
-  font-family: var(--sapphire-heading-font-name-default-level4);
-  font-weight: var(--sapphire-heading-font-weight-default-level4);
-  font-size: var(--sapphire-heading-size-font-level4);
-  text-transform: var(--sapphire-heading-font-text-transform-default-level4);
-  letter-spacing: var(--sapphire-heading-font-letter-spacing-default-level4);
-  color: var(--sapphire-heading-color-text-level4);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-global-size-font-112);
+  color: var(--sapphire-semantic-color-content-default-primary);
 }
 
 .sapphire-heading--level5 {
-  font-family: var(--sapphire-heading-font-name-default-level5);
-  font-weight: var(--sapphire-heading-font-weight-default-level5);
-  font-size: var(--sapphire-heading-size-font-level5);
-  text-transform: var(--sapphire-heading-font-text-transform-default-level5);
-  letter-spacing: var(--sapphire-heading-font-letter-spacing-default-level5);
-  color: var(--sapphire-heading-color-text-level5);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-global-size-font-106);
+  color: var(--sapphire-semantic-color-content-default-primary);
 }
 
 .sapphire-heading--level6 {
-  font-family: var(--sapphire-heading-font-name-default-level6);
-  font-weight: var(--sapphire-heading-font-weight-default-level6);
-  font-size: var(--sapphire-heading-size-font-level6);
-  text-transform: var(--sapphire-heading-font-text-transform-default-level6);
-  letter-spacing: var(--sapphire-heading-font-letter-spacing-default-level6);
-  color: var(--sapphire-heading-color-text-level6);
+  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);
+  color: var(--sapphire-semantic-color-content-default-primary);
 }
 
 .sapphire-heading--level1.sapphire-heading--alternative {
-  font-family: var(--sapphire-heading-font-name-alternative-level1);
-  font-weight: var(--sapphire-heading-font-weight-alternative-level1);
-  text-transform: var(
-    --sapphire-heading-font-text-transform-alternative-level1
-  );
-  letter-spacing: var(
-    --sapphire-heading-font-letter-spacing-alternative-level1
-  );
+  font-family: var(--sapphire-semantic-font-name-display);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }
 
 .sapphire-heading--level2.sapphire-heading--alternative {
-  font-family: var(--sapphire-heading-font-name-alternative-level2);
-  font-weight: var(--sapphire-heading-font-weight-alternative-level2);
-  text-transform: var(
-    --sapphire-heading-font-text-transform-alternative-level2
-  );
-  letter-spacing: var(
-    --sapphire-heading-font-letter-spacing-alternative-level2
-  );
+  font-family: var(--sapphire-semantic-font-name-display);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }
 
 .sapphire-heading--level3.sapphire-heading--alternative {
-  font-family: var(--sapphire-heading-font-name-alternative-level3);
-  font-weight: var(--sapphire-heading-font-weight-alternative-level3);
-  text-transform: var(
-    --sapphire-heading-font-text-transform-alternative-level3
-  );
-  letter-spacing: var(
-    --sapphire-heading-font-letter-spacing-alternative-level3
-  );
+  font-family: var(--sapphire-semantic-font-name-display);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }
 
 .sapphire-heading--level4.sapphire-heading--alternative {
-  font-family: var(--sapphire-heading-font-name-alternative-level4);
-  font-weight: var(--sapphire-heading-font-weight-alternative-level4);
-  text-transform: var(
-    --sapphire-heading-font-text-transform-alternative-level4
-  );
-  letter-spacing: var(
-    --sapphire-heading-font-letter-spacing-alternative-level4
-  );
+  font-family: var(--sapphire-semantic-font-name-display);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }
 
 .sapphire-heading--level5.sapphire-heading--alternative {
-  font-family: var(--sapphire-heading-font-name-alternative-level5);
-  font-weight: var(--sapphire-heading-font-weight-alternative-level5);
-  text-transform: var(
-    --sapphire-heading-font-text-transform-alternative-level5
-  );
-  letter-spacing: var(
-    --sapphire-heading-font-letter-spacing-alternative-level5
-  );
+  font-family: var(--sapphire-semantic-font-name-display);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }
 
 .sapphire-heading--level6.sapphire-heading--alternative {
-  font-family: var(--sapphire-heading-font-name-alternative-level6);
-  font-weight: var(--sapphire-heading-font-weight-alternative-level6);
-  text-transform: var(
-    --sapphire-heading-font-text-transform-alternative-level6
-  );
-  letter-spacing: var(
-    --sapphire-heading-font-letter-spacing-alternative-level6
-  );
+  font-family: var(--sapphire-semantic-font-name-display);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }

package/components/icon/icon.module.css

@@ -2,22 +2,22 @@
   flex-shrink: 0;
 }
 
-.sapphire-icon.sapphire-icon--small {
-  height: var(--sapphire-icon-size-s);
-  width: var(--sapphire-icon-size-s);
+.sapphire-icon.sapphire-icon--sm {
+  height: var(--sapphire-semantic-size-icon-sm);
+  width: var(--sapphire-semantic-size-icon-sm);
 }
 
-.sapphire-icon.sapphire-icon--medium {
-  height: var(--sapphire-icon-size-m);
-  width: var(--sapphire-icon-size-m);
+.sapphire-icon.sapphire-icon--md {
+  height: var(--sapphire-semantic-size-icon-md);
+  width: var(--sapphire-semantic-size-icon-md);
 }
 
-.sapphire-icon.sapphire-icon--large {
-  height: var(--sapphire-icon-size-l);
-  width: var(--sapphire-icon-size-l);
+.sapphire-icon.sapphire-icon--lg {
+  height: var(--sapphire-semantic-size-icon-lg);
+  width: var(--sapphire-semantic-size-icon-lg);
 }
 
-.sapphire-icon.sapphire-icon--extra-large {
-  height: var(--sapphire-icon-size-xl);
-  width: var(--sapphire-icon-size-xl);
+.sapphire-icon.sapphire-icon--xl {
+  height: var(--sapphire-semantic-size-icon-xl);
+  width: var(--sapphire-semantic-size-icon-xl);
 }

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

@@ -1,9 +1,9 @@
 declare const styles: {
   readonly "sapphire-icon": string;
-  readonly "sapphire-icon--small": string;
-  readonly "sapphire-icon--medium": string;
-  readonly "sapphire-icon--large": string;
-  readonly "sapphire-icon--extra-large": string;
+  readonly "sapphire-icon--sm": string;
+  readonly "sapphire-icon--md": string;
+  readonly "sapphire-icon--lg": string;
+  readonly "sapphire-icon--xl": string;
 };
 export = styles;