@navikt/ds-css 8.12.0 → 8.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "8.12.0",
+  "version": "8.13.0",
   "description": "CSS for Nav Designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -32,7 +32,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^8.12.0",
+    "@navikt/ds-tokens": "^8.13.0",
     "browserslist": "^4.25.0",
     "esbuild": "^0.28.0",
     "fast-glob": "3.3.3",

package/src/data-grid-preview.css

@@ -60,8 +60,16 @@
   }
 
   &[data-zebra-stripes="true"] {
-    & .aksel-data-table__tbody :where(.aksel-data-table__tr:nth-child(odd)) {
-      background-color: var(--ax-bg-neutral-softA);
+    & .aksel-data-table__tbody :where(.aksel-data-table__tr:nth-child(even)) {
+      --__axc-data-table-zebra-color: var(--ax-bg-neutral-soft);
+
+      background-color: var(--__axc-data-table-zebra-color);
+
+      &[data-selected="true"] {
+        --__axc-data-table-zebra-color: var(--ax-bg-soft);
+
+        background-color: var(--__axc-data-table-zebra-color);
+      }
     }
   }
 }
@@ -107,7 +115,9 @@
 
 .aksel-data-table__tr {
   &[data-selected="true"] {
-    background-color: var(--ax-bg-softA);
+    --__axc-data-table-zebra-color: var(--ax-bg-soft);
+
+    background-color: var(--__axc-data-table-zebra-color);
   }
 }
 
@@ -159,14 +169,19 @@
 
 .aksel-data-table__cell {
   /* border doesn't work on sticky thead when we have collapsed borders, so using box-shadow instead */
-  box-shadow: inset 1px 1px 0 0 var(--ax-border-neutral-subtle);
+  box-shadow: inset 0 1px 0 0 var(--ax-border-neutral-subtle);
   text-align: start;
   vertical-align: middle;
   scroll-margin: var(--ax-space-0);
   padding: 0;
   font-size: var(--__axc-data-table-text-size);
 
-  &:not(.aksel-data-table__column-header) {
+  .aksel-data-table__thead &,
+  .aksel-data-table[data-column-dividers="true"] & {
+    box-shadow: inset 1px 1px 0 0 var(--ax-border-neutral-subtle);
+  }
+
+  &:not(.aksel-data-table__column-header, [data-sticky]) {
     overflow: hidden; /* Needed for cases where left margin is added to cell-content (nested rows) */
   }
 
@@ -198,6 +213,13 @@
     position: sticky;
     z-index: 1;
 
+    --__axc-data-table-shadow-color: var(--ax-border-neutral-subtleA);
+
+    /* Avoids "light" color shadows in dark mode */
+    .dark & {
+      --__axc-data-table-shadow-color: #0f141b;
+    }
+
     &::after {
       content: "";
       position: absolute;
@@ -218,7 +240,7 @@
         width: 100%;
         height: 100%;
         pointer-events: none;
-        box-shadow: 4px 0 8px 1px var(--ax-border-neutral-subtleA);
+        box-shadow: 4px 0 8px 1px var(--__axc-data-table-shadow-color);
         clip-path: inset(0 -24px 0 0);
         opacity: 0;
       }
@@ -228,11 +250,6 @@
         animation: scroll-shadow-fade-start 1s linear;
         animation-timeline: --horizontal-table-scroll;
       }
-
-      &[data-sticky-last]::after {
-        inset-inline: 0 -1px;
-        border-right-width: 1px;
-      }
     }
 
     &[data-sticky="end"] {
@@ -245,7 +262,7 @@
         width: 100%;
         height: 100%;
         pointer-events: none;
-        box-shadow: -4px 0 8px 1px var(--ax-border-neutral-subtleA);
+        box-shadow: -4px 0 8px 1px var(--__axc-data-table-shadow-color);
         clip-path: inset(0 0 0 -24px);
         opacity: 0;
       }
@@ -257,7 +274,7 @@
       }
     }
 
-    background-color: var(--ax-bg-raised);
+    background-color: var(--__axc-data-table-zebra-color, var(--ax-bg-raised));
 
     .aksel-data-table__tr[data-selected="true"] & {
       background-color: var(--ax-bg-soft);

package/src/timeline.css

@@ -34,6 +34,7 @@
   position: absolute;
   color: var(--ax-text-neutral-subtle);
   white-space: nowrap;
+  overflow-x: clip;
 }
 
 .aksel-timeline__row {