@navikt/ds-css 7.11.0 → 7.12.0

package/darkside/form/combobox.darkside.css

@@ -32,7 +32,7 @@
 
   & .navds-combobox__wrapper {
     &:hover {
-      border-color: var(--ax-border-default);
+      border-color: var(--ax-border-neutral);
     }
 
     & *:hover {
@@ -54,22 +54,22 @@
 
   & .navds-combobox__selected-options {
     & .navds-chips__chip {
-      background-color: var(--ax-bg-moderateA);
+      background-color: var(--ax-bg-neutral-moderateA);
     }
   }
 
   & .navds-combobox__button-toggle-list {
-    color: var(--ax-bg-moderate);
+    color: var(--ax-bg-neutral-moderate);
   }
 
   & .navds-combobox__wrapper {
-    border-color: var(--ax-border-subtle);
+    border-color: var(--ax-border-neutral-subtle);
     overflow: clip;
   }
 
   & .navds-text-field__input,
   & .navds-combobox__input {
-    background-color: var(--ax-bg-moderate);
+    background-color: var(--ax-bg-neutral-moderate);
   }
 }
 
@@ -80,7 +80,7 @@
 }
 
 .navds-combobox__wrapper-inner {
-  border: 1px solid var(--ax-border-default);
+  border: 1px solid var(--ax-border-neutral);
   border-radius: var(--ax-border-radius-large);
 
   &:has(.navds-combobox__input:focus-visible) {
@@ -91,7 +91,7 @@
 
   &:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
     outline: none;
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
   }
 
   &.navds-text-field__input {
@@ -119,7 +119,7 @@
   }
 
   .navds-combobox--disabled &:hover {
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
   }
 }
 
@@ -215,7 +215,7 @@
 }
 
 .navds-combobox__button-toggle-list {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -226,10 +226,10 @@
   padding: 0;
 
   &:hover {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
 
     &:active {
-      color: var(--ax-text-accent-strong);
+      color: var(--ax-text-accent);
     }
   }
 }
@@ -244,12 +244,12 @@
   right: 0;
   z-index: 10;
   top: calc(100% + var(--ax-space-8));
-  border: 1px solid var(--ax-border-subtleA);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   display: flex;
   flex-direction: column;
   border-radius: var(--ax-border-radius-large);
   background-color: var(--ax-bg-raised);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   overscroll-behavior: contain;
   box-shadow: var(--ax-shadow-dialog);
 
@@ -289,10 +289,10 @@
 }
 
 .navds-combobox__list-item--max-selected {
-  background-color: var(--ax-bg-moderateA);
+  background-color: var(--ax-bg-neutral-moderateA);
   margin: 0;
   border-radius: 0;
-  border-bottom: 1px solid var(--ax-border-subtle);
+  border-bottom: 1px solid var(--ax-border-neutral-subtle);
   padding-block: var(--ax-space-8);
   line-height: var(--ax-font-line-height-large);
 }
@@ -327,11 +327,11 @@
   & mark {
     background-color: transparent;
     font-weight: var(--ax-font-weight-bold);
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   & svg {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 }
 
@@ -354,7 +354,7 @@
   margin-block-start: calc(var(--ax-space-4) * -1);
 
   & svg {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   &:only-child {

package/darkside/form/fieldset.darkside.css

@@ -10,7 +10,7 @@
 }
 
 .navds-fieldset__description {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-fieldset > .navds-fieldset__description:not(:empty) {

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

@@ -15,10 +15,10 @@
   gap: var(--ax-space-16);
   text-align: center;
   padding: var(--ax-space-16) var(--ax-space-20);
-  border: 1px dashed var(--ax-border-default);
+  border: 1px dashed var(--ax-border-neutral);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--__axc-dropzone-background);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   transition: background-color var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
   cursor: pointer;
 
@@ -40,9 +40,9 @@
   }
 
   &[data-disabled="true"] {
-    --__axc-dropzone-background: var(--ax-bg-soft);
+    --__axc-dropzone-background: var(--ax-bg-neutral-soft);
 
-    border-color: var(--ax-border-subtleA);
+    border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
   }
 }
@@ -53,7 +53,7 @@
   }
 
   & > .navds-dropzone__area::after {
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent);
     background-color: var(--ax-bg-accent-moderateA);
     content: "";
     inset: 0;
@@ -112,7 +112,7 @@
   display: grid;
   padding: var(--__axc-dropzone-icon-padding);
   border-radius: var(--ax-border-radius-full);
-  background-color: var(--ax-bg-moderateA);
+  background-color: var(--ax-bg-neutral-moderateA);
   transition:
     background-color 300ms var(--__axc-dropzone-animation-ease-out),
     font-size 300ms var(--__axc-dropzone-animation-ease-out);
@@ -134,13 +134,13 @@
 }
 
 .navds-dropzone--dragging .navds-dropzone__area-release {
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
   top: 50%;
   transform: translateY(-50%);
 }
 
 .navds-dropzone__area-disabled {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -158,7 +158,7 @@ li.navds-file-item {
 
 .navds-file-item__inner {
   background-color: var(--ax-bg-raised);
-  border: 1px solid var(--ax-border-subtleA);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   outline-offset: -1px;
   transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
   border-radius: var(--ax-border-radius-xlarge);
@@ -173,8 +173,8 @@ li.navds-file-item {
 }
 
 .navds-file-item__icon {
-  background-color: var(--ax-bg-moderateA);
-  color: var(--ax-text-default);
+  background-color: var(--ax-bg-neutral-moderateA);
+  color: var(--ax-text-neutral);
   border-radius: var(--ax-border-radius-full);
   min-height: 2.5rem;
   min-width: 2.5rem;

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

@@ -21,37 +21,35 @@
 
 .navds-form-progress__collapsible {
   display: grid;
-  grid-template-rows: 0fr;
+  visibility: hidden;
   overflow: hidden;
-  transition: grid-template-rows 250ms cubic-bezier(0.2, 0, 0, 1);
+  border: 1px solid var(--ax-border-neutral-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+  background: var(--ax-bg-raised);
+  padding-inline: var(--ax-space-20);
+  padding-block: 0;
+  opacity: 0.001;
+  transition-duration: 1s;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  transition-property: margin-top, opacity, visibility, padding-block-start, grid-template-rows;
+  grid-template-rows: 0fr;
+
+  /* border-block leaves 2px of space when closes, so offset 2px with margin */
+  margin-top: -2px;
 
   &[hidden] {
-    display: grid !important;
+    display: grid;
   }
 
   &[data-state="open"] {
+    margin-top: var(--ax-space-4);
     grid-template-rows: 1fr;
+    visibility: visible;
+    padding-block: var(--ax-space-16);
+    opacity: 1;
   }
 }
 
 .navds-form-progress__collapsible-content {
   min-height: 0;
-  opacity: 0.01;
-  visibility: hidden;
-  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
-  transition-duration: 250ms;
-  transition-property: opacity, visibility;
-}
-
-.navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
-  visibility: visible;
-  opacity: 1;
-}
-
-.navds-form-progress__stepper {
-  border: 1px solid var(--ax-border-subtle);
-  border-radius: var(--ax-border-radius-xlarge);
-  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,13 +1,13 @@
 .navds-form-summary {
   overflow: hidden;
-  border: 1px solid var(--ax-border-subtleA);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   border-radius: var(--ax-border-radius-xlarge);
   background: var(--ax-bg-raised);
 }
 
 .navds-form-summary__header {
-  background: var(--ax-bg-moderateA);
-  padding: var(--ax-space-16) var(--ax-space-24);
+  background: var(--ax-bg-neutral-moderateA);
+  padding: var(--ax-space-20) var(--ax-space-20) var(--ax-space-16) var(--ax-space-20);
   display: flex;
   justify-content: space-between;
   gap: 0 var(--ax-space-12);
@@ -15,7 +15,7 @@
 
 @media (max-width: 479px) {
   .navds-form-summary__header {
-    padding: var(--ax-space-12) var(--ax-space-16);
+    padding: var(--ax-space-16) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
     flex-direction: column;
   }
 }
@@ -27,24 +27,24 @@
 }
 
 .navds-form-summary > .navds-form-summary__answers {
-  border-top: 1px solid var(--ax-border-subtleA);
+  border-top: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 .navds-form-summary__answers {
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-16) var(--ax-space-20) var(--ax-space-20) var(--ax-space-20);
   margin: 0;
 }
 
 @media (max-width: 479px) {
   .navds-form-summary__answers {
-    padding: var(--ax-space-16);
+    padding: var(--ax-space-12) var(--ax-space-16) var(--ax-space-16) var(--ax-space-16);
   }
 }
 
 .navds-form-summary__answer:not(:last-child) {
   margin-bottom: var(--ax-space-16);
   padding-bottom: var(--ax-space-16);
-  border-bottom: 1px solid var(--ax-border-subtleA);
+  border-bottom: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 .navds-form-summary__answer:has(.navds-form-summary__answer) {

package/darkside/form/form.darkside.css

@@ -6,7 +6,7 @@
 
 .navds-form-field__description {
   margin-top: -0.375rem;
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-form-field--disabled {
@@ -19,7 +19,7 @@
 }
 
 .navds-form-field__subdescription {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-form-field--readonly > :where(.navds-form-field__label) {

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

@@ -23,8 +23,8 @@
   display: flex;
   gap: var(--ax-space-8);
 
-  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-moderate);
-  --__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
+  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
+  --__axc-radio-checkbox-readonly-border: var(--ax-border-neutral-subtle);
 }
 
 .navds-checkbox__label::before,
@@ -35,7 +35,7 @@
   flex-shrink: 0;
   width: 1.5rem;
   height: 1.5rem;
-  border: 2px solid var(--ax-border-default);
+  border: 2px solid var(--ax-border-neutral);
 }
 
 .navds-radio__label::before {
@@ -156,8 +156,8 @@
 }
 
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
-.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--ax-text-accent);
+.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label {
+  color: var(--ax-text-accent-subtle);
 }
 
 .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
@@ -209,7 +209,7 @@
 
 .navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
 .navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:not(:disabled) + .navds-checkbox__label::before,
@@ -226,19 +226,19 @@
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-  background-color: var(--ax-bg-strong);
+  background-color: var(--ax-bg-neutral-strong);
   border-width: 0;
   box-shadow:
-    inset 0 0 0 2px var(--ax-border-subtle),
-    inset 0 0 0 8px var(--ax-bg-moderate);
+    inset 0 0 0 2px var(--ax-border-neutral-subtle),
+    inset 0 0 0 8px var(--ax-bg-neutral-moderate);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
-  background-color: var(--ax-text-subtle);
+  background-color: var(--ax-text-neutral-subtle);
 }
 
 @media (forced-colors: active) {

package/darkside/form/search.darkside.css

@@ -103,7 +103,7 @@
 
 .navds-search__button-search.navds-button--secondary {
   --__axc-button-border-width: 1px;
-  --__axc-button-border-color: var(--ax-border-default);
+  --__axc-button-border-color: var(--ax-border-neutral);
 
   &:not(:hover, :active) {
     background-color: var(--ax-bg-input);
@@ -112,10 +112,6 @@
   &:hover:not(:disabled) {
     --__axc-button-border-color: var(--ax-border-accent-strong);
   }
-
-  &:active:not(:disabled) {
-    --__axc-button-border-color: transparent;
-  }
 }
 
 /* Special-case where we hover/focus input, and want the secondary-button to match input-border */

package/darkside/form/select.darkside.css

@@ -2,8 +2,8 @@
   appearance: none;
   background-color: var(--ax-bg-input);
   border-radius: var(--ax-border-radius-large);
-  border: 1px solid var(--ax-border-default);
-  color: var(--ax-text-default);
+  border: 1px solid var(--ax-border-neutral);
+  color: var(--ax-text-neutral);
   width: 100%;
   box-sizing: border-box;
   min-height: 3rem;
@@ -36,7 +36,7 @@
   position: relative;
   display: flex;
   width: 100%;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 /* ------------------------------- Select Icon ------------------------------ */
@@ -46,7 +46,7 @@
   right: var(--ax-space-8);
   pointer-events: none;
   align-self: center;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   @media (forced-colors: active) {
     & {
@@ -80,16 +80,16 @@
 /* ----------------------------- Select disabled ---------------------------- */
 .navds-select__input:disabled {
   background-color: var(--ax-bg-input);
-  border: 1px solid var(--ax-border-default);
+  border: 1px solid var(--ax-border-neutral);
   box-shadow: none;
   cursor: not-allowed;
 
   /* Chrome-fix */
   opacity: 1;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   & > option {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   @media (forced-colors: active) {
@@ -102,8 +102,8 @@
 /* ----------------------------- Select Readonly ---------------------------- */
 .navds-select--readonly {
   & .navds-select__input {
-    background-color: var(--ax-bg-moderate);
-    border-color: var(--ax-border-subtleA);
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
 
     @media (forced-colors: active) {
@@ -116,6 +116,6 @@
   }
 
   & .navds-select__chevron {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 }

package/darkside/form/switch.darkside.css

@@ -27,7 +27,7 @@
 /* -------------------------- Switch content/label -------------------------- */
 .navds-switch__label-wrapper {
   cursor: pointer;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-switch__content {
@@ -70,7 +70,7 @@
 
 .navds-switch__input:hover ~ .navds-switch__label-wrapper,
 .navds-switch__label-wrapper:hover {
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 }
 
 .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
@@ -86,7 +86,7 @@
   top: var(--ax-space-12);
   left: 0;
   border-radius: var(--ax-border-radius-full);
-  border: 2px solid var(--ax-border-default);
+  border: 2px solid var(--ax-border-neutral);
   transition-property: background-color, border-color;
   transition-duration: 100ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -107,7 +107,7 @@
 
   .navds-switch__input:disabled ~ & {
     background-color: var(--ax-bg-input);
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
   }
 
   .navds-switch__input:checked:disabled ~ & {
@@ -123,7 +123,7 @@
 
 /* ------------------------------ Switch Thumb ------------------------------ */
 .navds-switch__thumb {
-  background-color: var(--ax-bg-strong);
+  background-color: var(--ax-bg-neutral-strong);
   border-radius: var(--ax-border-radius-full);
   width: 1.125rem;
   height: 1.125rem;
@@ -139,7 +139,7 @@
   .navds-switch__input:checked ~ .navds-switch__track > & {
     background-color: var(--ax-bg-raised);
     transform: translateX(1.25rem);
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
     width: 1.25rem;
     height: 1.25rem;
     left: 0;
@@ -198,8 +198,8 @@
   & > .navds-switch__input:hover ~ .navds-switch__track,
   & > .navds-switch__input:checked ~ .navds-switch__track,
   & > .navds-switch__input:checked:hover ~ .navds-switch__track {
-    background-color: var(--ax-bg-moderate);
-    border-color: var(--ax-border-subtleA);
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
   }
 
   & > .navds-switch__label-wrapper,
@@ -209,7 +209,7 @@
 
   & > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
   & .navds-switch__label-wrapper:hover {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   & .navds-switch__label {
@@ -217,12 +217,12 @@
   }
 
   & .navds-switch__thumb {
-    background-color: var(--ax-bg-strong);
+    background-color: var(--ax-bg-neutral-strong);
   }
 
   & > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-    background-color: var(--ax-bg-strong);
-    color: var(--ax-text-contrast);
+    background-color: var(--ax-bg-neutral-strong);
+    color: var(--ax-text-neutral-contrast);
   }
 
   @media (hover: hover) and (pointer: fine) {

package/darkside/form/text-field.darkside.css

@@ -3,10 +3,10 @@
   padding: var(--ax-space-8);
   background: var(--ax-bg-input);
   border-radius: var(--ax-border-radius-large);
-  border: 1px solid var(--ax-border-default);
+  border: 1px solid var(--ax-border-neutral);
   min-height: 3rem;
   width: 100%;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &:hover {
     border-color: var(--ax-border-accent-strong);
@@ -20,12 +20,12 @@
 
   &:disabled {
     background-color: var(--ax-bg-input);
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
     cursor: not-allowed;
   }
 
   &::placeholder {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 
   &[size] {
@@ -44,8 +44,8 @@
 }
 
 .navds-text-field--readonly .navds-text-field__input {
-  background-color: var(--ax-bg-moderate);
-  border-color: var(--ax-border-subtleA);
+  background-color: var(--ax-bg-neutral-moderate);
+  border-color: var(--ax-border-neutral-subtleA);
   cursor: default;
 }
 

package/darkside/form/textarea.darkside.css

@@ -5,14 +5,14 @@
   padding: var(--ax-space-8);
   background-color: var(--ax-bg-input);
   border-radius: var(--ax-border-radius-large);
-  border: 1px solid var(--ax-border-default);
+  border: 1px solid var(--ax-border-neutral);
   resize: none;
   width: 100%;
   display: block;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &::placeholder {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 
   &:hover {
@@ -27,7 +27,7 @@
 
   &:disabled {
     background-color: var(--ax-bg-input);
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
     cursor: not-allowed;
   }
 
@@ -36,19 +36,19 @@
   }
 
   .navds-textarea--readonly & {
-    background-color: var(--ax-bg-moderate);
-    border-color: var(--ax-border-subtleA);
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
   }
 }
 
 .navds-textarea__counter {
   margin-top: -0.25rem;
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-textarea__counter--error {
-  color: var(--ax-text-danger);
+  color: var(--ax-text-danger-subtle);
 }
 
 .navds-textarea__sr-counter {