@danske/sapphire-css 43.0.0 → 43.1.0

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/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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "43.0.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,
@@ -69,5 +69,5 @@
   "dependencies": {
     "@danske/sapphire-design-tokens": "^42.2.1"
   },
-  "gitHead": "5447ed85a23a82d6d7339a1617296a648256ea3e"
+  "gitHead": "fcf8d5c8a3962dcc624ffd02cc607673cb91bd96"
 }