@navikt/ds-css 7.10.0 → 7.12.0

package/darkside/internalheader.darkside.css

@@ -3,7 +3,7 @@
   align-self: stretch;
   background: var(--ax-bg-raised);
   min-height: 3rem;
-  border-bottom: 1px solid var(--ax-border-subtleA);
+  border-bottom: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 @media (forced-colors: active) {
@@ -24,19 +24,19 @@
   text-align: left;
   padding-block: 0;
   padding-inline: var(--ax-space-24) var(--ax-space-20);
-  border-right: 1px solid var(--ax-border-subtleA);
+  border-right: 1px solid var(--ax-border-neutral-subtleA);
   display: flex;
   align-items: center;
   text-decoration: none;
   margin: 0;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &:is(button) {
     cursor: pointer;
   }
 
   &:hover {
-    background: var(--ax-bg-moderate-hover);
+    background: var(--ax-bg-neutral-moderate-hoverA);
   }
 
   &:is(:hover, :active):not(button, a) {
@@ -46,7 +46,7 @@
 
 .navds-internalheader__user {
   padding: 0 var(--ax-space-20);
-  border-left: 1px solid var(--ax-border-subtleA);
+  border-left: 1px solid var(--ax-border-neutral-subtleA);
   display: flex;
   align-items: center;
 }
@@ -65,11 +65,11 @@
   align-items: center;
   justify-self: center;
   gap: var(--ax-space-8);
-  border-left: 1px solid var(--ax-border-subtleA);
-  color: var(--ax-text-default);
+  border-left: 1px solid var(--ax-border-neutral-subtleA);
+  color: var(--ax-text-neutral);
 
   &:hover {
-    background: var(--ax-bg-moderate-hover);
+    background: var(--ax-bg-neutral-moderate-hoverA);
   }
 }
 
@@ -87,11 +87,11 @@
 .navds-internalheader__button {
   &:focus-visible {
     outline: 3px solid var(--ax-border-focus);
-    outline-offset: -3px;
+    outline-offset: -4px;
   }
 
   &:active {
-    background: var(--ax-bg-moderate-pressed);
+    background: var(--ax-bg-neutral-moderate-pressedA);
   }
 }
 

package/darkside/link.darkside.css

@@ -1,5 +1,5 @@
 .navds-link {
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
   display: inline-flex;
   align-items: center;
   gap: var(--ax-space-2);
@@ -13,8 +13,9 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-radius: 1px;
   }
 
   &.navds-link--inline-text {
@@ -46,18 +47,18 @@
 .navds-alert:not(.navds-alert--inline),
 .navds-confirmation-panel {
   & .navds-link {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 }
 
 .navds-link--action {
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 }
 
 .navds-link--neutral {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-link--subtle {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }

package/darkside/list.darkside.css

@@ -1,12 +1,7 @@
 .navds-list ul,
 .navds-list ol {
   padding: 0;
-  margin-block: var(--ax-space-16);
-}
-
-.navds-list--small ul,
-.navds-list--small ol {
-  margin-block: var(--ax-space-12);
+  margin: 0;
 }
 
 .navds-list {

package/darkside/loader.darkside.css

@@ -61,19 +61,19 @@
   animation: loader-dasharray 1.5s ease-in-out infinite;
   stroke-dasharray: 80px, 200px;
   stroke-dashoffset: 0;
-  stroke: var(--ax-border-strong);
+  stroke: var(--ax-border-neutral-strong);
   stroke-linecap: round;
   stroke-width: var(--__axc-loader-stroke-width);
 }
 
 .navds-loader__background {
-  stroke: var(--ax-border-subtleA);
+  stroke: var(--ax-border-neutral-subtleA);
   stroke-width: var(--__axc-loader-stroke-width);
 }
 
 .navds-loader--neutral {
   & .navds-loader__foreground {
-    stroke: var(--ax-border-strong);
+    stroke: var(--ax-border-neutral-strong);
   }
 }
 
@@ -89,11 +89,11 @@
 
 .navds-loader--inverted {
   & .navds-loader__foreground {
-    stroke: var(--ax-border-subtle);
+    stroke: var(--ax-border-neutral-subtle);
   }
 
   & .navds-loader__background {
-    stroke: var(--ax-border-strong);
+    stroke: var(--ax-border-neutral-strong);
   }
 }
 

package/darkside/modal.darkside.css

@@ -6,14 +6,15 @@
   --__axc-modal-bg: var(--ax-bg-raised);
 
   background-color: var(--__axc-modal-bg);
-  border: 1px solid var(--ax-border-subtleA);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   border-radius: var(--ax-border-radius-xlarge);
   box-shadow: var(--ax-shadow-dialog);
   padding: 0;
   position: fixed;
   max-height: 100%;
   max-width: 100%;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
+  margin: auto;
 
   &[open] {
     display: flex;
@@ -134,7 +135,7 @@
 
 .navds-modal__label {
   font-weight: var(--ax-font-weight-bold);
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-modal__body {

package/darkside/pagination.darkside.css

@@ -32,8 +32,8 @@
 }
 
 .navds-pagination__item[data-selected="true"] {
-  background-color: var(--ax-bg-strong-pressed);
-  color: var(--ax-text-contrast);
+  background-color: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
 }
 
 .navds-pagination--invisible {

package/darkside/popover.darkside.css

@@ -2,7 +2,7 @@
   z-index: 1000;
   background: var(--ax-bg-raised);
   box-shadow: var(--ax-shadow-dialog);
-  border: 1px solid var(--ax-border-subtleA);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   border-radius: var(--ax-border-radius-xlarge);
 
   /* Creates a small gutter between screen-edges on smaller devices */
@@ -10,7 +10,13 @@
 }
 
 .navds-popover__content {
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-16);
+}
+
+@media (min-width: 480px) {
+  .navds-popover__content {
+    padding: var(--ax-space-20);
+  }
 }
 
 .navds-popover--hidden {

package/darkside/primitives/page.darkside.css

@@ -48,13 +48,13 @@
 }
 
 .navds-pageblock--gutters {
-  --__axc-page-padding-inline: var(--a-spacing-4);
+  --__axc-page-padding-inline: var(--ax-space-16);
 
   padding-inline: var(--__axc-page-padding-inline);
 }
 
 @media (min-width: 1024px) {
   .navds-pageblock--gutters {
-    --__axc-page-padding-inline: var(--a-spacing-12);
+    --__axc-page-padding-inline: var(--ax-space-48);
   }
 }

package/darkside/progress-bar.darkside.css

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

package/darkside/read-more.darkside.css

@@ -14,7 +14,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--ax-space-4);
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
   padding-inline: var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);
   padding-block: var(--__axc-read-more-pb);
   text-align: start;
@@ -34,8 +34,7 @@
     border-radius: var(--ax-border-radius-medium);
 
     &:hover {
-      background-color: var(--ax-bg-hoverA);
-      color: var(--ax-text-accent-strong);
+      background-color: var(--ax-bg-neutral-moderate-hoverA);
     }
   }
 }
@@ -47,7 +46,7 @@
 
     &:hover {
       background-color: var(--ax-bg-accent-moderate-hoverA);
-      color: var(--ax-text-accent-strong);
+      color: var(--ax-text-accent);
     }
   }
 
@@ -66,8 +65,8 @@
 /* ---------------------------- ReadMore Content ---------------------------- */
 .navds-read-more__content {
   margin-top: var(--ax-space-8);
-  border-left: 2px solid var(--ax-border-subtleA);
-  color: var(--ax-text-default);
+  border-left: 2px solid var(--ax-border-neutral-subtleA);
+  color: var(--ax-text-neutral);
   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-space-4));
 

package/darkside/skeleton.darkside.css

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

package/darkside/stepper.darkside.css

@@ -3,7 +3,7 @@
   --__axc-stepper-border-width: 2px;
   --__axc-stepper-line-length: 1rem;
 
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
   font-weight: var(--ax-font-weight-bold);
   line-height: 1;
   list-style: none;
@@ -30,14 +30,14 @@
   grid-column: 1;
 
   .navds-stepper__item--non-interactive & {
-    background-color: var(--ax-border-strong);
+    background-color: var(--ax-border-neutral-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-strong);
+    background-color: var(--ax-border-neutral-strong);
   }
 }
 
@@ -66,10 +66,11 @@
   padding: var(--__axc-stepper-border-width);
   margin: calc(var(--__axc-stepper-border-width) * -1) calc(var(--__axc-stepper-border-width) * -1)
     var(--__axc-stepper-circle-size);
+  width: 100%;
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 4px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
 
     /* Isolate item to make outline show above line--2 */
     isolation: isolate;
@@ -107,7 +108,7 @@
 }
 
 .navds-stepper__step[data-interactive="true"] {
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
   border-radius: var(--ax-border-radius-medium);
   text-decoration: none;
 
@@ -124,20 +125,13 @@
     }
   }
 
-  &:hover {
-    & .navds-stepper__circle {
-      color: var(--ax-text-accent-strong);
-    }
-  }
-
   & .navds-stepper__circle {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
     border-color: var(--ax-border-accent-strong);
   }
 
   &[data-active="true"] {
     & .navds-stepper__content {
-      color: var(--ax-text-accent-strong);
       text-decoration: none;
     }
 
@@ -159,23 +153,18 @@
 }
 
 .navds-stepper__step[data-interactive="false"] {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral-subtle);
   cursor: default;
 
   & .navds-stepper__circle {
-    color: var(--ax-text-default);
-    border-color: var(--ax-border-strong);
+    border-color: var(--ax-border-neutral-strong);
   }
 
   &[data-active="true"] {
-    & .navds-stepper__content {
-      color: var(--ax-text-subtle);
-    }
-
     & .navds-stepper__circle {
-      color: var(--ax-text-contrast);
-      background-color: var(--ax-bg-strong-pressed);
-      border-color: var(--ax-bg-strong-pressed);
+      color: var(--ax-text-neutral-contrast);
+      background-color: var(--ax-bg-neutral-strong-pressed);
+      border-color: var(--ax-bg-neutral-strong-pressed);
     }
   }
 }

package/darkside/table.darkside.css

@@ -12,12 +12,12 @@
   display: table-row-group;
 
   & .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
-    background-color: var(--ax-bg-hoverA);
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
     transition: background-color 70ms cubic-bezier(0.2, 0, 0, 1);
   }
 
   & .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
-    background-color: var(--ax-bg-accent-hoverA);
+    background-color: var(--ax-bg-accent-moderate-hoverA);
   }
 }
 
@@ -26,28 +26,36 @@
 }
 
 .navds-table__row--selected {
-  background-color: var(--ax-bg-accent-soft);
+  background-color: var(--ax-bg-accent-softA);
+
+  & + .navds-table__expanded-row {
+    background-color: var(--ax-bg-accent-softA);
+  }
 }
 
 .navds-table--zebra-stripes {
   & .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
-    background-color: var(--ax-bg-soft);
+    background-color: var(--ax-bg-neutral-softA);
   }
 
   & .navds-table__body :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
     background-color: transparent;
   }
-}
 
-.navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
-  background-color: var(--ax-bg-soft);
+  & .navds-table__body .navds-table__expanded-row:nth-child(4n) {
+    background-color: var(--ax-bg-neutral-softA);
+  }
+
+  & .navds-table__row--selected + .navds-table__expanded-row:nth-child(4n) {
+    background-color: var(--ax-bg-accent-softA);
+  }
 }
 
 .navds-table__header-cell,
 .navds-table__data-cell {
   display: table-cell;
   padding: var(--ax-space-12) var(--ax-space-8);
-  border-bottom: 1px solid var(--ax-border-default);
+  border-bottom: 1px solid var(--ax-border-neutral-subtleA);
   text-align: left;
 }
 
@@ -66,11 +74,6 @@
   text-align: center;
 }
 
-:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell,
-:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
-  border-color: var(--ax-border-strong);
-}
-
 :where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
   border-bottom-color: transparent;
 }
@@ -85,6 +88,7 @@
   padding: var(--ax-space-4) var(--ax-space-8);
 }
 
+/* TODO: Look to handle "inline"-checkbox better than custom CSS-overrides in the future. */
 .navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
   top: -0.75rem;
 }
@@ -97,6 +101,11 @@
   padding: 0;
 }
 
+.navds-table .navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-table .navds-radio__input:focus + .navds-radio__label::after {
+  height: 100%;
+}
+
 .navds-table__header-cell[aria-sort] {
   padding: 0;
 }
@@ -104,14 +113,14 @@
 .navds-table__sort-button {
   appearance: none;
   background: none;
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
   border: none;
   cursor: pointer;
   margin: 0;
   padding: var(--ax-space-16) var(--ax-space-12);
   width: 100%;
   display: flex;
-  gap: var(--ax-space-8);
+  gap: var(--ax-space-4);
   align-items: center;
   line-height: inherit;
   font-weight: inherit;
@@ -122,18 +131,18 @@
 }
 
 .navds-table__sort-button:hover {
-  background-color: var(--ax-bg-hoverA);
+  background-color: var(--ax-bg-neutral-moderate-hoverA);
 }
 
 .navds-table__sort-button:focus-visible {
-  outline: 2px solid var(--ax-border-focus);
-  outline-offset: -4px;
+  outline: 3px solid var(--ax-border-focus);
+  outline-offset: -5px;
 }
 
 .navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
 .navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
-  background-color: var(--ax-bg-accent-moderate);
-  color: var(--ax-text-accent-strong);
+  background-color: var(--ax-bg-accent-moderate-pressedA);
+  color: var(--ax-text-accent);
 }
 
 .navds-table__header-cell--align-right .navds-table__sort-button {
@@ -145,7 +154,7 @@
 }
 
 .navds-table__sort-button svg {
-  font-size: 1rem;
+  font-size: 1.5rem;
   flex-shrink: 0;
 }
 
@@ -203,7 +212,15 @@
 .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-hoverA);
+  background-color: var(--ax-bg-neutral-moderate-hoverA);
+}
+
+& .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 {
+  .navds-table__row--selected & {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+  }
 }
 
 .navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
@@ -211,7 +228,7 @@
 }
 
 .navds-table__toggle-expand-button:focus-visible {
-  outline: 2px solid var(--ax-border-focus);
+  outline: 3px solid var(--ax-border-focus);
 }
 
 .navds-table__expanded-row-cell {
@@ -225,7 +242,7 @@
 /* -------------------------- Table ExpandableRow -------------------------- */
 .navds-table__expanded-row-collapse:not([style*="height: 0px;"]),
 .navds-table__expanded-row-collapse[style*="transition:"] {
-  border-bottom: 1px solid var(--ax-border-default);
+  border-bottom: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 .navds-table__expanded-row-content {

package/darkside/tabs.darkside.css

@@ -1,5 +1,5 @@
 .navds-tabs__tablist-wrapper {
-  box-shadow: inset 0 -1px var(--ax-border-subtle);
+  box-shadow: inset 0 -1px var(--ax-border-neutral-subtleA);
   width: 100%;
   display: flex;
 }
@@ -49,11 +49,11 @@
   align-items: center;
   background: none;
   border: none;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   cursor: pointer;
 
   --__axc-tabs-line-width: 0;
-  --__axc-tabs-line-color: var(--ax-border-subtle);
+  --__axc-tabs-line-color: var(--ax-border-neutral-subtleA);
 
   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);
@@ -68,8 +68,8 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: -2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: -3px;
   }
 }
 
@@ -126,8 +126,8 @@
 }
 
 .navds-tabs__tabpanel:focus-visible {
-  outline: 2px solid var(--ax-border-focus);
-  outline-offset: -2px;
+  outline: 3px solid var(--ax-border-focus);
+  outline-offset: -4px;
 }
 
 @media (forced-colors: active) {