@navikt/ds-css 7.22.0 → 7.23.1

package/darkside/form/combobox.darkside.css

@@ -15,7 +15,7 @@
 
 .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);
   }
 }
 
@@ -86,7 +86,7 @@
   &: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 {
@@ -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);
     }
   }
 }
@@ -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;

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

@@ -23,18 +23,18 @@
   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,12 +53,12 @@
   }
 
   & > .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);
@@ -81,7 +81,7 @@
   }
 
   100% {
-    background-color: var(--ax-bg-accent-moderateA);
+    background-color: var(--ax-bg-moderateA);
   }
 }
 
@@ -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%);
 }

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

@@ -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);
+  background: var(--ax-bg-moderateA);
   border-radius: var(--ax-radius-8);
-  border: 1px solid var(--ax-border-info-subtleA);
+  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

@@ -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

@@ -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

@@ -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);

package/darkside/form/switch.darkside.css

@@ -68,11 +68,6 @@
   }
 }
 
-.aksel-switch__input:hover ~ .aksel-switch__label-wrapper,
-.aksel-switch__label-wrapper:hover {
-  color: var(--ax-text-accent-subtle);
-}
-
 .aksel-switch__input:disabled:hover ~ .aksel-switch__label-wrapper {
   color: inherit;
 }
@@ -89,20 +84,24 @@
   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);
+  transition-timing-function: ease;
 
   .aksel-switch--small > & {
     top: var(--ax-space-4);
   }
 
   .aksel-switch__input:checked ~ & {
-    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-switch__input:hover ~ & {
+    background-color: var(--ax-bg-neutral-moderate-hover);
   }
 
   .aksel-switch__input:hover:checked ~ & {
-    background-color: var(--ax-bg-accent-strong-hover);
-    border-color: var(--ax-bg-accent-strong-hover);
+    background-color: var(--ax-bg-strong-hover);
+    border-color: var(--ax-bg-strong-hover);
   }
 
   .aksel-switch__input:disabled ~ & {
@@ -111,8 +110,8 @@
   }
 
   .aksel-switch__input:checked:disabled ~ & {
-    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-switch--standalone > .aksel-switch__input:focus ~ & {
@@ -139,7 +138,7 @@
   .aksel-switch__input:checked ~ .aksel-switch__track > & {
     background-color: var(--ax-bg-raised);
     transform: translateX(1.25rem);
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     width: 1.25rem;
     height: 1.25rem;
     left: 0;
@@ -160,11 +159,11 @@
 
 @media (hover: hover) and (pointer: fine) {
   .aksel-switch__input:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
-    transform: translateX(0.0625rem);
+    transform: translateX(0.17rem);
   }
 
   .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
-    transform: translateX(1.19rem);
+    transform: translateX(1.1rem);
   }
 }
 
@@ -207,11 +206,6 @@
     cursor: default;
   }
 
-  & > .aksel-switch__input:hover ~ .aksel-switch__label-wrapper,
-  & .aksel-switch__label-wrapper:hover {
-    color: var(--ax-text-neutral);
-  }
-
   & .aksel-switch__label {
     display: inline-flex;
   }
@@ -238,11 +232,6 @@
 
 /* ------------------------ Switch Forced colors mode ----------------------- */
 @media (forced-colors: active) {
-  .aksel-switch__input:hover ~ .aksel-switch__label-wrapper,
-  .aksel-switch__label-wrapper:hover {
-    color: highlight;
-  }
-
   .aksel-switch__thumb,
   .aksel-switch--readonly .aksel-switch__thumb {
     background-color: fieldtext !important;

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

@@ -9,11 +9,11 @@
   color: var(--ax-text-neutral);
 
   &:hover {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   &:focus-visible {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
   }

package/darkside/form/textarea.darkside.css

@@ -16,13 +16,13 @@
   }
 
   &:hover {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   &: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);
   }
 
   &:disabled {

package/darkside/guide-panel.darkside.css

@@ -34,7 +34,7 @@
 
 .aksel-guide {
   box-sizing: border-box;
-  border: 2px solid var(--ax-border-info);
+  border: 2px solid var(--ax-border-default);
   border-radius: var(--ax-radius-full);
   overflow: hidden;
   width: var(--__axc-guide-panel-guide-size);
@@ -50,7 +50,7 @@
 
 .aksel-guide-panel__content {
   background-color: var(--ax-bg-raised);
-  border: 2px solid var(--ax-border-info);
+  border: 2px solid var(--ax-border-default);
   border-radius: var(--ax-radius-12);
   position: relative;
 

package/darkside/help-text.darkside.css

@@ -7,7 +7,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--ax-bg-info-strong);
+  color: var(--ax-bg-strong);
   font-size: 1.25rem;
   padding: calc(var(--ax-space-4) / 2);
 }
@@ -17,10 +17,10 @@
 }
 
 .aksel-help-text__popover.aksel-popover {
-  background-color: var(--ax-bg-info-moderate);
+  background-color: var(--ax-bg-moderate);
   max-width: min(65ch, calc(100vw - var(--ax-space-24)));
   border-radius: var(--ax-radius-8);
-  border: 1px solid var(--ax-border-info);
+  border: 1px solid var(--ax-border-default);
 }
 
 .aksel-help-text__icon--filled {
@@ -33,11 +33,11 @@
 
 .aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon--filled {
   display: inherit;
-  color: var(--ax-bg-info-strong-hover);
+  color: var(--ax-bg-strong-hover);
 }
 
 .aksel-help-text__button[aria-expanded="true"] > .aksel-help-text__icon--filled {
-  color: var(--ax-bg-info-strong-pressed);
+  color: var(--ax-bg-strong-pressed);
 }
 
 @media (forced-colors: active) {

package/darkside/link.darkside.css

@@ -1,5 +1,5 @@
 .aksel-link {
-  color: var(--ax-text-accent-subtle);
+  color: var(--ax-text-subtle);
   display: inline-flex;
   align-items: center;
   gap: var(--ax-space-2);
@@ -18,6 +18,14 @@
     border-radius: 1px;
   }
 
+  &[data-color="neutral"] {
+    color: var(--ax-text-default);
+  }
+
+  &[data-variant="subtle"] {
+    color: var(--ax-text-subtle);
+  }
+
   &.aksel-link--inline-text {
     display: inline;
 
@@ -47,18 +55,6 @@
 .aksel-alert:not(.aksel-alert--inline),
 .aksel-confirmation-panel {
   & .aksel-link {
-    color: var(--ax-text-neutral);
+    color: var(--ax-text-default);
   }
 }
-
-.aksel-link--action {
-  color: var(--ax-text-accent-subtle);
-}
-
-.aksel-link--neutral {
-  color: var(--ax-text-neutral);
-}
-
-.aksel-link--subtle {
-  color: var(--ax-text-neutral-subtle);
-}

package/darkside/list.darkside.css

@@ -38,22 +38,19 @@
 }
 
 /* SAFARI HACK START */
-/* stylelint-disable selector-type-no-unknown */
 
-_::-webkit-full-page-media,
-_:future,
-:root .aksel-list ol {
-  padding-left: 2.1rem;
-}
+/* biome-ignore lint/a11y/useGenericFontNames: Hack for targeting Safari */
+@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
+  .aksel-list ol {
+    padding-left: 2.1rem;
+  }
 
-_::-webkit-full-page-media,
-_:future,
-:root .aksel-list ol .aksel-list__item {
-  padding-left: 0;
+  .aksel-list ol .aksel-list__item {
+    padding-left: 0;
+  }
 }
 
 /* SAFARI HACK END */
-/* stylelint-enable selector-type-no-unknown */
 
 .aksel-list__item {
   margin-block-end: var(--ax-space-8);

package/darkside/loader.darkside.css

@@ -61,39 +61,21 @@
   animation: loader-dasharray 1.5s ease-in-out infinite;
   stroke-dasharray: 80px, 200px;
   stroke-dashoffset: 0;
-  stroke: var(--ax-border-neutral-strong);
+  stroke: var(--ax-border-strong);
   stroke-linecap: round;
   stroke-width: var(--__axc-loader-stroke-width);
-}
-
-.aksel-loader__background {
-  stroke: var(--ax-border-neutral-subtleA);
-  stroke-width: var(--__axc-loader-stroke-width);
-}
 
-.aksel-loader--neutral {
-  & .aksel-loader__foreground {
-    stroke: var(--ax-border-neutral-strong);
+  .aksel-loader[data-variant="inverted"] & {
+    stroke: var(--ax-border-subtle);
   }
 }
 
-.aksel-loader--interaction {
-  & .aksel-loader__foreground {
-    stroke: var(--ax-border-accent-strong);
-  }
-
-  & .aksel-loader__background {
-    stroke: var(--ax-border-accent-subtleA);
-  }
-}
-
-.aksel-loader--inverted {
-  & .aksel-loader__foreground {
-    stroke: var(--ax-border-neutral-subtle);
-  }
+.aksel-loader__background {
+  stroke: var(--ax-border-subtleA);
+  stroke-width: var(--__axc-loader-stroke-width);
 
-  & .aksel-loader__background {
-    stroke: var(--ax-border-neutral-strong);
+  .aksel-loader[data-variant="inverted"] & {
+    stroke: var(--ax-border-strong);
   }
 }
 

package/darkside/pagination.darkside.css

@@ -31,11 +31,6 @@
   width: 1.5rem;
 }
 
-.aksel-pagination__item[data-selected="true"] {
-  background-color: var(--ax-bg-neutral-strong-pressed);
-  color: var(--ax-text-neutral-contrast);
-}
-
 .aksel-pagination--invisible {
   visibility: hidden;
 }

package/darkside/progress-bar.darkside.css

@@ -26,7 +26,7 @@
   --__ac-progress-bar-translate: initial;
 
   transform: translateX(var(--__ac-progress-bar-translate));
-  background: var(--ax-bg-info-strong);
+  background: var(--ax-bg-strong);
   transform-origin: left;
   position: absolute;
   top: 0;

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-subtle);
+  color: var(--ax-text-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;
@@ -41,12 +41,12 @@
 
 .aksel-read-more[data-volume="high"] {
   & .aksel-read-more__button {
-    background-color: var(--ax-bg-accent-moderate);
+    background-color: var(--ax-bg-moderate);
     border-radius: var(--ax-radius-full);
 
     &:hover {
-      background-color: var(--ax-bg-accent-moderate-hoverA);
-      color: var(--ax-text-accent);
+      background-color: var(--ax-bg-moderate-hoverA);
+      color: var(--ax-text-default);
     }
   }
 

package/darkside/stepper.darkside.css

@@ -3,7 +3,7 @@
   --__axc-stepper-border-width: 2px;
   --__axc-stepper-line-length: 1rem;
 
-  color: var(--ax-text-accent-subtle);
+  color: var(--ax-text-subtle);
   font-weight: var(--ax-font-weight-bold);
   line-height: 1;
   list-style: none;
@@ -22,7 +22,7 @@
 }
 
 .aksel-stepper__line {
-  background-color: var(--ax-border-accent);
+  background-color: var(--ax-border-default);
   width: var(--__axc-stepper-border-width);
   height: 100%;
   min-height: var(--__axc-stepper-line-length);
@@ -108,7 +108,7 @@
 }
 
 .aksel-stepper__step[data-interactive="true"] {
-  color: var(--ax-text-accent-subtle);
+  color: var(--ax-text-subtle);
   border-radius: var(--ax-radius-4);
   text-decoration: none;
 
@@ -126,8 +126,8 @@
   }
 
   & .aksel-stepper__circle {
-    color: var(--ax-text-accent-subtle);
-    border-color: var(--ax-border-accent-strong);
+    color: var(--ax-text-subtle);
+    border-color: var(--ax-border-strong);
   }
 
   &[data-active="true"] {
@@ -136,17 +136,17 @@
     }
 
     & .aksel-stepper__circle {
-      color: var(--ax-text-accent-contrast);
-      background-color: var(--ax-bg-accent-strong-pressed);
-      border-color: var(--ax-bg-accent-strong-pressed);
+      color: var(--ax-text-contrast);
+      background-color: var(--ax-bg-strong-pressed);
+      border-color: var(--ax-bg-strong-pressed);
     }
   }
 
   &[data-active="false"] {
     &:hover {
       & .aksel-stepper__circle {
-        background-color: var(--ax-bg-accent-moderate-hoverA);
-        border-color: var(--ax-border-accent-strong);
+        background-color: var(--ax-bg-moderate-hoverA);
+        border-color: var(--ax-border-strong);
       }
     }
   }