@navikt/ds-css 7.21.1 → 7.23.0

package/darkside/date.darkside.css

@@ -8,8 +8,8 @@
     }
 
     &.rdp-day_selected {
-      background-color: var(--ax-bg-accent-moderate-pressedA);
-      box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
+      background-color: var(--ax-bg-moderate-pressedA);
+      box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
       color: var(--ax-text-neutral);
     }
   }
@@ -35,19 +35,19 @@
     width: 2.5rem;
     height: 2.5rem;
     text-align: center;
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
   }
 
   .rdp-day_range_start {
-    border-radius: 100% var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge) 100%;
+    border-radius: 100% var(--ax-radius-12) var(--ax-radius-12) 100%;
   }
 
   .rdp-day_range_end:not(.rdp-day_range_start) {
-    border-radius: var(--ax-border-radius-large) 100% 100% var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8) 100% 100% var(--ax-radius-8);
   }
 
   .rdp-day_range_start.rdp-day_range_end {
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
   }
 
   .aksel-date__field {
@@ -59,8 +59,8 @@
 
   .rdp-day_selected,
   .aksel-monthpicker__month--selected {
-    color: var(--ax-text-accent-contrast);
-    background: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-contrast);
+    background: var(--ax-bg-strong-pressed);
     cursor: pointer;
   }
 
@@ -73,7 +73,7 @@
 
   .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
   .aksel-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
-    background: var(--ax-bg-accent-moderate-hoverA);
+    background: var(--ax-bg-moderate-hoverA);
     cursor: pointer;
   }
 
@@ -84,8 +84,8 @@
       width: 6px;
       height: 6px;
       display: block;
-      background-color: var(--ax-text-accent-subtle);
-      border-radius: var(--ax-border-radius-full);
+      background-color: var(--ax-text-subtle);
+      border-radius: var(--ax-radius-full);
       content: "";
       position: absolute;
       bottom: 5px;
@@ -96,7 +96,7 @@
     &.rdp-day_selected:not(.rdp-day_range_middle),
     &:active {
       &::before {
-        background-color: var(--ax-text-accent-contrast);
+        background-color: var(--ax-text-contrast);
       }
     }
   }
@@ -140,7 +140,7 @@
   width: 3rem;
   height: 3rem;
   text-transform: capitalize;
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   cursor: pointer;
 }
 
@@ -162,8 +162,8 @@
     }
 
     &:active:not(:disabled) {
-      color: var(--ax-text-accent-contrast);
-      background-color: var(--ax-bg-accent-strong-pressed);
+      color: var(--ax-text-contrast);
+      background-color: var(--ax-bg-strong-pressed);
     }
   }
 }
@@ -190,7 +190,7 @@
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: calc(var(--ax-border-radius-large) - 1px);
+  border-radius: calc(var(--ax-radius-8) - 1px);
   padding: var(--ax-space-12);
   align-items: center;
   justify-content: center;

package/darkside/dropdown.darkside.css

@@ -46,15 +46,15 @@
   align-items: center;
   gap: var(--ax-space-8);
   padding: var(--ax-space-4);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-radius-4);
   color: var(--ax-text-neutral);
 
   &:hover {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &:active {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
+    background-color: var(--ax-bg-moderate-pressedA);
   }
 
   &:focus-visible {

package/darkside/expansioncard.darkside.css

@@ -1,16 +1,20 @@
 .aksel-expansioncard {
-  --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
+  --__axc-expansioncard-border-radius: calc(var(--ax-radius-12) - 1px);
   --__axc-expansioncard-padding-block: var(--ax-space-20);
   --__axc-expansioncard-padding-inline: var(--ax-space-20);
 
-  border-radius: var(--ax-border-radius-xlarge);
-  background-color: var(--ax-bg-raised);
+  border-radius: var(--ax-radius-12);
+  background-color: var(--ax-bg-softA);
   height: fit-content;
-  border: 1px solid var(--ax-border-neutral);
+  border: 1px solid var(--ax-border-default);
+
+  &[data-color="neutral"] {
+    background-color: var(--ax-bg-raised);
+  }
 
   &:has(.aksel-expansioncard__header:hover) {
-    box-shadow: 0 0 0 1px var(--ax-border-neutral-strong);
-    border-color: var(--ax-border-neutral-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-strong);
+    border-color: var(--ax-border-strong);
   }
 }
 
@@ -45,7 +49,7 @@
   justify-content: space-between;
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &[data-open="true"] {
@@ -55,7 +59,7 @@
     /* Divider between header and content */
     &::after {
       content: "";
-      background-color: var(--ax-border-neutral-subtleA);
+      background-color: var(--ax-border-subtleA);
       bottom: 0;
       left: var(--__axc-expansioncard-padding-inline);
       height: 1px;
@@ -91,7 +95,7 @@
   margin: 0;
   background: transparent;
   border: none;
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   min-height: 3rem;
   min-width: 3rem;
   font-size: 1.5rem;
@@ -117,7 +121,7 @@
 }
 
 .aksel-expansioncard__header:hover > .aksel-expansioncard__header-button {
-  background-color: var(--ax-bg-neutral-moderate-hoverA);
+  background-color: var(--ax-bg-moderate-hoverA);
 }
 
 .aksel-expansioncard__header-chevron {

package/darkside/form/combobox.darkside.css

@@ -10,12 +10,12 @@
   flex-direction: column;
   width: 100%;
   position: relative;
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
 }
 
 .aksel-form-field:not(:is(.aksel-combobox--disabled, .aksel-combobox--readonly)) {
   & .aksel-combobox__wrapper:hover {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 }
 
@@ -81,12 +81,12 @@
 
 .aksel-combobox__wrapper-inner {
   border: 1px solid var(--ax-border-neutral);
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
 
   &:has(.aksel-combobox__input:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   &:has(.aksel-combobox__input:focus-visible).aksel-combobox__wrapper-inner--virtually-unfocused {
@@ -135,7 +135,7 @@
 
   & > li {
     margin: auto 0;
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
   }
 
   & > li:last-of-type {
@@ -225,10 +225,10 @@
   padding: 0;
 
   &:hover {
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
 
     &:active {
-      color: var(--ax-text-accent);
+      color: var(--ax-text-default);
     }
   }
 }
@@ -246,7 +246,7 @@
   border: 1px solid var(--ax-border-neutral-subtleA);
   display: flex;
   flex-direction: column;
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   background-color: var(--ax-bg-raised);
   color: var(--ax-text-neutral);
   overscroll-behavior: contain;
@@ -271,7 +271,7 @@
   justify-content: space-between;
   padding-block: var(--__axc-combobox-list-item-padding-block);
   padding-inline: var(--__axc-combobox-list-item-padding-inline);
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   border: 0;
   margin-inline: var(--ax-space-8);
   margin-block: var(--ax-space-2);
@@ -341,7 +341,7 @@
 }
 
 .aksel-combobox__list-item--selected {
-  background-color: var(--ax-bg-accent-moderate-pressedA);
+  background-color: var(--ax-bg-moderate-pressedA);
 
   & p {
     font-weight: var(--ax-font-weight-bold);
@@ -349,9 +349,9 @@
 }
 
 .aksel-combobox__list-item--new-option {
-  border-bottom: 1px solid var(--ax-border-accent-subtleA);
+  border-bottom: 1px solid var(--ax-border-subtleA);
   border-radius: 0;
-  background: var(--ax-bg-accent-moderateA);
+  background: var(--ax-bg-moderateA);
   cursor: pointer;
   justify-content: flex-start;
   gap: 0.25rem;
@@ -369,7 +369,7 @@
 }
 
 .aksel-combobox__list-item--new-option--focus {
-  border-radius: calc(var(--ax-border-radius-large) - 1px) calc(var(--ax-border-radius-large) - 1px) 0 0;
+  border-radius: calc(var(--ax-radius-8) - 1px) calc(var(--ax-radius-8) - 1px) 0 0;
 
   /* TODO: new option should get a wrapper div later to
 * style it properly with a nice rounded border radius
@@ -378,7 +378,7 @@
   outline-offset: -2px;
 
   &:only-child {
-    border-radius: calc(var(--ax-border-radius-large) - 1px);
+    border-radius: calc(var(--ax-radius-8) - 1px);
   }
 }
 

package/darkside/form/confirmation-panel.darkside.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: var(--ax-space-12);
   padding: var(--ax-space-16);
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   border: 1px solid var(--ax-border-default);
   background-color: var(--ax-bg-moderate);
   transition: background-color linear 100ms;
@@ -25,8 +25,8 @@
     border-left: 8px solid;
     border-color: orange;
     forced-color-adjust: none;
-    border-start-start-radius: calc(var(--ax-border-radius-large) - 1px);
-    border-end-start-radius: calc(var(--ax-border-radius-large) - 1px);
+    border-start-start-radius: calc(var(--ax-radius-8) - 1px);
+    border-end-start-radius: calc(var(--ax-radius-8) - 1px);
   }
 
   .aksel-confirmation-panel--checked .aksel-confirmation-panel__inner::before {

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

@@ -2,7 +2,7 @@
   background-color: var(--ax-bg-default);
   padding: var(--ax-space-20);
   border: 4px solid var(--ax-border-danger);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   outline-offset: 3px;
 
   &:focus-visible,

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

@@ -16,25 +16,25 @@
   text-align: center;
   padding: var(--ax-space-20);
   border: 1px dashed var(--ax-border-neutral);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   background-color: var(--__axc-dropzone-background);
   color: var(--ax-text-neutral);
   transition: background-color var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
   cursor: pointer;
 
   &:hover:not([data-disabled="true"]) {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
 
     & > .aksel-dropzone__area-button {
-      background-color: var(--ax-bg-accent-moderate-hover);
-      box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
+      background-color: var(--ax-bg-moderate-hover);
+      box-shadow: inset 0 0 0 2px var(--ax-bg-strong-hover);
     }
   }
 
   &:active:not([data-disabled="true"]) {
     & > .aksel-dropzone__area-button {
-      background-color: var(--ax-bg-accent-strong-pressed);
-      color: var(--ax-text-accent-contrast);
+      background-color: var(--ax-bg-strong-pressed);
+      color: var(--ax-text-contrast);
       box-shadow: none;
     }
   }
@@ -53,16 +53,16 @@
   }
 
   & > .aksel-dropzone__area::after {
-    color: var(--ax-text-accent);
-    background-color: var(--ax-bg-accent-moderateA);
+    color: var(--ax-text-default);
+    background-color: var(--ax-bg-moderateA);
     content: "";
     inset: 0;
     margin: -1px;
-    border: 1px dashed var(--ax-border-accent-strong);
+    border: 1px dashed var(--ax-border-strong);
     position: absolute;
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     animation: akselDropzoneDragoverAnimation var(--__axc-dropzone-animation-length-short)
       var(--__axc-dropzone-animation-ease-out);
   }
@@ -81,7 +81,7 @@
   }
 
   100% {
-    background-color: var(--ax-bg-accent-moderateA);
+    background-color: var(--ax-bg-moderateA);
   }
 }
 
@@ -111,7 +111,7 @@
 .aksel-dropzone__area-release__icon {
   display: grid;
   padding: var(--__axc-dropzone-icon-padding);
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   background-color: var(--ax-bg-neutral-moderateA);
   transition:
     background-color 300ms var(--__axc-dropzone-animation-ease-out),
@@ -134,7 +134,7 @@
 }
 
 .aksel-dropzone--dragging .aksel-dropzone__area-release {
-  color: var(--ax-text-accent-subtle);
+  color: var(--ax-text-subtle);
   top: 50%;
   transform: translateY(-50%);
 }
@@ -161,7 +161,7 @@ li.aksel-file-item {
   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);
+  border-radius: var(--ax-radius-12);
   padding: var(--ax-space-20);
   display: flex;
   gap: var(--ax-space-12);
@@ -175,7 +175,7 @@ li.aksel-file-item {
 .aksel-file-item__icon {
   background-color: var(--ax-bg-neutral-moderateA);
   color: var(--ax-text-neutral);
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   min-height: 2.5rem;
   min-width: 2.5rem;
   margin-top: var(--ax-space-2);

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

@@ -24,7 +24,7 @@
   visibility: hidden;
   overflow: hidden;
   border: 1px solid var(--ax-border-neutral-subtleA);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   background: var(--ax-bg-raised);
   padding-inline: var(--ax-space-20);
   padding-block: 0;

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

@@ -1,7 +1,7 @@
 .aksel-form-summary {
   overflow: hidden;
   border: 1px solid var(--ax-border-neutral-subtleA);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   background: var(--ax-bg-raised);
 }
 
@@ -73,11 +73,11 @@
 .aksel-form-summary__value .aksel-form-summary__answers {
   margin-top: var(--ax-space-8);
   padding: var(--ax-space-16);
-  background: var(--ax-bg-info-moderateA);
-  border-radius: var(--ax-border-radius-large);
-  border: 1px solid var(--ax-border-info-subtleA);
+  background: var(--ax-bg-moderateA);
+  border-radius: var(--ax-radius-8);
+  border: 1px solid var(--ax-border-subtleA);
 
   & .aksel-form-summary__answer {
-    border-color: var(--ax-border-info-subtleA);
+    border-color: var(--ax-border-subtleA);
   }
 }

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

@@ -30,7 +30,7 @@
 .aksel-checkbox__label::before,
 .aksel-radio__label::before {
   content: "";
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-radius-4);
   background-color: var(--ax-bg-input);
   flex-shrink: 0;
   width: 1.5rem;
@@ -39,7 +39,7 @@
 }
 
 .aksel-radio__label::before {
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
 }
 
 .aksel-checkbox__content,
@@ -74,7 +74,7 @@
   position: absolute;
   width: 100%;
   height: calc(100% - var(--ax-space-24));
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-radius-4);
   outline: 3px solid var(--ax-border-focus);
   outline-offset: 3px;
   pointer-events: none;
@@ -107,13 +107,13 @@
 }
 
 .aksel-checkbox__input:where(:checked, :indeterminate) + .aksel-checkbox__label::before {
-  background-color: var(--ax-bg-accent-strong-pressed);
-  border-color: var(--ax-bg-accent-strong-pressed);
+  background-color: var(--ax-bg-strong-pressed);
+  border-color: var(--ax-bg-strong-pressed);
 }
 
 .aksel-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover + .aksel-checkbox__label::before {
-  border-color: var(--ax-bg-accent-strong-hover);
-  background-color: var(--ax-bg-accent-strong-hover);
+  border-color: var(--ax-bg-strong-hover);
+  background-color: var(--ax-bg-strong-hover);
 }
 
 .aksel-checkbox__input:where(:not(:checked)) + .aksel-checkbox__label > .aksel-checkbox__icon {
@@ -148,22 +148,17 @@
 
 .aksel-radio__input:checked + .aksel-radio__label::before {
   background-color: var(--ax-bg-input);
-  border: 8px solid var(--ax-bg-accent-strong-pressed);
+  border: 8px solid var(--ax-bg-strong-pressed);
 }
 
 .aksel-radio--small > .aksel-radio__input:checked + .aksel-radio__label::before {
   border-width: 6px;
 }
 
-.aksel-checkbox__input:hover:not(:disabled) + .aksel-checkbox__label,
-.aksel-radio__input:hover:not(:disabled, :checked) + .aksel-radio__label {
-  color: var(--ax-text-accent-subtle);
-}
-
 .aksel-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label::before,
 .aksel-radio__input:hover:not(:disabled, :checked) + .aksel-radio__label::before {
-  border-color: var(--ax-border-accent-strong);
-  background-color: var(--ax-bg-accent-moderate-hoverA);
+  border-color: var(--ax-border-strong);
+  background-color: var(--ax-bg-moderate-hoverA);
 }
 
 .aksel-checkbox--error > .aksel-checkbox__input:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label::before,
@@ -171,16 +166,6 @@
   border-color: var(--ax-border-danger-strong);
 }
 
-.aksel-checkbox--error > .aksel-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .aksel-checkbox__label::before,
-.aksel-radio--error > .aksel-radio__input:not(:disabled, :checked):hover + .aksel-radio__label::before {
-  background-color: var(--ax-bg-danger-moderate-hoverA);
-}
-
-.aksel-checkbox--error > .aksel-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .aksel-checkbox__label::before {
-  background-color: var(--ax-bg-danger-strong-pressed);
-  border-color: var(--ax-bg-danger-strong-pressed);
-}
-
 .aksel-radio--error > .aksel-radio__input:checked + .aksel-radio__label::before {
   border-color: var(--ax-bg-danger-strong-pressed);
 }
@@ -207,11 +192,6 @@
   display: inline-flex;
 }
 
-.aksel-checkbox--readonly > .aksel-checkbox__input:hover + .aksel-checkbox__label,
-.aksel-radio--readonly > .aksel-radio__input:hover + .aksel-radio__label {
-  color: var(--ax-text-neutral);
-}
-
 .aksel-checkbox--readonly > .aksel-checkbox__input:not(:disabled) + .aksel-checkbox__label::before,
 .aksel-checkbox--readonly > .aksel-checkbox__input:hover .aksel-checkbox__label::before,
 .aksel-radio--readonly > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label::before,

package/darkside/form/search.darkside.css

@@ -22,7 +22,7 @@
 .aksel-search__wrapper {
   display: inline-flex;
   align-items: center;
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
 
   /* We have to outline the whole container to include the Search-buttons */
   &:has(.aksel-search__input:focus-visible) {
@@ -97,8 +97,8 @@
 .aksel-search__button-search {
   flex-shrink: 0;
   border-radius: 0;
-  border-top-right-radius: var(--ax-border-radius-large);
-  border-bottom-right-radius: var(--ax-border-radius-large);
+  border-top-right-radius: var(--ax-radius-8);
+  border-bottom-right-radius: var(--ax-radius-8);
 }
 
 .aksel-search__button-search.aksel-button--secondary {
@@ -110,7 +110,7 @@
   }
 
   &:hover:not(:disabled) {
-    --__axc-button-border-color: var(--ax-border-accent-strong);
+    --__axc-button-border-color: var(--ax-border-strong);
   }
 }
 
@@ -118,7 +118,7 @@
 .aksel-search:not(.aksel-search--error, .aksel-search--disabled)
   .aksel-search__wrapper:has(.aksel-search__input:is(:hover, :focus-visible))
   .aksel-search__button-search.aksel-button--secondary:not(:hover, :active) {
-  --__axc-button-border-color: var(--ax-border-accent-strong);
+  --__axc-button-border-color: var(--ax-border-strong);
 }
 
 /* --------------------------- Search Error-state --------------------------- */

package/darkside/form/select.darkside.css

@@ -1,7 +1,7 @@
 .aksel-select__input {
   appearance: none;
   background-color: var(--ax-bg-input);
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   border: 1px solid var(--ax-border-neutral);
   color: var(--ax-text-neutral);
   width: 100%;
@@ -13,14 +13,14 @@
   padding-right: var(--ax-space-40);
 
   &:hover {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
     cursor: pointer;
   }
 
   &:focus {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   @media (forced-colors: active) {
@@ -63,7 +63,7 @@
   }
 }
 
-/* --------------------------- Select Error-state --------------------------- */
+/* --------------------------- Select Error --------------------------- */
 .aksel-select--error {
   > * select {
     box-shadow: 0 0 0 1px var(--ax-border-danger-strong);