@danske/sapphire-css 32.2.1 → 33.0.0

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

@@ -9,24 +9,23 @@ declare const styles: {
   readonly "sapphire-button__icon": string;
   readonly "sapphire-button--loading": string;
   readonly "sapphire-button__spinner": string;
-  readonly "sapphire-button--primary-fill": string;
+  readonly "sapphire-button--primary": string;
   readonly "is-active": string;
   readonly "js-hover": string;
   readonly "is-hover": string;
-  readonly "sapphire-button--secondary-fill": string;
-  readonly "sapphire-button--secondary-surface": string;
+  readonly "sapphire-button--secondary": string;
   readonly "sapphire-button--secondary-ghost": string;
   readonly "sapphire-button--secondary-text": string;
-  readonly "sapphire-button--tertiary-fill": string;
+  readonly "sapphire-button--tertiary": string;
   readonly "sapphire-button--tertiary-ghost": string;
   readonly "sapphire-button--tertiary-text": string;
-  readonly "sapphire-button--danger-fill": string;
+  readonly "sapphire-button--danger": string;
   readonly "sapphire-button--danger-ghost": string;
   readonly "sapphire-button--danger-text": string;
   readonly "sapphire-button--selected": string;
   readonly "sapphire-button--unselected": string;
-  readonly "sapphire-button--large": string;
-  readonly "sapphire-button--small": string;
+  readonly "sapphire-button--lg": string;
+  readonly "sapphire-button--sm": string;
 };
 export = styles;
 

package/components/buttonGroup/buttonGroup.module.css

@@ -3,7 +3,7 @@
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: stretch;
-  gap: var(--sapphire-button-group-size-spacing-m);
+  gap: var(--sapphire-semantic-size-spacing-40);
 }
 
 /*
@@ -40,16 +40,16 @@ Added !important because of Angular implementation, and how the extra attribute
   flex-direction: column-reverse;
 }
 
-.sapphire-button-group--spacing-l {
-  gap: var(--sapphire-button-group-size-spacing-l);
+.sapphire-button-group--spacing-lg {
+  gap: var(--sapphire-semantic-size-spacing-50);
 }
 
-.sapphire-button-group--spacing-s {
-  gap: var(--sapphire-button-group-size-spacing-s);
+.sapphire-button-group--spacing-sm {
+  gap: var(--sapphire-semantic-size-spacing-30);
 }
 
 .sapphire-button-group--spacing-xs {
-  gap: var(--sapphire-button-group-size-spacing-xs);
+  gap: var(--sapphire-semantic-size-spacing-5);
 }
 
 .sapphire-button-group--align-center {

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

@@ -3,8 +3,8 @@ declare const styles: {
   readonly "sapphire-button-group--stretch": string;
   readonly "sapphire-button-group--vertical": string;
   readonly "sapphire-button-group--stretch-auto-vertical": string;
-  readonly "sapphire-button-group--spacing-l": string;
-  readonly "sapphire-button-group--spacing-s": string;
+  readonly "sapphire-button-group--spacing-lg": string;
+  readonly "sapphire-button-group--spacing-sm": string;
   readonly "sapphire-button-group--spacing-xs": string;
   readonly "sapphire-button-group--align-center": string;
   readonly "sapphire-button-group--align-right": string;

package/components/calendar/calendar.module.css

@@ -1,7 +1,7 @@
 .sapphire-calendar {
-  font-family: var(--sapphire-calendar-font-name);
+  font-family: var(--sapphire-semantic-font-name-default);
   display: inline-flex;
-  background-color: var(--sapphire-calendar-color-background-calendar);
+  background-color: var(--sapphire-semantic-color-background-popover-default);
   box-sizing: border-box;
 }
 .sapphire-calendar__table-container {
@@ -9,7 +9,7 @@
   min-width needed for months and years view. Otherwise the calendar's width changes as view is
   switched
   */
-  min-width: calc(7 * var(--sapphire-calendar-size-width-default));
+  min-width: calc(7 * var(--sapphire-global-size-generic-120));
   /*
   For now we have decided to not support flexible width for the calendar grid.
   If we want that, we only need to add a `flex: 1` here. The width of Months/Years table is
@@ -21,7 +21,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-bottom: var(--sapphire-calendar-size-spacing-header-bottom);
+  padding-bottom: var(--sapphire-semantic-size-spacing-40);
 }
 
 .sapphire-calendar__header--left .sapphire-calendar__header-next-month {
@@ -34,12 +34,12 @@
 
 .sapphire-calendar__header-title {
   margin: 0 auto;
-  color: var(--sapphire-calendar-color-content-default);
+  color: var(--sapphire-semantic-color-content-default-primary);
 }
 
 .sapphire-calendar__tables-row {
   display: flex;
-  gap: var(--sapphire-calendar-size-spacing-calendar-double-container-gap);
+  gap: var(--sapphire-semantic-size-spacing-60);
 }
 
 .sapphire-calendar__table {
@@ -48,44 +48,40 @@
 }
 
 .sapphire-calendar__table--month-year {
-  width: calc(7 * var(--sapphire-calendar-size-width-default));
+  width: calc(7 * var(--sapphire-global-size-generic-120));
   table-layout: fixed;
 }
 
 .sapphire-calendar__table
   .sapphire-calendar__table-body-row:not(:last-child)
   .sapphire-calendar__table-body-cell {
-  padding-bottom: var(
-    --sapphire-calendar-size-spacing-body-cell-bottom-default
-  );
+  padding-bottom: var(--sapphire-global-size-static-5);
 }
 
 .sapphire-calendar__table--month-year
   .sapphire-calendar__table-body-row:not(:last-child)
   .sapphire-calendar__table-body-cell {
-  padding-bottom: var(
-    --sapphire-calendar-size-spacing-body-cell-bottom-month-year
-  );
+  padding-bottom: var(--sapphire-semantic-size-spacing-20);
 }
 
 .sapphire-calendar__table--with-week-numbers th:first-child {
-  padding-right: var(--sapphire-calendar-size-spacing-week-numbers-gap);
-  border-right: var(--sapphire-calendar-size-width-border) solid
-    var(--sapphire-calendar-color-border);
+  padding-right: var(--sapphire-semantic-size-spacing-20);
+  border-right: var(--sapphire-semantic-size-border-sm) solid
+    var(--sapphire-semantic-color-border-separator-default);
 }
 
 .sapphire-calendar__table--with-week-numbers th:first-child + td {
-  padding-left: var(--sapphire-calendar-size-spacing-week-numbers-gap);
+  padding-left: var(--sapphire-semantic-size-spacing-20);
 }
 
 .sapphire-calendar__table-head-cell {
-  height: var(--sapphire-calendar-size-height-head-cell);
+  height: var(--sapphire-semantic-size-height-control-sm);
   text-align: center;
   padding: 0;
 }
 
 .sapphire-calendar__table-body-cell {
-  height: var(--sapphire-calendar-size-height-default);
+  height: var(--sapphire-semantic-size-height-control-lg);
   text-align: center;
   padding: 0;
 }
@@ -94,38 +90,34 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--sapphire-calendar-size-spacing-custom-ranges-gap);
-  border-left: var(--sapphire-calendar-size-width-border) solid
-    var(--sapphire-calendar-color-border);
-  margin-left: var(--sapphire-calendar-size-spacing-custom-ranges-margin-left);
-  padding-left: var(
-    --sapphire-calendar-size-spacing-custom-ranges-padding-left
-  );
-  padding-right: var(
-    --sapphire-calendar-size-spacing-custom-ranges-padding-right
-  );
+  gap: var(--sapphire-semantic-size-spacing-40);
+  border-left: var(--sapphire-semantic-size-border-sm) solid
+    var(--sapphire-semantic-color-border-separator-default);
+  margin-left: var(--sapphire-semantic-size-spacing-40);
+  padding-left: var(--sapphire-semantic-size-spacing-40);
+  padding-right: var(--sapphire-semantic-size-spacing-5);
 }
 
 .sapphire-calendar__day-of-week {
   text-decoration: none;
-  color: var(--sapphire-calendar-color-content-day-of-week);
-  font-weight: var(--sapphire-calendar-font-weight-day-of-week);
-  font-size: var(--sapphire-calendar-size-font-default);
+  color: var(--sapphire-semantic-color-content-default-secondary);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-semantic-size-font-text-md);
 }
 
 .sapphire-calendar__week-number {
   display: block;
   text-decoration: none;
-  color: var(--sapphire-calendar-color-content-week-number);
-  font-weight: var(--sapphire-calendar-font-weight-week-number);
-  font-size: var(--sapphire-calendar-size-font-default);
-  width: var(--sapphire-calendar-size-width-default);
+  color: var(--sapphire-semantic-color-content-default-secondary);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-semantic-size-font-text-md);
+  width: var(--sapphire-global-size-generic-120);
 }
 
 .sapphire-calendar__button {
   all: unset;
   display: flex;
-  height: var(--sapphire-calendar-size-height-default);
+  height: var(--sapphire-semantic-size-height-control-lg);
   align-items: center;
   justify-content: center;
   cursor: pointer;
@@ -134,61 +126,61 @@
   box-sizing: border-box;
 
   /* to prevent focus rings from overlapping with the neighbor button*/
-  padding: var(--sapphire-calendar-size-focus-ring-border);
+  padding: var(--sapphire-semantic-size-focus-ring);
 
   width: 100%;
 }
 
 .sapphire-calendar__button .sapphire-calendar__button-text {
-  font-size: var(--sapphire-calendar-size-font-default);
-  color: var(--sapphire-calendar-color-content-default);
-  font-weight: var(--sapphire-calendar-font-weight-default);
-  background-color: var(--sapphire-calendar-color-background-button-default);
+  font-size: var(--sapphire-semantic-size-font-text-md);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+  background-color: var(--sapphire-global-color-neutral-transparent);
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
-  border-radius: var(--sapphire-calendar-size-radius);
+  border-radius: var(--sapphire-semantic-size-height-control-lg);
   transition-property: opacity, background-color, color;
   transition-duration: 0s;
   transition-timing-function: ease-in-out;
-  padding: 0 var(--sapphire-calendar-size-spacing-title-horizontal);
+  padding: 0 var(--sapphire-semantic-size-spacing-50);
 }
 
 .sapphire-calendar__header-title {
-  font-weight: var(--sapphire-calendar-font-weight-title);
-  font-size: var(--sapphire-calendar-size-font-title);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-semantic-size-font-text-lg);
 }
 
 /* Customizations for day buttons */
 .sapphire-calendar__button--day .sapphire-calendar__button-text {
   width: calc(
-    var(--sapphire-calendar-size-width-default) - 2 *
-      var(--sapphire-calendar-size-focus-ring-border)
+    var(--sapphire-global-size-generic-120) - 2 *
+      var(--sapphire-semantic-size-focus-ring)
   );
   height: calc(
-    var(--sapphire-calendar-size-width-default) - 2 *
-      var(--sapphire-calendar-size-focus-ring-border)
+    var(--sapphire-global-size-generic-120) - 2 *
+      var(--sapphire-semantic-size-focus-ring)
   );
   padding: 0;
 }
 
 .sapphire-calendar__button:disabled,
 .sapphire-calendar__button.is-disabled {
-  opacity: var(--sapphire-calendar-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
   cursor: not-allowed;
 }
 
 .sapphire-calendar__button.is-focus .sapphire-calendar__button-text,
 .sapphire-calendar__button:not(.js-focus):focus-visible
   .sapphire-calendar__button-text {
-  outline: var(--sapphire-calendar-size-focus-ring-border) solid
-    var(--sapphire-calendar-color-focus-ring);
-  outline-offset: var(--sapphire-calendar-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);
   z-index: 2;
-  background-color: var(--sapphire-calendar-color-background-button-focus);
-  transition-duration: var(--sapphire-calendar-time-transition);
+  background-color: var(--sapphire-global-color-neutral-transparent);
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
 }
 
 .sapphire-calendar__button:not(:disabled):not(.is-disabled):not(:active):not(
@@ -199,8 +191,10 @@
     .is-active
   ).is-hover
   .sapphire-calendar__button-text {
-  background-color: var(--sapphire-calendar-color-background-button-hover);
-  transition-duration: var(--sapphire-calendar-time-transition);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-hover
+  );
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
 }
 
 .sapphire-calendar__button:not(:disabled):not(.is-disabled).is-active
@@ -209,8 +203,10 @@
   .sapphire-calendar__button-text,
 .sapphire-calendar__button:not(:disabled):not(.is-disabled):focus-visible:active
   .sapphire-calendar__button-text {
-  background-color: var(--sapphire-calendar-color-background-button-active);
-  transition-duration: var(--sapphire-calendar-time-transition);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-active
+  );
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
 }
 
 .sapphire-calendar__table[aria-readonly='true'] .sapphire-calendar__button {
@@ -219,15 +215,15 @@
 
 .sapphire-calendar__button.sapphire-calendar__button--range-selection
   .sapphire-calendar__button-text {
-  color: var(--sapphire-calendar-color-content-range-selection);
+  color: var(--sapphire-semantic-color-content-selection-selected-default);
   background-color: var(
-    --sapphire-calendar-color-background-range-selection-default
+    --sapphire-semantic-color-background-selection-selected-default
   );
 }
 
 .sapphire-calendar__button.sapphire-calendar__button--range-selection {
   background-color: var(
-    --sapphire-calendar-color-background-range-selection-default
+    --sapphire-semantic-color-background-selection-selected-default
   );
 }
 
@@ -240,7 +236,7 @@
   ):not(.is-disabled):not(:active):not(.is-active).is-hover
   .sapphire-calendar__button-text {
   background-color: var(
-    --sapphire-calendar-color-background-range-selection-hover
+    --sapphire-semantic-color-background-selection-selected-hover
   );
 }
 
@@ -257,7 +253,7 @@
   ):not(.is-disabled):focus-visible:active
   .sapphire-calendar__button-text {
   background-color: var(
-    --sapphire-calendar-color-background-range-selection-active
+    --sapphire-semantic-color-background-selection-selected-active
   );
 }
 
@@ -268,7 +264,7 @@
   ):focus-visible
   .sapphire-calendar__button-text {
   background-color: var(
-    --sapphire-calendar-color-background-range-selection-focus
+    --sapphire-semantic-color-background-selection-selected-default
   );
 }
 
@@ -280,9 +276,11 @@
   .sapphire-calendar__button-text,
 .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end
   .sapphire-calendar__button-text {
-  background-color: var(--sapphire-calendar-color-background-selected-default);
-  color: var(--sapphire-calendar-color-content-selected);
-  font-weight: var(--sapphire-calendar-font-weight-selected);
+  background-color: var(
+    --sapphire-semantic-color-background-action-primary-default
+  );
+  color: var(--sapphire-semantic-color-content-action-primary-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
 }
 
 .sapphire-calendar__button:focus {
@@ -315,7 +313,9 @@
     :disabled
   ):not(.is-disabled):not(:active):not(.is-active).is-hover
   .sapphire-calendar__button-text {
-  background-color: var(--sapphire-calendar-color-background-selected-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-action-primary-hover
+  );
 }
 
 .sapphire-calendar__button.sapphire-calendar__button--selected:not(
@@ -354,7 +354,9 @@
     :disabled
   ):not(.is-disabled):focus-visible:active
   .sapphire-calendar__button-text {
-  background-color: var(--sapphire-calendar-color-background-selected-active);
+  background-color: var(
+    --sapphire-semantic-color-background-action-primary-active
+  );
 }
 
 .sapphire-calendar__button.sapphire-calendar__button--selected:not(
@@ -377,32 +379,34 @@
     .js-focus
   ):focus-visible
   .sapphire-calendar__button-text {
-  background-color: var(--sapphire-calendar-color-background-selected-focus);
+  background-color: var(
+    --sapphire-semantic-color-background-action-primary-default
+  );
 }
 
 .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start,
 .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--range-start {
-  border-bottom-left-radius: var(--sapphire-calendar-size-radius);
-  border-top-left-radius: var(--sapphire-calendar-size-radius);
+  border-bottom-left-radius: var(--sapphire-semantic-size-height-control-lg);
+  border-top-left-radius: var(--sapphire-semantic-size-height-control-lg);
 }
 
 .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end,
 .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--range-end {
-  border-bottom-right-radius: var(--sapphire-calendar-size-radius);
-  border-top-right-radius: var(--sapphire-calendar-size-radius);
+  border-bottom-right-radius: var(--sapphire-semantic-size-height-control-lg);
+  border-top-right-radius: var(--sapphire-semantic-size-height-control-lg);
 }
 
 .sapphire-calendar__button.sapphire-calendar__button--current::after {
   content: '';
   position: absolute;
   z-index: 2;
-  height: var(--sapphire-calendar-size-height-current-indicator);
-  width: var(--sapphire-calendar-size-width-current-indicator);
-  border-radius: var(--sapphire-calendar-size-radius);
+  height: var(--sapphire-global-size-static-10);
+  width: var(--sapphire-global-size-static-10);
+  border-radius: var(--sapphire-semantic-size-height-control-lg);
   background-color: var(
-    --sapphire-calendar-color-background-current-indicator-default
+    --sapphire-semantic-color-background-action-primary-default
   );
-  bottom: var(--sapphire-calendar-size-spacing-current-indicator-bottom);
+  bottom: var(--sapphire-global-size-generic-20);
 }
 
 .sapphire-calendar__button.sapphire-calendar__button--selected:not(
@@ -411,7 +415,7 @@
 .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start.sapphire-calendar__button--current::after,
 .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end.sapphire-calendar__button--current::after {
   background-color: var(
-    --sapphire-calendar-color-background-current-indicator-selected
+    --sapphire-semantic-color-content-action-primary-default
   );
 }
 
@@ -444,7 +448,7 @@
 }
 .sapphire-calendar__grid-page-animation--next .enter-active {
   transform: translateX(0%);
-  transition: transform var(--sapphire-calendar-time-slide) ease-in-out;
+  transition: transform var(--sapphire-semantic-time-motion-slow) ease-in-out;
 }
 .sapphire-calendar__grid-page-animation--next .exit {
   transform: translateX(0%);
@@ -452,7 +456,7 @@
 }
 .sapphire-calendar__grid-page-animation--next .exit-active {
   transform: translateX(-100%);
-  transition: transform var(--sapphire-calendar-time-slide) ease-in-out;
+  transition: transform var(--sapphire-semantic-time-motion-slow) ease-in-out;
 }
 
 /* Previous page animation, applied on the wrapper, when previous grid(s) are animating in */
@@ -461,7 +465,7 @@
 }
 .sapphire-calendar__grid-page-animation--prev .enter-active {
   transform: translateX(0%);
-  transition: transform var(--sapphire-calendar-time-slide) ease-in-out;
+  transition: transform var(--sapphire-semantic-time-motion-slow) ease-in-out;
 }
 .sapphire-calendar__grid-page-animation--prev .exit {
   transform: translateX(0%);
@@ -469,5 +473,5 @@
 }
 .sapphire-calendar__grid-page-animation--prev .exit-active {
   transform: translateX(100%);
-  transition: transform var(--sapphire-calendar-time-slide) ease-in-out;
+  transition: transform var(--sapphire-semantic-time-motion-slow) ease-in-out;
 }