@navikt/ds-css 7.21.1 → 7.22.0

package/dist/darkside/version/{7.21.1 → 7.22.0}/index.css

@@ -479,47 +479,47 @@
     --ax-border-neutral-subtle: var(--ax-neutral-400);
     --ax-border-neutral: var(--ax-neutral-600);
     --ax-text-meta-lime-contrast: var(--ax-neutral-000);
-    --ax-text-meta-lime-icon: var(--ax-meta-lime-600);
+    --ax-text-meta-lime-decoration: var(--ax-meta-lime-600);
     --ax-text-meta-lime-subtle: var(--ax-meta-lime-800);
     --ax-text-meta-lime: var(--ax-meta-lime-1000);
     --ax-text-meta-purple-contrast: var(--ax-neutral-000);
-    --ax-text-meta-purple-icon: var(--ax-meta-purple-600);
+    --ax-text-meta-purple-decoration: var(--ax-meta-purple-600);
     --ax-text-meta-purple-subtle: var(--ax-meta-purple-800);
     --ax-text-meta-purple: var(--ax-meta-purple-1000);
     --ax-text-brand-blue-contrast: var(--ax-neutral-000);
-    --ax-text-brand-blue-icon: var(--ax-brand-blue-600);
+    --ax-text-brand-blue-decoration: var(--ax-brand-blue-600);
     --ax-text-brand-blue-subtle: var(--ax-brand-blue-800);
     --ax-text-brand-blue: var(--ax-brand-blue-1000);
     --ax-text-brand-beige-contrast: var(--ax-neutral-000);
-    --ax-text-brand-beige-icon: var(--ax-brand-beige-600);
+    --ax-text-brand-beige-decoration: var(--ax-brand-beige-600);
     --ax-text-brand-beige-subtle: var(--ax-brand-beige-800);
     --ax-text-brand-beige: var(--ax-brand-beige-1000);
     --ax-text-brand-magenta-contrast: var(--ax-neutral-000);
-    --ax-text-brand-magenta-icon: var(--ax-brand-magenta-600);
+    --ax-text-brand-magenta-decoration: var(--ax-brand-magenta-600);
     --ax-text-brand-magenta-subtle: var(--ax-brand-magenta-800);
     --ax-text-brand-magenta: var(--ax-brand-magenta-1000);
     --ax-text-info-contrast: var(--ax-neutral-000);
-    --ax-text-info-icon: var(--ax-info-600);
+    --ax-text-info-decoration: var(--ax-info-600);
     --ax-text-info-subtle: var(--ax-info-800);
     --ax-text-info: var(--ax-info-1000);
     --ax-text-danger-contrast: var(--ax-neutral-000);
-    --ax-text-danger-icon: var(--ax-danger-600);
+    --ax-text-danger-decoration: var(--ax-danger-600);
     --ax-text-danger-subtle: var(--ax-danger-800);
     --ax-text-danger: var(--ax-danger-1000);
     --ax-text-warning-contrast: var(--ax-neutral-000);
-    --ax-text-warning-icon: var(--ax-warning-600);
+    --ax-text-warning-decoration: var(--ax-warning-600);
     --ax-text-warning-subtle: var(--ax-warning-800);
     --ax-text-warning: var(--ax-warning-1000);
     --ax-text-success-contrast: var(--ax-neutral-000);
-    --ax-text-success-icon: var(--ax-success-600);
+    --ax-text-success-decoration: var(--ax-success-600);
     --ax-text-success-subtle: var(--ax-success-800);
     --ax-text-success: var(--ax-success-1000);
     --ax-text-accent-contrast: var(--ax-neutral-000);
-    --ax-text-accent-icon: var(--ax-accent-600);
+    --ax-text-accent-decoration: var(--ax-accent-600);
     --ax-text-accent-subtle: var(--ax-accent-800);
     --ax-text-accent: var(--ax-accent-1000);
     --ax-text-neutral-contrast: var(--ax-neutral-000);
-    --ax-text-neutral-icon: var(--ax-neutral-600);
+    --ax-text-neutral-decoration: var(--ax-neutral-600);
     --ax-text-neutral-subtle: var(--ax-neutral-900);
     --ax-text-neutral: var(--ax-neutral-1000);
     --ax-bg-meta-lime-strong-pressed: var(--ax-meta-lime-800);
@@ -646,7 +646,7 @@
   }
 
   :root, :host {
-    --ax-version: "7.21.1";
+    --ax-version: "7.22.0";
     --ax-font-weight-regular: 400;
     --ax-font-weight-bold: 600;
     --ax-font-size-small: .875rem;
@@ -680,11 +680,16 @@
     --ax-breakpoint-sm-down: 479px;
     --ax-breakpoint-sm: 480px;
     --ax-breakpoint-xs: 0;
-    --ax-border-radius-full: 9999px;
     --ax-border-radius-xlarge: 12px;
     --ax-border-radius-large: 8px;
     --ax-border-radius-medium: 4px;
     --ax-border-radius-small: 2px;
+    --ax-border-radius-full: 9999px;
+    --ax-radius-full: 9999px;
+    --ax-radius-12: 12px;
+    --ax-radius-8: 8px;
+    --ax-radius-4: 4px;
+    --ax-radius-2: 2px;
     --ax-space-128: 8rem;
     --ax-space-96: 6rem;
     --ax-space-80: 5rem;
@@ -715,7 +720,7 @@
     --ax-border-subtle: var(--ax-border-neutral-subtle);
     --ax-border-default: var(--ax-border-neutral);
     --ax-text-contrast: var(--ax-text-neutral-contrast);
-    --ax-text-icon: var(--ax-text-neutral-icon);
+    --ax-text-decoration: var(--ax-text-neutral-decoration);
     --ax-text-subtle: var(--ax-text-neutral-subtle);
     --ax-text-default: var(--ax-text-neutral);
     --ax-bg-strong-pressed: var(--ax-bg-neutral-strong-pressed);
@@ -737,7 +742,7 @@
     --ax-border-subtle: var(--ax-border-accent-subtle);
     --ax-border-default: var(--ax-border-accent);
     --ax-text-contrast: var(--ax-text-accent-contrast);
-    --ax-text-icon: var(--ax-text-accent-icon);
+    --ax-text-decoration: var(--ax-text-accent-decoration);
     --ax-text-subtle: var(--ax-text-accent-subtle);
     --ax-text-default: var(--ax-text-accent);
     --ax-bg-strong-pressed: var(--ax-bg-accent-strong-pressed);
@@ -759,7 +764,7 @@
     --ax-border-subtle: var(--ax-border-success-subtle);
     --ax-border-default: var(--ax-border-success);
     --ax-text-contrast: var(--ax-text-success-contrast);
-    --ax-text-icon: var(--ax-text-success-icon);
+    --ax-text-decoration: var(--ax-text-success-decoration);
     --ax-text-subtle: var(--ax-text-success-subtle);
     --ax-text-default: var(--ax-text-success);
     --ax-bg-strong-pressed: var(--ax-bg-success-strong-pressed);
@@ -781,7 +786,7 @@
     --ax-border-subtle: var(--ax-border-warning-subtle);
     --ax-border-default: var(--ax-border-warning);
     --ax-text-contrast: var(--ax-text-warning-contrast);
-    --ax-text-icon: var(--ax-text-warning-icon);
+    --ax-text-decoration: var(--ax-text-warning-decoration);
     --ax-text-subtle: var(--ax-text-warning-subtle);
     --ax-text-default: var(--ax-text-warning);
     --ax-bg-strong-pressed: var(--ax-bg-warning-strong-pressed);
@@ -803,7 +808,7 @@
     --ax-border-subtle: var(--ax-border-danger-subtle);
     --ax-border-default: var(--ax-border-danger);
     --ax-text-contrast: var(--ax-text-danger-contrast);
-    --ax-text-icon: var(--ax-text-danger-icon);
+    --ax-text-decoration: var(--ax-text-danger-decoration);
     --ax-text-subtle: var(--ax-text-danger-subtle);
     --ax-text-default: var(--ax-text-danger);
     --ax-bg-strong-pressed: var(--ax-bg-danger-strong-pressed);
@@ -825,7 +830,7 @@
     --ax-border-subtle: var(--ax-border-info-subtle);
     --ax-border-default: var(--ax-border-info);
     --ax-text-contrast: var(--ax-text-info-contrast);
-    --ax-text-icon: var(--ax-text-info-icon);
+    --ax-text-decoration: var(--ax-text-info-decoration);
     --ax-text-subtle: var(--ax-text-info-subtle);
     --ax-text-default: var(--ax-text-info);
     --ax-bg-strong-pressed: var(--ax-bg-info-strong-pressed);
@@ -847,7 +852,7 @@
     --ax-border-subtle: var(--ax-border-brand-magenta-subtle);
     --ax-border-default: var(--ax-border-brand-magenta);
     --ax-text-contrast: var(--ax-text-brand-magenta-contrast);
-    --ax-text-icon: var(--ax-text-brand-magenta-icon);
+    --ax-text-decoration: var(--ax-text-brand-magenta-decoration);
     --ax-text-subtle: var(--ax-text-brand-magenta-subtle);
     --ax-text-default: var(--ax-text-brand-magenta);
     --ax-bg-strong-pressed: var(--ax-bg-brand-magenta-strong-pressed);
@@ -869,7 +874,7 @@
     --ax-border-subtle: var(--ax-border-brand-beige-subtle);
     --ax-border-default: var(--ax-border-brand-beige);
     --ax-text-contrast: var(--ax-text-brand-beige-contrast);
-    --ax-text-icon: var(--ax-text-brand-beige-icon);
+    --ax-text-decoration: var(--ax-text-brand-beige-decoration);
     --ax-text-subtle: var(--ax-text-brand-beige-subtle);
     --ax-text-default: var(--ax-text-brand-beige);
     --ax-bg-strong-pressed: var(--ax-bg-brand-beige-strong-pressed);
@@ -891,7 +896,7 @@
     --ax-border-subtle: var(--ax-border-brand-blue-subtle);
     --ax-border-default: var(--ax-border-brand-blue);
     --ax-text-contrast: var(--ax-text-brand-blue-contrast);
-    --ax-text-icon: var(--ax-text-brand-blue-icon);
+    --ax-text-decoration: var(--ax-text-brand-blue-decoration);
     --ax-text-subtle: var(--ax-text-brand-blue-subtle);
     --ax-text-default: var(--ax-text-brand-blue);
     --ax-bg-strong-pressed: var(--ax-bg-brand-blue-strong-pressed);
@@ -913,7 +918,7 @@
     --ax-border-subtle: var(--ax-border-meta-purple-subtle);
     --ax-border-default: var(--ax-border-meta-purple);
     --ax-text-contrast: var(--ax-text-meta-purple-contrast);
-    --ax-text-icon: var(--ax-text-meta-purple-icon);
+    --ax-text-decoration: var(--ax-text-meta-purple-decoration);
     --ax-text-subtle: var(--ax-text-meta-purple-subtle);
     --ax-text-default: var(--ax-text-meta-purple);
     --ax-bg-strong-pressed: var(--ax-bg-meta-purple-strong-pressed);
@@ -935,7 +940,7 @@
     --ax-border-subtle: var(--ax-border-meta-lime-subtle);
     --ax-border-default: var(--ax-border-meta-lime);
     --ax-text-contrast: var(--ax-text-meta-lime-contrast);
-    --ax-text-icon: var(--ax-text-meta-lime-icon);
+    --ax-text-decoration: var(--ax-text-meta-lime-decoration);
     --ax-text-subtle: var(--ax-text-meta-lime-subtle);
     --ax-text-default: var(--ax-text-meta-lime);
     --ax-bg-strong-pressed: var(--ax-bg-meta-lime-strong-pressed);
@@ -1442,7 +1447,7 @@
     --__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;
@@ -1730,7 +1735,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;
@@ -1844,7 +1849,7 @@
   }
 
   .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;
@@ -1940,7 +1945,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);
@@ -1982,7 +1987,7 @@
     border: 1px dashed var(--ax-border-accent-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;
@@ -2029,7 +2034,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;
@@ -2074,7 +2079,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;
@@ -2089,7 +2094,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);
@@ -2174,7 +2179,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;
   }
 
@@ -2222,7 +2227,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;
@@ -2243,8 +2248,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;
@@ -2287,7 +2292,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;
@@ -2296,7 +2301,7 @@
   }
 
   .aksel-radio__label:before {
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
   }
 
   .aksel-checkbox__content, .aksel-radio__content {
@@ -2325,7 +2330,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;
@@ -2529,7 +2534,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;
@@ -2684,7 +2689,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;
@@ -2709,7 +2714,7 @@
     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;
@@ -2749,7 +2754,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;
@@ -2888,7 +2893,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;
@@ -2963,7 +2968,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%;
@@ -3077,7 +3082,7 @@
   }
 
   .aksel-search__wrapper {
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     align-items: center;
     display: inline-flex;
   }
@@ -3144,8 +3149,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;
   }
 
@@ -3191,7 +3196,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;
@@ -3254,7 +3259,7 @@
 
   .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) {
@@ -3306,7 +3311,7 @@
   }
 
   .aksel-combobox__selected-options > li {
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     margin: auto 0;
   }
 
@@ -3403,7 +3408,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;
@@ -3425,7 +3430,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;
@@ -3523,13 +3528,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) {
@@ -3614,7 +3619,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;
   }
@@ -3688,7 +3693,7 @@
     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-radius: var(--ax-radius-8);
     border: 1px solid var(--ax-border-info-subtleA);
   }
 
@@ -3715,7 +3720,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;
@@ -3753,7 +3758,7 @@
     padding: var(--ax-space-12);
     text-align: left;
     cursor: pointer;
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     color: var(--ax-text-accent-subtle);
     background: none;
     border: none;
@@ -3830,7 +3835,7 @@
   }
 
   .aksel-accordion__icon-wrapper {
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     background-color: var(--ax-bg-accent-moderateA);
     width: 22px;
     height: 22px;
@@ -3905,7 +3910,7 @@
   }
 
   .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;
@@ -3948,7 +3953,7 @@
   }
 
   .aksel-alert--info > .aksel-alert__icon {
-    color: var(--ax-text-info-icon);
+    color: var(--ax-text-info-decoration);
   }
 
   .aksel-alert--success {
@@ -3957,7 +3962,7 @@
   }
 
   .aksel-alert--success > .aksel-alert__icon {
-    color: var(--ax-text-success-icon);
+    color: var(--ax-text-success-decoration);
   }
 
   .aksel-alert--warning {
@@ -3966,7 +3971,7 @@
   }
 
   .aksel-alert--warning > .aksel-alert__icon {
-    color: var(--ax-text-warning-icon);
+    color: var(--ax-text-warning-decoration);
   }
 
   .aksel-alert--error {
@@ -3975,7 +3980,7 @@
   }
 
   .aksel-alert--error > .aksel-alert__icon {
-    color: var(--ax-text-danger-icon);
+    color: var(--ax-text-danger-decoration);
   }
 
   .aksel-alert--full-width {
@@ -4024,13 +4029,13 @@
   }
 
   .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-radius: var(--ax-radius-full);
     border: 1px solid var(--ax-border-neutral-subtleA);
     color: var(--ax-text-neutral);
     letter-spacing: .024rem;
@@ -4065,8 +4070,8 @@
     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-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;
@@ -4164,22 +4169,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 {
@@ -4213,7 +4218,7 @@
 
   .aksel-date .rdp-day_today:before {
     background-color: var(--ax-text-accent-subtle);
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     content: "";
     width: 6px;
     height: 6px;
@@ -4259,7 +4264,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;
@@ -4296,7 +4301,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;
@@ -4426,7 +4431,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;
@@ -4467,7 +4472,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;
@@ -4503,7 +4508,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);
@@ -4520,7 +4525,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);
@@ -4599,7 +4604,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;
@@ -4615,7 +4620,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;
@@ -4648,10 +4653,10 @@
   }
 
   .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);
+    border-radius: var(--ax-radius-12);
     background-color: var(--ax-bg-raised);
     border: 1px solid var(--ax-border-neutral);
     height: fit-content;
@@ -4729,7 +4734,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;
@@ -4841,7 +4846,7 @@
   .aksel-guide {
     box-sizing: border-box;
     border: 2px solid var(--ax-border-info);
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     width: var(--__axc-guide-panel-guide-size);
     height: var(--__axc-guide-panel-guide-size);
     flex-shrink: 0;
@@ -4856,7 +4861,7 @@
   .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-radius: var(--ax-radius-12);
     position: relative;
   }
 
@@ -4877,7 +4882,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;
@@ -4924,7 +4929,7 @@
 
   .aksel-help-text__button {
     cursor: pointer;
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     color: var(--ax-bg-info-strong);
     padding: calc(var(--ax-space-4) / 2);
     background-color: rgba(0, 0, 0, 0);
@@ -4937,13 +4942,13 @@
   }
 
   .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);
     max-width: min(65ch, calc(100vw - var(--ax-space-24)));
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     border: 1px solid var(--ax-border-info);
   }
 
@@ -5296,7 +5301,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%;
@@ -5522,7 +5527,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));
   }
 
@@ -5548,7 +5553,7 @@
     --__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;
@@ -5743,7 +5748,7 @@
   }
 
   .aksel-timeline__period {
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     z-index: 2;
     border: none;
     align-items: center;
@@ -5775,7 +5780,7 @@
   .aksel-timeline__period--success {
     background: var(--ax-bg-success-moderate);
     border: solid 1px var(--ax-border-success);
-    color: var(--ax-text-success-icon);
+    color: var(--ax-text-success-decoration);
   }
 
   .aksel-timeline__period--success.aksel-timeline__period--clickable:hover {
@@ -5792,7 +5797,7 @@
   .aksel-timeline__period--warning {
     background: var(--ax-bg-warning-moderate);
     border: solid 1px var(--ax-border-warning);
-    color: var(--ax-text-warning-icon);
+    color: var(--ax-text-warning-decoration);
   }
 
   .aksel-timeline__period--warning.aksel-timeline__period--clickable:hover {
@@ -5809,7 +5814,7 @@
   .aksel-timeline__period--danger {
     background: var(--ax-bg-danger-moderate);
     border: solid 1px var(--ax-border-danger);
-    color: var(--ax-text-danger-icon);
+    color: var(--ax-text-danger-decoration);
   }
 
   .aksel-timeline__period--danger.aksel-timeline__period--clickable:hover {
@@ -5826,7 +5831,7 @@
   .aksel-timeline__period--info {
     background: var(--ax-bg-info-moderate);
     border: solid 1px var(--ax-border-info);
-    color: var(--ax-text-info-icon);
+    color: var(--ax-text-info-decoration);
   }
 
   .aksel-timeline__period--info.aksel-timeline__period--clickable:hover {
@@ -5843,7 +5848,7 @@
   .aksel-timeline__period--neutral {
     background: var(--ax-bg-neutral-moderate);
     border: solid 1px var(--ax-border-neutral);
-    color: var(--ax-text-neutral-icon);
+    color: var(--ax-text-neutral-decoration);
   }
 
   .aksel-timeline__period--neutral.aksel-timeline__period--clickable:hover {
@@ -5887,7 +5892,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;
@@ -5895,7 +5900,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;
@@ -5938,16 +5943,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 {
@@ -5980,7 +5985,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);
   }
 
@@ -6018,7 +6023,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);
@@ -6126,7 +6131,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;
@@ -6152,7 +6157,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;
@@ -6166,7 +6171,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;
@@ -6259,7 +6264,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);
   }
 
@@ -6298,7 +6303,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 {
@@ -6307,7 +6312,7 @@
 
   .aksel-read-more[data-volume="high"] .aksel-read-more__button {
     background-color: var(--ax-bg-accent-moderate);
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
   }
 
   .aksel-read-more[data-volume="high"] .aksel-read-more__button:hover {
@@ -6362,7 +6367,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;
@@ -6494,7 +6499,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);
   }
@@ -6504,7 +6509,7 @@
   }
 
   .aksel-skeleton--circle {
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
   }
 
   .aksel-skeleton--rectangle {
@@ -6512,7 +6517,7 @@
   }
 
   .aksel-skeleton--rounded {
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
   }
 
   @keyframes akselSkeletonAnimation {
@@ -6615,7 +6620,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;
@@ -6629,7 +6634,7 @@
 
   .aksel-stepper__step[data-interactive="true"] {
     color: var(--ax-text-accent-subtle);
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4);
     text-decoration: none;
   }
 
@@ -6934,7 +6939,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;
@@ -8030,15 +8035,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 {
@@ -8047,32 +8052,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);
     }
   }