@danske/sapphire-css 39.0.1 → 40.0.0

package/components/checkbox/checkbox.module.css

@@ -3,6 +3,7 @@
   display: inline-flex;
   position: relative;
   max-width: 100%;
+  cursor: pointer;
 }
 
 .sapphire-checkbox__input {
@@ -22,7 +23,6 @@
 
   cursor: pointer;
 }
-
 .sapphire-checkbox__label {
   /* 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
@@ -38,13 +38,13 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  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);
+  margin-left: var(--sapphire-semantic-size-spacing-sm);
+  font-size: var(--sapphire-semantic-size-font-control-lg);
+  color: var(--sapphire-semantic-color-foreground-primary);
   line-height: var(--sapphire-semantic-size-height-control-xs);
   display: inline-flex;
   align-items: center;
-  gap: var(--sapphire-semantic-size-spacing-10);
+  gap: var(--sapphire-semantic-size-spacing-3xs);
 }
 
 .sapphire-checkbox__label:empty {
@@ -58,7 +58,7 @@
 }
 
 .sapphire-checkbox__optional-indicator {
-  color: var(--sapphire-semantic-color-content-default-secondary);
+  color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
 .sapphire-checkbox--md .sapphire-checkbox__label {
@@ -72,11 +72,11 @@
   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);
+  color: var(--sapphire-semantic-color-foreground-on-negative-subtle);
+  margin-top: var(--sapphire-semantic-size-spacing-2xs);
 
   margin-left: calc(
-    var(--sapphire-semantic-size-spacing-20) +
+    var(--sapphire-semantic-size-spacing-sm) +
       var(--sapphire-semantic-size-height-box-lg)
   );
 }
@@ -85,7 +85,7 @@
   font-size: var(--sapphire-semantic-size-font-label-sm);
   line-height: var(--sapphire-semantic-size-line-height-sm);
   margin-left: calc(
-    var(--sapphire-semantic-size-spacing-20) +
+    var(--sapphire-semantic-size-spacing-sm) +
       var(--sapphire-semantic-size-height-box-md)
   );
 }
@@ -98,10 +98,11 @@
   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);
+  border: var(--sapphire-semantic-size-border-sm) solid
+    var(--sapphire-semantic-color-border-field-default);
+  background: var(--sapphire-semantic-color-background-field);
+  transition: all var(--sapphire-semantic-time-fade-quick)
+    var(--sapphire-semantic-transitions-fade);
   flex-shrink: 0;
   display: inline-flex;
   justify-content: center;
@@ -109,7 +110,7 @@
 }
 
 .sapphire-checkbox__box:has(~ .sapphire-checkbox__label:not(:empty)) {
-  margin-top: var(--sapphire-semantic-size-spacing-5);
+  margin-top: var(--sapphire-semantic-size-spacing-4xs);
 }
 
 .sapphire-checkbox--md .sapphire-checkbox__box {
@@ -120,7 +121,7 @@
 .sapphire-checkbox__box-icon {
   display: inherit;
   line-height: 0;
-  color: var(--sapphire-semantic-color-content-action-primary-default);
+  color: var(--sapphire-semantic-color-foreground-action-on-select-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);
@@ -132,9 +133,7 @@
 }
 
 .sapphire-checkbox--error .sapphire-checkbox__box {
-  border-color: var(
-    --sapphire-semantic-color-background-negative-primary-default
-  );
+  border-color: var(--sapphire-semantic-color-border-negative-default);
 }
 
 /* Checked (same UI as indeterminate) */
@@ -142,97 +141,134 @@
 .sapphire-checkbox--checked .sapphire-checkbox__box,
 .sapphire-checkbox--indeterminate .sapphire-checkbox__box {
   border-width: var(--sapphire-global-size-generic-0);
-  background-color: var(
-    --sapphire-semantic-color-background-action-primary-default
-  );
+  background: var(--sapphire-semantic-color-background-action-select-default);
 }
 
 .sapphire-checkbox--checked.sapphire-checkbox--error .sapphire-checkbox__box,
 .sapphire-checkbox--indeterminate.sapphire-checkbox--error
   .sapphire-checkbox__box {
-  background-color: var(
-    --sapphire-semantic-color-background-negative-primary-default
-  );
+  background: var(--sapphire-semantic-color-background-action-danger-default);
 }
 
 /* HOVER */
 
 /* Hover when not checked */
 
-.sapphire-checkbox:not(:active):not(.is-active):not(
+.sapphire-checkbox:not(:active):not(.is-disabled):not(.is-active):not(
     .sapphire-checkbox--checked
   ).is-hover
   .sapphire-checkbox__box,
-.sapphire-checkbox:not(:active):not(.is-active):not(
+.sapphire-checkbox:not(:active):not(.is-disabled):not(.is-active):not(
     .sapphire-checkbox--checked
   ):not(.js-hover):hover
-  .sapphire-checkbox__input:not(:disabled)
-  ~ .sapphire-checkbox__box {
-  border-color: var(--sapphire-semantic-color-border-control-hover);
+  .sapphire-checkbox__box {
+  border-color: var(--sapphire-semantic-color-border-field-hover);
 }
 
-.sapphire-checkbox--error:not(:active):not(.is-active):not(
+.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(
     .sapphire-checkbox--checked
   ).is-hover
   .sapphire-checkbox__box,
-.sapphire-checkbox--error:not(:active):not(.is-active):not(
+.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(
     .sapphire-checkbox--checked
   ):not(.js-hover):hover
-  .sapphire-checkbox__input:not(:disabled)
-  ~ .sapphire-checkbox__box {
-  border-color: var(
-    --sapphire-semantic-color-background-negative-primary-hover
-  );
+  .sapphire-checkbox__box {
+  border-color: var(--sapphire-semantic-color-border-negative-hover);
 }
 
 /* Hover when checked (same UI as indeterminate) */
 
-.sapphire-checkbox--checked:not(:active):not(.is-active).is-hover
-  .sapphire-checkbox__box,
-.sapphire-checkbox--checked:not(:active):not(.is-active):not(.js-hover):hover
-  .sapphire-checkbox__input:not(:disabled)
-  ~ .sapphire-checkbox__box,
-.sapphire-checkbox--indeterminate:not(:active):not(.is-active).is-hover
+.sapphire-checkbox--checked:not(:active):not(.is-disabled):not(
+    .is-active
+  ).is-hover
   .sapphire-checkbox__box,
-.sapphire-checkbox--indeterminate:not(:active):not(.is-active):not(
+.sapphire-checkbox--checked:not(:active):not(.is-disabled):not(.is-active):not(
     .js-hover
   ):hover
-  .sapphire-checkbox__input:not(:disabled)
-  ~ .sapphire-checkbox__box {
+  .sapphire-checkbox__box,
+.sapphire-checkbox--indeterminate:not(:active):not(.is-disabled):not(
+    .is-active
+  ).is-hover
+  .sapphire-checkbox__box,
+.sapphire-checkbox--indeterminate:not(:active):not(.is-disabled):not(
+    .is-active
+  ):not(.js-hover):hover
+  .sapphire-checkbox__box {
   background-color: var(
-    --sapphire-semantic-color-background-action-primary-hover
+    --sapphire-semantic-color-background-action-select-hover
   );
 }
 
 .sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(
-    .is-active
-  ).is-hover
+    .is-disabled
+  ):not(.is-active).is-hover
   .sapphire-checkbox__box,
 .sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(
-    .is-active
-  ):not(.js-hover):hover
-  .sapphire-checkbox__input:not(:disabled)
-  ~ .sapphire-checkbox__box,
+    .is-disabled
+  ):not(.is-active):not(.js-hover):hover
+  .sapphire-checkbox__box,
 .sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(
-    .is-active
-  ).is-hover
+    .is-disabled
+  ):not(.is-active).is-hover
   .sapphire-checkbox__box,
 .sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(
-    .is-active
-  ):not(.js-hover):hover
+    .is-disabled
+  ):not(.is-active):not(.js-hover):hover
+  .sapphire-checkbox__box {
+  background: var(--sapphire-semantic-color-background-action-danger-hover);
+}
+
+/* ACTIVE */
+
+/* Active when not checked */
+
+.sapphire-checkbox:not(.sapphire-checkbox--checked).is-active
+  .sapphire-checkbox__box,
+.sapphire-checkbox:not(.sapphire-checkbox--checked):active
   .sapphire-checkbox__input:not(:disabled)
   ~ .sapphire-checkbox__box {
-  background-color: var(
-    --sapphire-semantic-color-background-negative-primary-hover
-  );
+  border-color: var(--sapphire-semantic-color-border-field-active);
+}
+
+.sapphire-checkbox--error:not(.sapphire-checkbox--checked).is-active
+  .sapphire-checkbox__box,
+.sapphire-checkbox--error:not(.sapphire-checkbox--checked):active
+  .sapphire-checkbox__input:not(:disabled)
+  ~ .sapphire-checkbox__box {
+  border-color: var(--sapphire-semantic-color-border-negative-active);
+}
+
+/* Active when checked (same UI as indeterminate) */
+
+.sapphire-checkbox--checked.is-active .sapphire-checkbox__box,
+.sapphire-checkbox--checked:active
+  .sapphire-checkbox__input:not(:disabled)
+  ~ .sapphire-checkbox__box,
+.sapphire-checkbox--indeterminate.is-active .sapphire-checkbox__box,
+.sapphire-checkbox--indeterminate:active
+  .sapphire-checkbox__input:not(:disabled)
+  ~ .sapphire-checkbox__box {
+  background: var(--sapphire-semantic-color-background-action-select-active);
+}
+
+.sapphire-checkbox--checked.sapphire-checkbox--error.is-active
+  .sapphire-checkbox__box,
+.sapphire-checkbox--checked.sapphire-checkbox--error:active
+  .sapphire-checkbox__input:not(:disabled)
+  ~ .sapphire-checkbox__box,
+.sapphire-checkbox--indeterminate.sapphire-checkbox--error.is-active
+  .sapphire-checkbox__box,
+.sapphire-checkbox--indeterminate.sapphire-checkbox--error:active
+  .sapphire-checkbox__input:not(:disabled)
+  ~ .sapphire-checkbox__box {
+  background: var(--sapphire-semantic-color-background-action-danger-active);
 }
 
 /* FOCUS */
 
 .sapphire-checkbox.is-focus .sapphire-checkbox__box,
-.sapphire-checkbox:not(.js-focus)
-  .sapphire-checkbox__input:focus-visible
-  ~ .sapphire-checkbox__box {
+.sapphire-checkbox:not(.js-focus):has(input:focus-visible)
+  .sapphire-checkbox__box {
   outline: var(--sapphire-semantic-size-focus-ring) solid
     var(--sapphire-semantic-color-focus-ring);
   outline-offset: var(--sapphire-semantic-size-focus-ring);
@@ -240,15 +276,12 @@
 
 /* DISABLED */
 
+.sapphire-checkbox.is-disabled,
 .sapphire-checkbox__input:disabled {
   cursor: not-allowed;
 }
 
-.sapphire-checkbox:not(.sapphire-checkbox--no-disabled)
-  .sapphire-checkbox__input:disabled
-  ~ .sapphire-checkbox__box,
-.sapphire-checkbox:not(.sapphire-checkbox--no-disabled)
-  .sapphire-checkbox__input:disabled
-  ~ .sapphire-checkbox__label {
+.sapphire-checkbox.is-disabled .sapphire-checkbox__box,
+.sapphire-checkbox.is-disabled .sapphire-checkbox__label {
   opacity: var(--sapphire-semantic-opacity-disabled);
 }

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

@@ -12,12 +12,12 @@ declare const styles: {
   readonly "sapphire-checkbox--error": string;
   readonly "sapphire-checkbox--checked": string;
   readonly "sapphire-checkbox--indeterminate": string;
+  readonly "is-disabled": string;
   readonly "is-active": string;
   readonly "is-hover": string;
   readonly "js-hover": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
-  readonly "sapphire-checkbox--no-disabled": string;
 };
 export = styles;
 

package/components/contextualHelp/contextualHelp.module.css

@@ -1,12 +1,12 @@
 .sapphire-contextual-help {
-  color: var(--sapphire-semantic-color-content-default-primary);
-  line-height: var(--sapphire-global-size-line-height-sm);
+  color: var(--sapphire-semantic-color-foreground-primary);
+  line-height: var(--sapphire-global-size-line-height-md);
   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);
+  font-size: var(--sapphire-semantic-size-font-body-sm);
+  padding: var(--sapphire-semantic-size-spacing-lg)
+    var(--sapphire-semantic-size-spacing-lg);
   /* if implemented as focusable, we don't want the outline because this is not
    * an an interactive element in itself */
   outline: none;
@@ -27,11 +27,11 @@
 }
 
 .sapphire-contextual-help__header {
-  padding-bottom: var(--sapphire-semantic-size-spacing-30);
+  padding-bottom: var(--sapphire-semantic-size-spacing-sm);
 }
 
 .sapphire-contextual-help__footer {
-  padding-top: var(--sapphire-semantic-size-spacing-20);
+  padding-top: var(--sapphire-semantic-size-spacing-2xs);
 }
 
 .sapphire-contextual-help--no-max-width {

package/components/dateField/dateField.module.css

@@ -5,10 +5,10 @@
   grid-auto-flow: column;
   align-items: center;
   line-height: var(--sapphire-semantic-size-line-height-md);
-  gap: var(--sapphire-semantic-size-spacing-30);
+  gap: var(--sapphire-semantic-size-spacing-sm);
   box-sizing: border-box;
 
-  --sapphire-dateField-icon-size: var(--sapphire-semantic-size-icon-lg);
+  --sapphire-dateField-icon-size: var(--sapphire-semantic-size-icon-md);
 
   /* 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
@@ -32,12 +32,12 @@
     var(--sapphire-dateField-icon-size) 1fr
     var(--sapphire-dateField-icon-size);
 
-  height: var(--sapphire-semantic-size-height-input-lg);
+  height: var(--sapphire-semantic-size-height-control-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);
+  background: var(--sapphire-semantic-color-background-field);
 }
 
 .sapphire-date-field--no-calendar {
@@ -57,11 +57,11 @@
 }
 
 .sapphire-date-field--md {
-  --sapphire-dateField-icon-size: var(--sapphire-semantic-size-icon-md);
+  --sapphire-dateField-icon-size: var(--sapphire-semantic-size-icon-sm);
 
-  height: var(--sapphire-semantic-size-height-input-md);
+  height: var(--sapphire-semantic-size-height-control-md);
   padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
-  gap: var(--sapphire-semantic-size-spacing-20);
+  gap: var(--sapphire-semantic-size-spacing-xs);
 }
 
 .sapphire-date-field--range {
@@ -71,11 +71,11 @@
 .sapphire-date-field__input-group {
   display: grid;
   grid-template-columns: min-content var(--sapphire-dateField-icon-size) min-content;
-  gap: var(--sapphire-semantic-size-spacing-10);
+  align-items: center;
 }
 
 .sapphire-date-field--md .sapphire-date-field__input-group {
-  gap: var(--sapphire-semantic-size-spacing-5);
+  gap: var(--sapphire-semantic-size-spacing-4xs);
 }
 
 .sapphire-date-field__input {
@@ -83,10 +83,18 @@
   align-items: center;
   height: 100%;
   cursor: text;
-  font-size: var(--sapphire-semantic-size-font-control-default);
+  font-size: var(--sapphire-semantic-size-font-control-lg);
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }
 
+.sapphire-date-field__range-separator {
+  color: var(--sapphire-semantic-color-foreground-secondary);
+  text-align: center;
+}
+.sapphire-date-field__range-separator::after {
+  content: '—';
+}
+
 .sapphire-date-field--md .sapphire-date-field__input {
   font-size: var(--sapphire-semantic-size-font-control-md);
 }
@@ -95,14 +103,14 @@
  * Editable segments
  */
 .sapphire-date-field__segment {
-  color: var(--sapphire-semantic-color-content-default-secondary);
+  color: var(--sapphire-semantic-color-foreground-secondary);
   border-radius: var(--sapphire-semantic-size-radius-xs);
   transition-property: color, background-color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
   text-align: right;
   text-transform: uppercase;
-  padding: 0 var(--sapphire-semantic-size-spacing-5);
+  padding: 0 var(--sapphire-semantic-size-spacing-4xs);
   caret-color: transparent;
 }
 
@@ -113,19 +121,19 @@
 
 .sapphire-date-field__segment:not(:disabled):not(.is-disabled):focus,
 .sapphire-date-field__segment:not(:disabled):not(.is-disabled).is-focus {
-  color: var(--sapphire-semantic-color-content-default-primary);
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-hover
+  color: var(--sapphire-semantic-color-foreground-primary);
+  background: var(
+    --sapphire-semantic-color-background-action-secondary-default
   );
   outline: none;
 }
 
 .sapphire-date-field__segment::selection {
-  background-color: transparent;
+  background: transparent;
 }
 
 .sapphire-date-field__segment--filled {
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-primary);
 }
 
 /**
@@ -135,13 +143,18 @@
   padding: 0;
 }
 
+/**
+ * Hover
+ */
+
+.sapphire-date-field:not(.sapphire-date-field--error).is-hover,
+.sapphire-date-field:not(.sapphire-date-field--error):not(.js-hover):hover {
+  border: var(--sapphire-semantic-size-border-sm) solid
+    var(--sapphire-semantic-color-border-field-hover);
+}
+
 /**
  * Focus
- *
- * NOTE
- * At the time of this writing only Firefox doesn't support :has selector by
- * default https://caniuse.com/?search=%3Ahas
- * But this is not a crucial aspect of the UI and we can live with this for a time.
  */
 .sapphire-date-field:has(.sapphire-date-field__segment:focus),
 .sapphire-date-field:has(.sapphire-date-field__segment.is-focus) {
@@ -154,7 +167,7 @@
  * Hover
  */
 .sapphire-date-field--error {
-  border-color: var(--sapphire-semantic-color-border-field-error);
+  border-color: var(--sapphire-semantic-color-border-negative-default);
 }
 
 /**
@@ -188,13 +201,13 @@
   /* we don't want to transition outline-offset */
   transition-property: color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
   cursor: pointer;
 
   height: var(--sapphire-dateField-icon-size);
   width: var(--sapphire-dateField-icon-size);
-  background-color: transparent;
-  color: var(--sapphire-semantic-color-content-default-secondary);
+  background: transparent;
+  color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
 .sapphire-date-field__button--clear {
@@ -223,7 +236,7 @@
 .sapphire-date-field__button:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-primary);
 }
 
 /**
@@ -247,5 +260,5 @@
 .sapphire-date-field__button:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-primary);
 }

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

@@ -6,18 +6,19 @@ declare const styles: {
   readonly "sapphire-date-field--range": string;
   readonly "sapphire-date-field__input-group": string;
   readonly "sapphire-date-field__input": string;
+  readonly "sapphire-date-field__range-separator": string;
   readonly "sapphire-date-field__segment": string;
   readonly "is-disabled": string;
   readonly "is-focus": string;
   readonly "sapphire-date-field__segment--filled": string;
   readonly "sapphire-date-field__segment--separator": string;
   readonly "sapphire-date-field--error": string;
+  readonly "is-hover": string;
+  readonly "js-hover": string;
   readonly "sapphire-date-field__button": string;
   readonly "sapphire-date-field__button--clear": string;
   readonly "sapphire-date-field__icon": string;
   readonly "is-active": string;
-  readonly "js-hover": string;
-  readonly "is-hover": string;
   readonly "js-focus": string;
 };
 export = styles;

package/components/dialog/dialog.module.css

@@ -20,9 +20,9 @@
 
 .sapphire-dialog {
   border-radius: var(--sapphire-semantic-size-radius-lg);
-  background-color: var(--sapphire-semantic-color-background-surface);
+  background: var(--sapphire-semantic-color-background-surface);
   font-family: var(--sapphire-semantic-font-name-default);
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-primary);
   box-sizing: border-box;
   overflow: hidden;
   max-height: 90vh;
@@ -35,7 +35,7 @@
 
   animation-name: fade-in;
   animation-duration: var(--sapphire-semantic-time-fade-default);
-  animation-timing-function: ease-in-out;
+  animation-timing-function: var(--sapphire-semantic-transitions-fade);
   animation-fill-mode: forwards;
 }
 

package/components/dropzone/dropzone.module.css

@@ -5,16 +5,16 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  background-color: var(--sapphire-semantic-color-background-control-default);
+  background: var(--sapphire-semantic-color-background-action-tertiary-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);
+  height: var(--sapphire-global-size-generic-480);
+  min-height: var(--sapphire-global-size-generic-480);
+  padding: var(--sapphire-semantic-size-spacing-2xl);
+  border-radius: var(--sapphire-semantic-size-radius-xl);
   transition-property: opacity, background-color, color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
   /* 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
@@ -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-semantic-color-border-primary-default);
-  border-radius: var(--sapphire-semantic-size-radius-lg);
+  background: var(--sapphire-semantic-color-border-primary);
+  border-radius: var(--sapphire-semantic-size-radius-xl);
   transition-property: opacity, background-color, color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
 }
 
 .sapphire-dropzone.sapphire-dropzone--error::before {
-  background: var(--sapphire-semantic-color-border-field-error);
+  background: var(--sapphire-semantic-color-foreground-negative);
 }
 
 .sapphire-dropzone:not(:disabled):not(.is-disabled):not(:active):not(
@@ -59,9 +59,7 @@
 .sapphire-dropzone:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-hover
-  );
+  background: var(--sapphire-semantic-color-background-action-tertiary-hover);
 }
 
 .sapphire-dropzone:not(:disabled):not(.is-disabled).sapphire-dropzone:active,
@@ -71,9 +69,7 @@
 .sapphire-dropzone:not(:disabled):not(
     .is-disabled
   ).sapphire-dropzone.is-active {
-  background-color: var(
-    --sapphire-semantic-color-background-selection-unselected-active
-  );
+  background: var(--sapphire-semantic-color-background-action-tertiary-active);
 }
 
 .sapphire-dropzone:focus {
@@ -100,12 +96,12 @@
 
 .sapphire-dropzone--dropping {
   background: var(
-    --sapphire-semantic-color-background-selection-selected-hover
+    --sapphire-semantic-color-background-action-select-secondary-default
   );
 }
 
 .sapphire-dropzone.sapphire-dropzone--dropping::before {
-  background: var(--sapphire-semantic-color-content-action-secondary-default);
+  background: var(--sapphire-semantic-color-border-accent);
 }
 
 .sapphire-dropzone__content {
@@ -116,12 +112,14 @@
 }
 
 .sapphire-dropzone__icon {
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);
   margin-bottom: var(--sapphire-semantic-size-spacing-control-vertical-lg);
 }
 
 .sapphire-dropzone--dropping .sapphire-dropzone__icon {
-  color: var(--sapphire-semantic-color-background-action-primary-default);
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-select-secondary-default
+  );
 }
 
 .sapphire-dropzone__heading {
@@ -129,5 +127,5 @@
 }
 
 .sapphire-dropzone--error .sapphire-dropzone__paragraph > * {
-  color: var(--sapphire-semantic-color-content-negative-secondary-default);
+  color: var(--sapphire-semantic-color-foreground-negative);
 }