@danske/sapphire-css 32.2.0 → 33.0.0

package/components/listbox/listbox.module.css

@@ -1,6 +1,6 @@
 .sapphire-listbox {
   box-sizing: border-box;
-  min-width: var(--sapphire-listbox-size-width-min);
+  min-width: var(--sapphire-global-size-generic-320);
   margin: 0;
   position: relative;
   list-style: none;
@@ -23,8 +23,8 @@
    */
 
   padding: calc(
-      var(--sapphire-listbox-size-spacing-outer-horizontal) -
-        var(--sapphire-listbox-size-spacing-outer-vertical)
+      var(--sapphire-semantic-size-spacing-10) -
+        var(--sapphire-semantic-size-spacing-5)
     )
     0;
 
@@ -49,9 +49,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--sapphire-listbox-size-spacing-outer-vertical)
-    var(--sapphire-listbox-size-spacing-outer-horizontal);
-  color: var(--sapphire-listbox-color-content-normal-primary-default);
+  padding: var(--sapphire-semantic-size-spacing-5)
+    var(--sapphire-semantic-size-spacing-10);
+  color: var(--sapphire-semantic-color-content-selection-unselected-default);
   outline: none;
   cursor: pointer;
   text-decoration: none;
@@ -66,15 +66,17 @@
 }
 
 .sapphire-listbox__item--danger {
-  color: var(--sapphire-listbox-color-content-danger-default);
+  color: var(--sapphire-semantic-color-content-action-danger-default);
 }
 
 .sapphire-listbox__item--selected {
-  color: var(--sapphire-listbox-color-content-selected-default);
+  color: var(--sapphire-semantic-color-content-selection-selected-default);
 }
 
 .sapphire-listbox__item--selected .sapphire-listbox__content {
-  background-color: var(--sapphire-listbox-color-background-selected-default);
+  background-color: var(
+    --sapphire-semantic-color-background-selection-selected-default
+  );
 }
 
 /* Content inside the item */
@@ -85,49 +87,49 @@
    * max-width set to mitigate the issue of not being able to set a max-width on the popover the
    * listbox is rendered in, in use cases like Select.
    */
-  max-width: calc(100vw - 2 * var(--sapphire-listbox-size-width-icon-l));
+  max-width: calc(100vw - 2 * var(--sapphire-semantic-size-icon-lg));
   display: grid;
   grid-auto-flow: column;
   align-items: center;
-  gap: var(--sapphire-listbox-size-spacing-inner-horizontal-l);
+  gap: var(--sapphire-semantic-size-spacing-30);
   /*
    * We want the left-side icon column to not take space if it's empty. The
    * right-side "checkmark" icon column should always take space even if the
    * checkmark isn't there. This is to make sure the listbox doesn't jump when
    * selecting items that add the checkmark in the last column.
    */
-  grid-template-columns: auto 1fr var(--sapphire-listbox-size-width-icon-l);
+  grid-template-columns: auto 1fr var(--sapphire-semantic-size-icon-lg);
   padding: calc(
-      var(--sapphire-listbox-size-spacing-inner-vertical-l) -
-        var(--sapphire-listbox-size-spacing-outer-vertical)
+      var(--sapphire-semantic-size-spacing-30) -
+        var(--sapphire-semantic-size-spacing-5)
     )
-    var(--sapphire-listbox-size-spacing-inner-horizontal-l);
-  border-radius: var(--sapphire-listbox-size-radius-item);
+    var(--sapphire-semantic-size-spacing-30);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
   transition-property: opacity, background-color, color;
-  transition-duration: var(--sapphire-listbox-time-transition);
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: ease-in-out;
 
-  min-height: var(--sapphire-listbox-size-height-min-height);
+  min-height: var(--sapphire-semantic-size-height-control-xs);
 }
 
-.sapphire-listbox--medium .sapphire-listbox__content {
-  gap: var(--sapphire-listbox-size-spacing-inner-horizontal-m);
-  grid-template-columns: auto 1fr var(--sapphire-listbox-size-width-icon-m);
+.sapphire-listbox--md .sapphire-listbox__content {
+  gap: var(--sapphire-semantic-size-spacing-25);
+  grid-template-columns: auto 1fr var(--sapphire-semantic-size-icon-md);
   padding: calc(
-      var(--sapphire-listbox-size-spacing-inner-vertical-m) -
-        var(--sapphire-listbox-size-spacing-outer-vertical)
+      var(--sapphire-semantic-size-spacing-20) -
+        var(--sapphire-semantic-size-spacing-5)
     )
-    var(--sapphire-listbox-size-spacing-inner-horizontal-m);
+    var(--sapphire-semantic-size-spacing-25);
 }
 
-.sapphire-listbox--small .sapphire-listbox__content {
-  gap: var(--sapphire-listbox-size-spacing-inner-horizontal-s);
-  grid-template-columns: auto 1fr var(--sapphire-listbox-size-width-icon-s);
+.sapphire-listbox--sm .sapphire-listbox__content {
+  gap: var(--sapphire-semantic-size-spacing-20);
+  grid-template-columns: auto 1fr var(--sapphire-semantic-size-icon-sm);
   padding: calc(
-      var(--sapphire-listbox-size-spacing-inner-vertical-s) -
-        var(--sapphire-listbox-size-spacing-outer-vertical)
+      var(--sapphire-semantic-size-spacing-10) -
+        var(--sapphire-semantic-size-spacing-5)
     )
-    var(--sapphire-listbox-size-spacing-inner-horizontal-s);
+    var(--sapphire-semantic-size-spacing-20);
 }
 
 /* Icon content */
@@ -137,8 +139,8 @@
 
 /* Text content */
 .sapphire-listbox__text-container {
-  font-family: var(--sapphire-listbox-font-name);
-  line-height: var(--sapphire-listbox-size-line-height);
+  font-family: var(--sapphire-semantic-font-name-default);
+  line-height: var(--sapphire-semantic-size-line-height-md);
 }
 
 /*
@@ -150,39 +152,39 @@
 }
 
 .sapphire-listbox__primary-text {
-  font-weight: var(--sapphire-listbox-font-weight-primary);
-  font-size: var(--sapphire-listbox-size-font-primary-l);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-semantic-size-font-text-lg);
 }
 
 .sapphire-listbox__secondary-text {
-  font-weight: var(--sapphire-listbox-font-weight-secondary);
-  font-size: var(--sapphire-listbox-size-font-secondary-l);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+  font-size: var(--sapphire-semantic-size-font-text-md);
 }
 
-.sapphire-listbox--medium .sapphire-listbox__primary-text {
-  font-size: var(--sapphire-listbox-size-font-primary-m);
+.sapphire-listbox--md .sapphire-listbox__primary-text {
+  font-size: var(--sapphire-semantic-size-font-text-md);
 }
-.sapphire-listbox--small .sapphire-listbox__primary-text {
-  font-size: var(--sapphire-listbox-size-font-primary-s);
+.sapphire-listbox--sm .sapphire-listbox__primary-text {
+  font-size: var(--sapphire-semantic-size-font-text-sm);
 }
 
-.sapphire-listbox--medium .sapphire-listbox__secondary-text {
-  font-size: var(--sapphire-listbox-size-font-secondary-m);
+.sapphire-listbox--md .sapphire-listbox__secondary-text {
+  font-size: var(--sapphire-semantic-size-font-text-sm);
 }
 
-.sapphire-listbox--small .sapphire-listbox__secondary-text {
-  font-size: var(--sapphire-listbox-size-font-secondary-s);
+.sapphire-listbox--sm .sapphire-listbox__secondary-text {
+  font-size: var(--sapphire-semantic-size-font-text-sm);
 }
 
 .sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(
     .sapphire-listbox__item--selected
   )
   .sapphire-listbox__secondary-text {
-  color: var(--sapphire-listbox-color-content-normal-secondary-default);
+  color: var(--sapphire-semantic-color-content-default-secondary);
 }
 
 .sapphire-listbox__item.is-disabled {
-  opacity: var(--sapphire-listbox-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
   cursor: not-allowed;
 }
 
@@ -192,16 +194,16 @@
 }
 
 .sapphire-listbox__separator {
-  height: var(--sapphire-listbox-size-height-separator);
+  height: var(--sapphire-semantic-size-border-sm);
   width: 100%;
-  background: var(--sapphire-listbox-color-separator);
+  background: var(--sapphire-semantic-color-border-separator-default);
   margin-top: calc(
-    var(--sapphire-listbox-size-spacing-outer-horizontal) -
-      var(--sapphire-listbox-size-spacing-outer-vertical)
+    var(--sapphire-semantic-size-spacing-10) -
+      var(--sapphire-semantic-size-spacing-5)
   );
   margin-bottom: calc(
-    var(--sapphire-listbox-size-spacing-outer-horizontal) -
-      var(--sapphire-listbox-size-spacing-outer-vertical)
+    var(--sapphire-semantic-size-spacing-10) -
+      var(--sapphire-semantic-size-spacing-5)
   );
 }
 
@@ -210,8 +212,8 @@
 .sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,
 .sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible
   .sapphire-listbox__content {
-  box-shadow: 0px 0px 0px var(--sapphire-listbox-size-focus-ring)
-    var(--sapphire-listbox-color-focus-ring);
+  box-shadow: 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
+    var(--sapphire-semantic-color-focus-ring);
 }
 
 /* Hover */
@@ -220,8 +222,10 @@
   .sapphire-listbox__content,
 .sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover
   .sapphire-listbox__content {
-  color: var(--sapphire-listbox-color-content-normal-primary-hover);
-  background-color: var(--sapphire-listbox-color-background-normal-hover);
+  color: var(--sapphire-semantic-color-content-selection-unselected-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-selection-unselected-hover
+  );
 }
 
 .sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover
@@ -230,8 +234,10 @@
     .is-active
   ):hover
   .sapphire-listbox__content {
-  color: var(--sapphire-listbox-color-content-danger-hover);
-  background-color: var(--sapphire-listbox-color-background-danger-hover);
+  color: var(--sapphire-semantic-color-content-action-danger-default);
+  background-color: var(
+    --sapphire-semantic-color-background-action-danger-default
+  );
 }
 
 .sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover
@@ -240,25 +246,33 @@
     .js-hover
   ):hover
   .sapphire-listbox__content {
-  color: var(--sapphire-listbox-color-content-selected-hover);
-  background-color: var(--sapphire-listbox-color-background-selected-hover);
+  color: var(--sapphire-semantic-color-content-selection-selected-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-selection-selected-hover
+  );
 }
 
 /* Active */
 
 .sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content {
-  color: var(--sapphire-listbox-color-content-normal-primary-active);
-  background-color: var(--sapphire-listbox-color-background-normal-active);
+  color: var(--sapphire-semantic-color-content-selection-unselected-active);
+  background-color: var(
+    --sapphire-semantic-color-background-selection-unselected-active
+  );
 }
 
 .sapphire-listbox__item--danger:not(.is-disabled).is-active
   .sapphire-listbox__content {
-  color: var(--sapphire-listbox-color-content-danger-active);
-  background-color: var(--sapphire-listbox-color-background-danger-active);
+  color: var(--sapphire-semantic-color-content-action-danger-active);
+  background-color: var(
+    --sapphire-semantic-color-background-action-danger-hover
+  );
 }
 
 .sapphire-listbox__item--selected:not(.is-disabled).is-active
   .sapphire-listbox__content {
-  color: var(--sapphire-listbox-color-content-selected-active);
-  background-color: var(--sapphire-listbox-color-background-selected-active);
+  color: var(--sapphire-semantic-color-content-selection-selected-active);
+  background-color: var(
+    --sapphire-semantic-color-background-selection-selected-active
+  );
 }

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

@@ -4,8 +4,8 @@ declare const styles: {
   readonly "sapphire-listbox__item--danger": string;
   readonly "sapphire-listbox__item--selected": string;
   readonly "sapphire-listbox__content": string;
-  readonly "sapphire-listbox--medium": string;
-  readonly "sapphire-listbox--small": string;
+  readonly "sapphire-listbox--md": string;
+  readonly "sapphire-listbox--sm": string;
   readonly "sapphire-listbox__icon": string;
   readonly "sapphire-listbox__text-container": string;
   readonly "sapphire-listbox__primary-text": string;

package/components/modalLayout/modalLayout.module.css

@@ -3,9 +3,7 @@
   flex-direction: column;
   height: 100%;
   min-height: 0;
-  background-color: var(
-    --sapphire-semantic-color-background-surface-primary-default
-  );
+  background-color: var(--sapphire-semantic-color-background-surface);
   font-family: var(--sapphire-semantic-font-name-default);
   color: var(--sapphire-semantic-color-content-default-primary);
 }
@@ -18,7 +16,7 @@
   display: flex;
   justify-content: space-between;
   padding: var(--sapphire-semantic-size-spacing-50)
-    var(--sapphire-semantic-size-spacing-container-horizontal-m);
+    var(--sapphire-semantic-size-spacing-container-horizontal-md);
   gap: var(--sapphire-semantic-size-spacing-40);
 }
 
@@ -26,7 +24,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   flex-grow: 1;
-  padding: 0 var(--sapphire-semantic-size-spacing-container-horizontal-m);
+  padding: 0 var(--sapphire-semantic-size-spacing-container-horizontal-md);
 }
 
 .sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding {
@@ -39,9 +37,9 @@
 
 .sapphire-modal-layout__footer {
   padding: var(--sapphire-semantic-size-spacing-70)
-    var(--sapphire-semantic-size-spacing-container-horizontal-m)
+    var(--sapphire-semantic-size-spacing-container-horizontal-md)
     var(--sapphire-semantic-size-spacing-70)
-    var(--sapphire-semantic-size-spacing-container-horizontal-m);
+    var(--sapphire-semantic-size-spacing-container-horizontal-md);
 }
 
 /** Container for heading and subheading **/
@@ -64,12 +62,12 @@
 
 .sapphire-modal-layout__header-container + .sapphire-modal-layout__body {
   /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
-  border-top: var(--sapphire-semantic-size-border-s) solid transparent;
+  border-top: var(--sapphire-semantic-size-border-sm) solid transparent;
 }
 
 .sapphire-modal-layout__header-container
   + .sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled {
-  border-top: var(--sapphire-semantic-size-border-s) solid
+  border-top: var(--sapphire-semantic-size-border-sm) solid
     var(--sapphire-semantic-color-border-separator-default);
 }
 
@@ -80,11 +78,11 @@
 
 .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 **/
-  border-top: var(--sapphire-semantic-size-border-s) solid transparent;
+  border-top: var(--sapphire-semantic-size-border-sm) solid transparent;
 }
 
 .sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable
   + .sapphire-modal-layout__footer-container {
-  border-top: var(--sapphire-semantic-size-border-s) solid
+  border-top: var(--sapphire-semantic-size-border-sm) solid
     var(--sapphire-semantic-color-border-separator-default);
 }

package/components/notificationBadge/notificationBadge.module.css

@@ -34,9 +34,9 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: var(--sapphire-notification-badge-color-content-default);
-  font-family: var(--sapphire-notification-badge-font-name);
-  font-weight: var(--sapphire-notification-badge-font-weight);
+  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);
   box-sizing: border-box;
   font-style: normal;
   /* The below is meant to address a font rendering quirk in OSX where the text
@@ -55,47 +55,45 @@
 }
 
 .sapphire-notification-badge--pop-in {
-  animation: pop-in var(--sapphire-notification-badge-time-transition)
+  animation: pop-in var(--sapphire-semantic-time-fade-default)
     cubic-bezier(0.55, -0.49, 0.39, 1.49);
 }
 
 .sapphire-notification-badge--pop-out {
-  animation: pop-out var(--sapphire-notification-badge-time-transition) forwards;
+  animation: pop-out var(--sapphire-semantic-time-fade-default) forwards;
 }
 
 /* Sizes */
-.sapphire-notification-badge--large {
-  height: var(--sapphire-notification-badge-size-height-l);
-  border-radius: var(--sapphire-notification-badge-size-radius-l);
-  padding: var(--sapphire-notification-badge-size-spacing-l-vertical)
-    var(--sapphire-notification-badge-size-spacing-l-horizontal);
-  font-size: var(--sapphire-notification-badge-size-font-primary);
+.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);
 }
 
-.sapphire-notification-badge--medium {
-  height: var(--sapphire-notification-badge-size-height-m);
-  border-radius: var(--sapphire-notification-badge-size-radius-m);
-  padding: 0 var(--sapphire-notification-badge-size-spacing-m-horizontal);
-  font-size: var(--sapphire-notification-badge-size-font-secondary);
-  min-width: var(--sapphire-notification-badge-size-width-m);
+.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);
+  font-size: var(--sapphire-global-size-font-60);
+  min-width: var(--sapphire-global-size-generic-40);
   box-sizing: border-box;
 }
 
-.sapphire-notification-badge--small {
-  min-width: var(--sapphire-notification-badge-size-width-s);
-  height: var(--sapphire-notification-badge-size-height-s);
-  border-radius: var(--sapphire-notification-badge-size-radius-s);
+.sapphire-notification-badge--sm {
+  min-width: var(--sapphire-global-size-generic-20);
+  height: var(--sapphire-global-size-generic-20);
+  border-radius: var(--sapphire-global-size-generic-20);
 }
 
 /* Variants */
 .sapphire-notification-badge--primary {
-  background-color: var(--sapphire-notification-badge-color-background-primary);
+  background-color: var(--sapphire-global-color-red-500);
 }
 
 .sapphire-notification-badge--secondary {
-  background-color: var(
-    --sapphire-notification-badge-color-background-secondary
-  );
+  background-color: var(--sapphire-global-color-blue-500);
 }
 
 /* Positioned */

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

@@ -4,9 +4,9 @@ declare const styles: {
   readonly "pop-in": string;
   readonly "sapphire-notification-badge--pop-out": string;
   readonly "pop-out": string;
-  readonly "sapphire-notification-badge--large": string;
-  readonly "sapphire-notification-badge--medium": string;
-  readonly "sapphire-notification-badge--small": string;
+  readonly "sapphire-notification-badge--lg": string;
+  readonly "sapphire-notification-badge--md": string;
+  readonly "sapphire-notification-badge--sm": string;
   readonly "sapphire-notification-badge--primary": string;
   readonly "sapphire-notification-badge--secondary": string;
   readonly "sapphire-notification-badge-container": string;

package/components/pagination/pagination.module.css

@@ -2,12 +2,12 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  padding: var(--sapphire-pagination-size-spacing-container-vertical)
-    var(--sapphire-pagination-size-spacing-container-horizontal);
-  background-color: var(--sapphire-pagination-color-background);
-  font-family: var(--sapphire-pagination-font-name);
-  font-size: var(--sapphire-pagination-size-font-page);
-  height: var(--sapphire-pagination-size-height);
+  padding: var(--sapphire-semantic-size-spacing-20)
+    var(--sapphire-semantic-size-spacing-50);
+  background-color: var(--sapphire-semantic-color-background-surface);
+  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);
 
   /* 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,26 +29,26 @@
   align-items: center;
   justify-content: flex-end;
   flex-grow: 1;
-  color: var(--sapphire-pagination-color-text);
-  gap: var(--sapphire-pagination-size-spacing-controls-horizontal);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  gap: var(--sapphire-semantic-size-spacing-30);
 }
 
 .sapphire-pagination__text {
-  font-weight: var(--sapphire-pagination-font-weight-alphabetic-text);
-  padding-left: var(--sapphire-pagination-size-spacing-text-horizontal);
-  padding-right: var(--sapphire-pagination-size-spacing-text-horizontal);
+  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);
 }
 
 .sapphire-pagination__text--emphasized {
-  font-weight: var(--sapphire-pagination-font-weight-numeric-text);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
 }
 
 .sapphire-pagination__ellipsis {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: var(--sapphire-pagination-size-ellipsis);
-  width: var(--sapphire-pagination-size-ellipsis);
-  font-size: var(--sapphire-pagination-size-font-ellipsis);
-  font-weight: var(--sapphire-pagination-font-weight-numeric-text);
+  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);
 }

package/components/panel/panel.module.css

@@ -5,15 +5,15 @@
   display: block;
   height: 100%;
   outline: 0;
-  transition: transform var(--sapphire-panel-time-transition) ease-in-out;
+  transition: transform var(--sapphire-semantic-time-motion-default) ease-in-out;
   transform: translateX(100%);
-  width: var(--sapphire-panel-size-width-l);
+  width: var(--sapphire-semantic-size-width-panel-lg);
 }
 
 .sapphire-panel--visible {
   transform: translateX(0%);
 }
 
-.sapphire-panel--small {
-  width: var(--sapphire-panel-size-width-s);
+.sapphire-panel--sm {
+  width: var(--sapphire-semantic-size-width-panel-sm);
 }

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

@@ -1,7 +1,7 @@
 declare const styles: {
   readonly "sapphire-panel": string;
   readonly "sapphire-panel--visible": string;
-  readonly "sapphire-panel--small": string;
+  readonly "sapphire-panel--sm": string;
 };
 export = styles;
 

package/components/paragraph/paragraph.module.css

@@ -1,8 +1,8 @@
 .sapphire-paragraph {
-  font-family: var(--sapphire-paragraph-font-name);
-  color: var(--sapphire-paragraph-color-text);
-  font-size: var(--sapphire-paragraph-size-font-default);
-  line-height: var(--sapphire-paragraph-size-line-height);
+  font-family: var(--sapphire-semantic-font-name-default);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  font-size: var(--sapphire-semantic-size-font-text-lg);
+  line-height: var(--sapphire-semantic-size-line-height-md);
   /* not able to find specification in sketch docs for margin,
      will update this once specifications are established */
   margin-top: 0px;
@@ -23,10 +23,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.sapphire-paragraph--small {
-  font-size: var(--sapphire-paragraph-size-font-s);
+.sapphire-paragraph--sm {
+  font-size: var(--sapphire-semantic-size-font-text-md);
 }
 
-.sapphire-paragraph--extra-small {
-  font-size: var(--sapphire-paragraph-size-font-xs);
+.sapphire-paragraph--xs {
+  font-size: var(--sapphire-semantic-size-font-text-sm);
 }

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

@@ -1,7 +1,7 @@
 declare const styles: {
   readonly "sapphire-paragraph": string;
-  readonly "sapphire-paragraph--small": string;
-  readonly "sapphire-paragraph--extra-small": string;
+  readonly "sapphire-paragraph--sm": string;
+  readonly "sapphire-paragraph--xs": string;
 };
 export = styles;
 

package/components/popover/popover.module.css

@@ -9,10 +9,10 @@
 
 .sapphire-popover {
   box-sizing: border-box;
-  background-color: var(--sapphire-popover-color-background);
-  box-shadow: var(--sapphire-popover-shadow);
-  animation: fade-in var(--sapphire-popover-time-transition) ease-in-out;
-  border-radius: var(--sapphire-popover-size-radius);
+  background-color: var(--sapphire-semantic-color-background-popover-default);
+  box-shadow: var(--sapphire-semantic-shadow-popover);
+  animation: fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;
+  border-radius: var(--sapphire-semantic-size-radius-popover);
   overflow: auto;
 
   /* The below is meant to address a font rendering quirk in OSX where the text
@@ -31,9 +31,9 @@
 }
 
 .sapphire-popover--padded {
-  padding: var(--sapphire-popover-size-spacing-padded);
+  padding: var(--sapphire-semantic-size-spacing-30);
 }
 
 .sapphire-popover--max-width {
-  max-width: var(--sapphire-popover-size-max-width);
+  max-width: var(--sapphire-global-size-generic-1120);
 }