@danske/sapphire-css 39.0.1 → 40.0.0

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

@@ -4,9 +4,6 @@ declare const styles: {
   readonly "is-disabled": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
-  readonly "sapphire-button--with-left-icon": string;
-  readonly "sapphire-button--with-right-icon": string;
-  readonly "sapphire-button__icon": string;
   readonly "sapphire-button--loading": string;
   readonly "sapphire-button__spinner": string;
   readonly "sapphire-button--primary": string;
@@ -14,16 +11,15 @@ declare const styles: {
   readonly "js-hover": string;
   readonly "is-hover": string;
   readonly "sapphire-button--secondary": string;
-  readonly "sapphire-button--secondary-ghost": string;
-  readonly "sapphire-button--secondary-text": string;
   readonly "sapphire-button--tertiary": string;
-  readonly "sapphire-button--tertiary-ghost": string;
-  readonly "sapphire-button--tertiary-text": string;
+  readonly "sapphire-button--text": string;
   readonly "sapphire-button--danger": string;
-  readonly "sapphire-button--danger-ghost": string;
+  readonly "sapphire-button--danger-secondary": string;
+  readonly "sapphire-button--danger-tertiary": string;
   readonly "sapphire-button--danger-text": string;
   readonly "sapphire-button--selected": string;
   readonly "sapphire-button--unselected": string;
+  readonly "sapphire-button__icon": string;
   readonly "sapphire-button--lg": string;
   readonly "sapphire-button--sm": string;
 };

package/components/buttonGroup/buttonGroup.module.css

@@ -3,16 +3,28 @@
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: stretch;
-  gap: var(--sapphire-semantic-size-spacing-40);
+  gap: var(--sapphire-semantic-size-spacing-md);
 }
 
-/*
-The initial idea of buttons that stack on top of each other if the container width is too small was to use @container queries.
-There was an attempt to make use of the query based on ".sapphire-button-group" when it was under 320px, but we encountered certain limitations.
-For the query to work, the CSS property `container-type: inline-size;` should be set, but due to how the container query works, the width of the button group would always collapse (read more: https://developer.mozilla.org/en-US/docs/Web/CSS/container-type)
-It was decided that, in order to fulfill the requirements, a new modifier (--stretch) needs to be added.
-This enables, if desired, conditional rendering of button group as stretch, overcoming the limitations of container queries.
-*/
+/**
+ * The initial idea of buttons that stack on top of each other if the container
+ * width is too small was to use @container queries.
+ *
+ * There was an attempt to make use of the query based on
+ * ".sapphire-button-group" when it was under 320px, but we encountered certain
+ * limitations.
+ *
+ * For the query to work, the CSS property `container-type: inline-size;`
+ * should be set, but due to how the container query works, the width of the
+ * button group would always collapse (read more:
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/container-type)
+ *
+ * It was decided that, in order to fulfill the requirements, a new modifier
+ * (--stretch) needs to be added.
+ *
+ * This enables, if desired, conditional rendering of button group as stretch,
+ * overcoming the limitations of container queries.
+ */
 .sapphire-button-group--stretch {
   flex-wrap: wrap-reverse;
   justify-content: normal;
@@ -20,8 +32,13 @@ This enables, if desired, conditional rendering of button group as stretch, over
 }
 
 /**
-TODO: note - this used to work without !important. Worth checking later if that can be removed.
-Added !important because of Angular implementation, and how the extra attribute selector that's added for emulated style encapsulation increases the default button styles priority.
+ * # Note
+ * This used to work without !important. Worth checking later if that can be
+ * removed.
+ *
+ * Added !important because of Angular implementation, and how the extra
+ * attribute selector that's added for emulated style encapsulation increases
+ * the default button styles priority.
  */
 .sapphire-button-group--stretch > * {
   min-width: fit-content !important;
@@ -41,15 +58,15 @@ Added !important because of Angular implementation, and how the extra attribute
 }
 
 .sapphire-button-group--spacing-lg {
-  gap: var(--sapphire-semantic-size-spacing-50);
+  gap: var(--sapphire-semantic-size-spacing-lg);
 }
 
 .sapphire-button-group--spacing-sm {
-  gap: var(--sapphire-semantic-size-spacing-30);
+  gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
 .sapphire-button-group--spacing-xs {
-  gap: var(--sapphire-semantic-size-spacing-5);
+  gap: var(--sapphire-semantic-size-spacing-4xs);
 }
 
 .sapphire-button-group--align-center {
@@ -66,6 +83,15 @@ Added !important because of Angular implementation, and how the extra attribute
 
 .sapphire-button-group--vertical {
   flex-direction: column;
+  gap: var(--sapphire-semantic-size-spacing-sm);
+}
+
+.sapphire-button-group--vertical.sapphire-button-group--spacing-lg {
+  gap: var(--sapphire-semantic-size-spacing-md);
+}
+
+.sapphire-button-group--vertical.sapphire-button-group--spacing-sm {
+  gap: var(--sapphire-semantic-size-spacing-xs);
 }
 
 .sapphire-button-group--vertical.sapphire-button-group--align-center {

package/components/calendar/calendar.module.css

@@ -1,7 +1,6 @@
 .sapphire-calendar {
   font-family: var(--sapphire-semantic-font-name-default);
   display: inline-flex;
-  background-color: var(--sapphire-semantic-color-background-popover-default);
   box-sizing: border-box;
 }
 .sapphire-calendar__table-container {
@@ -32,7 +31,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-bottom: var(--sapphire-semantic-size-spacing-40);
+  padding-bottom: var(--sapphire-semantic-size-spacing-xs);
 }
 
 .sapphire-calendar__header--left .sapphire-calendar__header-next-month {
@@ -45,12 +44,29 @@
 
 .sapphire-calendar__header-title {
   margin: 0 auto;
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-primary);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
+  font-size: var(--sapphire-semantic-size-font-body-md);
+}
+
+/* Hacky css ahead.
+ * Special style for this which may contain a button and should be bolder */
+.sapphire-calendar__table-container .sapphire-calendar__header-title,
+.sapphire-calendar__table-container .sapphire-calendar__header-title button {
+  font-size: var(--sapphire-semantic-size-font-body-md) !important;
+  font-weight: var(--sapphire-semantic-font-weight-default-medium) !important;
+}
+
+.sapphire-calendar__table-container--md .sapphire-calendar__header-title,
+.sapphire-calendar__table-container--md
+  .sapphire-calendar__header-title
+  button {
+  font-size: var(--sapphire-semantic-size-font-body-sm) !important;
 }
 
 .sapphire-calendar__tables-row {
   display: flex;
-  gap: var(--sapphire-semantic-size-spacing-60);
+  gap: var(--sapphire-semantic-size-spacing-xl);
 }
 
 .sapphire-calendar__table {
@@ -72,17 +88,17 @@
 .sapphire-calendar__table--month-year
   .sapphire-calendar__table-body-row:not(:last-child)
   .sapphire-calendar__table-body-cell {
-  padding-bottom: var(--sapphire-semantic-size-spacing-20);
+  padding-bottom: var(--sapphire-semantic-size-spacing-2xs);
 }
 
 .sapphire-calendar__table--with-week-numbers th:first-child {
-  padding-right: var(--sapphire-semantic-size-spacing-20);
+  padding-right: var(--sapphire-semantic-size-spacing-2xs);
   border-right: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-separator-default);
+    var(--sapphire-semantic-color-border-secondary);
 }
 
 .sapphire-calendar__table--with-week-numbers th:first-child + td {
-  padding-left: var(--sapphire-semantic-size-spacing-20);
+  padding-left: var(--sapphire-semantic-size-spacing-2xs);
 }
 
 .sapphire-calendar__table-head-cell {
@@ -101,27 +117,28 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--sapphire-semantic-size-spacing-40);
+  gap: var(--sapphire-semantic-size-spacing-md);
   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);
+    var(--sapphire-semantic-color-border-secondary);
+  margin-left: var(--sapphire-semantic-size-spacing-md);
+  padding-top: var(--sapphire-semantic-size-spacing-2xs);
+  padding-left: var(--sapphire-semantic-size-spacing-xl);
+  padding-right: var(--sapphire-semantic-size-spacing-4xs);
 }
 
 .sapphire-calendar__day-of-week {
   text-decoration: none;
-  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);
+  color: var(--sapphire-semantic-color-foreground-secondary);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
+  font-size: var(--sapphire-semantic-size-font-body-sm);
 }
 
 .sapphire-calendar__week-number {
   display: block;
   text-decoration: none;
-  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);
+  color: var(--sapphire-semantic-color-foreground-secondary);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
+  font-size: var(--sapphire-semantic-size-font-body-sm);
   width: var(--sapphire-calendar-cell-size);
 }
 
@@ -143,10 +160,10 @@
 }
 
 .sapphire-calendar__button .sapphire-calendar__button-text {
-  font-size: var(--sapphire-semantic-size-font-text-md);
-  color: var(--sapphire-semantic-color-content-default-primary);
+  font-size: var(--sapphire-semantic-size-font-body-sm);
+  color: var(--sapphire-semantic-color-foreground-primary);
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
-  background-color: var(--sapphire-global-color-neutral-transparent);
+  background: var(--sapphire-semantic-color-background-action-tertiary-default);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -155,13 +172,13 @@
   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-semantic-size-spacing-50);
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
+  padding: 0 var(--sapphire-semantic-size-spacing-lg);
 }
 
 .sapphire-calendar__header-title {
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
-  font-size: var(--sapphire-semantic-size-font-text-lg);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
+  font-size: var(--sapphire-semantic-size-font-body-md);
 }
 
 /* Customizations for day buttons */
@@ -190,7 +207,7 @@
     var(--sapphire-semantic-color-focus-ring);
   outline-offset: var(--sapphire-semantic-size-focus-ring);
   z-index: 2;
-  background-color: var(--sapphire-global-color-neutral-transparent);
+  background: var(--sapphire-semantic-color-background-action-tertiary-default);
   transition-duration: var(--sapphire-semantic-time-fade-quick);
 }
 
@@ -202,9 +219,7 @@
     .is-active
   ).is-hover
   .sapphire-calendar__button-text {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-hover
-  );
+  background: var(--sapphire-semantic-color-background-action-tertiary-hover);
   transition-duration: var(--sapphire-semantic-time-fade-quick);
 }
 
@@ -214,9 +229,7 @@
   .sapphire-calendar__button-text,
 .sapphire-calendar__button:not(:disabled):not(.is-disabled):focus-visible:active
   .sapphire-calendar__button-text {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-active
-  );
+  background: var(--sapphire-semantic-color-background-action-tertiary-active);
   transition-duration: var(--sapphire-semantic-time-fade-quick);
 }
 
@@ -226,15 +239,15 @@
 
 .sapphire-calendar__button.sapphire-calendar__button--range-selection
   .sapphire-calendar__button-text {
-  color: var(--sapphire-semantic-color-content-selection-selected-default);
-  background-color: var(
-    --sapphire-semantic-color-background-selection-selected-default
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-select-secondary-default
   );
+  background: transparent;
 }
 
 .sapphire-calendar__button.sapphire-calendar__button--range-selection {
-  background-color: var(
-    --sapphire-semantic-color-background-selection-selected-default
+  background: var(
+    --sapphire-semantic-color-background-action-select-secondary-default
   );
 }
 
@@ -246,8 +259,8 @@
     :disabled
   ):not(.is-disabled):not(:active):not(.is-active).is-hover
   .sapphire-calendar__button-text {
-  background-color: var(
-    --sapphire-semantic-color-background-selection-selected-hover
+  background: var(
+    --sapphire-semantic-color-background-action-select-secondary-hover
   );
 }
 
@@ -263,19 +276,8 @@
     :disabled
   ):not(.is-disabled):focus-visible:active
   .sapphire-calendar__button-text {
-  background-color: var(
-    --sapphire-semantic-color-background-selection-selected-active
-  );
-}
-
-.sapphire-calendar__button.sapphire-calendar__button--range-selection.is-focus
-  .sapphire-calendar__button-text,
-.sapphire-calendar__button.sapphire-calendar__button--range-selection:not(
-    .js-focus
-  ):focus-visible
-  .sapphire-calendar__button-text {
-  background-color: var(
-    --sapphire-semantic-color-background-selection-selected-default
+  background: var(
+    --sapphire-semantic-color-background-action-select-secondary-active
   );
 }
 
@@ -287,11 +289,9 @@
   .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-semantic-color-background-action-primary-default
-  );
-  color: var(--sapphire-semantic-color-content-action-primary-default);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  background: var(--sapphire-semantic-color-background-action-select-default);
+  color: var(--sapphire-semantic-color-foreground-action-on-select-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
 }
 
 .sapphire-calendar__button:focus {
@@ -324,9 +324,7 @@
     :disabled
   ):not(.is-disabled):not(:active):not(.is-active).is-hover
   .sapphire-calendar__button-text {
-  background-color: var(
-    --sapphire-semantic-color-background-action-primary-hover
-  );
+  background: var(--sapphire-semantic-color-background-action-select-hover);
 }
 
 .sapphire-calendar__button.sapphire-calendar__button--selected:not(
@@ -365,9 +363,7 @@
     :disabled
   ):not(.is-disabled):focus-visible:active
   .sapphire-calendar__button-text {
-  background-color: var(
-    --sapphire-semantic-color-background-action-primary-active
-  );
+  background: var(--sapphire-semantic-color-background-action-select-active);
 }
 
 .sapphire-calendar__button.sapphire-calendar__button--selected:not(
@@ -390,9 +386,7 @@
     .js-focus
   ):focus-visible
   .sapphire-calendar__button-text {
-  background-color: var(
-    --sapphire-semantic-color-background-action-primary-default
-  );
+  background: var(--sapphire-semantic-color-background-action-select-default);
 }
 
 .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start,
@@ -414,9 +408,7 @@
   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-semantic-color-background-action-primary-default
-  );
+  background: var(--sapphire-semantic-color-background-action-select-default);
   bottom: var(--sapphire-global-size-generic-20);
 }
 
@@ -430,64 +422,11 @@
   ).sapphire-calendar__button--current::after,
 .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-semantic-color-content-action-primary-default
+  background: var(
+    --sapphire-semantic-color-foreground-action-on-select-default
   );
 }
 
 .sapphire-calendar__button.sapphire-calendar__button--outside-month {
   visibility: hidden;
 }
-
-/* Wrapper element for the grid(s) that animate */
-.sapphire-calendar__grid-page-animation {
-  display: flex;
-  position: relative;
-  overflow: hidden;
-}
-.sapphire-calendar__grid-page-animation:not(:has(.enter, .exit)) {
-  /* Minor improvement for browsers that support :has selector, to let focus ring on calendar cells
-  be visible, while not animating */
-  overflow: initial;
-}
-
-.sapphire-calendar__grid-page-animation .exit-active {
-  /* The calendar page that's transitioning out should not accept any pointer event. Otherwise
-  there can be edge cases where quickly hovering over the grid area while page is being changed
-  can move focus to the page that's about to be removed from dom, which causes focus to get lost */
-  pointer-events: none;
-}
-
-/* Next page animation, applied on the wrapper, when next grid(s) are animating in */
-.sapphire-calendar__grid-page-animation--next .enter {
-  transform: translateX(100%);
-}
-.sapphire-calendar__grid-page-animation--next .enter-active {
-  transform: translateX(0%);
-  transition: transform var(--sapphire-semantic-time-motion-slow) ease-in-out;
-}
-.sapphire-calendar__grid-page-animation--next .exit {
-  transform: translateX(0%);
-  position: absolute;
-}
-.sapphire-calendar__grid-page-animation--next .exit-active {
-  transform: translateX(-100%);
-  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 */
-.sapphire-calendar__grid-page-animation--prev .enter {
-  transform: translateX(-100%);
-}
-.sapphire-calendar__grid-page-animation--prev .enter-active {
-  transform: translateX(0%);
-  transition: transform var(--sapphire-semantic-time-motion-slow) ease-in-out;
-}
-.sapphire-calendar__grid-page-animation--prev .exit {
-  transform: translateX(0%);
-  position: absolute;
-}
-.sapphire-calendar__grid-page-animation--prev .exit-active {
-  transform: translateX(100%);
-  transition: transform var(--sapphire-semantic-time-motion-slow) ease-in-out;
-}

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

@@ -35,13 +35,6 @@ declare const styles: {
   readonly "sapphire-calendar__button--range-end": string;
   readonly "sapphire-calendar__button--current": string;
   readonly "sapphire-calendar__button--outside-month": string;
-  readonly "sapphire-calendar__grid-page-animation": string;
-  readonly "enter": string;
-  readonly "exit": string;
-  readonly "exit-active": string;
-  readonly "sapphire-calendar__grid-page-animation--next": string;
-  readonly "enter-active": string;
-  readonly "sapphire-calendar__grid-page-animation--prev": string;
 };
 export = styles;