@danske/sapphire-css 32.2.0 → 33.0.0

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

@@ -6,20 +6,19 @@ declare const styles: {
   readonly "sapphire-icon-button__spinner": string;
   readonly "sapphire-icon-button--loading": string;
   readonly "sapphire-icon-button__icon": string;
-  readonly "sapphire-icon-button--primary-fill": string;
+  readonly "sapphire-icon-button--primary": string;
   readonly "is-active": string;
   readonly "js-hover": string;
   readonly "is-hover": string;
-  readonly "sapphire-icon-button--secondary-fill": string;
-  readonly "sapphire-icon-button--secondary-surface": string;
+  readonly "sapphire-icon-button--secondary": string;
   readonly "sapphire-icon-button--secondary-ghost": string;
-  readonly "sapphire-icon-button--tertiary-fill": string;
+  readonly "sapphire-icon-button--tertiary": string;
   readonly "sapphire-icon-button--tertiary-ghost": string;
-  readonly "sapphire-icon-button--danger-fill": string;
+  readonly "sapphire-icon-button--danger": string;
   readonly "sapphire-icon-button--danger-ghost": string;
-  readonly "sapphire-icon-button--large": string;
-  readonly "sapphire-icon-button--small": string;
-  readonly "sapphire-icon-button--extra-small": string;
+  readonly "sapphire-icon-button--lg": string;
+  readonly "sapphire-icon-button--sm": string;
+  readonly "sapphire-icon-button--xs": string;
 };
 export = styles;
 

package/components/label/label.module.css

@@ -1,21 +1,21 @@
 .sapphire-label {
   display: inline-flex;
   align-items: center;
-  min-height: var(--sapphire-label-size-height-l);
-  line-height: var(--sapphire-label-size-line-height-l);
-  font-size: var(--sapphire-label-size-font-l);
-  gap: var(--sapphire-label-size-spacing-horizontal);
+  min-height: var(--sapphire-semantic-size-height-control-xs);
+  line-height: var(--sapphire-semantic-size-line-height-md);
+  font-size: var(--sapphire-semantic-size-font-label-md);
+  gap: var(--sapphire-semantic-size-spacing-10);
 }
 
-.sapphire-label--medium {
-  line-height: var(--sapphire-label-size-line-height-m);
-  font-size: var(--sapphire-label-size-font-m);
-  min-height: var(--sapphire-label-size-height-m);
+.sapphire-label--md {
+  line-height: var(--sapphire-semantic-size-line-height-sm);
+  font-size: var(--sapphire-semantic-size-font-label-sm);
+  min-height: var(--sapphire-semantic-size-height-control-2xs);
 }
 
 .sapphire-label__text {
-  font-weight: var(--sapphire-label-size-font-weight);
-  color: var(--sapphire-label-color-text);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  color: var(--sapphire-semantic-color-content-default-primary);
 }
 
 .sapphire-label__required-indicator {
@@ -25,5 +25,5 @@
 }
 
 .sapphire-label__optional-indicator {
-  color: var(--sapphire-label-color-necessity-indicator);
+  color: var(--sapphire-semantic-color-content-default-secondary);
 }

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

@@ -1,6 +1,6 @@
 declare const styles: {
   readonly "sapphire-label": string;
-  readonly "sapphire-label--medium": string;
+  readonly "sapphire-label--md": string;
   readonly "sapphire-label__text": string;
   readonly "sapphire-label__required-indicator": string;
   readonly "sapphire-label__optional-indicator": string;

package/components/labeledValue/labeledValue.module.css

@@ -1,11 +1,11 @@
 .sapphire-labeled-value {
-  width: var(--sapphire-text-field-size-width-control);
-  line-height: var(--sapphire-text-field-size-line-height-content);
-  font-size: var(--sapphire-text-field-size-font-content-l);
+  width: var(--sapphire-semantic-size-width-control-default);
+  line-height: var(--sapphire-semantic-size-line-height-md);
+  font-size: var(--sapphire-semantic-size-font-control-default);
 }
 
-.sapphire-field--medium .sapphire-labeled-value,
-.sapphire-labeled-value--medium {
-  line-height: var(--sapphire-text-field-size-line-height-content);
-  font-size: var(--sapphire-text-field-size-font-content-m);
+.sapphire-field--md .sapphire-labeled-value,
+.sapphire-labeled-value--md {
+  line-height: var(--sapphire-semantic-size-line-height-md);
+  font-size: var(--sapphire-semantic-size-font-control-md);
 }

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

@@ -1,7 +1,7 @@
 declare const styles: {
   readonly "sapphire-labeled-value": string;
-  readonly "sapphire-field--medium": string;
-  readonly "sapphire-labeled-value--medium": string;
+  readonly "sapphire-field--md": string;
+  readonly "sapphire-labeled-value--md": string;
 };
 export = styles;
 

package/components/link/link.module.css

@@ -13,7 +13,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  /** 
+  /**
    * For making line-height take effect in all scenarios
    * Otherwise in some cases the link can be set to display: inline
    * by the browser which would not make line-height apply
@@ -21,17 +21,17 @@
    */
   display: inline-block;
 
-  font-family: var(--sapphire-link-font-name);
-  font-size: var(--sapphire-link-size-font-l);
-  line-height: var(--sapphire-link-size-line-height);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-size: var(--sapphire-semantic-size-font-text-lg);
+  line-height: var(--sapphire-semantic-size-line-height-md);
   cursor: pointer;
   outline: 0;
-  border-radius: var(--sapphire-link-size-radius);
+  border-radius: var(--sapphire-semantic-size-radius-xs);
 }
 
 /* Disabled state for all variants */
 .sapphire-link.is-disabled {
-  opacity: var(--sapphire-link-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
   cursor: not-allowed;
 }
 
@@ -40,7 +40,7 @@
  */
 /* primary */
 .sapphire-link--primary {
-  color: var(--sapphire-link-color-content-primary-default);
+  color: var(--sapphire-semantic-color-content-link-primary-default);
 }
 .sapphire-link--primary:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
@@ -48,23 +48,23 @@
 .sapphire-link--primary:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  color: var(--sapphire-link-color-content-primary-hover);
+  color: var(--sapphire-semantic-color-content-link-primary-hover);
 }
 .sapphire-link--primary.is-focus,
 .sapphire-link--primary:not(.js-focus):focus-visible {
-  color: var(--sapphire-link-color-content-primary-default);
-  outline: var(--sapphire-link-size-focus-ring-border) solid
-    var(--sapphire-link-color-focus-ring);
+  color: var(--sapphire-semantic-color-content-link-primary-default);
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
 }
 .sapphire-link--primary:not(:disabled):not(.is-disabled).is-active,
 .sapphire-link--primary:not(:disabled):not(.is-disabled):active,
 .sapphire-link--primary:not(:disabled):not(.is-disabled):focus-visible:active {
-  color: var(--sapphire-link-color-content-primary-active);
+  color: var(--sapphire-semantic-color-content-link-primary-active);
 }
 
 /* secondary */
 .sapphire-link--secondary {
-  color: var(--sapphire-link-color-content-secondary-default);
+  color: var(--sapphire-semantic-color-content-link-secondary-default);
 }
 
 .sapphire-link--secondary:not(:disabled):not(.is-disabled):not(:active):not(
@@ -73,14 +73,14 @@
 .sapphire-link--secondary:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  color: var(--sapphire-link-color-content-secondary-hover);
+  color: var(--sapphire-semantic-color-content-link-secondary-hover);
 }
 
 .sapphire-link--secondary.is-focus,
 .sapphire-link--secondary:not(.js-focus):focus-visible {
-  color: var(--sapphire-link-color-content-secondary-default);
-  outline: var(--sapphire-link-size-focus-ring-border) solid
-    var(--sapphire-link-color-focus-ring);
+  color: var(--sapphire-semantic-color-content-link-secondary-default);
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
 }
 
 .sapphire-link--secondary:not(:disabled):not(.is-disabled).is-active,
@@ -88,16 +88,16 @@
 .sapphire-link--secondary:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  color: var(--sapphire-link-color-content-secondary-active);
+  color: var(--sapphire-semantic-color-content-link-secondary-active);
 }
 
 /**
  * Size variations
  */
-.sapphire-link--medium {
-  font-size: var(--sapphire-link-size-font-m);
+.sapphire-link--md {
+  font-size: var(--sapphire-semantic-size-font-text-md);
 }
 
-.sapphire-link--small {
-  font-size: var(--sapphire-link-size-font-s);
+.sapphire-link--sm {
+  font-size: var(--sapphire-semantic-size-font-text-sm);
 }

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

@@ -8,8 +8,8 @@ declare const styles: {
   readonly "is-focus": string;
   readonly "js-focus": string;
   readonly "sapphire-link--secondary": string;
-  readonly "sapphire-link--medium": string;
-  readonly "sapphire-link--small": string;
+  readonly "sapphire-link--md": string;
+  readonly "sapphire-link--sm": string;
 };
 export = styles;
 

package/components/list/list.module.css

@@ -25,9 +25,11 @@
   position: relative;
   display: flex;
   justify-content: space-between;
-  padding: var(--sapphire-list-spacing-item-vertical-default)
-    var(--sapphire-list-spacing-item-horizontal-default);
-  background-color: var(--sapphire-list-color-background-item-default);
+  padding: var(--sapphire-semantic-size-spacing-30)
+    var(--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg);
+  background-color: var(
+    --sapphire-semantic-color-background-action-tertiary-ghost-default
+  );
   outline: none;
 }
 
@@ -43,12 +45,12 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
-  /* 
-   * Same as outermost element (li) as this should control padding instead 
+  /*
+   * Same as outermost element (li) as this should control padding instead
    * if element is a (href prop has value) or button (action prop has value).
    */
-  padding: var(--sapphire-list-spacing-item-vertical-default)
-    var(--sapphire-list-spacing-item-horizontal-default);
+  padding: var(--sapphire-semantic-size-spacing-30)
+    var(--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg);
 
   /* Counterstyling anything passed as custom content wrapper */
   text-decoration: none;
@@ -63,9 +65,16 @@
 }
 
 .sapphire-list--negative-margin-self {
-  margin-left: calc(var(--sapphire-list-spacing-item-horizontal-default) * -1);
+  margin-left: calc(
+    var(--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg) *
+      -1
+  );
   width: calc(
-    100% + (var(--sapphire-list-spacing-item-horizontal-default) * 2)
+    100% +
+      (
+        var(--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg) *
+          2
+      )
   );
 }
 
@@ -74,10 +83,10 @@
 .sapphire-list__item-content-wrapper:disabled,
 .sapphire-list__item-content-wrapper[aria-disabled='true'] {
   cursor: not-allowed;
-  opacity: var(--sapphire-list-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
 }
 
-/* 
+/*
   Only render a divider if
   - item isn't last child of without-last-divider list
   - next item is focused (as next item's top box-shadow will act as divider) either by
@@ -85,12 +94,12 @@
     - sibling of a list item without a child item-content-wrapper not having a focused child item-content-wrapper
   - item-content-wrapper is not focused itself
 
-  Note that using box-shadow both for divider and focus styling complicates the selectors 
+  Note that using box-shadow both for divider and focus styling complicates the selectors
   as we for instance have to exclude the focus states when adding the divider.
 */
 .sapphire-list__item-content-wrapper:not(.is-focus, :not(.js-focus):focus),
 .sapphire-list__item:not(:has(.sapphire-list__item-content-wrapper)) {
-  box-shadow: inset 0px -1px 0px 0px var(--sapphire-list-color-border-item-default);
+  box-shadow: inset 0px -1px 0px 0px var(--sapphire-semantic-color-border-separator-default);
 }
 /* For not virtualized list */
 .sapphire-list--without-last-divider:not(:has([role="presentation"] > [role="presentation"]))
@@ -129,7 +138,9 @@
   .sapphire-list__item-content-wrapper:not(.js-hover):not(
     [aria-disabled='true']
   ):not(:disabled):hover {
-  background-color: var(--sapphire-list-color-background-item-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-default
+  );
   cursor: pointer;
 }
 
@@ -144,17 +155,16 @@
 .sapphire-list__item-content-wrapper.is-focus,
 .sapphire-list__item-content-wrapper:not(.js-focus):focus {
   outline: none;
-  box-shadow: inset 0px 0px 0px
-    var(--sapphire-list-size-width-border-item-focus)
-    var(--sapphire-list-color-border-item-focus);
+  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
+    var(--sapphire-semantic-color-focus-ring);
   border: 0;
-  border-radius: var(--sapphire-list-size-radius);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
 }
 
 .sapphire-list__item-content-left {
   display: flex;
   align-items: center;
-  margin-right: var(--sapphire-list-spacing-item-horizontal-content);
+  margin-right: var(--sapphire-semantic-size-spacing-30);
   /* This was added to accommodate nowrap + hidden text overflow situations */
   min-width: 0;
 }
@@ -163,14 +173,14 @@
   display: flex;
   align-items: center;
   text-align: right;
-  margin-left: var(--sapphire-list-spacing-item-horizontal-content);
-  color: var(--sapphire-list-color-content-primary-text);
+  margin-left: var(--sapphire-semantic-size-spacing-30);
+  color: var(--sapphire-semantic-color-content-default-primary);
 }
 
 .sapphire-list__item-text {
   display: flex;
   flex-direction: column;
-  font-family: var(--sapphire-list-font-name);
+  font-family: var(--sapphire-semantic-font-name-default);
   /* This was added to accommodate nowrap + hidden text overflow situation */
   min-width: 0;
   overflow-wrap: break-word;
@@ -182,23 +192,23 @@
 
 /* If sibling is present before the text, we apply margin to the left on the text */
 * + .sapphire-list__item-text {
-  margin-left: var(--sapphire-list-spacing-item-horizontal-content);
+  margin-left: var(--sapphire-semantic-size-spacing-30);
 }
 
 /* If sibling is present after the text, we apply margin to the left on that sibling */
 .sapphire-list__item-text + * {
-  margin-left: var(--sapphire-list-spacing-item-horizontal-content);
+  margin-left: var(--sapphire-semantic-size-spacing-30);
 }
 
 .sapphire-list__item-text-primary {
-  color: var(--sapphire-list-color-content-primary-text);
-  line-height: var(--sapphire-list-size-line-height);
-  font-size: var(--sapphire-list-size-font-primary-text);
-  font-weight: var(--sapphire-list-font-weight-primary-text);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  line-height: var(--sapphire-semantic-size-line-height-md);
+  font-size: var(--sapphire-semantic-size-font-text-lg);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
 }
 
 .sapphire-list__item-text-secondary {
-  color: var(--sapphire-list-color-content-secondary-text);
-  line-height: var(--sapphire-list-size-line-height);
-  font-size: var(--sapphire-list-size-font-secondary-text);
+  color: var(--sapphire-semantic-color-content-default-secondary);
+  line-height: var(--sapphire-semantic-size-line-height-md);
+  font-size: var(--sapphire-semantic-size-font-text-md);
 }