@navikt/ds-css 7.9.1 → 7.9.2

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;
 
@@ -21,9 +21,9 @@
 
 .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;
 }
 
@@ -50,12 +50,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 +65,7 @@
 
   & .navds-text-field__input,
   & .navds-combobox__input {
-    background-color: var(--ax-bg-neutral-moderate);
+    background-color: var(--ax-bg-moderate);
   }
 }
 
@@ -175,7 +175,7 @@
   }
 
   .navds-combobox__selected-options > li:only-child > & {
-    margin-left: var(--ax-spacing-1);
+    margin-left: var(--ax-space-4);
   }
 }
 
@@ -236,7 +236,7 @@
   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 +267,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-4);
   scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
 }
 
@@ -282,11 +282,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,7 +301,7 @@
   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 {
@@ -344,8 +344,8 @@
   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: calc(var(--ax-space-4) * -1);
+  padding-block: var(--ax-space-16);
 
   & svg {
     color: var(--ax-text-default);
@@ -383,7 +383,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);
@@ -94,7 +94,7 @@
 }
 
 .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,9 +158,9 @@ 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;
 }
 
@@ -169,12 +169,12 @@ li.navds-file-item {
 }
 
 .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);
 }

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

@@ -1,28 +1,28 @@
 .navds-form-summary {
   overflow: hidden;
-  border: 1px solid var(--ax-border-neutral-subtleA);
+  border: 1px solid var(--ax-border-subtleA);
   border-radius: var(--ax-border-radius-xlarge);
   background: var(--ax-bg-raised);
 }
 
 .navds-form-summary__header {
-  background: var(--ax-bg-neutral-moderateA);
-  padding: var(--ax-spacing-4) var(--ax-spacing-6);
+  background: var(--ax-bg-moderateA);
+  padding: var(--ax-space-16) var(--ax-space-24);
   display: flex;
   justify-content: space-between;
-  gap: 0 var(--ax-spacing-3);
+  gap: 0 var(--ax-space-12);
 }
 
 @media (max-width: 479px) {
   .navds-form-summary__header {
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-space-12) var(--ax-space-16);
     flex-direction: column;
   }
 }
 
 .navds-form-summary__edit {
   flex-shrink: 0;
-  margin-top: var(--ax-spacing-1);
+  margin-top: var(--ax-space-4);
   align-self: flex-start;
 }
 
@@ -31,24 +31,24 @@
 }
 
 .navds-form-summary__answers {
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
   margin: 0;
 }
 
 @media (max-width: 479px) {
   .navds-form-summary__answers {
-    padding: var(--ax-spacing-4);
+    padding: var(--ax-space-16);
   }
 }
 
 .navds-form-summary__answer:not(:last-child) {
-  margin-bottom: var(--ax-spacing-4);
-  padding-bottom: var(--ax-spacing-4);
+  margin-bottom: var(--ax-space-16);
+  padding-bottom: var(--ax-space-16);
   border-bottom: 1px solid var(--ax-border-subtleA);
 }
 
 .navds-form-summary__answer:has(.navds-form-summary__answer) {
-  padding-bottom: var(--ax-spacing-6);
+  padding-bottom: var(--ax-space-24);
 }
 
 .navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
@@ -57,22 +57,22 @@
 
 @media (max-width: 479px) {
   .navds-form-summary__answer:not(:last-child) {
-    margin-bottom: var(--ax-spacing-3);
-    padding-bottom: var(--ax-spacing-3);
+    margin-bottom: var(--ax-space-12);
+    padding-bottom: var(--ax-space-12);
   }
 
   .navds-form-summary__answer:has(.navds-form-summary__answer) {
-    padding-bottom: var(--ax-spacing-5);
+    padding-bottom: var(--ax-space-20);
   }
 }
 
 .navds-form-summary__value:first-of-type {
-  margin-top: var(--ax-spacing-1);
+  margin-top: var(--ax-space-4);
 }
 
 .navds-form-summary__value .navds-form-summary__answers {
-  margin-top: var(--ax-spacing-2);
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  margin-top: var(--ax-space-8);
+  padding: var(--ax-space-16) var(--ax-space-20);
   background: var(--ax-bg-info-moderateA);
   border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-info-subtleA);

package/darkside/form/form.darkside.css

@@ -1,7 +1,7 @@
 .navds-form-field {
   display: grid;
   justify-items: start;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 .navds-form-field__description {
@@ -27,8 +27,8 @@
 }
 
 .navds-form-field__readonly-icon {
-  margin-top: var(--ax-spacing-05);
-  margin-right: var(--ax-spacing-1);
+  margin-top: var(--ax-space-2);
+  margin-right: var(--ax-space-4);
   flex-shrink: 0;
   align-self: flex-start;
 }

package/darkside/form/radio-checkbox.darkside.css

@@ -18,12 +18,12 @@
 
 .navds-checkbox__label,
 .navds-radio__label {
-  padding: var(--ax-spacing-3) 0;
+  padding: var(--ax-space-12) 0;
   cursor: pointer;
   display: flex;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 
-  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
+  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-moderate);
   --__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
 }
 
@@ -59,7 +59,7 @@
 
 .navds-checkbox--small > .navds-checkbox__label,
 .navds-radio--small > .navds-radio__label {
-  padding: var(--ax-spacing-1-alt) 0;
+  padding: var(--ax-space-6) 0;
 }
 
 .navds-checkbox--small > .navds-checkbox__label::before,
@@ -78,7 +78,7 @@
   content: "";
   position: absolute;
   top: 50%;
-  transform: translate(var(--ax-spacing-1-alt), -50%);
+  transform: translate(var(--ax-space-6), -50%);
   background-color: var(--ax-bg-default);
   width: 0.75rem;
   height: 0.25rem;
@@ -108,7 +108,7 @@
   color: var(--ax-bg-default);
   position: absolute;
   height: 1.5rem;
-  transform: translate(var(--ax-spacing-1-alt));
+  transform: translate(var(--ax-space-6));
   pointer-events: none;
 
   /* Fixed edcase where when using in shadow-dom, svg will not center */
@@ -215,11 +215,11 @@
 }
 
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-  background-color: var(--ax-bg-neutral-strong);
+  background-color: var(--ax-bg-strong);
   border-width: 0;
   box-shadow:
     inset 0 0 0 2px var(--ax-border-subtle),
-    inset 0 0 0 8px var(--ax-bg-neutral-moderate);
+    inset 0 0 0 8px var(--ax-bg-moderate);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {