@navikt/ds-css 7.22.0 → 7.23.0

package/dist/darkside/version/{7.22.0 → 7.23.0}/components.css

@@ -269,10 +269,26 @@
     overflow: hidden !important;
   }
 
+  [data-color]:where(.aksel-heading, .aksel-ingress, .aksel-body-long, .aksel-body-short, .aksel-label, .aksel-detail) {
+    color: var(--ax-text-default);
+  }
+
+  .aksel-typo--color-default {
+    color: var(--ax-text-neutral);
+  }
+
+  .aksel-typo--color-default[data-color] {
+    color: var(--ax-text-default);
+  }
+
   .aksel-typo--color-subtle {
     color: var(--ax-text-neutral-subtle);
   }
 
+  .aksel-typo--color-subtle[data-color] {
+    color: var(--ax-text-subtle);
+  }
+
   .aksel-button {
     --__axc-button-icon-size: 1.5rem;
     --__axc-button-icon-margin: -4px;
@@ -296,196 +312,132 @@
     outline-offset: 3px;
   }
 
-  .aksel-button--small, .aksel-button--xsmall {
-    --__axc-button-icon-margin: -2px;
-  }
-
-  .aksel-button--small {
-    padding: var(--ax-space-4) var(--ax-space-12);
-    gap: var(--ax-space-6);
-    min-width: 2rem;
-    min-height: 2rem;
-  }
-
-  .aksel-button--xsmall {
-    padding: var(--ax-space-2) var(--ax-space-8);
-    gap: var(--ax-space-4);
-    --__axc-button-icon-size: 1.25rem;
-  }
-
-  .aksel-button--icon-only {
-    padding: var(--ax-space-12);
-  }
-
-  .aksel-button--icon-only.aksel-button--small {
-    padding: var(--ax-space-4);
-  }
-
-  .aksel-button--icon-only.aksel-button--xsmall {
-    padding: var(--ax-space-2);
-  }
-
-  @supports not selector(:focus-visible) {
-    .aksel-button:focus {
-      outline: 3px solid var(--ax-border-focus);
-    }
-  }
-
-  .aksel-button__icon {
-    font-size: var(--__axc-button-icon-size);
-    display: flex;
-  }
-
-  .aksel-button__icon:first-child {
-    margin-left: var(--__axc-button-icon-margin);
-  }
-
-  .aksel-button__icon:last-child {
-    margin-right: var(--__axc-button-icon-margin);
+  .aksel-button[data-variant="primary"] {
+    background-color: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
   }
 
-  .aksel-button--icon-only .aksel-button__icon {
-    margin: 0;
+  .aksel-button[data-variant="primary"]:hover {
+    background-color: var(--ax-bg-strong-hover);
   }
 
-  .aksel-button--primary {
-    background-color: var(--ax-bg-accent-strong);
-    color: var(--ax-text-accent-contrast);
+  .aksel-button[data-variant="primary"]:active {
+    background-color: var(--ax-bg-strong-pressed);
   }
 
-  .aksel-button--primary:hover {
-    background-color: var(--ax-bg-accent-strong-hover);
-  }
-
-  .aksel-button--primary:active {
-    background-color: var(--ax-bg-accent-strong-pressed);
-  }
-
-  .aksel-button--primary:is(:disabled, .aksel-button--disabled) {
-    background-color: var(--ax-bg-accent-strong);
-  }
-
-  @media (forced-colors: active) {
-    .aksel-button--primary:not(:disabled) {
-      color: highlighttext;
-      background-color: highlight;
-    }
-
-    .aksel-button--primary span {
-      forced-color-adjust: none;
-    }
+  .aksel-button[data-variant="primary"]:is(:disabled, .aksel-button--disabled) {
+    background-color: var(--ax-bg-strong);
   }
 
-  .aksel-button--primary-neutral {
-    background-color: var(--ax-bg-neutral-strong);
-    color: var(--ax-text-neutral-contrast);
+  .aksel-button[data-variant="secondary"] {
+    --__axc-button-border-color: var(--ax-border-default);
+    color: var(--ax-text-subtle);
+    background-color: rgba(0, 0, 0, 0);
   }
 
-  .aksel-button--primary-neutral:hover {
-    background-color: var(--ax-bg-neutral-strong-hover);
+  .aksel-button[data-variant="secondary"][data-color="neutral"] {
+    color: var(--ax-text-default);
   }
 
-  .aksel-button--primary-neutral:active {
-    background-color: var(--ax-bg-neutral-strong-pressed);
+  .aksel-button[data-variant="secondary"]:hover {
+    --__axc-button-border-color: var(--ax-border-strong);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
-  .aksel-button--primary-neutral:is(:disabled, .aksel-button--disabled) {
-    background-color: var(--ax-bg-neutral-strong);
+  .aksel-button[data-variant="secondary"]:active {
+    background-color: var(--ax-bg-moderate-pressedA);
   }
 
-  .aksel-button--secondary {
-    --__axc-button-border-color: var(--ax-border-accent);
-    color: var(--ax-text-accent-subtle);
+  .aksel-button[data-variant="secondary"]:is(:disabled, .aksel-button--disabled) {
+    color: var(--ax-text-subtle);
     background-color: rgba(0, 0, 0, 0);
   }
 
-  .aksel-button--secondary:hover {
-    --__axc-button-border-color: var(--ax-border-accent-strong);
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+  .aksel-button[data-variant="secondary"]:is(:disabled, .aksel-button--disabled)[data-color="neutral"] {
+    color: var(--ax-text-default);
   }
 
-  .aksel-button--secondary:active {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
+  .aksel-button[data-variant="tertiary"] {
+    color: var(--ax-text-subtle);
+    background-color: rgba(0, 0, 0, 0);
   }
 
-  .aksel-button--secondary:is(:disabled, .aksel-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-accent);
-    color: var(--ax-text-accent-subtle);
-    background-color: rgba(0, 0, 0, 0);
+  .aksel-button[data-variant="tertiary"][data-color="neutral"] {
+    color: var(--ax-text-default);
   }
 
-  .aksel-button--secondary-neutral {
-    --__axc-button-border-color: var(--ax-border-neutral);
-    color: var(--ax-text-neutral);
-    background-color: rgba(0, 0, 0, 0);
+  .aksel-button[data-variant="tertiary"]:hover {
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
-  .aksel-button--secondary-neutral:hover {
-    --__axc-button-border-color: var(--ax-border-neutral-strong);
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  .aksel-button[data-variant="tertiary"]:active {
+    background-color: var(--ax-bg-moderate-pressedA);
   }
 
-  .aksel-button--secondary-neutral:active {
-    background-color: var(--ax-bg-neutral-moderate-pressedA);
+  .aksel-button[data-variant="tertiary"][data-pressed="true"] {
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
   }
 
-  .aksel-button--secondary-neutral:is(:disabled, .aksel-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-neutral);
-    color: var(--ax-text-neutral);
+  .aksel-button[data-variant="tertiary"]:is(:disabled, .aksel-button--disabled) {
+    color: var(--ax-text-subtle);
     background-color: rgba(0, 0, 0, 0);
   }
 
-  .aksel-button--tertiary {
-    color: var(--ax-text-accent-subtle);
-    background-color: rgba(0, 0, 0, 0);
+  .aksel-button[data-variant="tertiary"]:is(:disabled, .aksel-button--disabled)[data-color="neutral"] {
+    color: var(--ax-text-default);
   }
 
-  .aksel-button--tertiary:hover {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+  .aksel-button--small, .aksel-button--xsmall {
+    --__axc-button-icon-margin: -2px;
   }
 
-  .aksel-button--tertiary:active {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
+  .aksel-button--small {
+    padding: var(--ax-space-4) var(--ax-space-12);
+    gap: var(--ax-space-6);
+    min-width: 2rem;
+    min-height: 2rem;
   }
 
-  .aksel-button--tertiary:is(:disabled, .aksel-button--disabled) {
-    color: var(--ax-text-accent-subtle);
-    background-color: rgba(0, 0, 0, 0);
+  .aksel-button--xsmall {
+    padding: var(--ax-space-2) var(--ax-space-8);
+    gap: var(--ax-space-4);
+    --__axc-button-icon-size: 1.25rem;
   }
 
-  .aksel-button--tertiary-neutral {
-    color: var(--ax-text-neutral);
-    background-color: rgba(0, 0, 0, 0);
+  @supports not selector(:focus-visible) {
+    .aksel-button:focus {
+      outline: 3px solid var(--ax-border-focus);
+    }
   }
 
-  .aksel-button--tertiary-neutral:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  .aksel-button__icon {
+    font-size: var(--__axc-button-icon-size);
+    display: flex;
   }
 
-  .aksel-button--tertiary-neutral:active {
-    background-color: var(--ax-bg-neutral-moderate-pressedA);
+  .aksel-button__icon:first-child {
+    margin-left: var(--__axc-button-icon-margin);
   }
 
-  .aksel-button--tertiary-neutral:is(:disabled, .aksel-button--disabled) {
-    color: var(--ax-text-neutral);
-    background-color: rgba(0, 0, 0, 0);
+  .aksel-button__icon:last-child {
+    margin-right: var(--__axc-button-icon-margin);
   }
 
-  .aksel-button--danger {
-    background-color: var(--ax-bg-danger-strong);
-    color: var(--ax-text-danger-contrast);
+  .aksel-button--icon-only .aksel-button__icon {
+    margin: 0;
   }
 
-  .aksel-button--danger:hover {
-    background-color: var(--ax-bg-danger-strong-hover);
+  .aksel-button--icon-only {
+    padding: var(--ax-space-12);
   }
 
-  .aksel-button--danger:active {
-    background-color: var(--ax-bg-danger-strong-pressed);
+  .aksel-button--icon-only.aksel-button--small {
+    padding: var(--ax-space-4);
   }
 
-  .aksel-button--danger:is(:disabled, .aksel-button--disabled) {
-    background-color: var(--ax-bg-danger-strong);
+  .aksel-button--icon-only.aksel-button--xsmall {
+    padding: var(--ax-space-2);
   }
 
   .aksel-button:where(:disabled, .aksel-button--disabled) {
@@ -610,48 +562,26 @@
     padding-right: var(--ax-space-2);
   }
 
-  .aksel-chips__toggle--action {
-    box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
-    background-color: var(--ax-bg-accent-moderate);
-    color: var(--ax-text-accent);
-    transition: box-shadow .2s cubic-bezier(.15, 1, .3, 1);
-  }
-
-  .aksel-chips__toggle--action:hover {
-    background-color: var(--ax-bg-accent-moderate-hover);
-    box-shadow: inset 0 0 0 1px var(--ax-border-accent);
-  }
-
-  .aksel-chips__toggle--action[data-pressed="true"] {
-    box-shadow: none;
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
-  }
-
-  .aksel-chips__toggle--action[data-pressed="true"]:hover {
-    background-color: var(--ax-bg-accent-strong-hover);
-  }
-
-  .aksel-chips__toggle--neutral {
-    box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
-    background-color: var(--ax-bg-neutral-moderate);
-    color: var(--ax-text-neutral);
+  .aksel-chips__toggle {
+    box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
+    background-color: var(--ax-bg-moderate);
+    color: var(--ax-text-default);
     transition: box-shadow .2s cubic-bezier(.15, 1, .3, 1);
   }
 
-  .aksel-chips__toggle--neutral:hover {
-    background-color: var(--ax-bg-neutral-moderate-hover);
-    box-shadow: inset 0 0 0 1px var(--ax-border-neutral);
+  .aksel-chips__toggle:hover {
+    background-color: var(--ax-bg-moderate-hover);
+    box-shadow: inset 0 0 0 1px var(--ax-border-default);
   }
 
-  .aksel-chips__toggle--neutral[data-pressed="true"] {
+  .aksel-chips__toggle[data-pressed="true"] {
     box-shadow: none;
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
   }
 
-  .aksel-chips__toggle--neutral[data-pressed="true"]:hover {
-    background-color: var(--ax-bg-neutral-strong-hover);
+  .aksel-chips__toggle[data-pressed="true"]:hover {
+    background-color: var(--ax-bg-strong-hover);
   }
 
   .aksel-chips--medium .aksel-chips__toggle--with-checkmark {
@@ -659,25 +589,13 @@
   }
 
   .aksel-chips__removable {
+    background: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
     gap: 0;
   }
 
-  .aksel-chips__removable--action {
-    background: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
-  }
-
-  .aksel-chips__removable--action:hover {
-    background: var(--ax-bg-accent-strong-hover);
-  }
-
-  .aksel-chips__removable--neutral {
-    background: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
-  }
-
-  .aksel-chips__removable--neutral:hover {
-    background: var(--ax-bg-neutral-strong-hover);
+  .aksel-chips__removable:hover {
+    background: var(--ax-bg-strong-hover);
   }
 
   .aksel-chips__removable-icon {
@@ -788,17 +706,17 @@
   }
 
   .aksel-dropzone__area:hover:not([data-disabled="true"]) {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-dropzone__area:hover:not([data-disabled="true"]) > .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);
   }
 
   .aksel-dropzone__area: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;
   }
 
@@ -813,10 +731,10 @@
   }
 
   .aksel-dropzone--dragging > .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: "";
-    border: 1px dashed var(--ax-border-accent-strong);
+    border: 1px dashed var(--ax-border-strong);
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
     border-radius: var(--ax-radius-12);
@@ -839,7 +757,7 @@
     }
 
     100% {
-      background-color: var(--ax-bg-accent-moderateA);
+      background-color: var(--ax-bg-moderateA);
     }
   }
 
@@ -888,7 +806,7 @@
   }
 
   .aksel-dropzone--dragging .aksel-dropzone__area-release {
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     top: 50%;
     transform: translateY(-50%);
   }
@@ -1195,13 +1113,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 {
@@ -1233,35 +1151,22 @@
 
   .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, .aksel-radio--error > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label:before {
     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);
   }
@@ -1282,10 +1187,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, .aksel-radio--readonly > .aksel-radio__input:hover:not(:checked, :focus) + .aksel-radio__label:before {
     background-color: var(--__axc-radio-checkbox-readonly-bg);
     border-color: var(--__axc-radio-checkbox-readonly-border);
@@ -1379,14 +1280,14 @@
   }
 
   .aksel-select__input:hover {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
     cursor: pointer;
   }
 
   .aksel-select__input: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) {
@@ -1533,10 +1434,6 @@
     height: calc(100% - var(--__axc-switch-block-padding) * 1);
   }
 
-  .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;
   }
@@ -1550,7 +1447,7 @@
     border: 2px solid var(--ax-border-neutral);
     transition-property: background-color, border-color;
     transition-duration: .1s;
-    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    transition-timing-function: ease;
     position: absolute;
     left: 0;
   }
@@ -1560,13 +1457,17 @@
   }
 
   .aksel-switch__input:checked ~ .aksel-switch__track {
-    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 ~ .aksel-switch__track {
+    background-color: var(--ax-bg-neutral-moderate-hover);
   }
 
   .aksel-switch__input:hover:checked ~ .aksel-switch__track {
-    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 ~ .aksel-switch__track {
@@ -1575,8 +1476,8 @@
   }
 
   .aksel-switch__input:checked:disabled ~ .aksel-switch__track {
-    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 ~ .aksel-switch__track {
@@ -1601,7 +1502,7 @@
 
   .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb {
     background-color: var(--ax-bg-raised);
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     width: 1.25rem;
     height: 1.25rem;
     top: 0;
@@ -1622,11 +1523,11 @@
 
   @media (hover: hover) and (pointer: fine) {
     .aksel-switch__input:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
-      transform: translateX(.0625rem);
+      transform: translateX(.17rem);
     }
 
     .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
-      transform: translateX(1.19rem);
+      transform: translateX(1.1rem);
     }
   }
 
@@ -1660,10 +1561,6 @@
     cursor: default;
   }
 
-  .aksel-switch--readonly > .aksel-switch__input:hover ~ .aksel-switch__label-wrapper, .aksel-switch--readonly .aksel-switch__label-wrapper:hover {
-    color: var(--ax-text-neutral);
-  }
-
   .aksel-switch--readonly .aksel-switch__label {
     display: inline-flex;
   }
@@ -1688,10 +1585,6 @@
   }
 
   @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;
     }
@@ -1733,11 +1626,11 @@
   }
 
   .aksel-text-field__input:hover {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-text-field__input: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;
   }
@@ -1813,13 +1706,13 @@
   }
 
   .aksel-textarea__input:hover {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-textarea__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);
   }
 
   .aksel-textarea__input:disabled {
@@ -1996,11 +1889,11 @@
   }
 
   .aksel-search__button-search.aksel-button--secondary:hover:not(:disabled) {
-    --__axc-button-border-color: var(--ax-border-accent-strong);
+    --__axc-button-border-color: var(--ax-border-strong);
   }
 
   .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);
   }
 
   .aksel-search--error .aksel-search__input:not(:disabled) {
@@ -2036,7 +1929,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);
   }
 
   .aksel-form-field--small .aksel-combobox__wrapper {
@@ -2097,7 +1990,7 @@
   .aksel-combobox__wrapper-inner: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);
   }
 
   .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus-visible).aksel-combobox__wrapper-inner--virtually-unfocused {
@@ -2226,11 +2119,11 @@
   }
 
   .aksel-combobox__button-toggle-list:hover {
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
   }
 
   .aksel-combobox__button-toggle-list:hover:active {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-default);
   }
 
   .aksel-combobox__list {
@@ -2332,7 +2225,7 @@
   }
 
   .aksel-combobox__list-item--selected {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
+    background-color: var(--ax-bg-moderate-pressedA);
   }
 
   .aksel-combobox__list-item--selected p {
@@ -2340,8 +2233,8 @@
   }
 
   .aksel-combobox__list-item--new-option {
-    border-bottom: 1px solid var(--ax-border-accent-subtleA);
-    background: var(--ax-bg-accent-moderateA);
+    border-bottom: 1px solid var(--ax-border-subtleA);
+    background: var(--ax-bg-moderateA);
     cursor: pointer;
     margin: 0;
     border-radius: 0;
@@ -2524,13 +2417,13 @@
   .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__value .aksel-form-summary__answers .aksel-form-summary__answer {
-    border-color: var(--ax-border-info-subtleA);
+    border-color: var(--ax-border-subtleA);
   }
 
   .aksel-form-progress__bar {
@@ -2591,7 +2484,7 @@
     text-align: left;
     cursor: pointer;
     border-radius: var(--ax-radius-8);
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     background: none;
     border: none;
     display: flex;
@@ -2611,7 +2504,7 @@
   }
 
   .aksel-accordion__header:hover {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   .aksel-accordion__header:hover:before, .aksel-accordion__header:hover:after {
@@ -2619,8 +2512,8 @@
   }
 
   .aksel-accordion__header:hover > .aksel-accordion__icon-wrapper {
-    background-color: var(--ax-bg-accent-strong-hover);
-    color: var(--ax-text-accent-contrast);
+    background-color: var(--ax-bg-strong-hover);
+    color: var(--ax-text-contrast);
   }
 
   @media (forced-colors: active) {
@@ -2668,10 +2561,10 @@
 
   .aksel-accordion__icon-wrapper {
     border-radius: var(--ax-radius-8);
-    background-color: var(--ax-bg-accent-moderateA);
+    background-color: var(--ax-bg-moderateA);
     width: 22px;
     height: 22px;
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     align-self: center;
   }
 
@@ -2746,10 +2639,16 @@
     padding: var(--ax-space-20);
     gap: var(--ax-space-12);
     border: 1px solid;
+    border-color: var(--ax-border-default);
+    background-color: var(--ax-bg-moderate);
     align-items: center;
     display: flex;
   }
 
+  .aksel-alert > .aksel-alert__icon {
+    color: var(--ax-text-decoration);
+  }
+
   @media (forced-colors: active) {
     .aksel-alert {
       color: canvastext;
@@ -2779,42 +2678,6 @@
     margin-block-start: 0;
   }
 
-  .aksel-alert--info {
-    border-color: var(--ax-border-info);
-    background-color: var(--ax-bg-info-moderate);
-  }
-
-  .aksel-alert--info > .aksel-alert__icon {
-    color: var(--ax-text-info-decoration);
-  }
-
-  .aksel-alert--success {
-    border-color: var(--ax-border-success);
-    background-color: var(--ax-bg-success-moderate);
-  }
-
-  .aksel-alert--success > .aksel-alert__icon {
-    color: var(--ax-text-success-decoration);
-  }
-
-  .aksel-alert--warning {
-    border-color: var(--ax-border-warning);
-    background-color: var(--ax-bg-warning-moderate);
-  }
-
-  .aksel-alert--warning > .aksel-alert__icon {
-    color: var(--ax-text-warning-decoration);
-  }
-
-  .aksel-alert--error {
-    border-color: var(--ax-border-danger);
-    background-color: var(--ax-bg-danger-moderate);
-  }
-
-  .aksel-alert--error > .aksel-alert__icon {
-    color: var(--ax-text-danger-decoration);
-  }
-
   .aksel-alert--full-width {
     border-radius: 0;
   }
@@ -2852,6 +2715,21 @@
     display: flex;
   }
 
+  .aksel-chat .aksel-chat__bubble, .aksel-chat .aksel-chat__avatar {
+    background-color: var(--ax-bg-moderateA);
+    border: 1px solid var(--ax-border-subtleA);
+  }
+
+  .aksel-chat[data-variant="subtle"] .aksel-chat__bubble, .aksel-chat[data-variant="subtle"] .aksel-chat__avatar {
+    background-color: var(--ax-bg-softA);
+    border: 1px solid var(--ax-border-subtleA);
+  }
+
+  .aksel-chat[data-color="neutral"][data-variant="subtle"] .aksel-chat__bubble, .aksel-chat[data-color="neutral"][data-variant="subtle"] .aksel-chat__avatar {
+    background-color: var(--ax-bg-raised);
+    border: 1px solid var(--ax-border-neutral-subtleA);
+  }
+
   .aksel-chat--right {
     flex-direction: row-reverse;
   }
@@ -2866,9 +2744,7 @@
   }
 
   .aksel-chat__avatar {
-    background-color: var(--ax-bg-raised);
     border-radius: var(--ax-radius-full);
-    border: 1px solid var(--ax-border-neutral-subtleA);
     color: var(--ax-text-neutral);
     letter-spacing: .024rem;
     flex-shrink: 0;
@@ -2900,11 +2776,9 @@
 
   .aksel-chat__bubble {
     padding: var(--ax-space-20);
-    background-color: var(--ax-bg-raised);
     gap: var(--ax-space-8);
     border-radius: var(--ax-radius-12);
     border-bottom-left-radius: var(--ax-radius-2);
-    border: 1px solid var(--ax-border-neutral-subtleA);
     flex-direction: column;
     width: fit-content;
     display: flex;
@@ -2914,14 +2788,6 @@
     padding: var(--ax-space-16);
   }
 
-  .aksel-chat--info .aksel-chat__bubble, .aksel-chat--info .aksel-chat__avatar {
-    background-color: var(--ax-bg-info-moderate);
-  }
-
-  .aksel-chat--neutral .aksel-chat__bubble, .aksel-chat--neutral .aksel-chat__avatar {
-    background-color: var(--ax-bg-neutral-moderateA);
-  }
-
   .aksel-chat__top-text {
     color: var(--ax-text-neutral);
     gap: var(--ax-space-8);
@@ -2979,8 +2845,8 @@
   }
 
   .aksel-date .rdp-day_range_middle.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);
   }
 
@@ -3027,8 +2893,8 @@
   }
 
   .aksel-date .rdp-day_selected, .aksel-date .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;
   }
 
@@ -3040,7 +2906,7 @@
   }
 
   .aksel-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover, .aksel-date .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;
   }
 
@@ -3049,7 +2915,7 @@
   }
 
   .aksel-date .rdp-day_today:before {
-    background-color: var(--ax-text-accent-subtle);
+    background-color: var(--ax-text-subtle);
     border-radius: var(--ax-radius-full);
     content: "";
     width: 6px;
@@ -3062,7 +2928,7 @@
   }
 
   :is(.aksel-date .rdp-day_today.rdp-day_selected:not(.rdp-day_range_middle), .aksel-date .rdp-day_today:active):before {
-    background-color: var(--ax-text-accent-contrast);
+    background-color: var(--ax-text-contrast);
   }
 
   .aksel-date .rdp-day_outside {
@@ -3118,8 +2984,8 @@
   }
 
   :is(:is(.aksel-date__wrapper, .aksel-date__standalone-wrapper) .rdp-cell > button.rdp-day, :is(.aksel-date__wrapper, .aksel-date__standalone-wrapper) button.aksel-date__month-button):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);
   }
 
   .aksel-date__field-input.aksel-text-field__input {
@@ -3274,11 +3140,11 @@
   }
 
   .aksel-dropdown__item:hover {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   .aksel-dropdown__item:active {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
+    background-color: var(--ax-bg-moderate-pressedA);
   }
 
   .aksel-dropdown__item:focus-visible {
@@ -3374,7 +3240,7 @@
   }
 
   .aksel-action-menu__item:focus {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
     color: var(--ax-text-neutral);
     outline: none;
   }
@@ -3397,7 +3263,7 @@
   }
 
   .aksel-action-menu__sub-trigger:focus {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   .aksel-action-menu__item--danger {
@@ -3489,14 +3355,18 @@
     --__axc-expansioncard-padding-block: var(--ax-space-20);
     --__axc-expansioncard-padding-inline: var(--ax-space-20);
     border-radius: var(--ax-radius-12);
-    background-color: var(--ax-bg-raised);
-    border: 1px solid var(--ax-border-neutral);
+    background-color: var(--ax-bg-softA);
+    border: 1px solid var(--ax-border-default);
     height: fit-content;
   }
 
+  .aksel-expansioncard[data-color="neutral"] {
+    background-color: var(--ax-bg-raised);
+  }
+
   .aksel-expansioncard: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);
   }
 
   .aksel-expansioncard--small {
@@ -3529,7 +3399,7 @@
   }
 
   .aksel-expansioncard__header:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   .aksel-expansioncard__header[data-open="true"] {
@@ -3539,7 +3409,7 @@
 
   .aksel-expansioncard__header[data-open="true"]: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;
@@ -3594,7 +3464,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 {
@@ -3677,7 +3547,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);
     width: var(--__axc-guide-panel-guide-size);
     height: var(--__axc-guide-panel-guide-size);
@@ -3692,7 +3562,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;
   }
@@ -3762,7 +3632,7 @@
   .aksel-help-text__button {
     cursor: pointer;
     border-radius: var(--ax-radius-full);
-    color: var(--ax-bg-info-strong);
+    color: var(--ax-bg-strong);
     padding: calc(var(--ax-space-4) / 2);
     background-color: rgba(0, 0, 0, 0);
     border: 0;
@@ -3778,10 +3648,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, .aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon {
@@ -3790,11 +3660,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) {
@@ -3911,7 +3781,7 @@
   }
 
   .aksel-link {
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     align-items: center;
     gap: var(--ax-space-2);
     text-underline-offset: .1em;
@@ -3930,6 +3800,14 @@
     border-radius: 1px;
   }
 
+  .aksel-link[data-color="neutral"] {
+    color: var(--ax-text-default);
+  }
+
+  .aksel-link[data-variant="subtle"] {
+    color: var(--ax-text-subtle);
+  }
+
   .aksel-link.aksel-link--inline-text {
     display: inline;
   }
@@ -3955,19 +3833,7 @@
   }
 
   :is(.aksel-alert:not(.aksel-alert--inline), .aksel-confirmation-panel) .aksel-link {
-    color: var(--ax-text-neutral);
-  }
-
-  .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);
+    color: var(--ax-text-default);
   }
 
   .aksel-link-panel {
@@ -4061,35 +3927,23 @@
   .aksel-loader__foreground {
     stroke-dasharray: 80 200;
     stroke-dashoffset: 0;
-    stroke: var(--ax-border-neutral-strong);
+    stroke: var(--ax-border-strong);
     stroke-linecap: round;
     stroke-width: var(--__axc-loader-stroke-width);
     animation: 1.5s ease-in-out infinite loader-dasharray;
   }
 
-  .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--interaction .aksel-loader__foreground {
-    stroke: var(--ax-border-accent-strong);
-  }
-
-  .aksel-loader--interaction .aksel-loader__background {
-    stroke: var(--ax-border-accent-subtleA);
+  .aksel-loader[data-variant="inverted"] .aksel-loader__foreground {
+    stroke: var(--ax-border-subtle);
   }
 
-  .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--inverted .aksel-loader__background {
-    stroke: var(--ax-border-neutral-strong);
+  .aksel-loader[data-variant="inverted"] .aksel-loader__background {
+    stroke: var(--ax-border-strong);
   }
 
   .aksel-loader--transparent .aksel-loader__background {
@@ -4345,11 +4199,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;
   }
@@ -4382,7 +4231,6 @@
     --__axc-tag-icon-margin: -2px;
     --__axc-tag-border: ;
     --__axc-tag-bg: ;
-    --__axc-tag-bg-strong: ;
     --__axc-tag-text: ;
     --__axc-tag-text-strong: ;
     border-radius: var(--ax-radius-4);
@@ -4399,60 +4247,46 @@
     gap: var(--ax-space-2);
   }
 
-  .aksel-tag--info, .aksel-tag--alt3 {
-    --__axc-tag-border: var(--ax-border-info);
-    --__axc-tag-bg: var(--ax-bg-info-moderateA);
-    --__axc-tag-bg-strong: var(--ax-bg-info-strong);
-    --__axc-tag-text: var(--ax-text-info);
-    --__axc-tag-text-strong: var(--ax-text-info-contrast);
+  .aksel-tag[data-variant="outline"] {
+    box-shadow: inset 0 0 0 1px var(--ax-border-default);
+    background: var(--ax-bg-moderate);
+    color: var(--ax-text-default);
   }
 
-  .aksel-tag--success {
-    --__axc-tag-border: var(--ax-border-success);
-    --__axc-tag-bg: var(--ax-bg-success-moderateA);
-    --__axc-tag-bg-strong: var(--ax-bg-success-strong);
-    --__axc-tag-text: var(--ax-text-success);
-    --__axc-tag-text-strong: var(--ax-text-success-contrast);
+  @media (forced-colors: active) {
+    .aksel-tag[data-variant="outline"] {
+      color: canvastext;
+    }
   }
 
-  .aksel-tag--warning {
-    --__axc-tag-border: var(--ax-border-warning);
-    --__axc-tag-bg: var(--ax-bg-warning-moderateA);
-    --__axc-tag-bg-strong: var(--ax-bg-warning-strong);
-    --__axc-tag-text: var(--ax-text-warning);
-    --__axc-tag-text-strong: var(--ax-text-warning-contrast);
+  .aksel-tag[data-variant="moderate"] {
+    background: var(--ax-bg-moderateA);
+    color: var(--ax-text-default);
   }
 
-  .aksel-tag--error {
-    --__axc-tag-border: var(--ax-border-danger);
-    --__axc-tag-bg: var(--ax-bg-danger-moderateA);
-    --__axc-tag-bg-strong: var(--ax-bg-danger-strong);
-    --__axc-tag-text: var(--ax-text-danger);
-    --__axc-tag-text-strong: var(--ax-text-danger-contrast);
+  @media (forced-colors: active) {
+    .aksel-tag[data-variant="moderate"] {
+      box-shadow: inset 0 0 0 1px var(--ax-bg-strong);
+      color: canvastext;
+    }
   }
 
-  .aksel-tag--neutral {
-    --__axc-tag-border: var(--ax-border-neutral);
-    --__axc-tag-bg: var(--ax-bg-neutral-moderateA);
-    --__axc-tag-bg-strong: var(--ax-bg-neutral-strong);
-    --__axc-tag-text: var(--ax-text-neutral);
-    --__axc-tag-text-strong: var(--ax-text-neutral-contrast);
+  .aksel-tag[data-variant="strong"] {
+    background: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
   }
 
-  .aksel-tag--meta-purple, .aksel-tag--alt1 {
-    --__axc-tag-border: var(--ax-border-meta-purple);
-    --__axc-tag-bg: var(--ax-bg-meta-purple-moderateA);
-    --__axc-tag-bg-strong: var(--ax-bg-meta-purple-strong);
-    --__axc-tag-text: var(--ax-text-meta-purple);
-    --__axc-tag-text-strong: var(--ax-text-meta-purple-contrast);
+  @media (forced-colors: active) {
+    .aksel-tag[data-variant="strong"] {
+      color: canvas;
+    }
   }
 
-  .aksel-tag--meta-lime, .aksel-tag--alt2 {
-    --__axc-tag-border: var(--ax-border-meta-lime);
-    --__axc-tag-bg: var(--ax-bg-meta-lime-moderateA);
-    --__axc-tag-bg-strong: var(--ax-bg-meta-lime-strong);
-    --__axc-tag-text: var(--ax-text-meta-lime);
-    --__axc-tag-text-strong: var(--ax-text-meta-lime-contrast);
+  @media (forced-colors: active) {
+    .aksel-tag {
+      forced-color-adjust: none;
+      color: canvastext;
+    }
   }
 
   .aksel-tag--small {
@@ -4474,37 +4308,6 @@
     display: flex;
   }
 
-  .aksel-tag--outline {
-    box-shadow: inset 0 0 0 1px var(--__axc-tag-border);
-    background: var(--__axc-tag-bg);
-    color: var(--__axc-tag-text);
-  }
-
-  .aksel-tag--moderate {
-    background: var(--__axc-tag-bg);
-    color: var(--__axc-tag-text);
-  }
-
-  .aksel-tag--strong {
-    background: var(--__axc-tag-bg-strong);
-    color: var(--__axc-tag-text-strong);
-  }
-
-  @media (forced-colors: active) {
-    .aksel-tag {
-      forced-color-adjust: none;
-      color: canvastext;
-    }
-
-    .aksel-tag--moderate {
-      box-shadow: inset 0 0 0 1px var(--__axc-tag-bg-strong);
-    }
-
-    .aksel-tag--strong {
-      color: canvas;
-    }
-  }
-
   .aksel-timeline {
     grid-template-columns: auto minmax(0, 1fr);
     align-items: center;
@@ -4582,15 +4385,28 @@
   .aksel-timeline__period {
     border-radius: var(--ax-radius-full);
     z-index: 2;
-    border: none;
-    align-items: center;
+    background: var(--ax-bg-moderate);
+    border: solid 1px var(--ax-border-default);
     height: 100%;
+    color: var(--ax-text-decoration);
+    align-items: center;
     padding: 0;
     font-size: 1rem;
     display: flex;
     position: absolute;
   }
 
+  .aksel-timeline__period.aksel-timeline__period--clickable:hover {
+    background: var(--ax-bg-moderate-hover);
+    border-color: var(--ax-border-strong);
+  }
+
+  .aksel-timeline__period.aksel-timeline__period--clickable.aksel-timeline__period--selected {
+    background: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
+    border: none;
+  }
+
   .aksel-timeline__period--inner {
     margin: 0 var(--ax-space-8);
     white-space: nowrap;
@@ -4609,91 +4425,6 @@
     cursor: pointer;
   }
 
-  .aksel-timeline__period--success {
-    background: var(--ax-bg-success-moderate);
-    border: solid 1px var(--ax-border-success);
-    color: var(--ax-text-success-decoration);
-  }
-
-  .aksel-timeline__period--success.aksel-timeline__period--clickable:hover {
-    background: var(--ax-bg-success-moderate-hover);
-    border-color: var(--ax-border-success-strong);
-  }
-
-  .aksel-timeline__period--success.aksel-timeline__period--clickable.aksel-timeline__period--selected {
-    background: var(--ax-bg-success-strong-pressed);
-    color: var(--ax-text-success-contrast);
-    border: none;
-  }
-
-  .aksel-timeline__period--warning {
-    background: var(--ax-bg-warning-moderate);
-    border: solid 1px var(--ax-border-warning);
-    color: var(--ax-text-warning-decoration);
-  }
-
-  .aksel-timeline__period--warning.aksel-timeline__period--clickable:hover {
-    background: var(--ax-bg-warning-moderate-hover);
-    border-color: var(--ax-border-warning-strong);
-  }
-
-  .aksel-timeline__period--warning.aksel-timeline__period--clickable.aksel-timeline__period--selected {
-    background: var(--ax-bg-warning-strong-pressed);
-    color: var(--ax-text-warning-contrast);
-    border: none;
-  }
-
-  .aksel-timeline__period--danger {
-    background: var(--ax-bg-danger-moderate);
-    border: solid 1px var(--ax-border-danger);
-    color: var(--ax-text-danger-decoration);
-  }
-
-  .aksel-timeline__period--danger.aksel-timeline__period--clickable:hover {
-    background: var(--ax-bg-danger-moderate-hover);
-    border-color: var(--ax-border-danger-strong);
-  }
-
-  .aksel-timeline__period--danger.aksel-timeline__period--clickable.aksel-timeline__period--selected {
-    background: var(--ax-bg-danger-strong-pressed);
-    color: var(--ax-text-danger-contrast);
-    border: none;
-  }
-
-  .aksel-timeline__period--info {
-    background: var(--ax-bg-info-moderate);
-    border: solid 1px var(--ax-border-info);
-    color: var(--ax-text-info-decoration);
-  }
-
-  .aksel-timeline__period--info.aksel-timeline__period--clickable:hover {
-    background: var(--ax-bg-info-moderate-hover);
-    border-color: var(--ax-border-info-strong);
-  }
-
-  .aksel-timeline__period--info.aksel-timeline__period--clickable.aksel-timeline__period--selected {
-    background: var(--ax-bg-info-strong-pressed);
-    color: var(--ax-text-info-contrast);
-    border: none;
-  }
-
-  .aksel-timeline__period--neutral {
-    background: var(--ax-bg-neutral-moderate);
-    border: solid 1px var(--ax-border-neutral);
-    color: var(--ax-text-neutral-decoration);
-  }
-
-  .aksel-timeline__period--neutral.aksel-timeline__period--clickable:hover {
-    background: var(--ax-bg-neutral-moderate-hover);
-    border-color: var(--ax-border-neutral-strong);
-  }
-
-  .aksel-timeline__period--neutral.aksel-timeline__period--clickable.aksel-timeline__period--selected {
-    background: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
-    border: none;
-  }
-
   .aksel-timeline__period--connected-both {
     border-radius: 0;
   }
@@ -5014,7 +4745,7 @@
   }
 
   .aksel-toggle-group__button:hover {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
     color: var(--ax-text-neutral);
   }
 
@@ -5025,8 +4756,8 @@
   }
 
   .aksel-toggle-group__button[data-selected="true"] {
-    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);
   }
 
   .aksel-toggle-group__button:not([data-selected="true"], :first-child, .aksel-toggle-group__button[data-selected="true"] + .aksel-toggle-group__button):before {
@@ -5053,15 +4784,6 @@
     font-size: var(--ax-font-size-heading-medium);
   }
 
-  :where(.aksel-toggle-group--neutral) .aksel-toggle-group__button:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
-  }
-
-  :where(.aksel-toggle-group--neutral) .aksel-toggle-group__button[data-selected="true"] {
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
-  }
-
   .aksel-toggle-group--small .aksel-toggle-group__button {
     padding: var(--ax-space-2) var(--ax-space-12);
     min-height: 2rem;
@@ -5115,7 +4837,7 @@
     cursor: pointer;
     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;
@@ -5143,13 +4865,13 @@
   }
 
   .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);
   }
 
   .aksel-read-more[data-volume="high"] .aksel-read-more__button: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);
   }
 
   .aksel-read-more[data-volume="high"].aksel-read-more--large {
@@ -5223,7 +4945,7 @@
   .aksel-progress-bar__foreground {
     --__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: 0;
     border-radius: inherit;
     width: 100%;
@@ -5371,7 +5093,7 @@
     --__axc-stepper-circle-size: 1.75rem;
     --__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);
     margin: 0;
     padding-left: 0;
@@ -5388,7 +5110,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);
@@ -5465,7 +5187,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;
   }
@@ -5481,8 +5203,8 @@
   }
 
   .aksel-stepper__step[data-interactive="true"] .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);
   }
 
   .aksel-stepper__step[data-interactive="true"][data-active="true"] .aksel-stepper__content {
@@ -5490,14 +5212,14 @@
   }
 
   .aksel-stepper__step[data-interactive="true"][data-active="true"] .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);
   }
 
   .aksel-stepper__step[data-interactive="true"][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);
   }
 
   .aksel-stepper__step[data-interactive="false"] {
@@ -5611,7 +5333,7 @@
   }
 
   .aksel-table__body .aksel-table__row--shade-on-hover.aksel-table__row--selected:hover {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   .aksel-table__row {
@@ -5619,11 +5341,11 @@
   }
 
   .aksel-table__row--selected {
-    background-color: var(--ax-bg-accent-softA);
+    background-color: var(--ax-bg-softA);
   }
 
   .aksel-table__row--selected + .aksel-table__expanded-row {
-    background-color: var(--ax-bg-accent-softA);
+    background-color: var(--ax-bg-softA);
   }
 
   .aksel-table--zebra-stripes .aksel-table__body :where(.aksel-table__row:nth-child(odd):not(.aksel-table__row--selected)) {
@@ -5639,7 +5361,7 @@
   }
 
   .aksel-table--zebra-stripes .aksel-table__row--selected + .aksel-table__expanded-row:nth-child(4n) {
-    background-color: var(--ax-bg-accent-softA);
+    background-color: var(--ax-bg-softA);
   }
 
   .aksel-table__header-cell, .aksel-table__data-cell {
@@ -5695,7 +5417,7 @@
 
   .aksel-table__sort-button {
     appearance: none;
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     cursor: pointer;
     padding: var(--ax-space-16) var(--ax-space-12);
     gap: var(--ax-space-4);
@@ -5723,8 +5445,8 @@
   }
 
   .aksel-table__header-cell[aria-sort="ascending"] .aksel-table__sort-button, .aksel-table__header-cell[aria-sort="descending"] .aksel-table__sort-button {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
-    color: var(--ax-text-accent);
+    background-color: var(--ax-bg-moderate-pressedA);
+    color: var(--ax-text-default);
   }
 
   .aksel-table__header-cell--align-right .aksel-table__sort-button {
@@ -5796,7 +5518,7 @@
   }
 
   .aksel-table__row--selected :is(:scope .aksel-table__toggle-expand-button:hover, :scope .aksel-table__toggle-expand-cell:hover > .aksel-table__toggle-expand-button, :scope .aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button) {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   .aksel-table__toggle-expand-cell--open > :where(.aksel-table__toggle-expand-button) :where(.aksel-table__expandable-icon) {
@@ -5909,7 +5631,7 @@
 
   .aksel-tabs__tab[data-state="active"] {
     --__axc-tabs-line-width: -4px;
-    --__axc-tabs-line-color: var(--ax-border-accent-strong);
+    --__axc-tabs-line-color: var(--ax-border-strong);
   }
 
   .aksel-tabs__tab:focus-visible {
@@ -5945,7 +5667,7 @@
     padding: var(--ax-space-4) var(--ax-space-16);
   }
 
-  :is(.aksel-tabs__tab, .aksel-tabs__tab--small.aksel-tabs__tab--icon-only, .aksel-tabs__tab--small.aksel-tabs__tab-icon--top) svg {
+  .aksel-tabs__tab svg, .aksel-tabs__tab--small.aksel-tabs__tab--icon-only svg, .aksel-tabs__tab--small.aksel-tabs__tab-icon--top svg {
     font-size: 1.25rem;
   }
 
@@ -6015,28 +5737,14 @@
     display: flex;
   }
 
-  :root .aksel-list ol {
-    padding-left: 2.1rem;
-  }
-
-  _::-webkit-full-page-media {
-    padding-left: 2.1rem;
-  }
-
-  _:future {
-    padding-left: 2.1rem;
-  }
-
-  :root .aksel-list ol .aksel-list__item {
-    padding-left: 0;
-  }
-
-  _::-webkit-full-page-media {
-    padding-left: 0;
-  }
+  @supports (hanging-punctuation: first) and (font: -apple-system-body) and (appearance: none) {
+    .aksel-list ol {
+      padding-left: 2.1rem;
+    }
 
-  _:future {
-    padding-left: 0;
+    .aksel-list ol .aksel-list__item {
+      padding-left: 0;
+    }
   }
 
   .aksel-list__item {