@navikt/ds-css 7.9.1 → 7.10.0

package/darkside/copybutton.darkside.css

@@ -1,5 +1,5 @@
 .navds-copybutton {
-  --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-5) var(--ax-spacing-3) var(--ax-spacing-4);
+  --__axc-copybutton-padding: var(--ax-space-12) var(--ax-space-20) var(--ax-space-12) var(--ax-space-16);
 
   cursor: pointer;
   margin: 0;
@@ -13,15 +13,15 @@
   transition: color 0.2s cubic-bezier(0.05, 0.7, 0.1, 1);
 
   &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-spacing-3);
+    --__axc-copybutton-padding: var(--ax-space-12);
   }
 
   &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-5);
+    --__axc-copybutton-padding: var(--ax-space-12) var(--ax-space-16) var(--ax-space-12) var(--ax-space-20);
   }
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &:focus-visible {
@@ -57,22 +57,18 @@
   min-height: 2rem;
   min-width: 2rem;
 
-  --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-3) var(--ax-spacing-1) var(--ax-spacing-2);
+  --__axc-copybutton-padding: var(--ax-space-4) var(--ax-space-12) var(--ax-space-4) var(--ax-space-8);
 
   &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-2) var(--ax-spacing-1) var(--ax-spacing-3);
+    --__axc-copybutton-padding: var(--ax-space-4) var(--ax-space-8) var(--ax-space-4) var(--ax-space-12);
   }
 
   &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-spacing-1);
-  }
-
-  & .navds-copybutton__icon {
-    font-size: 1.25rem;
+    --__axc-copybutton-padding: var(--ax-space-4);
   }
 
   & > .navds-copybutton__content {
-    gap: var(--ax-spacing-1-alt);
+    gap: var(--ax-space-4);
   }
 }
 
@@ -81,14 +77,14 @@
   min-height: 1.5rem;
   min-width: 1.5rem;
 
-  --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-2) var(--ax-spacing-05) var(--ax-spacing-1);
+  --__axc-copybutton-padding: var(--ax-space-2) var(--ax-space-8) var(--ax-space-2) var(--ax-space-4);
 
   &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-1) var(--ax-spacing-05) var(--ax-spacing-2);
+    --__axc-copybutton-padding: var(--ax-space-2) var(--ax-space-4) var(--ax-space-2) var(--ax-space-8);
   }
 
   &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-spacing-05);
+    --__axc-copybutton-padding: var(--ax-space-2);
   }
 
   & .navds-copybutton__icon {
@@ -96,7 +92,7 @@
   }
 
   & > .navds-copybutton__content {
-    gap: var(--ax-spacing-1);
+    gap: var(--ax-space-2);
   }
 }
 
@@ -104,18 +100,6 @@
 .navds-copybutton__icon {
   font-size: 1.5rem;
   display: flex;
-
-  &:first-of-type {
-    margin-left: -0.25rem;
-  }
-
-  &:last-of-type {
-    margin-right: -0.25rem;
-  }
-
-  &:only-child {
-    margin: 0;
-  }
 }
 
 .navds-copybutton--active .navds-copybutton__icon {
@@ -146,14 +130,6 @@
 
   &.navds-copybutton--active {
     color: var(--ax-text-success);
-
-    &:hover {
-      color: var(--ax-text-success-strong);
-    }
-  }
-
-  &:hover {
-    color: var(--ax-text-accent-strong);
   }
 
   &:disabled {
@@ -165,11 +141,6 @@
 .navds-copybutton--neutral {
   color: var(--ax-text-subtle);
 
-  &:hover,
-  &.navds-copybutton--active {
-    color: var(--ax-text-default);
-  }
-
   &:disabled {
     color: var(--ax-text-subtle);
   }
@@ -179,5 +150,5 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-6);
 }

package/darkside/date.darkside.css

@@ -1,10 +1,10 @@
 .navds-date {
-  padding: var(--ax-spacing-4) var(--ax-spacing-3);
+  padding: var(--ax-space-16) var(--ax-space-12);
 
   .rdp-day_range_middle {
     &.rdp-day_disabled {
       color: var(--ax-text-default);
-      background: var(--ax-bg-neutral-moderateA);
+      background: var(--ax-bg-moderateA);
     }
 
     &.rdp-day_selected {
@@ -17,7 +17,7 @@
   .rdp-month,
   &.rdp-month {
     display: grid;
-    gap: var(--ax-spacing-5);
+    gap: var(--ax-space-20);
   }
 
   .navds-date__caption-label {
@@ -69,7 +69,7 @@
   .rdp-day_disabled {
     cursor: not-allowed;
     text-decoration: line-through;
-    background-color: var(--ax-bg-neutral-moderateA);
+    background-color: var(--ax-bg-moderateA);
     color: var(--ax-text-subtle);
   }
 
@@ -121,8 +121,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--ax-spacing-1);
-  padding-inline: var(--ax-spacing-1);
+  gap: var(--ax-space-4);
+  padding-inline: var(--ax-space-4);
 }
 
 .navds-date__caption-button {
@@ -172,11 +172,11 @@
 
 .navds-date__field-input {
   &.navds-text-field__input {
-    padding-right: var(--ax-spacing-12);
+    padding-right: var(--ax-space-48);
   }
 
   .navds-form-field--small & {
-    padding-right: var(--ax-spacing-8);
+    padding-right: var(--ax-space-32);
   }
 }
 
@@ -193,7 +193,7 @@
   border: none;
   background: none;
   border-radius: calc(var(--ax-border-radius-medium) - 1px);
-  padding: var(--ax-spacing-3);
+  padding: var(--ax-space-12);
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
@@ -202,7 +202,7 @@
   border-end-start-radius: 0;
 
   .navds-form-field--small & {
-    padding: var(--ax-spacing-1);
+    padding: var(--ax-space-4);
   }
 
   .navds-form-field--disabled & {
@@ -230,7 +230,7 @@
 .navds-date__week-row {
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-05);
+  gap: var(--ax-space-2);
 }
 
 .navds-date__weeknumber {
@@ -242,7 +242,7 @@
   color: var(--ax-text-subtle);
 
   .navds-date__weeknumber:active & {
-    color: var(--ax-text-neutral-contrast);
+    color: var(--ax-text-contrast);
   }
 }
 
@@ -258,21 +258,21 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  padding: var(--ax-spacing-4);
-  gap: var(--ax-spacing-2);
+  padding: var(--ax-space-16);
+  gap: var(--ax-space-8);
 }
 
 @media (min-width: 480px) {
   .navds-date {
-    padding: var(--ax-spacing-5) var(--ax-spacing-4);
+    padding: var(--ax-space-20) var(--ax-space-16);
   }
 
   .navds-date__modal-body {
-    padding: var(--ax-spacing-6);
+    padding: var(--ax-space-24);
   }
 
   .navds-date__caption {
-    gap: var(--ax-spacing-2);
+    gap: var(--ax-space-8);
   }
 
   .navds-date .rdp-button,

package/darkside/expansioncard.darkside.css

@@ -1,7 +1,7 @@
 .navds-expansioncard {
   --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
-  --__axc-expansioncard-padding-block: var(--ax-spacing-4);
-  --__axc-expansioncard-padding-inline: var(--ax-spacing-5);
+  --__axc-expansioncard-padding-block: var(--ax-space-16);
+  --__axc-expansioncard-padding-inline: var(--ax-space-20);
 
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
@@ -16,11 +16,11 @@
 
 /* ------------------------ ExpansionCard Small-size ------------------------ */
 .navds-expansioncard--small {
-  --__axc-expansioncard-padding-inline: var(--ax-spacing-4);
-  --__axc-expansioncard-padding-block: var(--ax-spacing-3);
+  --__axc-expansioncard-padding-inline: var(--ax-space-16);
+  --__axc-expansioncard-padding-block: var(--ax-space-12);
 
   & > .navds-expansioncard__header .navds-expansioncard__title--small {
-    margin-top: var(--ax-spacing-05);
+    margin-top: var(--ax-space-2);
   }
 
   & :is(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
@@ -37,7 +37,7 @@
 .navds-expansioncard__header {
   width: 100%;
   display: flex;
-  gap: var(--ax-spacing-4);
+  gap: var(--ax-space-16);
   padding: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
   border-radius: var(--__axc-expansioncard-border-radius);
   background-color: transparent;
@@ -45,7 +45,7 @@
   justify-content: space-between;
 
   &:hover {
-    background-color: var(--ax-bg-neutral-raised-hover);
+    background-color: var(--ax-bg-hover);
   }
 
   &[data-open="true"] {
@@ -76,11 +76,11 @@
 }
 
 .navds-expansioncard__title--medium {
-  margin-top: var(--ax-spacing-2);
+  margin-top: var(--ax-space-8);
 }
 
 .navds-expansioncard__title--large {
-  margin-top: var(--ax-spacing-1);
+  margin-top: var(--ax-space-4);
 }
 
 /* ----------------------- ExpansionCard Header Button ---------------------- */
@@ -122,7 +122,7 @@
 }
 
 .navds-expansioncard__header:hover > .navds-expansioncard__header-button {
-  background-color: var(--ax-bg-neutral-moderate-hoverA);
+  background-color: var(--ax-bg-moderate-hoverA);
 }
 
 .navds-expansioncard__header-chevron {

package/darkside/form/combobox.darkside.css

@@ -1,8 +1,8 @@
 .navds-combobox__wrapper {
   --__axc-combobox-icon-size: 1.5rem;
-  --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-2);
-  --__axc-combobox-list-item-padding-block: var(--ax-spacing-3);
-  --__axc-combobox-list-item-padding-inline: var(--ax-spacing-3);
+  --__axc-combobox-wrapper-inner-padding: var(--ax-space-8);
+  --__axc-combobox-list-item-padding-block: var(--ax-space-12);
+  --__axc-combobox-list-item-padding-inline: var(--ax-space-12);
   --__axc-combobox-border-width: 1px;
   --__axc-combobox-input-height: 2rem;
 
@@ -15,15 +15,15 @@
 
 .navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) {
   & .navds-combobox__wrapper:hover {
-    border-color: var(--ax-border-focus);
+    border-color: var(--ax-border-accent-strong);
   }
 }
 
 .navds-form-field--small .navds-combobox__wrapper {
   --__axc-combobox-icon-size: 1.25rem;
-  --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-1);
-  --__axc-combobox-list-item-padding-block: var(--ax-spacing-1-alt);
-  --__axc-combobox-list-item-padding-inline: var(--ax-spacing-2);
+  --__axc-combobox-wrapper-inner-padding: var(--ax-space-4);
+  --__axc-combobox-list-item-padding-block: var(--ax-space-6);
+  --__axc-combobox-list-item-padding-inline: var(--ax-space-8);
   --__axc-combobox-input-height: 1.5rem;
 }
 
@@ -31,6 +31,10 @@
   opacity: var(--ax-opacity-disabled);
 
   & .navds-combobox__wrapper {
+    &:hover {
+      border-color: var(--ax-border-default);
+    }
+
     & *:hover {
       cursor: not-allowed;
     }
@@ -50,12 +54,12 @@
 
   & .navds-combobox__selected-options {
     & .navds-chips__chip {
-      background-color: var(--ax-bg-neutral-moderateA);
+      background-color: var(--ax-bg-moderateA);
     }
   }
 
   & .navds-combobox__button-toggle-list {
-    color: var(--ax-bg-neutral-moderate);
+    color: var(--ax-bg-moderate);
   }
 
   & .navds-combobox__wrapper {
@@ -65,7 +69,7 @@
 
   & .navds-text-field__input,
   & .navds-combobox__input {
-    background-color: var(--ax-bg-neutral-moderate);
+    background-color: var(--ax-bg-moderate);
   }
 }
 
@@ -80,9 +84,9 @@
   border-radius: var(--ax-border-radius-medium);
 
   &:has(.navds-combobox__input:focus-visible) {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
-    border-color: var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-color: var(--ax-border-accent-strong);
   }
 
   &:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
@@ -113,15 +117,19 @@
   &:hover {
     cursor: text;
   }
+
+  .navds-combobox--disabled &:hover {
+    border-color: var(--ax-border-default);
+  }
 }
 
 .navds-combobox--error {
   & .navds-combobox__wrapper-inner {
-    border-color: var(--ax-border-danger);
-    box-shadow: 0 0 0 1px var(--ax-border-danger);
+    border-color: var(--ax-border-danger-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 
     &:has(.navds-combobox__input:focus-visible) {
-      border-color: var(--ax-border-danger);
+      border-color: var(--ax-border-danger-strong);
     }
   }
 }
@@ -175,7 +183,7 @@
   }
 
   .navds-combobox__selected-options > li:only-child > & {
-    margin-left: var(--ax-spacing-1);
+    margin-left: var(--ax-space-4);
   }
 }
 
@@ -230,13 +238,13 @@
 /* dropdown & non selectable dropdown items */
 
 .navds-combobox__list {
-  max-height: 290px;
+  max-height: 316px;
   overflow: clip;
   position: absolute;
   left: 0;
   right: 0;
   z-index: 10;
-  top: calc(100% + var(--ax-spacing-2));
+  top: calc(100% + var(--ax-space-8));
   border: 1px solid var(--ax-border-subtleA);
   display: flex;
   flex-direction: column;
@@ -267,8 +275,8 @@
   padding-inline: var(--__axc-combobox-list-item-padding-inline);
   border-radius: var(--ax-border-radius-medium);
   border: 0;
-  margin-inline: var(--ax-spacing-2);
-  margin-block: var(--ax-spacing-1);
+  margin-inline: var(--ax-space-8);
+  margin-block: var(--ax-space-2);
   scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
 }
 
@@ -282,11 +290,11 @@
 }
 
 .navds-combobox__list-item--max-selected {
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   margin: 0;
   border-radius: 0;
-  border-bottom: 1px solid var(--ax-border-neutral-subtle);
-  padding-block: var(--ax-spacing-2);
+  border-bottom: 1px solid var(--ax-border-subtle);
+  padding-block: var(--ax-space-8);
   line-height: var(--ax-font-line-height-large);
 }
 
@@ -301,13 +309,12 @@
   background-color: inherit;
   align-items: stretch;
   padding: 0;
-  padding-block: var(--ax-spacing-1);
+  padding-block: var(--ax-space-4);
 }
 
 .navds-combobox__list-item--focus {
   cursor: pointer;
   outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
 }
 
 .navds-combobox__list-item {
@@ -321,10 +328,11 @@
   & mark {
     background-color: transparent;
     font-weight: var(--ax-font-weight-bold);
+    color: var(--ax-text-default);
   }
 
   & svg {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-default);
   }
 }
 
@@ -344,14 +352,14 @@
   justify-content: flex-start;
   gap: 0.25rem;
   margin: 0;
-  margin-block: calc(var(--ax-spacing-1) * -1);
-  padding-block: var(--ax-spacing-4);
+  margin-block-start: calc(var(--ax-space-4) * -1);
 
   & svg {
     color: var(--ax-text-default);
   }
 
   &:only-child {
+    margin-block: calc(var(--ax-space-4) * -1);
     border: none;
   }
 }
@@ -383,7 +391,7 @@
   }
 
   .navds-combobox__selected-options {
-    gap: var(--ax-spacing-1);
+    gap: var(--ax-space-4);
   }
 }
 

package/darkside/form/error-summary.darkside.css

@@ -1,6 +1,6 @@
 .navds-error-summary {
   background-color: var(--ax-bg-default);
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
   border: 4px solid var(--ax-border-danger);
   border-radius: var(--ax-border-radius-xlarge);
   outline-offset: 2px;
@@ -18,21 +18,21 @@
 }
 
 .navds-error-summary--small {
-  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  padding: var(--ax-space-12) var(--ax-space-16);
 
   & .navds-error-summary__heading {
-    scroll-margin-top: var(--ax-spacing-4);
+    scroll-margin-top: var(--ax-space-16);
   }
 
   & > .navds-error-summary__list {
-    margin: var(--ax-spacing-2) 0;
-    gap: var(--ax-spacing-2);
-    padding-left: var(--ax-spacing-5);
+    margin: var(--ax-space-8) 0;
+    gap: var(--ax-space-8);
+    padding-left: var(--ax-space-20);
   }
 }
 
 .navds-error-summary__heading {
-  scroll-margin-top: var(--ax-spacing-6);
+  scroll-margin-top: var(--ax-space-24);
 
   &:focus {
     outline: none;
@@ -40,10 +40,10 @@
 }
 
 .navds-error-summary__list {
-  margin: var(--ax-spacing-3) 0;
+  margin: var(--ax-space-12) 0;
   display: flex;
   flex-direction: column;
-  gap: var(--ax-spacing-3);
-  padding-left: var(--ax-spacing-6);
+  gap: var(--ax-space-12);
+  padding-left: var(--ax-space-24);
   list-style: inherit;
 }

package/darkside/form/fieldset.darkside.css

@@ -6,7 +6,7 @@
 }
 
 .navds-fieldset > :not(:first-child, :empty) {
-  margin-top: var(--ax-spacing-2);
+  margin-top: var(--ax-space-8);
 }
 
 .navds-fieldset__description {

package/darkside/form/file-upload.darkside.css

@@ -1,7 +1,7 @@
 /* --------------------------- FileUpload Dropzone -------------------------- */
 .navds-dropzone__area {
   --__axc-dropzone-background: var(--ax-bg-input);
-  --__axc-dropzone-icon-padding: var(--ax-spacing-2);
+  --__axc-dropzone-icon-padding: var(--ax-space-8);
   --__axc-dropzone-animation-length-long: 400ms;
   --__axc-dropzone-animation-length-short: 250ms;
   --__axc-dropzone-animation-ease-out: cubic-bezier(0.3, 1, 0.3, 1);
@@ -12,9 +12,9 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--ax-spacing-4);
+  gap: var(--ax-space-16);
   text-align: center;
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
   border: 1px dashed var(--ax-border-default);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--__axc-dropzone-background);
@@ -89,12 +89,12 @@
 
 .navds-dropzone--error > .navds-dropzone__area {
   border-color: transparent;
-  outline: 2px solid var(--ax-border-danger);
+  outline: 2px solid var(--ax-border-danger-strong);
   outline-offset: -1px;
 }
 
 .navds-dropzone__area-release {
-  top: var(--ax-spacing-4);
+  top: var(--ax-space-16);
   display: grid;
   position: absolute;
   z-index: 1;
@@ -108,7 +108,7 @@
   display: grid;
   padding: var(--__axc-dropzone-icon-padding);
   border-radius: var(--ax-border-radius-full);
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   transition:
     background-color 300ms var(--__axc-dropzone-animation-ease-out),
     font-size 300ms var(--__axc-dropzone-animation-ease-out);
@@ -140,7 +140,7 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 /* ----------------------------- FileUpload Item ---------------------------- */
@@ -158,23 +158,23 @@ li.navds-file-item {
   outline-offset: -1px;
   transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
   border-radius: var(--ax-border-radius-xlarge);
-  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  padding: var(--ax-space-12) var(--ax-space-16);
   display: flex;
-  gap: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
   align-items: flex-start;
 }
 
 .navds-file-item--error > .navds-file-item__inner {
-  outline: 2px solid var(--ax-border-danger);
+  outline: 2px solid var(--ax-border-danger-strong);
 }
 
 .navds-file-item__icon {
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   color: var(--ax-text-default);
   border-radius: var(--ax-border-radius-full);
   min-height: 2.5rem;
   min-width: 2.5rem;
-  margin-top: var(--ax-spacing-05);
+  margin-top: var(--ax-space-2);
   display: grid;
   place-content: center;
   transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
@@ -208,14 +208,14 @@ li.navds-file-item {
 
   & .navds-file-item__error {
     grid-template-rows: 1fr;
-    padding-top: var(--ax-spacing-1);
+    padding-top: var(--ax-space-4);
   }
 }
 
 .navds-file-item__error-content {
   min-height: 0;
   display: flex;
-  gap: var(--ax-spacing-1);
+  gap: var(--ax-space-4);
 
   & > svg {
     flex-shrink: 0;

package/darkside/form/form-progress.darkside.css

@@ -1,5 +1,5 @@
 .navds-form-progress__bar {
-  margin-bottom: var(--ax-spacing-2);
+  margin-bottom: var(--ax-space-8);
 }
 
 .navds-form-progress__button {
@@ -51,7 +51,7 @@
 .navds-form-progress__stepper {
   border: 1px solid var(--ax-border-subtle);
   border-radius: var(--ax-border-radius-large);
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
-  margin-top: var(--ax-spacing-1);
+  padding: var(--ax-space-16) var(--ax-space-20);
+  margin-top: var(--ax-space-4);
   background: var(--ax-bg-raised);
 }