@muibook/components 19.6.0 → 20.1.0

package/dist/esm/css/mui-tokens.css

@@ -12,35 +12,65 @@
 /* 1. BRAND PRIMITIVES  ------> ./mui-brand.css                                                         */
 /* ==================================================================================================== */
 :where(html) {
-  /* Avatar Colors */
-  --avatar-purple-200: oklch(69.998% 0.12881 306.598);
-  --avatar-purple-800: oklch(39.825% 0.15525 302.768);
-  --avatar-violet-200: oklch(68.7% 0.11278 294.579);
-  --avatar-violet-800: oklch(37.751% 0.1414 289.195);
-  --avatar-pink-200: oklch(75% 0.12171 349.037);
-  --avatar-pink-800: oklch(49.567% 0.17587 355.522);
-  --avatar-magenta-200: oklch(73.607% 0.1553 324.203);
-  --avatar-magenta-800: oklch(46.026% 0.18151 324.267);
-  --avatar-red-200: oklch(69.219% 0.13185 21.008);
-  --avatar-red-800: oklch(43.588% 0.15193 26.224);
-  --avatar-orange-200: oklch(78.978% 0.10803 55.747);
-  --avatar-orange-800: oklch(51.737% 0.12922 49.443);
-  --avatar-amber-200: oklch(88.238% 0.11573 91.663);
-  --avatar-amber-800: oklch(65.465% 0.13065 86.837);
-  --avatar-yellow-200: oklch(92.328% 0.116 104.198);
-  --avatar-yellow-800: oklch(72.736% 0.14925 103.38);
-  --avatar-lime-200: oklch(84.773% 0.11998 130.068);
-  --avatar-lime-800: oklch(57.802% 0.13829 132.375);
-  --avatar-green-200: oklch(82.146% 0.10519 154.481);
-  --avatar-green-800: oklch(55.196% 0.1248 150.768);
-  --avatar-teal-200: oklch(83.949% 0.08537 182.617);
-  --avatar-teal-800: oklch(57.358% 0.092 179.632);
-  --avatar-cyan-200: oklch(81.649% 0.07802 211.528);
-  --avatar-cyan-800: oklch(54.656% 0.08505 214.39);
-  --avatar-blue-200: oklch(74.949% 0.09578 248.783);
-  --avatar-blue-800: oklch(45.925% 0.11981 252.499);
-  --avatar-indigo-200: oklch(69.039% 0.10593 274.775);
-  --avatar-indigo-800: oklch(38.197% 0.13614 269.807);
+  /* Categorical Colors */
+  --categorical-purple-200: oklch(69.998% 0.12881 306.598);
+  --categorical-purple-800: oklch(39.825% 0.15525 302.768);
+  --categorical-violet-200: oklch(68.7% 0.11278 294.579);
+  --categorical-violet-800: oklch(37.751% 0.1414 289.195);
+  --categorical-pink-200: oklch(75% 0.12171 349.037);
+  --categorical-pink-800: oklch(49.567% 0.17587 355.522);
+  --categorical-magenta-200: oklch(73.607% 0.1553 324.203);
+  --categorical-magenta-800: oklch(46.026% 0.18151 324.267);
+  --categorical-red-200: oklch(69.219% 0.13185 21.008);
+  --categorical-red-800: oklch(43.588% 0.15193 26.224);
+  --categorical-orange-200: oklch(78.978% 0.10803 55.747);
+  --categorical-orange-800: oklch(51.737% 0.12922 49.443);
+  --categorical-amber-200: oklch(88.238% 0.11573 91.663);
+  --categorical-amber-800: oklch(65.465% 0.13065 86.837);
+  --categorical-yellow-200: oklch(92.328% 0.116 104.198);
+  --categorical-yellow-800: oklch(72.736% 0.14925 103.38);
+  --categorical-lime-200: oklch(84.773% 0.11998 130.068);
+  --categorical-lime-800: oklch(57.802% 0.13829 132.375);
+  --categorical-green-200: oklch(82.146% 0.10519 154.481);
+  --categorical-green-800: oklch(55.196% 0.1248 150.768);
+  --categorical-teal-200: oklch(83.949% 0.08537 182.617);
+  --categorical-teal-800: oklch(57.358% 0.092 179.632);
+  --categorical-cyan-200: oklch(81.649% 0.07802 211.528);
+  --categorical-cyan-800: oklch(54.656% 0.08505 214.39);
+  --categorical-blue-200: oklch(74.949% 0.09578 248.783);
+  --categorical-blue-800: oklch(45.925% 0.11981 252.499);
+  --categorical-indigo-200: oklch(69.039% 0.10593 274.775);
+  --categorical-indigo-800: oklch(38.197% 0.13614 269.807);
+
+  /* Avatar colour aliases */
+  --avatar-purple-200: var(--categorical-purple-200);
+  --avatar-purple-800: var(--categorical-purple-800);
+  --avatar-violet-200: var(--categorical-violet-200);
+  --avatar-violet-800: var(--categorical-violet-800);
+  --avatar-pink-200: var(--categorical-pink-200);
+  --avatar-pink-800: var(--categorical-pink-800);
+  --avatar-magenta-200: var(--categorical-magenta-200);
+  --avatar-magenta-800: var(--categorical-magenta-800);
+  --avatar-red-200: var(--categorical-red-200);
+  --avatar-red-800: var(--categorical-red-800);
+  --avatar-orange-200: var(--categorical-orange-200);
+  --avatar-orange-800: var(--categorical-orange-800);
+  --avatar-amber-200: var(--categorical-amber-200);
+  --avatar-amber-800: var(--categorical-amber-800);
+  --avatar-yellow-200: var(--categorical-yellow-200);
+  --avatar-yellow-800: var(--categorical-yellow-800);
+  --avatar-lime-200: var(--categorical-lime-200);
+  --avatar-lime-800: var(--categorical-lime-800);
+  --avatar-green-200: var(--categorical-green-200);
+  --avatar-green-800: var(--categorical-green-800);
+  --avatar-teal-200: var(--categorical-teal-200);
+  --avatar-teal-800: var(--categorical-teal-800);
+  --avatar-cyan-200: var(--categorical-cyan-200);
+  --avatar-cyan-800: var(--categorical-cyan-800);
+  --avatar-blue-200: var(--categorical-blue-200);
+  --avatar-blue-800: var(--categorical-blue-800);
+  --avatar-indigo-200: var(--categorical-indigo-200);
+  --avatar-indigo-800: var(--categorical-indigo-800);
 
   /* Slide Frame - Foundation */
   --slide-frame-padding-small: var(--space-300);
@@ -48,13 +78,29 @@
   --slide-frame-padding-large: var(--space-700);
   --slide-frame-gap: var(--space-400);
   --slide-frame-radius: var(--radius-300);
-  --slide-frame-shadow: var(--shadow-200);
+  --slide-frame-shadow: var(--shadow-medium);
 }
 
 /* ==================================================================================================== */
 /* 2. LIGHT MODE                                                                                        */
 /* ==================================================================================================== */
 html[data-theme="light"] {
+  /* Categorical */
+  --categorical-purple: var(--categorical-purple-200);
+  --categorical-violet: var(--categorical-violet-200);
+  --categorical-pink: var(--categorical-pink-200);
+  --categorical-magenta: var(--categorical-magenta-200);
+  --categorical-red: var(--categorical-red-200);
+  --categorical-orange: var(--categorical-orange-200);
+  --categorical-amber: var(--categorical-amber-200);
+  --categorical-yellow: var(--categorical-yellow-200);
+  --categorical-lime: var(--categorical-lime-200);
+  --categorical-green: var(--categorical-green-200);
+  --categorical-teal: var(--categorical-teal-200);
+  --categorical-cyan: var(--categorical-cyan-200);
+  --categorical-blue: var(--categorical-blue-200);
+  --categorical-indigo: var(--categorical-indigo-200);
+
   /* Form */
   --form-default-text-color: var(--grey-900);
   --form-success-text-color: var(--green-700);
@@ -72,45 +118,45 @@ html[data-theme="light"] {
   --form-success-border-color-hover: var(--green-700);
   --form-warning-border-color-hover: var(--orange-700);
   --form-error-border-color-hover: var(--red-700);
-  --form-default-placeholder-color: var(--grey-500);
   --form-default-placeholder-color-hover: var(--grey-700);
   --form-default-placeholder-color-focus: var(--grey-700);
-  --form-default-placeholder-color-disabled: var(--grey-500);
+
   /* Feedback - Border (Alerts & Messages) */
   --feedback-neutral-border-color: var(--black-opacity-20);
   --feedback-positive-border-color: var(--green-600);
   --feedback-info-border-color: var(--blue-600);
   --feedback-warning-border-color: var(--orange-600);
   --feedback-attention-border-color: var(--red-600);
+
   /* Feedback - Background (Alerts & Messages) */
   --feedback-neutral-background: var(--white);
   --feedback-positive-background: var(--green-100);
   --feedback-info-background: var(--blue-100);
   --feedback-warning-background: var(--orange-100);
   --feedback-attention-background: var(--red-100);
+
   /* Feedback - Icon (Alerts & Messages) */
   --feedback-neutral-icon: var(--grey-600);
   --feedback-positive-icon: var(--green-600);
   --feedback-info-icon: var(--blue-600);
   --feedback-warning-icon: var(--orange-600);
   --feedback-attention-icon: var(--red-600);
+
   /* Feedback - Text (Alerts & Messages) */
   --feedback-neutral-text: var(--grey-900);
   --feedback-positive-text: var(--green-900);
   --feedback-info-text: var(--blue-900);
   --feedback-warning-text: var(--orange-900);
   --feedback-attention-text: var(--red-900);
+
   /* Feedback - Action (Button & Link) */
   --feedback-neutral-action-background: var(--grey-200);
   --feedback-positive-action-background: var(--green-200);
   --feedback-info-action-background: var(--blue-200);
   --feedback-warning-action-background: var(--orange-200);
   --feedback-attention-action-background: var(--red-200);
+
   /* Action - Primary (Button & Link) */
-  --action-primary-border-color: var(--black-opacity-0);
-  --action-primary-border-color-hover: var(--black-opacity-0);
-  --action-primary-border-color-focus: var(--black-opacity-0);
-  --action-primary-border-color-disabled: var(--black-opacity-0);
   --action-primary-background: var(--grey-900);
   --action-primary-background-hover: var(--grey-1000);
   --action-primary-background-focus: var(--grey-1000);
@@ -118,248 +164,260 @@ html[data-theme="light"] {
   --action-primary-text-color: var(--white);
   --action-primary-text-color-hover: var(--white);
   --action-primary-text-color-focus: var(--white);
-  --action-primary-text-color-disabled: var(--grey-400);
+
   /* Action - Secondary (Button & Link) */
   --action-secondary-border-color: var(--grey-800);
   --action-secondary-border-color-hover: var(--grey-800);
   --action-secondary-border-color-focus: var(--grey-800);
   --action-secondary-border-color-disabled: var(--grey-400);
   --action-secondary-background: var(--white-opacity-0);
-  --action-secondary-background-hover: var(--grey-100);
-  --action-secondary-background-focus: var(--grey-100);
-  --action-secondary-background-disabled: var(--grey-100);
+  --action-secondary-background-hover: var(--grey-50);
+  --action-secondary-background-focus: var(--grey-50);
+  --action-secondary-background-disabled: var(--grey-50);
   --action-secondary-text-color: var(--grey-900);
   --action-secondary-text-color-hover: var(--grey-1000);
   --action-secondary-text-color-focus: var(--grey-1000);
   --action-secondary-text-color-disabled: var(--grey-400);
+
   /* Action - Tertiary (Button & Link) */
-  --action-tertiary-border-color: var(--black-opacity-0);
-  --action-tertiary-border-color-hover: var(--black-opacity-0);
-  --action-tertiary-border-color-focus: var(--black-opacity-0);
-  --action-tertiary-border-color-disabled: var(--black-opacity-0);
   --action-tertiary-background: var(--white-opacity-0);
   --action-tertiary-background-hover: var(--black-opacity-10);
   --action-tertiary-background-focus: var(--black-opacity-10);
-  --action-tertiary-background-disabled: var(--grey-100);
+  --action-tertiary-background-disabled: var(--grey-50);
   --action-tertiary-text-color: var(--grey-900);
   --action-tertiary-text-color-hover: var(--grey-1000);
   --action-tertiary-text-color-focus: var(--grey-1000);
   --action-tertiary-text-color-disabled: var(--grey-400);
-  /* Action - Overlay (Button & Link) */
-  --action-overlay-border-color: var(--white-opacity-30);
-  --action-overlay-border-color-hover: var(--white-opacity-30);
-  --action-overlay-border-color-focus: var(--white-opacity-30);
-  --action-overlay-border-color-disabled: var(--white-opacity-20);
-  --action-overlay-background: var(--black-opacity-60);
-  --action-overlay-background-hover: var(--black-opacity-70);
-  --action-overlay-background-focus: var(--black-opacity-70);
-  --action-overlay-background-disabled: var(--black-opacity-40);
-  --action-overlay-text-color: var(--white);
-  --action-overlay-text-color-hover: var(--white);
-  --action-overlay-text-color-focus: var(--white);
-  --action-overlay-text-color-disabled: var(--white-opacity-40);
+
   /* Action - Attention (Button & Link) */
-  --action-attention-border-color: var(--black-opacity-0);
-  --action-attention-border-color-hover: var(--black-opacity-0);
-  --action-attention-border-color-focus: var(--black-opacity-0);
-  --action-attention-border-color-disabled: var(--black-opacity-0);
   --action-attention-background: var(--red-500);
   --action-attention-background-hover: var(--red-600);
   --action-attention-background-focus: var(--red-600);
   --action-attention-background-disabled: var(--red-100);
-  --action-attention-text-color: var(--white);
-  --action-attention-text-color-hover: var(--white);
-  --action-attention-text-color-focus: var(--white);
-  --action-attention-text-color-disabled: var(--red-300);
+
   /* Action - Avatar (Button & Link) */
   --action-avatar-background: var(--grey-200);
   --action-avatar-background-hover: var(--grey-300);
+
   /* Surface */
-  --surface: var(--grey-200);
-  --surface-elevated-alpha: var(--white-opacity-50);
+  --surface: var(--grey-50);
   --surface-elevated-100: var(--white);
-  --surface-elevated-200: var(--grey-100);
-  --code-background: var(--surface-elevated-200);
-  --prompt-preview-dismiss-border-color: var(--black-opacity-30);
-  --prompt-preview-box-drop-shadow: drop-shadow(
-    0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-10)
-  );
-  --prompt-preview-surface: var(--surface-elevated-100);
-  --prompt-preview-code-background: var(--code-background);
+  --surface-elevated-200: var(--grey-50);
+  --surface-elevated-300: var(--grey-200);
+  --surface-recessed-100: var(--grey-300);
+  --surface-recessed-200: var(--grey-400);
+  --surface-recessed-300: var(--grey-500);
+
+  /* Prompt */
+  --prompt-preview-background: var(--white-opacity-10);
   --prompt-preview-accent-mix-100: 10%;
   --prompt-preview-accent-mix-200: 8%;
   --prompt-preview-accent-mix-300: 6%;
   --prompt-preview-accent-mix-400: 8%;
   --prompt-preview-accent-mix-500: 4%;
-  --prompt-preview-dismiss-secondary-background: var(--grey-100);
+  --prompt-preview-dismiss-secondary-background: var(--grey-50);
   --prompt-preview-dismiss-secondary-background-hover: var(--grey-200);
-  --prompt-preview-dismiss-secondary-border: var(--stroke-size-100) var(--stroke-solid) var(--black-opacity-30);
-  --prompt-preview-dismiss-secondary-border-hover: var(--stroke-size-100) var(--stroke-solid) var(--black-opacity-50);
-  --prompt-preview-top-shade-height: calc(var(--space-600) + var(--space-100));
-  --prompt-preview-top-shade-start: var(--black-opacity-10);
-  --prompt-preview-top-shade-end: var(--black-opacity-0);
-  --prompt-preview-top-shade-start-overlay: var(--black-opacity-50);
-  --prompt-preview-top-shade-end-overlay: var(--black-opacity-0);
-  --prompt-border-color-hover: var(--form-default-border-color-hover);
+  --prompt-preview-dismiss-secondary-border: var(--stroke-size-100) var(--stroke-solid) var(--black-opacity-20);
+  --prompt-preview-dismiss-secondary-border-hover: var(--stroke-size-100) var(--stroke-solid) var(--black-opacity-30);
+  --prompt-preview-top-shade-start: var(--white-opacity-20);
   --prompt-border-color-focus: var(--blue-500);
-  --prompt-hover-ring-color: var(--outline-color);
   --prompt-hover-glow-color: var(--mui-brand-400);
   --prompt-focus-ring-color: var(--mui-brand-400);
   --prompt-focus-glow-color: var(--mui-brand-400);
   --prompt-spectrum-start: var(--mui-brand-400);
-  --prompt-spectrum-mid: var(--outline-color);
   --prompt-spectrum-end: var(--blue-500);
-  --prompt-focus-surface-background: var(--surface-elevated-100);
-  --prompt-accent-primary: var(--prompt-spectrum-start);
-  --prompt-accent-secondary: var(--prompt-spectrum-end);
-  --prompt-hover-sweep-speed: 1400ms;
-  --prompt-focus-pulse-speed: 1400ms;
   --prompt-surface-filter: drop-shadow(0 var(--stroke-size-100) 0 var(--black-opacity-5));
-  --prompt-placeholder-color: var(--form-default-placeholder-color);
-  --prompt-placeholder-color-hover: var(--form-default-placeholder-color-hover);
-  --prompt-placeholder-color-focus: var(--form-default-placeholder-color-focus);
-  --slide-frame-background: var(--surface-elevated-100);
-  --slide-frame-border-color: var(--border-color);
-  --slide-frame-background-present: var(--slide-frame-background);
+
+  /* Media Player */
   --media-player-seek-color: var(--grey-1200);
   --media-player-seek-time-background: var(--surface-elevated-100);
   --media-player-seek-time-border-color: var(--border-color);
-  --range-input-accent-color: var(--media-player-seek-color);
-  --range-input-bubble-background: var(--media-player-seek-time-background);
-  --range-input-bubble-border-color: var(--media-player-seek-time-border-color);
-  --skeleton-background: var(--surface-elevated-200);
+  --media-player-range-track-color: var(--black-opacity-20);
+  --media-player-range-preview-color: var(--black-opacity-40);
+  --media-player-controls-peek-shadow: 0 var(--stroke-size-100) 0 0 var(--black-opacity-30);
+  --media-player-audio-controls-peek-background: var(--grey-900);
+  --media-player-audio-controls-peek-shadow: 0 var(--stroke-size-100) 0 0 var(--white-opacity-30);
+  --media-player-meta-text-shadow: none;
+  --media-player-dark-overlay-controls-background: var(--black-opacity-80);
+  --media-player-waveform-color: var(--black-opacity-50);
+  --media-player-waveform-mirror-color: var(--black-opacity-30);
+  --media-player-waveform-active-color: var(--media-player-range-color);
+  --media-player-waveform-active-mirror-color: var(--black-opacity-40);
+  --media-player-waveform-current-color: var(--black-opacity-80);
+  --media-player-waveform-current-mirror-color: var(--black-opacity-40);
+
+  /* Skeleton */
   --skeleton-highlight: var(--white-opacity-70);
-  --skeleton-radius: var(--radius-200);
-  --skeleton-animation-speed: 2000ms;
-  --skeleton-gap: var(--space-200);
-  --chip-input-background: var(--surface-elevated-alpha);
-  --surface-recessed-alpha: var(--black-opacity-10);
-  --surface-recessed-100: var(--grey-300);
-  --surface-recessed-200: var(--grey-400);
+
+  /* Shadow */
+  --shadow-color-thin: var(--grey-300);
+  --shadow-color-medium: var(--grey-300);
+  --shadow-color-thick: var(--grey-400);
+
   /* Stroke */
   --outline-color: var(--blue-500);
   --border-color: var(--black-opacity-20);
+
   /* Text */
   --text-color: var(--grey-900);
   --text-color-info: var(--blue-600);
   --text-color-success: var(--green-600);
   --text-color-warning: var(--orange-600);
   --text-color-error: var(--red-600);
-  --text-color-optional: var(--grey-500);
-  /* Overlay */
-  --backdrop-overlay: var(--black-opacity-70);
+  --text-color-optional: var(--grey-600);
+
   /* ================================================================================================== */
   /* Components                                                                                         */
   /* ================================================================================================== */
   /* Switch */
   --switch-track-background: var(--grey-300);
-  --switch-track-background-checked: var(--green-500);
   --switch-thumb-bg: var(--white);
-  --switch-icon: var(--icon-color-default);
+
   /* Icon */
   --icon-color-default: var(--black);
   --icon-color-inverted: var(--white);
-  --illustration-main-color-default: var(--icon-color-default);
-  --illustration-main-color-inverted: var(--icon-color-inverted);
   --illustration-shadow-color-default: var(--black-opacity-20);
   --illustration-shadow-color-inverted: var(--white-opacity-20);
-  --illustration-size-small: 8rem;
-  --illustration-size-medium: 9.6rem;
-  --illustration-size-large: 11.2rem;
-  --illustration-size-x-large: 12.8rem;
+
   /* Badge */
-  --badge-text-color: var(--grey-100);
-  --badge-background-neutral: var(--grey-600);
-  --badge-background-positive: var(--green-600);
-  --badge-background-warning: var(--orange-600);
-  --badge-background-attention: var(--red-600);
-  --badge-background-overlay: var(--black-opacity-60);
+  --badge-background-neutral: var(--grey-200);
+  --badge-background-positive: color-mix(in srgb, var(--green-300) 100%, white 30%);
+  --badge-background-warning: color-mix(in srgb, var(--orange-300) 100%, white 30%);
+  --badge-background-attention: color-mix(in srgb, var(--red-300) 100%, white 30%);
+  --badge-background-grey: color-mix(in srgb, var(--grey-200) 100%, black 0%);
+  --badge-background-purple: color-mix(in srgb, var(--categorical-purple-200) 100%, white 60%);
+  --badge-background-violet: color-mix(in srgb, var(--categorical-violet-200) 100%, white 60%);
+  --badge-background-pink: color-mix(in srgb, var(--categorical-pink-200) 100%, white 20%);
+  --badge-background-magenta: color-mix(in srgb, var(--categorical-magenta-200) 100%, white 20%);
+  --badge-background-red: color-mix(in srgb, var(--categorical-red-200) 100%, white 40%);
+  --badge-background-orange: color-mix(in srgb, var(--categorical-orange-200) 100%, white 20%);
+  --badge-background-amber: color-mix(in srgb, var(--categorical-amber-200) 92%, white 0%);
+  --badge-background-yellow: color-mix(in srgb, var(--categorical-yellow-200) 88%, white 0%);
+  --badge-background-lime: color-mix(in srgb, var(--categorical-lime-200) 100%, black 0%);
+  --badge-background-green: color-mix(in srgb, var(--categorical-green-200) 100%, black 0%);
+  --badge-background-teal: color-mix(in srgb, var(--categorical-teal-200) 100%, black 0%);
+  --badge-background-cyan: color-mix(in srgb, var(--categorical-cyan-200) 100%, black 0%);
+  --badge-background-blue: color-mix(in srgb, var(--categorical-blue-200) 100%, white 40%);
+  --badge-background-indigo: color-mix(in srgb, var(--categorical-indigo-200) 100%, white 40%);
   --badge-text-color-overlay: var(--white);
-  --badge-border-overlay: var(--stroke-size-100) var(--stroke-solid) var(--white-opacity-30);
+
   /* Heading */
   --heading-text-color: var(--grey-1000);
+
   /* Link */
   --link-text-color-default: var(--grey-900);
   --link-text-color-default-hover: var(--grey-1000);
   --link-text-color-default-focus: var(--grey-1000);
   --link-text-color-default-disabled: var(--grey-800);
+
   /* Input */
   --input-background: var(--white);
-  --input-background-disabled: var(--grey-100);
+  --input-background-disabled: var(--grey-50);
 
   /* Checkbox */
   --checkbox-background: var(--white);
   --checkbox-background-checked: var(--grey-900);
   --checkbox-icon-color-checked: var(--grey-200);
-
-  --checkbox-background-disabled: var(--grey-100);
+  --checkbox-background-disabled: var(--grey-50);
   --checkbox-background-checked-disabled: var(--grey-800);
-  --checkbox-icon-color-checked-disabled: var(--grey-100);
+  --checkbox-icon-color-checked-disabled: var(--grey-50);
+
   /* Radio */
   --radio-background: var(--white);
-  --radio-border-color: var(--form-default-border-color);
-  --radio-border-color-hover: var(--form-default-border-color-hover);
   --radio-border-color-checked: var(--grey-900);
   --radio-dot-color-checked: var(--grey-900);
-  --radio-background-disabled: var(--grey-100);
+  --radio-background-disabled: var(--grey-50);
   --radio-border-color-disabled: var(--grey-300);
-  --radio-dot-color-checked-disabled: var(--grey-500);
 
   /* Addon */
-  --addon-background: var(--grey-100);
+  --addon-background: var(--grey-50);
+
   /* Tabs */
   --tab-border-color: var(--grey-300);
-
   --tab-background: var(--grey-200);
   --tab-icon: var(--grey-900);
   --tab-text-color: var(--grey-900);
-
   --tab-background-active: var(--white);
   --tab-icon-active: var(--black);
   --tab-text-color-active: var(--black);
   --tab-shadow-active-color: var(--black-opacity-10);
-  --tab-shadow-active: 0 0 var(--stroke-size-400) var(--stroke-size-400) var(--tab-shadow-active-color);
-  --tabs-ghost-box-shadow: none;
+  --tab-dot-color: var(--grey-300);
+  --tab-dot-color-active: var(--grey-900);
 
   /* Carousel */
   --carousel-background: var(--white);
 
-  /* Slat */
-  --slat-background: var(--white-opacity-60);
-  --slat-background-hover: var(--white-opacity-90);
-  --slat-card-background: var(--surface-elevated-100);
-  --slat-card-background-hover: var(--surface-elevated-200);
-  --slat-avatar-background: var(--black-opacity-10);
-  --slat-avatar-background-hover: var(--black-opacity-20);
-  --slat-card-avatar-background: var(--black-opacity-10);
-  --slat-card-avatar-background-hover: var(--black-opacity-20);
-
   /* Avatar */
   --avatar-background-neutral: var(--grey-200);
   --avatar-background-positive: var(--green-200);
   --avatar-background-warning: var(--orange-200);
   --avatar-background-attention: var(--red-200);
 
-  --avatar-background-purple: var(--avatar-purple-200);
-  --avatar-background-violet: var(--avatar-violet-200);
-  --avatar-background-pink: var(--avatar-pink-200);
-  --avatar-background-magenta: var(--avatar-magenta-200);
-  --avatar-background-red: var(--avatar-red-200);
-  --avatar-background-orange: var(--avatar-orange-200);
-  --avatar-background-amber: var(--avatar-amber-200);
-  --avatar-background-yellow: var(--avatar-yellow-200);
-  --avatar-background-lime: var(--avatar-lime-200);
-  --avatar-background-green: var(--avatar-green-200);
-  --avatar-background-teal: var(--avatar-teal-200);
-  --avatar-background-cyan: var(--avatar-cyan-200);
-  --avatar-background-blue: var(--avatar-blue-200);
-  --avatar-background-indigo: var(--avatar-indigo-200);
+  /* Status */
+  --status-positive-background: var(--green-100);
+  --status-positive-border-color: var(--green-500);
+  --status-positive-text-color: var(--green-1000);
+  --status-info-background: var(--blue-100);
+  --status-info-border-color: var(--blue-500);
+  --status-info-text-color: var(--blue-1000);
+  --status-warning-background: var(--orange-100);
+  --status-warning-border-color: var(--orange-500);
+  --status-warning-text-color: var(--orange-1000);
+  --status-attention-background: var(--red-100);
+  --status-attention-border-color: var(--red-500);
+  --status-attention-text-color: var(--red-1000);
+  --status-grey-background: color-mix(in srgb, var(--grey-200) 72%, white 28%);
+  --status-grey-border-color: var(--grey-400);
+  --status-grey-text-color: color-mix(in srgb, var(--grey-1000) 72%, black 28%);
+  --status-purple-background: color-mix(in srgb, var(--categorical-purple-200) 60%, white 95%);
+  --status-purple-border-color: color-mix(in srgb, var(--categorical-purple-200) 78%, black 12%);
+  --status-purple-text-color: color-mix(in srgb, var(--categorical-purple-800) 72%, black 28%);
+  --status-violet-background: color-mix(in srgb, var(--categorical-violet-200) 60%, white 95%);
+  --status-violet-border-color: color-mix(in srgb, var(--categorical-violet-200) 78%, black 12%);
+  --status-violet-text-color: color-mix(in srgb, var(--categorical-violet-800) 72%, black 28%);
+  --status-pink-background: color-mix(in srgb, var(--categorical-pink-200) 60%, white 95%);
+  --status-pink-border-color: color-mix(in srgb, var(--categorical-pink-200) 78%, black 12%);
+  --status-pink-text-color: color-mix(in srgb, var(--categorical-pink-800) 72%, black 28%);
+  --status-magenta-background: color-mix(in srgb, var(--categorical-magenta-200) 60%, white 95%);
+  --status-magenta-border-color: color-mix(in srgb, var(--categorical-magenta-200) 78%, black 12%);
+  --status-magenta-text-color: color-mix(in srgb, var(--categorical-magenta-800) 72%, black 28%);
+  --status-red-background: color-mix(in srgb, var(--categorical-red-200) 60%, white 95%);
+  --status-red-border-color: color-mix(in srgb, var(--categorical-red-200) 78%, black 12%);
+  --status-red-text-color: color-mix(in srgb, var(--categorical-red-800) 72%, black 28%);
+  --status-orange-background: color-mix(in srgb, var(--categorical-orange-200) 60%, white 95%);
+  --status-orange-border-color: color-mix(in srgb, var(--categorical-orange-200) 78%, black 12%);
+  --status-orange-text-color: color-mix(in srgb, var(--categorical-orange-800) 72%, black 28%);
+  --status-amber-background: color-mix(in srgb, var(--categorical-amber-200) 60%, white 95%);
+  --status-amber-border-color: color-mix(in srgb, var(--categorical-amber-200) 78%, black 24%);
+  --status-amber-text-color: color-mix(in srgb, var(--categorical-amber-800) 72%, black 28%);
+  --status-yellow-background: color-mix(in srgb, var(--categorical-yellow-200) 60%, white 95%);
+  --status-yellow-border-color: color-mix(in srgb, var(--categorical-yellow-200) 84%, black 33%);
+  --status-yellow-text-color: color-mix(in srgb, var(--categorical-yellow-800) 62%, black 38%);
+  --status-lime-background: color-mix(in srgb, var(--categorical-lime-200) 60%, white 95%);
+  --status-lime-border-color: color-mix(in srgb, var(--categorical-lime-200) 78%, black 22%);
+  --status-lime-text-color: color-mix(in srgb, var(--categorical-lime-800) 72%, black 28%);
+  --status-green-background: color-mix(in srgb, var(--categorical-green-200) 60%, white 95%);
+  --status-green-border-color: color-mix(in srgb, var(--categorical-green-200) 78%, black 24%);
+  --status-green-text-color: color-mix(in srgb, var(--categorical-green-800) 72%, black 28%);
+  --status-teal-background: color-mix(in srgb, var(--categorical-teal-200) 60%, white 95%);
+  --status-teal-border-color: color-mix(in srgb, var(--categorical-teal-200) 78%, black 20%);
+  --status-teal-text-color: color-mix(in srgb, var(--categorical-teal-800) 72%, black 28%);
+  --status-cyan-background: color-mix(in srgb, var(--categorical-cyan-200) 60%, white 95%);
+  --status-cyan-border-color: color-mix(in srgb, var(--categorical-cyan-200) 78%, black 18%);
+  --status-cyan-text-color: color-mix(in srgb, var(--categorical-cyan-800) 72%, black 28%);
+  --status-blue-background: color-mix(in srgb, var(--categorical-blue-200) 60%, white 95%);
+  --status-blue-border-color: color-mix(in srgb, var(--categorical-blue-200) 78%, black 12%);
+  --status-blue-text-color: color-mix(in srgb, var(--categorical-blue-800) 72%, black 28%);
+  --status-indigo-background: color-mix(in srgb, var(--categorical-indigo-200) 60%, white 95%);
+  --status-indigo-border-color: color-mix(in srgb, var(--categorical-indigo-200) 78%, black 12%);
+  --status-indigo-text-color: color-mix(in srgb, var(--categorical-indigo-800) 72%, black 28%);
 
   /* Chip */
   --chip-background: var(--white);
   --chip-background-hover: var(--white);
   --chip-background-focus: var(--white);
   --chip-background-active: var(--white);
+  --chip-background-disabled: var(--grey-50);
   --chip-border-color: var(--grey-200);
   --chip-border-color-hover: var(--grey-300);
   --chip-border-color-focus: var(--grey-300);
@@ -367,12 +425,12 @@ html[data-theme="light"] {
   --chip-text-color-active: var(--grey-1000);
   --chip-icon-fill: var(--black);
   --chip-filter: drop-shadow(0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-5));
-  --chip-dismiss-action-background: var(--grey-150);
+  --chip-dismiss-action-background: var(--grey-100);
   --chip-dismiss-action-background-hover: var(--black-opacity-0);
-  --chip-dismiss-action-filter: drop-shadow(0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-0));
+  --chip-dismiss-action-background-disabled: var(--grey-200);
 
   /* Dropdown */
-  --dropdown-background: var(--grey-100);
+  --dropdown-background: var(--grey-50);
   --dropdown-border-color: var(--black-opacity-20);
   --dropdown-shadow-color: var(--black-opacity-10);
   --dropdown-button-background-hover: var(--white);
@@ -382,39 +440,51 @@ html[data-theme="light"] {
   --progress-track-background: var(--grey-200);
   --progress-loading-bar-100: var(--grey-200);
   --progress-loading-bar-200: var(--grey-300);
-  --progress-syncing-bar-background: var(--progress-bar-background);
 
   /* Stepper */
   --stepper-color: var(--grey-700);
-  --stepper-background-active: var(--stepper-color);
   --stepper-background-inactive: var(--white);
-  --stepper-border-color: var(--stepper-color);
-  --stepper-text-color-active: var(--stepper-color);
   --stepper-icon-color: var(--white);
-  --stepper-success-color: var(--stepper-color);
   --stepper-warning-color: var(--orange-700);
   --stepper-error-color: var(--text-color-error);
-  --stepper-disabled-color: var(--text-color-optional);
   --stepper-disabled-opacity: 0.75;
 
   /* Dialog */
   --dialog-background: var(--white);
-  --dialog-border: none;
 
   /* Drawer */
   --drawer-background: var(--white);
+  --drawer-resize-rail-background: var(--grey-200);
+  --drawer-resize-rail-inner-background: var(--white);
+  --drawer-resize-rail-threshold-indicator: var(--black);
 }
 
 /* ==================================================================================================== */
 /* 3. DARK MODE                                                                                         */
 /* ==================================================================================================== */
 html[data-theme="dark"] {
+  /* Categorical */
+  --categorical-purple: var(--categorical-purple-800);
+  --categorical-violet: var(--categorical-violet-800);
+  --categorical-pink: var(--categorical-pink-800);
+  --categorical-magenta: var(--categorical-magenta-800);
+  --categorical-red: var(--categorical-red-800);
+  --categorical-orange: var(--categorical-orange-800);
+  --categorical-amber: var(--categorical-amber-800);
+  --categorical-yellow: var(--categorical-yellow-800);
+  --categorical-lime: var(--categorical-lime-800);
+  --categorical-green: var(--categorical-green-800);
+  --categorical-teal: var(--categorical-teal-800);
+  --categorical-cyan: var(--categorical-cyan-800);
+  --categorical-blue: var(--categorical-blue-800);
+  --categorical-indigo: var(--categorical-indigo-800);
+
   /* Form */
   --form-default-text-color: var(--grey-200);
   --form-success-text-color: var(--green-400);
   --form-warning-text-color: var(--orange-400);
   --form-error-text-color: var(--red-400);
-  --form-default-text-color-hover: var(--grey-100);
+  --form-default-text-color-hover: var(--grey-50);
   --form-success-text-color-hover: var(--green-300);
   --form-warning-text-color-hover: var(--orange-300);
   --form-error-text-color-hover: var(--red-300);
@@ -426,53 +496,53 @@ html[data-theme="dark"] {
   --form-success-border-color-hover: var(--green-300);
   --form-warning-border-color-hover: var(--orange-300);
   --form-error-border-color-hover: var(--red-300);
-  --form-default-placeholder-color: var(--grey-500);
   --form-default-placeholder-color-hover: var(--grey-400);
   --form-default-placeholder-color-focus: var(--grey-400);
-  --form-default-placeholder-color-disabled: var(--grey-500);
+
   /* Feedback - Border (Alerts & Messages) */
   --feedback-neutral-border-color: var(--white-opacity-20);
   --feedback-positive-border-color: var(--green-400);
   --feedback-info-border-color: var(--blue-400);
   --feedback-warning-border-color: var(--orange-400);
   --feedback-attention-border-color: var(--red-400);
+
   /* Feedback - Background (Alerts & Messages) */
   --feedback-neutral-background: var(--grey-800);
   --feedback-positive-background: var(--green-800);
   --feedback-info-background: var(--blue-800);
   --feedback-warning-background: var(--orange-800);
   --feedback-attention-background: var(--red-800);
+
   /* Feedback - Icon (Alerts & Messages) */
   --feedback-neutral-icon: var(--grey-200);
   --feedback-positive-icon: var(--green-200);
   --feedback-info-icon: var(--blue-200);
   --feedback-warning-icon: var(--orange-200);
   --feedback-attention-icon: var(--red-200);
+
   /* Feedback - Text (Alerts & Messages) */
-  --feedback-neutral-text: var(--grey-100);
+  --feedback-neutral-text: var(--grey-50);
   --feedback-positive-text: var(--green-100);
   --feedback-info-text: var(--blue-100);
   --feedback-warning-text: var(--orange-100);
   --feedback-attention-text: var(--red-100);
+
   /* Feedback - Action (Button & Link) */
   --feedback-neutral-action-background: var(--grey-900);
   --feedback-positive-action-background: var(--green-900);
   --feedback-info-action-background: var(--blue-900);
   --feedback-warning-action-background: var(--orange-900);
   --feedback-attention-action-background: var(--red-900);
+
   /* Action - Primary (Button & Link) */
-  --action-primary-border-color: var(--black-opacity-0);
-  --action-primary-border-color-hover: var(--black-opacity-0);
-  --action-primary-border-color-focus: var(--black-opacity-0);
-  --action-primary-border-color-disabled: var(--black-opacity-0);
   --action-primary-background: var(--grey-200);
-  --action-primary-background-hover: var(--grey-100);
-  --action-primary-background-focus: var(--grey-100);
+  --action-primary-background-hover: var(--grey-50);
+  --action-primary-background-focus: var(--grey-50);
   --action-primary-background-disabled: var(--grey-800);
   --action-primary-text-color: var(--grey-900);
   --action-primary-text-color-hover: var(--grey-900);
   --action-primary-text-color-focus: var(--grey-900);
-  --action-primary-text-color-disabled: var(--grey-400);
+
   /* Action - Secondary (Button & Link) */
   --action-secondary-border-color: var(--grey-200);
   --action-secondary-border-color-hover: var(--grey-200);
@@ -482,65 +552,42 @@ html[data-theme="dark"] {
   --action-secondary-background-hover: var(--grey-800);
   --action-secondary-background-focus: var(--grey-800);
   --action-secondary-background-disabled: var(--grey-900);
-  --action-secondary-text-color: var(--grey-100);
-  --action-secondary-text-color-hover: var(--grey-100);
-  --action-secondary-text-color-focus: var(--grey-100);
+  --action-secondary-text-color: var(--grey-50);
+  --action-secondary-text-color-hover: var(--grey-50);
+  --action-secondary-text-color-focus: var(--grey-50);
   --action-secondary-text-color-disabled: var(--grey-600);
+
   /* Action - Tertiary (Button & Link) */
-  --action-tertiary-border-color: var(--black-opacity-0);
-  --action-tertiary-border-color-hover: var(--black-opacity-0);
-  --action-tertiary-border-color-focus: var(--black-opacity-0);
-  --action-tertiary-border-color-disabled: var(--black-opacity-0);
   --action-tertiary-background: var(--black-opacity-0);
   --action-tertiary-background-hover: var(--white-opacity-10);
   --action-tertiary-background-focus: var(--white-opacity-10);
   --action-tertiary-background-disabled: var(--grey-900);
-  --action-tertiary-text-color: var(--grey-100);
-  --action-tertiary-text-color-hover: var(--grey-100);
-  --action-tertiary-text-color-focus: var(--grey-100);
+  --action-tertiary-text-color: var(--grey-50);
+  --action-tertiary-text-color-hover: var(--grey-50);
+  --action-tertiary-text-color-focus: var(--grey-50);
   --action-tertiary-text-color-disabled: var(--grey-600);
-  /* Action - Overlay (Button & Link) */
-  --action-overlay-border-color: var(--white-opacity-30);
-  --action-overlay-border-color-hover: var(--white-opacity-30);
-  --action-overlay-border-color-focus: var(--white-opacity-30);
-  --action-overlay-border-color-disabled: var(--white-opacity-20);
-  --action-overlay-background: var(--black-opacity-60);
-  --action-overlay-background-hover: var(--black-opacity-70);
-  --action-overlay-background-focus: var(--black-opacity-70);
-  --action-overlay-background-disabled: var(--black-opacity-40);
-  --action-overlay-text-color: var(--white);
-  --action-overlay-text-color-hover: var(--white);
-  --action-overlay-text-color-focus: var(--white);
-  --action-overlay-text-color-disabled: var(--white-opacity-40);
+
   /* Action - Attention (Button & Link) */
-  --action-attention-border-color: var(--black-opacity-0);
-  --action-attention-border-color-hover: var(--black-opacity-0);
-  --action-attention-border-color-focus: var(--black-opacity-0);
-  --action-attention-border-color-disabled: var(--black-opacity-0);
   --action-attention-background: var(--red-600);
   --action-attention-background-hover: var(--red-700);
   --action-attention-background-focus: var(--red-700);
   --action-attention-background-disabled: var(--red-900);
-  --action-attention-text-color: var(--white);
-  --action-attention-text-color-hover: var(--white);
-  --action-attention-text-color-focus: var(--white);
-  --action-attention-text-color-disabled: var(--red-300);
+
   /* Action - Avatar (Button & Link) */
   --action-avatar-background: var(--grey-1000);
   --action-avatar-background-hover: var(--grey-1100);
 
   /* Surface */
-  --surface: var(--grey-1000);
-  --surface-elevated-alpha: var(--white-opacity-10);
+  --surface: var(--grey-900);
   --surface-elevated-100: var(--grey-800);
   --surface-elevated-200: var(--grey-900);
-  --code-background: var(--surface-elevated-200);
-  --prompt-preview-dismiss-border-color: var(--white-opacity-30);
-  --prompt-preview-box-drop-shadow: drop-shadow(
-    0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-20)
-  );
-  --prompt-preview-surface: var(--surface-elevated-200);
-  --prompt-preview-code-background: var(--code-background);
+  --surface-elevated-300: var(--grey-1000);
+  --surface-recessed-100: var(--grey-1200);
+  --surface-recessed-200: var(--grey-1300);
+  --surface-recessed-300: var(--grey-1400);
+
+  /* Prompt */
+  --prompt-preview-background: var(--black-opacity-10);
   --prompt-preview-accent-mix-100: 14%;
   --prompt-preview-accent-mix-200: 10%;
   --prompt-preview-accent-mix-300: 8%;
@@ -550,99 +597,101 @@ html[data-theme="dark"] {
   --prompt-preview-dismiss-secondary-background-hover: var(--surface-recessed-200);
   --prompt-preview-dismiss-secondary-border: var(--stroke-size-100) var(--stroke-solid) var(--white-opacity-30);
   --prompt-preview-dismiss-secondary-border-hover: var(--stroke-size-100) var(--stroke-solid) var(--white-opacity-50);
-  --prompt-preview-top-shade-height: calc(var(--space-600) + var(--space-100));
-  --prompt-preview-top-shade-start: var(--black-opacity-30);
-  --prompt-preview-top-shade-end: var(--black-opacity-0);
-  --prompt-preview-top-shade-start-overlay: var(--black-opacity-50);
-  --prompt-preview-top-shade-end-overlay: var(--black-opacity-0);
-  --prompt-border-color-hover: var(--form-default-border-color-hover);
+  --prompt-preview-top-shade-start: var(--black-opacity-0);
   --prompt-border-color-focus: var(--blue-300);
-  --prompt-hover-ring-color: var(--outline-color);
   --prompt-hover-glow-color: var(--mui-brand-300);
   --prompt-focus-ring-color: var(--mui-brand-300);
   --prompt-focus-glow-color: var(--mui-brand-300);
   --prompt-spectrum-start: var(--mui-brand-300);
-  --prompt-spectrum-mid: var(--outline-color);
   --prompt-spectrum-end: var(--blue-300);
-  --prompt-focus-surface-background: var(--grey-1200);
-  --prompt-accent-primary: var(--prompt-spectrum-start);
-  --prompt-accent-secondary: var(--prompt-spectrum-end);
-  --prompt-hover-sweep-speed: 1400ms;
-  --prompt-focus-pulse-speed: 1400ms;
   --prompt-surface-filter: drop-shadow(0 var(--stroke-size-100) 0 var(--black-opacity-10));
-  --prompt-placeholder-color: var(--form-default-placeholder-color);
-  --prompt-placeholder-color-hover: var(--form-default-placeholder-color-hover);
-  --prompt-placeholder-color-focus: var(--form-default-placeholder-color-focus);
-  --slide-frame-background: var(--surface-elevated-100);
-  --slide-frame-border-color: var(--border-color);
-  --slide-frame-background-present: var(--slide-frame-background);
+
+  /* Media Player */
   --media-player-seek-color: var(--white);
   --media-player-seek-time-background: var(--surface-recessed-100);
   --media-player-seek-time-border-color: var(--white-opacity-20);
-  --range-input-accent-color: var(--media-player-seek-color);
-  --range-input-bubble-background: var(--media-player-seek-time-background);
-  --range-input-bubble-border-color: var(--media-player-seek-time-border-color);
-  --skeleton-background: var(--surface-elevated-200);
+  --media-player-range-track-color: var(--white-opacity-20);
+  --media-player-range-preview-color: var(--white-opacity-50);
+  --media-player-controls-peek-shadow: 0 var(--stroke-size-100) 0 0 var(--white-opacity-30);
+  --media-player-audio-controls-peek-background: var(--white);
+  --media-player-audio-controls-peek-shadow: 0 var(--stroke-size-100) 0 0 var(--black-opacity-30);
+  --media-player-meta-text-shadow: 0 var(--stroke-size-100) var(--stroke-size-300) var(--black-opacity-30);
+  --media-player-dark-overlay-controls-background: var(--black-opacity-90);
+  --media-player-waveform-color: var(--white-opacity-50);
+  --media-player-waveform-mirror-color: var(--white-opacity-30);
+  --media-player-waveform-active-color: var(--white);
+  --media-player-waveform-active-mirror-color: var(--white-opacity-60);
+  --media-player-waveform-current-color: var(--white-opacity-80);
+  --media-player-waveform-current-mirror-color: var(--white-opacity-40);
+
+  /* Skeleton */
   --skeleton-highlight: var(--white-opacity-30);
-  --skeleton-radius: var(--radius-200);
-  --skeleton-animation-speed: 2000ms;
-  --skeleton-gap: var(--space-200);
-  --chip-input-background: var(--grey-900);
-  --surface-elevated-300: var(--grey-1000);
-  --surface-recessed-alpha: var(--black-opacity-30);
-  --surface-recessed-100: var(--grey-1000);
-  --surface-recessed-200: var(--grey-1100);
-  --surface-recessed-300: var(--grey-1200);
+
+  /* Shadow */
+  --shadow-color-thin: var(--black-opacity-20);
+  --shadow-color-medium: var(--black-opacity-20);
+  --shadow-color-thick: var(--black-opacity-30);
+
   /* Stroke */
   --outline-color: var(--blue-300);
   --border-color: var(--white-opacity-20);
+
   /* Text */
-  --text-color: var(--grey-200);
+  --text-color: var(--grey-100);
   --text-color-info: var(--blue-400);
   --text-color-success: var(--green-400);
   --text-color-warning: var(--orange-400);
   --text-color-error: var(--red-400);
-  --text-color-optional: var(--grey-400);
-  /* Overlay */
-  --backdrop-overlay: var(--black-opacity-70);
+  --text-color-optional: var(--grey-300);
+
   /* ================================================================================================== */
   /* Components                                                                                         */
   /* ================================================================================================== */
   /* Switch */
   --switch-track-background: var(--grey-600);
-  --switch-track-background-checked: var(--green-500);
   --switch-thumb-bg: var(--black);
-  --switch-icon: var(--icon-color-default);
+
   /* Icon */
   --icon-color-default: var(--white);
   --icon-color-inverted: var(--black);
-  --illustration-main-color-default: var(--icon-color-default);
-  --illustration-main-color-inverted: var(--icon-color-inverted);
   --illustration-shadow-color-default: var(--black-opacity-30);
   --illustration-shadow-color-inverted: var(--black-opacity-20);
-  --illustration-size-small: 8rem;
-  --illustration-size-medium: 9.6rem;
-  --illustration-size-large: 11.2rem;
-  --illustration-size-x-large: 12.8rem;
+
   /* Badge */
-  --badge-text-color: var(--grey-900);
   --badge-background-neutral: var(--grey-400);
   --badge-background-positive: var(--green-400);
-  --badge-background-warning: var(--orange-400);
-  --badge-background-attention: var(--red-400);
-  --badge-background-overlay: var(--black-opacity-60);
+  --badge-background-warning: color-mix(in srgb, var(--orange-400) 100%, white 25%);
+  --badge-background-attention: color-mix(in srgb, var(--red-400) 100%, white 25%);
+  --badge-background-grey: color-mix(in srgb, var(--grey-400) 100%, white 0%);
+  --badge-background-purple: color-mix(in srgb, var(--categorical-purple-200) 100%, white 0%);
+  --badge-background-violet: color-mix(in srgb, var(--categorical-violet-200) 100%, white 0%);
+  --badge-background-pink: color-mix(in srgb, var(--categorical-pink-200) 100%, white 0%);
+  --badge-background-magenta: color-mix(in srgb, var(--categorical-magenta-200) 100%, white 0%);
+  --badge-background-red: color-mix(in srgb, var(--categorical-red-200) 100%, white 0%);
+  --badge-background-orange: color-mix(in srgb, var(--categorical-orange-200) 100%, white 0%);
+  --badge-background-amber: color-mix(in srgb, var(--categorical-amber-200) 100%, white 0%);
+  --badge-background-yellow: color-mix(in srgb, var(--categorical-yellow-200) 100%, white 0%);
+  --badge-background-lime: color-mix(in srgb, var(--categorical-lime-200) 100%, white 0%);
+  --badge-background-green: color-mix(in srgb, var(--categorical-green-200) 100%, white 0%);
+  --badge-background-teal: color-mix(in srgb, var(--categorical-teal-200) 100%, white 0%);
+  --badge-background-cyan: color-mix(in srgb, var(--categorical-cyan-200) 100%, white 0%);
+  --badge-background-blue: color-mix(in srgb, var(--categorical-blue-200) 100%, white 0%);
+  --badge-background-indigo: color-mix(in srgb, var(--categorical-indigo-200) 100%, white 0%);
   --badge-text-color-overlay: var(--grey-300);
-  --badge-border-overlay: var(--stroke-size-100) var(--stroke-solid) var(--white-opacity-30);
+
   /* Heading */
-  --heading-text-color: var(--grey-100);
+  --heading-text-color: var(--grey-50);
+
   /* Link */
   --link-text-color-default: var(--grey-200);
-  --link-text-color-default-hover: var(--grey-100);
-  --link-text-color-default-focus: var(--grey-100);
+  --link-text-color-default-hover: var(--grey-50);
+  --link-text-color-default-focus: var(--grey-50);
   --link-text-color-default-disabled: var(--grey-600);
+
   /* Input */
   --input-background: var(--grey-900);
   --input-background-disabled: var(--grey-800);
+
   /* Checkbox */
   --checkbox-background: var(--grey-900);
   --checkbox-background-checked: var(--grey-200);
@@ -650,84 +699,117 @@ html[data-theme="dark"] {
   --checkbox-background-disabled: var(--grey-800);
   --checkbox-background-checked-disabled: var(--grey-500);
   --checkbox-icon-color-checked-disabled: var(--grey-900);
+
   /* Radio */
   --radio-background: var(--grey-900);
-  --radio-border-color: var(--form-default-border-color);
-  --radio-border-color-hover: var(--form-default-border-color-hover);
   --radio-border-color-checked: var(--grey-200);
   --radio-dot-color-checked: var(--grey-200);
   --radio-background-disabled: var(--grey-800);
   --radio-border-color-disabled: var(--grey-600);
-  --radio-dot-color-checked-disabled: var(--grey-500);
+
   /* Addon */
   --addon-background: var(--grey-1000);
+
   /* Tabs */
   --tab-border-color: var(--grey-800);
-
-  --tab-background: var(--grey-1100);
+  --tab-background: var(--grey-1000);
   --tab-icon: var(--grey-400);
   --tab-text-color: var(--grey-400);
-
   --tab-background-active: var(--grey-700);
   --tab-icon-active: var(--white);
   --tab-text-color-active: var(--white);
-  --tab-shadow-active-color: var(--black-opacity-40);
-  --tab-shadow-active: 0 0 var(--stroke-size-400) var(--stroke-size-400) var(--tab-shadow-active-color);
-  --tabs-ghost-box-shadow: none;
+  --tab-shadow-active-color: var(--black-opacity-20);
+  --tab-dot-color: var(--grey-900);
+  --tab-dot-color-active: var(--grey-400);
 
   /* Carousel */
   --carousel-background: var(--grey-700);
 
-  /* Slat */
-  --slat-background: var(--black-opacity-20);
-  --slat-background-hover: var(--black-opacity-50);
-  --slat-card-background: var(--surface-elevated-100);
-  --slat-card-background-hover: var(--surface-elevated-200);
-  --slat-avatar-background: var(--black-opacity-20);
-  --slat-avatar-background-hover: var(--black-opacity-40);
-  --slat-card-avatar-background: var(--black-opacity-30);
-  --slat-card-avatar-background-hover: var(--black-opacity-40);
-
   /* Avatar */
-  --avatar-background-neutral: var(--grey-900);
+  --avatar-background-neutral: var(--grey-1000);
   --avatar-background-positive: var(--green-900);
   --avatar-background-warning: var(--orange-900);
   --avatar-background-attention: var(--red-900);
 
-  --avatar-background-purple: var(--avatar-purple-800);
-  --avatar-background-violet: var(--avatar-violet-800);
-  --avatar-background-pink: var(--avatar-pink-800);
-  --avatar-background-magenta: var(--avatar-magenta-800);
-  --avatar-background-red: var(--avatar-red-800);
-  --avatar-background-orange: var(--avatar-orange-800);
-  --avatar-background-amber: var(--avatar-amber-800);
-  --avatar-background-yellow: var(--avatar-yellow-800);
-  --avatar-background-lime: var(--avatar-lime-800);
-  --avatar-background-green: var(--avatar-green-800);
-  --avatar-background-teal: var(--avatar-teal-800);
-  --avatar-background-cyan: var(--avatar-cyan-800);
-  --avatar-background-blue: var(--avatar-blue-800);
-  --avatar-background-indigo: var(--avatar-indigo-800);
+  /* Status */
+  --status-positive-background: var(--green-900);
+  --status-positive-border-color: var(--green-300);
+  --status-positive-text-color: var(--green-100);
+  --status-info-background: var(--blue-900);
+  --status-info-border-color: var(--blue-300);
+  --status-info-text-color: var(--blue-100);
+  --status-warning-background: var(--orange-1000);
+  --status-warning-border-color: var(--orange-300);
+  --status-warning-text-color: var(--orange-100);
+  --status-attention-background: var(--red-900);
+  --status-attention-border-color: var(--red-300);
+  --status-attention-text-color: var(--red-100);
+  --status-grey-background: color-mix(in srgb, var(--grey-800) 86%, black 14%);
+  --status-grey-border-color: var(--grey-500);
+  --status-grey-text-color: color-mix(in srgb, var(--grey-500) 72%, white 85%);
+  --status-purple-background: var(--categorical-purple-800);
+  --status-purple-border-color: var(--categorical-purple-200);
+  --status-purple-text-color: color-mix(in srgb, var(--categorical-purple-200) 78%, white 75%);
+  --status-violet-background: var(--categorical-violet-800);
+  --status-violet-border-color: var(--categorical-violet-200);
+  --status-violet-text-color: color-mix(in srgb, var(--categorical-violet-200) 78%, white 75%);
+  --status-pink-background: color-mix(in srgb, var(--categorical-pink-800) 86%, black 14%);
+  --status-pink-border-color: var(--categorical-pink-200);
+  --status-pink-text-color: color-mix(in srgb, var(--categorical-pink-200) 80%, white 74%);
+  --status-magenta-background: var(--categorical-magenta-800);
+  --status-magenta-border-color: var(--categorical-magenta-200);
+  --status-magenta-text-color: color-mix(in srgb, var(--categorical-magenta-200) 70%, white 78%);
+  --status-red-background: color-mix(in srgb, var(--categorical-red-800) 78%, black 22%);
+  --status-red-border-color: var(--categorical-red-200);
+  --status-red-text-color: color-mix(in srgb, var(--categorical-red-200) 82%, white 78%);
+  --status-orange-background: color-mix(in srgb, var(--categorical-orange-800) 68%, black 32%);
+  --status-orange-border-color: color-mix(in srgb, var(--categorical-orange-200) 40%, white 22%);
+  --status-orange-text-color: color-mix(in srgb, var(--categorical-orange-200) 84%, white 45%);
+  --status-amber-background: color-mix(in srgb, var(--categorical-amber-800) 58%, black 42%);
+  --status-amber-border-color: color-mix(in srgb, var(--categorical-amber-200) 40%, white 22%);
+  --status-amber-text-color: color-mix(in srgb, var(--categorical-amber-200) 82%, white 18%);
+  --status-yellow-background: color-mix(in srgb, var(--categorical-yellow-800) 50%, black 50%);
+  --status-yellow-border-color: color-mix(in srgb, var(--categorical-yellow-200) 40%, white 22%);
+  --status-yellow-text-color: color-mix(in srgb, var(--categorical-yellow-200) 82%, white 18%);
+  --status-lime-background: color-mix(in srgb, var(--categorical-lime-800) 72%, black 28%);
+  --status-lime-border-color: var(--categorical-lime-200);
+  --status-lime-text-color: color-mix(in srgb, var(--categorical-lime-200) 80%, white 65%);
+  --status-green-background: color-mix(in srgb, var(--categorical-green-800) 74%, black 26%);
+  --status-green-border-color: var(--categorical-green-200);
+  --status-green-text-color: color-mix(in srgb, var(--categorical-green-200) 80%, white 68%);
+  --status-teal-background: color-mix(in srgb, var(--categorical-teal-800) 72%, black 28%);
+  --status-teal-border-color: color-mix(in srgb, var(--categorical-teal-200) 40%, white 22%);
+  --status-teal-text-color: color-mix(in srgb, var(--categorical-teal-200) 80%, white 60%);
+  --status-cyan-background: color-mix(in srgb, var(--categorical-cyan-800) 72%, black 28%);
+  --status-cyan-border-color: var(--categorical-cyan-200);
+  --status-cyan-text-color: color-mix(in srgb, var(--categorical-cyan-200) 80%, white 60%);
+  --status-blue-background: color-mix(in srgb, var(--categorical-blue-800) 86%, black 14%);
+  --status-blue-border-color: var(--categorical-blue-200);
+  --status-blue-text-color: color-mix(in srgb, var(--categorical-blue-200) 78%, white 62%);
+  --status-indigo-background: var(--categorical-indigo-800);
+  --status-indigo-border-color: var(--categorical-indigo-200);
+  --status-indigo-text-color: color-mix(in srgb, var(--categorical-indigo-200) 78%, white 82%);
 
   /* Chip */
   --chip-background: var(--grey-800);
   --chip-background-hover: var(--grey-800);
   --chip-background-focus: var(--grey-800);
   --chip-background-active: var(--grey-800);
+  --chip-background-disabled: var(--grey-800);
   --chip-border-color: var(--grey-600);
   --chip-border-color-hover: var(--grey-700);
   --chip-border-color-focus: var(--grey-700);
-  --chip-border-color-active: var(--grey-100);
-  --chip-text-color-active: var(--grey-100);
+  --chip-border-color-active: var(--grey-50);
+  --chip-text-color-active: var(--grey-50);
   --chip-icon-fill: var(--white);
   --chip-filter: drop-shadow(0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-20));
   --chip-dismiss-action-background: var(--grey-700);
   --chip-dismiss-action-background-hover: var(--white-opacity-0);
-  --chip-dismiss-action-filter: drop-shadow(0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-5));
+  --chip-dismiss-action-background-disabled: var(--grey-900);
 
   /* Dropdown */
   --dropdown-background: var(--grey-1000);
-  --dropdown-border-color: var(--black-opacity-20);
+  --dropdown-border-color: var(--white-opacity-20);
   --dropdown-shadow-color: var(--black-opacity-20);
   --dropdown-button-background-hover: var(--grey-900);
 
@@ -736,27 +818,23 @@ html[data-theme="dark"] {
   --progress-track-background: var(--grey-700);
   --progress-loading-bar-100: var(--grey-900);
   --progress-loading-bar-200: var(--grey-1000);
-  --progress-syncing-bar-background: var(--progress-bar-background);
 
   /* Stepper */
   --stepper-color: var(--white);
-  --stepper-background-active: var(--stepper-color);
   --stepper-background-inactive: var(--black);
-  --stepper-border-color: var(--stepper-color);
-  --stepper-text-color-active: var(--stepper-color);
   --stepper-icon-color: var(--grey-1100);
-  --stepper-success-color: var(--stepper-color);
   --stepper-warning-color: var(--orange-300);
   --stepper-error-color: var(--red-300);
-  --stepper-disabled-color: var(--text-color-optional);
   --stepper-disabled-opacity: 0.8;
 
   /* Dialog */
   --dialog-background: var(--grey-800);
-  --dialog-border: none;
 
   /* Drawer */
   --drawer-background: var(--grey-800);
+  --drawer-resize-rail-background: var(--grey-1000);
+  --drawer-resize-rail-inner-background: var(--grey-700);
+  --drawer-resize-rail-threshold-indicator: var(--white);
 }
 
 /* ==================================================================================================== */
@@ -767,12 +845,197 @@ html[data-theme="dark"] {
   --dropdown-offset: var(--space-200);
   --dropdown-min-width: 15rem;
 
+  /* Form */
+  --form-default-placeholder-color: var(--grey-500);
+  --form-default-placeholder-color-disabled: var(--grey-500);
+
+  /* Action - Primary (Button & Link) */
+  --action-primary-border-color: var(--black-opacity-0);
+  --action-primary-border-color-hover: var(--black-opacity-0);
+  --action-primary-border-color-focus: var(--black-opacity-0);
+  --action-primary-border-color-disabled: var(--black-opacity-0);
+  --action-primary-text-color-disabled: var(--grey-400);
+
+  /* Action - Tertiary (Button & Link) */
+  --action-tertiary-border-color: var(--black-opacity-0);
+  --action-tertiary-border-color-hover: var(--black-opacity-0);
+  --action-tertiary-border-color-focus: var(--black-opacity-0);
+  --action-tertiary-border-color-disabled: var(--black-opacity-0);
+
+  /* Action - Overlay (Button & Link) */
+  --action-overlay-border-color: var(--white-opacity-30);
+  --action-overlay-border-color-hover: var(--white-opacity-30);
+  --action-overlay-border-color-focus: var(--white-opacity-30);
+  --action-overlay-border-color-disabled: var(--white-opacity-20);
+  --action-overlay-background: var(--black-opacity-60);
+  --action-overlay-background-hover: var(--black-opacity-70);
+  --action-overlay-background-focus: var(--black-opacity-70);
+  --action-overlay-background-disabled: var(--black-opacity-40);
+  --action-overlay-text-color: var(--white);
+  --action-overlay-text-color-hover: var(--white);
+  --action-overlay-text-color-focus: var(--white);
+  --action-overlay-text-color-disabled: var(--white-opacity-40);
+
+  /* Action - Attention (Button & Link) */
+  --action-attention-border-color: var(--black-opacity-0);
+  --action-attention-border-color-hover: var(--black-opacity-0);
+  --action-attention-border-color-focus: var(--black-opacity-0);
+  --action-attention-border-color-disabled: var(--black-opacity-0);
+  --action-attention-text-color: var(--white);
+  --action-attention-text-color-hover: var(--white);
+  --action-attention-text-color-focus: var(--white);
+  --action-attention-text-color-disabled: var(--red-300);
+
+  /* Code */
+  --code-background: var(--surface-elevated-100);
+
+  /* Prompt */
+  --prompt-focus-surface-background: var(--surface-elevated-100);
+
+  /* Backdrop */
+  --backdrop-overlay: var(--black-opacity-70);
+
+  /* Switch */
+  --switch-track-background-checked: var(--green-500);
+  --switch-icon: var(--icon-color-default);
+
+  /* Illustration */
+  --illustration-main-color-default: var(--icon-color-default);
+  --illustration-main-color-inverted: var(--icon-color-inverted);
+  --illustration-size-x-small: 6.4rem;
+  --illustration-size-small: 8rem;
+  --illustration-size-medium: 9.6rem;
+  --illustration-size-large: 11.2rem;
+  --illustration-size-x-large: 12.8rem;
+
+  /* Badge */
+  --badge-text-color: var(--grey-900);
+  --badge-background-overlay: var(--black-opacity-60);
+  --badge-border-overlay: var(--stroke-size-100) var(--stroke-solid) var(--white-opacity-30);
+
+  /* Avatar */
+  --avatar-background-purple: var(--categorical-purple);
+  --avatar-background-violet: var(--categorical-violet);
+  --avatar-background-pink: var(--categorical-pink);
+  --avatar-background-magenta: var(--categorical-magenta);
+  --avatar-background-red: var(--categorical-red);
+  --avatar-background-orange: var(--categorical-orange);
+  --avatar-background-amber: var(--categorical-amber);
+  --avatar-background-yellow: var(--categorical-yellow);
+  --avatar-background-lime: var(--categorical-lime);
+  --avatar-background-green: var(--categorical-green);
+  --avatar-background-teal: var(--categorical-teal);
+  --avatar-background-cyan: var(--categorical-cyan);
+  --avatar-background-blue: var(--categorical-blue);
+  --avatar-background-indigo: var(--categorical-indigo);
+
+  /* Radio */
+  --radio-border-color: var(--form-default-border-color);
+  --radio-border-color-hover: var(--form-default-border-color-hover);
+  --radio-dot-color-checked-disabled: var(--grey-500);
+
+  /* Tab */
+  --tab-shadow-active: 0 0 var(--stroke-size-400) var(--stroke-size-400) var(--tab-shadow-active-color);
+  --tabs-ghost-box-shadow: none;
+
+  /* Slat */
+  --slat-background: var(--surface);
+  --slat-background-hover: var(--surface-elevated-100);
+  --slat-card-background: var(--surface-elevated-100);
+  --slat-card-background-hover: var(--surface-elevated-200);
+  --slat-avatar-background: var(--surface-elevated-100);
+  --slat-avatar-background-hover: var(--surface-elevated-200);
+  --slat-card-avatar-background: var(--surface-elevated-200);
+  --slat-card-avatar-background-hover: var(--surface-elevated-100);
+
+  /* Chip */
+  --chip-text-color-disabled: var(--grey-400);
+  --chip-dismiss-action-filter: drop-shadow(0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-0));
+
+  /* Progress */
+  --progress-bar-background-positive: var(--feedback-positive-border-color);
+  --progress-bar-background-warning: var(--feedback-warning-border-color);
+  --progress-bar-background-attention: var(--feedback-attention-border-color);
+  --progress-syncing-bar-background: var(--progress-bar-background);
+
+  /* Stepper */
+  --stepper-background-active: var(--stepper-color);
+  --stepper-border-color: var(--stepper-color);
+  --stepper-text-color-active: var(--stepper-color);
+  --stepper-success-color: var(--stepper-color);
+  --stepper-disabled-color: var(--text-color-optional);
+
+  /* Dialog */
+  --dialog-border: none;
+
+  /* Prompt */
+  --prompt-preview-code-background: var(--code-background);
+  --prompt-preview-top-shade-height: calc(var(--space-600) + var(--space-100));
+  --prompt-preview-top-shade-end: var(--black-opacity-0);
+  --prompt-preview-top-shade-start-overlay: var(--black-opacity-50);
+  --prompt-preview-top-shade-end-overlay: var(--black-opacity-0);
+  --prompt-border-color-hover: var(--form-default-border-color-hover);
+  --prompt-hover-ring-color: var(--outline-color);
+  --prompt-spectrum-mid: var(--outline-color);
+  --prompt-accent-primary: var(--prompt-spectrum-start);
+  --prompt-accent-secondary: var(--prompt-spectrum-end);
+  --prompt-hover-sweep-speed: 1400ms;
+  --prompt-focus-pulse-speed: 1400ms;
+  --prompt-placeholder-color: var(--form-default-placeholder-color);
+  --prompt-placeholder-color-hover: var(--form-default-placeholder-color-hover);
+  --prompt-placeholder-color-focus: var(--form-default-placeholder-color-focus);
+
+  /* Slide Frame */
+  --slide-frame-background: var(--surface-elevated-100);
+  --slide-frame-border-color: var(--border-color);
+  --slide-frame-background-present: var(--slide-frame-background);
+
+  /* Media Player */
+  --media-player-range-color: var(--media-player-seek-color);
+  --media-player-range-thumb-color: var(--media-player-seek-color);
+  --media-player-control-background: var(--surface-elevated-200);
+  --media-player-control-color: var(--text-color);
+  --media-player-center-action-background: var(--surface-elevated-200);
+  --media-player-center-action-overlay-background: var(--black-opacity-80);
+  --media-player-center-action-overlay-background-hover: var(--black-opacity-90);
+  --media-player-controls-peek-background: var(--white);
+  --media-player-frame-shadow: var(--shadow-medium);
+  --media-player-video-shadow: var(--shadow-thick);
+  --media-player-artwork-shadow: var(--shadow-medium);
+  --media-player-thumbnail-shadow: var(--shadow-thin);
+  --media-player-dark-thumbnail-border: var(--stroke-size-100) var(--stroke-solid) var(--white-opacity-40);
+  --media-player-dark-thumbnail-shadow: 0 var(--space-050) var(--space-100) var(--black-opacity-30);
+  --media-player-meta-icon-shadow: var(--shadow-thin);
+  --media-player-range-thumb-shadow: var(--shadow-thin);
+  --media-player-surface-overlay-start: var(--surface-elevated-100);
+  --media-player-surface-overlay-end: var(--surface-elevated-200);
+  --media-player-dark-background: var(--black);
+  --media-player-dark-control-color: var(--white);
+  --media-player-dark-range-color: var(--white);
+  --media-player-dark-range-thumb-color: var(--white);
+  --media-player-dark-range-track-color: var(--white-opacity-30);
+  --media-player-dark-range-thumb-shadow: 0 var(--space-050) var(--space-100) var(--black-opacity-40);
+  --media-player-dark-control-background-hover: var(--white-opacity-10);
+  --media-player-dark-overlay-background: var(--black-opacity-50);
+
+  /* Range Input */
+  --range-input-accent-color: var(--media-player-seek-color);
+  --range-input-bubble-background: var(--media-player-seek-time-background);
+  --range-input-bubble-border-color: var(--media-player-seek-time-border-color);
+
+  /* Skeleton */
+  --skeleton-background: var(--surface-elevated-100);
+  --skeleton-radius: var(--radius-200);
+  --skeleton-animation-speed: 2000ms;
+  --skeleton-gap: var(--space-200);
+
   /* Feedback - Border (Alerts & Messages) */
   --feedback-neutral-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-neutral-border-color);
   --feedback-positive-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-positive-border-color);
   --feedback-info-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-info-border-color);
   --feedback-warning-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-warning-border-color);
   --feedback-attention-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-attention-border-color);
+
   /* Action (Button & Link) */
   --action-primary-border: var(--stroke-size-200) var(--stroke-solid) var(--action-primary-border-color);
   --action-primary-border-hover: var(--stroke-size-200) var(--stroke-solid) var(--action-primary-border-color-hover);
@@ -804,75 +1067,96 @@ html[data-theme="dark"] {
   --action-font-weight: var(--font-weight-medium);
 
   /* SIZE: XSMALL */
+  --action-size-xx-small: calc(var(--action-size-x-small) - var(--space-100));
+  --action-size-x-small: 2.8rem;
   --action-radius-x-small: var(--radius-100);
   --action-padding-x-small: var(--space-050) var(--space-200);
   --action-before-slot-padding-x-small: var(--space-100);
   --action-after-slot-padding-x-small: var(--space-100);
-  --action-icon-only-size-x-small: 2.8rem;
+  --action-icon-only-size-x-small: var(--action-size-x-small);
 
   /* SIZE: SMALL */
+  --action-size-small: 3.6rem;
   --action-radius-small: var(--radius-100);
   --action-padding-small: calc(var(--space-100) - (var(--stroke-size-100) / 2)) var(--space-300);
   --action-before-slot-padding-small: var(--space-200);
   --action-after-slot-padding-small: var(--space-200);
-  --action-icon-only-size-small: 3.6rem;
+  --action-icon-only-size-small: var(--action-size-small);
 
   /* SIZE: MEDIUM: DEFAULT */
+  --action-size-medium: 4.4rem;
   --action-radius-medium: var(--radius-200);
   --action-padding: var(--space-200) calc(var(--space-300) + var(--space-100));
   --action-before-slot-padding: var(--space-300);
   --action-after-slot-padding: var(--space-300);
   --action-icon-only-padding: var(--space-000);
-  --action-icon-only-size: 4.4rem;
-  --row-action-xxs: calc(var(--action-icon-only-size-x-small) - var(--space-100));
-  --row-action-xs: var(--action-icon-only-size-x-small);
-  --row-action-s: var(--action-icon-only-size-small);
-  --row-action-m: var(--action-icon-only-size);
-  --row-action-l: var(--action-icon-only-size-large);
+  --action-icon-only-size: var(--action-size-medium);
+  --action-icon-only-size-medium: var(--action-size-medium);
 
   /* SIZE: LARGE */
+  --action-size-large: 5.6rem;
   --action-radius-large: var(--radius-300);
-  --action-padding-large: var(--space-300) var(--space-500);
+  --action-padding-large: var(--space-200) var(--space-500);
   --action-before-slot-padding-large: var(--space-400);
   --action-after-slot-padding-large: var(--space-400);
-  --action-icon-only-size-large: 5.2rem;
+  --action-icon-only-size-large: var(--action-size-large);
+  --row-action-xxs: var(--action-size-xx-small);
+  --row-action-xs: var(--action-size-x-small);
+  --row-action-s: var(--action-size-small);
+  --row-action-m: var(--action-size-medium);
+  --row-action-l: var(--action-size-large);
 
   /* Text */
+  --text-line-height-xxs: var(--line-height-25);
   --text-line-height-xs: var(--line-height-25);
   --text-line-height-s: var(--line-height-50);
   --text-line-height-m: var(--line-height-100);
   --text-line-height-l: var(--line-height-225);
+  --text-font-size-xxs: var(--font-size-15);
   --text-font-size-xs: var(--font-size-25);
   --text-font-size-s: var(--font-size-50);
   --text-font-size-m: var(--font-size-100);
   --text-font-size-l: var(--font-size-200);
   --text-font-size: var(--text-font-size-m);
   --text-line-height: var(--text-line-height-m);
+
   /* Font-Weight */
   --font-weight-regular: var(--font-weight-400);
   --font-weight-medium: var(--font-weight-500);
   --font-weight-semi-bold: var(--font-weight-600);
   --font-weight-bold: var(--font-weight-700);
+
   /* Border */
   --border-thin: var(--stroke-size-100) var(--stroke-solid) var(--border-color);
   --border-thick: var(--stroke-size-200) var(--stroke-solid) var(--border-color);
+
+  /* Shadow */
+  --shadow-thin: 0 var(--space-050) var(--space-100) var(--shadow-color-thin);
+  --shadow-medium: 0 var(--space-100) var(--space-200) var(--shadow-color-medium);
+  --shadow-thick: 0 var(--space-500) var(--space-700) var(--shadow-color-thick);
+
   /* Outline */
   --outline-thin: var(--stroke-size-100) var(--stroke-outset) var(--outline-color);
   --outline-medium: var(--stroke-size-300) var(--stroke-outset) var(--outline-color);
-  --outline-thick: var(--stroke-size-500) var(--stroke-outset) var(--outline-color);
+  --outline-thick: var(--stroke-size-400) var(--stroke-outset) var(--outline-color);
+
   /* ================================================================================================== */
   /* Components                                                                                         */
   /* ================================================================================================== */
+
   /* Switch */
   --switch-offset: 1px;
   --switch-thumb-size: 3.6rem;
   --switch-width: calc(var(--switch-height) * 1.6);
   --switch-height: calc(var(--switch-thumb-size) + (var(--switch-offset) * 2));
+
   /* Card */
   --card-radius: var(--radius-150);
+
   /* Badge */
   --badge-radius: var(--radius-300);
   --badge-font-weight: var(--font-weight-bold);
+
   /* Heading */
   --heading-font-weight: var(--font-weight-bold);
   --heading-font-size-100: var(--font-size-600);
@@ -887,6 +1171,7 @@ html[data-theme="dark"] {
   --heading-line-height-400: var(--line-height-300);
   --heading-line-height-500: var(--line-height-200);
   --heading-line-height-600: var(--line-height-100);
+
   /* Alert */
   --alert-radius: var(--radius-100);
   --alert-padding-large: var(--space-400);
@@ -894,19 +1179,23 @@ html[data-theme="dark"] {
   --alert-padding-small: var(--space-200);
   --alert-gap-horizontal-mobile: var(--space-300);
   --alert-gap-horizontal-desktop: var(--space-100);
+
   /* Messages */
   --message-radius: var(--radius-150);
   --message-padding: var(--space-400);
   --message-gap-horizontal: var(--space-300);
   --message-gap-vertical: var(--space-100);
+
   /* Progress */
   --progress-radius: var(--space-300);
   --progress-syncing-width: 30%;
   --progress-pending-stripe-size: 1rem;
+
   /* Stepper */
-  --stepper-dot-size: var(--action-icon-only-size-x-small);
+  --stepper-dot-size: var(--action-size-x-small);
   --stepper-dot-size-small: calc(var(--stepper-dot-size) - var(--space-050));
   --stepper-dot-size-x-small: calc(var(--stepper-dot-size-small) - var(--space-050));
+
   /* Tab */
   --tab-radius: var(--radius-200);
   --tab-font-size: var(--text-font-size-m);
@@ -947,43 +1236,56 @@ html[data-theme="dark"] {
   --tab-badge-offset-large: var(--space-050);
   --tab-dot-size: 1rem;
   --tab-dot-gap: var(--space-100);
-  --tab-dot-color: var(--tab-icon);
-  --tab-dot-color-active: var(--tab-icon-active);
+
   /* Carousel */
   --carousel-radius: var(--radius-300);
   --carousel-tab-position: var(--space-400);
   --carousel-tab-offset: calc(4.4rem + var(--carousel-tab-position)); /* Tab Height */
+
   /* Slat [Action] */
   --slat-radius: var(--radius-200);
+
   /* Checkbox */
   --checkbox-radius: var(--radius-100);
   --checkbox-size: calc(var(--space-500) - var(--stroke-size-500));
+
   /* Radio */
   --radio-size: calc(var(--space-500) - 2px);
 
   /* Chip */
+  --chip-input-background: var(--form-default-border-color);
   --chip-radius: var(--chip-radius-medium);
   --chip-radius-x-small: var(--radius-300);
   --chip-radius-small: var(--radius-400);
   --chip-radius-medium: var(--radius-500);
   --chip-radius-large: var(--radius-600);
-  --chip-height-x-small: 2.8rem;
-  --chip-height-small: 3.6rem;
-  --chip-height-medium: 4rem;
-  --chip-height-large: 5.2rem;
-  --chip-padding-x-small: 0 var(--space-200);
-  --chip-padding-small: var(--space-100) var(--space-300);
-  --chip-padding-medium: var(--space-100) var(--space-300);
-  --chip-padding-large: var(--space-200) var(--space-400);
+  --chip-height-x-small: 2.6rem;
+  --chip-height-small: 3.4rem;
+  --chip-height-medium: 4.2rem;
+  --chip-height-large: 5.4rem;
+  --chip-padding-x-small: 0 calc(var(--space-200) + var(--space-025));
+  --chip-padding-small: var(--space-050) var(--space-300);
+  --chip-padding-medium: var(--space-100) calc(var(--space-300) + var(--space-050));
+  --chip-padding-large: var(--space-200) calc(var(--space-400) + var(--space-100));
   --chip-gap-x-small: var(--space-100);
   --chip-gap-small: var(--space-200);
   --chip-gap-medium: var(--space-200);
   --chip-gap-large: var(--space-300);
+
+  /* Form */
+  --form-radius-x-small: var(--radius-100);
+  --form-radius-small: var(--radius-100);
+  --form-radius-medium: var(--radius-200);
+  --form-radius-large: var(--radius-300);
+
   /* Dropdown */
   --dropdown-radius: var(--radius-100);
+
   /* Dialog */
   --dialog-radius: var(--radius-150);
+
   /* Avatar */
+  --avatar-xxx-small: 1.8rem; /* 18px */
   --avatar-xx-small: var(--space-500); /* 24px */
   --avatar-x-small: calc(var(--space-500) + var(--space-200)); /* 32px */
   --avatar-small: calc(var(--space-600) + var(--space-025)); /* 38px */