@incodetech/web 0.0.0-dev-20260312-e476b70 → 0.0.0-dev-20260313-d658d3a

package/dist/themes/light.css

@@ -155,9 +155,9 @@
 :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-bold: var(--primitive-border-width-2);
 
   /* Border / Radius */
 
@@ -203,33 +203,43 @@
 
   /* 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-110
+    --primitive-typography-line-height-105
   );
   --typography-display-d1-letter-spacing: var(
     --primitive-typography-letter-spacing-minus-1-5
   );
 
+  /* 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-110
+    --primitive-typography-line-height-105
   );
   --typography-display-d2-letter-spacing: var(
-    --primitive-typography-letter-spacing-minus-1-5
+    --primitive-typography-letter-spacing-minus-0-5
   );
 
+  /* 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
+    --primitive-typography-letter-spacing-minus-1-5
   );
 
+  /* 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(
@@ -239,8 +249,9 @@
     --primitive-typography-letter-spacing-minus-1
   );
 
+  /* Headline/H3 */
   --typography-headline-h3-size: var(--primitive-typography-size-20);
-  --typography-headline-h3-weight: var(--primitive-typography-weight-semibold);
+  --typography-headline-h3-weight: var(--primitive-typography-weight-bold);
   --typography-headline-h3-line-height: var(
     --primitive-typography-line-height-115
   );
@@ -248,6 +259,7 @@
     --primitive-typography-letter-spacing-minus-0-5
   );
 
+  /* 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(
@@ -257,6 +269,7 @@
     --primitive-typography-letter-spacing-minus-0-5
   );
 
+  /* 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(
@@ -266,61 +279,261 @@
     --primitive-typography-letter-spacing-minus-0-5
   );
 
-  --typography-body-sm-size: var(--primitive-typography-size-12);
-  --typography-body-sm-weight: var(--primitive-typography-weight-regular);
-  --typography-body-sm-line-height: var(--primitive-typography-line-height-120);
-  --typography-body-sm-letter-spacing: var(
+  /* 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
+  );
+
+  /* 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-regular-size: var(--primitive-typography-size-14);
-  --typography-body-regular-weight: var(--primitive-typography-weight-regular);
-  --typography-body-regular-line-height: var(
+  /* 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-regular-letter-spacing: var(
+  --typography-body-m-regular-letter-spacing: var(
     --primitive-typography-letter-spacing-0
   );
 
-  --typography-body-lg-size: var(--primitive-typography-size-16);
-  --typography-body-lg-weight: var(--primitive-typography-weight-regular);
-  --typography-body-lg-line-height: var(--primitive-typography-line-height-120);
-  --typography-body-lg-letter-spacing: var(
+  /* 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-sm-medium-size: var(--primitive-typography-size-12);
-  --typography-body-sm-medium-weight: var(--primitive-typography-weight-medium);
-  --typography-body-sm-medium-line-height: var(
-    --primitive-typography-line-height-120
+  /* 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
+  );
+
+  /* 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
+  );
+
+  /* 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
+  );
+
+  /* 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-body-sm-medium-letter-spacing: var(
+  --typography-link-s-medium-letter-spacing: var(
     --primitive-typography-letter-spacing-0
   );
 
-  --typography-body-medium-size: var(--primitive-typography-size-14);
-  --typography-body-medium-weight: var(--primitive-typography-weight-medium);
-  --typography-body-medium-line-height: var(
+  /* 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
+  );
+
+  /* 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
+  );
+
+  /* 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
+  );
+
+  /* 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
+  );
+
+  /* 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
+  );
+
+  /* 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-body-medium-letter-spacing: var(
+  --typography-feedback-l-letter-spacing: var(
+    --primitive-typography-letter-spacing-minus-0-5
+  );
+
+  /* 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
+  );
+
+  /* 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
+  );
+
+  /* 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-body-lg-medium-size: var(--primitive-typography-size-16);
-  --typography-body-lg-medium-weight: var(--primitive-typography-weight-medium);
-  --typography-body-lg-medium-line-height: var(
+  /* 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
+  );
+
+  /* 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-body-lg-medium-letter-spacing: var(
+  --typography-checkbox-radio-s-letter-spacing: var(
     --primitive-typography-letter-spacing-0
   );
 
-  --typography-tooltip-size: var(--primitive-typography-size-16);
-  --typography-tooltip-weight: var(--primitive-typography-weight-medium);
-  --typography-tooltip-line-height: var(--primitive-typography-line-height-115);
-  --typography-tooltip-letter-spacing: var(
-    --primitive-typography-letter-spacing-minus-0-5
+  /* 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
+  );
+
+  /* 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
   );
 }
 :root,
@@ -330,51 +543,55 @@
 
   --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-dark: rgba(0, 0, 0, 0.9);
+  --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-500: var(--primitive-color-negative-500);
-  --surface-status-negative-600: var(--primitive-color-negative-500);
-  --surface-error-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-500: var(--primitive-color-positive-500);
-  --surface-status-positive-600: var(--primitive-color-positive-500);
-  --surface-status-positive-600-static: 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);
@@ -382,7 +599,6 @@
 
   /* Icon / Brand */
 
-  --icon-brand-500: var(--primitive-color-brand-500);
   --icon-brand-500-static: var(--primitive-color-brand-500);
 
   /* Icon / Status */
@@ -390,12 +606,13 @@
   --icon-status-negative: var(--primitive-color-negative-500);
   --icon-status-warning: var(--primitive-color-warning-500);
   --icon-status-positive: var(--primitive-color-positive-500);
-  --icon-status-positive-static: var(--primitive-color-positive-500);
 
   /* Border / Neutral */
 
-  --border-neutral-0: var(--primitive-color-gray-0);
   --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);
@@ -403,132 +620,167 @@
   /* 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-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-500);
+  --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-500);
   --text-status-warning: var(--primitive-color-warning-500);
   --text-status-positive: var(--primitive-color-positive-500);
-  --text-status-positive-static: var(--primitive-color-positive-500);
-
-  /* Text / Tooltip */
-
-  --text-tooltip-neutral: var(--text-body-0-static);
 }
 [data-incode-theme='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-dark: rgba(0, 0, 0, 0.9);
+  --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-500: var(--primitive-color-negative-500);
-  --surface-status-negative-600: var(--primitive-color-negative-500);
-  --surface-error-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-750);
-  --surface-status-positive-500: var(--primitive-color-positive-500);
+  --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 {
@@ -539,7 +791,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);
@@ -553,8 +805,8 @@
   --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);
@@ -563,8 +815,8 @@
   --button-secondary-border-radius: var(--border-radius-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);
@@ -572,22 +824,22 @@
   --checkbox-surface-disabled: var(--primitive-color-gray-400);
 
   --checkbox-border-default: var(--primitive-color-gray-400);
-  --checkbox-border-selected: var(--border-brand-500-static);
+  --checkbox-border-selected: var(--border-brand-500); /* legacy */
   --checkbox-border-disabled: var(--primitive-color-gray-400);
   --checkbox-border-negative: var(--border-status-negative);
   --checkbox-border-radius: var(--border-radius-small);
 
   --checkbox-icon-default: var(--surface-neutral-0);
 
-  --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);
 
   /* 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);
@@ -601,30 +853,30 @@
   --input-surface-negative: var(--surface-neutral-50);
 
   --input-border-default: var(--border-neutral-400);
-  --input-border-active: var(--border-brand-500-static);
+  --input-border-active: var(--border-brand-500); /* legacy */
   --input-border-disabled: var(--border-neutral-100);
   --input-border-negative: var(--border-status-negative);
   --input-border-focus: var(--border-status-focus);
   --input-border-radius: var(--border-radius-small);
 
   --input-icon-default: var(--surface-neutral-300);
-  --input-icon-positive: var(--surface-status-positive-600-static);
+  --input-icon-positive: var(--surface-status-positive-500);
   --input-icon-negative: var(--border-status-negative);
   --input-icon-warning: var(--surface-status-warning-500);
 
-  --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-label-disabled: var(--text-body-300-tertiary); /* legacy */
   --input-text-label-font-family:
     var(--primitive-typography-family-dm-sans), system-ui, sans-serif;
 
-  --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-field-font-family:
     var(--primitive-typography-family-dm-sans), system-ui, sans-serif;
 
-  --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-disabled: var(--text-body-300-tertiary); /* legacy */
   --input-text-helper-negative: var(--text-status-negative);
 
   /* Dropdown */
@@ -635,35 +887,35 @@
   --dropdown-surface-negative: var(--surface-neutral-50);
 
   --dropdown-border-default: var(--border-neutral-400);
-  --dropdown-border-active: var(--border-brand-500-static);
+  --dropdown-border-active: var(--border-brand-500); /* legacy */
   --dropdown-border-disabled: var(--border-neutral-100);
   --dropdown-border-negative: var(--border-status-negative);
   --dropdown-border-focus: var(--border-status-focus);
 
   --dropdown-icon-default: var(--surface-neutral-300);
-  --dropdown-icon-positive: var(--surface-status-positive-600-static);
+  --dropdown-icon-positive: var(--surface-status-positive-500);
   --dropdown-icon-negative: var(--border-status-negative);
   --dropdown-icon-warning: var(--surface-status-warning-500);
 
-  --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-label-disabled: var(--text-body-300-tertiary); /* legacy */
   --dropdown-text-label-font-family: var(--input-text-label-font-family);
 
-  --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-input-font-family: var(--input-text-field-font-family);
 
-  --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-disabled: var(--text-body-300-tertiary); /* legacy */
   --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 */
 
@@ -672,8 +924,8 @@
   --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 */
 
@@ -682,19 +934,19 @@
   --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-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-default: var(--text-body-800-primary); /* legacy */
   --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);
 
@@ -708,8 +960,8 @@
   --toggle-switch-surface-secondary-off: var(--surface-neutral-100);
   --toggle-switch-surface-secondary-disabled: var(--surface-neutral-200);
 
-  --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);
 }