@danske/sapphire-css 32.2.0 → 33.0.0

package/components/radio/radio.module.css

@@ -1,6 +1,6 @@
 .sapphire-radio {
   display: inline-flex;
-  font-family: var(--sapphire-radio-font-label-name);
+  font-family: var(--sapphire-semantic-font-name-default);
   max-width: 100%;
   position: relative;
 }
@@ -19,10 +19,10 @@
 }
 
 .sapphire-radio__label {
-  margin-left: var(--sapphire-radio-size-spacing-label);
-  font-size: var(--sapphire-radio-size-font-l);
-  line-height: var(--sapphire-radio-size-height-label-l);
-  color: var(--sapphire-radio-color-label);
+  margin-left: var(--sapphire-semantic-size-spacing-20);
+  font-size: var(--sapphire-semantic-size-font-control-default);
+  line-height: var(--sapphire-semantic-size-height-control-xs);
+  color: var(--sapphire-semantic-color-content-default-primary);
 
   /* 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
@@ -39,52 +39,52 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.sapphire-radio--medium .sapphire-radio__label {
-  font-size: var(--sapphire-radio-size-font-m);
-  line-height: var(--sapphire-radio-size-height-label-m);
+.sapphire-radio--md .sapphire-radio__label {
+  font-size: var(--sapphire-semantic-size-font-control-md);
+  line-height: var(--sapphire-semantic-size-height-control-2xs);
 }
 
 /* The radio box */
 
 .sapphire-radio__box {
   box-sizing: border-box;
-  background-color: var(
-    --sapphire-radio-color-background-box-unchecked-default
-  );
-  width: var(--sapphire-radio-size-width-box-l);
-  height: var(--sapphire-radio-size-height-box-l);
+  background-color: var(--sapphire-semantic-color-background-control-default);
+  width: var(--sapphire-semantic-size-height-box-lg);
+  height: var(--sapphire-semantic-size-height-box-lg);
   flex-shrink: 0;
   border-radius: 50%;
-  border: var(--sapphire-radio-size-width-border-unchecked) solid
-    var(--sapphire-radio-color-border-box-unchecked-default);
+  border: var(--sapphire-semantic-size-border-md) solid
+    var(--sapphire-semantic-color-border-control-default);
   position: relative;
-  margin-top: var(--sapphire-radio-size-spacing-box);
+  margin-top: var(--sapphire-semantic-size-spacing-5);
 
   transition-property: background-color, border-color, border-width;
-  transition-duration: var(--sapphire-radio-time-transition);
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: ease-in-out;
 }
 
-.sapphire-radio--medium .sapphire-radio__box {
-  width: var(--sapphire-radio-size-width-box-m);
-  height: var(--sapphire-radio-size-height-box-m);
+.sapphire-radio--md .sapphire-radio__box {
+  width: var(--sapphire-semantic-size-height-box-md);
+  height: var(--sapphire-semantic-size-height-box-md);
 }
 
 .sapphire-radio--checked .sapphire-radio__box {
-  border-color: var(--sapphire-radio-color-background-box-checked-default);
+  border-color: var(
+    --sapphire-semantic-color-background-action-primary-default
+  );
   border-width: calc(
     (
-        var(--sapphire-radio-size-height-box-l) -
-          var(--sapphire-radio-size-circle-l)
+        var(--sapphire-semantic-size-height-box-lg) -
+          var(--sapphire-global-size-generic-20)
       ) / 2
   );
 }
 
-.sapphire-radio--medium.sapphire-radio--checked .sapphire-radio__box {
+.sapphire-radio--md.sapphire-radio--checked .sapphire-radio__box {
   border-width: calc(
     (
-        var(--sapphire-radio-size-height-box-m) -
-          var(--sapphire-radio-size-circle-m)
+        var(--sapphire-semantic-size-height-box-md) -
+          var(--sapphire-global-size-generic-15)
       ) / 2
   );
 }
@@ -106,7 +106,7 @@
   ):hover
   .sapphire-radio__input:not(:disabled)
   ~ .sapphire-radio__box {
-  border-color: var(--sapphire-radio-color-border-box-unchecked-hover);
+  border-color: var(--sapphire-semantic-color-border-control-hover);
 }
 
 /* Hover when checked */
@@ -116,7 +116,7 @@
 .sapphire-radio--checked:not(:active):not(.is-active):not(.js-hover):hover
   .sapphire-radio__input:not(:disabled)
   ~ .sapphire-radio__box {
-  border-color: var(--sapphire-radio-color-background-box-checked-hover);
+  border-color: var(--sapphire-semantic-color-background-action-primary-hover);
 }
 
 /* FOCUS */
@@ -125,9 +125,9 @@
 .sapphire-radio:not(.js-focus)
   .sapphire-radio__input:focus-visible
   ~ .sapphire-radio__box {
-  outline: var(--sapphire-radio-size-focus-ring-border) solid
-    var(--sapphire-radio-color-focus-ring);
-  outline-offset: var(--sapphire-radio-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 */
@@ -142,5 +142,5 @@
 .sapphire-radio:not(.sapphire-radio--no-disabled)
   .sapphire-radio__input:disabled
   ~ .sapphire-radio__label {
-  opacity: var(--sapphire-radio-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
 }

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

@@ -2,7 +2,7 @@ declare const styles: {
   readonly "sapphire-radio": string;
   readonly "sapphire-radio__input": string;
   readonly "sapphire-radio__label": string;
-  readonly "sapphire-radio--medium": string;
+  readonly "sapphire-radio--md": string;
   readonly "sapphire-radio__box": string;
   readonly "sapphire-radio--checked": string;
   readonly "is-active": string;

package/components/searchField/searchField.module.css

@@ -1,7 +1,7 @@
 .sapphire-search-field {
   box-sizing: border-box;
-  font-family: var(--sapphire-search-field-font-name);
-  width: var(--sapphire-search-field-size-width-control);
+  font-family: var(--sapphire-semantic-font-name-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
    * occurs for bold fonts on dark backgrounds but depending on the font, it
@@ -17,23 +17,19 @@
   -moz-osx-font-smoothing: grayscale;
   display: inline-flex;
   align-items: center;
-  gap: var(--sapphire-search-field-size-spacing-control-gap);
-  border-radius: var(--sapphire-search-field-size-radius-l);
+  gap: var(--sapphire-semantic-size-spacing-20);
+  border-radius: var(--sapphire-semantic-size-height-input-lg);
   cursor: text;
-  color: var(--sapphire-search-field-color-content-input);
-  font-size: var(--sapphire-search-field-size-font-l);
-  height: var(--sapphire-search-field-size-height-field-l);
-  background-color: var(--sapphire-search-field-color-background-default);
-}
-
-.sapphire-search-field--surface-secondary {
+  color: var(--sapphire-semantic-color-content-default-primary);
+  font-size: var(--sapphire-semantic-size-font-control-default);
+  height: var(--sapphire-semantic-size-height-input-lg);
   background-color: var(
-    --sapphire-search-field-color-background-surface-secondary
+    --sapphire-semantic-color-background-action-secondary-default
   );
 }
 
 .sapphire-search-field .sapphire-search-field__input:last-child {
-  padding-right: var(--sapphire-search-field-size-spacing-control-horizontal-l);
+  padding-right: var(--sapphire-semantic-size-spacing-40);
 }
 
 .sapphire-search-field__input {
@@ -41,10 +37,10 @@
   flex: 1;
   height: 100%;
   min-width: 0;
-  font-weight: var(--sapphire-search-field-size-font-weight-input);
-  caret-color: var(--sapphire-search-field-color-caret);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+  caret-color: var(--sapphire-semantic-color-background-action-primary-default);
   position: relative;
-  padding-left: var(--sapphire-search-field-size-height-field-l);
+  padding-left: var(--sapphire-semantic-size-height-input-lg);
 }
 
 /**
@@ -52,7 +48,7 @@
  */
 .sapphire-search-field__input::placeholder {
   opacity: 1; /* some browsers set a lower than 1 opacity */
-  color: var(--sapphire-search-field-color-content-placeholder);
+  color: var(--sapphire-semantic-color-content-default-secondary);
 }
 
 /**
@@ -60,15 +56,15 @@
  */
 .sapphire-search-field.is-focus,
 .sapphire-search-field:focus-within {
-  box-shadow: inset 0 0 0 var(--sapphire-search-field-size-focus-ring)
-    var(--sapphire-search-field-color-focus-ring);
+  box-shadow: inset 0 0 0 var(--sapphire-semantic-size-focus-ring)
+    var(--sapphire-semantic-color-focus-ring);
 }
 
 /**
  * Disabled
  */
 .sapphire-search-field.is-disabled {
-  opacity: var(--sapphire-search-field-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
   cursor: not-allowed;
 }
 
@@ -88,24 +84,24 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: var(--sapphire-search-field-size-height-field-l);
-  width: var(--sapphire-search-field-size-height-field-l);
-  color: var(--sapphire-search-field-color-content-button-default);
+  height: var(--sapphire-semantic-size-height-input-lg);
+  width: var(--sapphire-semantic-size-height-input-lg);
+  color: var(--sapphire-semantic-color-content-default-secondary);
   cursor: default;
   flex-shrink: 0;
 
-  transition: transform var(--sapphire-search-field-time-transition);
+  transition: transform var(--sapphire-semantic-time-fade-quick);
 }
 
 .sapphire-search-field__button:not(.js-hover):hover,
 .sapphire-search-field__button.is-hover {
-  color: var(--sapphire-search-field-color-content-button-hover);
+  color: var(--sapphire-global-color-sapphire-650);
 }
 
 .sapphire-search-field__button:active,
 .sapphire-search-field__button:not(.js-hover):active,
 .sapphire-search-field__button.is-active {
-  color: var(--sapphire-search-field-color-content-button-active);
+  color: var(--sapphire-semantic-color-content-default-primary);
 }
 
 .sapphire-search-field.is-disabled .sapphire-search-field__button,
@@ -127,11 +123,11 @@
   opacity: 0;
   width: 0; /* To not cover the input when invisible. */
   transform: scale(0.85);
-  transition: transform var(--sapphire-search-field-time-transition),
-    opacity var(--sapphire-search-field-time-transition),
-    width var(--sapphire-search-field-time-transition)
+  transition: transform var(--sapphire-semantic-time-fade-quick),
+    opacity var(--sapphire-semantic-time-fade-quick),
+    width var(--sapphire-semantic-time-fade-quick)
       /* Zero duration will kill the transition */
-      var(--sapphire-search-field-time-transition)
+      var(--sapphire-semantic-time-fade-quick)
       /* Delaying to prevent width transition*/;
 }
 
@@ -139,34 +135,34 @@
  * Search icon
  */
 .sapphire-search-field__icon {
-  color: var(--sapphire-search-field-color-content-icon);
+  color: var(--sapphire-semantic-color-content-default-secondary);
   display: inline-flex; /* Not to take more height than the icon */
   position: absolute;
-  margin-left: var(--sapphire-search-field-size-spacing-control-horizontal-l);
+  margin-left: var(--sapphire-semantic-size-spacing-40);
 }
 
 /**
  * Medium Size
  */
-.sapphire-search-field--medium {
-  font-size: var(--sapphire-search-field-size-font-m);
-  height: var(--sapphire-search-field-size-height-field-m);
-  border-radius: var(--sapphire-search-field-size-radius-l);
+.sapphire-search-field--md {
+  font-size: var(--sapphire-semantic-size-font-control-md);
+  height: var(--sapphire-semantic-size-height-input-md);
+  border-radius: var(--sapphire-semantic-size-height-input-lg);
 }
 
-.sapphire-search-field--medium .sapphire-search-field__input {
-  padding-left: var(--sapphire-search-field-size-height-field-m);
+.sapphire-search-field--md .sapphire-search-field__input {
+  padding-left: var(--sapphire-semantic-size-height-input-md);
 }
 
-.sapphire-search-field--medium .sapphire-search-field__button {
-  height: var(--sapphire-search-field-size-height-field-m);
-  width: var(--sapphire-search-field-size-height-field-m);
+.sapphire-search-field--md .sapphire-search-field__button {
+  height: var(--sapphire-semantic-size-height-input-md);
+  width: var(--sapphire-semantic-size-height-input-md);
 }
 
-.sapphire-search-field--medium .sapphire-search-field__input:last-child {
-  padding-right: var(--sapphire-search-field-size-spacing-control-horizontal-m);
+.sapphire-search-field--md .sapphire-search-field__input:last-child {
+  padding-right: var(--sapphire-semantic-size-spacing-30);
 }
 
-.sapphire-search-field--medium .sapphire-search-field__icon {
-  margin-left: var(--sapphire-search-field-size-spacing-control-horizontal-m);
+.sapphire-search-field--md .sapphire-search-field__icon {
+  margin-left: var(--sapphire-semantic-size-spacing-30);
 }

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

@@ -1,6 +1,5 @@
 declare const styles: {
   readonly "sapphire-search-field": string;
-  readonly "sapphire-search-field--surface-secondary": string;
   readonly "sapphire-search-field__input": string;
   readonly "is-focus": string;
   readonly "is-disabled": string;
@@ -10,7 +9,7 @@ declare const styles: {
   readonly "is-active": string;
   readonly "sapphire-search-field__input--empty": string;
   readonly "sapphire-search-field__icon": string;
-  readonly "sapphire-search-field--medium": string;
+  readonly "sapphire-search-field--md": string;
 };
 export = styles;
 

package/components/segmentedControl/segmentedControl.module.css

@@ -1,6 +1,6 @@
 .sapphire-segmented-control {
   display: flex;
-  height: var(--sapphire-segmented-control-size-height-m);
+  height: var(--sapphire-semantic-size-height-control-md);
 }
 
 .sapphire-segmented-control--stretch
@@ -24,35 +24,34 @@
   display: inline-flex;
   position: relative;
   height: 100%;
-  background-color: var(--sapphire-segmented-control-color-tray);
-  border-radius: var(--sapphire-segmented-control-size-radius);
-  padding: var(--sapphire-segmented-control-size-spacing-tray);
+  background-color: var(--sapphire-global-color-sapphire-50);
+  border-radius: var(--sapphire-semantic-size-height-control-lg);
+  padding: var(--sapphire-global-size-static-5);
   box-sizing: border-box;
 }
 
 .sapphire-segmented-control__glider {
   position: absolute;
-  top: var(--sapphire-segmented-control-size-spacing-tray);
+  top: var(--sapphire-global-size-static-5);
   left: 0;
-  height: calc(100% - var(--sapphire-segmented-control-size-spacing-tray) * 2);
+  height: calc(100% - var(--sapphire-global-size-static-5) * 2);
   display: block;
-  background-color: var(--sapphire-segmented-control-color-glider);
-  box-shadow: var(--sapphire-segmented-control-shadow-glider);
+  background-color: var(--sapphire-semantic-color-background-surface);
+  box-shadow: var(--sapphire-global-shadow-sm);
   box-sizing: border-box;
   z-index: 1;
-  border-radius: var(--sapphire-segmented-control-size-radius);
+  border-radius: var(--sapphire-semantic-size-height-control-lg);
 }
 
 .sapphire-segmented-control__glider--with-transition {
-  transition: width var(--sapphire-segmented-control-time-transition)
-      ease-in-out,
-    left var(--sapphire-segmented-control-time-transition) ease-in-out;
+  transition: width var(--sapphire-semantic-time-motion-quick) ease-in-out,
+    left var(--sapphire-semantic-time-motion-quick) ease-in-out;
 }
 
 .sapphire-segmented-control__button {
-  font-family: var(--sapphire-segmented-control-font-name);
-  font-weight: var(--sapphire-segmented-control-font-weight);
-  font-size: var(--sapphire-segmented-control-size-font-m);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-semantic-size-font-control-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
      * occurs for bold fonts on dark backgrounds but depending on the font, it
@@ -71,10 +70,10 @@
   margin: 0;
   border: 0;
   height: 100%;
-  min-width: var(--sapphire-segmented-control-size-min-width-tab);
-  padding: 0 var(--sapphire-segmented-control-size-spacing-tab-horizontal);
+  min-width: var(--sapphire-global-size-generic-120);
+  padding: 0 var(--sapphire-semantic-size-spacing-50);
   background-color: transparent;
-  color: var(--sapphire-segmented-control-color-content-inactive);
+  color: var(--sapphire-semantic-color-content-default-primary);
   cursor: pointer;
   outline: none;
   z-index: 2;
@@ -82,23 +81,22 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  transition: color var(--sapphire-segmented-control-time-transition)
-    ease-in-out;
+  transition: color var(--sapphire-semantic-time-motion-quick) ease-in-out;
 }
 
 .sapphire-segmented-control__button--active {
-  color: var(--sapphire-segmented-control-color-content-active);
+  color: var(--sapphire-semantic-color-content-link-primary-default);
 }
 
 .sapphire-segmented-control__button--disabled {
-  opacity: var(--sapphire-segmented-control-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
   cursor: not-allowed;
 }
 
 .sapphire-segmented-control.focus-visible:focus-within
   .sapphire-segmented-control__glider {
-  outline: var(--sapphire-segmented-control-size-focus-ring) solid
-    var(--sapphire-segmented-control-color-focus-ring);
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
 }
 
 /* Manual keyboard navigation */
@@ -109,9 +107,9 @@
 
 .sapphire-segmented-control--manual-keyboard-activation.focus-visible
   .sapphire-segmented-control__button:focus {
-  outline: var(--sapphire-segmented-control-size-focus-ring) solid
-    var(--sapphire-segmented-control-color-focus-ring);
-  border-radius: var(--sapphire-segmented-control-size-radius);
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
+  border-radius: var(--sapphire-semantic-size-height-control-lg);
 }
 
 .sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation
@@ -120,20 +118,20 @@
 }
 
 /* Sizes */
-.sapphire-segmented-control--large {
-  height: var(--sapphire-segmented-control-size-height-l);
+.sapphire-segmented-control--lg {
+  height: var(--sapphire-semantic-size-height-control-lg);
 }
 
-.sapphire-segmented-control--large .sapphire-segmented-control__button {
-  font-size: var(--sapphire-segmented-control-size-font-l);
+.sapphire-segmented-control--lg .sapphire-segmented-control__button {
+  font-size: var(--sapphire-semantic-size-font-control-default);
 }
 
-.sapphire-segmented-control--small {
-  height: var(--sapphire-segmented-control-size-height-s);
+.sapphire-segmented-control--sm {
+  height: var(--sapphire-semantic-size-height-control-sm);
 }
 
-.sapphire-segmented-control--small .sapphire-segmented-control__button {
-  font-size: var(--sapphire-segmented-control-size-font-s);
+.sapphire-segmented-control--sm .sapphire-segmented-control__button {
+  font-size: var(--sapphire-semantic-size-font-control-sm);
 }
 
 /* Radio-specific */

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

@@ -12,8 +12,8 @@ declare const styles: {
   readonly "sapphire-segmented-control__button--disabled": string;
   readonly "focus-visible": string;
   readonly "sapphire-segmented-control--manual-keyboard-activation": string;
-  readonly "sapphire-segmented-control--large": string;
-  readonly "sapphire-segmented-control--small": string;
+  readonly "sapphire-segmented-control--lg": string;
+  readonly "sapphire-segmented-control--sm": string;
   readonly "sapphire-segmented-control__radio-input": string;
 };
 export = styles;

package/components/select/select.module.css

@@ -1,9 +1,9 @@
 .sapphire-select {
   position: relative;
   display: inline-block;
-  color: var(--sapphire-select-color-content);
-  width: var(--sapphire-select-size-width-control);
-  font-family: var(--sapphire-select-font-name);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  width: var(--sapphire-semantic-size-width-control-default);
+  font-family: var(--sapphire-semantic-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
@@ -22,60 +22,60 @@
 .sapphire-select__button {
   display: flex;
   align-items: center;
-  height: var(--sapphire-select-size-height-field-l);
+  height: var(--sapphire-semantic-size-height-input-lg);
   box-sizing: border-box;
   cursor: pointer;
-  padding: 0 var(--sapphire-select-size-spacing-control-horizontal-l);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);
   border: none;
-  background-color: var(--sapphire-select-color-background-field);
+  background-color: var(--sapphire-semantic-color-background-field-default);
   width: 100%;
   outline: 0;
   text-align: left;
   color: inherit;
   font-family: inherit;
   box-shadow: inset 0px 0px 0px 1px
-    var(--sapphire-select-color-border-field-default);
-  border-radius: var(--sapphire-select-size-radius-field);
-  gap: var(--sapphire-select-size-spacing-control-gap-l);
+    var(--sapphire-semantic-color-border-field-default);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
+  gap: var(--sapphire-semantic-size-spacing-30);
 }
 
-.sapphire-select--medium .sapphire-select__button {
-  height: var(--sapphire-select-size-height-field-m);
-  padding: 0 var(--sapphire-select-size-spacing-control-horizontal-m);
-  gap: var(--sapphire-select-size-spacing-control-gap-m);
+.sapphire-select--md .sapphire-select__button {
+  height: var(--sapphire-semantic-size-height-input-md);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
+  gap: var(--sapphire-semantic-size-spacing-20);
 }
 
 .sapphire-select__value {
   flex: 1 0 0;
   min-width: 0;
-  font-size: var(--sapphire-select-size-font-content-l);
+  font-size: var(--sapphire-semantic-size-font-control-default);
   width: 100%;
-  font-weight: var(--sapphire-select-size-font-weight-item);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.sapphire-select--medium .sapphire-select__value {
-  font-size: var(--sapphire-select-size-font-content-m);
+.sapphire-select--md .sapphire-select__value {
+  font-size: var(--sapphire-semantic-size-font-control-md);
 }
 
 .sapphire-select__placeholder {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--sapphire-select-color-placeholder);
+  color: var(--sapphire-semantic-color-content-default-secondary);
 }
 
 .sapphire-select__icon-container {
   line-height: 0;
-  width: var(--sapphire-select-size-width-icon-l);
-  height: var(--sapphire-select-size-height-icon-l);
+  width: var(--sapphire-semantic-size-icon-lg);
+  height: var(--sapphire-semantic-size-icon-lg);
 }
 
-.sapphire-select--medium .sapphire-select__icon-container {
-  width: var(--sapphire-select-size-width-icon-m);
-  height: var(--sapphire-select-size-height-icon-m);
+.sapphire-select--md .sapphire-select__icon-container {
+  width: var(--sapphire-semantic-size-icon-md);
+  height: var(--sapphire-semantic-size-icon-md);
 }
 
 /**
@@ -84,11 +84,11 @@
 
 .sapphire-select__prefix {
   display: inherit; /* because this will not be a div */
-  font-size: var(--sapphire-select-size-font-content-l);
+  font-size: var(--sapphire-semantic-size-font-control-default);
 }
 
-.sapphire-select--medium .sapphire-select__prefix {
-  font-size: var(--sapphire-select-size-font-content-m);
+.sapphire-select--md .sapphire-select__prefix {
+  font-size: var(--sapphire-semantic-size-font-control-md);
 }
 
 /*
@@ -100,7 +100,7 @@
   all: inherit;
 }
 .sapphire-select__search-input::placeholder {
-  color: var(--sapphire-select-color-placeholder);
+  color: var(--sapphire-semantic-color-content-default-secondary);
 }
 
 .sapphire-select__native-select {
@@ -119,20 +119,20 @@
  */
 .sapphire-select--error:not(.is-disabled) .sapphire-select__button {
   box-shadow: inset 0px 0px 0px 1px
-    var(--sapphire-select-color-border-field-error);
+    var(--sapphire-semantic-color-border-field-error);
 }
 
 /*
  * Focus
  */
 .sapphire-select:not(.is-disabled).is-focus .sapphire-select__button {
-  box-shadow: inset 0px 0px 0px var(--sapphire-select-size-focus-ring)
-    var(--sapphire-select-color-focus-ring);
+  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
+    var(--sapphire-semantic-color-focus-ring);
 }
 
 .sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button {
-  box-shadow: inset 0px 0px 0px var(--sapphire-select-size-focus-ring)
-    var(--sapphire-select-color-border-field-error);
+  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
+    var(--sapphire-semantic-color-border-field-error);
 }
 
 .sapphire-select.is-disabled .sapphire-select__button {

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

@@ -1,7 +1,7 @@
 declare const styles: {
   readonly "sapphire-select": string;
   readonly "sapphire-select__button": string;
-  readonly "sapphire-select--medium": string;
+  readonly "sapphire-select--md": string;
   readonly "sapphire-select__value": string;
   readonly "sapphire-select__placeholder": string;
   readonly "sapphire-select__icon-container": string;