@navikt/ds-tokens 7.2.1 → 7.3.0

package/dist/darkside/tokens.css

@@ -1,4 +1,8 @@
 :root, :host, .light, .light-theme {
+  --a-data-two-400A: #d0dc00;
+  --a-data-two-300A: #cadf0094;
+  --a-data-two-200A: #c4df0056;
+  --a-data-two-100A: #c3de002e;
   --a-data-two-1000: #2a2800;
   --a-data-two-900: #515400;
   --a-data-two-800: #5c6100;
@@ -9,6 +13,10 @@
   --a-data-two-300: #e0ec6b;
   --a-data-two-200: #ebf4a9;
   --a-data-two-100: #f4f9d1;
+  --a-data-one-400A: #2b006b30;
+  --a-data-one-300A: #2b00661e;
+  --a-data-one-200A: #2b006412;
+  --a-data-one-100A: #3300660a;
   --a-data-one-1000: #331a4d;
   --a-data-one-900: #5e467c;
   --a-data-one-800: #6a5289;
@@ -19,6 +27,10 @@
   --a-data-one-300: #e6e1ed;
   --a-data-one-200: #f0edf4;
   --a-data-one-100: #f7f5f9;
+  --a-brand-three-400A: #005a923f;
+  --a-brand-three-300A: #0060a028;
+  --a-brand-three-200A: #006eb71c;
+  --a-brand-three-100A: #0078d211;
   --a-brand-three-1000: #002942;
   --a-brand-three-900: #00557d;
   --a-brand-three-800: #156389;
@@ -29,6 +41,10 @@
   --a-brand-three-300: #d7e6f0;
   --a-brand-three-200: #e3eff7;
   --a-brand-three-100: #eef6fc;
+  --a-brand-two-400A: #e94c004e;
+  --a-brand-two-300A: #f0520032;
+  --a-brand-two-200A: #ef5b001f;
+  --a-brand-two-100A: #ff5a0011;
   --a-brand-two-1000: #3c1f15;
   --a-brand-two-900: #764332;
   --a-brand-two-800: #874e3b;
@@ -39,6 +55,10 @@
   --a-brand-two-300: #fcddcd;
   --a-brand-two-200: #fdebe0;
   --a-brand-two-100: #fff4ee;
+  --a-brand-one-400A: #a4003a35;
+  --a-brand-one-300A: #a5003c22;
+  --a-brand-one-200A: #aa003d15;
+  --a-brand-one-100A: #aa00400c;
   --a-brand-one-1000: #52002b;
   --a-brand-one-900: #98185d;
   --a-brand-one-800: #a33069;
@@ -49,6 +69,10 @@
   --a-brand-one-300: #f3dde5;
   --a-brand-one-200: #f8eaef;
   --a-brand-one-100: #fbf3f6;
+  --a-info-400A: #005a923f;
+  --a-info-300A: #0060a028;
+  --a-info-200A: #006eb71c;
+  --a-info-100A: #0078d211;
   --a-info-1000: #002942;
   --a-info-900: #00557d;
   --a-info-800: #156389;
@@ -59,6 +83,10 @@
   --a-info-300: #d7e6f0;
   --a-info-200: #e3eff7;
   --a-info-100: #eef6fc;
+  --a-danger-400A: #ff00583d;
+  --a-danger-300A: #ff005826;
+  --a-danger-200A: #ff005917;
+  --a-danger-100A: #ff00630d;
   --a-danger-1000: #560000;
   --a-danger-900: #a60017;
   --a-danger-800: #bc002a;
@@ -69,6 +97,10 @@
   --a-danger-300: #ffd9e6;
   --a-danger-200: #ffe8f0;
   --a-danger-100: #fff2f7;
+  --a-warning-400A: #ffa30090;
+  --a-warning-300A: #ffa2015a;
+  --a-warning-200A: #ffa40038;
+  --a-warning-100A: #ffa1001b;
   --a-warning-1000: #481700;
   --a-warning-900: #8c3500;
   --a-warning-800: #a03e00;
@@ -79,6 +111,10 @@
   --a-warning-300: #ffdea5;
   --a-warning-200: #ffebc7;
   --a-warning-100: #fff5e4;
+  --a-success-400A: #00a22457;
+  --a-success-300A: #01b2273b;
+  --a-success-200A: #00c9252a;
+  --a-success-100A: #00ee351d;
   --a-success-1000: #002e00;
   --a-success-900: #005e0f;
   --a-success-800: #006c1f;
@@ -89,6 +125,10 @@
   --a-success-300: #c4edcd;
   --a-success-200: #d5f6db;
   --a-success-100: #e2fde8;
+  --a-accent-400A: #0064f145;
+  --a-accent-300A: #0165f42b;
+  --a-accent-200A: #005fff1b;
+  --a-accent-100A: #006eff0e;
   --a-accent-1000: #002459;
   --a-accent-900: #004ea3;
   --a-accent-800: #005bb6;
@@ -99,6 +139,10 @@
   --a-accent-300: #d4e5fd;
   --a-accent-200: #e4eeff;
   --a-accent-100: #f1f7ff;
+  --a-neutral-400A: #00163030;
+  --a-neutral-300A: #0011331e;
+  --a-neutral-200A: #000e2913;
+  --a-neutral-100A: #001a330a;
   --a-neutral-000: white;
   --a-neutral-1000: #202733;
   --a-neutral-900: #49515e;
@@ -111,41 +155,55 @@
   --a-neutral-200: #ecedef;
   --a-neutral-100: #f5f6f7;
   --a-bg-overlay: #0214317d;
+  --a-bg-input: #ffffffd9;
+  --a-bg-default: #fff;
   --a-border-focus: var(--a-accent-700);
   --a-border-strong: var(--a-neutral-600);
+  --a-border-subtleA: var(--a-neutral-400A);
   --a-border-subtle: var(--a-neutral-400);
   --a-border-default: var(--a-neutral-500);
   --a-border-data-two-strong: var(--a-data-two-600);
+  --a-border-data-two-subtleA: var(--a-data-two-400A);
   --a-border-data-two-subtle: var(--a-data-two-400);
   --a-border-data-two: var(--a-data-two-500);
   --a-border-data-one-strong: var(--a-data-one-600);
+  --a-border-data-one-subtleA: var(--a-data-one-400A);
   --a-border-data-one-subtle: var(--a-data-one-400);
   --a-border-data-one: var(--a-data-one-500);
   --a-border-brand-three-strong: var(--a-brand-three-600);
+  --a-border-brand-three-subtleA: var(--a-brand-three-400A);
   --a-border-brand-three-subtle: var(--a-brand-three-400);
   --a-border-brand-three: var(--a-brand-three-500);
   --a-border-brand-two-strong: var(--a-brand-two-600);
+  --a-border-brand-two-subtleA: var(--a-brand-two-400A);
   --a-border-brand-two-subtle: var(--a-brand-two-400);
   --a-border-brand-two: var(--a-brand-two-500);
   --a-border-brand-one-strong: var(--a-brand-one-600);
+  --a-border-brand-one-subtleA: var(--a-brand-one-400A);
   --a-border-brand-one-subtle: var(--a-brand-one-400);
   --a-border-brand-one: var(--a-brand-one-500);
   --a-border-info-strong: var(--a-info-600);
+  --a-border-info-subtleA: var(--a-info-400A);
   --a-border-info-subtle: var(--a-info-400);
   --a-border-info: var(--a-info-500);
   --a-border-danger-strong: var(--a-danger-600);
+  --a-border-danger-subtleA: var(--a-danger-400A);
   --a-border-danger-subtle: var(--a-danger-400);
   --a-border-danger: var(--a-danger-500);
   --a-border-warning-strong: var(--a-warning-600);
+  --a-border-warning-subtleA: var(--a-warning-400A);
   --a-border-warning-subtle: var(--a-warning-400);
   --a-border-warning: var(--a-warning-500);
   --a-border-success-strong: var(--a-success-600);
+  --a-border-success-subtleA: var(--a-success-400A);
   --a-border-success-subtle: var(--a-success-400);
   --a-border-success: var(--a-success-500);
   --a-border-accent-strong: var(--a-accent-600);
+  --a-border-accent-subtleA: var(--a-accent-400A);
   --a-border-accent-subtle: var(--a-accent-400);
   --a-border-accent: var(--a-accent-500);
   --a-border-neutral-strong: var(--a-neutral-600);
+  --a-border-neutral-subtleA: var(--a-neutral-400A);
   --a-border-neutral-subtle: var(--a-neutral-400);
   --a-border-neutral: var(--a-neutral-500);
   --a-text-icon: var(--a-neutral-600);
@@ -197,17 +255,18 @@
   --a-text-neutral: var(--a-neutral-700);
   --a-bg-sunken: var(--a-neutral-200);
   --a-bg-raised: var(--a-neutral-000);
-  --a-bg-input: var(--a-neutral-000);
-  --a-bg-default: var(--a-neutral-000);
   --a-bg-data-two-raised-hover: var(--a-data-two-200);
   --a-bg-data-two-raised: var(--a-data-two-100);
   --a-bg-data-two-strong-pressed: var(--a-data-two-800);
   --a-bg-data-two-strong-hover: var(--a-data-two-700);
   --a-bg-data-two-strong: var(--a-data-two-600);
-  --a-bg-data-two-moderate-selected: var(--a-data-two-700);
+  --a-bg-data-two-moderate-pressedA: var(--a-data-two-400A);
   --a-bg-data-two-moderate-pressed: var(--a-data-two-400);
+  --a-bg-data-two-moderate-hoverA: var(--a-data-two-300A);
   --a-bg-data-two-moderate-hover: var(--a-data-two-300);
+  --a-bg-data-two-moderateA: var(--a-data-two-200A);
   --a-bg-data-two-moderate: var(--a-data-two-200);
+  --a-bg-data-two-hoverA: var(--a-data-two-200A);
   --a-bg-data-two-hover: var(--a-data-two-200);
   --a-bg-data-two: var(--a-data-two-100);
   --a-bg-data-one-raised-hover: var(--a-data-one-200);
@@ -215,10 +274,13 @@
   --a-bg-data-one-strong-pressed: var(--a-data-one-800);
   --a-bg-data-one-strong-hover: var(--a-data-one-700);
   --a-bg-data-one-strong: var(--a-data-one-600);
-  --a-bg-data-one-moderate-selected: var(--a-data-one-700);
+  --a-bg-data-one-moderate-pressedA: var(--a-data-one-400A);
   --a-bg-data-one-moderate-pressed: var(--a-data-one-400);
+  --a-bg-data-one-moderate-hoverA: var(--a-data-one-300A);
   --a-bg-data-one-moderate-hover: var(--a-data-one-300);
+  --a-bg-data-one-moderateA: var(--a-data-one-200A);
   --a-bg-data-one-moderate: var(--a-data-one-200);
+  --a-bg-data-one-hoverA: var(--a-data-one-200A);
   --a-bg-data-one-hover: var(--a-data-one-200);
   --a-bg-data-one: var(--a-data-one-100);
   --a-bg-brand-three-raised-hover: var(--a-brand-three-200);
@@ -226,10 +288,13 @@
   --a-bg-brand-three-strong-pressed: var(--a-brand-three-800);
   --a-bg-brand-three-strong-hover: var(--a-brand-three-700);
   --a-bg-brand-three-strong: var(--a-brand-three-600);
-  --a-bg-brand-three-moderate-selected: var(--a-brand-three-700);
+  --a-bg-brand-three-moderate-pressedA: var(--a-brand-three-400A);
   --a-bg-brand-three-moderate-pressed: var(--a-brand-three-400);
+  --a-bg-brand-three-moderate-hoverA: var(--a-brand-three-300A);
   --a-bg-brand-three-moderate-hover: var(--a-brand-three-300);
+  --a-bg-brand-three-moderateA: var(--a-brand-three-200A);
   --a-bg-brand-three-moderate: var(--a-brand-three-200);
+  --a-bg-brand-three-hoverA: var(--a-brand-three-200A);
   --a-bg-brand-three-hover: var(--a-brand-three-200);
   --a-bg-brand-three: var(--a-brand-three-100);
   --a-bg-brand-two-raised-hover: var(--a-brand-two-200);
@@ -237,10 +302,13 @@
   --a-bg-brand-two-strong-pressed: var(--a-brand-two-800);
   --a-bg-brand-two-strong-hover: var(--a-brand-two-700);
   --a-bg-brand-two-strong: var(--a-brand-two-600);
-  --a-bg-brand-two-moderate-selected: var(--a-brand-two-700);
+  --a-bg-brand-two-moderate-pressedA: var(--a-brand-two-400A);
   --a-bg-brand-two-moderate-pressed: var(--a-brand-two-400);
+  --a-bg-brand-two-moderate-hoverA: var(--a-brand-two-300A);
   --a-bg-brand-two-moderate-hover: var(--a-brand-two-300);
+  --a-bg-brand-two-moderateA: var(--a-brand-two-200A);
   --a-bg-brand-two-moderate: var(--a-brand-two-200);
+  --a-bg-brand-two-hoverA: var(--a-brand-two-200A);
   --a-bg-brand-two-hover: var(--a-brand-two-200);
   --a-bg-brand-two: var(--a-brand-two-100);
   --a-bg-brand-one-raised-hover: var(--a-brand-one-200);
@@ -248,10 +316,13 @@
   --a-bg-brand-one-strong-pressed: var(--a-brand-one-800);
   --a-bg-brand-one-strong-hover: var(--a-brand-one-700);
   --a-bg-brand-one-strong: var(--a-brand-one-600);
-  --a-bg-brand-one-moderate-selected: var(--a-brand-one-700);
+  --a-bg-brand-one-moderate-pressedA: var(--a-brand-one-400A);
   --a-bg-brand-one-moderate-pressed: var(--a-brand-one-400);
+  --a-bg-brand-one-moderate-hoverA: var(--a-brand-one-300A);
   --a-bg-brand-one-moderate-hover: var(--a-brand-one-300);
+  --a-bg-brand-one-moderateA: var(--a-brand-one-200A);
   --a-bg-brand-one-moderate: var(--a-brand-one-200);
+  --a-bg-brand-one-hoverA: var(--a-brand-one-200A);
   --a-bg-brand-one-hover: var(--a-brand-one-200);
   --a-bg-brand-one: var(--a-brand-one-100);
   --a-bg-info-raised-hover: var(--a-info-200);
@@ -259,10 +330,13 @@
   --a-bg-info-strong-pressed: var(--a-info-800);
   --a-bg-info-strong-hover: var(--a-info-700);
   --a-bg-info-strong: var(--a-info-600);
-  --a-bg-info-moderate-selected: var(--a-info-700);
+  --a-bg-info-moderate-pressedA: var(--a-info-400A);
   --a-bg-info-moderate-pressed: var(--a-info-400);
+  --a-bg-info-moderate-hoverA: var(--a-info-300A);
   --a-bg-info-moderate-hover: var(--a-info-300);
+  --a-bg-info-moderateA: var(--a-info-200A);
   --a-bg-info-moderate: var(--a-info-200);
+  --a-bg-info-hoverA: var(--a-info-200A);
   --a-bg-info-hover: var(--a-info-200);
   --a-bg-info: var(--a-info-100);
   --a-bg-danger-raised-hover: var(--a-danger-200);
@@ -270,10 +344,13 @@
   --a-bg-danger-strong-pressed: var(--a-danger-800);
   --a-bg-danger-strong-hover: var(--a-danger-700);
   --a-bg-danger-strong: var(--a-danger-600);
-  --a-bg-danger-moderate-selected: var(--a-danger-700);
+  --a-bg-danger-moderate-pressedA: var(--a-danger-400A);
   --a-bg-danger-moderate-pressed: var(--a-danger-400);
+  --a-bg-danger-moderate-hoverA: var(--a-danger-300A);
   --a-bg-danger-moderate-hover: var(--a-danger-300);
+  --a-bg-danger-moderateA: var(--a-danger-200A);
   --a-bg-danger-moderate: var(--a-danger-200);
+  --a-bg-danger-hoverA: var(--a-danger-200A);
   --a-bg-danger-hover: var(--a-danger-200);
   --a-bg-danger: var(--a-danger-100);
   --a-bg-warning-raised-hover: var(--a-warning-200);
@@ -281,10 +358,13 @@
   --a-bg-warning-strong-pressed: var(--a-warning-800);
   --a-bg-warning-strong-hover: var(--a-warning-700);
   --a-bg-warning-strong: var(--a-warning-600);
-  --a-bg-warning-moderate-selected: var(--a-warning-700);
+  --a-bg-warning-moderate-pressedA: var(--a-warning-400A);
   --a-bg-warning-moderate-pressed: var(--a-warning-400);
+  --a-bg-warning-moderate-hoverA: var(--a-warning-300A);
   --a-bg-warning-moderate-hover: var(--a-warning-300);
+  --a-bg-warning-moderateA: var(--a-warning-200A);
   --a-bg-warning-moderate: var(--a-warning-200);
+  --a-bg-warning-hoverA: var(--a-warning-200A);
   --a-bg-warning-hover: var(--a-warning-200);
   --a-bg-warning: var(--a-warning-100);
   --a-bg-success-raised-hover: var(--a-success-200);
@@ -292,10 +372,13 @@
   --a-bg-success-strong-pressed: var(--a-success-800);
   --a-bg-success-strong-hover: var(--a-success-700);
   --a-bg-success-strong: var(--a-success-600);
-  --a-bg-success-moderate-selected: var(--a-success-700);
+  --a-bg-success-moderate-pressedA: var(--a-success-400A);
   --a-bg-success-moderate-pressed: var(--a-success-400);
+  --a-bg-success-moderate-hoverA: var(--a-success-300A);
   --a-bg-success-moderate-hover: var(--a-success-300);
+  --a-bg-success-moderateA: var(--a-success-200A);
   --a-bg-success-moderate: var(--a-success-200);
+  --a-bg-success-hoverA: var(--a-success-200A);
   --a-bg-success-hover: var(--a-success-200);
   --a-bg-success: var(--a-success-100);
   --a-bg-accent-raised-hover: var(--a-accent-200);
@@ -303,10 +386,13 @@
   --a-bg-accent-strong-pressed: var(--a-accent-800);
   --a-bg-accent-strong-hover: var(--a-accent-700);
   --a-bg-accent-strong: var(--a-accent-600);
-  --a-bg-accent-moderate-selected: var(--a-accent-700);
+  --a-bg-accent-moderate-pressedA: var(--a-accent-400A);
   --a-bg-accent-moderate-pressed: var(--a-accent-400);
+  --a-bg-accent-moderate-hoverA: var(--a-accent-300A);
   --a-bg-accent-moderate-hover: var(--a-accent-300);
+  --a-bg-accent-moderateA: var(--a-accent-200A);
   --a-bg-accent-moderate: var(--a-accent-200);
+  --a-bg-accent-hoverA: var(--a-accent-200A);
   --a-bg-accent-hover: var(--a-accent-200);
   --a-bg-accent: var(--a-accent-100);
   --a-bg-neutral-raised-hover: var(--a-neutral-200);
@@ -314,15 +400,22 @@
   --a-bg-neutral-strong-pressed: var(--a-neutral-800);
   --a-bg-neutral-strong-hover: var(--a-neutral-700);
   --a-bg-neutral-strong: var(--a-neutral-600);
-  --a-bg-neutral-moderate-selected: var(--a-neutral-700);
+  --a-bg-neutral-moderate-pressedA: var(--a-neutral-400A);
   --a-bg-neutral-moderate-pressed: var(--a-neutral-400);
+  --a-bg-neutral-moderate-hoverA: var(--a-neutral-300A);
   --a-bg-neutral-moderate-hover: var(--a-neutral-300);
+  --a-bg-neutral-moderateA: var(--a-neutral-200A);
   --a-bg-neutral-moderate: var(--a-neutral-200);
+  --a-bg-neutral-hoverA: var(--a-neutral-200A);
   --a-bg-neutral-hover: var(--a-neutral-200);
   --a-bg-neutral: var(--a-neutral-100);
 }
 
 .dark, .dark-theme {
+  --a-data-two-400A: #fbf50029;
+  --a-data-two-300A: #fce9001d;
+  --a-data-two-200A: #f6cf0016;
+  --a-data-two-100A: #fcbf000f;
   --a-data-two-1000: #c5d14c;
   --a-data-two-900: #a9b325;
   --a-data-two-800: #99a200;
@@ -333,6 +426,10 @@
   --a-data-two-300: #292d00;
   --a-data-two-200: #222500;
   --a-data-two-100: #1c1f00;
+  --a-data-one-400A: #fdb3ee2f;
+  --a-data-one-300A: #ff99e423;
+  --a-data-one-200A: #fa7dd31b;
+  --a-data-one-100A: #f64fb616;
   --a-data-one-1000: #cdc5d9;
   --a-data-one-900: #b2a7c3;
   --a-data-one-800: #a495b7;
@@ -343,6 +440,10 @@
   --a-data-one-300: #2f273a;
   --a-data-one-200: #272032;
   --a-data-one-100: #221a2c;
+  --a-brand-three-400A: #aaefff29;
+  --a-brand-three-300A: #abf7f71a;
+  --a-brand-three-200A: #a4f6e211;
+  --a-brand-three-100A: #8efbd20a;
   --a-brand-three-1000: #b7cbd7;
   --a-brand-three-900: #93afc0;
   --a-brand-three-800: #7f9fb3;
@@ -353,6 +454,10 @@
   --a-brand-three-300: #1e2c35;
   --a-brand-three-200: #18242c;
   --a-brand-three-100: #131e26;
+  --a-brand-two-400A: #fc83403f;
+  --a-brand-two-300A: #fe621032;
+  --a-brand-two-200A: #fb45002a;
+  --a-brand-two-100A: #fe1d0021;
   --a-brand-two-1000: #e3c2b1;
   --a-brand-two-900: #d1a08c;
   --a-brand-two-800: #c78e79;
@@ -363,6 +468,10 @@
   --a-brand-two-300: #3d241c;
   --a-brand-two-200: #351d15;
   --a-brand-two-100: #2d160e;
+  --a-brand-one-400A: #fe648144;
+  --a-brand-one-300A: #fb486438;
+  --a-brand-one-200A: #fd264b2f;
+  --a-brand-one-100A: #fa022627;
   --a-brand-one-1000: #e1c0cc;
   --a-brand-one-900: #cf9eb1;
   --a-brand-one-800: #c58aa2;
@@ -373,6 +482,10 @@
   --a-brand-one-300: #42202e;
   --a-brand-one-200: #3a1827;
   --a-brand-one-100: #321220;
+  --a-info-400A: #aaefff29;
+  --a-info-300A: #abf7f71a;
+  --a-info-200A: #a4f6e211;
+  --a-info-100A: #8efbd20a;
   --a-info-1000: #b7cbd7;
   --a-info-900: #93afc0;
   --a-info-800: #7f9fb3;
@@ -383,6 +496,10 @@
   --a-info-300: #1e2c35;
   --a-info-200: #18242c;
   --a-info-100: #131e26;
+  --a-danger-400A: #ff362556;
+  --a-danger-300A: #ff150348;
+  --a-danger-200A: #fc00003f;
+  --a-danger-100A: #ff000036;
   --a-danger-1000: #f6b7cd;
   --a-danger-900: #f28ea2;
   --a-danger-800: #ee7685;
@@ -393,6 +510,10 @@
   --a-danger-300: #521517;
   --a-danger-200: #490b10;
   --a-danger-100: #410409;
+  --a-warning-400A: #fd60084b;
+  --a-warning-300A: #fc3f003d;
+  --a-warning-200A: #fe1f0033;
+  --a-warning-100A: #fc00002c;
   --a-warning-1000: #f5bf6d;
   --a-warning-900: #ed974b;
   --a-warning-800: #e78040;
@@ -403,6 +524,10 @@
   --a-warning-300: #471f0c;
   --a-warning-200: #3e1704;
   --a-warning-100: #371100;
+  --a-success-400A: #48fd3c2c;
+  --a-success-300A: #00fc001f;
+  --a-success-200A: #00fd0016;
+  --a-success-100A: #00f50010;
   --a-success-1000: #a4d4ad;
   --a-success-900: #78ba87;
   --a-success-800: #5eab72;
@@ -413,6 +538,10 @@
   --a-success-300: #0b3118;
   --a-success-200: #032911;
   --a-success-100: #00230b;
+  --a-accent-400A: #70b3fe37;
+  --a-accent-300A: #5dacfe27;
+  --a-accent-200A: #50a3f91b;
+  --a-accent-100A: #2e95ff10;
   --a-accent-1000: #b0caf1;
   --a-accent-900: #84aee6;
   --a-accent-800: #6d9ddd;
@@ -423,6 +552,10 @@
   --a-accent-300: #1a2c41;
   --a-accent-200: #152436;
   --a-accent-100: #101d2d;
+  --a-neutral-400A: #e0edfe27;
+  --a-neutral-300A: #d7defa1c;
+  --a-neutral-200A: #cad1f613;
+  --a-neutral-100A: #c8cff00b;
   --a-neutral-000: black;
   --a-neutral-1000: #c4c9d0;
   --a-neutral-900: #a5acb6;
@@ -436,42 +569,55 @@
   --a-neutral-100: #161d28;
   --a-bg-overlay: #0214317d;
   --a-bg-sunken: #07090d;
+  --a-bg-input: #0e151f80;
   --a-bg-default: #0e151f;
   --a-border-focus: var(--a-accent-700);
   --a-border-strong: var(--a-neutral-600);
+  --a-border-subtleA: var(--a-neutral-400A);
   --a-border-subtle: var(--a-neutral-400);
   --a-border-default: var(--a-neutral-500);
   --a-border-data-two-strong: var(--a-data-two-600);
+  --a-border-data-two-subtleA: var(--a-data-two-400A);
   --a-border-data-two-subtle: var(--a-data-two-400);
   --a-border-data-two: var(--a-data-two-500);
   --a-border-data-one-strong: var(--a-data-one-600);
+  --a-border-data-one-subtleA: var(--a-data-one-400A);
   --a-border-data-one-subtle: var(--a-data-one-400);
   --a-border-data-one: var(--a-data-one-500);
   --a-border-brand-three-strong: var(--a-brand-three-600);
+  --a-border-brand-three-subtleA: var(--a-brand-three-400A);
   --a-border-brand-three-subtle: var(--a-brand-three-400);
   --a-border-brand-three: var(--a-brand-three-500);
   --a-border-brand-two-strong: var(--a-brand-two-600);
+  --a-border-brand-two-subtleA: var(--a-brand-two-400A);
   --a-border-brand-two-subtle: var(--a-brand-two-400);
   --a-border-brand-two: var(--a-brand-two-500);
   --a-border-brand-one-strong: var(--a-brand-one-600);
+  --a-border-brand-one-subtleA: var(--a-brand-one-400A);
   --a-border-brand-one-subtle: var(--a-brand-one-400);
   --a-border-brand-one: var(--a-brand-one-500);
   --a-border-info-strong: var(--a-info-600);
+  --a-border-info-subtleA: var(--a-info-400A);
   --a-border-info-subtle: var(--a-info-400);
   --a-border-info: var(--a-info-500);
   --a-border-danger-strong: var(--a-danger-600);
+  --a-border-danger-subtleA: var(--a-danger-400A);
   --a-border-danger-subtle: var(--a-danger-400);
   --a-border-danger: var(--a-danger-500);
   --a-border-warning-strong: var(--a-warning-600);
+  --a-border-warning-subtleA: var(--a-warning-400A);
   --a-border-warning-subtle: var(--a-warning-400);
   --a-border-warning: var(--a-warning-500);
   --a-border-success-strong: var(--a-success-600);
+  --a-border-success-subtleA: var(--a-success-400A);
   --a-border-success-subtle: var(--a-success-400);
   --a-border-success: var(--a-success-500);
   --a-border-accent-strong: var(--a-accent-600);
+  --a-border-accent-subtleA: var(--a-accent-400A);
   --a-border-accent-subtle: var(--a-accent-400);
   --a-border-accent: var(--a-accent-500);
   --a-border-neutral-strong: var(--a-neutral-600);
+  --a-border-neutral-subtleA: var(--a-neutral-400A);
   --a-border-neutral-subtle: var(--a-neutral-400);
   --a-border-neutral: var(--a-neutral-500);
   --a-text-icon: var(--a-neutral-600);
@@ -522,131 +668,196 @@
   --a-text-neutral-strong: var(--a-neutral-900);
   --a-text-neutral: var(--a-neutral-700);
   --a-bg-raised: var(--a-neutral-200);
-  --a-bg-input: var(--a-neutral-000);
-  --a-bg-data-two-raised-hover: var(--a-data-two-200);
-  --a-bg-data-two-raised: var(--a-data-two-100);
+  --a-bg-data-two-raised-hover: var(--a-data-two-300);
+  --a-bg-data-two-raised: var(--a-data-two-200);
   --a-bg-data-two-strong-pressed: var(--a-data-two-800);
   --a-bg-data-two-strong-hover: var(--a-data-two-700);
   --a-bg-data-two-strong: var(--a-data-two-600);
-  --a-bg-data-two-moderate-selected: var(--a-data-two-700);
+  --a-bg-data-two-moderate-pressedA: var(--a-data-two-400A);
   --a-bg-data-two-moderate-pressed: var(--a-data-two-400);
+  --a-bg-data-two-moderate-hoverA: var(--a-data-two-300A);
   --a-bg-data-two-moderate-hover: var(--a-data-two-300);
+  --a-bg-data-two-moderateA: var(--a-data-two-200A);
   --a-bg-data-two-moderate: var(--a-data-two-200);
+  --a-bg-data-two-hoverA: var(--a-data-two-200A);
   --a-bg-data-two-hover: var(--a-data-two-200);
   --a-bg-data-two: var(--a-data-two-100);
-  --a-bg-data-one-raised-hover: var(--a-data-one-200);
-  --a-bg-data-one-raised: var(--a-data-one-100);
+  --a-bg-data-one-raised-hover: var(--a-data-one-300);
+  --a-bg-data-one-raised: var(--a-data-one-200);
   --a-bg-data-one-strong-pressed: var(--a-data-one-800);
   --a-bg-data-one-strong-hover: var(--a-data-one-700);
   --a-bg-data-one-strong: var(--a-data-one-600);
-  --a-bg-data-one-moderate-selected: var(--a-data-one-700);
+  --a-bg-data-one-moderate-pressedA: var(--a-data-one-400A);
   --a-bg-data-one-moderate-pressed: var(--a-data-one-400);
+  --a-bg-data-one-moderate-hoverA: var(--a-data-one-300A);
   --a-bg-data-one-moderate-hover: var(--a-data-one-300);
+  --a-bg-data-one-moderateA: var(--a-data-one-200A);
   --a-bg-data-one-moderate: var(--a-data-one-200);
+  --a-bg-data-one-hoverA: var(--a-data-one-200A);
   --a-bg-data-one-hover: var(--a-data-one-200);
   --a-bg-data-one: var(--a-data-one-100);
-  --a-bg-brand-three-raised-hover: var(--a-brand-three-200);
-  --a-bg-brand-three-raised: var(--a-brand-three-100);
+  --a-bg-brand-three-raised-hover: var(--a-brand-three-300);
+  --a-bg-brand-three-raised: var(--a-brand-three-200);
   --a-bg-brand-three-strong-pressed: var(--a-brand-three-800);
   --a-bg-brand-three-strong-hover: var(--a-brand-three-700);
   --a-bg-brand-three-strong: var(--a-brand-three-600);
-  --a-bg-brand-three-moderate-selected: var(--a-brand-three-700);
+  --a-bg-brand-three-moderate-pressedA: var(--a-brand-three-400A);
   --a-bg-brand-three-moderate-pressed: var(--a-brand-three-400);
+  --a-bg-brand-three-moderate-hoverA: var(--a-brand-three-300A);
   --a-bg-brand-three-moderate-hover: var(--a-brand-three-300);
+  --a-bg-brand-three-moderateA: var(--a-brand-three-200A);
   --a-bg-brand-three-moderate: var(--a-brand-three-200);
+  --a-bg-brand-three-hoverA: var(--a-brand-three-200A);
   --a-bg-brand-three-hover: var(--a-brand-three-200);
   --a-bg-brand-three: var(--a-brand-three-100);
-  --a-bg-brand-two-raised-hover: var(--a-brand-two-200);
-  --a-bg-brand-two-raised: var(--a-brand-two-100);
+  --a-bg-brand-two-raised-hover: var(--a-brand-two-300);
+  --a-bg-brand-two-raised: var(--a-brand-two-200);
   --a-bg-brand-two-strong-pressed: var(--a-brand-two-800);
   --a-bg-brand-two-strong-hover: var(--a-brand-two-700);
   --a-bg-brand-two-strong: var(--a-brand-two-600);
-  --a-bg-brand-two-moderate-selected: var(--a-brand-two-700);
+  --a-bg-brand-two-moderate-pressedA: var(--a-brand-two-400A);
   --a-bg-brand-two-moderate-pressed: var(--a-brand-two-400);
+  --a-bg-brand-two-moderate-hoverA: var(--a-brand-two-300A);
   --a-bg-brand-two-moderate-hover: var(--a-brand-two-300);
+  --a-bg-brand-two-moderateA: var(--a-brand-two-200A);
   --a-bg-brand-two-moderate: var(--a-brand-two-200);
+  --a-bg-brand-two-hoverA: var(--a-brand-two-200A);
   --a-bg-brand-two-hover: var(--a-brand-two-200);
   --a-bg-brand-two: var(--a-brand-two-100);
-  --a-bg-brand-one-raised-hover: var(--a-brand-one-200);
-  --a-bg-brand-one-raised: var(--a-brand-one-100);
+  --a-bg-brand-one-raised-hover: var(--a-brand-one-300);
+  --a-bg-brand-one-raised: var(--a-brand-one-200);
   --a-bg-brand-one-strong-pressed: var(--a-brand-one-800);
   --a-bg-brand-one-strong-hover: var(--a-brand-one-700);
   --a-bg-brand-one-strong: var(--a-brand-one-600);
-  --a-bg-brand-one-moderate-selected: var(--a-brand-one-700);
+  --a-bg-brand-one-moderate-pressedA: var(--a-brand-one-400A);
   --a-bg-brand-one-moderate-pressed: var(--a-brand-one-400);
+  --a-bg-brand-one-moderate-hoverA: var(--a-brand-one-300A);
   --a-bg-brand-one-moderate-hover: var(--a-brand-one-300);
+  --a-bg-brand-one-moderateA: var(--a-brand-one-200A);
   --a-bg-brand-one-moderate: var(--a-brand-one-200);
+  --a-bg-brand-one-hoverA: var(--a-brand-one-200A);
   --a-bg-brand-one-hover: var(--a-brand-one-200);
   --a-bg-brand-one: var(--a-brand-one-100);
-  --a-bg-info-raised-hover: var(--a-info-200);
-  --a-bg-info-raised: var(--a-info-100);
+  --a-bg-info-raised-hover: var(--a-info-300);
+  --a-bg-info-raised: var(--a-info-200);
   --a-bg-info-strong-pressed: var(--a-info-800);
   --a-bg-info-strong-hover: var(--a-info-700);
   --a-bg-info-strong: var(--a-info-600);
-  --a-bg-info-moderate-selected: var(--a-info-700);
+  --a-bg-info-moderate-pressedA: var(--a-info-400A);
   --a-bg-info-moderate-pressed: var(--a-info-400);
+  --a-bg-info-moderate-hoverA: var(--a-info-300A);
   --a-bg-info-moderate-hover: var(--a-info-300);
+  --a-bg-info-moderateA: var(--a-info-200A);
   --a-bg-info-moderate: var(--a-info-200);
+  --a-bg-info-hoverA: var(--a-info-200A);
   --a-bg-info-hover: var(--a-info-200);
   --a-bg-info: var(--a-info-100);
-  --a-bg-danger-raised-hover: var(--a-danger-200);
-  --a-bg-danger-raised: var(--a-danger-100);
+  --a-bg-danger-raised-hover: var(--a-danger-300);
+  --a-bg-danger-raised: var(--a-danger-200);
   --a-bg-danger-strong-pressed: var(--a-danger-800);
   --a-bg-danger-strong-hover: var(--a-danger-700);
   --a-bg-danger-strong: var(--a-danger-600);
-  --a-bg-danger-moderate-selected: var(--a-danger-700);
+  --a-bg-danger-moderate-pressedA: var(--a-danger-400A);
   --a-bg-danger-moderate-pressed: var(--a-danger-400);
+  --a-bg-danger-moderate-hoverA: var(--a-danger-300A);
   --a-bg-danger-moderate-hover: var(--a-danger-300);
+  --a-bg-danger-moderateA: var(--a-danger-200A);
   --a-bg-danger-moderate: var(--a-danger-200);
+  --a-bg-danger-hoverA: var(--a-danger-200A);
   --a-bg-danger-hover: var(--a-danger-200);
   --a-bg-danger: var(--a-danger-100);
-  --a-bg-warning-raised-hover: var(--a-warning-200);
-  --a-bg-warning-raised: var(--a-warning-100);
+  --a-bg-warning-raised-hover: var(--a-warning-300);
+  --a-bg-warning-raised: var(--a-warning-200);
   --a-bg-warning-strong-pressed: var(--a-warning-800);
   --a-bg-warning-strong-hover: var(--a-warning-700);
   --a-bg-warning-strong: var(--a-warning-600);
-  --a-bg-warning-moderate-selected: var(--a-warning-700);
+  --a-bg-warning-moderate-pressedA: var(--a-warning-400A);
   --a-bg-warning-moderate-pressed: var(--a-warning-400);
+  --a-bg-warning-moderate-hoverA: var(--a-warning-300A);
   --a-bg-warning-moderate-hover: var(--a-warning-300);
+  --a-bg-warning-moderateA: var(--a-warning-200A);
   --a-bg-warning-moderate: var(--a-warning-200);
+  --a-bg-warning-hoverA: var(--a-warning-200A);
   --a-bg-warning-hover: var(--a-warning-200);
   --a-bg-warning: var(--a-warning-100);
-  --a-bg-success-raised-hover: var(--a-success-200);
-  --a-bg-success-raised: var(--a-success-100);
+  --a-bg-success-raised-hover: var(--a-success-300);
+  --a-bg-success-raised: var(--a-success-200);
   --a-bg-success-strong-pressed: var(--a-success-800);
   --a-bg-success-strong-hover: var(--a-success-700);
   --a-bg-success-strong: var(--a-success-600);
-  --a-bg-success-moderate-selected: var(--a-success-700);
+  --a-bg-success-moderate-pressedA: var(--a-success-400A);
   --a-bg-success-moderate-pressed: var(--a-success-400);
+  --a-bg-success-moderate-hoverA: var(--a-success-300A);
   --a-bg-success-moderate-hover: var(--a-success-300);
+  --a-bg-success-moderateA: var(--a-success-200A);
   --a-bg-success-moderate: var(--a-success-200);
+  --a-bg-success-hoverA: var(--a-success-200A);
   --a-bg-success-hover: var(--a-success-200);
   --a-bg-success: var(--a-success-100);
-  --a-bg-accent-raised-hover: var(--a-accent-200);
-  --a-bg-accent-raised: var(--a-accent-100);
+  --a-bg-accent-raised-hover: var(--a-accent-300);
+  --a-bg-accent-raised: var(--a-accent-200);
   --a-bg-accent-strong-pressed: var(--a-accent-800);
   --a-bg-accent-strong-hover: var(--a-accent-700);
   --a-bg-accent-strong: var(--a-accent-600);
-  --a-bg-accent-moderate-selected: var(--a-accent-700);
+  --a-bg-accent-moderate-pressedA: var(--a-accent-400A);
   --a-bg-accent-moderate-pressed: var(--a-accent-400);
+  --a-bg-accent-moderate-hoverA: var(--a-accent-300A);
   --a-bg-accent-moderate-hover: var(--a-accent-300);
+  --a-bg-accent-moderateA: var(--a-accent-200A);
   --a-bg-accent-moderate: var(--a-accent-200);
+  --a-bg-accent-hoverA: var(--a-accent-200A);
   --a-bg-accent-hover: var(--a-accent-200);
   --a-bg-accent: var(--a-accent-100);
-  --a-bg-neutral-raised-hover: var(--a-neutral-200);
-  --a-bg-neutral-raised: var(--a-neutral-100);
+  --a-bg-neutral-raised-hover: var(--a-neutral-300);
+  --a-bg-neutral-raised: var(--a-neutral-200);
   --a-bg-neutral-strong-pressed: var(--a-neutral-800);
   --a-bg-neutral-strong-hover: var(--a-neutral-700);
   --a-bg-neutral-strong: var(--a-neutral-600);
-  --a-bg-neutral-moderate-selected: var(--a-neutral-700);
+  --a-bg-neutral-moderate-pressedA: var(--a-neutral-400A);
   --a-bg-neutral-moderate-pressed: var(--a-neutral-400);
+  --a-bg-neutral-moderate-hoverA: var(--a-neutral-300A);
   --a-bg-neutral-moderate-hover: var(--a-neutral-300);
+  --a-bg-neutral-moderateA: var(--a-neutral-200A);
   --a-bg-neutral-moderate: var(--a-neutral-200);
+  --a-bg-neutral-hoverA: var(--a-neutral-200A);
   --a-bg-neutral-hover: var(--a-neutral-200);
   --a-bg-neutral: var(--a-neutral-100);
 }
 
 :root, :host {
+  --a-font-weight-regular: 400;
+  --a-font-weight-bold: 600;
+  --a-font-size-small: .875rem;
+  --a-font-size-medium: 1rem;
+  --a-font-size-large: 1.125rem;
+  --a-font-size-xlarge: 1.25rem;
+  --a-font-size-heading-xsmall: 1.125rem;
+  --a-font-size-heading-small: 1.25rem;
+  --a-font-size-heading-medium: 1.5rem;
+  --a-font-size-heading-large: 1.75rem;
+  --a-font-size-heading-xlarge: 2rem;
+  --a-font-size-heading-2xlarge: 2.5rem;
+  --a-font-line-height-medium: 1.25rem;
+  --a-font-line-height-large: 1.5rem;
+  --a-font-line-height-xlarge: 1.75rem;
+  --a-font-line-height-heading-xsmall: 1.5rem;
+  --a-font-line-height-heading-small: 1.75rem;
+  --a-font-line-height-heading-medium: 2rem;
+  --a-font-line-height-heading-large: 2.25rem;
+  --a-font-line-height-heading-xlarge: 2.5rem;
+  --a-font-line-height-heading-2xlarge: 3.25rem;
+  --a-font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
+  --a-breakpoint-2xl-down: 1439px;
+  --a-breakpoint-2xl: 1440px;
+  --a-breakpoint-xl-down: 1279px;
+  --a-breakpoint-xl: 1280px;
+  --a-breakpoint-lg-down: 1023px;
+  --a-breakpoint-lg: 1024px;
+  --a-breakpoint-md-down: 767px;
+  --a-breakpoint-md: 768px;
+  --a-breakpoint-sm-down: 479px;
+  --a-breakpoint-sm: 480px;
+  --a-breakpoint-xs: 0;
   --a-border-radius-full: 9999px;
   --a-border-radius-xlarge: 12px;
   --a-border-radius-large: 8px;