@danske/sapphire-css 39.0.0 → 40.0.0

package/components/modalLayout/modalLayout.module.css

@@ -3,9 +3,8 @@
   flex-direction: column;
   height: 100%;
   min-height: 0;
-  background-color: 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);
 }
 
 .sapphire-modal-layout__header-container {
@@ -15,9 +14,9 @@
 .sapphire-modal-layout__header {
   display: flex;
   justify-content: space-between;
-  padding: var(--sapphire-semantic-size-spacing-50)
+  padding: var(--sapphire-semantic-size-spacing-lg)
     var(--sapphire-semantic-size-spacing-container-horizontal-md);
-  gap: var(--sapphire-semantic-size-spacing-30);
+  gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
 .sapphire-modal-layout__body {
@@ -36,16 +35,16 @@
 }
 
 .sapphire-modal-layout__footer {
-  padding: var(--sapphire-semantic-size-spacing-70)
+  padding: var(--sapphire-semantic-size-spacing-2xl)
     var(--sapphire-semantic-size-spacing-container-horizontal-md)
-    var(--sapphire-semantic-size-spacing-70)
+    var(--sapphire-semantic-size-spacing-2xl)
     var(--sapphire-semantic-size-spacing-container-horizontal-md);
 }
 
 /** Container for heading and subheading **/
 .sapphire-modal-layout__heading-container {
   flex: 1;
-  padding: var(--sapphire-semantic-size-spacing-20) 0;
+  padding: var(--sapphire-semantic-size-spacing-3xs) 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -53,8 +52,8 @@
 }
 
 .sapphire-modal-layout__subheading {
-  color: var(--sapphire-semantic-color-content-default-secondary);
-  margin-top: var(--sapphire-semantic-size-spacing-20);
+  color: var(--sapphire-semantic-color-foreground-secondary);
+  margin-top: var(--sapphire-semantic-size-spacing-2xs);
 }
 
 .sapphire-modal-layout__header-container + .sapphire-modal-layout__body {
@@ -65,12 +64,12 @@
 .sapphire-modal-layout__header-container
   + .sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled {
   border-top: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-separator-default);
+    var(--sapphire-semantic-color-border-secondary);
 }
 
 .sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer))
   .sapphire-modal-layout__body:not(.sapphire-modal-layout__body--no-padding) {
-  padding-bottom: var(--sapphire-semantic-size-spacing-50);
+  padding-bottom: var(--sapphire-semantic-size-spacing-lg);
 }
 .sapphire-modal-layout__body + .sapphire-modal-layout__footer-container {
   /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
@@ -80,5 +79,5 @@
 .sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable
   + .sapphire-modal-layout__footer-container {
   border-top: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-separator-default);
+    var(--sapphire-semantic-color-border-secondary);
 }

package/components/notificationBadge/notificationBadge.module.css

@@ -34,9 +34,8 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: var(--sapphire-semantic-color-content-action-primary-default);
   font-family: var(--sapphire-semantic-font-name-default);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
   box-sizing: border-box;
   font-style: normal;
   /* The below is meant to address a font rendering quirk in OSX where the text
@@ -56,28 +55,30 @@
 
 .sapphire-notification-badge--pop-in {
   animation: pop-in var(--sapphire-semantic-time-fade-default)
-    cubic-bezier(0.55, -0.49, 0.39, 1.49);
+    var(--sapphire-semantic-transitions-fade);
 }
 
 .sapphire-notification-badge--pop-out {
-  animation: pop-out var(--sapphire-semantic-time-fade-default) forwards;
+  animation: pop-out var(--sapphire-semantic-time-fade-default)
+    var(--sapphire-semantic-transitions-fade) forwards;
 }
 
 /* Sizes */
 .sapphire-notification-badge--lg {
-  height: var(--sapphire-global-size-generic-60);
-  border-radius: var(--sapphire-global-size-generic-60);
-  padding: var(--sapphire-semantic-size-spacing-10)
-    var(--sapphire-semantic-size-spacing-20);
-  font-size: var(--sapphire-semantic-size-font-control-sm);
+  height: var(--sapphire-semantic-size-icon-lg);
+  border-radius: var(--sapphire-semantic-size-icon-lg);
+  padding: var(--sapphire-semantic-size-spacing-2xs)
+    var(--sapphire-semantic-size-spacing-xs);
+  font-size: var(--sapphire-semantic-size-font-body-xs);
+  min-width: var(--sapphire-semantic-size-icon-lg);
 }
 
 .sapphire-notification-badge--md {
-  height: var(--sapphire-global-size-generic-40);
-  border-radius: var(--sapphire-global-size-generic-40);
-  padding: 0 var(--sapphire-semantic-size-spacing-10);
+  height: var(--sapphire-semantic-size-icon-md);
+  border-radius: var(--sapphire-semantic-size-icon-md);
+  padding: 0 var(--sapphire-semantic-size-spacing-3xs);
   font-size: var(--sapphire-global-size-font-60);
-  min-width: var(--sapphire-global-size-generic-40);
+  min-width: var(--sapphire-semantic-size-icon-md);
   box-sizing: border-box;
 }
 
@@ -89,11 +90,13 @@
 
 /* Variants */
 .sapphire-notification-badge--primary {
-  background-color: var(--sapphire-global-color-red-500);
+  background: var(--sapphire-semantic-color-background-negative);
+  color: var(--sapphire-semantic-color-foreground-on-negative);
 }
 
 .sapphire-notification-badge--secondary {
-  background-color: var(--sapphire-global-color-blue-500);
+  background: var(--sapphire-semantic-color-background-accent);
+  color: var(--sapphire-semantic-color-foreground-on-accent);
 }
 
 /* Positioned */

package/components/pagination/pagination.module.css

@@ -2,12 +2,12 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  padding: var(--sapphire-semantic-size-spacing-20)
-    var(--sapphire-semantic-size-spacing-50);
-  background-color: var(--sapphire-semantic-color-background-surface);
+  padding: var(--sapphire-semantic-size-spacing-2xs)
+    var(--sapphire-semantic-size-spacing-lg);
   font-family: var(--sapphire-semantic-font-name-default);
   font-size: var(--sapphire-semantic-size-font-control-sm);
   height: var(--sapphire-semantic-size-height-control-md);
+  background: var(--sapphire-semantic-color-background-surface);
 
   /* 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
@@ -29,18 +29,18 @@
   align-items: center;
   justify-content: flex-end;
   flex-grow: 1;
-  color: var(--sapphire-semantic-color-content-default-primary);
-  gap: var(--sapphire-semantic-size-spacing-30);
+  color: var(--sapphire-semantic-color-foreground-primary);
+  gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
 .sapphire-pagination__text {
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
-  padding-left: var(--sapphire-semantic-size-spacing-20);
-  padding-right: var(--sapphire-semantic-size-spacing-20);
+  padding-left: var(--sapphire-semantic-size-spacing-2xs);
+  padding-right: var(--sapphire-semantic-size-spacing-2xs);
 }
 
 .sapphire-pagination__text--emphasized {
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
 }
 
 .sapphire-pagination__ellipsis {
@@ -50,5 +50,5 @@
   height: var(--sapphire-semantic-size-height-control-sm);
   width: var(--sapphire-semantic-size-height-control-sm);
   font-size: var(--sapphire-semantic-size-font-control-sm);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
 }

package/components/panel/panel.module.css

@@ -5,9 +5,11 @@
   display: block;
   height: 100%;
   outline: 0;
-  transition: transform var(--sapphire-semantic-time-motion-default) ease-in-out;
+  transition: transform var(--sapphire-semantic-time-motion-default)
+    var(--sapphire-semantic-transitions-standard);
   transform: translateX(100%);
   width: var(--sapphire-semantic-size-width-panel-lg);
+  background: var(--sapphire-semantic-color-background-surface);
 }
 
 .sapphire-panel--visible {

package/components/popover/popover.module.css

@@ -9,9 +9,10 @@
 
 .sapphire-popover {
   box-sizing: border-box;
-  background-color: var(--sapphire-semantic-color-background-popover-default);
+  background: var(--sapphire-semantic-color-background-popover);
   box-shadow: var(--sapphire-semantic-shadow-popover);
-  animation: fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;
+  animation: fade-in var(--sapphire-semantic-time-fade-quick)
+    var(--sapphire-semantic-transitions-fade);
   border-radius: var(--sapphire-semantic-size-radius-popover);
   overflow: auto;
 

package/components/radio/radio.module.css

@@ -19,10 +19,10 @@
 }
 
 .sapphire-radio__label {
-  margin-left: var(--sapphire-semantic-size-spacing-20);
-  font-size: var(--sapphire-semantic-size-font-control-default);
+  margin-left: var(--sapphire-semantic-size-spacing-sm);
+  font-size: var(--sapphire-semantic-size-font-control-lg);
   line-height: var(--sapphire-semantic-size-height-control-xs);
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-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
@@ -48,19 +48,19 @@
 
 .sapphire-radio__box {
   box-sizing: border-box;
-  background-color: var(--sapphire-semantic-color-background-control-default);
+  background-color: var(--sapphire-semantic-color-background-field);
   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-semantic-size-border-md) solid
-    var(--sapphire-semantic-color-border-control-default);
+  border: var(--sapphire-semantic-size-border-sm) solid
+    var(--sapphire-semantic-color-border-field-default);
   position: relative;
-  margin-top: var(--sapphire-semantic-size-spacing-5);
+  margin-top: var(--sapphire-semantic-size-spacing-4xs);
 
   transition-property: background-color, border-color, border-width;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
 }
 
 .sapphire-radio--md .sapphire-radio__box {
@@ -78,6 +78,9 @@
           var(--sapphire-global-size-generic-20)
       ) / 2
   );
+  background-color: var(
+    --sapphire-semantic-color-foreground-action-on-select-default
+  );
 }
 
 .sapphire-radio--md.sapphire-radio--checked .sapphire-radio__box {
@@ -106,7 +109,7 @@
   ):hover
   .sapphire-radio__input:not(:disabled)
   ~ .sapphire-radio__box {
-  border-color: var(--sapphire-semantic-color-border-control-hover);
+  border-color: var(--sapphire-semantic-color-border-field-hover);
 }
 
 /* Hover when checked */
@@ -119,6 +122,26 @@
   border-color: var(--sapphire-semantic-color-background-action-primary-hover);
 }
 
+/* ACTIVE */
+
+/* Active when not checked */
+
+.sapphire-radio:not(.sapphire-radio--checked).is-active .sapphire-radio__box,
+.sapphire-radio:not(.sapphire-radio--checked):active
+  .sapphire-radio__input:not(:disabled)
+  ~ .sapphire-radio__box {
+  border-color: var(--sapphire-semantic-color-border-field-active);
+}
+
+/* Active when checked */
+
+.sapphire-radio--checked.is-active .sapphire-radio__box,
+.sapphire-radio--checked:active
+  .sapphire-radio__input:not(:disabled)
+  ~ .sapphire-radio__box {
+  border-color: var(--sapphire-semantic-color-background-action-primary-active);
+}
+
 /* FOCUS */
 
 .sapphire-radio.is-focus .sapphire-radio__input ~ .sapphire-radio__box,

package/components/searchField/searchField.module.css

@@ -1,7 +1,7 @@
 .sapphire-search-field {
   box-sizing: border-box;
   font-family: var(--sapphire-semantic-font-name-default);
-  width: var(--sapphire-semantic-size-width-control-default);
+  width: var(--sapphire-semantic-size-width-field);
   /* 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,19 +17,19 @@
   -moz-osx-font-smoothing: grayscale;
   display: inline-flex;
   align-items: center;
-  gap: var(--sapphire-semantic-size-spacing-20);
-  border-radius: var(--sapphire-semantic-size-height-input-lg);
+  gap: var(--sapphire-semantic-size-spacing-2xs);
+  border-radius: var(--sapphire-semantic-size-height-control-lg);
   cursor: text;
-  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(
+  color: var(--sapphire-semantic-color-foreground-primary);
+  font-size: var(--sapphire-semantic-size-font-control-lg);
+  height: var(--sapphire-semantic-size-height-control-lg);
+  background: var(
     --sapphire-semantic-color-background-action-secondary-default
   );
 }
 
 .sapphire-search-field .sapphire-search-field__input:last-child {
-  padding-right: var(--sapphire-semantic-size-spacing-40);
+  padding-right: var(--sapphire-semantic-size-spacing-md);
 }
 
 .sapphire-search-field__input {
@@ -38,9 +38,8 @@
   height: 100%;
   min-width: 0;
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
-  caret-color: var(--sapphire-semantic-color-cursor-default);
   position: relative;
-  padding-left: var(--sapphire-semantic-size-height-input-lg);
+  padding-left: var(--sapphire-semantic-size-height-control-lg);
 }
 
 /**
@@ -48,7 +47,7 @@
  */
 .sapphire-search-field__input::placeholder {
   opacity: 1; /* some browsers set a lower than 1 opacity */
-  color: var(--sapphire-semantic-color-content-default-secondary);
+  color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
 /**
@@ -84,9 +83,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: var(--sapphire-semantic-size-height-input-lg);
-  width: var(--sapphire-semantic-size-height-input-lg);
-  color: var(--sapphire-semantic-color-content-default-secondary);
+  height: var(--sapphire-semantic-size-height-control-lg);
+  width: var(--sapphire-semantic-size-height-control-lg);
+  color: var(--sapphire-semantic-color-foreground-secondary);
   cursor: default;
   flex-shrink: 0;
 
@@ -96,13 +95,13 @@
 
 .sapphire-search-field__button:not(.js-hover):hover,
 .sapphire-search-field__button.is-hover {
-  color: var(--sapphire-global-color-sapphire-650);
+  color: var(--sapphire-semantic-color-foreground-primary);
 }
 
 .sapphire-search-field__button:active,
 .sapphire-search-field__button:not(.js-hover):active,
 .sapphire-search-field__button.is-active {
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-primary);
 }
 
 .sapphire-search-field.is-disabled .sapphire-search-field__button,
@@ -136,10 +135,10 @@
  * Search icon
  */
 .sapphire-search-field__icon {
-  color: var(--sapphire-semantic-color-content-default-secondary);
+  color: var(--sapphire-semantic-color-foreground-secondary);
   display: inline-flex; /* Not to take more height than the icon */
   position: absolute;
-  margin-left: var(--sapphire-semantic-size-spacing-40);
+  margin-left: var(--sapphire-semantic-size-spacing-md);
 }
 
 /**
@@ -147,23 +146,23 @@
  */
 .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);
+  height: var(--sapphire-semantic-size-height-control-md);
+  border-radius: var(--sapphire-semantic-size-height-control-md);
 }
 
 .sapphire-search-field--md .sapphire-search-field__input {
-  padding-left: var(--sapphire-semantic-size-height-input-md);
+  padding-left: var(--sapphire-semantic-size-height-control-md);
 }
 
 .sapphire-search-field--md .sapphire-search-field__button {
-  height: var(--sapphire-semantic-size-height-input-md);
-  width: var(--sapphire-semantic-size-height-input-md);
+  height: var(--sapphire-semantic-size-height-control-md);
+  width: var(--sapphire-semantic-size-height-control-md);
 }
 
 .sapphire-search-field--md .sapphire-search-field__input:last-child {
-  padding-right: var(--sapphire-semantic-size-spacing-30);
+  padding-right: var(--sapphire-semantic-size-spacing-sm);
 }
 
 .sapphire-search-field--md .sapphire-search-field__icon {
-  margin-left: var(--sapphire-semantic-size-spacing-30);
+  margin-left: var(--sapphire-semantic-size-spacing-sm);
 }

package/components/segmentedControl/segmentedControl.module.css

@@ -24,9 +24,7 @@
   display: inline-flex;
   position: relative;
   height: 100%;
-  background-color: var(
-    --sapphire-semantic-color-background-control-special-secondary-default
-  );
+  background: var(--sapphire-semantic-color-background-segmented-control-track);
   border-radius: var(--sapphire-semantic-size-height-control-lg);
   padding: var(--sapphire-global-size-static-5);
   box-sizing: border-box;
@@ -35,26 +33,25 @@
 .sapphire-segmented-control__glider {
   position: absolute;
   top: var(--sapphire-global-size-static-5);
-  left: 0;
+  left: var(--sapphire-global-size-static-5);
   height: calc(100% - var(--sapphire-global-size-static-5) * 2);
   display: block;
-  background-color: var(
-    --sapphire-semantic-color-background-control-special-primary-default
-  );
-  box-shadow: var(--sapphire-global-shadow-sm);
+  background: var(--sapphire-semantic-color-background-segmented-control-knob);
   box-sizing: border-box;
   z-index: 1;
   border-radius: var(--sapphire-semantic-size-height-control-lg);
 }
 
 .sapphire-segmented-control__glider--with-transition {
-  transition: width var(--sapphire-semantic-time-motion-quick) ease-in-out,
-    left var(--sapphire-semantic-time-motion-quick) ease-in-out;
+  transition: width var(--sapphire-semantic-time-motion-quick)
+      var(--sapphire-semantic-transitions-dynamic),
+    left var(--sapphire-semantic-time-motion-quick)
+      var(--sapphire-semantic-transitions-dynamic);
 }
 
 .sapphire-segmented-control__button {
   font-family: var(--sapphire-semantic-font-name-default);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
   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
@@ -75,9 +72,9 @@
   border: 0;
   height: 100%;
   min-width: var(--sapphire-global-size-generic-120);
-  padding: 0 var(--sapphire-semantic-size-spacing-50);
-  background-color: transparent;
-  color: var(--sapphire-semantic-color-content-default-primary);
+  padding: 0 var(--sapphire-semantic-size-spacing-lg);
+  background: transparent;
+  color: var(--sapphire-semantic-color-foreground-primary);
   cursor: pointer;
   outline: none;
   z-index: 2;
@@ -85,11 +82,12 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  transition: color var(--sapphire-semantic-time-motion-quick) ease-in-out;
+  transition: color var(--sapphire-semantic-time-motion-quick)
+    var(--sapphire-semantic-transitions-dynamic);
 }
 
 .sapphire-segmented-control__button--active {
-  color: var(--sapphire-semantic-color-content-link-primary-default);
+  color: var(--sapphire-semantic-color-foreground-primary);
 }
 
 .sapphire-segmented-control__button--disabled {
@@ -127,7 +125,7 @@
 }
 
 .sapphire-segmented-control--lg .sapphire-segmented-control__button {
-  font-size: var(--sapphire-semantic-size-font-control-default);
+  font-size: var(--sapphire-semantic-size-font-control-lg);
 }
 
 .sapphire-segmented-control--sm {

package/components/select/select.module.css

@@ -1,7 +1,7 @@
 .sapphire-select {
   position: relative;
   display: block;
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-primary);
   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
@@ -21,33 +21,33 @@
 .sapphire-select__button {
   display: flex;
   align-items: center;
-  height: var(--sapphire-semantic-size-height-input-lg);
+  height: var(--sapphire-semantic-size-height-control-lg);
   box-sizing: border-box;
   cursor: pointer;
   padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);
   border: none;
-  background-color: var(--sapphire-semantic-color-background-field-default);
+  background: var(--sapphire-semantic-color-background-field);
   width: 100%;
   outline: 0;
   text-align: left;
   color: inherit;
   font-family: inherit;
-  box-shadow: inset 0px 0px 0px 1px
+  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-border-sm)
     var(--sapphire-semantic-color-border-field-default);
   border-radius: var(--sapphire-semantic-size-radius-sm);
-  gap: var(--sapphire-semantic-size-spacing-30);
+  gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
 .sapphire-select--md .sapphire-select__button {
-  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-select__value {
   flex: 1 0 0;
   min-width: 0;
-  font-size: var(--sapphire-semantic-size-font-control-default);
+  font-size: var(--sapphire-semantic-size-font-control-lg);
   width: 100%;
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
   overflow: hidden;
@@ -63,19 +63,19 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--sapphire-semantic-color-content-default-secondary);
+  color: var(--sapphire-semantic-color-foreground-secondary);
   pointer-events: none;
 }
 
 .sapphire-select__icon-container {
   line-height: 0;
-  width: var(--sapphire-semantic-size-icon-lg);
-  height: var(--sapphire-semantic-size-icon-lg);
+  width: var(--sapphire-semantic-size-icon-md);
+  height: var(--sapphire-semantic-size-icon-md);
 }
 
 .sapphire-select--md .sapphire-select__icon-container {
-  width: var(--sapphire-semantic-size-icon-md);
-  height: var(--sapphire-semantic-size-icon-md);
+  width: var(--sapphire-semantic-size-icon-sm);
+  height: var(--sapphire-semantic-size-icon-sm);
 }
 
 /**
@@ -84,7 +84,8 @@
 
 .sapphire-select__prefix {
   display: inherit; /* because this will not be a div */
-  font-size: var(--sapphire-semantic-size-font-control-default);
+  font-size: var(--sapphire-semantic-size-font-control-lg);
+  color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
 .sapphire-select--md .sapphire-select__prefix {
@@ -100,7 +101,7 @@
   all: inherit;
 }
 .sapphire-select__search-input::placeholder {
-  color: var(--sapphire-semantic-color-content-default-secondary);
+  color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
 .sapphire-select__native-select {
@@ -119,10 +120,25 @@
  */
 .sapphire-select--error:not(.is-disabled) .sapphire-select__button {
   box-shadow: inset 0px 0px 0px 1px
-    var(--sapphire-semantic-color-border-field-error);
+    var(--sapphire-semantic-color-border-negative-default);
 }
 
-/*
+/**
+ * Hover
+ */
+.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(
+    .is-disabled
+  ).is-hover
+  .sapphire-select__button,
+.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(
+    .is-disabled
+  ):not(.js-hover):hover
+  .sapphire-select__button {
+  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-border-sm)
+    var(--sapphire-semantic-color-border-field-hover);
+}
+
+/**
  * Focus
  */
 .sapphire-select:not(.is-disabled).is-focus .sapphire-select__button {
@@ -132,7 +148,7 @@
 
 .sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button {
   box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
-    var(--sapphire-semantic-color-border-field-error);
+    var(--sapphire-semantic-color-border-negative-default);
 }
 
 .sapphire-select.is-disabled .sapphire-select__button {

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

@@ -11,6 +11,8 @@ declare const styles: {
   readonly "sapphire-select--error": string;
   readonly "is-disabled": string;
   readonly "is-focus": string;
+  readonly "is-hover": string;
+  readonly "js-hover": string;
 };
 export = styles;
 

package/components/skeleton/skeleton.module.css

@@ -5,7 +5,7 @@
   }
   60%,
   65% {
-    opacity: var(--sapphire-global-opacity-35);
+    opacity: var(--sapphire-semantic-opacity-disabled);
   }
   100% {
     opacity: 1;
@@ -15,8 +15,11 @@
 .sapphire-skeleton {
   width: 100%;
 
-  background-color: var(--sapphire-semantic-color-background-skeleton-default);
+  background: var(--sapphire-semantic-color-background-skeleton);
 
+  /* This is special value of animation timing function
+   * used only for skeletons.
+   */
   animation: skeletonPulse infinite cubic-bezier(0.25, 0, 0.25, 1);
   animation-duration: var(--sapphire-semantic-time-fade-slow);
 }