@danske/sapphire-css 32.2.0 → 33.0.0

package/components/checkbox/checkbox.module.css

@@ -1,5 +1,5 @@
 .sapphire-checkbox {
-  font-family: var(--sapphire-checkbox-font-label-name);
+  font-family: var(--sapphire-semantic-font-name-default);
   display: inline-flex;
   position: relative;
   max-width: 100%;
@@ -38,42 +38,42 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  margin-left: var(--sapphire-checkbox-size-spacing-label);
-  font-size: var(--sapphire-checkbox-size-font-content-l);
-  color: var(--sapphire-checkbox-color-label);
-  line-height: var(--sapphire-checkbox-size-height-label-l);
+  margin-left: var(--sapphire-semantic-size-spacing-20);
+  font-size: var(--sapphire-semantic-size-font-control-default);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  line-height: var(--sapphire-semantic-size-height-control-xs);
 }
 
 .sapphire-checkbox__label:empty {
   margin-left: 0;
 }
 
-.sapphire-checkbox--medium .sapphire-checkbox__label {
-  font-size: var(--sapphire-checkbox-size-font-content-m);
-  line-height: var(--sapphire-checkbox-size-height-label-m);
+.sapphire-checkbox--md .sapphire-checkbox__label {
+  font-size: var(--sapphire-semantic-size-font-control-md);
+  line-height: var(--sapphire-semantic-size-height-control-2xs);
 }
 
 .sapphire-checkbox__error-text {
   display: block;
-  font-family: var(--sapphire-checkbox-font-error-text-name);
-  font-weight: var(--sapphire-checkbox-font-error-text-weight);
-  font-size: var(--sapphire-checkbox-size-font-error-text-l);
-  line-height: var(--sapphire-checkbox-size-line-height-error-text-l);
-  color: var(--sapphire-checkbox-color-error-text);
-  margin-top: var(--sapphire-checkbox-size-spacing-error-text-vertical);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+  font-size: var(--sapphire-semantic-size-font-label-md);
+  line-height: var(--sapphire-semantic-size-line-height-md);
+  color: var(--sapphire-semantic-color-content-negative-secondary-default);
+  margin-top: var(--sapphire-semantic-size-spacing-20);
 
   margin-left: calc(
-    var(--sapphire-checkbox-size-spacing-label) +
-      var(--sapphire-checkbox-size-width-box-l)
+    var(--sapphire-semantic-size-spacing-20) +
+      var(--sapphire-semantic-size-height-box-lg)
   );
 }
 
-.sapphire-checkbox__error-text--medium {
-  font-size: var(--sapphire-checkbox-size-font-error-text-m);
-  line-height: var(--sapphire-checkbox-size-line-height-error-text-m);
+.sapphire-checkbox__error-text--md {
+  font-size: var(--sapphire-semantic-size-font-label-sm);
+  line-height: var(--sapphire-semantic-size-line-height-sm);
   margin-left: calc(
-    var(--sapphire-checkbox-size-spacing-label) +
-      var(--sapphire-checkbox-size-width-box-m)
+    var(--sapphire-semantic-size-spacing-20) +
+      var(--sapphire-semantic-size-height-box-md)
   );
 }
 
@@ -82,13 +82,13 @@
 .sapphire-checkbox__box {
   box-sizing: border-box;
   position: relative;
-  width: var(--sapphire-checkbox-size-width-box-l);
-  height: var(--sapphire-checkbox-size-height-box-l);
-  border-radius: var(--sapphire-checkbox-size-radius);
-  border: var(--sapphire-checkbox-size-width-border-unchecked) solid
-    var(--sapphire-checkbox-color-border-unchecked-default);
-  background-color: var(--sapphire-checkbox-color-background-unchecked);
-  transition: all var(--sapphire-checkbox-time-transition);
+  width: var(--sapphire-semantic-size-height-box-lg);
+  height: var(--sapphire-semantic-size-height-box-lg);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
+  border: var(--sapphire-semantic-size-border-md) solid
+    var(--sapphire-semantic-color-border-control-default);
+  background-color: var(--sapphire-semantic-color-background-control-default);
+  transition: all var(--sapphire-semantic-time-fade-quick);
   flex-shrink: 0;
   display: inline-flex;
   justify-content: center;
@@ -96,45 +96,49 @@
 }
 
 .sapphire-checkbox__box:has(~ .sapphire-checkbox__label:not(:empty)) {
-  margin-top: var(--sapphire-checkbox-size-spacing-box);
+  margin-top: var(--sapphire-semantic-size-spacing-5);
 }
 
-.sapphire-checkbox--medium .sapphire-checkbox__box {
-  width: var(--sapphire-checkbox-size-width-box-m);
-  height: var(--sapphire-checkbox-size-height-box-m);
+.sapphire-checkbox--md .sapphire-checkbox__box {
+  width: var(--sapphire-semantic-size-height-box-md);
+  height: var(--sapphire-semantic-size-height-box-md);
 }
 
 .sapphire-checkbox__box-icon {
   display: inherit;
   line-height: 0;
-  color: var(--sapphire-checkbox-color-icon);
-  margin: calc(var(--sapphire-checkbox-size-width-border-unchecked) * -1);
-  height: var(--sapphire-checkbox-size-height-box-l);
-  width: var(--sapphire-checkbox-size-width-box-l);
+  color: var(--sapphire-semantic-color-content-action-primary-default);
+  margin: calc(var(--sapphire-semantic-size-border-md) * -1);
+  height: var(--sapphire-semantic-size-height-box-lg);
+  width: var(--sapphire-semantic-size-height-box-lg);
 }
 
-.sapphire-checkbox--medium .sapphire-checkbox__box-icon {
-  height: var(--sapphire-checkbox-size-height-box-m);
-  width: var(--sapphire-checkbox-size-width-box-m);
+.sapphire-checkbox--md .sapphire-checkbox__box-icon {
+  height: var(--sapphire-semantic-size-height-box-md);
+  width: var(--sapphire-semantic-size-height-box-md);
 }
 
 .sapphire-checkbox--error .sapphire-checkbox__box {
-  border-color: var(--sapphire-checkbox-color-border-unchecked-error-default);
+  border-color: var(
+    --sapphire-semantic-color-background-negative-primary-default
+  );
 }
 
 /* Checked (same UI as indeterminate) */
 
 .sapphire-checkbox--checked .sapphire-checkbox__box,
 .sapphire-checkbox--indeterminate .sapphire-checkbox__box {
-  border-width: var(--sapphire-checkbox-size-width-border-checked);
-  background-color: var(--sapphire-checkbox-color-background-checked-default);
+  border-width: var(--sapphire-global-size-generic-0);
+  background-color: var(
+    --sapphire-semantic-color-background-action-primary-default
+  );
 }
 
 .sapphire-checkbox--checked.sapphire-checkbox--error .sapphire-checkbox__box,
 .sapphire-checkbox--indeterminate.sapphire-checkbox--error
   .sapphire-checkbox__box {
   background-color: var(
-    --sapphire-checkbox-color-background-checked-error-default
+    --sapphire-semantic-color-background-negative-primary-default
   );
 }
 
@@ -151,7 +155,7 @@
   ):not(.js-hover):hover
   .sapphire-checkbox__input:not(:disabled)
   ~ .sapphire-checkbox__box {
-  border-color: var(--sapphire-checkbox-color-border-unchecked-hover);
+  border-color: var(--sapphire-semantic-color-border-control-hover);
 }
 
 .sapphire-checkbox--error:not(:active):not(.is-active):not(
@@ -163,7 +167,9 @@
   ):not(.js-hover):hover
   .sapphire-checkbox__input:not(:disabled)
   ~ .sapphire-checkbox__box {
-  border-color: var(--sapphire-checkbox-color-border-unchecked-error-hover);
+  border-color: var(
+    --sapphire-semantic-color-background-negative-primary-hover
+  );
 }
 
 /* Hover when checked (same UI as indeterminate) */
@@ -180,7 +186,9 @@
   ):hover
   .sapphire-checkbox__input:not(:disabled)
   ~ .sapphire-checkbox__box {
-  background-color: var(--sapphire-checkbox-color-background-checked-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-action-primary-hover
+  );
 }
 
 .sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(
@@ -202,7 +210,7 @@
   .sapphire-checkbox__input:not(:disabled)
   ~ .sapphire-checkbox__box {
   background-color: var(
-    --sapphire-checkbox-color-background-checked-error-hover
+    --sapphire-semantic-color-background-negative-primary-hover
   );
 }
 
@@ -212,9 +220,9 @@
 .sapphire-checkbox:not(.js-focus)
   .sapphire-checkbox__input:focus-visible
   ~ .sapphire-checkbox__box {
-  outline: var(--sapphire-checkbox-size-focus-ring-border) solid
-    var(--sapphire-checkbox-color-focus-ring);
-  outline-offset: var(--sapphire-checkbox-size-focus-ring-offset);
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
+  outline-offset: var(--sapphire-semantic-size-focus-ring);
 }
 
 /* DISABLED */
@@ -229,5 +237,5 @@
 .sapphire-checkbox:not(.sapphire-checkbox--no-disabled)
   .sapphire-checkbox__input:disabled
   ~ .sapphire-checkbox__label {
-  opacity: var(--sapphire-checkbox-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
 }

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

@@ -2,9 +2,9 @@ declare const styles: {
   readonly "sapphire-checkbox": string;
   readonly "sapphire-checkbox__input": string;
   readonly "sapphire-checkbox__label": string;
-  readonly "sapphire-checkbox--medium": string;
+  readonly "sapphire-checkbox--md": string;
   readonly "sapphire-checkbox__error-text": string;
-  readonly "sapphire-checkbox__error-text--medium": string;
+  readonly "sapphire-checkbox__error-text--md": string;
   readonly "sapphire-checkbox__box": string;
   readonly "sapphire-checkbox__box-icon": string;
   readonly "sapphire-checkbox--error": string;

package/components/contextualHelp/contextualHelp.module.css

@@ -1,12 +1,15 @@
+/**
+* TODO(v2): rename to help-button
+*/
 .sapphire-contextual-help {
-  color: var(--sapphire-contextual-help-color-content);
-  line-height: var(--sapphire-contextual-help-size-line-height);
-  max-width: var(--sapphire-contextual-help-size-width-max);
-  font-family: var(--sapphire-contextual-help-font-name);
-  font-weight: var(--sapphire-contextual-help-font-weight);
-  font-size: var(--sapphire-contextual-help-size-font);
-  padding: var(--sapphire-contextual-help-size-spacing-vertical)
-    var(--sapphire-contextual-help-size-spacing-horizontal);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  line-height: var(--sapphire-global-size-line-height-sm);
+  max-width: var(--sapphire-global-size-generic-750);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+  font-size: var(--sapphire-semantic-size-font-text-md);
+  padding: var(--sapphire-semantic-size-spacing-50)
+    var(--sapphire-semantic-size-spacing-50);
   /* if implemented as focusable, we don't want the outline because this is not
    * an an interactive element in itself */
   outline: none;
@@ -27,11 +30,11 @@
 }
 
 .sapphire-contextual-help__header {
-  padding-bottom: var(--sapphire-contextual-help-size-spacing-header);
+  padding-bottom: var(--sapphire-semantic-size-spacing-30);
 }
 
 .sapphire-contextual-help__footer {
-  padding-top: var(--sapphire-contextual-help-size-spacing-footer);
+  padding-top: var(--sapphire-semantic-size-spacing-20);
 }
 
 .sapphire-contextual-help--no-max-width {

package/components/dateField/dateField.module.css

@@ -1,13 +1,13 @@
 .sapphire-date-field {
   box-sizing: border-box;
   display: grid;
-  font-family: var(--sapphire-date-field-font-name);
+  font-family: var(--sapphire-semantic-font-name-default);
   grid-auto-flow: column;
   align-items: center;
-  line-height: var(--sapphire-date-field-size-line-height-content);
-  gap: var(--sapphire-date-field-size-spacing-control-gap);
+  line-height: var(--sapphire-semantic-size-line-height-md);
+  gap: var(--sapphire-semantic-size-spacing-20);
   box-sizing: border-box;
-  width: var(--sapphire-date-field-size-width-control-default);
+  width: var(--sapphire-semantic-size-width-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
@@ -28,24 +28,24 @@
    * "clear" button appears in the last column.
    */
   grid-template-columns:
-    var(--sapphire-date-field-size-width-button-l) auto
-    var(--sapphire-date-field-size-width-button-l);
+    var(--sapphire-semantic-size-icon-lg) auto
+    var(--sapphire-semantic-size-icon-lg);
 
-  height: var(--sapphire-date-field-size-height-field-l);
-  border-radius: var(--sapphire-date-field-size-radius-field);
-  padding: 0 var(--sapphire-date-field-size-spacing-control-horizontal-l);
-  border: var(--sapphire-date-field-size-width-border) solid
-    var(--sapphire-date-field-color-border-default);
-  background-color: var(--sapphire-date-field-color-background-field);
+  height: var(--sapphire-semantic-size-height-input-lg);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  border: var(--sapphire-semantic-size-border-sm) solid
+    var(--sapphire-semantic-color-border-field-default);
+  background-color: var(--sapphire-semantic-color-background-field-default);
 }
 
-.sapphire-date-field--medium {
+.sapphire-date-field--md {
   grid-template-columns:
-    var(--sapphire-date-field-size-width-button-m) auto
-    var(--sapphire-date-field-size-width-button-m);
+    var(--sapphire-semantic-size-icon-md) auto
+    var(--sapphire-semantic-size-icon-md);
 
-  height: var(--sapphire-date-field-size-height-field-m);
-  padding: 0 var(--sapphire-date-field-size-spacing-control-horizontal-m);
+  height: var(--sapphire-semantic-size-height-input-md);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
 }
 
 .sapphire-date-field--range {
@@ -54,16 +54,16 @@
 
 .sapphire-date-field.sapphire-date-field--range {
   grid-template-columns:
-    var(--sapphire-date-field-size-width-button-l) min-content
-    var(--sapphire-date-field-size-width-button-l)
-    min-content var(--sapphire-date-field-size-width-button-l);
+    var(--sapphire-semantic-size-icon-lg) min-content
+    var(--sapphire-semantic-size-icon-lg)
+    min-content var(--sapphire-semantic-size-icon-lg);
 }
 
-.sapphire-date-field--medium.sapphire-date-field--range {
+.sapphire-date-field--md.sapphire-date-field--range {
   grid-template-columns:
-    var(--sapphire-date-field-size-width-button-m) min-content
-    var(--sapphire-date-field-size-width-button-m)
-    min-content var(--sapphire-date-field-size-width-button-m);
+    var(--sapphire-semantic-size-icon-md) min-content
+    var(--sapphire-semantic-size-icon-md)
+    min-content var(--sapphire-semantic-size-icon-md);
 }
 
 .sapphire-date-field__input {
@@ -71,41 +71,41 @@
   align-items: center;
   height: 100%;
   cursor: text;
-  font-size: var(--sapphire-date-field-size-font-content-l);
-  font-weight: var(--sapphire-date-field-size-font-weight-input);
-  min-width: var(--sapphire-date-field-size-min-width-field-l);
+  font-size: var(--sapphire-semantic-size-font-control-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+  min-width: var(--sapphire-global-size-generic-340);
 }
 .sapphire-date-field__input:first-of-type {
-  margin-left: var(--sapphire-date-field-size-spacing-icon-l);
+  margin-left: var(--sapphire-semantic-size-spacing-10);
 }
 .sapphire-date-field__input:last-of-type {
-  margin-right: var(--sapphire-date-field-size-spacing-icon-l);
+  margin-right: var(--sapphire-semantic-size-spacing-10);
 }
 
-.sapphire-date-field--medium .sapphire-date-field__input {
-  font-size: var(--sapphire-date-field-size-font-content-m);
-  min-width: var(--sapphire-date-field-size-min-width-field-m);
+.sapphire-date-field--md .sapphire-date-field__input {
+  font-size: var(--sapphire-semantic-size-font-control-md);
+  min-width: var(--sapphire-global-size-generic-300);
 }
 
-.sapphire-date-field--medium .sapphire-date-field__input:first-of-type {
-  margin-left: var(--sapphire-date-field-size-spacing-icon-m);
+.sapphire-date-field--md .sapphire-date-field__input:first-of-type {
+  margin-left: var(--sapphire-global-size-generic-0);
 }
-.sapphire-date-field--medium .sapphire-date-field__input:last-of-type {
-  margin-right: var(--sapphire-date-field-size-spacing-icon-m);
+.sapphire-date-field--md .sapphire-date-field__input:last-of-type {
+  margin-right: var(--sapphire-global-size-generic-0);
 }
 
 /**
  * Editable segments
  */
 .sapphire-date-field__segment {
-  color: var(--sapphire-date-field-color-content-segment-placeholder);
-  border-radius: var(--sapphire-date-field-size-radius-segment);
+  color: var(--sapphire-semantic-color-content-default-secondary);
+  border-radius: var(--sapphire-semantic-size-radius-xs);
   transition-property: color, background-color;
-  transition-duration: var(--sapphire-date-field-time-transition);
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: ease-in-out;
   text-align: right;
   text-transform: uppercase;
-  padding: 0 var(--sapphire-date-field-size-spacing-segment-horizontal);
+  padding: 0 var(--sapphire-semantic-size-spacing-5);
   caret-color: transparent;
 }
 
@@ -116,8 +116,10 @@
 
 .sapphire-date-field__segment:not(:disabled):not(.is-disabled):focus,
 .sapphire-date-field__segment:not(:disabled):not(.is-disabled).is-focus {
-  color: var(--sapphire-date-field-color-content-segment-selected);
-  background-color: var(--sapphire-date-field-color-background-segment);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-hover
+  );
   outline: none;
 }
 
@@ -126,7 +128,7 @@
 }
 
 .sapphire-date-field__segment--filled {
-  color: var(--sapphire-date-field-color-content-segment-unselected);
+  color: var(--sapphire-semantic-color-content-default-primary);
 }
 
 /**
@@ -139,16 +141,16 @@
  */
 .sapphire-date-field:has(.sapphire-date-field__segment:focus),
 .sapphire-date-field:has(.sapphire-date-field__segment.is-focus) {
-  outline: var(--sapphire-date-field-size-focus-ring) solid
-    var(--sapphire-date-field-color-focus-ring);
-  outline-offset: calc(-1 * var(--sapphire-date-field-size-focus-ring));
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
+  outline-offset: calc(-1 * var(--sapphire-semantic-size-focus-ring));
 }
 
 /**
  * Hover
  */
 .sapphire-date-field--error {
-  border-color: var(--sapphire-date-field-color-border-error);
+  border-color: var(--sapphire-semantic-color-border-field-error);
 }
 
 /**
@@ -173,7 +175,7 @@
   padding: 0;
 
   /* shape */
-  border-radius: var(--sapphire-date-field-size-radius-button);
+  border-radius: var(--sapphire-semantic-size-radius-xs);
   border-style: solid;
   border-width: 0;
   border-color: transparent;
@@ -181,19 +183,19 @@
   /* transition */
   /* we don't want to transition outline-offset */
   transition-property: color;
-  transition-duration: var(--sapphire-date-field-time-transition);
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: ease-in-out;
   cursor: pointer;
 
-  height: var(--sapphire-date-field-size-height-button-l);
-  width: var(--sapphire-date-field-size-width-button-l);
+  height: var(--sapphire-semantic-size-icon-lg);
+  width: var(--sapphire-semantic-size-icon-lg);
   background-color: transparent;
-  color: var(--sapphire-date-field-color-content-button-default);
+  color: var(--sapphire-semantic-color-content-default-secondary);
 }
 
-.sapphire-date-field--medium .sapphire-date-field__button {
-  height: var(--sapphire-date-field-size-height-button-m);
-  width: var(--sapphire-date-field-size-width-button-m);
+.sapphire-date-field--md .sapphire-date-field__button {
+  height: var(--sapphire-semantic-size-icon-md);
+  width: var(--sapphire-semantic-size-icon-md);
 }
 
 .sapphire-date-field__button:disabled,
@@ -205,13 +207,13 @@
  * Icon (button)
  */
 .sapphire-date-field__icon {
-  height: var(--sapphire-date-field-size-icon-l);
-  width: var(--sapphire-date-field-size-icon-l);
+  height: var(--sapphire-semantic-size-icon-lg);
+  width: var(--sapphire-semantic-size-icon-lg);
 }
 
-.sapphire-date-field--medium .sapphire-date-field__icon {
-  height: var(--sapphire-date-field-size-icon-m);
-  width: var(--sapphire-date-field-size-icon-m);
+.sapphire-date-field--md .sapphire-date-field__icon {
+  height: var(--sapphire-semantic-size-icon-md);
+  width: var(--sapphire-semantic-size-icon-md);
 }
 
 /**
@@ -223,7 +225,7 @@
 .sapphire-date-field__button:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  color: var(--sapphire-date-field-color-content-button-hover);
+  color: var(--sapphire-semantic-color-content-default-primary);
 }
 
 /**
@@ -235,8 +237,8 @@
 
 .sapphire-date-field__button.is-focus,
 .sapphire-date-field__button:not(.js-focus):focus-visible {
-  outline: var(--sapphire-date-field-size-focus-ring) solid
-    var(--sapphire-date-field-color-focus-ring);
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
 }
 
 /**
@@ -247,5 +249,5 @@
 .sapphire-date-field__button:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  color: var(--sapphire-date-field-color-content-button-active);
+  color: var(--sapphire-semantic-color-content-default-primary);
 }

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

@@ -1,6 +1,6 @@
 declare const styles: {
   readonly "sapphire-date-field": string;
-  readonly "sapphire-date-field--medium": string;
+  readonly "sapphire-date-field--md": string;
   readonly "sapphire-date-field--range": string;
   readonly "sapphire-date-field__input": string;
   readonly "sapphire-date-field__segment": string;

package/components/dialog/dialog.module.css

@@ -19,10 +19,10 @@
 }
 
 .sapphire-dialog {
-  border-radius: var(--sapphire-dialog-size-radius);
-  background-color: var(--sapphire-dialog-color-background);
-  font-family: var(--sapphire-dialog-font-name);
-  color: var(--sapphire-dialog-color-content);
+  border-radius: var(--sapphire-semantic-size-radius-lg);
+  background-color: var(--sapphire-semantic-color-background-surface);
+  font-family: var(--sapphire-semantic-font-name-default);
+  color: var(--sapphire-semantic-color-content-default-primary);
   box-sizing: border-box;
   overflow: hidden;
   max-height: 90vh;
@@ -34,7 +34,7 @@
   outline: none;
 
   animation-name: fade-in;
-  animation-duration: var(--sapphire-dialog-time-transition);
+  animation-duration: var(--sapphire-semantic-time-fade-default);
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
 }
@@ -43,18 +43,18 @@
   animation-name: fade-out;
 }
 
-.sapphire-dialog--extra-small {
-  width: var(--sapphire-dialog-size-width-xs);
+.sapphire-dialog--xs {
+  width: var(--sapphire-global-size-generic-800);
 }
 
-.sapphire-dialog--small {
-  width: var(--sapphire-dialog-size-width-s);
+.sapphire-dialog--sm {
+  width: var(--sapphire-global-size-generic-1400);
 }
 
-.sapphire-dialog--medium {
-  width: var(--sapphire-dialog-size-width-m);
+.sapphire-dialog--md {
+  width: var(--sapphire-global-size-generic-1920);
 }
 
-.sapphire-dialog--large {
-  width: var(--sapphire-dialog-size-width-l);
+.sapphire-dialog--lg {
+  width: var(--sapphire-global-size-generic-2560);
 }

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

@@ -3,10 +3,10 @@ declare const styles: {
   readonly "fade-in": string;
   readonly "sapphire-dialog--exiting": string;
   readonly "fade-out": string;
-  readonly "sapphire-dialog--extra-small": string;
-  readonly "sapphire-dialog--small": string;
-  readonly "sapphire-dialog--medium": string;
-  readonly "sapphire-dialog--large": string;
+  readonly "sapphire-dialog--xs": string;
+  readonly "sapphire-dialog--sm": string;
+  readonly "sapphire-dialog--md": string;
+  readonly "sapphire-dialog--lg": string;
 };
 export = styles;