@navikt/ds-css 7.9.0 → 7.9.2

package/darkside/stepper.darkside.css

@@ -18,7 +18,7 @@
     [line-2 step-end] auto;
   grid-template-columns: var(--__axc-stepper-circle-size) auto;
   justify-items: flex-start;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 .navds-stepper__line {
@@ -30,14 +30,14 @@
   grid-column: 1;
 
   .navds-stepper__item--non-interactive & {
-    background-color: var(--ax-border-neutral-strong);
+    background-color: var(--ax-border-strong);
   }
 }
 
 /* Line before non-interactive step */
 .navds-stepper__item:has(+ .navds-stepper__item > .navds-stepper__step[data-interactive="false"]) {
   .navds-stepper__line--2 {
-    background-color: var(--ax-border-neutral-strong);
+    background-color: var(--ax-border-strong);
   }
 }
 
@@ -60,7 +60,7 @@
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: [circle] var(--__axc-stepper-circle-size) [content] auto;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   justify-content: flex-start;
   cursor: pointer;
   padding: var(--__axc-stepper-border-width);
@@ -159,23 +159,23 @@
 }
 
 .navds-stepper__step[data-interactive="false"] {
-  color: var(--ax-text-neutral);
+  color: var(--ax-text-default);
   cursor: default;
 
   & .navds-stepper__circle {
-    color: var(--ax-text-neutral);
-    border-color: var(--ax-border-neutral-strong);
+    color: var(--ax-text-default);
+    border-color: var(--ax-border-strong);
   }
 
   &[data-active="true"] {
     & .navds-stepper__content {
-      color: var(--ax-text-neutral-strong);
+      color: var(--ax-text-subtle);
     }
 
     & .navds-stepper__circle {
-      color: var(--ax-text-neutral-contrast);
-      background-color: var(--ax-bg-neutral-strong-pressed);
-      border-color: var(--ax-bg-neutral-strong-pressed);
+      color: var(--ax-text-contrast);
+      background-color: var(--ax-bg-strong-pressed);
+      border-color: var(--ax-bg-strong-pressed);
     }
   }
 }

package/darkside/table.darkside.css

@@ -12,7 +12,7 @@
   display: table-row-group;
 
   & .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
-    background-color: var(--ax-bg-neutral-hoverA);
+    background-color: var(--ax-bg-hoverA);
     transition: background-color 70ms cubic-bezier(0.2, 0, 0, 1);
   }
 
@@ -26,12 +26,12 @@
 }
 
 .navds-table__row--selected {
-  background-color: var(--ax-bg-accent);
+  background-color: var(--ax-bg-accent-soft);
 }
 
 .navds-table--zebra-stripes {
   & .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
-    background-color: var(--ax-bg-neutral);
+    background-color: var(--ax-bg-soft);
   }
 
   & .navds-table__body :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
@@ -40,13 +40,13 @@
 }
 
 .navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
-  background-color: var(--ax-bg-neutral);
+  background-color: var(--ax-bg-soft);
 }
 
 .navds-table__header-cell,
 .navds-table__data-cell {
   display: table-cell;
-  padding: var(--ax-spacing-3) var(--ax-spacing-2);
+  padding: var(--ax-space-12) var(--ax-space-8);
   border-bottom: 1px solid var(--ax-border-default);
   text-align: left;
 }
@@ -77,12 +77,12 @@
 
 .navds-table--large .navds-table__header-cell,
 .navds-table--large .navds-table__data-cell {
-  padding: var(--ax-spacing-4) var(--ax-spacing-2);
+  padding: var(--ax-space-16) var(--ax-space-8);
 }
 
 .navds-table--small .navds-table__header-cell,
 .navds-table--small .navds-table__data-cell {
-  padding: var(--ax-spacing-1) var(--ax-spacing-2);
+  padding: var(--ax-space-4) var(--ax-space-8);
 }
 
 .navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
@@ -108,21 +108,21 @@
   border: none;
   cursor: pointer;
   margin: 0;
-  padding: var(--ax-spacing-4) var(--ax-spacing-3);
+  padding: var(--ax-space-16) var(--ax-space-12);
   width: 100%;
   display: flex;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   align-items: center;
   line-height: inherit;
   font-weight: inherit;
 }
 
 .navds-table--small .navds-table__sort-button {
-  padding: var(--ax-spacing-2) var(--ax-spacing-3);
+  padding: var(--ax-space-8) var(--ax-space-12);
 }
 
 .navds-table__sort-button:hover {
-  background-color: var(--ax-bg-neutral-hoverA);
+  background-color: var(--ax-bg-hoverA);
 }
 
 .navds-table__sort-button:focus-visible {
@@ -149,7 +149,7 @@
   flex-shrink: 0;
 }
 
-.navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
+.navds-table__expandable-row:not(.navds-table__expandable-row--open) :where(.navds-table__data-cell, .navds-table__header-cell) {
   transition: border-bottom-color 150ms cubic-bezier(0.95, 0.05, 0.8, 0.04);
 }
 
@@ -157,14 +157,10 @@
   cursor: pointer;
 }
 
-.navds-table__expandable-row--open .navds-table__data-cell {
+.navds-table__expandable-row--open :where(.navds-table__data-cell, .navds-table__header-cell) {
   border-bottom-color: transparent;
 }
 
-.navds-table__expandable-row--open .navds-table__header-cell {
-  border-color: var(--ax-border-default);
-}
-
 .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
   border-color: transparent;
 }
@@ -175,11 +171,11 @@
 }
 
 .navds-table--large .navds-table__toggle-expand-cell {
-  padding: 0 var(--ax-spacing-2);
+  padding: 0 var(--ax-space-8);
 }
 
 .navds-table--small .navds-table__toggle-expand-cell {
-  padding: var(--ax-spacing-1) var(--ax-spacing-2);
+  padding: var(--ax-space-4) var(--ax-space-8);
 }
 
 .navds-table__toggle-expand-button {
@@ -207,7 +203,7 @@
 .navds-table__toggle-expand-button:hover,
 .navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button,
 .navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
-  background-color: var(--ax-bg-neutral-hoverA);
+  background-color: var(--ax-bg-hoverA);
 }
 
 .navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
@@ -233,9 +229,9 @@
 }
 
 .navds-table__expanded-row-content {
-  padding: var(--ax-spacing-4) calc(var(--ax-spacing-2) + 3rem);
+  padding: var(--ax-space-16) calc(var(--ax-space-8) + 3rem);
 }
 
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--ax-spacing-2) calc(var(--ax-spacing-2) + 3rem);
+  padding: var(--ax-space-8) calc(var(--ax-space-8) + 3rem);
 }

package/darkside/tabs.darkside.css

@@ -1,5 +1,5 @@
 .navds-tabs__tablist-wrapper {
-  box-shadow: inset 0 -1px var(--ax-border-neutral-subtle);
+  box-shadow: inset 0 -1px var(--ax-border-subtle);
   width: 100%;
   display: flex;
 }
@@ -19,7 +19,7 @@
 }
 
 .navds-tabs__scroll-button {
-  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  padding: var(--ax-space-12) var(--ax-space-16);
   width: 2.75rem;
   display: flex;
   justify-content: center;
@@ -32,7 +32,7 @@
   }
 
   .navds-tabs--small & {
-    padding: var(--ax-spacing-1-alt) var(--ax-spacing-4);
+    padding: var(--ax-space-6) var(--ax-space-16);
     width: 2rem;
   }
 }
@@ -43,7 +43,7 @@
 
 .navds-tabs__tab {
   min-height: 3rem;
-  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  padding: var(--ax-space-12) var(--ax-space-16);
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -53,7 +53,7 @@
   cursor: pointer;
 
   --__axc-tabs-line-width: 0;
-  --__axc-tabs-line-color: var(--ax-border-neutral-subtle);
+  --__axc-tabs-line-color: var(--ax-border-subtle);
 
   box-shadow: inset 0 var(--__axc-tabs-line-width) var(--__axc-tabs-line-color);
   transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
@@ -76,7 +76,7 @@
 .navds-tabs__tab-inner {
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-1);
+  gap: var(--ax-space-4);
 
   & > * {
     display: inline-flex;
@@ -94,12 +94,12 @@
 
 .navds-tabs__tab--small {
   min-height: 2rem;
-  padding: var(--ax-spacing-1-alt) var(--ax-spacing-4);
+  padding: var(--ax-space-6) var(--ax-space-16);
 }
 
 .navds-tabs__tab-icon--top,
 .navds-tabs__tab--small.navds-tabs__tab-icon--top {
-  padding: var(--ax-spacing-1) var(--ax-spacing-4);
+  padding: var(--ax-space-4) var(--ax-space-16);
 }
 
 .navds-tabs__tab,
@@ -133,15 +133,15 @@
 @media (forced-colors: active) {
   .navds-tabs__tab[data-state="active"] {
     border-bottom: 3px solid canvastext;
-    padding-block-end: calc(var(--ax-spacing-3) - 3px);
+    padding-block-end: calc(var(--ax-space-12) - 3px);
   }
 
   .navds-tabs__tab--small[data-state="active"] {
-    padding-block-end: calc(var(--ax-spacing-1-alt) - 3px);
+    padding-block-end: calc(var(--ax-space-6) - 3px);
   }
 
   .navds-tabs__tab-icon--top[data-state="active"],
   .navds-tabs__tab--small.navds-tabs__tab-icon--top[data-state="active"] {
-    padding-block-end: calc(var(--ax-spacing-1) - 3px);
+    padding-block-end: calc(var(--ax-space-4) - 3px);
   }
 }

package/darkside/tag.darkside.css

@@ -11,12 +11,12 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--ax-spacing-05) var(--ax-spacing-2);
+  padding: var(--ax-space-2) var(--ax-space-8);
   min-height: 2rem;
   line-height: 1;
 
   &:has(.navds-tag__icon--left) {
-    gap: var(--ax-spacing-05);
+    gap: var(--ax-space-2);
   }
 }
 
@@ -54,41 +54,41 @@
 }
 
 .navds-tag--neutral {
-  --__axc-tag-border: var(--ax-border-neutral);
-  --__axc-tag-bg: var(--ax-bg-neutral-moderateA);
-  --__axc-tag-bg-strong: var(--ax-bg-neutral-strong);
-  --__axc-tag-text: var(--ax-text-neutral-strong);
-  --__axc-tag-text-strong: var(--ax-text-neutral-contrast);
+  --__axc-tag-border: var(--ax-border-default);
+  --__axc-tag-bg: var(--ax-bg-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-strong);
+  --__axc-tag-text: var(--ax-text-default);
+  --__axc-tag-text-strong: var(--ax-text-contrast);
 }
 
-.navds-tag--meta-purple,
+.navds-tag--meta-1,
 .navds-tag--alt1 {
-  --__axc-tag-border: var(--ax-border-meta-purple);
-  --__axc-tag-bg: var(--ax-bg-meta-purple-moderateA);
-  --__axc-tag-bg-strong: var(--ax-bg-meta-purple-strong);
-  --__axc-tag-text: var(--ax-text-meta-purple-strong);
-  --__axc-tag-text-strong: var(--ax-text-meta-purple-contrast);
+  --__axc-tag-border: var(--ax-border-meta-1);
+  --__axc-tag-bg: var(--ax-bg-meta-1-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-meta-1-strong);
+  --__axc-tag-text: var(--ax-text-meta-1-strong);
+  --__axc-tag-text-strong: var(--ax-text-meta-1-contrast);
 }
 
-.navds-tag--meta-lime,
+.navds-tag--meta-2,
 .navds-tag--alt2 {
-  --__axc-tag-border: var(--ax-border-meta-lime);
-  --__axc-tag-bg: var(--ax-bg-meta-lime-moderateA);
-  --__axc-tag-bg-strong: var(--ax-bg-meta-lime-strong);
-  --__axc-tag-text: var(--ax-text-meta-lime-strong);
-  --__axc-tag-text-strong: var(--ax-text-meta-lime-contrast);
+  --__axc-tag-border: var(--ax-border-meta-2);
+  --__axc-tag-bg: var(--ax-bg-meta-2-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-meta-2-strong);
+  --__axc-tag-text: var(--ax-text-meta-2-strong);
+  --__axc-tag-text-strong: var(--ax-text-meta-2-contrast);
 }
 
 .navds-tag--small {
   min-height: 1.5rem;
-  padding: 0 var(--ax-spacing-1-alt);
+  padding: 0 var(--ax-space-6);
 
   --__axc-tag-icon-size: 1.25rem;
 }
 
 .navds-tag--xsmall {
   min-height: 1.25rem;
-  padding: 0 var(--ax-spacing-1);
+  padding: 0 var(--ax-space-4);
 
   --__axc-tag-icon-size: 1rem;
   --__axc-tag-icon-margin: -1px;

package/darkside/timeline.darkside.css

@@ -12,18 +12,18 @@
   height: 1rem;
   box-sizing: content-box;
   grid-column: 2;
-  margin-bottom: var(--ax-spacing-1);
+  margin-bottom: var(--ax-space-4);
 }
 
 .navds-timeline__row-label {
   white-space: nowrap;
   width: auto;
-  margin-right: var(--ax-spacing-4);
+  margin-right: var(--ax-space-16);
   grid-column: 1;
   min-height: 1.5rem;
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 .navds-timeline__row-label:where(:nth-last-child(2)) {
@@ -38,8 +38,8 @@
 
 .navds-timeline__row {
   display: flex;
-  background: var(--ax-bg-neutral);
-  margin: var(--ax-spacing-4) 0;
+  background: var(--ax-bg-soft);
+  margin: var(--ax-space-16) 0;
   grid-column: 2;
 }
 
@@ -85,7 +85,7 @@
 }
 
 .navds-timeline__period--inner {
-  margin: 0 var(--ax-spacing-2);
+  margin: 0 var(--ax-space-8);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: clip;
@@ -167,18 +167,18 @@
 }
 
 .navds-timeline__period--neutral {
-  background: var(--ax-bg-neutral-moderate);
-  border: solid 1px var(--ax-border-neutral);
-  color: var(--ax-text-neutral-icon);
+  background: var(--ax-bg-moderate);
+  border: solid 1px var(--ax-border-default);
+  color: var(--ax-text-icon);
 
   &.navds-timeline__period--clickable:hover {
-    background: var(--ax-bg-neutral-moderate-hover);
+    background: var(--ax-bg-moderate-hover);
   }
 
   &.navds-timeline__period--clickable.navds-timeline__period--selected {
-    background: var(--ax-bg-neutral-strong-pressed);
+    background: var(--ax-bg-strong-pressed);
     border: none;
-    color: var(--ax-text-neutral-contrast);
+    color: var(--ax-text-contrast);
   }
 }
 
@@ -216,7 +216,7 @@
   box-shadow: inset 0 0 0 4px var(--ax-bg-danger-strong);
   z-index: 2;
   border-radius: var(--ax-border-radius-full);
-  padding: var(--ax-spacing-2);
+  padding: var(--ax-space-8);
   position: relative;
 
   &::before {
@@ -253,7 +253,7 @@
 }
 
 .navds-timeline__zoom {
-  margin-top: var(--ax-spacing-6);
+  margin-top: var(--ax-space-24);
   float: right;
   display: flex;
   list-style-type: none;
@@ -282,13 +282,13 @@
 }
 
 .navds-timeline__zoom-button:not([aria-pressed="true"]):hover {
-  background: var(--ax-bg-neutral-moderate-hoverA);
+  background: var(--ax-bg-moderate-hoverA);
 }
 
 .navds-timeline__zoom-button[aria-pressed="true"] {
-  background: var(--ax-bg-neutral-strong-pressed);
-  border-color: var(--ax-bg-neutral-strong-pressed);
-  color: var(--ax-text-neutral-contrast);
+  background: var(--ax-bg-strong-pressed);
+  border-color: var(--ax-bg-strong-pressed);
+  color: var(--ax-text-contrast);
 }
 
 .navds-timeline__zoom li:focus-within {
@@ -318,7 +318,7 @@
   border: 1px solid;
   border-color: var(--ax-border-subtleA);
   border-radius: var(--ax-border-radius-large);
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
 }
 
 @media (forced-colors: active) {

package/darkside/toggle-group.darkside.css

@@ -1,7 +1,7 @@
 .navds-toggle-group__wrapper {
   display: grid;
   justify-items: start;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 .navds-toggle-group__wrapper--fill {
@@ -24,7 +24,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--ax-spacing-1) var(--ax-spacing-3);
+  padding: var(--ax-space-4) var(--ax-space-12);
   min-height: 3rem;
   border: none;
   cursor: pointer;
@@ -64,7 +64,7 @@
 .navds-toggle-group__button-inner {
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 
   > * {
     flex-shrink: 0;
@@ -78,19 +78,19 @@
 /* Modifier neutral variant */
 :where(.navds-toggle-group--neutral) .navds-toggle-group__button {
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &[data-selected="true"] {
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
   }
 }
 
 /* Modifier small size */
 .navds-toggle-group--small {
   & .navds-toggle-group__button {
-    padding: var(--ax-spacing-05) var(--ax-spacing-3);
+    padding: var(--ax-space-2) var(--ax-space-12);
     min-height: 2rem;
   }
 

package/darkside/tooltip.darkside.css

@@ -3,7 +3,7 @@
   background-color: var(--ax-bg-raised);
   color: var(--ax-text-default);
   border-radius: var(--ax-border-radius-medium);
-  padding: 0 var(--ax-spacing-1-alt);
+  padding: 0 var(--ax-space-6);
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -81,22 +81,22 @@
 }
 
 .navds-tooltip__keys {
-  padding-bottom: var(--ax-spacing-1);
+  padding-bottom: var(--ax-space-4);
   display: flex;
-  gap: var(--ax-spacing-1);
+  gap: var(--ax-space-4);
 }
 
 .navds-tooltip__key {
   font-family: var(--ax-font-family);
   color: var(--ax-text-default);
-  padding: 0 var(--ax-spacing-1);
+  padding: 0 var(--ax-space-4);
   min-width: 1.125rem;
   height: 1.125rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--ax-border-radius-small);
-  background: var(--ax-bg-neutral-moderateA);
+  background: var(--ax-bg-moderateA);
 
   @media (forced-colors: active) {
     & {