@navikt/ds-css 8.10.4 → 8.10.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "8.10.4",
+  "version": "8.10.5",
   "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.10.4",
+    "@navikt/ds-tokens": "^8.10.5",
     "browserslist": "^4.25.0",
     "esbuild": "^0.27.4",
     "fast-glob": "3.3.3",

package/src/button.css

@@ -42,14 +42,22 @@
     --__axc-button-border-color: var(--ax-border-default);
 
     background-color: transparent;
-    color: var(--ax-text-subtle);
 
+    /* secondary + neutral should use "default" text color.
+       Check for data-color=neutral on both the button itself and the parents. */
     &[data-color="neutral"],
-    [data-color="neutral"] > &:not([data-color]),
-    [data-color="neutral"] :not([data-color]) &:not([data-color]) {
+    [data-color="neutral"] &:not([data-color]) {
       color: var(--ax-text-default);
     }
 
+    /* secondary + NOT neutral should use "subtle" text color.
+       We need to explicitly target cases where a parent has data-color=neutral but
+       a closer parent has a different data-color (overriding the selector above). */
+    &,
+    [data-color="neutral"] [data-color]:not([data-color="neutral"]) & {
+      color: var(--ax-text-subtle);
+    }
+
     &:hover {
       --__axc-button-border-color: var(--ax-border-strong);
 
@@ -73,14 +81,22 @@
 
   &[data-variant="tertiary"] {
     background-color: transparent;
-    color: var(--ax-text-subtle);
 
+    /* tertiary + neutral should use "default" text color.
+       Check for data-color=neutral on both the button itself and the parents. */
     &[data-color="neutral"],
-    [data-color="neutral"] > &:not([data-color], [data-pressed="true"]),
-    [data-color="neutral"] :not([data-color]) &:not([data-color], [data-pressed="true"]) {
+    [data-color="neutral"] &:not([data-color], [data-pressed="true"]) {
       color: var(--ax-text-default);
     }
 
+    /* tertiary + NOT neutral should use "subtle" text color.
+       We need to explicitly target cases where a parent has data-color=neutral but
+       a closer parent has a different data-color (overriding the selector above). */
+    &,
+    [data-color="neutral"] [data-color]:not([data-color="neutral"]) &:not([data-pressed="true"]) {
+      color: var(--ax-text-subtle);
+    }
+
     &:hover {
       background-color: var(--ax-bg-moderate-hoverA);
     }
@@ -231,6 +247,15 @@
       color: highlight;
       box-shadow: none;
     }
+
+    &[data-variant="tertiary"][data-pressed="true"] {
+      background-color: selecteditem;
+      color: selecteditemtext;
+
+      & span {
+        forced-color-adjust: none;
+      }
+    }
   }
 
   .aksel-button:not(:disabled):hover span {

package/src/data-table.css

@@ -513,6 +513,11 @@
   width: auto;
 }
 
+.aksel-data-table__drag-and-drop-root {
+  padding: 0;
+  margin: 0;
+}
+
 .aksel-data-drag-and-drop__drag-handler__button {
   height: 1.5rem;
   position: relative;
@@ -533,12 +538,11 @@
 }
 
 .aksel-data-table__drag-and-drop-item {
-  background-color: var(--ax-bg-default);
-
   &[data-overlay="true"] {
     width: 100%;
     opacity: 0.8;
     box-shadow: var(--ax-shadow-dialog);
+    background-color: var(--ax-bg-default);
   }
 
   /* TODO - might be removable */
@@ -555,7 +559,7 @@
   }
 }
 
-.aksel-data-drag-and-drop__drag-handler__alt,
+.aksel-data-drag-and-drop__drag-handler__legacy,
 .aksel-data-drag-and-drop__drag-handler {
   position: relative;
   height: 1.5rem;
@@ -661,3 +665,10 @@ html[data-dragging-cursor="true"] *::after {
 .aksel-data-table__details-panel-row {
   box-shadow: inset 1px 1px 0 0 var(--ax-border-neutral-subtle);
 }
+
+.aksel-data-table__details-panel-row-cell {
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: -4px;
+  }
+}