@incodetech/web 2.0.0-alpha.8 → 2.0.0-rc.0

package/dist/themes/light.css

@@ -6,10 +6,15 @@
   --primitive-color-gray-0-80: rgba(255, 255, 255, 0.8);
   --primitive-color-gray-50: #fcfcfd;
   --primitive-color-gray-100: #ebecef;
+  --primitive-color-gray-150: #d9dae1;
   --primitive-color-gray-200: #c6c8d2;
+  --primitive-color-gray-250: #b5b8c5;
   --primitive-color-gray-300: #a3a8b8;
+  --primitive-color-gray-400: #82879a;
   --primitive-color-gray-500: #60667c;
+  --primitive-color-gray-600: #4d5264;
   --primitive-color-gray-700: #3a3e4b;
+  --primitive-color-gray-750: #30333e;
   --primitive-color-gray-800: #262831;
   --primitive-color-gray-900: #14151a;
   --primitive-color-gray-900-80: rgba(20, 21, 26, 0.8);
@@ -19,6 +24,7 @@
   /* Color / Brand */
 
   --primitive-color-brand-50: #e5f0ff;
+  --primitive-color-brand-100: #bfdfff;
   --primitive-color-brand-200: #99ceff;
   --primitive-color-brand-300: #66a6ff;
   --primitive-color-brand-400: #3388ff;
@@ -31,27 +37,36 @@
   --primitive-color-brand-secondary-50: #f2e2fe;
   --primitive-color-brand-secondary-500: #820ad1;
 
+  /* Color / Focus */
+
+  --primitive-color-focus-400: #0099ff;
+  --primitive-color-focus-500: #006aff;
+
   /* Color / Positive */
 
   --primitive-color-positive-50: #e4fbf0;
-  --primitive-color-positive-600: #189f60;
-  --primitive-color-positive-800: #0c5030;
+  --primitive-color-positive-400: #45b380;
+  --primitive-color-positive-500: #189f60;
+  --primitive-color-positive-750: #0c5030;
+  --primitive-color-positive-950: #03190e;
 
   /* Color / Warning */
 
   --primitive-color-warning-50: #fff7eb;
   --primitive-color-warning-400: #ffb647;
   --primitive-color-warning-500: #ff9900;
-  --primitive-color-warning-950: #523100;
+  --primitive-color-warning-750: #523100;
+  --primitive-color-warning-950: #271400;
 
   /* Color / Negative */
 
   --primitive-color-negative-50: #fff0f0;
-  --primitive-color-negative-500: #ff5a5f;
-  --primitive-color-negative-600: #e71111;
+  --primitive-color-negative-400: #ff5a5f;
+  --primitive-color-negative-500: #e71111;
   --primitive-color-negative-950: #240001;
 
   /* Typography / Family */
+
   --primitive-typography-family-rethink-sans: 'Rethink Sans';
   --primitive-typography-family-dm-sans: 'DM Sans';
 
@@ -70,7 +85,6 @@
 
   /* Typography / Weight */
 
-  --primitive-typography-weight-thin: 300;
   --primitive-typography-weight-regular: 400;
   --primitive-typography-weight-medium: 500;
   --primitive-typography-weight-semibold: 600;
@@ -80,14 +94,112 @@
   /* Typography / Letter Spacing */
 
   --primitive-typography-letter-spacing-0: 0px;
+  --primitive-typography-letter-spacing-2: 2px;
   --primitive-typography-letter-spacing-minus-0-5: -0.5px;
   --primitive-typography-letter-spacing-minus-1: -1px;
   --primitive-typography-letter-spacing-minus-1-5: -1.5px;
 
+  /* Typography / Line Height */
+
+  --primitive-typography-line-height-100: 1;
+  --primitive-typography-line-height-105: 1.05;
+  --primitive-typography-line-height-110: 1.1;
+  --primitive-typography-line-height-115: 1.15;
+  --primitive-typography-line-height-120: 1.2;
+  --primitive-typography-line-height-125: 1.25;
+  --primitive-typography-line-height-130: 1.3;
+
+  /* Typography / Paragraph Spacing */
+
+  /* 100% */
+  --primitive-typography-paragraph-spacing-100-12: 9px;
+  --primitive-typography-paragraph-spacing-100-14: 10.5px;
+  --primitive-typography-paragraph-spacing-100-16: 12px;
+  --primitive-typography-paragraph-spacing-100-18: 13.5px;
+  --primitive-typography-paragraph-spacing-100-20: 15px;
+  --primitive-typography-paragraph-spacing-100-24: 18px;
+  --primitive-typography-paragraph-spacing-100-32: 24px;
+  --primitive-typography-paragraph-spacing-100-40: 30px;
+  --primitive-typography-paragraph-spacing-100-48: 36px;
+  --primitive-typography-paragraph-spacing-100-80: 60px;
+
+  /* 105% */
+  --primitive-typography-paragraph-spacing-105-12: 9.45px;
+  --primitive-typography-paragraph-spacing-105-14: 11px;
+  --primitive-typography-paragraph-spacing-105-16: 12.6px;
+  --primitive-typography-paragraph-spacing-105-18: 14.2px;
+  --primitive-typography-paragraph-spacing-105-20: 15.8px;
+  --primitive-typography-paragraph-spacing-105-24: 18.9px;
+  --primitive-typography-paragraph-spacing-105-32: 25.2px;
+  --primitive-typography-paragraph-spacing-105-40: 31.5px;
+  --primitive-typography-paragraph-spacing-105-48: 37.8px;
+  --primitive-typography-paragraph-spacing-105-80: 63px;
+
+  /* 110% */
+  --primitive-typography-paragraph-spacing-110-12: 9.9px;
+  --primitive-typography-paragraph-spacing-110-14: 11.6px;
+  --primitive-typography-paragraph-spacing-110-16: 13.2px;
+  --primitive-typography-paragraph-spacing-110-18: 14.9px;
+  --primitive-typography-paragraph-spacing-110-20: 16.5px;
+  --primitive-typography-paragraph-spacing-110-24: 19.8px;
+  --primitive-typography-paragraph-spacing-110-32: 26.4px;
+  --primitive-typography-paragraph-spacing-110-40: 33px;
+  --primitive-typography-paragraph-spacing-110-48: 39.6px;
+  --primitive-typography-paragraph-spacing-110-80: 66px;
+
+  /* 115% */
+  --primitive-typography-paragraph-spacing-115-12: 10.4px;
+  --primitive-typography-paragraph-spacing-115-14: 12.1px;
+  --primitive-typography-paragraph-spacing-115-16: 13.8px;
+  --primitive-typography-paragraph-spacing-115-18: 15.5px;
+  --primitive-typography-paragraph-spacing-115-20: 17.3px;
+  --primitive-typography-paragraph-spacing-115-24: 20.7px;
+  --primitive-typography-paragraph-spacing-115-32: 27.6px;
+  --primitive-typography-paragraph-spacing-115-40: 34.5px;
+  --primitive-typography-paragraph-spacing-115-48: 41.4px;
+  --primitive-typography-paragraph-spacing-115-80: 69px;
+
+  /* 120% */
+  --primitive-typography-paragraph-spacing-120-12: 10.8px;
+  --primitive-typography-paragraph-spacing-120-14: 12.6px;
+  --primitive-typography-paragraph-spacing-120-16: 14.4px;
+  --primitive-typography-paragraph-spacing-120-18: 16.2px;
+  --primitive-typography-paragraph-spacing-120-20: 18px;
+  --primitive-typography-paragraph-spacing-120-24: 21.6px;
+  --primitive-typography-paragraph-spacing-120-32: 28.8px;
+  --primitive-typography-paragraph-spacing-120-40: 36px;
+  --primitive-typography-paragraph-spacing-120-48: 43.2px;
+  --primitive-typography-paragraph-spacing-120-80: 72px;
+
+  /* 125% */
+  --primitive-typography-paragraph-spacing-125-12: 11.3px;
+  --primitive-typography-paragraph-spacing-125-14: 13.1px;
+  --primitive-typography-paragraph-spacing-125-16: 15px;
+  --primitive-typography-paragraph-spacing-125-18: 16.9px;
+  --primitive-typography-paragraph-spacing-125-20: 18.8px;
+  --primitive-typography-paragraph-spacing-125-24: 22.5px;
+  --primitive-typography-paragraph-spacing-125-32: 30px;
+  --primitive-typography-paragraph-spacing-125-40: 37.5px;
+  --primitive-typography-paragraph-spacing-125-48: 45px;
+  --primitive-typography-paragraph-spacing-125-80: 75px;
+
+  /* 130% */
+  --primitive-typography-paragraph-spacing-130-12: 11.7px;
+  --primitive-typography-paragraph-spacing-130-14: 13.7px;
+  --primitive-typography-paragraph-spacing-130-16: 15.6px;
+  --primitive-typography-paragraph-spacing-130-18: 17.6px;
+  --primitive-typography-paragraph-spacing-130-20: 19.5px;
+  --primitive-typography-paragraph-spacing-130-24: 23.4px;
+  --primitive-typography-paragraph-spacing-130-32: 31.2px;
+  --primitive-typography-paragraph-spacing-130-40: 39px;
+  --primitive-typography-paragraph-spacing-130-48: 46.8px;
+  --primitive-typography-paragraph-spacing-130-80: 78px;
+
   /* Border / Width */
 
   --primitive-border-width-0: 0px;
   --primitive-border-width-1: 1px;
+  --primitive-border-width-1-5: 1.5px;
   --primitive-border-width-2: 2px;
   --primitive-border-width-4: 4px;
 
@@ -124,16 +236,16 @@
   --primitive-scale-104: 104px;
   --primitive-scale-120: 120px;
   --primitive-scale-128: 128px;
-  --primitive-scale-160: 160px;
   --primitive-scale-200: 200px;
 }
 :root,
 :host {
   /* Border / Width */
 
-  --border-none: var(--primitive-border-width-0);
-  --border-regular: var(--primitive-border-width-1);
-  --border-bold: var(--primitive-border-width-2);
+  --border-width-none: var(--primitive-border-width-0);
+  --border-width-regular: var(--primitive-border-width-1);
+  --border-width-medium: var(--primitive-border-width-1-5);
+  --border-width-bold: var(--primitive-border-width-2);
 
   /* Border / Radius */
 
@@ -164,7 +276,6 @@
   --spacing-96: var(--primitive-scale-96);
   --spacing-104: var(--primitive-scale-104);
   --spacing-120: var(--primitive-scale-120);
-  --spacing-160: var(--primitive-scale-160);
   --spacing-200: var(--primitive-scale-200);
 
   /* Icon / Size */
@@ -177,54 +288,484 @@
   --icon-size-x-large: var(--primitive-scale-48);
   --icon-size-xx-large: var(--primitive-scale-64);
   --icon-size-xxx-large: var(--primitive-scale-80);
+
+  /* Typography */
+
+  /* Display */
+  --typography-display-family: var(--primitive-typography-family-rethink-sans);
+
+  /* Display/D1 */
+  --typography-display-d1-size: var(--primitive-typography-size-80);
+  --typography-display-d1-weight: var(--primitive-typography-weight-extrabold);
+  --typography-display-d1-line-height: var(
+    --primitive-typography-line-height-105
+  );
+  --typography-display-d1-letter-spacing: var(
+    --primitive-typography-letter-spacing-minus-1-5
+  );
+  --typography-display-d1-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-105-80
+  );
+
+  /* Display/D2 */
+  --typography-display-d2-size: var(--primitive-typography-size-48);
+  --typography-display-d2-weight: var(--primitive-typography-weight-extrabold);
+  --typography-display-d2-line-height: var(
+    --primitive-typography-line-height-105
+  );
+  --typography-display-d2-letter-spacing: var(
+    --primitive-typography-letter-spacing-minus-0-5
+  );
+  --typography-display-d2-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-105-48
+  );
+
+  /* Headline */
+  --typography-headline-family: var(--primitive-typography-family-dm-sans);
+
+  /* Headline/H1 */
+  --typography-headline-h1-size: var(--primitive-typography-size-32);
+  --typography-headline-h1-weight: var(--primitive-typography-weight-bold);
+  --typography-headline-h1-line-height: var(
+    --primitive-typography-line-height-115
+  );
+  --typography-headline-h1-letter-spacing: var(
+    --primitive-typography-letter-spacing-minus-1-5
+  );
+  --typography-headline-h1-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-115-32
+  );
+
+  /* Headline/H2 */
+  --typography-headline-h2-size: var(--primitive-typography-size-24);
+  --typography-headline-h2-weight: var(--primitive-typography-weight-bold);
+  --typography-headline-h2-line-height: var(
+    --primitive-typography-line-height-115
+  );
+  --typography-headline-h2-letter-spacing: var(
+    --primitive-typography-letter-spacing-minus-1
+  );
+  --typography-headline-h2-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-115-24
+  );
+
+  /* Headline/H3 */
+  --typography-headline-h3-size: var(--primitive-typography-size-20);
+  --typography-headline-h3-weight: var(--primitive-typography-weight-bold);
+  --typography-headline-h3-line-height: var(
+    --primitive-typography-line-height-115
+  );
+  --typography-headline-h3-letter-spacing: var(
+    --primitive-typography-letter-spacing-minus-0-5
+  );
+  --typography-headline-h3-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-115-20
+  );
+
+  /* Headline/H4 */
+  --typography-headline-h4-size: var(--primitive-typography-size-18);
+  --typography-headline-h4-weight: var(--primitive-typography-weight-medium);
+  --typography-headline-h4-line-height: var(
+    --primitive-typography-line-height-115
+  );
+  --typography-headline-h4-letter-spacing: var(
+    --primitive-typography-letter-spacing-minus-0-5
+  );
+  --typography-headline-h4-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-115-18
+  );
+
+  /* Headline/H5 */
+  --typography-headline-h5-size: var(--primitive-typography-size-16);
+  --typography-headline-h5-weight: var(--primitive-typography-weight-medium);
+  --typography-headline-h5-line-height: var(
+    --primitive-typography-line-height-115
+  );
+  --typography-headline-h5-letter-spacing: var(
+    --primitive-typography-letter-spacing-minus-0-5
+  );
+  --typography-headline-h5-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-115-16
+  );
+
+  /* Body */
+  --typography-body-family: var(--primitive-typography-family-dm-sans);
+
+  /* Body/S Regular */
+  --typography-body-s-regular-size: var(--primitive-typography-size-12);
+  --typography-body-s-regular-weight: var(
+    --primitive-typography-weight-regular
+  );
+  --typography-body-s-regular-line-height: var(
+    --primitive-typography-line-height-130
+  );
+  --typography-body-s-regular-letter-spacing: var(
+    --primitive-typography-letter-spacing-0
+  );
+  --typography-body-s-regular-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-130-12
+  );
+
+  /* Body/S Body */
+  --typography-body-s-bold-size: var(--primitive-typography-size-12);
+  --typography-body-s-bold-weight: var(--primitive-typography-weight-bold);
+  --typography-body-s-bold-line-height: var(
+    --primitive-typography-line-height-130
+  );
+  --typography-body-s-bold-letter-spacing: var(
+    --primitive-typography-letter-spacing-0
+  );
+  --typography-body-s-bold-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-130-12
+  );
+
+  /* Body/M Regular */
+  --typography-body-m-regular-size: var(--primitive-typography-size-14);
+  --typography-body-m-regular-weight: var(
+    --primitive-typography-weight-regular
+  );
+  --typography-body-m-regular-line-height: var(
+    --primitive-typography-line-height-120
+  );
+  --typography-body-m-regular-letter-spacing: var(
+    --primitive-typography-letter-spacing-0
+  );
+  --typography-body-m-regular-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-120-14
+  );
+
+  /* Body/M Bold */
+  --typography-body-m-bold-size: var(--primitive-typography-size-14);
+  --typography-body-m-bold-weight: var(--primitive-typography-weight-bold);
+  --typography-body-m-bold-line-height: var(
+    --primitive-typography-line-height-130
+  );
+  --typography-body-m-bold-letter-spacing: var(
+    --primitive-typography-letter-spacing-0
+  );
+  --typography-body-m-bold-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-130-14
+  );
+
+  /* Link */
+  --typography-link-family: var(--primitive-typography-family-dm-sans);
+
+  /* Link/M Bold */
+  --typography-link-m-bold-size: var(--primitive-typography-size-14);
+  --typography-link-m-bold-weight: var(--primitive-typography-weight-bold);
+  --typography-link-m-bold-line-height: var(
+    --primitive-typography-line-height-125
+  );
+  --typography-link-m-bold-letter-spacing: var(
+    --primitive-typography-letter-spacing-0
+  );
+  --typography-link-m-bold-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-125-14
+  );
+
+  /* Link/M Extrabold */
+  --typography-link-m-extrabold-size: var(--primitive-typography-size-14);
+  --typography-link-m-extrabold-weight: var(
+    --primitive-typography-weight-extrabold
+  );
+  --typography-link-m-extrabold-line-height: var(
+    --primitive-typography-line-height-125
+  );
+  --typography-link-m-extrabold-letter-spacing: var(
+    --primitive-typography-letter-spacing-0
+  );
+  --typography-link-m-extrabold-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-125-14
+  );
+
+  /* Link/S Bold */
+  --typography-link-s-bold-size: var(--primitive-typography-size-12);
+  --typography-link-s-bold-weight: var(--primitive-typography-weight-bold);
+  --typography-link-s-bold-line-height: var(
+    --primitive-typography-line-height-130
+  );
+  --typography-link-s-bold-letter-spacing: var(
+    --primitive-typography-letter-spacing-minus-0-5
+  );
+  --typography-link-s-bold-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-130-12
+  );
+
+  /* Link/S Medium */
+  --typography-link-s-medium-size: var(--primitive-typography-size-12);
+  --typography-link-s-medium-weight: var(--primitive-typography-weight-medium);
+  --typography-link-s-medium-line-height: var(
+    --primitive-typography-line-height-130
+  );
+  --typography-link-s-medium-letter-spacing: var(
+    --primitive-typography-letter-spacing-0
+  );
+  --typography-link-s-medium-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-130-12
+  );
+
+  /* Label */
+  --typography-label-family: var(--primitive-typography-family-dm-sans);
+
+  /* Label/M */
+  --typography-label-m-size: var(--primitive-typography-size-14);
+  --typography-label-m-weight: var(--primitive-typography-weight-bold);
+  --typography-label-m-line-height: var(--primitive-typography-line-height-100);
+  --typography-label-m-letter-spacing: var(
+    --primitive-typography-letter-spacing-0
+  );
+  --typography-label-m-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-100-14
+  );
+
+  /* Button */
+  --typography-button-family: var(--primitive-typography-family-dm-sans);
+
+  /* Button/M */
+  --typography-button-m-size: var(--primitive-typography-size-18);
+  --typography-button-m-weight: var(--primitive-typography-weight-medium);
+  --typography-button-m-line-height: var(
+    --primitive-typography-line-height-100
+  );
+  --typography-button-m-letter-spacing: var(
+    --primitive-typography-letter-spacing-0
+  );
+  --typography-button-m-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-100-18
+  );
+
+  /* Button/M Underlined */
+  --typography-button-m-underlined-size: var(--primitive-typography-size-18);
+  --typography-button-m-underlined-weight: var(
+    --primitive-typography-weight-medium
+  );
+  --typography-button-m-underlined-line-height: var(
+    --primitive-typography-line-height-100
+  );
+  --typography-button-m-underlined-letter-spacing: var(
+    --primitive-typography-letter-spacing-0
+  );
+  --typography-button-m-underlined-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-100-18
+  );
+
+  /* Button/S */
+  --typography-button-s-size: var(--primitive-typography-size-14);
+  --typography-button-s-weight: var(--primitive-typography-weight-medium);
+  --typography-button-s-line-height: var(
+    --primitive-typography-line-height-100
+  );
+  --typography-button-s-letter-spacing: var(
+    --primitive-typography-letter-spacing-minus-0-5
+  );
+  --typography-button-s-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-100-14
+  );
+
+  /* Tooltip */
+  --typography-tooltip-family: var(--primitive-typography-family-dm-sans);
+
+  /* Tooltip/M */
+  --typography-tooltip-m-size: var(--primitive-typography-size-16);
+  --typography-tooltip-m-weight: var(--primitive-typography-weight-medium);
+  --typography-tooltip-m-line-height: var(
+    --primitive-typography-line-height-115
+  );
+  --typography-tooltip-m-letter-spacing: var(
+    --primitive-typography-letter-spacing-minus-0-5
+  );
+  --typography-tooltip-m-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-115-16
+  );
+
+  /* Feedback */
+  --typography-feedback-family: var(--primitive-typography-family-dm-sans);
+
+  /* Feedback/L */
+  --typography-feedback-l-size: var(--primitive-typography-size-24);
+  --typography-feedback-l-weight: var(--primitive-typography-weight-bold);
+  --typography-feedback-l-line-height: var(
+    --primitive-typography-line-height-120
+  );
+  --typography-feedback-l-letter-spacing: var(
+    --primitive-typography-letter-spacing-minus-0-5
+  );
+  --typography-feedback-l-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-120-24
+  );
+
+  /* Feedback/S */
+  --typography-feedback-s-size: var(--primitive-typography-size-18);
+  --typography-feedback-s-weight: var(--primitive-typography-weight-medium);
+  --typography-feedback-s-line-height: var(
+    --primitive-typography-line-height-120
+  );
+  --typography-feedback-s-letter-spacing: var(
+    --primitive-typography-letter-spacing-minus-0-5
+  );
+  --typography-feedback-s-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-120-18
+  );
+
+  /* Toggle-switch */
+  --typography-toggle-switch-family: var(--primitive-typography-family-dm-sans);
+
+  /* Toggle-switch/M */
+  --typography-toggle-switch-m-size: var(--primitive-typography-size-16);
+  --typography-toggle-switch-m-weight: var(
+    --primitive-typography-weight-medium
+  );
+  --typography-toggle-switch-m-line-height: var(
+    --primitive-typography-line-height-100
+  );
+  --typography-toggle-switch-m-letter-spacing: var(
+    --primitive-typography-letter-spacing-0
+  );
+  --typography-toggle-switch-m-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-100-16
+  );
+
+  /* Toggle-switch/S */
+  --typography-toggle-switch-s-size: var(--primitive-typography-size-14);
+  --typography-toggle-switch-s-weight: var(
+    --primitive-typography-weight-regular
+  );
+  --typography-toggle-switch-s-line-height: var(
+    --primitive-typography-line-height-100
+  );
+  --typography-toggle-switch-s-letter-spacing: var(
+    --primitive-typography-letter-spacing-0
+  );
+  --typography-toggle-switch-s-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-100-14
+  );
+
+  /* Checkbox & Radio */
+  --typography-checkbox-radio-family: var(
+    --primitive-typography-family-dm-sans
+  );
+
+  /* Checkbox & Radio/M */
+  --typography-checkbox-radio-m-size: var(--primitive-typography-size-16);
+  --typography-checkbox-radio-m-weight: var(
+    --primitive-typography-weight-medium
+  );
+  --typography-checkbox-radio-m-line-height: var(
+    --primitive-typography-line-height-100
+  );
+  --typography-checkbox-radio-m-letter-spacing: var(
+    --primitive-typography-letter-spacing-0
+  );
+  --typography-checkbox-radio-m-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-100-16
+  );
+
+  /* Checkbox & Radio/S */
+  --typography-checkbox-radio-s-size: var(--primitive-typography-size-14);
+  --typography-checkbox-radio-s-weight: var(
+    --primitive-typography-weight-regular
+  );
+  --typography-checkbox-radio-s-line-height: var(
+    --primitive-typography-line-height-120
+  );
+  --typography-checkbox-radio-s-letter-spacing: var(
+    --primitive-typography-letter-spacing-0
+  );
+  --typography-checkbox-radio-s-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-120-14
+  );
+
+  /* Input & Dropdown */
+  --typography-input-dropdown-family: var(
+    --primitive-typography-family-dm-sans
+  );
+
+  /* Input & Dropdown/L */
+  --typography-input-dropdown-l-size: var(--primitive-typography-size-24);
+  --typography-input-dropdown-l-weight: var(--primitive-typography-weight-bold);
+  --typography-input-dropdown-l-line-height: var(
+    --primitive-typography-line-height-100
+  );
+  --typography-input-dropdown-l-letter-spacing: var(
+    --primitive-typography-letter-spacing-2
+  );
+  --typography-input-dropdown-l-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-100-24
+  );
+
+  /* Input & Dropdown/M */
+  --typography-input-dropdown-m-size: var(--primitive-typography-size-18);
+  --typography-input-dropdown-m-weight: var(
+    --primitive-typography-weight-medium
+  );
+  --typography-input-dropdown-m-line-height: var(
+    --primitive-typography-line-height-100
+  );
+  --typography-input-dropdown-m-letter-spacing: var(
+    --primitive-typography-letter-spacing-0
+  );
+  --typography-input-dropdown-m-paragraph-spacing: var(
+    --primitive-typography-paragraph-spacing-100-18
+  );
 }
 :root,
-:host {
+:host,
+[data-incode-theme='light'] {
+  color-scheme: light;
+
   /* Surface / Neutral */
 
   --surface-neutral-0: var(--primitive-color-gray-0);
   --surface-neutral-0-80: var(--primitive-color-gray-0-80);
+  --surface-neutral-0-static: var(--primitive-color-gray-0);
   --surface-neutral-50: var(--primitive-color-gray-50);
   --surface-neutral-100: var(--primitive-color-gray-100);
+  --surface-neutral-100-static: var(--primitive-color-gray-100);
+  --surface-neutral-150: var(--primitive-color-gray-150);
   --surface-neutral-200: var(--primitive-color-gray-200);
+  --surface-neutral-200-static: var(--primitive-color-gray-200);
+  --surface-neutral-250: var(--primitive-color-gray-250);
   --surface-neutral-300: var(--primitive-color-gray-300);
+  --surface-neutral-400: var(--primitive-color-gray-400);
   --surface-neutral-500: var(--primitive-color-gray-500);
+  --surface-neutral-600: var(--primitive-color-gray-600);
   --surface-neutral-700: var(--primitive-color-gray-700);
+  --surface-neutral-750: var(--primitive-color-gray-750);
   --surface-neutral-800: var(--primitive-color-gray-800);
   --surface-neutral-900: var(--primitive-color-gray-900);
   --surface-neutral-900-80: var(--primitive-color-gray-900-80);
   --surface-neutral-900-static: var(--primitive-color-gray-900);
+  --surface-neutral-900-80-static: var(--primitive-color-gray-900-80);
   --surface-neutral-1000: var(--primitive-color-gray-1000);
+  --surface-neutral-1000-80-static: var(--primitive-color-gray-1000-80);
 
   /* Surface / Brand */
 
   --surface-brand-50: var(--primitive-color-brand-50);
-  --surface-brand-400: var(--primitive-color-brand-400);
+  --surface-brand-100: var(--primitive-color-brand-100);
   --surface-brand-400-static: var(--primitive-color-brand-400);
   --surface-brand-500: var(--primitive-color-brand-500);
   --surface-brand-500-static: var(--primitive-color-brand-500);
-  --surface-brand-600: var(--primitive-color-brand-600);
   --surface-brand-600-static: var(--primitive-color-brand-600);
 
   /* Surface / Status */
 
   --surface-status-negative-50: var(--primitive-color-negative-50);
-  --surface-status-negative-600: var(--primitive-color-negative-600);
+  --surface-status-negative-500: var(--primitive-color-negative-500);
 
   --surface-status-warning-50: var(--primitive-color-warning-50);
   --surface-status-warning-500: var(--primitive-color-warning-500);
 
   --surface-status-positive-50: var(--primitive-color-positive-50);
-  --surface-status-positive-600: var(--primitive-color-positive-600);
-  --surface-status-positive-600-static: var(--primitive-color-positive-600);
+  --surface-status-positive-500: var(--primitive-color-positive-500);
 
   /* Icon / Neutral */
 
   --icon-neutral-0: var(--primitive-color-gray-0);
   --icon-neutral-0-static: var(--primitive-color-gray-0);
-  --icon-neutral-50: var(--primitive-color-gray-50);
   --icon-neutral-50-static: var(--primitive-color-gray-50);
   --icon-neutral-300: var(--primitive-color-gray-300);
+  --icon-neutral-300-static: var(--primitive-color-gray-300);
   --icon-neutral-500: var(--primitive-color-gray-500);
   --icon-neutral-500-static: var(--primitive-color-gray-500);
   --icon-neutral-800: var(--primitive-color-gray-800);
@@ -232,140 +773,190 @@
 
   /* Icon / Brand */
 
-  --icon-brand-500: var(--primitive-color-brand-500);
   --icon-brand-500-static: var(--primitive-color-brand-500);
 
   /* Icon / Status */
 
-  --icon-status-negative: var(--primitive-color-negative-600);
+  --icon-status-negative: var(--primitive-color-negative-500);
   --icon-status-warning: var(--primitive-color-warning-500);
-  --icon-status-positive: var(--primitive-color-positive-600);
-  --icon-status-positive-static: var(--primitive-color-positive-600);
+  --icon-status-positive: var(--primitive-color-positive-500);
 
   /* Border / Neutral */
 
   --border-neutral-100: var(--primitive-color-gray-100);
+  --border-neutral-100-static: var(--primitive-color-gray-100);
+  --border-neutral-200: var(--primitive-color-gray-200);
+  --border-neutral-250: var(--primitive-color-gray-250);
   --border-neutral-300: var(--primitive-color-gray-300);
+  --border-neutral-400: var(--primitive-color-gray-400);
   --border-neutral-500: var(--primitive-color-gray-500);
 
   /* Border / Brand */
 
   --border-brand-500: var(--primitive-color-brand-500);
-  --border-brand-500-static: var(--primitive-color-brand-500);
   --border-brand-600: var(--primitive-color-brand-600);
 
   /* Border / Status */
 
-  --border-status-negative: var(--primitive-color-negative-600);
+  --border-status-negative: var(--primitive-color-negative-500);
+  --border-status-negative-static: var(--primitive-color-negative-500);
   --border-status-warning: var(--primitive-color-warning-500);
-  --border-status-positive: var(--primitive-color-positive-600);
-  --border-status-positive-static: var(--primitive-color-positive-600);
+  --border-status-warning-static: var(--primitive-color-warning-500);
+  --border-status-positive-static: var(--primitive-color-positive-500);
+  --border-status-focus: var(--primitive-color-focus-500);
 
   /* Text / Body */
 
-  --text-body-primary: var(--primitive-color-gray-800);
-  --text-body-secondary: var(--primitive-color-gray-500);
-  --text-body-tertiary: var(--primitive-color-gray-300);
-  --text-body-0: var(--primitive-color-gray-0);
   --text-body-0-static: var(--primitive-color-gray-0);
+  --text-body-300-tertiary: var(--primitive-color-gray-300);
+  --text-body-300-tertiary-static: var(--primitive-color-gray-300);
+  --text-body-400: var(--primitive-color-gray-400);
+  --text-body-500-secondary: var(--primitive-color-gray-500);
+  --text-body-500-secondary-static: var(--primitive-color-gray-500);
+  --text-body-800-primary: var(--primitive-color-gray-800);
+  --text-body-800-primary-static: var(--primitive-color-gray-800);
 
   /* Text / Link */
 
-  --text-link-default: var(--primitive-color-brand-500);
   --text-link-hover: var(--primitive-color-brand-300);
-  --text-link-hover-static: var(--primitive-color-brand-300);
-  --text-link-disabled: var(--primitive-color-gray-500);
-  --text-link-disabled-static: var(--primitive-color-gray-500);
+  --text-link-default: var(--primitive-color-brand-500);
   --text-link-visited: var(--primitive-color-gray-700);
+  --text-link-disabled: var(--primitive-color-gray-500);
 
   /* Text / Accent */
 
   --text-accent-brand: var(--primitive-color-brand-500);
-  --text-accent-brand-static: var(--primitive-color-brand-500);
   --text-accent-brand-secondary: var(--primitive-color-brand-secondary-500);
-  --text-accent-brand-secondary-static: var(
-    --primitive-color-brand-secondary-500
-  );
 
   /* Text / Status */
 
-  --text-status-negative: var(--primitive-color-negative-600);
+  --text-status-negative: var(--primitive-color-negative-500);
   --text-status-warning: var(--primitive-color-warning-500);
-  --text-status-positive: var(--primitive-color-positive-600);
-  --text-status-positive-static: var(--primitive-color-positive-600);
+  --text-status-positive: var(--primitive-color-positive-500);
 }
 [data-incode-theme='dark'] {
+  color-scheme: dark;
+
   /* Surface / Neutral */
 
   --surface-neutral-0: var(--primitive-color-gray-1000);
+  --surface-neutral-0-static: var(--primitive-color-gray-0);
   --surface-neutral-0-80: var(--primitive-color-gray-900-80);
   --surface-neutral-50: var(--primitive-color-gray-900);
   --surface-neutral-100: var(--primitive-color-gray-800);
+  --surface-neutral-100-static: var(--primitive-color-gray-100);
+  --surface-neutral-150: var(--primitive-color-gray-750);
   --surface-neutral-200: var(--primitive-color-gray-700);
+  --surface-neutral-200-static: var(--primitive-color-gray-200);
+  --surface-neutral-250: var(--primitive-color-gray-600);
   --surface-neutral-300: var(--primitive-color-gray-500);
+  --surface-neutral-400: var(--primitive-color-gray-500);
   --surface-neutral-500: var(--primitive-color-gray-300);
+  --surface-neutral-600: var(--primitive-color-gray-250);
   --surface-neutral-700: var(--primitive-color-gray-200);
+  --surface-neutral-750: var(--primitive-color-gray-150);
   --surface-neutral-800: var(--primitive-color-gray-100);
   --surface-neutral-900: var(--primitive-color-gray-0);
   --surface-neutral-900-80: var(--primitive-color-gray-0-80);
+  --surface-neutral-900-static: var(--primitive-color-gray-900);
+  --surface-neutral-900-80-static: var(--primitive-color-gray-0-80);
   --surface-neutral-1000: var(--primitive-color-gray-0);
+  --surface-neutral-1000-80-static: var(--primitive-color-gray-1000-80);
 
   /* Surface / Brand */
 
   --surface-brand-50: var(--primitive-color-brand-900);
+  --surface-brand-100: var(--primitive-color-brand-900);
+  --surface-brand-400-static: var(--primitive-color-brand-400);
+  --surface-brand-500: var(--primitive-color-gray-0);
+  --surface-brand-500-static: var(--primitive-color-brand-500);
+  --surface-brand-600-static: var(--primitive-color-brand-600);
 
   /* Surface / Status */
 
   --surface-status-negative-50: var(--primitive-color-negative-950);
-  --surface-status-negative-600: var(--primitive-color-negative-500);
+  --surface-status-negative-500: var(--primitive-color-negative-500);
 
   --surface-status-warning-50: var(--primitive-color-warning-950);
   --surface-status-warning-500: var(--primitive-color-warning-400);
 
-  --surface-status-positive-50: var(--primitive-color-positive-800);
+  --surface-status-positive-50: var(--primitive-color-positive-950);
+  --surface-status-positive-500: var(--primitive-color-positive-400);
 
   /* Icon / Neutral */
 
   --icon-neutral-0: var(--primitive-color-gray-800);
+  --icon-neutral-0-static: var(--primitive-color-gray-0);
+  --icon-neutral-50-static: var(--primitive-color-gray-50);
   --icon-neutral-300: var(--primitive-color-gray-500);
+  --icon-neutral-300-static: var(--primitive-color-gray-300);
   --icon-neutral-500: var(--primitive-color-gray-300);
+  --icon-neutral-500-static: var(--primitive-color-gray-500);
   --icon-neutral-800: var(--primitive-color-gray-100);
+  --icon-neutral-800-static: var(--primitive-color-gray-800);
+
+  /* Icon / Brand */
+
+  --icon-brand-500-static: var(--primitive-color-brand-500);
 
   /* Icon / Status */
 
-  --icon-status-negative: var(--primitive-color-negative-500);
+  --icon-status-negative: var(--primitive-color-negative-400);
   --icon-status-warning: var(--primitive-color-warning-400);
+  --icon-status-positive: var(--primitive-color-positive-400);
 
   /* Border / Neutral */
 
   --border-neutral-100: var(--primitive-color-gray-700);
+  --border-neutral-100-static: var(--primitive-color-gray-100);
+  --border-neutral-200: var(--primitive-color-gray-600);
+  --border-neutral-250: var(--primitive-color-gray-600);
   --border-neutral-300: var(--primitive-color-gray-500);
+  --border-neutral-400: var(--primitive-color-gray-500);
   --border-neutral-500: var(--primitive-color-gray-300);
 
   /* Border / Brand */
 
+  --border-brand-500: var(--primitive-color-brand-500);
   --border-brand-600: var(--primitive-color-brand-400);
 
   /* Border / Status */
 
-  --border-status-negative: var(--primitive-color-negative-500);
+  --border-status-negative: var(--primitive-color-negative-400);
+  --border-status-negative-static: var(--primitive-color-negative-500);
   --border-status-warning: var(--primitive-color-warning-400);
+  --border-status-warning-static: var(--primitive-color-warning-500);
+  --border-status-focus: var(--primitive-color-focus-400);
+  --border-status-focus-static: var(--primitive-color-focus-400);
 
   /* Text / Body */
 
-  --text-body-primary: var(--primitive-color-gray-50);
-  --text-body-secondary: var(--primitive-color-gray-300);
-  --text-body-tertiary: var(--primitive-color-gray-500);
+  --text-body-0-static: var(--primitive-color-gray-0);
+  --text-body-300-tertiary: var(--primitive-color-gray-500);
+  --text-body-300-tertiary-static: var(--primitive-color-gray-300);
+  --text-body-400: var(--primitive-color-gray-500);
+  --text-body-500-secondary: var(--primitive-color-gray-300);
+  --text-body-500-secondary-static: var(--primitive-color-gray-500);
+  --text-body-800-primary: var(--primitive-color-gray-50);
+  --text-body-800-primary-static: var(--primitive-color-gray-800);
 
   /* Text / Link */
 
+  --text-link-hover: var(--primitive-color-brand-300);
   --text-link-default: var(--primitive-color-brand-400);
   --text-link-visited: var(--primitive-color-gray-300);
+  --text-link-disabled: var(--primitive-color-gray-500);
+
+  /* Text / Accent */
+
+  --text-accent-brand: var(--primitive-color-brand-500);
+  --text-accent-brand-secondary: var(--primitive-color-brand-secondary-500);
 
   /* Text / Status */
 
-  --text-status-negative: var(--primitive-color-negative-500);
+  --text-status-negative: var(--primitive-color-negative-400);
   --text-status-warning: var(--primitive-color-warning-400);
+  --text-status-positive: var(--primitive-color-positive-500);
 }
 :root,
 :host {
@@ -376,7 +967,7 @@
   --button-primary-surface-disabled: var(--surface-neutral-100);
 
   --button-primary-text-default: var(--text-body-0-static);
-  --button-primary-text-disabled: var(--text-body-tertiary);
+  --button-primary-text-disabled: var(--text-body-500-secondary);
 
   --button-primary-border-default: var(--surface-brand-500-static);
   --button-primary-border-hover: var(--surface-brand-400-static);
@@ -385,46 +976,57 @@
   --button-primary-border-radius: var(--border-radius-medium);
 
   /* Button / Secondary */
-  --button-secondary-surface-default: var(--surface-neutral-0);
-  --button-secondary-surface-hover: var(--surface-brand-50);
-  --button-secondary-surface-pressed: var(--surface-brand-600-static);
-  --button-secondary-surface-disabled: var(--surface-neutral-200);
-
-  --button-secondary-text-default: var(--text-accent-brand-static);
-  --button-secondary-text-disabled: var(--text-body-secondary);
+  --button-secondary-text-default: var(--text-accent-brand);
+  --button-secondary-text-disabled: var(--text-body-500-secondary);
 
   --button-secondary-border-default: var(--surface-brand-500-static);
   --button-secondary-border-hover: var(--surface-brand-400-static);
   --button-secondary-border-pressed: var(--surface-brand-600-static);
   --button-secondary-border-disabled: var(--surface-neutral-100);
   --button-secondary-border-radius: var(--border-radius-medium);
+  --button-secondary-border-width: var(--border-width-medium);
 
   /* Button / Tertiary */
-  --button-tertiary-text-default: var(--text-accent-brand-static);
-  --button-tertiary-text-disabled: var(--text-body-secondary);
+  --button-tertiary-text-default: var(--text-accent-brand);
+  --button-tertiary-text-disabled: var(--text-body-500-secondary);
 
   /* Checkbox */
   --checkbox-surface-default: var(--surface-neutral-50);
   --checkbox-surface-selected: var(--surface-brand-500-static);
-  --checkbox-surface-disabled: var(--surface-neutral-200);
+  --checkbox-surface-disabled: var(--surface-neutral-400);
 
-  --checkbox-border-default: var(--border-neutral-100);
-  --checkbox-border-selected: var(--border-brand-500-static);
-  --checkbox-border-disabled: var(--border-neutral-300);
+  --checkbox-border-default: var(--border-neutral-400);
+  --checkbox-border-disabled: var(--border-neutral-400);
   --checkbox-border-negative: var(--border-status-negative);
   --checkbox-border-radius: var(--border-radius-small);
 
-  --checkbox-icon-default: var(--surface-neutral-0);
+  --checkbox-icon-default: var(--surface-neutral-0-static);
 
-  --checkbox-text-default: var(--text-body-primary);
-  --checkbox-text-disabled: var(--text-body-tertiary);
+  --checkbox-text-default: var(--text-body-800-primary);
+  --checkbox-text-disabled: var(--text-body-500-secondary);
   --checkbox-text-negative: var(--text-status-negative);
 
+  /* Radio Button */
+  --radio-button-surface-default: var(--surface-neutral-50);
+  --radio-button-surface-selected: var(--surface-brand-500-static);
+  --radio-button-surface-disabled: var(--surface-neutral-400);
+
+  --radio-button-border-radius: var(--border-radius-full);
+  --radio-button-border-default: var(--border-neutral-400);
+  --radio-button-border-disabled: var(--border-neutral-400);
+  --radio-button-border-negative: var(--border-status-negative);
+
+  --radio-button-icon-default: var(--surface-neutral-0-static);
+
+  --radio-button-text-default: var(--text-body-800-primary);
+  --radio-button-text-disabled: var(--text-body-500-secondary);
+  --radio-button-text-negative: var(--text-status-negative);
+
   /* Card */
   --card-surface-primary: var(--surface-neutral-800);
 
   --card-text-title: var(--surface-neutral-100);
-  --card-text-subtitle: var(--text-body-secondary);
+  --card-text-subtitle: var(--text-body-500-secondary);
 
   /* Countdown */
   --countdown-surface-default: var(--surface-neutral-900-static);
@@ -433,75 +1035,70 @@
 
   /* Input */
   --input-surface-default: var(--surface-neutral-50);
-  --input-surface-active: var(--surface-neutral-50);
+  --input-surface-focused: var(--surface-neutral-50);
   --input-surface-disabled: var(--surface-neutral-100);
   --input-surface-negative: var(--surface-neutral-50);
 
-  --input-border-default: var(--border-neutral-100);
-  --input-border-active: var(--border-brand-500-static);
+  --input-border-default: var(--border-neutral-400);
   --input-border-disabled: var(--border-neutral-100);
   --input-border-negative: var(--border-status-negative);
+  --input-border-focused: var(--border-status-focus);
 
-  --input-icon-default: var(--surface-neutral-300);
-  --input-icon-positive: var(--surface-status-positive-600-static);
-  --input-icon-negative: var(--border-status-negative);
-  --input-icon-warning: var(--surface-status-warning-500);
+  --input-icon-neutral: var(--icon-neutral-300);
+  --input-icon-positive: var(--icon-status-positive);
+  --input-icon-negative: var(--icon-status-negative);
+  --input-icon-warning: var(--icon-status-warning);
 
-  --input-text-label-default: var(--text-body-primary);
-  --input-text-label-disabled: var(--text-body-tertiary);
+  --input-text-label-default: var(--text-body-800-primary);
 
-  --input-text-field-default: var(--text-body-primary);
-  --input-text-field-disabled: var(--text-body-tertiary);
-  --input-text-field-placeholder: var(--text-body-tertiary);
+  --input-text-field-default: var(--text-body-800-primary);
+  --input-text-field-disabled: var(--text-body-400);
+  --input-text-field-placeholder: var(--text-body-400);
 
-  --input-text-helper-default: var(--text-body-secondary);
-  --input-text-helper-disabled: var(--text-body-tertiary);
+  --input-text-helper-default: var(--text-body-800-primary);
   --input-text-helper-negative: var(--text-status-negative);
 
   /* Dropdown */
 
   --dropdown-surface-default: var(--surface-neutral-50);
-  --dropdown-surface-active: var(--surface-neutral-50);
-  --dropdown-surface-disabled: var(--surface-neutral-100);
+  --dropdown-surface-focused: var(--surface-neutral-50);
+  --dropdown-surface-disabled: var(--surface-neutral-50);
   --dropdown-surface-negative: var(--surface-neutral-50);
+  --dropdown-surface-selected: var(--surface-neutral-100);
 
-  --dropdown-border-default: var(--border-neutral-100);
-  --dropdown-border-active: var(--border-brand-500-static);
+  --dropdown-border-default: var(--border-neutral-400);
   --dropdown-border-disabled: var(--border-neutral-100);
   --dropdown-border-negative: var(--border-status-negative);
+  --dropdown-border-focused: var(--border-status-focus);
 
-  --dropdown-icon-default: var(--surface-neutral-300);
-  --dropdown-icon-positive: var(--surface-status-positive-600-static);
-  --dropdown-icon-negative: var(--border-status-negative);
-  --dropdown-icon-warning: var(--surface-status-warning-500);
+  --dropdown-icon-neutral: var(--icon-neutral-300);
+  --dropdown-icon-positive: var(--icon-status-positive);
+  --dropdown-icon-negative: var(--icon-status-negative);
+  --dropdown-icon-warning: var(--icon-status-warning);
 
-  --dropdown-text-label-default: var(--text-body-primary);
-  --dropdown-text-label-disabled: var(--text-body-tertiary);
+  --dropdown-text-label-default: var(--text-body-800-primary);
 
-  --dropdown-text-input-default: var(--text-body-primary);
-  --dropdown-text-input-disabled: var(--text-body-tertiary);
-  --dropdown-text-input-placeholder: var(--text-body-tertiary);
+  --dropdown-text-input-default: var(--text-body-800-primary);
+  --dropdown-text-input-disabled: var(--text-body-400);
+  --dropdown-text-input-placeholder: var(--text-body-400);
 
-  --dropdown-text-helper-default: var(--text-body-secondary);
-  --dropdown-text-helper-disabled: var(--text-body-tertiary);
+  --dropdown-text-helper-default: var(--text-body-800-primary);
   --dropdown-text-helper-negative: var(--text-status-negative);
 
   /* Link */
 
-  --link-default: var(--text-accent-brand-static);
-  --link-hover: var(--text-body-primary);
-  --link-disabled: var(--text-body-secondary);
-  --link-visited: var(--text-accent-brand-static);
+  --link-default: var(--text-link-default);
+  --link-hover: var(--text-body-800-primary);
+  --link-disabled: var(--text-body-500-secondary);
+  --link-visited: var(--text-link-default);
 
   /* Spinner */
 
   --spinner-surface-primary: var(--surface-brand-500-static);
   --spinner-surface-secondary: var(--surface-brand-50);
-  --spinner-surface-overlay: var(--surface-neutral-0);
-  --spinner-surface-overlay-opacity: 1;
 
-  --spinner-text-title: var(--text-body-primary);
-  --spinner-text-subtitle: var(--text-body-secondary);
+  --spinner-text-title: var(--text-body-800-primary);
+  --spinner-text-subtitle: var(--text-body-500-secondary);
 
   /* Snackbar */
 
@@ -510,34 +1107,119 @@
   --snackbar-surface-warning: var(--surface-status-warning-50);
   --snackbar-surface-negative: var(--surface-status-negative-50);
 
-  --snackbar-border-neutral: var(--border-brand-500-static);
+  --snackbar-border-neutral: var(--border-brand-500);
   --snackbar-border-positive: var(--border-status-positive-static);
   --snackbar-border-warning: var(--border-status-warning);
   --snackbar-border-negative: var(--border-status-negative);
 
-  --snackbar-icon-brand: var(--icon-brand-500-static);
-  --snackbar-icon-positive: var(--icon-status-positive-static);
+  --snackbar-icon-neutral: var(--icon-brand-500-static);
+  --snackbar-icon-positive: var(--icon-status-positive);
   --snackbar-icon-negative: var(--icon-status-negative);
   --snackbar-icon-warning: var(--icon-status-warning);
 
-  --snackbar-text-default: var(--text-body-primary);
   --snackbar-text-link: var(--link-default);
-  --snackbar-text-positive: var(--text-status-positive-static);
+  --snackbar-text-positive: var(--text-status-positive);
   --snackbar-text-warning: var(--text-status-warning);
   --snackbar-text-negative: var(--text-status-negative);
+  --snackbar-text-neutral: var(--text-body-800-primary);
 
   /* Toggle-switch */
 
   --toggle-switch-surface-primary-on: var(--surface-brand-500-static);
-  --toggle-switch-surface-primary-off: var(--surface-neutral-200);
+  --toggle-switch-surface-primary-off: var(--surface-neutral-400);
   --toggle-switch-surface-primary-disabled: var(--surface-neutral-200);
 
-  --toggle-switch-surface-secondary-on: var(--surface-neutral-100);
-  --toggle-switch-surface-secondary-off: var(--surface-neutral-100);
-  --toggle-switch-surface-secondary-disabled: var(--surface-neutral-200);
+  --toggle-switch-surface-secondary-on: var(--surface-neutral-0-static);
+  --toggle-switch-surface-secondary-off: var(--surface-neutral-0-static);
+  --toggle-switch-surface-secondary-disabled: var(--surface-neutral-300);
 
-  --toggle-switch-text-default: var(--text-body-primary);
-  --toggle-switch-text-disabled: var(--text-body-tertiary);
+  --toggle-switch-text-default: var(--text-body-800-primary);
+  --toggle-switch-text-disabled: var(--text-body-500-secondary);
   --toggle-switch-text-negative: var(--text-status-negative);
-  --toggle-switch-text-link: var(--text-accent-brand-static);
+  --toggle-switch-text-link: var(--text-link-default);
+
+  /* Tooltip */
+  --tooltip-text-neutral: var(--text-body-0-static);
+  --tooltip-surface-neutral: var(--surface-neutral-900-static);
+
+  /* Sheet */
+  --sheet-icon-neutral: var(--icon-neutral-800);
+
+  --sheet-item-default: var(--surface-neutral-0);
+
+  --sheet-action-default: var(--text-body-800-primary);
+  --sheet-action-disabled: var(--text-body-500-secondary);
+
+  --sheet-surface-default: var(--surface-neutral-0);
+}
+/**
+ * Non-token design values used as implementation fallbacks.
+ *
+ * These values are intentionally centralized so we can:
+ * - avoid scattering hardcoded values across the codebase
+ * - track repeated patterns that may deserve real design tokens
+ * - distinguish product/export/runtime constants from design-system tokens
+ *
+ * If a value starts repeating across features or components,
+ * consider promoting it to a proper design token.
+ */
+:root {
+  /* spacing / sizes */
+  --signature-canvas-height: 256px;
+  --signature-canvas-max-width: 600px;
+  --phone-input-country-code-width: 140px;
+  --page-header-height: 44px;
+  --incode-page-max-w: 800px;
+  --incode-page-max-h: 840px;
+  --incode-form-max-w: 420px;
+  --incode-page-max-h-landscape: 726px;
+  --dialog-content-max-width: 390px;
+  --document-capture-pdf-preview-height: 160px;
+  --incode-curp-confirm-max-w: 340px;
+  --age-verification-logo-height: 20px;
+  --id-processing-image-blur-radius: 8px;
+
+  /* segmented date input */
+  --segmented-date-input-height: 56px;
+  --segmented-date-input-icon-space: 44px;
+  --segmented-date-input-mm-dd-width: 1.9em;
+  --segmented-date-input-yyyy-width: 3.5em;
+
+  /* radio button sizing */
+  --radio-button-size: 28px;
+  --radio-button-dot-size: 9px;
+  --radio-button-label-gap: 10px;
+  --radio-button-message-offset: 38px;
+
+  /* focus outline */
+  --focus-outline-width: 2px;
+  --focus-outline-offset: 2px;
+
+  /* home module */
+  --home-logo-container-max-width: 180px;
+  --home-logo-max-height: 250px;
+
+  /* snackbar */
+  --snackbar-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+  /* redirect-to-mobile */
+  --redirect-card-max-width: 800px;
+  --redirect-card-min-height: 100%;
+  --redirect-options-height: 332px;
+  --redirect-options-max-width: 752px;
+  --redirect-tabs-max-width: 676px;
+  --redirect-tab-description-max-width: 434px;
+  --redirect-qr-wrapper-border-radius: 21px;
+
+  /* digital ID upload */
+  --digital-id-preview-w: 156px;
+  --digital-id-preview-h: 221px;
+  --digital-id-laser-h: 231px;
+  --digital-id-laser-scale: 1.35;
+  --digital-id-content-max-w: 342px;
+  --digital-id-footer-min-h: 160px;
+  --digital-id-illustration-max-h: 260px;
+  --digital-id-tutorial-illustration-max-h: 280px;
+  --digital-id-file-name-max-w: 200px;
+  --digital-id-progress-bar-w: 164px;
+  --digital-id-progress-bar-h: 8px;
 }