@danske/sapphire-css 42.0.0 → 42.1.0

package/components/button/button.module.css

@@ -170,7 +170,7 @@ a.sapphire-button {
   color: var(--sapphire-semantic-color-foreground-action-on-secondary-active);
 }
 
-/* ## Tertiary (undocumented) */
+/* ## Tertiary */
 .sapphire-button--tertiary {
   background: var(--sapphire-semantic-color-background-action-tertiary-default);
   color: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);
@@ -215,12 +215,16 @@ a.sapphire-button {
 .sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
+  text-decoration: underline;
+  text-decoration-thickness: var(--sapphire-semantic-size-border-sm);
   color: var(--sapphire-semantic-color-foreground-action-link-hover);
 }
 
 .sapphire-button--text:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--text:not(:disabled):not(.is-disabled):active,
 .sapphire-button--text:not(:disabled):not(.is-disabled):focus-visible:active {
+  text-decoration: underline;
+  text-decoration-thickness: var(--sapphire-semantic-size-border-sm);
   color: var(--sapphire-semantic-color-foreground-action-link-active);
 }
 

package/components/calendar/calendar.module.css

@@ -92,17 +92,17 @@
 }
 
 .sapphire-calendar__table--with-week-numbers th:first-child {
-  padding-right: var(--sapphire-semantic-size-spacing-2xs);
+  padding-right: var(--sapphire-semantic-size-spacing-xs);
   border-right: var(--sapphire-semantic-size-border-sm) solid
     var(--sapphire-semantic-color-border-secondary);
 }
 
 .sapphire-calendar__table--with-week-numbers th:first-child + td {
-  padding-left: var(--sapphire-semantic-size-spacing-2xs);
+  padding-left: var(--sapphire-semantic-size-spacing-xs);
 }
 
 .sapphire-calendar__table-head-cell {
-  height: var(--sapphire-semantic-size-height-control-sm);
+  height: var(--sapphire-semantic-size-height-control-md);
   text-align: center;
   padding: 0;
 }
@@ -117,12 +117,12 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--sapphire-semantic-size-spacing-md);
+  gap: var(--sapphire-semantic-size-spacing-sm);
   border-left: var(--sapphire-semantic-size-border-sm) solid
     var(--sapphire-semantic-color-border-secondary);
-  margin-left: var(--sapphire-semantic-size-spacing-md);
+  margin-left: var(--sapphire-semantic-size-spacing-sm);
   padding-top: var(--sapphire-semantic-size-spacing-2xs);
-  padding-left: var(--sapphire-semantic-size-spacing-xl);
+  padding-left: var(--sapphire-semantic-size-spacing-lg);
   padding-right: var(--sapphire-semantic-size-spacing-4xs);
 }
 
@@ -160,7 +160,7 @@
 }
 
 .sapphire-calendar__button .sapphire-calendar__button-text {
-  font-size: var(--sapphire-semantic-size-font-body-sm);
+  font-size: var(--sapphire-semantic-size-font-body-md);
   color: var(--sapphire-semantic-color-foreground-primary);
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
   background: var(--sapphire-semantic-color-background-action-tertiary-default);
@@ -176,6 +176,12 @@
   padding: 0 var(--sapphire-semantic-size-spacing-lg);
 }
 
+.sapphire-calendar__table-container--md
+  .sapphire-calendar__button
+  .sapphire-calendar__button-text {
+  font-size: var(--sapphire-semantic-size-font-body-sm);
+}
+
 .sapphire-calendar__header-title {
   font-weight: var(--sapphire-semantic-font-weight-default-medium);
   font-size: var(--sapphire-semantic-size-font-body-md);

package/components/dateField/dateField.module.css

@@ -33,8 +33,8 @@
     var(--sapphire-dateField-icon-size);
 
   height: var(--sapphire-semantic-size-height-control-lg);
-  border-radius: var(--sapphire-semantic-size-radius-sm);
-  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  border-radius: var(--sapphire-semantic-size-radius-md);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
   border: var(--sapphire-semantic-size-border-sm) solid
     var(--sapphire-semantic-color-border-field-default);
   background: var(--sapphire-semantic-color-background-field);
@@ -46,6 +46,10 @@
     var(--sapphire-dateField-icon-size);
 }
 
+.sapphire-date-field--no-calendar {
+  padding-left: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+}
+
 .sapphire-date-field--no-clear-button {
   grid-template-columns:
     var(--sapphire-dateField-icon-size)
@@ -56,14 +60,6 @@
   grid-template-columns: 1fr;
 }
 
-.sapphire-date-field--md {
-  --sapphire-dateField-icon-size: var(--sapphire-semantic-size-icon-sm);
-
-  height: var(--sapphire-semantic-size-height-control-md);
-  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
-  gap: var(--sapphire-semantic-size-spacing-xs);
-}
-
 .sapphire-date-field--range {
   width: var(--sapphire-global-size-generic-960);
 }
@@ -74,10 +70,6 @@
   align-items: center;
 }
 
-.sapphire-date-field--md .sapphire-date-field__input-group {
-  gap: var(--sapphire-semantic-size-spacing-4xs);
-}
-
 .sapphire-date-field__input {
   display: flex;
   align-items: center;
@@ -95,6 +87,22 @@
   content: '—';
 }
 
+/**
+ * Medium size
+ */
+.sapphire-date-field--md {
+  --sapphire-dateField-icon-size: var(--sapphire-semantic-size-icon-sm);
+
+  height: var(--sapphire-semantic-size-height-control-md);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
+  gap: var(--sapphire-semantic-size-spacing-xs);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
+}
+
+.sapphire-date-field--md .sapphire-date-field__input-group {
+  gap: var(--sapphire-semantic-size-spacing-4xs);
+}
+
 .sapphire-date-field--md .sapphire-date-field__input {
   font-size: var(--sapphire-semantic-size-font-control-md);
 }

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

@@ -2,11 +2,11 @@ declare const styles: {
   readonly "sapphire-date-field": string;
   readonly "sapphire-date-field--no-calendar": string;
   readonly "sapphire-date-field--no-clear-button": string;
-  readonly "sapphire-date-field--md": string;
   readonly "sapphire-date-field--range": string;
   readonly "sapphire-date-field__input-group": string;
   readonly "sapphire-date-field__input": string;
   readonly "sapphire-date-field__range-separator": string;
+  readonly "sapphire-date-field--md": string;
   readonly "sapphire-date-field__segment": string;
   readonly "is-disabled": string;
   readonly "is-focus": string;

package/components/label/label.module.css

@@ -1,5 +1,5 @@
 .sapphire-label {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   min-height: var(--sapphire-semantic-size-height-control-xs);
   line-height: var(--sapphire-semantic-size-line-height-md);

package/components/link/link.module.css

@@ -19,10 +19,11 @@
   cursor: pointer;
   border-radius: var(--sapphire-semantic-size-radius-xs);
 
-  text-decoration-skip-ink: none;
-
   outline: none;
   color: var(--sapphire-semantic-color-foreground-action-link-default);
+
+  text-decoration: underline;
+  text-decoration-thickness: var(--sapphire-semantic-size-border-sm);
 }
 
 /* Disabled state for all variants */

package/components/list/list.module.css

@@ -156,10 +156,10 @@ instead of being applied on the list item itself  */
 /*
  * Hover
  */
-.sapphire-list__item--interactive.is-hover:not(.is-active),
+.sapphire-list__item--interactive.is-hover:not(.is-active):not(:has(.is-hover)),
 .sapphire-list__item--interactive:not(.js-hover):not(
     [aria-disabled='true']
-  ):not(:disabled):not(:active):hover {
+  ):not(:disabled):not(:active):not(:has(:hover)):hover {
   background: var(--sapphire-semantic-color-background-action-tertiary-hover);
 }
 
@@ -182,13 +182,12 @@ instead of being applied on the list item itself  */
 
 /* Active */
 
-.sapphire-list__item--interactive:not(.is-disabled).is-active,
+.sapphire-list__item--interactive:not(.is-disabled).is-active:not(
+    :has(.is-active)
+  ),
 .sapphire-list__item--interactive:not([aria-disabled='true']):not(
     :disabled
-  ):active,
-.sapphire-list__item--interactive:not([aria-disabled='true']):not(
-    :disabled
-  ):focus-visible:active {
+  ):not(:has(:active)):active {
   background-color: var(
     --sapphire-semantic-color-background-action-secondary-hover
   );

package/components/modalLayout/modalLayout.module.css

@@ -81,3 +81,36 @@
   border-top: var(--sapphire-semantic-size-border-sm) solid
     var(--sapphire-semantic-color-border-secondary);
 }
+
+.sapphire-modal-layout__section {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.sapphire-modal-layout__section-title {
+  margin-left: calc(
+    var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1
+  );
+  width: calc(
+    100% + (var(--sapphire-semantic-size-spacing-container-horizontal-md) * 2)
+  );
+  padding: 0 var(--sapphire-semantic-size-spacing-container-horizontal-md);
+  min-height: var(--sapphire-global-size-generic-100);
+  background-color: var(--sapphire-semantic-color-background-surface);
+  display: flex;
+  align-items: center;
+  position: sticky;
+  top: 0;
+}
+
+/*
+ * Fix for section semi-transparent background not looking good when scrolled.
+ */
+.sapphire-modal-layout__section-title::before {
+  content: '';
+  background: var(--sapphire-semantic-color-background-neutral-subtle);
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+}

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

@@ -10,6 +10,8 @@ declare const styles: {
   readonly "sapphire-modal-layout__subheading": string;
   readonly "sapphire-modal-layout__body--scrolled": string;
   readonly "sapphire-modal-layout__body--scrollable": string;
+  readonly "sapphire-modal-layout__section": string;
+  readonly "sapphire-modal-layout__section-title": string;
 };
 export = styles;
 

package/components/progressIndicator/progressIndicator.module.css

@@ -3,7 +3,7 @@
   height: 3px;
   width: 100%;
   overflow: hidden;
-  background: var(--sapphire-semantic-color-background-accent-subtle);
+  background: var(--sapphire-semantic-color-background-progress-track);
   position: relative;
 }
 
@@ -14,7 +14,7 @@
 /* Progress bar Progress styles */
 .sapphire-progress--indicator {
   height: 100%;
-  background: var(--sapphire-semantic-color-background-accent);
+  background: var(--sapphire-semantic-color-background-progress-fill);
   transition: width var(--sapphire-semantic-time-motion-default)
     var(--sapphire-semantic-transitions-dynamic);
 }

package/components/select/select.module.css

@@ -24,7 +24,8 @@
   height: var(--sapphire-semantic-size-height-control-lg);
   box-sizing: border-box;
   cursor: pointer;
-  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md) 0
+    var(--sapphire-semantic-size-spacing-control-horizontal-lg);
   border: none;
   background: var(--sapphire-semantic-color-background-field);
   width: 100%;
@@ -34,11 +35,12 @@
   font-family: inherit;
   box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-border-sm)
     var(--sapphire-semantic-color-border-field-default);
-  border-radius: var(--sapphire-semantic-size-radius-sm);
+  border-radius: var(--sapphire-semantic-size-radius-md);
   gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
 .sapphire-select--md .sapphire-select__button {
+  border-radius: var(--sapphire-semantic-size-radius-sm);
   height: var(--sapphire-semantic-size-height-control-md);
   padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
   gap: var(--sapphire-semantic-size-spacing-xs);
@@ -88,6 +90,11 @@
   color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
+.sapphire-select:not(.sapphire-select--md)
+  .sapphire-select__button:has(.sapphire-select__prefix) {
+  padding-left: var(--sapphire-semantic-size-spacing-control-horizontal-md);
+}
+
 .sapphire-select--md .sapphire-select__prefix {
   font-size: var(--sapphire-semantic-size-font-control-md);
 }

package/components/slider/slider.module.css

@@ -0,0 +1,64 @@
+.sapphire-slider {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sapphire-semantic-size-spacing-xs);
+  justify-content: center;
+  width: fit-content;
+}
+
+.sapphire-slider__track {
+  position: relative;
+  width: var(--sapphire-semantic-size-width-field);
+  height: var(--sapphire-semantic-size-height-control-2xs);
+  touch-action: none;
+}
+
+.sapphire-slider__track-remaining {
+  content: '';
+  display: block;
+  position: absolute;
+  background: var(--sapphire-semantic-color-background-progress-track);
+  height: var(--sapphire-global-size-generic-10);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
+  width: var(--sapphire-semantic-size-width-field);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.sapphire-slider__track-fill {
+  position: absolute;
+  content: '';
+  display: block;
+  background: var(--sapphire-semantic-color-background-progress-fill);
+  height: var(--sapphire-global-size-generic-10);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
+  width: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.sapphire-slider__thumb {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  cursor: grab;
+  width: var(--sapphire-semantic-size-height-control-2xs);
+  height: var(--sapphire-semantic-size-height-control-2xs);
+  border-radius: var(--sapphire-semantic-size-radius-xl);
+  background: var(--sapphire-semantic-color-background-progress-fill);
+  forced-color-adjust: none;
+}
+
+/* focused */
+.sapphire-slider__thumb.is-focus {
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
+  outline-offset: var(--sapphire-semantic-size-focus-ring);
+}
+
+/* disabled */
+.sapphire-slider__track[data-disabled='true'] {
+  opacity: var(--sapphire-semantic-opacity-disabled);
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,10 @@
+declare const styles: {
+  readonly "sapphire-slider": string;
+  readonly "sapphire-slider__track": string;
+  readonly "sapphire-slider__track-remaining": string;
+  readonly "sapphire-slider__track-fill": string;
+  readonly "sapphire-slider__thumb": string;
+  readonly "is-focus": string;
+};
+export = styles;
+

package/components/text/text.module.css

@@ -61,7 +61,7 @@
   margin-top: 0px;
   margin-bottom: 0px;
   line-height: var(--sapphire-global-size-line-height-sm);
-  letter-spacing: -1%;
+  letter-spacing: -0.01em;
 }
 
 .sapphire-text--heading-2xl {

package/components/textField/textField.module.css

@@ -6,7 +6,7 @@
   overflow-x: hidden;
   display: flex;
   align-items: center;
-  border-radius: var(--sapphire-semantic-size-radius-sm);
+  border-radius: var(--sapphire-semantic-size-radius-md);
   cursor: text;
   color: var(--sapphire-semantic-color-foreground-primary);
   background: var(--sapphire-semantic-color-background-field);
@@ -29,6 +29,7 @@
 }
 
 .sapphire-text-field--md {
+  border-radius: var(--sapphire-semantic-size-radius-sm);
   height: var(--sapphire-semantic-size-height-control-md);
   font-size: var(--sapphire-semantic-size-font-control-md);
 }
@@ -95,7 +96,8 @@
   color: var(--sapphire-semantic-color-foreground-secondary);
   flex-shrink: 0;
   z-index: 1;
-  margin-left: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  /* the margin below is "md" on purpose - only when there's a prefix/postfix */
+  margin-left: var(--sapphire-semantic-size-spacing-control-horizontal-md);
 }
 
 .sapphire-text-field--md .sapphire-text-field__prefix {
@@ -115,7 +117,8 @@
   color: var(--sapphire-semantic-color-foreground-secondary);
   flex-shrink: 0;
   z-index: 1;
-  margin-right: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  /* the margin below is "md" on purpose - only when there's a prefix/postfix */
+  margin-right: var(--sapphire-semantic-size-spacing-control-horizontal-md);
 }
 
 .sapphire-text-field--md .sapphire-text-field__postfix {
@@ -224,7 +227,7 @@
   * or focusing on the list of browser autofilling suggestions.
   */
   box-shadow: 0 0 0 var(--sapphire-semantic-size-height-control-lg) inset
-    var(--sapphire-semantic-color-background-surface) !important;
+    var(--sapphire-semantic-color-background-field) !important;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "42.0.0",
+  "version": "42.1.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -67,7 +67,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^42.1.1"
+    "@danske/sapphire-design-tokens": "^42.2.0"
   },
-  "gitHead": "afb5a25463f39012c3599e6242c8d308786d11e1"
+  "gitHead": "1eefb683b16687ab3fc99c15fffb03a3eca522c5"
 }