@navikt/ds-css 7.21.1 → 7.23.0

package/darkside/form/switch.darkside.css

@@ -57,7 +57,7 @@
     left: 0;
     width: 100%;
     height: calc(100% - var(--__axc-switch-block-padding) * 2);
-    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;
@@ -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;
 }
@@ -85,24 +80,28 @@
   position: absolute;
   top: var(--ax-space-12);
   left: 0;
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   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 ~ & {
@@ -124,7 +123,7 @@
 /* ------------------------------ Switch Thumb ------------------------------ */
 .aksel-switch__thumb {
   background-color: var(--ax-bg-neutral-strong);
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   width: 1.125rem;
   height: 1.125rem;
   position: absolute;
@@ -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

@@ -2,18 +2,18 @@
   appearance: none;
   padding: var(--ax-space-8);
   background: var(--ax-bg-input);
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   border: 1px solid var(--ax-border-neutral);
   min-height: 3rem;
   width: 100%;
   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

@@ -4,7 +4,7 @@
   appearance: none;
   padding: var(--ax-space-8);
   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);
   resize: none;
   width: 100%;
@@ -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,8 +34,8 @@
 
 .aksel-guide {
   box-sizing: border-box;
-  border: 2px solid var(--ax-border-info);
-  border-radius: var(--ax-border-radius-full);
+  border: 2px solid var(--ax-border-default);
+  border-radius: var(--ax-radius-full);
   overflow: hidden;
   width: var(--__axc-guide-panel-guide-size);
   height: var(--__axc-guide-panel-guide-size);
@@ -50,8 +50,8 @@
 
 .aksel-guide-panel__content {
   background-color: var(--ax-bg-raised);
-  border: 2px solid var(--ax-border-info);
-  border-radius: var(--ax-border-radius-xlarge);
+  border: 2px solid var(--ax-border-default);
+  border-radius: var(--ax-radius-12);
   position: relative;
 
   .aksel-guide-panel:is([data-poster="true"], [data-responsive="true"]) > & {
@@ -72,7 +72,7 @@
 
 .aksel-guide-panel__content-inner {
   padding: var(--ax-space-16);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   background-color: var(--ax-bg-raised);
   position: relative;
   height: 100%;

package/darkside/help-text.darkside.css

@@ -3,24 +3,24 @@
   border: 0;
   cursor: pointer;
   background-color: transparent;
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   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);
 }
 
 .aksel-help-text__icon {
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
 }
 
 .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-border-radius-large);
-  border: 1px solid var(--ax-border-info);
+  border-radius: var(--ax-radius-8);
+  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/modal.darkside.css

@@ -7,7 +7,7 @@
 
   background-color: var(--__axc-modal-bg);
   border: 1px solid var(--ax-border-neutral-subtleA);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   box-shadow: var(--ax-shadow-dialog);
   padding: 0;
   position: fixed;

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/panel.darkside.css

@@ -1,7 +1,7 @@
 .aksel-panel {
   background-color: var(--ax-bg-default);
   padding: var(--ax-space-16);
-  border-radius: var(--ax-border-radius-small);
+  border-radius: var(--ax-radius-2);
   border: 1px solid transparent;
 }
 

package/darkside/popover.darkside.css

@@ -3,7 +3,7 @@
   background: var(--ax-bg-raised);
   box-shadow: var(--ax-shadow-dialog);
   border: 1px solid var(--ax-border-neutral-subtleA);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
 
   /* Creates a small gutter between screen-edges on smaller devices */
   max-width: calc(100vw - var(--ax-space-24));

package/darkside/primitives/box.darkside.css

@@ -17,16 +17,16 @@
   border-width: var(--__axc-box-border-width, 0);
 }
 
-.aksel-box-border-radius {
-  --__axc-box-border-radius-xs: initial;
-  --__axc-box-border-radius-sm: var(--__axc-box-border-radius-xs);
-  --__axc-box-border-radius-md: var(--__axc-box-border-radius-sm);
-  --__axc-box-border-radius-lg: var(--__axc-box-border-radius-md);
-  --__axc-box-border-radius-xl: var(--__axc-box-border-radius-lg);
-  --__axc-box-border-radius-2xl: var(--__axc-box-border-radius-xl);
-  --__axc-box-border-radius: var(--__axc-box-border-radius-xs);
+.aksel-box-radius {
+  --__axc-box-radius-xs: initial;
+  --__axc-box-radius-sm: var(--__axc-box-radius-xs);
+  --__axc-box-radius-md: var(--__axc-box-radius-sm);
+  --__axc-box-radius-lg: var(--__axc-box-radius-md);
+  --__axc-box-radius-xl: var(--__axc-box-radius-lg);
+  --__axc-box-radius-2xl: var(--__axc-box-radius-xl);
+  --__axc-box-radius: var(--__axc-box-radius-xs);
 
-  border-radius: var(--__axc-box-border-radius);
+  border-radius: var(--__axc-box-radius);
 }
 
 .aksel-box-shadow {
@@ -36,31 +36,31 @@
 }
 
 @media (min-width: 480px) {
-  .aksel-box-border-radius {
-    --__axc-box-border-radius: var(--__axc-box-border-radius-sm);
+  .aksel-box-radius {
+    --__axc-box-radius: var(--__axc-box-radius-sm);
   }
 }
 
 @media (min-width: 768px) {
-  .aksel-box-border-radius {
-    --__axc-box-border-radius: var(--__axc-box-border-radius-md);
+  .aksel-box-radius {
+    --__axc-box-radius: var(--__axc-box-radius-md);
   }
 }
 
 @media (min-width: 1024px) {
-  .aksel-box-border-radius {
-    --__axc-box-border-radius: var(--__axc-box-border-radius-lg);
+  .aksel-box-radius {
+    --__axc-box-radius: var(--__axc-box-radius-lg);
   }
 }
 
 @media (min-width: 1280px) {
-  .aksel-box-border-radius {
-    --__axc-box-border-radius: var(--__axc-box-border-radius-xl);
+  .aksel-box-radius {
+    --__axc-box-radius: var(--__axc-box-radius-xl);
   }
 }
 
 @media (min-width: 1440px) {
-  .aksel-box-border-radius {
-    --__axc-box-border-radius: var(--__axc-box-border-radius-2xl);
+  .aksel-box-radius {
+    --__axc-box-radius: var(--__axc-box-radius-2xl);
   }
 }

package/darkside/progress-bar.darkside.css

@@ -1,7 +1,7 @@
 .aksel-progress-bar {
   background: var(--ax-bg-neutral-moderateA);
   position: relative;
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   overflow: hidden;
   box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
 }
@@ -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;
@@ -31,7 +31,7 @@
 
 .aksel-read-more:is([data-volume="low"], :not([data-volume])) {
   & .aksel-read-more__button {
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4);
 
     &:hover {
       background-color: var(--ax-bg-neutral-moderate-hoverA);
@@ -41,12 +41,12 @@
 
 .aksel-read-more[data-volume="high"] {
   & .aksel-read-more__button {
-    background-color: var(--ax-bg-accent-moderate);
-    border-radius: var(--ax-border-radius-full);
+    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/skeleton.darkside.css

@@ -29,7 +29,7 @@
   height: auto;
   transform-origin: 0 55%;
   transform: scale(1, 0.6);
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
 
   &:empty::before {
     content: "\00a0";
@@ -37,7 +37,7 @@
 }
 
 .aksel-skeleton--circle {
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
 }
 
 .aksel-skeleton--rectangle {
@@ -45,7 +45,7 @@
 }
 
 .aksel-skeleton--rounded {
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
 }
 
 @keyframes akselSkeletonAnimation {

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);
@@ -98,7 +98,7 @@
   width: var(--__axc-stepper-circle-size);
   height: var(--__axc-stepper-circle-size);
   border: var(--__axc-stepper-border-width) solid currentColor;
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   line-height: 1;
 }
 
@@ -108,8 +108,8 @@
 }
 
 .aksel-stepper__step[data-interactive="true"] {
-  color: var(--ax-text-accent-subtle);
-  border-radius: var(--ax-border-radius-medium);
+  color: var(--ax-text-subtle);
+  border-radius: var(--ax-radius-4);
   text-decoration: none;
 
   & .aksel-stepper__content {
@@ -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);
       }
     }
   }