@danske/sapphire-css 42.1.0 → 43.1.0

package/components/breadcrumbs/breadcrumbs.module.css

@@ -0,0 +1,50 @@
+.sapphire-breadcrumbs {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+.sapphire-breadcrumbs .sapphire-breadcrumbs__item {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.sapphire-breadcrumbs__item * {
+  max-width: var(--sapphire-global-size-generic-480);
+}
+
+.sapphire-breadcrumbs .sapphire-breadcrumbs__item:last-child {
+  padding: 0 var(--sapphire-semantic-size-spacing-lg);
+}
+
+.sapphire-breadcrumbs.sapphire-breadcrumbs--sm
+  .sapphire-breadcrumbs__item:last-child {
+  padding: 0
+    calc(
+      var(--sapphire-semantic-size-spacing-xs) +
+        var(--sapphire-semantic-size-spacing-2xs)
+    );
+}
+
+.sapphire-breadcrumbs.sapphire-breadcrumbs--lg
+  .sapphire-breadcrumbs__item:last-child {
+  padding: 0
+    calc(
+      var(--sapphire-semantic-size-spacing-xs) +
+        var(--sapphire-semantic-size-spacing-md)
+    );
+}
+
+/**
+ * Breadcrumb separator
+ */
+.sapphire-breadcrumbs__separator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sapphire-semantic-color-foreground-primary);
+  padding: 0 var(--sapphire-semantic-size-spacing-xs);
+}

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

@@ -0,0 +1,9 @@
+declare const styles: {
+  readonly "sapphire-breadcrumbs": string;
+  readonly "sapphire-breadcrumbs__item": string;
+  readonly "sapphire-breadcrumbs--sm": string;
+  readonly "sapphire-breadcrumbs--lg": string;
+  readonly "sapphire-breadcrumbs__separator": string;
+};
+export = styles;
+

package/components/checkbox/checkbox.module.css

@@ -287,7 +287,7 @@
   cursor: not-allowed;
 }
 
-.sapphire-checkbox.is-disabled .sapphire-checkbox__box,
-.sapphire-checkbox.is-disabled .sapphire-checkbox__label {
+.sapphire-checkbox.is-disabled,
+.sapphire-checkbox:has(:disabled) {
   opacity: var(--sapphire-semantic-opacity-disabled);
 }

package/components/dateField/dateField.module.css

@@ -107,6 +107,14 @@
   font-size: var(--sapphire-semantic-size-font-control-md);
 }
 
+/**
+ * Disabled
+ */
+.sapphire-date-field.is-disabled {
+  cursor: not-allowed;
+  opacity: var(--sapphire-semantic-opacity-disabled);
+}
+
 /**
  * Editable segments
  */

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

@@ -7,8 +7,8 @@ declare const styles: {
   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 "sapphire-date-field__segment": string;
   readonly "is-focus": string;
   readonly "sapphire-date-field__segment--filled": string;
   readonly "sapphire-date-field__segment--separator": string;

package/components/dialog/dialog.module.css

@@ -19,8 +19,8 @@
 }
 
 .sapphire-dialog {
-  border-radius: var(--sapphire-semantic-size-radius-lg);
-  background: var(--sapphire-semantic-color-background-surface);
+  border-radius: var(--sapphire-semantic-size-radius-2xl);
+  background: var(--sapphire-semantic-color-background-popover);
   font-family: var(--sapphire-semantic-font-name-default);
   color: var(--sapphire-semantic-color-foreground-primary);
   box-sizing: border-box;

package/components/dropzone/dropzone.module.css

@@ -11,10 +11,11 @@
   height: var(--sapphire-global-size-generic-480);
   min-height: var(--sapphire-global-size-generic-480);
   padding: var(--sapphire-semantic-size-spacing-2xl);
-  border-radius: var(--sapphire-semantic-size-radius-xl);
+  border-radius: var(--sapphire-semantic-size-radius-2xl);
   transition-property: opacity, background-color, color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: var(--sapphire-semantic-transitions-fade);
+  overflow: hidden;
   /* 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
      * occurs for bold fonts on dark backgrounds but depending on the font, it
@@ -28,7 +29,7 @@
      */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  --mask-data: url('data:image/svg+xml,%3csvg stroke="black" width="100%25" height="100%25" xmlns="http://www.w3.org/2000/svg"%3e%3crect width="100%25" height="100%25" fill="none" rx="12" ry="12" stroke-width="2" stroke-dasharray="6 6.01126518182488" stroke-dashoffset="4" stroke-linecap="butt"/%3e%3c/svg%3e');
+  --mask-data: url('data:image/svg+xml,%3csvg stroke="black" width="70%25" height="70%25" xmlns="http://www.w3.org/2000/svg"%3e%3crect width="100%25" height="100%25" fill="none" rx="12" ry="12" stroke-width="2" stroke-dasharray="6 6.01126518182488" stroke-dashoffset="4" stroke-linecap="butt"/%3e%3c/svg%3e');
 }
 
 /* The before is needed because the SVG image cannot take CSS var, so the background of the ::before is set to the correct color instead */
@@ -42,8 +43,8 @@
   /* Dashed borders cannot be customised, so we use a trick with the SVG image to customise it */
   mask: var(--mask-data);
   -webkit-mask: var(--mask-data);
-  background: var(--sapphire-semantic-color-border-primary);
-  border-radius: var(--sapphire-semantic-size-radius-xl);
+  background: var(--sapphire-semantic-color-border-field-default);
+  border-radius: var(--sapphire-semantic-size-radius-2xl);
   transition-property: opacity, background-color, color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: var(--sapphire-semantic-transitions-fade);
@@ -59,7 +60,7 @@
 .sapphire-dropzone:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background: var(--sapphire-semantic-color-background-action-tertiary-hover);
+  background: none;
 }
 
 .sapphire-dropzone:not(:disabled):not(.is-disabled).sapphire-dropzone:active,
@@ -69,7 +70,20 @@
 .sapphire-dropzone:not(:disabled):not(
     .is-disabled
   ).sapphire-dropzone.is-active {
-  background: var(--sapphire-semantic-color-background-action-tertiary-active);
+  background: none;
+}
+
+.sapphire-dropzone:not(:active):not(.is-disabled):not(
+    .is-active
+  ).is-hover::before,
+.sapphire-dropzone:not(:active):not(.is-disabled):not(.is-active):not(
+    .js-hover
+  ):hover::before {
+  background: var(--sapphire-semantic-color-background-action-primary-hover);
+}
+
+.sapphire-dropzone.is-active::before {
+  background: var(--sapphire-semantic-color-background-action-primary-active);
 }
 
 .sapphire-dropzone:focus {
@@ -95,13 +109,11 @@
 }
 
 .sapphire-dropzone--dropping {
-  background: var(
-    --sapphire-semantic-color-background-action-select-secondary-default
-  );
+  background: var(--sapphire-semantic-color-background-accent-subtle);
 }
 
 .sapphire-dropzone.sapphire-dropzone--dropping::before {
-  background: var(--sapphire-semantic-color-border-accent);
+  background: var(--sapphire-semantic-color-foreground-on-accent-subtle);
 }
 
 .sapphire-dropzone__content {
@@ -116,10 +128,9 @@
   margin-bottom: var(--sapphire-semantic-size-spacing-control-vertical-lg);
 }
 
-.sapphire-dropzone--dropping .sapphire-dropzone__icon {
-  color: var(
-    --sapphire-semantic-color-foreground-action-on-select-secondary-default
-  );
+.sapphire-dropzone--dropping .sapphire-dropzone__icon,
+.sapphire-dropzone--dropping .sapphire-dropzone__content * {
+  color: var(--sapphire-semantic-color-foreground-on-accent-subtle);
 }
 
 .sapphire-dropzone__heading {

package/components/modalLayout/modalLayout.module.css

@@ -14,9 +14,12 @@
 .sapphire-modal-layout__header {
   display: flex;
   justify-content: space-between;
-  padding: var(--sapphire-semantic-size-spacing-lg)
-    var(--sapphire-semantic-size-spacing-container-horizontal-md);
+  padding: var(--sapphire-semantic-size-spacing-xl)
+    var(--sapphire-semantic-size-spacing-xl)
+    var(--sapphire-semantic-size-spacing-xl)
+    var(--sapphire-semantic-size-spacing-2xl);
   gap: var(--sapphire-semantic-size-spacing-sm);
+  min-height: var(--sapphire-semantic-size-height-control-md);
 }
 
 .sapphire-modal-layout__body {
@@ -41,10 +44,11 @@
     var(--sapphire-semantic-size-spacing-container-horizontal-md);
 }
 
-/** Container for heading and subheading **/
+/**
+ * Container for heading and subheading
+ **/
 .sapphire-modal-layout__heading-container {
   flex: 1;
-  padding: var(--sapphire-semantic-size-spacing-3xs) 0;
   display: flex;
   flex-direction: column;
   justify-content: center;

package/components/panel/panel.module.css

@@ -9,7 +9,7 @@
     var(--sapphire-semantic-transitions-standard);
   transform: translateX(100%);
   width: var(--sapphire-semantic-size-width-panel-lg);
-  background: var(--sapphire-semantic-color-background-surface);
+  background: var(--sapphire-semantic-color-background-popover);
 }
 
 .sapphire-panel--visible {

package/components/radio/radio.module.css

@@ -159,11 +159,7 @@
   cursor: not-allowed;
 }
 
-.sapphire-radio:not(.sapphire-radio--no-disabled)
-  .sapphire-radio__input:disabled
-  ~ .sapphire-radio__box,
-.sapphire-radio:not(.sapphire-radio--no-disabled)
-  .sapphire-radio__input:disabled
-  ~ .sapphire-radio__label {
+.sapphire-radio .sapphire-radio__input:disabled ~ .sapphire-radio__box,
+.sapphire-radio .sapphire-radio__input:disabled ~ .sapphire-radio__label {
   opacity: var(--sapphire-semantic-opacity-disabled);
 }

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

@@ -10,7 +10,6 @@ declare const styles: {
   readonly "js-hover": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
-  readonly "sapphire-radio--no-disabled": string;
 };
 export = styles;
 

package/components/select/select.module.css

@@ -160,4 +160,5 @@
 
 .sapphire-select.is-disabled .sapphire-select__button {
   cursor: not-allowed;
+  opacity: var(--sapphire-semantic-opacity-disabled);
 }

package/components/table/table.module.css

@@ -420,15 +420,28 @@ th.sapphire-table__selectionCell:first-child {
     --sapphire-semantic-color-background-action-highlight
   );
 }
-.sapphire-table__row--highlighted::after {
+
+/* TODO remove tbody in v6 */
+.sapphire-table :has(> .sapphire-table__row--highlighted):not(tbody)::before {
   content: '';
-  position: absolute;
-  z-index: 2;
-  left: 0;
+  position: sticky;
+  float: inline-start;
   height: 100%;
   width: var(--sapphire-semantic-size-border-md);
+  /* counter the shift for the checkbox */
+  margin-left: calc(-1 * var(--sapphire-semantic-size-border-md));
+  inset-inline-start: 0;
   background: var(--sapphire-semantic-color-border-accent);
   pointer-events: none;
+  z-index: 2;
+}
+
+/* TODO remove in v6 */
+/* Targets non-virtualised tables */
+tbody .sapphire-table__row--highlighted .sapphire-table__selectionCell,
+tbody .sapphire-table__row--highlighted > .sapphire-table__cell:first-child {
+  box-shadow: inset var(--sapphire-semantic-size-border-md) 0 0 0
+    var(--sapphire-semantic-color-border-accent);
 }
 
 .sapphire-table__tfoot {
@@ -463,7 +476,6 @@ th.sapphire-table__selectionCell:first-child {
 .sapphire-table__footer {
   position: relative;
   z-index: 2; /* Setting to two because body rows are positioned relative */
-  margin-top: var(--sapphire-semantic-size-spacing-2xs);
 }
 
 .sapphire-table__footer--sticky {

package/components/textField/textField.module.css

@@ -194,6 +194,14 @@
     var(--sapphire-semantic-color-border-negative-default);
 }
 
+/**
+ * Disabled
+ */
+.sapphire-text-field:has([disabled]) {
+  cursor: not-allowed;
+  opacity: var(--sapphire-semantic-opacity-disabled);
+}
+
 /**
  * Hover
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "42.1.0",
+  "version": "43.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.2.0"
+    "@danske/sapphire-design-tokens": "^42.2.1"
   },
-  "gitHead": "1eefb683b16687ab3fc99c15fffb03a3eca522c5"
+  "gitHead": "fcf8d5c8a3962dcc624ffd02cc607673cb91bd96"
 }