@navikt/ds-css 7.21.1 → 7.22.0

package/dist/darkside/components.css

@@ -279,7 +279,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;
@@ -567,7 +567,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;
@@ -681,7 +681,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;
@@ -777,7 +777,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);
@@ -819,7 +819,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;
@@ -866,7 +866,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;
@@ -911,7 +911,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 +926,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 +1011,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 +1059,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 +1080,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 +1124,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 +1133,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 +1162,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;
@@ -1366,7 +1366,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;
@@ -1521,7 +1521,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;
@@ -1546,7 +1546,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;
@@ -1586,7 +1586,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;
@@ -1725,7 +1725,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;
@@ -1800,7 +1800,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%;
@@ -1914,7 +1914,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 +1981,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;
   }
 
@@ -2028,7 +2028,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;
@@ -2091,7 +2091,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) {
@@ -2143,7 +2143,7 @@
   }
 
   .aksel-combobox__selected-options > li {
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     margin: auto 0;
   }
 
@@ -2240,7 +2240,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 +2262,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;
@@ -2360,13 +2360,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 +2451,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;
   }
@@ -2525,7 +2525,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);
   }
 
@@ -2552,7 +2552,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,7 +2590,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;
@@ -2667,7 +2667,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;
@@ -2742,7 +2742,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;
@@ -2785,7 +2785,7 @@
   }
 
   .aksel-alert--info > .aksel-alert__icon {
-    color: var(--ax-text-info-icon);
+    color: var(--ax-text-info-decoration);
   }
 
   .aksel-alert--success {
@@ -2794,7 +2794,7 @@
   }
 
   .aksel-alert--success > .aksel-alert__icon {
-    color: var(--ax-text-success-icon);
+    color: var(--ax-text-success-decoration);
   }
 
   .aksel-alert--warning {
@@ -2803,7 +2803,7 @@
   }
 
   .aksel-alert--warning > .aksel-alert__icon {
-    color: var(--ax-text-warning-icon);
+    color: var(--ax-text-warning-decoration);
   }
 
   .aksel-alert--error {
@@ -2812,7 +2812,7 @@
   }
 
   .aksel-alert--error > .aksel-alert__icon {
-    color: var(--ax-text-danger-icon);
+    color: var(--ax-text-danger-decoration);
   }
 
   .aksel-alert--full-width {
@@ -2861,13 +2861,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;
@@ -2902,8 +2902,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;
@@ -3001,22 +3001,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 {
@@ -3050,7 +3050,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;
@@ -3096,7 +3096,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;
@@ -3133,7 +3133,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 +3263,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;
@@ -3304,7 +3304,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 +3340,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 +3357,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);
@@ -3436,7 +3436,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 +3452,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,10 +3485,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;
@@ -3566,7 +3566,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;
@@ -3678,7 +3678,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;
@@ -3693,7 +3693,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;
   }
 
@@ -3714,7 +3714,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,7 +3761,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);
@@ -3774,13 +3774,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);
   }
 
@@ -4133,7 +4133,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%;
@@ -4359,7 +4359,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));
   }
 
@@ -4385,7 +4385,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;
@@ -4580,7 +4580,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;
@@ -4612,7 +4612,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 {
@@ -4629,7 +4629,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 {
@@ -4646,7 +4646,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 {
@@ -4663,7 +4663,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 {
@@ -4680,7 +4680,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 {
@@ -4724,7 +4724,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 +4732,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 +4775,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 +4817,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 +4855,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 +4963,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 +4989,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 +5003,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;
@@ -5096,7 +5096,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);
   }
 
@@ -5135,7 +5135,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 {
@@ -5144,7 +5144,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 {
@@ -5199,7 +5199,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;
@@ -5331,7 +5331,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 +5341,7 @@
   }
 
   .aksel-skeleton--circle {
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
   }
 
   .aksel-skeleton--rectangle {
@@ -5349,7 +5349,7 @@
   }
 
   .aksel-skeleton--rounded {
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
   }
 
   @keyframes akselSkeletonAnimation {
@@ -5452,7 +5452,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;
@@ -5466,7 +5466,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;
   }
 
@@ -5771,7 +5771,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;
@@ -6867,15 +6867,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 +6884,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);
     }
   }