@navikt/ds-css 7.21.1 → 7.23.0

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

@@ -269,17 +269,33 @@
     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;
     --__axc-button-border-color: transparent;
     --__axc-button-border-width: 2px;
     padding: var(--ax-space-12) var(--ax-space-20);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     cursor: pointer;
     justify-content: center;
     align-items: center;
@@ -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) {
@@ -567,7 +519,7 @@
     align-items: center;
     gap: var(--ax-space-2);
     padding: 0 var(--ax-space-12);
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     min-height: 2rem;
     margin: 0;
     text-decoration: none;
@@ -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,29 +589,17 @@
   }
 
   .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 {
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     place-items: center;
     width: 1.5rem;
     height: 1.5rem;
@@ -777,7 +695,7 @@
     width: 100%;
     padding: var(--ax-space-20);
     border: 1px dashed var(--ax-border-neutral);
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     background-color: var(--__axc-dropzone-background);
     color: var(--ax-text-neutral);
     transition: background-color var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
@@ -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,13 +731,13 @@
   }
 
   .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-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     animation: akselDropzoneDragoverAnimation var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
     margin: -1px;
     position: absolute;
@@ -839,7 +757,7 @@
     }
 
     100% {
-      background-color: var(--ax-bg-accent-moderateA);
+      background-color: var(--ax-bg-moderateA);
     }
   }
 
@@ -866,7 +784,7 @@
 
   .aksel-dropzone__area-release__icon {
     padding: var(--__axc-dropzone-icon-padding);
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     background-color: var(--ax-bg-neutral-moderateA);
     transition: background-color .3s var(--__axc-dropzone-animation-ease-out), font-size .3s var(--__axc-dropzone-animation-ease-out);
     font-size: 1.5rem;
@@ -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%);
   }
@@ -911,7 +829,7 @@
     background-color: var(--ax-bg-raised);
     border: 1px solid var(--ax-border-neutral-subtleA);
     outline-offset: -1px;
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     padding: var(--ax-space-20);
     gap: var(--ax-space-12);
     align-items: flex-start;
@@ -926,7 +844,7 @@
   .aksel-file-item__icon {
     background-color: var(--ax-bg-neutral-moderateA);
     color: var(--ax-text-neutral);
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     min-width: 2.5rem;
     min-height: 2.5rem;
     margin-top: var(--ax-space-2);
@@ -1011,7 +929,7 @@
     background-color: var(--ax-bg-default);
     padding: var(--ax-space-20);
     border: 4px solid var(--ax-border-danger);
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     outline-offset: 3px;
   }
 
@@ -1059,7 +977,7 @@
   .aksel-confirmation-panel__inner {
     gap: var(--ax-space-12);
     padding: var(--ax-space-16);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     border: 1px solid var(--ax-border-default);
     background-color: var(--ax-bg-moderate);
     flex-direction: column;
@@ -1080,8 +998,8 @@
       border-color: orange;
       border-left-style: solid;
       border-left-width: 8px;
-      border-start-start-radius: calc(var(--ax-border-radius-large)  - 1px);
-      border-end-start-radius: calc(var(--ax-border-radius-large)  - 1px);
+      border-start-start-radius: calc(var(--ax-radius-8)  - 1px);
+      border-end-start-radius: calc(var(--ax-radius-8)  - 1px);
       height: 100%;
       position: absolute;
       top: 0;
@@ -1124,7 +1042,7 @@
 
   .aksel-checkbox__label:before, .aksel-radio__label:before {
     content: "";
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4);
     background-color: var(--ax-bg-input);
     border: 2px solid var(--ax-border-neutral);
     flex-shrink: 0;
@@ -1133,7 +1051,7 @@
   }
 
   .aksel-radio__label:before {
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
   }
 
   .aksel-checkbox__content, .aksel-radio__content {
@@ -1162,7 +1080,7 @@
     content: "";
     width: 100%;
     height: calc(100% - var(--ax-space-24));
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4);
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
     pointer-events: none;
@@ -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);
@@ -1366,7 +1267,7 @@
   .aksel-select__input {
     appearance: none;
     background-color: var(--ax-bg-input);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     border: 1px solid var(--ax-border-neutral);
     color: var(--ax-text-neutral);
     box-sizing: border-box;
@@ -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) {
@@ -1521,7 +1422,7 @@
     content: "";
     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;
@@ -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;
   }
@@ -1546,11 +1443,11 @@
     width: 2.75rem;
     height: 1.5rem;
     top: var(--ax-space-12);
-    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: .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 {
@@ -1586,7 +1487,7 @@
 
   .aksel-switch__thumb {
     background-color: var(--ax-bg-neutral-strong);
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     justify-content: center;
     align-items: center;
     width: 1.125rem;
@@ -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;
     }
@@ -1725,7 +1618,7 @@
     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);
     width: 100%;
     min-height: 3rem;
@@ -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;
   }
@@ -1800,7 +1693,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%;
@@ -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 {
@@ -1914,7 +1807,7 @@
   }
 
   .aksel-search__wrapper {
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     align-items: center;
     display: inline-flex;
   }
@@ -1981,8 +1874,8 @@
 
   .aksel-search__button-search {
     border-radius: 0;
-    border-top-right-radius: var(--ax-border-radius-large);
-    border-bottom-right-radius: var(--ax-border-radius-large);
+    border-top-right-radius: var(--ax-radius-8);
+    border-bottom-right-radius: var(--ax-radius-8);
     flex-shrink: 0;
   }
 
@@ -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) {
@@ -2028,7 +1921,7 @@
     --__axc-combobox-list-item-padding-inline: var(--ax-space-12);
     --__axc-combobox-border-width: 1px;
     --__axc-combobox-input-height: 2rem;
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     flex-direction: column;
     width: 100%;
     display: flex;
@@ -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 {
@@ -2091,13 +1984,13 @@
 
   .aksel-combobox__wrapper-inner {
     border: 1px solid var(--ax-border-neutral);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
   }
 
   .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 {
@@ -2143,7 +2036,7 @@
   }
 
   .aksel-combobox__selected-options > li {
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     margin: auto 0;
   }
 
@@ -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 {
@@ -2240,7 +2133,7 @@
     right: 0;
     top: calc(100% + var(--ax-space-8));
     border: 1px solid var(--ax-border-neutral-subtleA);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     background-color: var(--ax-bg-raised);
     color: var(--ax-text-neutral);
     overscroll-behavior: contain;
@@ -2262,7 +2155,7 @@
   .aksel-combobox__list-item, .aksel-combobox__list-item--loading, .aksel-combobox__list-item--no-options, .aksel-combobox__list-item--new-option, .aksel-combobox__list-item--max-selected {
     padding-block: var(--__axc-combobox-list-item-padding-block);
     padding-inline: var(--__axc-combobox-list-item-padding-inline);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     margin-inline: var(--ax-space-8);
     margin-block: var(--ax-space-2);
     border: 0;
@@ -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;
@@ -2360,13 +2253,13 @@
   }
 
   .aksel-combobox__list-item--new-option--focus {
-    border-radius: calc(var(--ax-border-radius-large)  - 1px) calc(var(--ax-border-radius-large)  - 1px) 0 0;
+    border-radius: calc(var(--ax-radius-8)  - 1px) calc(var(--ax-radius-8)  - 1px) 0 0;
     outline: 2px solid var(--ax-border-focus);
     outline-offset: -2px;
   }
 
   .aksel-combobox__list-item--new-option--focus:only-child {
-    border-radius: calc(var(--ax-border-radius-large)  - 1px);
+    border-radius: calc(var(--ax-radius-8)  - 1px);
   }
 
   @media (max-width: 479px) {
@@ -2451,7 +2344,7 @@
 
   .aksel-form-summary {
     border: 1px solid var(--ax-border-neutral-subtleA);
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     background: var(--ax-bg-raised);
     overflow: hidden;
   }
@@ -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);
-    border-radius: var(--ax-border-radius-large);
-    border: 1px solid var(--ax-border-info-subtleA);
+    background: var(--ax-bg-moderateA);
+    border-radius: var(--ax-radius-8);
+    border: 1px solid var(--ax-border-subtleA);
   }
 
   .aksel-form-summary__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 {
@@ -2552,7 +2445,7 @@
   .aksel-form-progress__collapsible {
     visibility: hidden;
     border: 1px solid var(--ax-border-neutral-subtleA);
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     background: var(--ax-bg-raised);
     padding-inline: var(--ax-space-20);
     opacity: .001;
@@ -2590,8 +2483,8 @@
     padding: var(--ax-space-12);
     text-align: left;
     cursor: pointer;
-    border-radius: var(--ax-border-radius-large);
-    color: var(--ax-text-accent-subtle);
+    border-radius: var(--ax-radius-8);
+    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) {
@@ -2667,11 +2560,11 @@
   }
 
   .aksel-accordion__icon-wrapper {
-    border-radius: var(--ax-border-radius-large);
-    background-color: var(--ax-bg-accent-moderateA);
+    border-radius: var(--ax-radius-8);
+    background-color: var(--ax-bg-moderateA);
     width: 22px;
     height: 22px;
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     align-self: center;
   }
 
@@ -2742,14 +2635,20 @@
   }
 
   .aksel-alert {
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     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-icon);
-  }
-
-  .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-icon);
-  }
-
-  .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-icon);
-  }
-
-  .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-icon);
-  }
-
   .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;
   }
@@ -2861,14 +2739,12 @@
   }
 
   .aksel-chat--right .aksel-chat__bubble {
-    border-radius: var(--ax-border-radius-xlarge);
-    border-bottom-right-radius: var(--ax-border-radius-small);
+    border-radius: var(--ax-radius-12);
+    border-bottom-right-radius: var(--ax-radius-2);
   }
 
   .aksel-chat__avatar {
-    background-color: var(--ax-bg-raised);
-    border-radius: var(--ax-border-radius-full);
-    border: 1px solid var(--ax-border-neutral-subtleA);
+    border-radius: var(--ax-radius-full);
     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-border-radius-xlarge);
-    border-bottom-left-radius: var(--ax-border-radius-small);
-    border: 1px solid var(--ax-border-neutral-subtleA);
+    border-radius: var(--ax-radius-12);
+    border-bottom-left-radius: var(--ax-radius-2);
     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);
   }
 
@@ -3001,22 +2867,22 @@
   .aksel-date .rdp-button {
     all: unset;
     text-align: center;
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     width: 2.5rem;
     height: 2.5rem;
     display: block;
   }
 
   .aksel-date .rdp-day_range_start {
-    border-radius: 100% var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge) 100%;
+    border-radius: 100% var(--ax-radius-12) var(--ax-radius-12) 100%;
   }
 
   .aksel-date .rdp-day_range_end:not(.rdp-day_range_start) {
-    border-radius: var(--ax-border-radius-large) 100% 100% var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8) 100% 100% var(--ax-radius-8);
   }
 
   .aksel-date .rdp-day_range_start.rdp-day_range_end {
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
   }
 
   .aksel-date .aksel-date__field {
@@ -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,8 +2915,8 @@
   }
 
   .aksel-date .rdp-day_today:before {
-    background-color: var(--ax-text-accent-subtle);
-    border-radius: var(--ax-border-radius-full);
+    background-color: var(--ax-text-subtle);
+    border-radius: var(--ax-radius-full);
     content: "";
     width: 6px;
     height: 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 {
@@ -3096,7 +2962,7 @@
     all: unset;
     text-align: center;
     text-transform: capitalize;
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     cursor: pointer;
     width: 3rem;
     height: 3rem;
@@ -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 {
@@ -3133,7 +2999,7 @@
   .aksel-date__field-button {
     color: var(--ax-text-neutral);
     cursor: pointer;
-    border-radius: calc(var(--ax-border-radius-large)  - 1px);
+    border-radius: calc(var(--ax-radius-8)  - 1px);
     padding: var(--ax-space-12);
     background: none;
     border: none;
@@ -3263,7 +3129,7 @@
     gap: var(--ax-space-8);
     width: 100%;
     padding: var(--ax-space-4);
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4);
     color: var(--ax-text-neutral);
     background: none;
     border: none;
@@ -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 {
@@ -3304,7 +3170,7 @@
   }
 
   .aksel-action-menu__content {
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     border: 1px solid var(--ax-border-neutral-subtleA);
     box-shadow: var(--ax-shadow-dialog);
     transition: transform .25s cubic-bezier(0, 0, 0, 1) allow-discrete;
@@ -3340,7 +3206,7 @@
     --__axc-action-menu-item-pr: var(--ax-space-8);
     --__axc-action-menu-item-pl: var(--ax-space-8);
     --__axc-action-menu-item-height: 2rem;
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     background-color: var(--ax-bg-raised);
     min-width: 128px;
     max-width: min(95vw, 640px);
@@ -3357,7 +3223,7 @@
     gap: var(--ax-space-8);
     min-height: var(--__axc-action-menu-item-height);
     cursor: default;
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     padding-left: var(--__axc-action-menu-item-pl);
     padding-right: var(--__axc-action-menu-item-pr);
     font-size: var(--ax-font-size-medium);
@@ -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 {
@@ -3436,7 +3302,7 @@
   .aksel-action-menu__shortcut {
     background-color: var(--ax-bg-neutral-moderateA);
     color: var(--ax-text-neutral);
-    border-radius: var(--ax-border-radius-small);
+    border-radius: var(--ax-radius-2);
     padding: 0 var(--ax-space-4);
     min-width: 1.125rem;
     height: 1.125rem;
@@ -3452,7 +3318,7 @@
     padding-right: var(--__axc-action-menu-item-pr);
     padding-left: var(--__axc-action-menu-item-pl);
     color: var(--ax-text-neutral-subtle);
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4);
     -webkit-user-select: none;
     user-select: none;
     cursor: default;
@@ -3485,18 +3351,22 @@
   }
 
   .aksel-expansioncard {
-    --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge)  - 1px);
+    --__axc-expansioncard-border-radius: calc(var(--ax-radius-12)  - 1px);
     --__axc-expansioncard-padding-block: var(--ax-space-20);
     --__axc-expansioncard-padding-inline: var(--ax-space-20);
-    border-radius: var(--ax-border-radius-xlarge);
-    background-color: var(--ax-bg-raised);
-    border: 1px solid var(--ax-border-neutral);
+    border-radius: var(--ax-radius-12);
+    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;
@@ -3566,7 +3436,7 @@
 
   .aksel-expansioncard__header-button {
     cursor: pointer;
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     background: none;
     border: none;
     place-content: center;
@@ -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,8 +3547,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);
     width: var(--__axc-guide-panel-guide-size);
     height: var(--__axc-guide-panel-guide-size);
     flex-shrink: 0;
@@ -3692,8 +3562,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;
   }
 
@@ -3714,7 +3584,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);
     height: 100%;
     position: relative;
@@ -3761,8 +3631,8 @@
 
   .aksel-help-text__button {
     cursor: pointer;
-    border-radius: var(--ax-border-radius-full);
-    color: var(--ax-bg-info-strong);
+    border-radius: var(--ax-radius-full);
+    color: var(--ax-bg-strong);
     padding: calc(var(--ax-space-4) / 2);
     background-color: rgba(0, 0, 0, 0);
     border: 0;
@@ -3774,14 +3644,14 @@
   }
 
   .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, .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 {
@@ -4133,7 +3987,7 @@
     --__axc-modal-bg: var(--ax-bg-raised);
     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);
     max-width: 100%;
     max-height: 100%;
@@ -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;
   }
@@ -4359,7 +4208,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);
     max-width: calc(100vw - var(--ax-space-24));
   }
 
@@ -4382,10 +4231,9 @@
     --__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-border-radius-medium);
+    border-radius: var(--ax-radius-4);
     padding: var(--ax-space-2) var(--ax-space-8);
     justify-content: center;
     align-items: center;
@@ -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;
@@ -4580,17 +4383,30 @@
   }
 
   .aksel-timeline__period {
-    border-radius: var(--ax-border-radius-full);
+    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-icon);
-  }
-
-  .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-icon);
-  }
-
-  .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-icon);
-  }
-
-  .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-icon);
-  }
-
-  .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-icon);
-  }
-
-  .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;
   }
@@ -4724,7 +4455,7 @@
     background: var(--ax-bg-default);
     box-shadow: inset 0 0 0 4px var(--ax-bg-danger-strong);
     z-index: 2;
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     padding: var(--ax-space-8);
     border: none;
     position: relative;
@@ -4732,7 +4463,7 @@
 
   .aksel-timeline__pin-button:before {
     content: "";
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     width: 25px;
     height: 25px;
     position: absolute;
@@ -4775,16 +4506,16 @@
   }
 
   .aksel-timeline__zoom li:first-child .aksel-timeline__zoom-button {
-    border-radius: var(--ax-border-radius-medium) 0 0 var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4) 0 0 var(--ax-radius-4);
   }
 
   .aksel-timeline__zoom li:last-child .aksel-timeline__zoom-button {
-    border-radius: 0 var(--ax-border-radius-medium) var(--ax-border-radius-medium) 0;
+    border-radius: 0 var(--ax-radius-4) var(--ax-radius-4) 0;
     border-width: 1px;
   }
 
   .aksel-timeline__zoom li:only-child .aksel-timeline__zoom-button {
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4);
   }
 
   .aksel-timeline__zoom-button:not([aria-pressed="true"]):hover {
@@ -4817,7 +4548,7 @@
     box-shadow: var(--ax-shadow-dialog);
     border: 1px solid;
     border-color: var(--ax-border-neutral-subtleA);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     padding: var(--ax-space-16) var(--ax-space-20);
   }
 
@@ -4855,7 +4586,7 @@
     z-index: 3000;
     background-color: var(--ax-bg-neutral-strong);
     color: var(--ax-text-neutral-contrast);
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4);
     padding: 0 var(--ax-space-6);
     text-align: center;
     box-shadow: var(--ax-shadow-dialog);
@@ -4963,7 +4694,7 @@
     font-family: var(--ax-font-family);
     color: var(--ax-text-neutral);
     padding: 0 var(--ax-space-4);
-    border-radius: var(--ax-border-radius-small);
+    border-radius: var(--ax-radius-2);
     background: var(--ax-bg-neutral-moderate);
     justify-content: center;
     align-items: center;
@@ -4989,7 +4720,7 @@
   }
 
   .aksel-toggle-group {
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     background-color: var(--ax-bg-input);
     box-shadow: inset 0 0 0 1px var(--ax-border-neutral);
     grid-auto-columns: 1fr;
@@ -5003,7 +4734,7 @@
     cursor: pointer;
     min-height: 3rem;
     color: var(--ax-text-neutral);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     background-color: rgba(0, 0, 0, 0);
     border: none;
     justify-content: center;
@@ -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;
@@ -5096,7 +4818,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 rgba(0, 0, 0, 0);
   }
 
@@ -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;
@@ -5135,7 +4857,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);
   }
 
   .aksel-read-more:is([data-volume="low"], :not([data-volume])) .aksel-read-more__button:hover {
@@ -5143,13 +4865,13 @@
   }
 
   .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);
   }
 
   .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 {
@@ -5199,7 +4921,7 @@
 
   .aksel-progress-bar {
     background: var(--ax-bg-neutral-moderateA);
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
     position: relative;
     overflow: hidden;
@@ -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%;
@@ -5331,7 +5053,7 @@
 
   .aksel-skeleton--text {
     transform-origin: 0 55%;
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     height: auto;
     transform: scale(1, .6);
   }
@@ -5341,7 +5063,7 @@
   }
 
   .aksel-skeleton--circle {
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
   }
 
   .aksel-skeleton--rectangle {
@@ -5349,7 +5071,7 @@
   }
 
   .aksel-skeleton--rounded {
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
   }
 
   @keyframes akselSkeletonAnimation {
@@ -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);
@@ -5452,7 +5174,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);
     grid-column: circle;
     place-items: center;
     line-height: 1;
@@ -5465,8 +5187,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;
   }
 
@@ -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 {
@@ -5771,7 +5493,7 @@
 
   .aksel-table__toggle-expand-button {
     cursor: pointer;
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4);
     background: none;
     border: none;
     place-content: center;
@@ -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 {
@@ -6867,15 +6575,15 @@
     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);
-    border-radius: var(--__axc-box-border-radius);
+  .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-radius);
   }
 
   .aksel-box-shadow {
@@ -6884,32 +6592,32 @@
   }
 
   @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);
     }
   }