@navikt/ds-css 7.12.1 → 7.13.0

package/dist/darkside/index.css

@@ -93,7 +93,7 @@
 }
 
 @layer aksel.theming {
-  :root, :host, .light, .light-theme {
+  :root, :host, .light {
     --ax-meta-lime-400A: #d0dc00;
     --ax-meta-lime-300A: rgba(202, 223, 0, .58);
     --ax-meta-lime-200A: rgba(196, 223, 0, .337);
@@ -249,227 +249,9 @@
     --ax-neutral-300: #e1e3e7;
     --ax-neutral-200: #ecedef;
     --ax-neutral-100: #f5f6f7;
-    --ax-text-logo: #c30000;
-    --ax-bg-overlay: rgba(2, 20, 49, .49);
-    --ax-bg-input: rgba(255, 255, 255, .85);
-    --ax-bg-default: #fff;
-    --ax-opacity-disabled: .3;
-    --ax-shadow-dialog: 0px 4px 6px 0px rgba(0, 0, 0, .15), 0px 1px 3px -1px rgba(0, 0, 0, .15), 0px 1px 1px 0px rgba(0, 0, 0, .06);
-    --ax-border-focus: var(--ax-neutral-1000);
-    --ax-border-meta-lime-strong: var(--ax-meta-lime-700);
-    --ax-border-meta-lime-subtleA: var(--ax-meta-lime-400A);
-    --ax-border-meta-lime-subtle: var(--ax-meta-lime-400);
-    --ax-border-meta-lime: var(--ax-meta-lime-600);
-    --ax-border-meta-purple-strong: var(--ax-meta-purple-700);
-    --ax-border-meta-purple-subtleA: var(--ax-meta-purple-400A);
-    --ax-border-meta-purple-subtle: var(--ax-meta-purple-400);
-    --ax-border-meta-purple: var(--ax-meta-purple-600);
-    --ax-border-brand-blue-strong: var(--ax-brand-blue-700);
-    --ax-border-brand-blue-subtleA: var(--ax-brand-blue-400A);
-    --ax-border-brand-blue-subtle: var(--ax-brand-blue-400);
-    --ax-border-brand-blue: var(--ax-brand-blue-600);
-    --ax-border-brand-beige-strong: var(--ax-brand-beige-700);
-    --ax-border-brand-beige-subtleA: var(--ax-brand-beige-400A);
-    --ax-border-brand-beige-subtle: var(--ax-brand-beige-400);
-    --ax-border-brand-beige: var(--ax-brand-beige-600);
-    --ax-border-brand-magenta-strong: var(--ax-brand-magenta-700);
-    --ax-border-brand-magenta-subtleA: var(--ax-brand-magenta-400A);
-    --ax-border-brand-magenta-subtle: var(--ax-brand-magenta-400);
-    --ax-border-brand-magenta: var(--ax-brand-magenta-600);
-    --ax-border-info-strong: var(--ax-info-700);
-    --ax-border-info-subtleA: var(--ax-info-400A);
-    --ax-border-info-subtle: var(--ax-info-400);
-    --ax-border-info: var(--ax-info-600);
-    --ax-border-danger-strong: var(--ax-danger-700);
-    --ax-border-danger-subtleA: var(--ax-danger-400A);
-    --ax-border-danger-subtle: var(--ax-danger-400);
-    --ax-border-danger: var(--ax-danger-600);
-    --ax-border-warning-strong: var(--ax-warning-700);
-    --ax-border-warning-subtleA: var(--ax-warning-400A);
-    --ax-border-warning-subtle: var(--ax-warning-400);
-    --ax-border-warning: var(--ax-warning-600);
-    --ax-border-success-strong: var(--ax-success-700);
-    --ax-border-success-subtleA: var(--ax-success-400A);
-    --ax-border-success-subtle: var(--ax-success-400);
-    --ax-border-success: var(--ax-success-600);
-    --ax-border-accent-strong: var(--ax-accent-700);
-    --ax-border-accent-subtleA: var(--ax-accent-400A);
-    --ax-border-accent-subtle: var(--ax-accent-400);
-    --ax-border-accent: var(--ax-accent-600);
-    --ax-border-neutral-strong: var(--ax-neutral-700);
-    --ax-border-neutral-subtleA: var(--ax-neutral-400A);
-    --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-purple-contrast: var(--ax-neutral-000);
-    --ax-text-brand-blue-contrast: var(--ax-neutral-000);
-    --ax-text-brand-beige-contrast: var(--ax-neutral-000);
-    --ax-text-brand-magenta-contrast: var(--ax-neutral-000);
-    --ax-text-warning-contrast: var(--ax-neutral-000);
-    --ax-text-success-contrast: var(--ax-neutral-000);
-    --ax-text-info-contrast: var(--ax-neutral-000);
-    --ax-text-danger-contrast: var(--ax-neutral-000);
-    --ax-text-accent-contrast: var(--ax-neutral-000);
-    --ax-text-neutral-contrast: var(--ax-neutral-000);
-    --ax-text-meta-lime-icon: 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-icon: 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-icon: 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-icon: 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-icon: 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-icon: var(--ax-info-600);
-    --ax-text-info-subtle: var(--ax-info-800);
-    --ax-text-info: var(--ax-info-1000);
-    --ax-text-danger-icon: var(--ax-danger-600);
-    --ax-text-danger-subtle: var(--ax-danger-800);
-    --ax-text-danger: var(--ax-danger-1000);
-    --ax-text-warning-icon: var(--ax-warning-600);
-    --ax-text-warning-subtle: var(--ax-warning-800);
-    --ax-text-warning: var(--ax-warning-1000);
-    --ax-text-success-icon: var(--ax-success-600);
-    --ax-text-success-subtle: var(--ax-success-800);
-    --ax-text-success: var(--ax-success-1000);
-    --ax-text-accent-icon: var(--ax-accent-600);
-    --ax-text-accent-subtle: var(--ax-accent-800);
-    --ax-text-accent: var(--ax-accent-1000);
-    --ax-text-neutral-icon: var(--ax-neutral-600);
-    --ax-text-neutral-subtle: var(--ax-neutral-900);
-    --ax-text-neutral: var(--ax-neutral-1000);
-    --ax-bg-sunken: var(--ax-neutral-200);
-    --ax-bg-raised: var(--ax-neutral-000);
-    --ax-bg-meta-lime-strong-pressed: var(--ax-meta-lime-800);
-    --ax-bg-meta-lime-strong-hover: var(--ax-meta-lime-700);
-    --ax-bg-meta-lime-strong: var(--ax-meta-lime-600);
-    --ax-bg-meta-lime-moderate-pressedA: var(--ax-meta-lime-400A);
-    --ax-bg-meta-lime-moderate-pressed: var(--ax-meta-lime-400);
-    --ax-bg-meta-lime-moderate-hoverA: var(--ax-meta-lime-300A);
-    --ax-bg-meta-lime-moderate-hover: var(--ax-meta-lime-300);
-    --ax-bg-meta-lime-moderateA: var(--ax-meta-lime-200A);
-    --ax-bg-meta-lime-moderate: var(--ax-meta-lime-200);
-    --ax-bg-meta-lime-softA: var(--ax-meta-lime-100A);
-    --ax-bg-meta-lime-soft: var(--ax-meta-lime-100);
-    --ax-bg-meta-purple-strong-pressed: var(--ax-meta-purple-800);
-    --ax-bg-meta-purple-strong-hover: var(--ax-meta-purple-700);
-    --ax-bg-meta-purple-strong: var(--ax-meta-purple-600);
-    --ax-bg-meta-purple-moderate-pressedA: var(--ax-meta-purple-400A);
-    --ax-bg-meta-purple-moderate-pressed: var(--ax-meta-purple-400);
-    --ax-bg-meta-purple-moderate-hoverA: var(--ax-meta-purple-300A);
-    --ax-bg-meta-purple-moderate-hover: var(--ax-meta-purple-300);
-    --ax-bg-meta-purple-moderateA: var(--ax-meta-purple-200A);
-    --ax-bg-meta-purple-moderate: var(--ax-meta-purple-200);
-    --ax-bg-meta-purple-softA: var(--ax-meta-purple-100A);
-    --ax-bg-meta-purple-soft: var(--ax-meta-purple-100);
-    --ax-bg-brand-blue-strong-pressed: var(--ax-brand-blue-800);
-    --ax-bg-brand-blue-strong-hover: var(--ax-brand-blue-700);
-    --ax-bg-brand-blue-strong: var(--ax-brand-blue-600);
-    --ax-bg-brand-blue-moderate-pressedA: var(--ax-brand-blue-400A);
-    --ax-bg-brand-blue-moderate-pressed: var(--ax-brand-blue-400);
-    --ax-bg-brand-blue-moderate-hoverA: var(--ax-brand-blue-300A);
-    --ax-bg-brand-blue-moderate-hover: var(--ax-brand-blue-300);
-    --ax-bg-brand-blue-moderateA: var(--ax-brand-blue-200A);
-    --ax-bg-brand-blue-moderate: var(--ax-brand-blue-200);
-    --ax-bg-brand-blue-softA: var(--ax-brand-blue-100A);
-    --ax-bg-brand-blue-soft: var(--ax-brand-blue-100);
-    --ax-bg-brand-beige-strong-pressed: var(--ax-brand-beige-800);
-    --ax-bg-brand-beige-strong-hover: var(--ax-brand-beige-700);
-    --ax-bg-brand-beige-strong: var(--ax-brand-beige-600);
-    --ax-bg-brand-beige-moderate-pressedA: var(--ax-brand-beige-400A);
-    --ax-bg-brand-beige-moderate-pressed: var(--ax-brand-beige-400);
-    --ax-bg-brand-beige-moderate-hoverA: var(--ax-brand-beige-300A);
-    --ax-bg-brand-beige-moderate-hover: var(--ax-brand-beige-300);
-    --ax-bg-brand-beige-moderateA: var(--ax-brand-beige-200A);
-    --ax-bg-brand-beige-moderate: var(--ax-brand-beige-200);
-    --ax-bg-brand-beige-softA: var(--ax-brand-beige-100A);
-    --ax-bg-brand-beige-soft: var(--ax-brand-beige-100);
-    --ax-bg-brand-magenta-strong-pressed: var(--ax-brand-magenta-800);
-    --ax-bg-brand-magenta-strong-hover: var(--ax-brand-magenta-700);
-    --ax-bg-brand-magenta-strong: var(--ax-brand-magenta-600);
-    --ax-bg-brand-magenta-moderate-pressedA: var(--ax-brand-magenta-400A);
-    --ax-bg-brand-magenta-moderate-pressed: var(--ax-brand-magenta-400);
-    --ax-bg-brand-magenta-moderate-hoverA: var(--ax-brand-magenta-300A);
-    --ax-bg-brand-magenta-moderate-hover: var(--ax-brand-magenta-300);
-    --ax-bg-brand-magenta-moderateA: var(--ax-brand-magenta-200A);
-    --ax-bg-brand-magenta-moderate: var(--ax-brand-magenta-200);
-    --ax-bg-brand-magenta-softA: var(--ax-brand-magenta-100A);
-    --ax-bg-brand-magenta-soft: var(--ax-brand-magenta-100);
-    --ax-bg-info-strong-pressed: var(--ax-info-800);
-    --ax-bg-info-strong-hover: var(--ax-info-700);
-    --ax-bg-info-strong: var(--ax-info-600);
-    --ax-bg-info-moderate-pressedA: var(--ax-info-400A);
-    --ax-bg-info-moderate-pressed: var(--ax-info-400);
-    --ax-bg-info-moderate-hoverA: var(--ax-info-300A);
-    --ax-bg-info-moderate-hover: var(--ax-info-300);
-    --ax-bg-info-moderateA: var(--ax-info-200A);
-    --ax-bg-info-moderate: var(--ax-info-200);
-    --ax-bg-info-softA: var(--ax-info-100A);
-    --ax-bg-info-soft: var(--ax-info-100);
-    --ax-bg-danger-strong-pressed: var(--ax-danger-800);
-    --ax-bg-danger-strong-hover: var(--ax-danger-700);
-    --ax-bg-danger-strong: var(--ax-danger-600);
-    --ax-bg-danger-moderate-pressedA: var(--ax-danger-400A);
-    --ax-bg-danger-moderate-pressed: var(--ax-danger-400);
-    --ax-bg-danger-moderate-hoverA: var(--ax-danger-300A);
-    --ax-bg-danger-moderate-hover: var(--ax-danger-300);
-    --ax-bg-danger-moderateA: var(--ax-danger-200A);
-    --ax-bg-danger-moderate: var(--ax-danger-200);
-    --ax-bg-danger-softA: var(--ax-danger-100A);
-    --ax-bg-danger-soft: var(--ax-danger-100);
-    --ax-bg-warning-strong-pressed: var(--ax-warning-800);
-    --ax-bg-warning-strong-hover: var(--ax-warning-700);
-    --ax-bg-warning-strong: var(--ax-warning-600);
-    --ax-bg-warning-moderate-pressedA: var(--ax-warning-400A);
-    --ax-bg-warning-moderate-pressed: var(--ax-warning-400);
-    --ax-bg-warning-moderate-hoverA: var(--ax-warning-300A);
-    --ax-bg-warning-moderate-hover: var(--ax-warning-300);
-    --ax-bg-warning-moderateA: var(--ax-warning-200A);
-    --ax-bg-warning-moderate: var(--ax-warning-200);
-    --ax-bg-warning-softA: var(--ax-warning-100A);
-    --ax-bg-warning-soft: var(--ax-warning-100);
-    --ax-bg-success-strong-pressed: var(--ax-success-800);
-    --ax-bg-success-strong-hover: var(--ax-success-700);
-    --ax-bg-success-strong: var(--ax-success-600);
-    --ax-bg-success-moderate-pressedA: var(--ax-success-400A);
-    --ax-bg-success-moderate-pressed: var(--ax-success-400);
-    --ax-bg-success-moderate-hoverA: var(--ax-success-300A);
-    --ax-bg-success-moderate-hover: var(--ax-success-300);
-    --ax-bg-success-moderateA: var(--ax-success-200A);
-    --ax-bg-success-moderate: var(--ax-success-200);
-    --ax-bg-success-softA: var(--ax-success-100A);
-    --ax-bg-success-soft: var(--ax-success-100);
-    --ax-bg-accent-strong-pressed: var(--ax-accent-800);
-    --ax-bg-accent-strong-hover: var(--ax-accent-700);
-    --ax-bg-accent-strong: var(--ax-accent-600);
-    --ax-bg-accent-moderate-pressedA: var(--ax-accent-400A);
-    --ax-bg-accent-moderate-pressed: var(--ax-accent-400);
-    --ax-bg-accent-moderate-hoverA: var(--ax-accent-300A);
-    --ax-bg-accent-moderate-hover: var(--ax-accent-300);
-    --ax-bg-accent-moderateA: var(--ax-accent-200A);
-    --ax-bg-accent-moderate: var(--ax-accent-200);
-    --ax-bg-accent-softA: var(--ax-accent-100A);
-    --ax-bg-accent-soft: var(--ax-accent-100);
-    --ax-bg-neutral-strong-pressed: var(--ax-neutral-900);
-    --ax-bg-neutral-strong-hover: var(--ax-neutral-800);
-    --ax-bg-neutral-strong: var(--ax-neutral-700);
-    --ax-bg-neutral-moderate-pressedA: var(--ax-neutral-400A);
-    --ax-bg-neutral-moderate-pressed: var(--ax-neutral-400);
-    --ax-bg-neutral-moderate-hoverA: var(--ax-neutral-300A);
-    --ax-bg-neutral-moderate-hover: var(--ax-neutral-300);
-    --ax-bg-neutral-moderateA: var(--ax-neutral-200A);
-    --ax-bg-neutral-moderate: var(--ax-neutral-200);
-    --ax-bg-neutral-softA: var(--ax-neutral-100A);
-    --ax-bg-neutral-soft: var(--ax-neutral-100);
   }
 
-  .dark, .dark-theme {
+  .dark {
     --ax-meta-lime-400A: rgba(251, 245, 0, .16);
     --ax-meta-lime-300A: rgba(252, 233, 0, .114);
     --ax-meta-lime-200A: rgba(246, 207, 0, .086);
@@ -625,6 +407,21 @@
     --ax-neutral-300: #242b37;
     --ax-neutral-200: #1c232f;
     --ax-neutral-100: #161d28;
+  }
+
+  :root, :host, .light {
+    --ax-bg-overlay: rgba(2, 20, 49, .49);
+    --ax-bg-input: rgba(255, 255, 255, .85);
+    --ax-bg-default: #fff;
+    --ax-text-logo: #c30000;
+    --ax-opacity-disabled: .3;
+    --ax-shadow-dialog: 0px 4px 6px 0px rgba(0, 0, 0, .15), 0px 1px 3px -1px rgba(0, 0, 0, .15), 0px 1px 1px 0px rgba(0, 0, 0, .06);
+    --ax-border-focus: var(--ax-neutral-1000);
+    --ax-bg-sunken: var(--ax-neutral-200);
+    --ax-bg-raised: var(--ax-neutral-000);
+  }
+
+  .dark, .dark-theme {
     --ax-bg-overlay: rgba(2, 20, 49, .49);
     --ax-bg-sunken: #07090d;
     --ax-bg-input: rgba(7, 9, 13, .5);
@@ -632,6 +429,11 @@
     --ax-opacity-disabled: .4;
     --ax-shadow-dialog: 0px 0px 1px 0px rgba(7, 9, 13, 0), 0px 2px 5px 0px rgba(7, 9, 13, .35), 0px 5px 12px 0px rgba(7, 9, 13, .5);
     --ax-border-focus: var(--ax-neutral-1000);
+    --ax-bg-raised: var(--ax-neutral-100);
+    --ax-text-logo: var(--ax-neutral-1000);
+  }
+
+  :root, :host, .light, .dark {
     --ax-border-meta-lime-strong: var(--ax-meta-lime-700);
     --ax-border-meta-lime-subtleA: var(--ax-meta-lime-400A);
     --ax-border-meta-lime-subtle: var(--ax-meta-lime-400);
@@ -676,52 +478,50 @@
     --ax-border-neutral-subtleA: var(--ax-neutral-400A);
     --ax-border-neutral-subtle: var(--ax-neutral-400);
     --ax-border-neutral: var(--ax-neutral-600);
-    --ax-text-logo: var(--ax-neutral-1000);
     --ax-text-meta-lime-contrast: var(--ax-neutral-000);
-    --ax-text-meta-purple-contrast: var(--ax-neutral-000);
-    --ax-text-brand-blue-contrast: var(--ax-neutral-000);
-    --ax-text-brand-beige-contrast: var(--ax-neutral-000);
-    --ax-text-brand-magenta-contrast: var(--ax-neutral-000);
-    --ax-text-warning-contrast: var(--ax-neutral-000);
-    --ax-text-success-contrast: var(--ax-neutral-000);
-    --ax-text-info-contrast: var(--ax-neutral-000);
-    --ax-text-danger-contrast: var(--ax-neutral-000);
-    --ax-text-accent-contrast: var(--ax-neutral-000);
-    --ax-text-neutral-contrast: var(--ax-neutral-000);
     --ax-text-meta-lime-icon: 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-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-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-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-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-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-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-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-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-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-subtle: var(--ax-neutral-900);
     --ax-text-neutral: var(--ax-neutral-1000);
-    --ax-bg-raised: var(--ax-neutral-100);
     --ax-bg-meta-lime-strong-pressed: var(--ax-meta-lime-800);
     --ax-bg-meta-lime-strong-hover: var(--ax-meta-lime-700);
     --ax-bg-meta-lime-strong: var(--ax-meta-lime-600);
@@ -846,7 +646,7 @@
   }
 
   :root, :host {
-    --ax-version: "7.12.1";
+    --ax-version: "7.13.0";
     --ax-font-weight-regular: 400;
     --ax-font-weight-bold: 600;
     --ax-font-size-small: .875rem;
@@ -908,6 +708,248 @@
     --ax-space-1: .0625rem;
     --ax-space-0: 0rem;
   }
+
+  [data-color-role="neutral"] {
+    --ax-border-strong: var(--ax-border-neutral-strong);
+    --ax-border-subtleA: var(--ax-border-neutral-subtleA);
+    --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-subtle: var(--ax-text-neutral-subtle);
+    --ax-text-default: var(--ax-text-neutral);
+    --ax-bg-strong-pressed: var(--ax-bg-neutral-strong-pressed);
+    --ax-bg-strong-hover: var(--ax-bg-neutral-strong-hover);
+    --ax-bg-strong: var(--ax-bg-neutral-strong);
+    --ax-bg-moderate-pressedA: var(--ax-bg-neutral-moderate-pressedA);
+    --ax-bg-moderate-pressed: var(--ax-bg-neutral-moderate-pressed);
+    --ax-bg-moderate-hoverA: var(--ax-bg-neutral-moderate-hoverA);
+    --ax-bg-moderate-hover: var(--ax-bg-neutral-moderate-hover);
+    --ax-bg-moderateA: var(--ax-bg-neutral-moderateA);
+    --ax-bg-moderate: var(--ax-bg-neutral-moderate);
+    --ax-bg-softA: var(--ax-bg-neutral-softA);
+    --ax-bg-soft: var(--ax-bg-neutral-soft);
+  }
+
+  [data-color-role="accent"] {
+    --ax-border-strong: var(--ax-border-accent-strong);
+    --ax-border-subtleA: var(--ax-border-accent-subtleA);
+    --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-subtle: var(--ax-text-accent-subtle);
+    --ax-text-default: var(--ax-text-accent);
+    --ax-bg-strong-pressed: var(--ax-bg-accent-strong-pressed);
+    --ax-bg-strong-hover: var(--ax-bg-accent-strong-hover);
+    --ax-bg-strong: var(--ax-bg-accent-strong);
+    --ax-bg-moderate-pressedA: var(--ax-bg-accent-moderate-pressedA);
+    --ax-bg-moderate-pressed: var(--ax-bg-accent-moderate-pressed);
+    --ax-bg-moderate-hoverA: var(--ax-bg-accent-moderate-hoverA);
+    --ax-bg-moderate-hover: var(--ax-bg-accent-moderate-hover);
+    --ax-bg-moderateA: var(--ax-bg-accent-moderateA);
+    --ax-bg-moderate: var(--ax-bg-accent-moderate);
+    --ax-bg-softA: var(--ax-bg-accent-softA);
+    --ax-bg-soft: var(--ax-bg-accent-soft);
+  }
+
+  [data-color-role="success"] {
+    --ax-border-strong: var(--ax-border-success-strong);
+    --ax-border-subtleA: var(--ax-border-success-subtleA);
+    --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-subtle: var(--ax-text-success-subtle);
+    --ax-text-default: var(--ax-text-success);
+    --ax-bg-strong-pressed: var(--ax-bg-success-strong-pressed);
+    --ax-bg-strong-hover: var(--ax-bg-success-strong-hover);
+    --ax-bg-strong: var(--ax-bg-success-strong);
+    --ax-bg-moderate-pressedA: var(--ax-bg-success-moderate-pressedA);
+    --ax-bg-moderate-pressed: var(--ax-bg-success-moderate-pressed);
+    --ax-bg-moderate-hoverA: var(--ax-bg-success-moderate-hoverA);
+    --ax-bg-moderate-hover: var(--ax-bg-success-moderate-hover);
+    --ax-bg-moderateA: var(--ax-bg-success-moderateA);
+    --ax-bg-moderate: var(--ax-bg-success-moderate);
+    --ax-bg-softA: var(--ax-bg-success-softA);
+    --ax-bg-soft: var(--ax-bg-success-soft);
+  }
+
+  [data-color-role="warning"] {
+    --ax-border-strong: var(--ax-border-warning-strong);
+    --ax-border-subtleA: var(--ax-border-warning-subtleA);
+    --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-subtle: var(--ax-text-warning-subtle);
+    --ax-text-default: var(--ax-text-warning);
+    --ax-bg-strong-pressed: var(--ax-bg-warning-strong-pressed);
+    --ax-bg-strong-hover: var(--ax-bg-warning-strong-hover);
+    --ax-bg-strong: var(--ax-bg-warning-strong);
+    --ax-bg-moderate-pressedA: var(--ax-bg-warning-moderate-pressedA);
+    --ax-bg-moderate-pressed: var(--ax-bg-warning-moderate-pressed);
+    --ax-bg-moderate-hoverA: var(--ax-bg-warning-moderate-hoverA);
+    --ax-bg-moderate-hover: var(--ax-bg-warning-moderate-hover);
+    --ax-bg-moderateA: var(--ax-bg-warning-moderateA);
+    --ax-bg-moderate: var(--ax-bg-warning-moderate);
+    --ax-bg-softA: var(--ax-bg-warning-softA);
+    --ax-bg-soft: var(--ax-bg-warning-soft);
+  }
+
+  [data-color-role="danger"] {
+    --ax-border-strong: var(--ax-border-danger-strong);
+    --ax-border-subtleA: var(--ax-border-danger-subtleA);
+    --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-subtle: var(--ax-text-danger-subtle);
+    --ax-text-default: var(--ax-text-danger);
+    --ax-bg-strong-pressed: var(--ax-bg-danger-strong-pressed);
+    --ax-bg-strong-hover: var(--ax-bg-danger-strong-hover);
+    --ax-bg-strong: var(--ax-bg-danger-strong);
+    --ax-bg-moderate-pressedA: var(--ax-bg-danger-moderate-pressedA);
+    --ax-bg-moderate-pressed: var(--ax-bg-danger-moderate-pressed);
+    --ax-bg-moderate-hoverA: var(--ax-bg-danger-moderate-hoverA);
+    --ax-bg-moderate-hover: var(--ax-bg-danger-moderate-hover);
+    --ax-bg-moderateA: var(--ax-bg-danger-moderateA);
+    --ax-bg-moderate: var(--ax-bg-danger-moderate);
+    --ax-bg-softA: var(--ax-bg-danger-softA);
+    --ax-bg-soft: var(--ax-bg-danger-soft);
+  }
+
+  [data-color-role="info"] {
+    --ax-border-strong: var(--ax-border-info-strong);
+    --ax-border-subtleA: var(--ax-border-info-subtleA);
+    --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-subtle: var(--ax-text-info-subtle);
+    --ax-text-default: var(--ax-text-info);
+    --ax-bg-strong-pressed: var(--ax-bg-info-strong-pressed);
+    --ax-bg-strong-hover: var(--ax-bg-info-strong-hover);
+    --ax-bg-strong: var(--ax-bg-info-strong);
+    --ax-bg-moderate-pressedA: var(--ax-bg-info-moderate-pressedA);
+    --ax-bg-moderate-pressed: var(--ax-bg-info-moderate-pressed);
+    --ax-bg-moderate-hoverA: var(--ax-bg-info-moderate-hoverA);
+    --ax-bg-moderate-hover: var(--ax-bg-info-moderate-hover);
+    --ax-bg-moderateA: var(--ax-bg-info-moderateA);
+    --ax-bg-moderate: var(--ax-bg-info-moderate);
+    --ax-bg-softA: var(--ax-bg-info-softA);
+    --ax-bg-soft: var(--ax-bg-info-soft);
+  }
+
+  [data-color-role="brand-magenta"] {
+    --ax-border-strong: var(--ax-border-brand-magenta-strong);
+    --ax-border-subtleA: var(--ax-border-brand-magenta-subtleA);
+    --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-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);
+    --ax-bg-strong-hover: var(--ax-bg-brand-magenta-strong-hover);
+    --ax-bg-strong: var(--ax-bg-brand-magenta-strong);
+    --ax-bg-moderate-pressedA: var(--ax-bg-brand-magenta-moderate-pressedA);
+    --ax-bg-moderate-pressed: var(--ax-bg-brand-magenta-moderate-pressed);
+    --ax-bg-moderate-hoverA: var(--ax-bg-brand-magenta-moderate-hoverA);
+    --ax-bg-moderate-hover: var(--ax-bg-brand-magenta-moderate-hover);
+    --ax-bg-moderateA: var(--ax-bg-brand-magenta-moderateA);
+    --ax-bg-moderate: var(--ax-bg-brand-magenta-moderate);
+    --ax-bg-softA: var(--ax-bg-brand-magenta-softA);
+    --ax-bg-soft: var(--ax-bg-brand-magenta-soft);
+  }
+
+  [data-color-role="brand-beige"] {
+    --ax-border-strong: var(--ax-border-brand-beige-strong);
+    --ax-border-subtleA: var(--ax-border-brand-beige-subtleA);
+    --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-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);
+    --ax-bg-strong-hover: var(--ax-bg-brand-beige-strong-hover);
+    --ax-bg-strong: var(--ax-bg-brand-beige-strong);
+    --ax-bg-moderate-pressedA: var(--ax-bg-brand-beige-moderate-pressedA);
+    --ax-bg-moderate-pressed: var(--ax-bg-brand-beige-moderate-pressed);
+    --ax-bg-moderate-hoverA: var(--ax-bg-brand-beige-moderate-hoverA);
+    --ax-bg-moderate-hover: var(--ax-bg-brand-beige-moderate-hover);
+    --ax-bg-moderateA: var(--ax-bg-brand-beige-moderateA);
+    --ax-bg-moderate: var(--ax-bg-brand-beige-moderate);
+    --ax-bg-softA: var(--ax-bg-brand-beige-softA);
+    --ax-bg-soft: var(--ax-bg-brand-beige-soft);
+  }
+
+  [data-color-role="brand-blue"] {
+    --ax-border-strong: var(--ax-border-brand-blue-strong);
+    --ax-border-subtleA: var(--ax-border-brand-blue-subtleA);
+    --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-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);
+    --ax-bg-strong-hover: var(--ax-bg-brand-blue-strong-hover);
+    --ax-bg-strong: var(--ax-bg-brand-blue-strong);
+    --ax-bg-moderate-pressedA: var(--ax-bg-brand-blue-moderate-pressedA);
+    --ax-bg-moderate-pressed: var(--ax-bg-brand-blue-moderate-pressed);
+    --ax-bg-moderate-hoverA: var(--ax-bg-brand-blue-moderate-hoverA);
+    --ax-bg-moderate-hover: var(--ax-bg-brand-blue-moderate-hover);
+    --ax-bg-moderateA: var(--ax-bg-brand-blue-moderateA);
+    --ax-bg-moderate: var(--ax-bg-brand-blue-moderate);
+    --ax-bg-softA: var(--ax-bg-brand-blue-softA);
+    --ax-bg-soft: var(--ax-bg-brand-blue-soft);
+  }
+
+  [data-color-role="meta-purple"] {
+    --ax-border-strong: var(--ax-border-meta-purple-strong);
+    --ax-border-subtleA: var(--ax-border-meta-purple-subtleA);
+    --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-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);
+    --ax-bg-strong-hover: var(--ax-bg-meta-purple-strong-hover);
+    --ax-bg-strong: var(--ax-bg-meta-purple-strong);
+    --ax-bg-moderate-pressedA: var(--ax-bg-meta-purple-moderate-pressedA);
+    --ax-bg-moderate-pressed: var(--ax-bg-meta-purple-moderate-pressed);
+    --ax-bg-moderate-hoverA: var(--ax-bg-meta-purple-moderate-hoverA);
+    --ax-bg-moderate-hover: var(--ax-bg-meta-purple-moderate-hover);
+    --ax-bg-moderateA: var(--ax-bg-meta-purple-moderateA);
+    --ax-bg-moderate: var(--ax-bg-meta-purple-moderate);
+    --ax-bg-softA: var(--ax-bg-meta-purple-softA);
+    --ax-bg-soft: var(--ax-bg-meta-purple-soft);
+  }
+
+  [data-color-role="meta-lime"] {
+    --ax-border-strong: var(--ax-border-meta-lime-strong);
+    --ax-border-subtleA: var(--ax-border-meta-lime-subtleA);
+    --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-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);
+    --ax-bg-strong-hover: var(--ax-bg-meta-lime-strong-hover);
+    --ax-bg-strong: var(--ax-bg-meta-lime-strong);
+    --ax-bg-moderate-pressedA: var(--ax-bg-meta-lime-moderate-pressedA);
+    --ax-bg-moderate-pressed: var(--ax-bg-meta-lime-moderate-pressed);
+    --ax-bg-moderate-hoverA: var(--ax-bg-meta-lime-moderate-hoverA);
+    --ax-bg-moderate-hover: var(--ax-bg-meta-lime-moderate-hover);
+    --ax-bg-moderateA: var(--ax-bg-meta-lime-moderateA);
+    --ax-bg-moderate: var(--ax-bg-meta-lime-moderate);
+    --ax-bg-softA: var(--ax-bg-meta-lime-softA);
+    --ax-bg-soft: var(--ax-bg-meta-lime-soft);
+  }
 }
 
 @layer aksel.baseline {
@@ -2158,11 +2200,11 @@
   }
 
   .navds-confirmation-panel__inner {
-    gap: var(--a-spacing-3);
-    padding: var(--a-spacing-4);
-    border-radius: var(--a-border-radius-medium);
-    border: 1px solid var(--ac-confirmation-panel-border, var(--a-border-warning));
-    background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
+    gap: var(--ax-space-12);
+    padding: var(--ax-space-16);
+    border-radius: var(--ax-border-radius-large);
+    border: 1px solid var(--ax-border-default);
+    background-color: var(--ax-bg-moderate);
     flex-direction: column;
     justify-self: stretch;
     transition: background-color .1s linear;
@@ -2174,20 +2216,6 @@
     max-width: 80ch;
   }
 
-  .navds-confirmation-panel--checked .navds-confirmation-panel__inner {
-    border-color: var(--ac-confirmation-panel-checked-border, var(--a-border-success));
-    background-color: var(--ac-confirmation-panel-checked-bg, var(--a-surface-success-subtle));
-  }
-
-  .navds-confirmation-panel--error .navds-confirmation-panel__inner {
-    border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
-    background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
-  }
-
-  .navds-confirmation-panel--error .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label {
-    color: var(--a-text-default);
-  }
-
   @media (forced-colors: active) {
     .navds-confirmation-panel__inner:before {
       content: "";
@@ -2195,8 +2223,8 @@
       border-color: orange;
       border-left-style: solid;
       border-left-width: 8px;
-      border-start-start-radius: calc(var(--a-border-radius-medium)  - 1px);
-      border-end-start-radius: calc(var(--a-border-radius-medium)  - 1px);
+      border-start-start-radius: calc(var(--ax-border-radius-large)  - 1px);
+      border-end-start-radius: calc(var(--ax-border-radius-large)  - 1px);
       height: 100%;
       position: absolute;
       top: 0;
@@ -4339,21 +4367,21 @@
   }
 
   .navds-dropdown__menu {
-    padding: var(--a-spacing-2) 0;
-    color: var(--ac-dropdown-text, var(--a-text-default));
+    padding: var(--ax-space-8);
+    color: var(--ax-text-neutral);
     width: 27ch;
     max-height: 616px;
     overflow: hidden auto;
   }
 
   .navds-dropdown__divider {
-    margin: var(--a-spacing-3) 0;
+    margin: var(--ax-space-12) 0;
     border: none;
-    border-bottom: 1px solid var(--a-border-divider);
+    border-bottom: 1px solid var(--ax-border-neutral-subtle);
   }
 
   .navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
-    margin: 0 var(--a-spacing-4) var(--a-spacing-3);
+    margin: 0 var(--ax-space-16) var(--ax-space-12);
   }
 
   .navds-dropdown__list {
@@ -4367,18 +4395,20 @@
   }
 
   .navds-dropdown__list-heading {
-    margin: var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3);
+    margin-block: var(--ax-space-4) var(--ax-space-12);
+    margin-inline: var(--ax-space-4);
   }
 
   .navds-dropdown__item {
-    color: var(--ac-dropdown-item-text, var(--a-text-action));
     font: inherit;
     text-align: left;
     cursor: pointer;
     align-items: center;
-    gap: var(--a-spacing-2);
+    gap: var(--ax-space-8);
     width: 100%;
-    padding: var(--a-spacing-1) var(--a-spacing-4);
+    padding: var(--ax-space-4);
+    border-radius: var(--ax-border-radius-medium);
+    color: var(--ax-text-neutral);
     background: none;
     border: none;
     margin: 0;
@@ -4388,31 +4418,19 @@
   }
 
   .navds-dropdown__item:hover {
-    background-color: var(--ac-dropdown-item-hover-bg, var(--a-surface-action-subtle-hover));
-    color: var(--ac-dropdown-item-hover-text, var(--a-text-action-hover));
+    background-color: var(--ax-bg-accent-moderate-hoverA);
   }
 
   .navds-dropdown__item:active {
-    background-color: var(--ac-dropdown-item-active-bg, var(--a-surface-action-active));
-    color: var(--ac-dropdown-item-active-text, var(--a-text-on-action));
+    background-color: var(--ax-bg-accent-moderate-pressedA);
   }
 
   .navds-dropdown__item:focus-visible {
-    outline-offset: -2px;
-    box-shadow: inset 0 0 0 2px var(--a-border-focus);
-    outline: 2px solid rgba(0, 0, 0, 0);
-  }
-
-  @supports not selector(:focus-visible) {
-    .navds-dropdown__item:focus {
-      outline-offset: -2px;
-      box-shadow: inset 0 0 0 2px var(--a-border-focus);
-      outline: 2px solid rgba(0, 0, 0, 0);
-    }
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: -3px;
   }
 
   .navds-dropdown__item:disabled {
-    color: var(--ac-dropdown-item-text, var(--a-text-action));
     opacity: var(--ax-opacity-disabled);
     cursor: not-allowed;
     background: none;
@@ -5095,6 +5113,43 @@
     color: var(--ax-text-neutral-subtle);
   }
 
+  .navds-link-panel {
+    color: var(--ax-text-neutral);
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--ax-space-16);
+    text-decoration: none;
+    display: flex;
+  }
+
+  .navds-link-panel:hover {
+    border-color: var(--ax-border-accent);
+  }
+
+  .navds-link-panel:hover .navds-link-panel__title {
+    color: var(--ax-text-accent-subtle);
+    text-decoration: underline;
+  }
+
+  .navds-link-panel:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+
+  .navds-link-panel__chevron {
+    flex-shrink: 0;
+    font-size: 1.5rem;
+    transition: transform .2s;
+  }
+
+  .navds-link-panel:hover > .navds-link-panel__chevron, .navds-link-panel:focus-within > .navds-link-panel__chevron {
+    transform: translateX(4px);
+  }
+
+  .navds-link-panel__description {
+    margin-top: var(--a-space-4);
+  }
+
   .navds-loader {
     stroke-width: 6px;
     --__axc-loader-stroke-width: 5.9;
@@ -6145,14 +6200,14 @@
   }
 
   .navds-panel {
-    background-color: var(--ac-panel-bg, var(--a-surface-default));
-    padding: var(--a-spacing-4);
-    border-radius: var(--a-border-radius-small);
+    background-color: var(--ax-bg-default);
+    padding: var(--ax-space-16);
+    border-radius: var(--ax-border-radius-small);
     border: 1px solid rgba(0, 0, 0, 0);
   }
 
   .navds-panel--border {
-    border-color: var(--ac-panel-border, var(--a-border-default));
+    border-color: var(--ax-border-neutral);
   }
 
   .navds-read-more {