@danske/sapphire-css 32.2.1 → 33.0.0

package/components/tabs/tabs.module.css

@@ -5,8 +5,7 @@
   overflow-y: hidden;
   white-space: nowrap;
   position: relative;
-  scroll-padding: 0
-    calc(2 * var(--sapphire-tabs-size-spacing-arrows-horizontal) + 1px);
+  scroll-padding: 0 calc(2 * var(--sapphire-global-size-generic-100) + 1px);
   min-width: 0;
   flex: 1;
 
@@ -38,37 +37,37 @@
 
 .sapphire-tabs-overflow-arrows__arrow--left {
   left: 0;
-  padding-right: var(--sapphire-tabs-size-spacing-arrows-horizontal);
+  padding-right: var(--sapphire-global-size-generic-100);
   background: linear-gradient(
     90deg,
-    var(--sapphire-tabs-color-gradient-opaque) 0%,
-    var(--sapphire-tabs-color-gradient-opaque) 40%,
-    var(--sapphire-tabs-color-gradient-transparent) 100%
+    var(--sapphire-global-color-neutral-white) 0%,
+    var(--sapphire-global-color-neutral-white) 40%,
+    var(--sapphire-global-color-neutral-transparent) 100%
   );
 }
 
 .sapphire-tabs-overflow-arrows__arrow--right {
   right: 0;
-  padding-left: var(--sapphire-tabs-size-spacing-arrows-horizontal);
+  padding-left: var(--sapphire-global-size-generic-100);
   background: linear-gradient(
     90deg,
-    var(--sapphire-tabs-color-gradient-transparent) 0%,
-    var(--sapphire-tabs-color-gradient-opaque) 60%,
-    var(--sapphire-tabs-color-gradient-opaque) 100%
+    var(--sapphire-global-color-neutral-transparent) 0%,
+    var(--sapphire-global-color-neutral-white) 60%,
+    var(--sapphire-global-color-neutral-white) 100%
   );
 }
 
 .sapphire-tabs {
   display: inline-flex;
   box-sizing: border-box;
-  height: var(--sapphire-tabs-size-height-m);
-  gap: var(--sapphire-tabs-size-gap-m);
+  height: var(--sapphire-semantic-size-height-control-lg);
+  gap: var(--sapphire-semantic-size-spacing-40);
   position: relative;
   overflow: hidden;
   position: relative;
   min-width: 100%;
   flex: 1;
-  padding: 0 var(--sapphire-tabs-size-focus-ring-offset);
+  padding: 0 var(--sapphire-semantic-size-focus-ring);
 }
 
 .sapphire-tabs::after {
@@ -77,9 +76,9 @@
   position: absolute;
   bottom: 0;
   width: 100%;
-  height: var(--sapphire-tabs-size-border);
-  background-color: var(--sapphire-tabs-color-border-default);
-  border-radius: var(--sapphire-tabs-size-border);
+  height: var(--sapphire-semantic-size-border-md);
+  background-color: var(--sapphire-semantic-color-border-separator-default);
+  border-radius: var(--sapphire-semantic-size-border-md);
 }
 
 /**
@@ -97,13 +96,13 @@
   align-items: center;
   position: relative;
 
-  font-family: var(--sapphire-tabs-font-name);
-  font-weight: var(--sapphire-tabs-font-weight);
-  font-size: var(--sapphire-tabs-size-font-m);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+  font-size: var(--sapphire-semantic-size-font-control-md);
   text-decoration: none;
 
   background: none;
-  color: var(--sapphire-tabs-color-content-inactive-default);
+  color: var(--sapphire-semantic-color-content-default-primary);
   box-sizing: border-box;
   white-space: nowrap;
   border-width: 0;
@@ -115,13 +114,13 @@
    * The focus ring offset as vertical margin is used to make the focus ring
    * offset so it overlaps the grey separator and doesn't overflow the container.
    */
-  margin: var(--sapphire-tabs-size-focus-ring-offset) 0
-    var(--sapphire-tabs-size-focus-ring-offset) 0;
+  margin: var(--sapphire-semantic-size-focus-ring) 0
+    var(--sapphire-semantic-size-focus-ring) 0;
   cursor: pointer;
   outline: none;
 
   /* Need the border radius to round the focus ring*/
-  border-radius: var(--sapphire-tabs-size-focus-ring-radius);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
 
   /* Just to make sure it's above the grey border */
   z-index: 1;
@@ -133,13 +132,13 @@
 .sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  color: var(--sapphire-tabs-color-content-inactive-hover);
+  color: var(--sapphire-semantic-color-content-action-secondary-default);
 }
 
 .sapphire-tabs__tab.js-focus.is-focus,
 .sapphire-tabs__tab:not(.js-focus):focus-visible {
-  outline: var(--sapphire-tabs-size-focus-ring-border) solid
-    var(--sapphire-tabs-color-focus-ring);
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
 }
 
 /**
@@ -152,7 +151,7 @@
 }
 .sapphire-tabs__tab:disabled .sapphire-tabs__label,
 .sapphire-tabs__tab.is-disabled .sapphire-tabs__label {
-  opacity: var(--sapphire-tabs-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
 }
 
 .sapphire-tabs__label {
@@ -164,7 +163,7 @@
  * Active tab
  */
 .sapphire-tabs__tab--active {
-  color: var(--sapphire-tabs-color-content-active-default);
+  color: var(--sapphire-semantic-color-content-action-secondary-default);
 }
 
 .sapphire-tabs__tab--active.js-focus:not(.is-focus)::after,
@@ -173,33 +172,35 @@
   display: block;
   position: absolute;
   /* To offset the space created by the tab's margin */
-  bottom: calc(-1 * var(--sapphire-tabs-size-focus-ring-offset));
+  bottom: calc(-1 * var(--sapphire-semantic-size-focus-ring));
   width: 100%;
-  height: var(--sapphire-tabs-size-border);
-  background-color: var(--sapphire-tabs-color-border-active);
-  border-radius: var(--sapphire-tabs-size-border);
+  height: var(--sapphire-semantic-size-border-md);
+  background-color: var(
+    --sapphire-semantic-color-content-action-secondary-default
+  );
+  border-radius: var(--sapphire-semantic-size-border-md);
 }
 
 /**
  * Small
  */
-.sapphire-tabs--small {
-  height: var(--sapphire-tabs-size-height-s);
-  gap: var(--sapphire-tabs-size-gap-s);
+.sapphire-tabs--sm {
+  height: var(--sapphire-semantic-size-height-control-md);
+  gap: var(--sapphire-semantic-size-spacing-40);
 }
-.sapphire-tabs--small .sapphire-tabs__tab {
-  font-size: var(--sapphire-tabs-size-font-s);
+.sapphire-tabs--sm .sapphire-tabs__tab {
+  font-size: var(--sapphire-semantic-size-font-control-sm);
 }
 
 /**
  * Large
  */
-.sapphire-tabs--large {
-  height: var(--sapphire-tabs-size-height-l);
-  gap: var(--sapphire-tabs-size-gap-l);
+.sapphire-tabs--lg {
+  height: var(--sapphire-semantic-size-height-control-xl);
+  gap: var(--sapphire-semantic-size-spacing-50);
 }
-.sapphire-tabs--large .sapphire-tabs__tab {
-  font-size: var(--sapphire-tabs-size-font-l);
+.sapphire-tabs--lg .sapphire-tabs__tab {
+  font-size: var(--sapphire-semantic-size-font-control-default);
 }
 
 .sapphire-tab-panel {
@@ -213,7 +214,7 @@
 /* tab panel focus styling */
 .sapphire-tab-panel.js-focus.is-focus,
 .sapphire-tab-panel:not(.js-focus):focus-visible {
-  outline: var(--sapphire-tabs-size-focus-ring-border) solid
-    var(--sapphire-tabs-color-focus-ring);
-  outline-offset: var(--sapphire-tabs-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);
 }

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

@@ -16,8 +16,8 @@ declare const styles: {
   readonly "is-focus": string;
   readonly "sapphire-tabs__label": string;
   readonly "sapphire-tabs__tab--active": string;
-  readonly "sapphire-tabs--small": string;
-  readonly "sapphire-tabs--large": string;
+  readonly "sapphire-tabs--sm": string;
+  readonly "sapphire-tabs--lg": string;
   readonly "sapphire-tab-panel": string;
 };
 export = styles;

package/components/tag/tag.module.css

@@ -1,37 +1,39 @@
 .sapphire-tag-group {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--sapphire-tag-size-spacing-gap);
+  gap: var(--sapphire-semantic-size-spacing-30);
   outline: none;
 }
 
 .sapphire-tag {
   display: inline-flex;
   flex-direction: row;
-  height: var(--sapphire-tag-size-height);
-  padding: 0 var(--sapphire-tag-size-spacing-horizontal);
-  gap: var(--sapphire-tag-size-spacing-with-icon);
+  height: var(--sapphire-semantic-size-height-control-sm);
+  padding: 0 var(--sapphire-semantic-size-spacing-40);
+  gap: var(--sapphire-semantic-size-spacing-20);
   justify-content: center;
   align-items: center;
   white-space: nowrap;
-  border-radius: var(--sapphire-tag-size-radius);
+  border-radius: var(--sapphire-semantic-size-height-control-sm);
   cursor: default;
 
   /* typography */
-  font-size: var(--sapphire-tag-size-font);
-  font-family: var(--sapphire-tag-font-name);
-  font-weight: var(--sapphire-tag-font-weight);
+  font-size: var(--sapphire-semantic-size-font-control-md);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
   font-style: normal;
   text-decoration: none;
 
   /* color default */
-  background-color: var(--sapphire-tag-color-background-primary-default);
-  color: var(--sapphire-tag-color-content-default);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-default
+  );
+  color: var(--sapphire-semantic-color-content-default-primary);
   outline: none;
 
   /* transition */
   transition-property: opacity, background-color, color;
-  transition-duration: var(--sapphire-tag-time-transition);
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: ease-in-out;
 
   /* The below is meant to address a font rendering quirk in OSX where the text
@@ -51,16 +53,18 @@
 
 .sapphire-tag.is-focus,
 .sapphire-tag:not(.js-focus):focus-visible {
-  background-color: var(--sapphire-tag-color-background-primary-focus);
-  outline: var(--sapphire-tag-size-focus-ring-border) solid
-    var(--sapphire-tag-color-focus-ring);
-  outline-offset: var(--sapphire-tag-size-focus-ring-offset);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-default
+  );
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
+  outline-offset: var(--sapphire-semantic-size-focus-ring);
 }
 
 .sapphire-tag__content {
   display: inline-flex;
   align-items: center;
-  gap: var(--sapphire-tag-size-spacing-with-icon);
+  gap: var(--sapphire-semantic-size-spacing-20);
 }
 
 /* Actionable */
@@ -70,29 +74,33 @@
 .sapphire-tag--actionable:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background-color: var(--sapphire-tag-color-background-primary-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-hover
+  );
   cursor: pointer;
 }
 
 .sapphire-tag--actionable.is-active {
-  background-color: var(--sapphire-tag-color-background-primary-active);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-active
+  );
   cursor: pointer;
 }
 
 .sapphire-tag:disabled,
 .sapphire-tag.is-disabled {
-  opacity: var(--sapphire-tag-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
   cursor: not-allowed;
   pointer-events: none;
 }
 
 /* Adjusts sizing when button or icon is present */
 .sapphire-tag:has(.sapphire-tag__button) {
-  padding-right: var(--sapphire-tag-size-spacing-with-icon);
+  padding-right: var(--sapphire-semantic-size-spacing-20);
 }
 
 .sapphire-tag:has(.sapphire-tag__error-icon) {
-  padding-left: var(--sapphire-tag-size-spacing-with-icon);
+  padding-left: var(--sapphire-semantic-size-spacing-20);
 }
 
 /**
@@ -101,7 +109,7 @@
 .sapphire-tag__error-icon {
   display: flex;
   align-items: center;
-  color: var(--sapphire-tag-color-error);
+  color: var(--sapphire-semantic-color-content-negative-secondary-default);
 }
 
 /**
@@ -120,13 +128,13 @@
 
   /* transition */
   transition-property: color;
-  transition-duration: var(--sapphire-tag-time-transition);
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: ease-in-out;
   cursor: pointer;
 
   /* style */
   background-color: transparent;
-  color: var(--sapphire-tag-color-button);
+  color: var(--sapphire-semantic-color-content-passive-secondary-default);
 }
 
 .sapphire-tag__button:focus {

package/components/text/text.module.css

@@ -1,5 +1,5 @@
 .sapphire-text {
-  font-family: var(--sapphire-text-font-name-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
@@ -17,7 +17,7 @@
 }
 
 .sapphire-text--strong {
-  font-weight: var(--sapphire-text-font-weight-strong);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
 }
 
 .sapphire-text--underlined {
@@ -33,175 +33,127 @@
 .sapphire-text--heading-6 {
   margin-top: 0px;
   margin-bottom: 0px;
-  color: var(--sapphire-text-color-content-heading);
-  line-height: var(--sapphire-text-size-line-height-heading);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  line-height: var(--sapphire-global-size-line-height-sm);
 }
 
 .sapphire-text--heading-1 {
-  font-family: var(--sapphire-text-font-name-heading-default-1);
-  font-weight: var(--sapphire-text-font-weight-heading-default-1);
-  font-size: var(--sapphire-text-size-font-heading-1);
-  text-transform: var(--sapphire-text-font-text-transform-heading-default-1);
-  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-1);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-global-size-font-220);
 }
 
 .sapphire-text--heading-2 {
-  font-family: var(--sapphire-text-font-name-heading-default-2);
-  font-weight: var(--sapphire-text-font-weight-heading-default-2);
-  font-size: var(--sapphire-text-size-font-heading-2);
-  text-transform: var(--sapphire-text-font-text-transform-heading-default-2);
-  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-2);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-global-size-font-150);
 }
 
 .sapphire-text--heading-3 {
-  font-family: var(--sapphire-text-font-name-heading-default-3);
-  font-weight: var(--sapphire-text-font-weight-heading-default-3);
-  font-size: var(--sapphire-text-size-font-heading-3);
-  text-transform: var(--sapphire-text-font-text-transform-heading-default-3);
-  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-3);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-global-size-font-130);
 }
 
 .sapphire-text--heading-4 {
-  font-family: var(--sapphire-text-font-name-heading-default-4);
-  font-weight: var(--sapphire-text-font-weight-heading-default-4);
-  font-size: var(--sapphire-text-size-font-heading-4);
-  text-transform: var(--sapphire-text-font-text-transform-heading-default-4);
-  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-4);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-global-size-font-112);
 }
 
 .sapphire-text--heading-5 {
-  font-family: var(--sapphire-text-font-name-heading-default-5);
-  font-weight: var(--sapphire-text-font-weight-heading-default-5);
-  font-size: var(--sapphire-text-size-font-heading-5);
-  text-transform: var(--sapphire-text-font-text-transform-heading-default-5);
-  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-5);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-global-size-font-106);
 }
 
 .sapphire-text--heading-6 {
-  font-family: var(--sapphire-text-font-name-heading-default-6);
-  font-weight: var(--sapphire-text-font-weight-heading-default-6);
-  font-size: var(--sapphire-text-size-font-heading-6);
-  text-transform: var(--sapphire-text-font-text-transform-heading-default-6);
-  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-6);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-global-size-font-100);
 }
 
 /* Alternative Heading */
 
 .sapphire-text--heading-1.sapphire-text--heading-alternative {
-  font-family: var(--sapphire-text-font-name-heading-alternative-1);
-  font-weight: var(--sapphire-text-font-weight-heading-alternative-1);
-  text-transform: var(
-    --sapphire-text-font-text-transform-heading-alternative-1
-  );
-  letter-spacing: var(
-    --sapphire-text-font-letter-spacing-heading-alternative-1
-  );
+  font-family: var(--sapphire-semantic-font-name-display);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }
 
 .sapphire-text--heading-2.sapphire-text--heading-alternative {
-  font-family: var(--sapphire-text-font-name-heading-alternative-2);
-  font-weight: var(--sapphire-text-font-weight-heading-alternative-2);
-  text-transform: var(
-    --sapphire-text-font-text-transform-heading-alternative-2
-  );
-  letter-spacing: var(
-    --sapphire-text-font-letter-spacing-heading-alternative-2
-  );
+  font-family: var(--sapphire-semantic-font-name-display);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }
 
 .sapphire-text--heading-3.sapphire-text--heading-alternative {
-  font-family: var(--sapphire-text-font-name-heading-alternative-3);
-  font-weight: var(--sapphire-text-font-weight-heading-alternative-3);
-  text-transform: var(
-    --sapphire-text-font-text-transform-heading-alternative-3
-  );
-  letter-spacing: var(
-    --sapphire-text-font-letter-spacing-heading-alternative-3
-  );
+  font-family: var(--sapphire-semantic-font-name-display);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }
 
 .sapphire-text--heading-4.sapphire-text--heading-alternative {
-  font-family: var(--sapphire-text-font-name-heading-alternative-4);
-  font-weight: var(--sapphire-text-font-weight-heading-alternative-4);
-  text-transform: var(
-    --sapphire-text-font-text-transform-heading-alternative-4
-  );
-  letter-spacing: var(
-    --sapphire-text-font-letter-spacing-heading-alternative-4
-  );
+  font-family: var(--sapphire-semantic-font-name-display);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }
 
 .sapphire-text--heading-5.sapphire-text--heading-alternative {
-  font-family: var(--sapphire-text-font-name-heading-alternative-5);
-  font-weight: var(--sapphire-text-font-weight-heading-alternative-5);
-  text-transform: var(
-    --sapphire-text-font-text-transform-heading-alternative-5
-  );
-  letter-spacing: var(
-    --sapphire-text-font-letter-spacing-heading-alternative-5
-  );
+  font-family: var(--sapphire-semantic-font-name-display);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }
 
 .sapphire-text--heading-6.sapphire-text--heading-alternative {
-  font-family: var(--sapphire-text-font-name-heading-alternative-6);
-  font-weight: var(--sapphire-text-font-weight-heading-alternative-6);
-  text-transform: var(
-    --sapphire-text-font-text-transform-heading-alternative-6
-  );
-  letter-spacing: var(
-    --sapphire-text-font-letter-spacing-heading-alternative-6
-  );
+  font-family: var(--sapphire-semantic-font-name-display);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }
 
 /* Subheading */
 .sapphire-text--subheading-1,
 .sapphire-text--subheading-2 {
-  color: var(--sapphire-text-color-content-subheading);
-  line-height: var(--sapphire-text-size-line-height-subheading);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  line-height: var(--sapphire-global-size-line-height-sm);
 }
 
 .sapphire-text--subheading-1 {
-  font-size: var(--sapphire-text-size-font-subheading-1);
+  font-size: var(--sapphire-global-size-font-88);
 }
 
 .sapphire-text--subheading-2 {
-  font-size: var(--sapphire-text-size-font-subheading-2);
+  font-size: var(--sapphire-global-size-font-75);
 }
 
 /* Body text */
 .sapphire-text--body-1,
 .sapphire-text--body-2,
 .sapphire-text--body-3 {
-  color: var(--sapphire-text-color-content-body);
-  line-height: var(--sapphire-text-size-line-height-body);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  line-height: var(--sapphire-global-size-line-height-md);
   margin-top: 0px;
   margin-bottom: 0px;
 }
 
 .sapphire-text--body-1 {
-  font-size: var(--sapphire-text-size-font-body-1);
+  font-size: var(--sapphire-global-size-font-106);
 }
 
 .sapphire-text--body-2 {
-  font-size: var(--sapphire-text-size-font-body-2);
+  font-size: var(--sapphire-global-size-font-88);
 }
 
 .sapphire-text--body-3 {
-  font-size: var(--sapphire-text-size-font-body-3);
+  font-size: var(--sapphire-global-size-font-75);
 }
 
 /* Caption text */
 .sapphire-text--caption-1,
 .sapphire-text--caption-2 {
-  color: var(--sapphire-text-color-content-caption);
-  font-weight: var(--sapphire-text-font-weight-caption);
-  line-height: var(--sapphire-text-size-line-height-caption);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  line-height: var(--sapphire-global-size-line-height-sm);
 }
 
 .sapphire-text--caption-1 {
-  font-size: var(--sapphire-text-size-font-caption-1);
+  font-size: var(--sapphire-global-size-font-88);
 }
 
 .sapphire-text--caption-2 {
-  font-size: var(--sapphire-text-size-font-caption-2);
+  font-size: var(--sapphire-global-size-font-75);
 }