@navikt/ds-css 7.9.1 → 7.10.0

package/darkside/modal.darkside.css

@@ -60,15 +60,15 @@
   width: 450px;
 
   & .navds-modal__header {
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
 
   & .navds-modal__body {
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
 
   & .navds-modal__footer {
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
 }
 
@@ -116,19 +116,19 @@
 }
 
 .navds-modal__button {
-  margin-left: var(--ax-spacing-4);
+  margin-left: var(--ax-space-16);
   float: right;
 }
 
 .navds-modal__header {
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
 }
 
 .navds-modal__header-icon {
   & svg {
     display: inline;
     vertical-align: -0.25rem;
-    margin-right: var(--ax-spacing-1);
+    margin-right: var(--ax-space-4);
   }
 }
 
@@ -138,7 +138,7 @@
 }
 
 .navds-modal__body {
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
   overflow: auto;
   overscroll-behavior: contain;
   position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
@@ -157,14 +157,14 @@
 }
 
 .navds-modal__header + .navds-modal__body {
-  padding-top: var(--ax-spacing-0);
+  padding-top: var(--ax-space-0);
 }
 
 .navds-modal__footer {
   display: flex;
   flex-flow: row-reverse wrap;
-  gap: var(--ax-spacing-4);
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  gap: var(--ax-space-16);
+  padding: var(--ax-space-16) var(--ax-space-20);
 }
 
 .navds-modal__footer :nth-of-type(2) {

package/darkside/pagination.darkside.css

@@ -7,7 +7,7 @@
   padding: 0;
   list-style: none;
   display: flex;
-  gap: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
 
   & li {
     list-style: none;
@@ -32,8 +32,8 @@
 }
 
 .navds-pagination__item[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);
 }
 
 .navds-pagination--invisible {

package/darkside/popover.darkside.css

@@ -6,11 +6,11 @@
   border-radius: var(--ax-border-radius-xlarge);
 
   /* Creates a small gutter between screen-edges on smaller devices */
-  max-width: calc(100vw - var(--ax-spacing-6));
+  max-width: calc(100vw - var(--ax-space-24));
 }
 
 .navds-popover__content {
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
 }
 
 .navds-popover--hidden {

package/darkside/primitives/page.darkside.css

@@ -24,7 +24,7 @@
 }
 
 .navds-page__content--padding {
-  padding-block-end: var(--ax-spacing-16);
+  padding-block-end: var(--ax-space-64);
 }
 
 .navds-pageblock--text {

package/darkside/progress-bar.darkside.css

@@ -1,9 +1,9 @@
 .navds-progress-bar {
-  background: var(--ax-bg-neutral-moderateA);
+  background: var(--ax-bg-moderateA);
   position: relative;
   border-radius: var(--ax-border-radius-full);
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
+  box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
 }
 
 .navds-progress-bar--small {

package/darkside/read-more.darkside.css

@@ -1,8 +1,8 @@
 .navds-read-more {
   --__axc-read-more-icon-size: 1.5rem;
   --__axc-read-more-pi-start: 0px;
-  --__axc-read-more-pi-end: var(--ax-spacing-1);
-  --__axc-read-more-pb: var(--ax-spacing-1);
+  --__axc-read-more-pi-end: var(--ax-space-4);
+  --__axc-read-more-pb: var(--ax-space-4);
 }
 
 /* ----------------------------- ReadMore Button ---------------------------- */
@@ -13,15 +13,15 @@
   background: none;
   display: flex;
   align-items: flex-start;
-  gap: var(--ax-spacing-1);
+  gap: var(--ax-space-4);
   color: var(--ax-text-accent);
   padding-inline: var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);
   padding-block: var(--__axc-read-more-pb);
   text-align: start;
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
   &[data-state="open"] .navds-read-more__expand-icon {
@@ -34,7 +34,7 @@
     border-radius: var(--ax-border-radius-medium);
 
     &:hover {
-      background-color: var(--ax-bg-neutral-hoverA);
+      background-color: var(--ax-bg-hoverA);
       color: var(--ax-text-accent-strong);
     }
   }
@@ -52,24 +52,24 @@
   }
 
   &.navds-read-more--large {
-    --__axc-read-more-pi-start: var(--ax-spacing-3);
-    --__axc-read-more-pi-end: var(--ax-spacing-6);
+    --__axc-read-more-pi-start: var(--ax-space-12);
+    --__axc-read-more-pi-end: var(--ax-space-24);
   }
 
   &.navds-read-more--small,
   &.navds-read-more--medium {
-    --__axc-read-more-pi-start: var(--ax-spacing-2);
-    --__axc-read-more-pi-end: var(--ax-spacing-4);
+    --__axc-read-more-pi-start: var(--ax-space-8);
+    --__axc-read-more-pi-end: var(--ax-space-16);
   }
 }
 
 /* ---------------------------- ReadMore Content ---------------------------- */
 .navds-read-more__content {
-  margin-top: var(--ax-spacing-2);
-  border-left: 2px solid var(--ax-border-neutral-subtleA);
+  margin-top: var(--ax-space-8);
+  border-left: 2px solid var(--ax-border-subtleA);
   color: var(--ax-text-default);
   margin-left: calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);
-  padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-spacing-1));
+  padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-space-4));
 
   &[data-state="closed"] {
     display: none;
@@ -84,12 +84,12 @@
 
 /* ----------------------------- ReadMore Sizes ----------------------------- */
 .navds-read-more--large {
-  --__axc-read-more-pb: var(--ax-spacing-3);
+  --__axc-read-more-pb: var(--ax-space-12);
 }
 
 .navds-read-more--small {
   --__axc-read-more-icon-size: 1.25rem;
-  --__axc-read-more-pb: var(--ax-spacing-05);
+  --__axc-read-more-pb: var(--ax-space-2);
 }
 
 /* ------------------------- ReadMore high-contrast ------------------------- */

package/darkside/skeleton.darkside.css

@@ -1,5 +1,5 @@
 .navds-skeleton {
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   height: 1.3em;
   animation: akselSkeletonAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   pointer-events: none;

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,27 @@
 }
 
 .navds-table__expanded-row-content {
-  padding: var(--ax-spacing-4) calc(var(--ax-spacing-2) + 3rem);
+  --__ac-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);
+
+  padding-block: var(--ax-space-16);
 }
 
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--ax-spacing-2) calc(var(--ax-spacing-2) + 3rem);
+  padding-block: var(--ax-space-8);
+}
+
+.navds-table__expanded-row-content--gutter-both {
+  padding-inline: var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-left {
+  padding-inline: var(--__ac-table-expanded-row-pi) var(--ax-space-8);
+}
+
+.navds-table__expanded-row-content--gutter-right {
+  padding-inline: var(--ax-space-8) var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-none {
+  padding-inline: var(--ax-space-8);
 }

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;