@danske/sapphire-css 39.0.1 → 40.0.0

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

@@ -6,18 +6,18 @@ declare const styles: {
   readonly "sapphire-table-sortedIcon": string;
   readonly "sapphire-table-sortableIcon": string;
   readonly "sapphire-table__head": string;
+  readonly "sapphire-table__cell": string;
+  readonly "sapphire-table__headCell": string;
+  readonly "sapphire-table__selectionCell": string;
   readonly "sapphire-table__head--sticky": string;
   readonly "sapphire-table__cell--alignLeft": string;
   readonly "sapphire-table__cell--alignCenter": string;
   readonly "sapphire-table__cell--alignRight": string;
-  readonly "sapphire-table__cell-wrapper": string;
-  readonly "sapphire-table__headCell": string;
   readonly "sapphire-table__headCell_container": string;
   readonly "sapphire-table__row": string;
-  readonly "sapphire-table__cell": string;
-  readonly "sapphire-table__selectionCell": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
+  readonly "sapphire-table__row-expanded-view": string;
   readonly "sapphire-table__headCell--sortable": string;
   readonly "is-hover": string;
   readonly "js-hover": string;
@@ -32,13 +32,12 @@ declare const styles: {
   readonly "sapphire-table__table--spacing-lg": string;
   readonly "sapphire-table__table--spacing-xl": string;
   readonly "sapphire-table__tfoot": string;
+  readonly "sapphire-table--interactive": string;
   readonly "sapphire-table__row--active": string;
   readonly "sapphire-table__row--selected": string;
   readonly "sapphire-table__row--expanded": string;
-  readonly "sapphire-table__row-expanded-view": string;
   readonly "sapphire-table__row-expand-button": string;
   readonly "sapphire-table--without-last-divider": string;
-  readonly "sapphire-table--interactive": string;
   readonly "sapphire-table__row--interactive": string;
   readonly "sapphire-table__row--highlighted": string;
   readonly "sapphire-table__selection-action-bar": string;

package/components/tabs/tabs.module.css

@@ -5,7 +5,7 @@
   overflow-y: hidden;
   white-space: nowrap;
   position: relative;
-  scroll-padding: 0 calc(2 * var(--sapphire-global-size-generic-100) + 1px);
+  scroll-padding: 0 calc(2 * var(--sapphire-semantic-size-spacing-3xl) + 1px);
   min-width: 0;
   flex: 1;
 
@@ -37,23 +37,23 @@
 
 .sapphire-tabs-overflow-arrows__arrow--left {
   left: 0;
-  padding-right: var(--sapphire-global-size-generic-100);
+  padding-right: var(--sapphire-semantic-size-spacing-3xl);
   background: linear-gradient(
     90deg,
-    var(--sapphire-global-color-neutral-white) 0%,
-    var(--sapphire-global-color-neutral-white) 40%,
-    var(--sapphire-global-color-neutral-transparent) 100%
+    var(--sapphire-global-color-white) 0%,
+    var(--sapphire-global-color-white) 40%,
+    var(--sapphire-global-color-transparent) 100%
   );
 }
 
 .sapphire-tabs-overflow-arrows__arrow--right {
   right: 0;
-  padding-left: var(--sapphire-global-size-generic-100);
+  padding-left: var(--sapphire-semantic-size-spacing-3xl);
   background: linear-gradient(
     90deg,
-    var(--sapphire-global-color-neutral-transparent) 0%,
-    var(--sapphire-global-color-neutral-white) 60%,
-    var(--sapphire-global-color-neutral-white) 100%
+    var(--sapphire-global-color-transparent) 0%,
+    var(--sapphire-global-color-white) 60%,
+    var(--sapphire-global-color-white) 100%
   );
 }
 
@@ -61,7 +61,7 @@
   display: inline-flex;
   box-sizing: border-box;
   height: var(--sapphire-semantic-size-height-control-lg);
-  gap: var(--sapphire-semantic-size-spacing-40);
+  gap: var(--sapphire-semantic-size-spacing-md);
   position: relative;
   overflow: hidden;
   position: relative;
@@ -89,7 +89,7 @@
   bottom: 0;
   width: 100%;
   height: var(--sapphire-semantic-size-border-md);
-  background-color: var(--sapphire-semantic-color-border-separator-default);
+  background: var(--sapphire-semantic-color-border-secondary);
   border-radius: var(--sapphire-semantic-size-border-md);
 }
 
@@ -114,7 +114,7 @@
   text-decoration: none;
 
   background: none;
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-primary);
   box-sizing: border-box;
   white-space: nowrap;
   border-width: 0;
@@ -144,7 +144,13 @@
 .sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  color: var(--sapphire-semantic-color-content-action-secondary-default);
+  color: var(--sapphire-semantic-color-foreground-action-select-hover);
+}
+
+.sapphire-tabs__tab:not(:disabled):not(.is-disabled):active,
+.sapphire-tabs__tab:not(:disabled):not(.is-disabled):focus-visible:active,
+.sapphire-tabs__tab:not(:disabled):not(.is-disabled).is-active {
+  color: var(--sapphire-semantic-color-foreground-action-select-active);
 }
 
 .sapphire-tabs__tab.js-focus.is-focus,
@@ -175,7 +181,7 @@
  * Active tab
  */
 .sapphire-tabs__tab--active {
-  color: var(--sapphire-semantic-color-content-action-secondary-default);
+  color: var(--sapphire-semantic-color-foreground-action-select-default);
 }
 
 .sapphire-tabs__tab--active.js-focus:not(.is-focus)::after,
@@ -187,9 +193,7 @@
   bottom: calc(-1 * var(--sapphire-semantic-size-focus-ring));
   width: 100%;
   height: var(--sapphire-semantic-size-border-md);
-  background-color: var(
-    --sapphire-semantic-color-content-action-secondary-default
-  );
+  background: var(--sapphire-semantic-color-foreground-action-select-default);
   border-radius: var(--sapphire-semantic-size-border-md);
 }
 
@@ -198,7 +202,7 @@
  */
 .sapphire-tabs--sm {
   height: var(--sapphire-semantic-size-height-control-md);
-  gap: var(--sapphire-semantic-size-spacing-40);
+  gap: var(--sapphire-semantic-size-spacing-md);
 }
 .sapphire-tabs--sm .sapphire-tabs__tab {
   font-size: var(--sapphire-semantic-size-font-control-sm);
@@ -209,10 +213,10 @@
  */
 .sapphire-tabs--lg {
   height: var(--sapphire-semantic-size-height-control-xl);
-  gap: var(--sapphire-semantic-size-spacing-50);
+  gap: var(--sapphire-semantic-size-spacing-lg);
 }
 .sapphire-tabs--lg .sapphire-tabs__tab {
-  font-size: var(--sapphire-semantic-size-font-control-default);
+  font-size: var(--sapphire-semantic-size-font-control-lg);
 }
 
 .sapphire-tab-panel {

package/components/tag/tag.module.css

@@ -1,40 +1,35 @@
 .sapphire-tag-group {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--sapphire-semantic-size-spacing-30);
+  gap: var(--sapphire-semantic-size-spacing-xs);
   outline: none;
 }
 
 .sapphire-tag {
   display: inline-flex;
-  flex-direction: row;
   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;
+  padding: 0 var(--sapphire-semantic-size-spacing-sm);
   align-items: center;
-  white-space: nowrap;
   border-radius: var(--sapphire-semantic-size-height-control-sm);
-  cursor: default;
 
   /* typography */
   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-weight: var(--sapphire-semantic-font-weight-default-regular);
   font-style: normal;
   text-decoration: none;
 
   /* color default */
-  background-color: var(
+  background: var(
     --sapphire-semantic-color-background-action-secondary-default
   );
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-primary);
   outline: none;
 
   /* transition */
   transition-property: opacity, background-color, color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
 
   /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
@@ -53,7 +48,7 @@
 
 .sapphire-tag.is-focus,
 .sapphire-tag:not(.js-focus):focus-visible {
-  background-color: var(
+  background: var(
     --sapphire-semantic-color-background-action-secondary-default
   );
   outline: var(--sapphire-semantic-size-focus-ring) solid
@@ -64,7 +59,7 @@
 .sapphire-tag__content {
   display: inline-flex;
   align-items: center;
-  gap: var(--sapphire-semantic-size-spacing-20);
+  gap: var(--sapphire-semantic-size-spacing-xs);
 }
 
 /* Actionable */
@@ -74,16 +69,12 @@
 .sapphire-tag--actionable:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-hover
-  );
+  background: var(--sapphire-semantic-color-background-action-secondary-hover);
   cursor: pointer;
 }
 
 .sapphire-tag--actionable.is-active {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-active
-  );
+  background: var(--sapphire-semantic-color-background-action-secondary-active);
   cursor: pointer;
 }
 
@@ -94,13 +85,8 @@
   pointer-events: none;
 }
 
-/* Adjusts sizing when button or icon is present */
-.sapphire-tag:has(.sapphire-tag__button) {
-  padding-right: var(--sapphire-semantic-size-spacing-20);
-}
-
 .sapphire-tag:has(.sapphire-tag__error-icon) {
-  padding-left: var(--sapphire-semantic-size-spacing-20);
+  padding-left: var(--sapphire-semantic-size-spacing-xs);
 }
 
 /**
@@ -109,7 +95,7 @@
 .sapphire-tag__error-icon {
   display: flex;
   align-items: center;
-  color: var(--sapphire-semantic-color-content-negative-secondary-default);
+  color: var(--sapphire-semantic-color-foreground-on-negative-subtle);
 }
 
 /**
@@ -124,17 +110,17 @@
   border: none;
   margin: 0;
   padding: 0;
-  background-color: transparent;
+  background: transparent;
 
   /* transition */
   transition-property: color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
   cursor: pointer;
 
   /* style */
-  background-color: transparent;
-  color: var(--sapphire-semantic-color-content-passive-secondary-default);
+  background: transparent;
+  color: var(--sapphire-semantic-color-foreground-on-neutral-subtle);
 }
 
 .sapphire-tag__button:focus {

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

@@ -9,8 +9,8 @@ declare const styles: {
   readonly "is-active": string;
   readonly "js-hover": string;
   readonly "is-hover": string;
-  readonly "sapphire-tag__button": string;
   readonly "sapphire-tag__error-icon": string;
+  readonly "sapphire-tag__button": string;
 };
 export = styles;
 

package/components/text/text.module.css

@@ -1,5 +1,7 @@
 .sapphire-text {
   font-family: var(--sapphire-semantic-font-name-default);
+  color: var(--sapphire-semantic-color-foreground-primary);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
 
   /* 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,143 +19,128 @@
 }
 
 .sapphire-text--strong {
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-weight: var(--sapphire-semantic-font-weight-default-bold);
 }
 
 .sapphire-text--underlined {
   text-decoration: underline;
 }
 
-/* Heading */
-.sapphire-text--heading-1,
-.sapphire-text--heading-2,
-.sapphire-text--heading-3,
-.sapphire-text--heading-4,
-.sapphire-text--heading-5,
-.sapphire-text--heading-6 {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  color: var(--sapphire-semantic-color-content-default-primary);
-  line-height: var(--sapphire-global-size-line-height-sm);
+/* Semantic Colors */
+.sapphire-text--secondary {
+  color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
-.sapphire-text--heading-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--informative {
+  color: var(--sapphire-semantic-color-foreground-accent);
 }
 
-.sapphire-text--heading-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--positive {
+  color: var(--sapphire-semantic-color-foreground-positive);
 }
 
-.sapphire-text--heading-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-semantic-font-name-default);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
-  font-size: var(--sapphire-global-size-font-112);
+.sapphire-text--warning {
+  color: var(--sapphire-semantic-color-foreground-warning);
 }
 
-.sapphire-text--heading-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--negative {
+  color: var(--sapphire-semantic-color-foreground-negative);
 }
 
-.sapphire-text--heading-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);
+/* Heading */
+.sapphire-text--heading-2xl,
+.sapphire-text--heading-xl,
+.sapphire-text--heading-lg,
+.sapphire-text--heading-md,
+.sapphire-text--heading-sm,
+.sapphire-text--heading-xs {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  line-height: var(--sapphire-global-size-line-height-sm);
+  letter-spacing: -1%;
 }
 
-/* Alternative Heading */
-
-.sapphire-text--heading-1.sapphire-text--heading-alternative {
-  font-family: var(--sapphire-semantic-font-name-display);
+.sapphire-text--heading-2xl {
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
+  font-size: var(--sapphire-semantic-size-font-heading-2xl);
 }
 
-.sapphire-text--heading-2.sapphire-text--heading-alternative {
-  font-family: var(--sapphire-semantic-font-name-display);
-  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+.sapphire-text--heading-xl {
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
+  font-size: var(--sapphire-semantic-size-font-heading-xl);
 }
 
-.sapphire-text--heading-3.sapphire-text--heading-alternative {
-  font-family: var(--sapphire-semantic-font-name-display);
-  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+.sapphire-text--heading-lg {
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
+  font-size: var(--sapphire-semantic-size-font-heading-lg);
 }
 
-.sapphire-text--heading-4.sapphire-text--heading-alternative {
-  font-family: var(--sapphire-semantic-font-name-display);
-  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+.sapphire-text--heading-md {
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
+  font-size: var(--sapphire-semantic-size-font-heading-md);
 }
 
-.sapphire-text--heading-5.sapphire-text--heading-alternative {
-  font-family: var(--sapphire-semantic-font-name-display);
-  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+.sapphire-text--heading-sm {
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
+  font-size: var(--sapphire-semantic-size-font-heading-sm);
 }
 
-.sapphire-text--heading-6.sapphire-text--heading-alternative {
-  font-family: var(--sapphire-semantic-font-name-display);
-  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+.sapphire-text--heading-xs {
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
+  font-size: var(--sapphire-semantic-size-font-heading-xs);
 }
 
 /* Subheading */
-.sapphire-text--subheading-1,
-.sapphire-text--subheading-2 {
-  color: var(--sapphire-semantic-color-content-default-primary);
+.sapphire-text--subheading-md,
+.sapphire-text--subheading-sm {
   line-height: var(--sapphire-global-size-line-height-sm);
 }
 
-.sapphire-text--subheading-1 {
-  font-size: var(--sapphire-global-size-font-88);
+.sapphire-text--subheading-md {
+  font-size: var(--sapphire-semantic-size-font-body-sm);
 }
 
-.sapphire-text--subheading-2 {
-  font-size: var(--sapphire-global-size-font-75);
+.sapphire-text--subheading-sm {
+  font-size: var(--sapphire-semantic-size-font-body-xs);
 }
 
 /* Body text */
-.sapphire-text--body-1,
-.sapphire-text--body-2,
-.sapphire-text--body-3 {
-  color: var(--sapphire-semantic-color-content-default-primary);
+.sapphire-text--body-lg,
+.sapphire-text--body-md,
+.sapphire-text--body-sm,
+.sapphire-text--body-xs {
   line-height: var(--sapphire-global-size-line-height-md);
   margin-top: 0px;
   margin-bottom: 0px;
 }
 
-.sapphire-text--body-1 {
-  font-size: var(--sapphire-global-size-font-100);
+.sapphire-text--body-lg {
+  font-size: var(--sapphire-semantic-size-font-body-lg);
+}
+
+.sapphire-text--body-md {
+  font-size: var(--sapphire-semantic-size-font-body-md);
 }
 
-.sapphire-text--body-2 {
-  font-size: var(--sapphire-global-size-font-88);
+.sapphire-text--body-sm {
+  font-size: var(--sapphire-semantic-size-font-body-sm);
 }
 
-.sapphire-text--body-3 {
-  font-size: var(--sapphire-global-size-font-75);
+.sapphire-text--body-xs {
+  font-size: var(--sapphire-semantic-size-font-body-xs);
 }
 
 /* Caption text */
-.sapphire-text--caption-1,
-.sapphire-text--caption-2 {
-  color: var(--sapphire-semantic-color-content-default-primary);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+.sapphire-text--caption-md,
+.sapphire-text--caption-sm {
+  font-weight: var(--sapphire-semantic-font-weight-default-bold);
   line-height: var(--sapphire-global-size-line-height-sm);
 }
 
-.sapphire-text--caption-1 {
-  font-size: var(--sapphire-global-size-font-88);
+.sapphire-text--caption-md {
+  font-size: var(--sapphire-semantic-size-font-body-sm);
 }
 
-.sapphire-text--caption-2 {
-  font-size: var(--sapphire-global-size-font-75);
+.sapphire-text--caption-sm {
+  font-size: var(--sapphire-semantic-size-font-body-xs);
 }

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

@@ -2,20 +2,25 @@ declare const styles: {
   readonly "sapphire-text": string;
   readonly "sapphire-text--strong": string;
   readonly "sapphire-text--underlined": string;
-  readonly "sapphire-text--heading-1": string;
-  readonly "sapphire-text--heading-2": string;
-  readonly "sapphire-text--heading-3": string;
-  readonly "sapphire-text--heading-4": string;
-  readonly "sapphire-text--heading-5": string;
-  readonly "sapphire-text--heading-6": string;
-  readonly "sapphire-text--heading-alternative": string;
-  readonly "sapphire-text--subheading-1": string;
-  readonly "sapphire-text--subheading-2": string;
-  readonly "sapphire-text--body-1": string;
-  readonly "sapphire-text--body-2": string;
-  readonly "sapphire-text--body-3": string;
-  readonly "sapphire-text--caption-1": string;
-  readonly "sapphire-text--caption-2": string;
+  readonly "sapphire-text--secondary": string;
+  readonly "sapphire-text--informative": string;
+  readonly "sapphire-text--positive": string;
+  readonly "sapphire-text--warning": string;
+  readonly "sapphire-text--negative": string;
+  readonly "sapphire-text--heading-2xl": string;
+  readonly "sapphire-text--heading-xl": string;
+  readonly "sapphire-text--heading-lg": string;
+  readonly "sapphire-text--heading-md": string;
+  readonly "sapphire-text--heading-sm": string;
+  readonly "sapphire-text--heading-xs": string;
+  readonly "sapphire-text--subheading-md": string;
+  readonly "sapphire-text--subheading-sm": string;
+  readonly "sapphire-text--body-lg": string;
+  readonly "sapphire-text--body-md": string;
+  readonly "sapphire-text--body-sm": string;
+  readonly "sapphire-text--body-xs": string;
+  readonly "sapphire-text--caption-md": string;
+  readonly "sapphire-text--caption-sm": string;
 };
 export = styles;