@chenzy-design/tokens 0.2.0 → 0.3.0

package/dist/tokens.css

@@ -51,82 +51,180 @@
   --cd-color-orange-7: #a84a00;
   --cd-color-orange-8: #7e3100;
   --cd-color-orange-9: #541d00;
-  --cd-spacing-1: 4px;
-  --cd-spacing-2: 8px;
-  --cd-spacing-3: 12px;
-  --cd-spacing-4: 16px;
-  --cd-spacing-5: 20px;
-  --cd-spacing-6: 24px;
-  --cd-spacing-8: 32px;
-  --cd-spacing-10: 40px;
+  --cd-color-yellow-0: #fffdea;
+  --cd-color-yellow-1: #fefbcb;
+  --cd-color-yellow-2: #fdf398;
+  --cd-color-yellow-3: #fce865;
+  --cd-color-yellow-4: #fbda32;
+  --cd-color-yellow-5: #fac800;
+  --cd-color-yellow-6: #d0aa00;
+  --cd-color-yellow-7: #a78b00;
+  --cd-color-yellow-8: #7d6a00;
+  --cd-color-yellow-9: #534800;
   --cd-spacing-12: 48px;
-  --cd-radius-1: 3px;
-  --cd-radius-2: 6px;
-  --cd-radius-3: 12px;
-  --cd-radius-full: 9999px;
-  --cd-font-size-1: 12px;
-  --cd-font-size-2: 14px;
-  --cd-font-size-3: 16px;
-  --cd-font-size-4: 20px;
-  --cd-font-size-5: 24px;
-  --cd-font-size-6: 32px;
+  --cd-spacing-none: 0;
+  --cd-spacing-super-tight: 2px;
+  --cd-spacing-extra-tight: 4px;
+  --cd-spacing-tight: 8px;
+  --cd-spacing-base-tight: 12px;
+  --cd-spacing-base: 16px;
+  --cd-spacing-base-loose: 20px;
+  --cd-spacing-loose: 24px;
+  --cd-spacing-extra-loose: 32px;
+  --cd-spacing-super-loose: 40px;
+  --cd-border-radius-extra-small: 3px;
+  --cd-border-radius-small: 3px;
+  --cd-border-radius-medium: 6px;
+  --cd-border-radius-large: 12px;
+  --cd-border-radius-circle: 50%;
+  --cd-border-radius-full: 9999px;
+  --cd-font-size-small: 12px;
+  --cd-font-size-regular: 14px;
+  --cd-font-size-header-6: 16px;
+  --cd-font-size-header-5: 18px;
+  --cd-font-size-header-4: 20px;
+  --cd-font-size-header-3: 24px;
+  --cd-font-size-header-2: 28px;
+  --cd-font-size-header-1: 32px;
+  --cd-font-weight-light: 200;
   --cd-font-weight-regular: 400;
   --cd-font-weight-medium: 500;
-  --cd-font-weight-semibold: 600;
-  --cd-line-height-tight: 1.3;
-  --cd-line-height-normal: 1.5;
-  --cd-line-height-loose: 1.7;
-  --cd-shadow-1: 0 1px 2px rgba(0,0,0,.08);
-  --cd-shadow-2: 0 4px 12px rgba(0,0,0,.12);
-  --cd-shadow-3: 0 8px 24px rgba(0,0,0,.16);
+  --cd-font-weight-bold: 600;
+  --cd-line-height-small: 16px;
+  --cd-line-height-regular: 20px;
+  --cd-line-height-header-6: 22px;
+  --cd-line-height-header-5: 24px;
+  --cd-line-height-header-4: 28px;
+  --cd-line-height-header-3: 32px;
+  --cd-line-height-header-2: 40px;
+  --cd-line-height-header-1: 44px;
+  --cd-shadow-elevated: 0 0 1px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.1);
   --cd-motion-duration-fast: 120ms;
   --cd-motion-duration-mid: 200ms;
   --cd-motion-duration-slow: 320ms;
   --cd-motion-ease-standard: cubic-bezier(.4,0,.2,1);
   --cd-z-affix: 10;
   --cd-z-sticky: 900;
-  --cd-z-dropdown: 1050;
+  --cd-z-table-fixed: 101;
   --cd-z-modal: 1000;
+  --cd-z-modal-mask: 1000;
+  --cd-z-toast: 1010;
+  --cd-z-notification: 1010;
   --cd-z-popover: 1030;
-  --cd-z-toast: 1080;
-  --cd-z-tooltip: 1070;
+  --cd-z-dropdown: 1050;
+  --cd-z-tooltip: 1060;
+  --cd-z-image-preview: 1070;
+  --cd-z-drag: 2000;
   --cd-breakpoint-sm: 576px;
   --cd-breakpoint-md: 768px;
   --cd-breakpoint-lg: 992px;
   --cd-breakpoint-xl: 1200px;
   --cd-breakpoint-xxl: 1600px;
+  --cd-control-height-small: 24px;
+  --cd-control-height-default: 32px;
+  --cd-control-height-large: 40px;
+  --cd-width-icon-extra-small: 8px;
+  --cd-width-icon-small: 12px;
+  --cd-width-icon-medium: 16px;
+  --cd-width-icon-large: 20px;
+  --cd-width-icon-extra-large: 24px;
+  --cd-border-thickness: 0;
+  --cd-border-thickness-control: 1px;
   /* --- Alias (semantic) --- */
   --cd-color-primary: #0064fa;
   --cd-color-primary-hover: #0062d6;
   --cd-color-primary-active: #004fb3;
+  --cd-color-primary-disabled: #98cdfd;
+  --cd-color-primary-light-default: #eaf5ff;
+  --cd-color-primary-light-hover: #cbe7fe;
+  --cd-color-primary-light-active: #98cdfd;
+  --cd-color-secondary: #0095ee;
+  --cd-color-secondary-hover: #007bca;
+  --cd-color-secondary-active: #0063a7;
+  --cd-color-secondary-disabled: #95d8f8;
+  --cd-color-secondary-light-default: #e9f7fd;
+  --cd-color-secondary-light-hover: #c9ecfc;
+  --cd-color-secondary-light-active: #95d8f8;
+  --cd-color-tertiary: #6b7075;
+  --cd-color-tertiary-hover: #555b61;
+  --cd-color-tertiary-active: #41464c;
+  --cd-color-tertiary-light-default: #f9f9f9;
+  --cd-color-tertiary-light-hover: #e6e8ea;
+  --cd-color-tertiary-light-active: #c6cacd;
+  --cd-color-info: #0064fa;
+  --cd-color-info-hover: #0062d6;
+  --cd-color-info-active: #004fb3;
+  --cd-color-info-disabled: #98cdfd;
+  --cd-color-info-light-default: #eaf5ff;
+  --cd-color-info-light-hover: #cbe7fe;
+  --cd-color-info-light-active: #98cdfd;
   --cd-color-success: #3bb346;
+  --cd-color-success-hover: #30953b;
+  --cd-color-success-active: #25772f;
+  --cd-color-success-disabled: #a4e0a7;
+  --cd-color-success-light-default: #ecf7ec;
+  --cd-color-success-light-hover: #d0f0d1;
+  --cd-color-success-light-active: #a4e0a7;
   --cd-color-warning: #fc8800;
+  --cd-color-warning-hover: #d26700;
+  --cd-color-warning-active: #a84a00;
+  --cd-color-rating-icon-default: #fac800;
+  --cd-color-highlight: #000000;
+  --cd-color-highlight-bg: #fbda32;
+  --cd-color-warning-disabled: #fed998;
+  --cd-color-warning-light-default: #fff8ea;
+  --cd-color-warning-light-hover: #feeecc;
+  --cd-color-warning-light-active: #fed998;
   --cd-color-danger: #f93920;
-  --cd-color-info: #0064fa;
+  --cd-color-danger-hover: #d52515;
+  --cd-color-danger-active: #b2140c;
+  --cd-color-danger-disabled: #fdb7a5;
+  --cd-color-danger-light-default: #fef2ed;
+  --cd-color-danger-light-hover: #feddd2;
+  --cd-color-danger-light-active: #fdb7a5;
   --cd-color-link: #0064fa;
+  --cd-color-link-hover: #0062d6;
+  --cd-color-link-active: #004fb3;
+  --cd-color-link-visited: #0064fa;
+  --cd-color-disabled-text: rgba(28, 31, 35, 0.35);
+  --cd-color-disabled-border: #e6e8ea;
+  --cd-color-disabled-bg: #e6e8ea;
+  --cd-color-disabled-fill: rgba(46, 50, 56, 0.04);
   --cd-color-text-0: #1c1f23;
   --cd-color-text-1: rgba(28, 31, 35, 0.8);
   --cd-color-text-2: rgba(28, 31, 35, 0.62);
   --cd-color-text-3: rgba(28, 31, 35, 0.35);
   --cd-color-text-inverse: #ffffff;
   --cd-color-bg-0: #ffffff;
-  --cd-color-bg-1: #f9f9f9;
-  --cd-color-bg-2: #e6e8ea;
-  --cd-color-bg-3: #c6cacd;
-  --cd-color-border: #e6e8ea;
+  --cd-color-bg-1: #ffffff;
+  --cd-color-bg-2: #ffffff;
+  --cd-color-bg-3: #ffffff;
+  --cd-color-bg-4: #ffffff;
+  --cd-color-nav-bg: #ffffff;
+  --cd-color-bg-inverse: #1c1f23;
+  --cd-color-overlay-bg: rgba(22, 22, 26, 0.6);
+  --cd-color-border: rgba(28, 31, 35, 0.08);
   --cd-color-fill-0: rgba(46, 50, 56, 0.05);
   --cd-color-fill-1: rgba(46, 50, 56, 0.09);
+  --cd-color-fill-2: rgba(46, 50, 56, 0.13);
+  --cd-color-shadow: rgba(0, 0, 0, 0.04);
   --cd-color-focus: #0064fa;
+  --cd-color-focus-border: #0064fa;
   --cd-focus-ring: 0 0 0 2px #98cdfd;
   /* --- Component --- */
-  --cd-button-height-default: 32px;
-  --cd-button-height-small: 24px;
-  --cd-button-height-large: 40px;
-  --cd-button-padding-x: var(--cd-spacing-4);
-  --cd-button-radius: var(--cd-radius-2);
-  --cd-button-font-size: var(--cd-font-size-2);
+  --cd-button-height-default: var(--cd-control-height-default);
+  --cd-button-height-small: var(--cd-control-height-small);
+  --cd-button-height-large: var(--cd-control-height-large);
+  --cd-button-padding-x: var(--cd-spacing-base-tight);
+  --cd-button-padding-x-large: var(--cd-spacing-base);
+  --cd-button-radius: var(--cd-border-radius-small);
+  --cd-button-font-size: var(--cd-font-size-regular);
   --cd-button-color-bg-primary: var(--cd-color-primary);
   --cd-button-color-text-primary: var(--cd-color-text-inverse);
+  --cd-button-group-divider: var(--cd-color-border);
+  --cd-button-colorful-from: #4d6bff;
+  --cd-button-colorful-via: #7b5cff;
+  --cd-button-colorful-to: #a64dff;
   --cd-icon-size-extra-small: 12px;
   --cd-icon-size-small: 14px;
   --cd-icon-size-default: 16px;
@@ -141,24 +239,26 @@
   --cd-icon-spin-timing: linear;
   --cd-divider-color: var(--cd-color-border);
   --cd-divider-thickness: 1px;
-  --cd-divider-spacing: var(--cd-spacing-4);
+  --cd-divider-spacing: var(--cd-spacing-base);
   --cd-divider-text-color: var(--cd-color-text-2);
-  --cd-divider-text-font-size: var(--cd-font-size-2);
-  --cd-divider-text-gap: var(--cd-spacing-4);
-  --cd-space-tight: var(--cd-spacing-2);
-  --cd-space-medium: var(--cd-spacing-3);
-  --cd-space-loose: var(--cd-spacing-4);
+  --cd-divider-text-font-size: var(--cd-font-size-regular);
+  --cd-divider-text-gap: var(--cd-spacing-base);
+  --cd-space-tight: var(--cd-spacing-tight);
+  --cd-space-medium: var(--cd-spacing-base);
+  --cd-space-loose: var(--cd-spacing-loose);
   --cd-typography-color: var(--cd-color-text-0);
   --cd-typography-color-secondary: var(--cd-color-text-1);
   --cd-typography-color-tertiary: var(--cd-color-text-2);
+  --cd-typography-color-quaternary: var(--cd-color-text-3);
   --cd-typography-color-link: var(--cd-color-primary);
   --cd-typography-color-link-hover: var(--cd-color-primary-hover);
-  --cd-typography-mark-bg: var(--cd-color-warning);
+  --cd-typography-mark-bg: var(--cd-color-primary-light-default);
   --cd-typography-code-bg: var(--cd-color-fill-1);
-  --cd-typography-code-font-size: var(--cd-font-size-1);
-  --cd-typography-font-size-small: var(--cd-font-size-1);
-  --cd-typography-font-size-default: var(--cd-font-size-2);
-  --cd-typography-font-size-large: var(--cd-font-size-3);
+  --cd-typography-code-color: var(--cd-color-text-2);
+  --cd-typography-code-font-size: var(--cd-font-size-small);
+  --cd-typography-font-size-small: var(--cd-font-size-small);
+  --cd-typography-font-size-default: var(--cd-font-size-regular);
+  --cd-typography-font-size-large: var(--cd-font-size-header-6);
   --cd-grid-columns: 24;
   --cd-grid-gutter-x: 0px;
   --cd-grid-gutter-y: 0px;
@@ -169,7 +269,7 @@
   --cd-layout-footer-bg: var(--cd-color-bg-1);
   --cd-layout-footer-color: var(--cd-color-text-2);
   --cd-layout-content-bg: var(--cd-color-bg-0);
-  --cd-layout-content-padding: var(--cd-spacing-6);
+  --cd-layout-content-padding: var(--cd-spacing-loose);
   --cd-layout-sider-bg: var(--cd-color-bg-1);
   --cd-layout-sider-width: 200px;
   --cd-layout-sider-collapsed-width: 60px;
@@ -179,66 +279,81 @@
   --cd-layout-sider-trigger-hover-bg: var(--cd-color-fill-1);
   --cd-layout-motion-duration: var(--cd-motion-duration-mid);
   --cd-layout-motion-ease: var(--cd-motion-ease-standard);
-  --cd-input-height-default: 32px;
-  --cd-input-height-small: 24px;
-  --cd-input-height-large: 40px;
-  --cd-input-padding-x: var(--cd-spacing-3);
-  --cd-input-border: var(--cd-color-border);
-  --cd-input-radius: var(--cd-radius-2);
-  --cd-input-color-bg: var(--cd-color-bg-0);
+  --cd-input-height-default: var(--cd-control-height-default);
+  --cd-input-height-small: var(--cd-control-height-small);
+  --cd-input-height-large: var(--cd-control-height-large);
+  --cd-input-padding-x: var(--cd-spacing-base-tight);
+  --cd-input-border: transparent;
+  --cd-input-radius: var(--cd-border-radius-small);
+  --cd-input-color-bg: var(--cd-color-fill-0);
+  --cd-input-bg-hover: var(--cd-color-fill-1);
   --cd-input-color-text: var(--cd-color-text-0);
   --cd-input-color-placeholder: var(--cd-color-text-3);
-  --cd-input-border-active: var(--cd-color-primary);
+  --cd-input-border-active: var(--cd-color-focus-border);
   --cd-input-border-warning: var(--cd-color-warning);
   --cd-input-border-error: var(--cd-color-danger);
-  --cd-input-font-size: var(--cd-font-size-2);
-  --cd-switch-height-default: 22px;
+  --cd-input-font-size: var(--cd-font-size-regular);
+  --cd-input-number-step-width: 14px;
+  --cd-input-number-step-bg: var(--cd-color-bg-2);
+  --cd-input-number-step-bg-hover: var(--cd-color-fill-0);
+  --cd-input-number-step-bg-active: var(--cd-color-fill-1);
+  --cd-input-number-step-bg-disabled: var(--cd-color-fill-0);
+  --cd-input-number-step-color: var(--cd-color-text-2);
+  --cd-input-number-step-color-disabled: var(--cd-color-text-3);
+  --cd-input-number-step-border: var(--cd-color-border);
+  --cd-input-number-step-radius: var(--cd-border-radius-small);
+  --cd-switch-height-default: 24px;
   --cd-switch-height-small: 16px;
-  --cd-switch-height-large: 28px;
+  --cd-switch-height-large: 32px;
   --cd-switch-width-default: 40px;
-  --cd-switch-width-small: 28px;
-  --cd-switch-width-large: 52px;
-  --cd-switch-bg-off: var(--cd-color-fill-1);
-  --cd-switch-bg-on: var(--cd-color-primary);
+  --cd-switch-width-small: 26px;
+  --cd-switch-width-large: 54px;
+  --cd-switch-bg-off: var(--cd-color-fill-0);
+  --cd-switch-bg-on: var(--cd-color-success);
   --cd-switch-knob-bg: var(--cd-color-bg-0);
-  --cd-switch-radius: var(--cd-radius-full);
+  --cd-switch-radius: var(--cd-border-radius-full);
   --cd-checkbox-size-default: 16px;
   --cd-checkbox-size-small: 14px;
   --cd-checkbox-size-large: 18px;
-  --cd-checkbox-radius: var(--cd-radius-1);
-  --cd-checkbox-border: var(--cd-color-border);
-  --cd-checkbox-bg: var(--cd-color-bg-0);
+  --cd-checkbox-radius: var(--cd-border-radius-small);
+  --cd-checkbox-border: var(--cd-color-text-3);
+  --cd-checkbox-border-hover: var(--cd-color-focus-border);
+  --cd-checkbox-bg: transparent;
+  --cd-checkbox-bg-hover: var(--cd-color-fill-0);
   --cd-checkbox-bg-checked: var(--cd-color-primary);
   --cd-checkbox-border-checked: var(--cd-color-primary);
   --cd-checkbox-mark-color: var(--cd-color-text-inverse);
-  --cd-checkbox-label-gap: var(--cd-spacing-2);
-  --cd-checkbox-card-padding: var(--cd-spacing-3) var(--cd-spacing-4);
-  --cd-checkbox-card-radius: var(--cd-radius-2);
+  --cd-checkbox-label-gap: var(--cd-spacing-tight);
+  --cd-checkbox-card-padding: var(--cd-spacing-base-tight) var(--cd-spacing-base);
+  --cd-checkbox-card-radius: var(--cd-border-radius-medium);
   --cd-checkbox-card-bg: var(--cd-color-bg-0);
-  --cd-checkbox-card-bg-hover: var(--cd-color-bg-1);
+  --cd-checkbox-card-bg-hover: var(--cd-color-fill-0);
+  --cd-checkbox-card-bg-checked: var(--cd-color-primary-light-default);
   --cd-checkbox-card-border: var(--cd-color-border);
   --cd-checkbox-card-border-checked: var(--cd-color-primary);
   --cd-radio-size-default: 16px;
   --cd-radio-size-small: 14px;
   --cd-radio-size-large: 18px;
-  --cd-radio-border: var(--cd-color-border);
-  --cd-radio-bg: var(--cd-color-bg-0);
+  --cd-radio-border: var(--cd-color-text-3);
+  --cd-radio-border-hover: var(--cd-color-focus-border);
+  --cd-radio-bg: transparent;
+  --cd-radio-bg-hover: var(--cd-color-fill-0);
   --cd-radio-color-checked: var(--cd-color-primary);
   --cd-radio-dot-color: var(--cd-color-bg-0);
   --cd-radio-color-warning: var(--cd-color-warning);
   --cd-radio-color-error: var(--cd-color-danger);
-  --cd-radio-label-gap: var(--cd-spacing-2);
-  --cd-radio-button-height: var(--cd-control-height-md, 32px);
-  --cd-radio-button-height-small: var(--cd-control-height-sm, 24px);
-  --cd-radio-button-height-large: var(--cd-control-height-lg, 40px);
-  --cd-radio-card-radius: var(--cd-radius-medium, var(--cd-radius-2));
+  --cd-radio-label-gap: var(--cd-spacing-tight);
+  --cd-radio-button-height: var(--cd-control-height-default, 32px);
+  --cd-radio-button-height-small: var(--cd-control-height-small, 24px);
+  --cd-radio-button-height-large: var(--cd-control-height-large, 40px);
+  --cd-radio-card-radius: var(--cd-border-radius-medium);
   --cd-radio-card-border-checked: var(--cd-color-primary);
   --cd-rating-size-default: 20px;
   --cd-rating-size-small: 16px;
   --cd-rating-size-large: 24px;
-  --cd-rating-gap: var(--cd-spacing-1);
-  --cd-rating-color-active: var(--cd-color-warning);
-  --cd-rating-color-inactive: var(--cd-color-fill-1);
+  --cd-rating-gap: var(--cd-spacing-extra-tight);
+  --cd-rating-color-active: var(--cd-color-rating-icon-default);
+  --cd-rating-color-inactive: var(--cd-color-fill-0);
   --cd-slider-rail-height: 4px;
   --cd-slider-rail-bg: var(--cd-color-fill-1);
   --cd-slider-track-bg: var(--cd-color-primary);
@@ -246,45 +361,47 @@
   --cd-slider-handle-bg: var(--cd-color-bg-0);
   --cd-slider-handle-border: var(--cd-color-primary);
   --cd-slider-mark-color: var(--cd-color-text-2);
-  --cd-slider-radius: var(--cd-radius-full);
+  --cd-slider-radius: var(--cd-border-radius-full);
   --cd-slider-status-warning: var(--cd-color-warning);
   --cd-slider-status-error: var(--cd-color-danger);
-  --cd-form-item-gap: var(--cd-spacing-4);
+  --cd-form-item-gap: var(--cd-spacing-base);
   --cd-form-label-color: var(--cd-color-text-0);
-  --cd-form-label-gap: var(--cd-spacing-2);
+  --cd-form-label-gap: var(--cd-spacing-tight);
   --cd-form-required-color: var(--cd-color-danger);
-  --cd-form-optional-color: var(--cd-color-text-2);
-  --cd-form-extra-color: var(--cd-color-text-2);
+  --cd-form-optional-color: var(--cd-color-tertiary);
+  --cd-form-extra-color: var(--cd-color-tertiary);
   --cd-form-error-color: var(--cd-color-danger);
   --cd-form-warning-color: var(--cd-color-warning);
-  --cd-form-error-font-size: var(--cd-font-size-1);
-  --cd-form-section-gap: var(--cd-spacing-4);
-  --cd-select-height-default: 32px;
-  --cd-select-height-small: 24px;
-  --cd-select-height-large: 40px;
-  --cd-select-padding-x: var(--cd-spacing-3);
-  --cd-select-border: var(--cd-color-border);
-  --cd-select-border-active: var(--cd-color-primary);
+  --cd-form-error-font-size: var(--cd-font-size-small);
+  --cd-form-section-gap: var(--cd-spacing-base);
+  --cd-select-height-default: var(--cd-control-height-default);
+  --cd-select-height-small: var(--cd-control-height-small);
+  --cd-select-height-large: var(--cd-control-height-large);
+  --cd-select-padding-x: var(--cd-spacing-base-tight);
+  --cd-select-border: transparent;
+  --cd-select-border-active: var(--cd-color-focus-border);
   --cd-select-border-error: var(--cd-color-danger);
-  --cd-select-radius: var(--cd-radius-2);
-  --cd-select-bg: var(--cd-color-bg-0);
-  --cd-select-font-size: var(--cd-font-size-2);
+  --cd-select-radius: var(--cd-border-radius-small);
+  --cd-select-bg: var(--cd-color-fill-0);
+  --cd-select-bg-hover: var(--cd-color-fill-1);
+  --cd-select-font-size: var(--cd-font-size-regular);
   --cd-select-dropdown-bg: var(--cd-color-bg-0);
-  --cd-select-dropdown-shadow: var(--cd-shadow-2);
-  --cd-select-dropdown-radius: var(--cd-radius-2);
+  --cd-select-dropdown-shadow: var(--cd-shadow-elevated);
+  --cd-select-dropdown-radius: var(--cd-border-radius-medium);
   --cd-select-dropdown-z: var(--cd-z-dropdown);
-  --cd-select-option-padding: var(--cd-spacing-2) var(--cd-spacing-3);
+  --cd-select-option-padding: var(--cd-spacing-tight) var(--cd-spacing-base-tight);
   --cd-select-option-bg-hover: var(--cd-color-fill-0);
   --cd-select-option-bg-active: var(--cd-color-fill-1);
-  --cd-select-option-color-selected: var(--cd-color-primary);
+  --cd-select-option-color-selected: var(--cd-color-text-0);
+  --cd-select-option-check-color: var(--cd-color-primary);
   --cd-color-picker-trigger-size: 28px;
-  --cd-color-picker-trigger-radius: var(--cd-radius-2);
+  --cd-color-picker-trigger-radius: var(--cd-border-radius-medium);
   --cd-color-picker-trigger-border: var(--cd-color-border);
   --cd-color-picker-status-warning: var(--cd-color-warning);
   --cd-color-picker-status-error: var(--cd-color-danger);
   --cd-color-picker-panel-bg: var(--cd-color-bg-0);
-  --cd-color-picker-panel-shadow: var(--cd-shadow-2);
-  --cd-color-picker-panel-radius: var(--cd-radius-3);
+  --cd-color-picker-panel-shadow: var(--cd-shadow-elevated);
+  --cd-color-picker-panel-radius: var(--cd-border-radius-large);
   --cd-color-picker-panel-z: var(--cd-z-popover);
   --cd-color-picker-panel-width: 240px;
   --cd-color-picker-saturation-height: 140px;
@@ -293,33 +410,36 @@
   --cd-color-picker-handle-border: var(--cd-color-bg-0);
   --cd-color-picker-swatch-size: 20px;
   --cd-date-picker-panel-bg: var(--cd-color-bg-0);
-  --cd-date-picker-panel-shadow: var(--cd-shadow-2);
-  --cd-date-picker-panel-radius: var(--cd-radius-3);
+  --cd-date-picker-panel-shadow: var(--cd-shadow-elevated);
+  --cd-date-picker-panel-radius: var(--cd-border-radius-large);
   --cd-date-picker-panel-z: var(--cd-z-popover);
   --cd-date-picker-cell-size: 32px;
-  --cd-date-picker-cell-radius: var(--cd-radius-2);
+  --cd-date-picker-cell-radius: var(--cd-border-radius-small);
   --cd-date-picker-cell-bg-hover: var(--cd-color-fill-0);
   --cd-date-picker-cell-bg-selected: var(--cd-color-primary);
   --cd-date-picker-cell-color-selected: var(--cd-color-text-inverse);
   --cd-date-picker-cell-color-muted: var(--cd-color-text-3);
+  --cd-date-picker-footer-bg: var(--cd-color-fill-0);
+  --cd-date-picker-quick-color: var(--cd-color-primary);
   --cd-date-picker-header-color: var(--cd-color-text-0);
   --cd-date-picker-weekday-color: var(--cd-color-text-2);
   --cd-date-picker-time-col-width: 56px;
   --cd-date-picker-time-item-height: 28px;
   --cd-tree-node-height: 32px;
-  --cd-tree-node-padding-x: var(--cd-spacing-3);
+  --cd-tree-node-padding-x: var(--cd-spacing-base-tight);
   --cd-tree-node-bg-hover: var(--cd-color-fill-0);
   --cd-tree-node-bg-active: var(--cd-color-fill-1);
-  --cd-tree-node-color-selected: var(--cd-color-primary);
-  --cd-tree-indent: var(--cd-spacing-4);
+  --cd-tree-node-color-selected: var(--cd-color-text-0);
+  --cd-tree-indent: var(--cd-spacing-base);
   --cd-tree-expand-icon-color: var(--cd-color-text-2);
   --cd-tree-node-height-small: 28px;
   --cd-tree-node-height-large: 36px;
   --cd-tree-node-color: var(--cd-color-text-0);
   --cd-tree-node-color-disabled: var(--cd-color-text-2);
   --cd-tree-node-bg-selected: var(--cd-color-primary-light-default);
-  --cd-tree-search-highlight-bg: var(--cd-color-warning-light-default);
-  --cd-tree-search-highlight-color: var(--cd-color-warning);
+  --cd-tree-search-highlight-bg: transparent;
+  --cd-tree-search-highlight-color: var(--cd-color-primary);
+  --cd-tree-search-highlight-weight: var(--cd-font-weight-bold);
   --cd-tree-focus-ring: var(--cd-color-primary);
   --cd-tree-border-color: var(--cd-color-border);
   --cd-tree-border-color-warning: var(--cd-color-warning);
@@ -329,54 +449,56 @@
   --cd-transfer-panel-width: 200px;
   --cd-transfer-panel-height: 240px;
   --cd-transfer-panel-border: var(--cd-color-border);
-  --cd-transfer-panel-radius: var(--cd-radius-2);
+  --cd-transfer-panel-radius: var(--cd-border-radius-medium);
   --cd-transfer-panel-header-bg: var(--cd-color-fill-0);
   --cd-transfer-item-height: 32px;
   --cd-transfer-item-bg-hover: var(--cd-color-fill-0);
-  --cd-transfer-gap: var(--cd-spacing-3);
+  --cd-transfer-gap: var(--cd-spacing-base-tight);
   --cd-upload-dragger-border: var(--cd-color-border);
   --cd-upload-dragger-border-active: var(--cd-color-primary);
-  --cd-upload-dragger-bg: var(--cd-color-fill-0);
-  --cd-upload-dragger-radius: var(--cd-radius-2);
-  --cd-upload-item-bg-hover: var(--cd-color-fill-0);
+  --cd-upload-dragger-bg: var(--cd-color-tertiary-light-default);
+  --cd-upload-dragger-bg-active: var(--cd-color-primary-light-default);
+  --cd-upload-dragger-radius: var(--cd-border-radius-medium);
+  --cd-upload-item-bg-hover: var(--cd-color-fill-1);
   --cd-upload-item-color-error: var(--cd-color-danger);
   --cd-upload-border-warning: var(--cd-color-warning);
   --cd-upload-border-error: var(--cd-color-danger);
   --cd-breadcrumb-color: var(--cd-color-text-2);
   --cd-breadcrumb-color-active: var(--cd-color-text-0);
   --cd-breadcrumb-color-link: var(--cd-color-primary);
-  --cd-breadcrumb-separator-color: var(--cd-color-text-3);
-  --cd-breadcrumb-gap: var(--cd-spacing-2);
-  --cd-breadcrumb-font-size: var(--cd-font-size-2);
+  --cd-breadcrumb-active-weight: var(--cd-font-weight-bold);
+  --cd-breadcrumb-separator-color: var(--cd-color-text-2);
+  --cd-breadcrumb-gap: var(--cd-spacing-tight);
+  --cd-breadcrumb-font-size: var(--cd-font-size-regular);
   --cd-pagination-item-size: 32px;
-  --cd-pagination-item-radius: var(--cd-radius-2);
-  --cd-pagination-item-border: var(--cd-color-border);
-  --cd-pagination-item-bg-active: var(--cd-color-primary);
-  --cd-pagination-item-color-active: var(--cd-color-text-inverse);
+  --cd-pagination-item-radius: var(--cd-border-radius-small);
+  --cd-pagination-item-border: transparent;
+  --cd-pagination-item-bg-active: var(--cd-color-primary-light-default);
+  --cd-pagination-item-color-active: var(--cd-color-primary);
   --cd-pagination-item-bg-hover: var(--cd-color-fill-0);
-  --cd-pagination-gap: var(--cd-spacing-2);
+  --cd-pagination-gap: var(--cd-spacing-tight);
   --cd-steps-icon-size: 28px;
-  --cd-steps-icon-bg: var(--cd-color-fill-1);
+  --cd-steps-icon-bg: var(--cd-color-text-2);
   --cd-steps-icon-bg-process: var(--cd-color-primary);
   --cd-steps-icon-bg-finish: var(--cd-color-primary);
   --cd-steps-icon-bg-error: var(--cd-color-danger);
-  --cd-steps-icon-color: var(--cd-color-text-2);
+  --cd-steps-icon-color: var(--cd-color-text-inverse);
   --cd-steps-icon-color-active: var(--cd-color-text-inverse);
   --cd-steps-title-color: var(--cd-color-text-0);
   --cd-steps-desc-color: var(--cd-color-text-2);
-  --cd-steps-line-color: var(--cd-color-border);
+  --cd-steps-line-color: var(--cd-color-fill-2);
   --cd-steps-line-color-finish: var(--cd-color-primary);
-  --cd-tabs-tab-color: var(--cd-color-text-1);
-  --cd-tabs-tab-color-active: var(--cd-color-primary);
+  --cd-tabs-tab-color: var(--cd-color-text-2);
+  --cd-tabs-tab-color-active: var(--cd-color-text-0);
   --cd-tabs-tab-color-disabled: var(--cd-color-text-3);
-  --cd-tabs-tab-padding: var(--cd-spacing-2) var(--cd-spacing-4);
-  --cd-tabs-tab-font-size: var(--cd-font-size-2);
+  --cd-tabs-tab-padding: var(--cd-spacing-tight) var(--cd-spacing-base);
+  --cd-tabs-tab-font-size: var(--cd-font-size-regular);
   --cd-tabs-ink-color: var(--cd-color-primary);
   --cd-tabs-ink-height: 2px;
   --cd-tabs-bar-border: var(--cd-color-border);
   --cd-tabs-card-bg: var(--cd-color-fill-0);
   --cd-tabs-card-bg-active: var(--cd-color-bg-0);
-  --cd-tabs-card-radius: var(--cd-radius-2);
+  --cd-tabs-card-radius: var(--cd-border-radius-small);
   --cd-tabs-button-bg: var(--cd-color-fill-0);
   --cd-tabs-button-bg-hover: var(--cd-color-fill-1);
   --cd-tabs-button-bg-active: var(--cd-color-primary);
@@ -384,79 +506,101 @@
   --cd-tabs-button-gap: 2px;
   --cd-tabs-button-pad: 2px;
   --cd-dropdown-bg: var(--cd-color-bg-0);
-  --cd-dropdown-shadow: var(--cd-shadow-2);
-  --cd-dropdown-radius: var(--cd-radius-2);
+  --cd-dropdown-shadow: var(--cd-shadow-elevated);
+  --cd-dropdown-radius: var(--cd-border-radius-medium);
   --cd-dropdown-z: var(--cd-z-dropdown);
   --cd-dropdown-min-width: 120px;
-  --cd-dropdown-item-padding: var(--cd-spacing-2) var(--cd-spacing-3);
+  --cd-dropdown-item-padding: var(--cd-spacing-tight) var(--cd-spacing-base);
   --cd-dropdown-item-bg-hover: var(--cd-color-fill-0);
   --cd-dropdown-item-color-disabled: var(--cd-color-text-3);
   --cd-menu-bg: var(--cd-color-bg-0);
-  --cd-menu-item-height: 40px;
-  --cd-menu-item-padding: var(--cd-spacing-3);
+  --cd-menu-item-height: 36px;
+  --cd-menu-item-padding: var(--cd-spacing-base-tight);
+  --cd-menu-item-radius: var(--cd-border-radius-small);
   --cd-menu-item-color: var(--cd-color-text-1);
-  --cd-menu-item-color-selected: var(--cd-color-primary);
+  --cd-menu-item-color-selected: var(--cd-color-text-0);
+  --cd-menu-item-icon-color-selected: var(--cd-color-primary);
   --cd-menu-item-color-disabled: var(--cd-color-text-3);
   --cd-menu-item-bg-hover: var(--cd-color-fill-0);
-  --cd-menu-item-bg-selected: var(--cd-color-fill-0);
-  --cd-menu-item-indicator: var(--cd-color-primary);
+  --cd-menu-item-bg-selected: var(--cd-color-primary-light-default);
   --cd-menu-submenu-arrow-color: var(--cd-color-text-2);
   --cd-anchor-link-color: var(--cd-color-text-2);
-  --cd-anchor-link-color-active: var(--cd-color-primary);
-  --cd-anchor-link-padding: var(--cd-spacing-1) var(--cd-spacing-3);
+  --cd-anchor-link-color-active: var(--cd-color-text-0);
+  --cd-anchor-link-padding: var(--cd-spacing-extra-tight) var(--cd-spacing-base-tight);
   --cd-anchor-rail-color: var(--cd-color-border);
   --cd-anchor-ink-color: var(--cd-color-primary);
   --cd-anchor-ink-width: 2px;
-  --cd-tag-height-default: 24px;
+  --cd-nav-bg: transparent;
+  --cd-nav-color: inherit;
+  --cd-nav-horizontal-height: 60px;
+  --cd-nav-header-height: 60px;
+  --cd-nav-header-padding-x: var(--cd-spacing-base);
+  --cd-nav-header-gap: var(--cd-spacing-tight);
+  --cd-nav-header-text-size: var(--cd-font-size-header-6);
+  --cd-nav-header-text-color: var(--cd-color-text-0);
+  --cd-nav-footer-padding: var(--cd-spacing-tight);
+  --cd-nav-footer-border: var(--cd-color-border);
+  --cd-nav-collapse-btn-height: 36px;
+  --cd-nav-collapse-btn-color: var(--cd-color-text-2);
+  --cd-nav-collapse-btn-hover-bg: var(--cd-color-fill-1);
+  --cd-tag-height-default: 20px;
   --cd-tag-height-small: 20px;
-  --cd-tag-height-large: 28px;
-  --cd-tag-padding-x: var(--cd-spacing-2);
-  --cd-tag-radius: var(--cd-radius-1);
-  --cd-tag-font-size: var(--cd-font-size-1);
-  --cd-tag-gap: var(--cd-spacing-1);
-  --cd-avatar-size-extra-small: 20px;
-  --cd-avatar-size-small: 28px;
-  --cd-avatar-size-default: 36px;
-  --cd-avatar-size-large: 44px;
-  --cd-avatar-size-extra-large: 56px;
+  --cd-tag-height-large: 24px;
+  --cd-tag-padding-x: var(--cd-spacing-tight);
+  --cd-tag-padding-y: 2px;
+  --cd-tag-padding-y-large: 4px;
+  --cd-tag-radius: var(--cd-border-radius-small);
+  --cd-tag-font-size: var(--cd-font-size-small);
+  --cd-tag-gap: var(--cd-spacing-extra-tight);
+  --cd-avatar-size-extra-small: 24px;
+  --cd-avatar-size-small: 32px;
+  --cd-avatar-size-default: 40px;
+  --cd-avatar-size-medium: 48px;
+  --cd-avatar-size-large: 72px;
+  --cd-avatar-size-extra-large: 128px;
   --cd-avatar-bg: var(--cd-color-fill-1);
   --cd-avatar-color: var(--cd-color-text-1);
-  --cd-avatar-radius: var(--cd-radius-2);
+  --cd-avatar-border: var(--cd-color-bg-1);
+  --cd-avatar-radius: var(--cd-border-radius-small);
   --cd-badge-size: 18px;
   --cd-badge-size-small: 14px;
   --cd-badge-dot-size: 8px;
   --cd-badge-bg: var(--cd-color-danger);
   --cd-badge-color: var(--cd-color-text-inverse);
-  --cd-badge-font-size: var(--cd-font-size-1);
+  --cd-badge-font-size: var(--cd-font-size-small);
   --cd-card-bg: var(--cd-color-bg-0);
   --cd-card-border: var(--cd-color-border);
-  --cd-card-radius: var(--cd-radius-3);
-  --cd-card-padding: var(--cd-spacing-4);
-  --cd-card-padding-small: var(--cd-spacing-3);
+  --cd-card-radius: var(--cd-border-radius-medium);
+  --cd-card-padding: var(--cd-spacing-base-loose);
+  --cd-card-padding-small: var(--cd-spacing-base-tight);
   --cd-card-header-border: var(--cd-color-border);
   --cd-card-title-color: var(--cd-color-text-0);
-  --cd-card-shadow: var(--cd-shadow-1);
-  --cd-card-shadow-hover: var(--cd-shadow-2);
+  --cd-card-title-weight: var(--cd-font-weight-bold);
+  --cd-card-title-size: var(--cd-font-size-header-6);
+  --cd-card-desc-color: var(--cd-color-text-2);
+  --cd-card-body-color: var(--cd-color-text-1);
+  --cd-card-shadow: var(--cd-shadow-elevated);
+  --cd-card-shadow-hover: var(--cd-shadow-elevated);
   --cd-tooltip-bg-dark: var(--cd-color-text-0);
   --cd-tooltip-color-dark: var(--cd-color-text-inverse);
   --cd-tooltip-bg-light: var(--cd-color-bg-0);
   --cd-tooltip-color-light: var(--cd-color-text-0);
-  --cd-tooltip-radius: var(--cd-radius-2);
-  --cd-tooltip-padding: var(--cd-spacing-1) var(--cd-spacing-2);
-  --cd-tooltip-font-size: var(--cd-font-size-1);
-  --cd-tooltip-shadow: var(--cd-shadow-2);
+  --cd-tooltip-radius: var(--cd-border-radius-medium);
+  --cd-tooltip-padding: var(--cd-spacing-tight) var(--cd-spacing-base-tight);
+  --cd-tooltip-font-size: var(--cd-font-size-regular);
+  --cd-tooltip-shadow: var(--cd-shadow-elevated);
   --cd-tooltip-z: var(--cd-z-tooltip);
   --cd-tooltip-arrow-size: 6px;
   --cd-tooltip-status-warning: var(--cd-color-warning);
   --cd-tooltip-status-error: var(--cd-color-danger);
   --cd-popover-bg: var(--cd-color-bg-0);
   --cd-popover-color: var(--cd-color-text-0);
-  --cd-popover-radius: var(--cd-radius-3);
-  --cd-popover-padding: var(--cd-spacing-3) var(--cd-spacing-4);
-  --cd-popover-padding-small: var(--cd-spacing-2) var(--cd-spacing-3);
-  --cd-popover-padding-default: var(--cd-spacing-3) var(--cd-spacing-4);
-  --cd-popover-padding-large: var(--cd-spacing-4) var(--cd-spacing-5);
-  --cd-popover-shadow: var(--cd-shadow-3);
+  --cd-popover-radius: var(--cd-border-radius-medium);
+  --cd-popover-padding: var(--cd-spacing-base-tight) var(--cd-spacing-base);
+  --cd-popover-padding-small: var(--cd-spacing-tight) var(--cd-spacing-base-tight);
+  --cd-popover-padding-default: var(--cd-spacing-base-tight) var(--cd-spacing-base);
+  --cd-popover-padding-large: var(--cd-spacing-base) var(--cd-spacing-base-loose);
+  --cd-popover-shadow: var(--cd-shadow-elevated);
   --cd-popover-z: var(--cd-z-popover);
   --cd-popover-title-color: var(--cd-color-text-0);
   --cd-popover-title-border: var(--cd-color-border);
@@ -465,52 +609,57 @@
   --cd-popover-motion-easing: var(--cd-motion-ease-standard);
   --cd-empty-image-color: var(--cd-color-fill-1);
   --cd-empty-title-color: var(--cd-color-text-1);
-  --cd-empty-desc-color: var(--cd-color-text-2);
-  --cd-empty-gap: var(--cd-spacing-3);
+  --cd-empty-title-weight: var(--cd-font-weight-bold);
+  --cd-empty-desc-color: var(--cd-color-text-1);
+  --cd-empty-gap: var(--cd-spacing-base-tight);
   --cd-descriptions-label-color: var(--cd-color-text-2);
   --cd-descriptions-value-color: var(--cd-color-text-0);
+  --cd-descriptions-value-weight-row: var(--cd-font-weight-bold);
   --cd-descriptions-border: var(--cd-color-border);
   --cd-descriptions-label-bg: var(--cd-color-fill-0);
-  --cd-descriptions-cell-padding: var(--cd-spacing-2) var(--cd-spacing-3);
-  --cd-descriptions-row-gap: var(--cd-spacing-3);
-  --cd-collapse-header-padding: var(--cd-spacing-3) var(--cd-spacing-4);
+  --cd-descriptions-cell-padding: var(--cd-spacing-tight) var(--cd-spacing-base-tight);
+  --cd-descriptions-row-gap: var(--cd-spacing-base-tight);
+  --cd-collapse-header-padding: var(--cd-spacing-tight);
   --cd-collapse-header-color: var(--cd-color-text-0);
+  --cd-collapse-header-weight: var(--cd-font-weight-bold);
   --cd-collapse-header-bg-hover: var(--cd-color-fill-0);
-  --cd-collapse-content-padding: var(--cd-spacing-3) var(--cd-spacing-4);
+  --cd-collapse-header-bg-active: var(--cd-color-fill-1);
+  --cd-collapse-content-padding: var(--cd-spacing-extra-tight) var(--cd-spacing-base) var(--cd-spacing-tight);
   --cd-collapse-content-color: var(--cd-color-text-1);
   --cd-collapse-border: var(--cd-color-border);
   --cd-collapse-arrow-color: var(--cd-color-text-2);
   --cd-collapse-motion-duration: var(--cd-motion-duration-mid);
   --cd-timeline-dot-size: 10px;
   --cd-timeline-dot-color: var(--cd-color-primary);
-  --cd-timeline-line-color: var(--cd-color-border);
+  --cd-timeline-line-color: var(--cd-color-text-3);
   --cd-timeline-content-color: var(--cd-color-text-0);
   --cd-timeline-time-color: var(--cd-color-text-2);
-  --cd-timeline-gap: var(--cd-spacing-4);
+  --cd-timeline-gap: var(--cd-spacing-base);
   --cd-list-bg: var(--cd-color-bg-0);
   --cd-list-border: var(--cd-color-border);
-  --cd-list-radius: var(--cd-radius-2);
-  --cd-list-item-padding: var(--cd-spacing-3) var(--cd-spacing-4);
-  --cd-list-item-padding-small: var(--cd-spacing-2) var(--cd-spacing-3);
+  --cd-list-radius: var(--cd-border-radius-medium);
+  --cd-list-item-padding: var(--cd-spacing-base-tight) var(--cd-spacing-base);
+  --cd-list-item-padding-small: var(--cd-spacing-tight) var(--cd-spacing-base-tight);
   --cd-list-split-color: var(--cd-color-border);
   --cd-list-header-color: var(--cd-color-text-0);
   --cd-list-item-color: var(--cd-color-text-1);
   --cd-image-bg: var(--cd-color-fill-0);
-  --cd-image-radius: var(--cd-radius-2);
+  --cd-image-radius: var(--cd-border-radius-small);
   --cd-image-placeholder-color: var(--cd-color-text-3);
   --cd-image-mask-bg: rgba(0, 0, 0, 0.5);
   --cd-image-mask-color: var(--cd-color-text-inverse);
   --cd-image-preview-overlay: rgba(0, 0, 0, 0.7);
   --cd-image-preview-z: var(--cd-z-modal);
-  --cd-highlight-bg: var(--cd-color-warning);
-  --cd-highlight-color: var(--cd-color-text-0);
+  --cd-highlight-bg: var(--cd-color-highlight-bg);
+  --cd-highlight-color: var(--cd-color-highlight);
+  --cd-highlight-weight: var(--cd-font-weight-bold);
   --cd-virtual-list-bg: var(--cd-color-bg-0);
   --cd-virtual-list-scrollbar: var(--cd-color-fill-1);
-  --cd-carousel-radius: var(--cd-radius-3);
-  --cd-carousel-indicator-color: rgba(255, 255, 255, 0.5);
-  --cd-carousel-indicator-color-active: var(--cd-color-bg-0);
-  --cd-carousel-indicator-gap: var(--cd-spacing-2);
-  --cd-carousel-arrow-bg: rgba(0, 0, 0, 0.4);
+  --cd-carousel-radius: var(--cd-border-radius-large);
+  --cd-carousel-indicator-color: rgba(255, 255, 255, 0.4);
+  --cd-carousel-indicator-color-active: rgba(255, 255, 255, 1);
+  --cd-carousel-indicator-gap: var(--cd-spacing-tight);
+  --cd-carousel-arrow-bg: rgba(0, 0, 0, 0.5);
   --cd-carousel-arrow-color: var(--cd-color-bg-0);
   --cd-carousel-arrow-size: 32px;
   --cd-table-bg: var(--cd-color-bg-0);
@@ -521,22 +670,22 @@
   --cd-table-row-hover-bg: var(--cd-color-fill-0);
   --cd-table-row-selected-bg: var(--cd-color-primary-light-default);
   --cd-table-row-stripe-bg: var(--cd-color-fill-0);
-  --cd-table-cell-padding-y: var(--cd-spacing-3);
-  --cd-table-cell-padding-x: var(--cd-spacing-4);
-  --cd-table-cell-padding-y-small: var(--cd-spacing-2);
-  --cd-table-cell-padding-y-large: var(--cd-spacing-4);
+  --cd-table-cell-padding-y: var(--cd-spacing-base);
+  --cd-table-cell-padding-x: var(--cd-spacing-base);
+  --cd-table-cell-padding-y-small: var(--cd-spacing-tight);
+  --cd-table-cell-padding-y-large: var(--cd-spacing-base);
   --cd-table-sort-active-color: var(--cd-color-primary);
   --cd-table-sort-icon-color: var(--cd-color-text-3);
   --cd-table-loading-mask: var(--cd-color-bg-0);
   --cd-table-empty-color: var(--cd-color-text-2);
-  --cd-table-radius: var(--cd-radius-2);
+  --cd-table-radius: var(--cd-border-radius-medium);
   --cd-calendar-bg: var(--cd-color-bg-0);
   --cd-calendar-border: var(--cd-color-border);
   --cd-calendar-header-bg: var(--cd-color-bg-1);
   --cd-calendar-text: var(--cd-color-text-0);
   --cd-calendar-text-secondary: var(--cd-color-text-2);
-  --cd-calendar-today-bg: var(--cd-color-primary-light-default);
-  --cd-calendar-today-fg: var(--cd-color-primary);
+  --cd-calendar-today-bg: var(--cd-color-primary);
+  --cd-calendar-today-fg: var(--cd-color-bg-1);
   --cd-calendar-selected-border: var(--cd-color-primary);
   --cd-calendar-range-bg: var(--cd-color-primary-light-default);
   --cd-calendar-range-edge-bg: var(--cd-color-primary-light-default);
@@ -548,7 +697,7 @@
   --cd-calendar-disabled-bg: var(--cd-color-fill-0);
   --cd-calendar-more-color: var(--cd-color-text-2);
   --cd-calendar-cell-min-h: 96px;
-  --cd-calendar-radius: var(--cd-radius-2);
+  --cd-calendar-radius: var(--cd-border-radius-medium);
   --cd-scrolllist-item-height: 36px;
   --cd-scrolllist-item-height-small: 28px;
   --cd-scrolllist-item-height-large: 44px;
@@ -559,16 +708,16 @@
   --cd-scrolllist-mask-border: var(--cd-color-border);
   --cd-scrolllist-gradient-color: var(--cd-color-bg-0);
   --cd-scrolllist-border-color: var(--cd-color-border);
-  --cd-scrolllist-radius: var(--cd-radius-2);
+  --cd-scrolllist-radius: var(--cd-border-radius-medium);
   --cd-scrolllist-transition: var(--cd-motion-duration-mid);
-  --cd-overflow-list-gap: var(--cd-spacing-2);
-  --cd-overflow-list-gap-small: var(--cd-spacing-1);
-  --cd-overflow-list-gap-large: var(--cd-spacing-3);
+  --cd-overflow-list-gap: var(--cd-spacing-tight);
+  --cd-overflow-list-gap-small: var(--cd-spacing-extra-tight);
+  --cd-overflow-list-gap-large: var(--cd-spacing-base-tight);
   --cd-overflow-list-overflow-color: var(--cd-color-text-2);
   --cd-overflow-list-overflow-color-hover: var(--cd-color-text-0);
   --cd-overflow-list-overflow-bg: transparent;
   --cd-overflow-list-overflow-bg-hover: var(--cd-color-fill-0);
-  --cd-overflow-list-overflow-radius: var(--cd-radius-2);
+  --cd-overflow-list-overflow-radius: var(--cd-border-radius-medium);
   --cd-overflow-list-focus-ring: var(--cd-color-primary);
   --cd-spin-color: var(--cd-color-primary);
   --cd-spin-track-color: var(--cd-color-fill-1);
@@ -577,87 +726,88 @@
   --cd-spin-size-large: 32px;
   --cd-spin-duration: 1s;
   --cd-spin-duration-reduced: 1.5s;
-  --cd-spin-tip-gap: var(--cd-spacing-2);
+  --cd-spin-tip-gap: var(--cd-spacing-tight);
   --cd-spin-tip-color: var(--cd-color-text-1);
   --cd-spin-mask-bg: rgba(255, 255, 255, 0.8);
   --cd-spin-z: 10;
   --cd-spin-z-fullscreen: 1000;
   --cd-spin-fade-duration: var(--cd-motion-duration-fast);
   --cd-progress-track-color: var(--cd-color-fill-0);
-  --cd-progress-stroke-normal: var(--cd-color-primary);
+  --cd-progress-stroke-normal: var(--cd-color-success);
   --cd-progress-stroke-success: var(--cd-color-success);
   --cd-progress-stroke-error: var(--cd-color-danger);
   --cd-progress-stroke-warning: var(--cd-color-warning);
   --cd-progress-info-color: var(--cd-color-text-0);
   --cd-progress-info-success-color: var(--cd-color-success);
   --cd-progress-height-small: 4px;
-  --cd-progress-height-default: 8px;
-  --cd-progress-height-large: 12px;
+  --cd-progress-height-default: 4px;
+  --cd-progress-height-large: 6px;
   --cd-progress-circle-size-small: 80px;
   --cd-progress-circle-size-default: 120px;
   --cd-progress-circle-size-large: 160px;
   --cd-progress-transition: var(--cd-motion-duration-mid) var(--cd-motion-ease-standard);
   --cd-skeleton-color-bg: var(--cd-color-fill-0);
   --cd-skeleton-color-highlight: var(--cd-color-fill-1);
-  --cd-skeleton-radius: var(--cd-radius-2);
-  --cd-skeleton-radius-pill: var(--cd-radius-full);
-  --cd-skeleton-gap: var(--cd-spacing-3);
+  --cd-skeleton-radius: var(--cd-border-radius-small);
+  --cd-skeleton-radius-pill: var(--cd-border-radius-full);
+  --cd-skeleton-gap: var(--cd-spacing-base-tight);
   --cd-skeleton-title-height: 16px;
-  --cd-skeleton-paragraph-height: 14px;
+  --cd-skeleton-paragraph-height: 16px;
   --cd-skeleton-anim-duration: 1.4s;
   --cd-skeleton-anim-timing: var(--cd-motion-ease-standard);
-  --cd-banner-radius: var(--cd-radius-2);
-  --cd-banner-padding-y: var(--cd-spacing-3);
-  --cd-banner-padding-x: var(--cd-spacing-4);
-  --cd-banner-gap: var(--cd-spacing-3);
+  --cd-banner-radius: var(--cd-border-radius-small);
+  --cd-banner-padding-y: var(--cd-spacing-base-tight);
+  --cd-banner-padding-x: var(--cd-spacing-base-tight);
+  --cd-banner-gap: var(--cd-spacing-base-tight);
   --cd-banner-icon-size: 20px;
   --cd-banner-title-color: var(--cd-color-text-0);
   --cd-banner-desc-color: var(--cd-color-text-1);
-  --cd-banner-title-size: var(--cd-font-size-2);
-  --cd-banner-desc-size: var(--cd-font-size-1);
+  --cd-banner-title-size: var(--cd-font-size-regular);
+  --cd-banner-desc-size: var(--cd-font-size-small);
   --cd-banner-accent-width: 4px;
-  --cd-banner-info-bg: var(--cd-color-primary-light-default);
-  --cd-banner-info-accent: var(--cd-color-primary);
-  --cd-banner-success-bg: color-mix(in srgb, var(--cd-color-success) 12%, transparent);
+  --cd-banner-info-bg: var(--cd-color-info-light-default);
+  --cd-banner-info-accent: var(--cd-color-info);
+  --cd-banner-success-bg: var(--cd-color-success-light-default);
   --cd-banner-success-accent: var(--cd-color-success);
   --cd-banner-warning-bg: var(--cd-color-warning-light-default);
   --cd-banner-warning-accent: var(--cd-color-warning);
-  --cd-banner-danger-bg: color-mix(in srgb, var(--cd-color-danger) 12%, transparent);
+  --cd-banner-danger-bg: var(--cd-color-danger-light-default);
   --cd-banner-danger-accent: var(--cd-color-danger);
   --cd-banner-close-color: var(--cd-color-text-2);
   --cd-banner-close-hover-bg: var(--cd-color-fill-1);
   --cd-banner-motion-duration: var(--cd-motion-duration-fast);
-  --cd-modal-radius: var(--cd-radius-3);
+  --cd-modal-radius: var(--cd-border-radius-large);
   --cd-modal-bg: var(--cd-color-bg-0);
-  --cd-modal-shadow: var(--cd-shadow-3);
-  --cd-modal-mask-bg: rgba(0, 0, 0, 0.45);
-  --cd-modal-padding: var(--cd-spacing-6);
-  --cd-modal-header-gap: var(--cd-spacing-3);
-  --cd-modal-footer-gap: var(--cd-spacing-2);
+  --cd-modal-shadow: var(--cd-shadow-elevated);
+  --cd-modal-mask-bg: var(--cd-color-overlay-bg);
+  --cd-modal-padding: var(--cd-spacing-loose);
+  --cd-modal-header-gap: var(--cd-spacing-base-tight);
+  --cd-modal-footer-gap: var(--cd-spacing-tight);
   --cd-modal-title-color: var(--cd-color-text-0);
-  --cd-modal-title-size: var(--cd-font-size-3);
+  --cd-modal-title-size: var(--cd-font-size-regular);
+  --cd-modal-title-weight: var(--cd-font-weight-bold);
   --cd-modal-body-color: var(--cd-color-text-1);
   --cd-modal-close-color: var(--cd-color-text-2);
   --cd-modal-close-hover-bg: var(--cd-color-fill-1);
-  --cd-modal-z: 1000;
+  --cd-modal-z: var(--cd-z-modal);
   --cd-modal-motion-duration: var(--cd-motion-duration-mid);
   --cd-drawer-bg: var(--cd-color-bg-0);
   --cd-drawer-color-text: var(--cd-color-text-0);
   --cd-drawer-color-title: var(--cd-color-text-0);
   --cd-drawer-border: var(--cd-color-border);
   --cd-drawer-mask-bg: rgba(0, 0, 0, 0.45);
-  --cd-drawer-shadow: var(--cd-shadow-3);
+  --cd-drawer-shadow: var(--cd-shadow-elevated);
   --cd-drawer-width: 448px;
   --cd-drawer-width-small: 320px;
   --cd-drawer-width-large: 720px;
   --cd-drawer-height: 320px;
   --cd-drawer-height-small: 240px;
   --cd-drawer-height-large: 480px;
-  --cd-drawer-header-padding: var(--cd-spacing-5);
-  --cd-drawer-body-padding: var(--cd-spacing-5);
-  --cd-drawer-footer-padding: var(--cd-spacing-4) var(--cd-spacing-5);
+  --cd-drawer-header-padding: var(--cd-spacing-base-loose);
+  --cd-drawer-body-padding: var(--cd-spacing-base-loose);
+  --cd-drawer-footer-padding: var(--cd-spacing-base) var(--cd-spacing-base-loose);
   --cd-drawer-title-color: var(--cd-color-text-0);
-  --cd-drawer-title-size: var(--cd-font-size-3);
+  --cd-drawer-title-size: var(--cd-font-size-header-6);
   --cd-drawer-close-color: var(--cd-color-text-2);
   --cd-drawer-close-color-hover: var(--cd-color-text-0);
   --cd-drawer-close-hover-bg: var(--cd-color-fill-1);
@@ -667,13 +817,13 @@
   --cd-sidesheet-color: var(--cd-color-text-0);
   --cd-sidesheet-mask-bg: rgba(0, 0, 0, 0.6);
   --cd-sidesheet-border: var(--cd-color-border);
-  --cd-sidesheet-radius: var(--cd-radius-3);
-  --cd-sidesheet-shadow: var(--cd-shadow-3);
-  --cd-sidesheet-padding: var(--cd-spacing-5);
-  --cd-sidesheet-header-padding: var(--cd-spacing-4) var(--cd-spacing-5);
-  --cd-sidesheet-footer-padding: var(--cd-spacing-4) var(--cd-spacing-5);
+  --cd-sidesheet-radius: var(--cd-border-radius-large);
+  --cd-sidesheet-shadow: var(--cd-shadow-elevated);
+  --cd-sidesheet-padding: var(--cd-spacing-base-loose);
+  --cd-sidesheet-header-padding: var(--cd-spacing-base) var(--cd-spacing-base-loose);
+  --cd-sidesheet-footer-padding: var(--cd-spacing-base) var(--cd-spacing-base-loose);
   --cd-sidesheet-title-color: var(--cd-color-text-0);
-  --cd-sidesheet-title-size: var(--cd-font-size-3);
+  --cd-sidesheet-title-size: var(--cd-font-size-header-6);
   --cd-sidesheet-close-color: var(--cd-color-text-2);
   --cd-sidesheet-close-color-hover: var(--cd-color-text-0);
   --cd-sidesheet-close-hover-bg: var(--cd-color-fill-1);
@@ -687,20 +837,21 @@
   --cd-sidesheet-motion-duration: var(--cd-motion-duration-mid);
   --cd-popconfirm-bg: var(--cd-color-bg-0);
   --cd-popconfirm-color-text: var(--cd-color-text-0);
-  --cd-popconfirm-color-text-secondary: var(--cd-color-text-1);
+  --cd-popconfirm-color-text-secondary: var(--cd-color-text-2);
   --cd-popconfirm-border: var(--cd-color-border);
-  --cd-popconfirm-shadow: var(--cd-shadow-3);
-  --cd-popconfirm-radius: var(--cd-radius-2);
-  --cd-popconfirm-padding: var(--cd-spacing-4);
+  --cd-popconfirm-shadow: var(--cd-shadow-elevated);
+  --cd-popconfirm-radius: var(--cd-border-radius-medium);
+  --cd-popconfirm-padding: var(--cd-spacing-loose);
   --cd-popconfirm-icon-color-danger: var(--cd-color-danger);
   --cd-popconfirm-icon-color-warning: var(--cd-color-warning);
-  --cd-popconfirm-icon-color-info: var(--cd-color-primary);
+  --cd-popconfirm-icon-color-info: var(--cd-color-warning);
   --cd-popconfirm-title-color: var(--cd-color-text-0);
-  --cd-popconfirm-title-size: var(--cd-font-size-2);
-  --cd-popconfirm-content-size: var(--cd-font-size-1);
-  --cd-popconfirm-max-width: 280px;
+  --cd-popconfirm-title-size: var(--cd-font-size-regular);
+  --cd-popconfirm-title-weight: var(--cd-font-weight-bold);
+  --cd-popconfirm-content-size: var(--cd-font-size-small);
+  --cd-popconfirm-max-width: 400px;
   --cd-popconfirm-z: 1000;
-  --cd-popconfirm-gap-footer: var(--cd-spacing-2);
+  --cd-popconfirm-gap-footer: var(--cd-spacing-tight);
   --cd-popconfirm-arrow-size: 8px;
   --cd-popconfirm-motion-duration: var(--cd-motion-duration-fast);
   --cd-popconfirm-motion-easing: var(--cd-motion-ease-standard);
@@ -712,14 +863,15 @@
   --cd-toast-color-icon-error: var(--cd-color-danger);
   --cd-toast-color-close: var(--cd-color-text-2);
   --cd-toast-color-close-hover: var(--cd-color-text-0);
-  --cd-toast-radius: var(--cd-radius-2);
-  --cd-toast-shadow: var(--cd-shadow-3);
-  --cd-toast-padding: var(--cd-spacing-3) var(--cd-spacing-4);
-  --cd-toast-gap: var(--cd-spacing-2);
-  --cd-toast-font-size: var(--cd-font-size-2);
+  --cd-toast-radius: var(--cd-border-radius-medium);
+  --cd-toast-shadow: var(--cd-shadow-elevated);
+  --cd-toast-padding: var(--cd-spacing-base-tight) var(--cd-spacing-tight);
+  --cd-toast-gap: var(--cd-spacing-tight);
+  --cd-toast-font-size: var(--cd-font-size-regular);
+  --cd-toast-font-weight: var(--cd-font-weight-bold);
   --cd-toast-max-width: 420px;
   --cd-toast-min-width: 240px;
-  --cd-toast-stack-gap: var(--cd-spacing-2);
+  --cd-toast-stack-gap: var(--cd-spacing-tight);
   --cd-toast-z: 1100;
   --cd-toast-motion-duration: var(--cd-motion-duration-fast);
   --cd-toast-bg-dark: var(--cd-color-text-0);
@@ -731,20 +883,21 @@
   --cd-notification-color-title: var(--cd-color-text-0);
   --cd-notification-color-content: var(--cd-color-text-1);
   --cd-notification-border: var(--cd-color-border);
-  --cd-notification-radius: var(--cd-radius-3);
-  --cd-notification-shadow: var(--cd-shadow-3);
-  --cd-notification-padding: var(--cd-spacing-4);
-  --cd-notification-gap: var(--cd-spacing-3);
+  --cd-notification-radius: var(--cd-border-radius-medium);
+  --cd-notification-shadow: var(--cd-shadow-elevated);
+  --cd-notification-padding: var(--cd-spacing-base);
+  --cd-notification-gap: var(--cd-spacing-base-tight);
   --cd-notification-icon-success: var(--cd-color-success);
   --cd-notification-icon-info: var(--cd-color-primary);
   --cd-notification-icon-warning: var(--cd-color-warning);
   --cd-notification-icon-error: var(--cd-color-danger);
   --cd-notification-close-color: var(--cd-color-text-2);
   --cd-notification-close-color-hover: var(--cd-color-text-0);
-  --cd-notification-title-size: var(--cd-font-size-2);
-  --cd-notification-content-size: var(--cd-font-size-1);
+  --cd-notification-title-size: var(--cd-font-size-regular);
+  --cd-notification-title-weight: var(--cd-font-weight-bold);
+  --cd-notification-content-size: var(--cd-font-size-small);
   --cd-notification-z: 1100;
-  --cd-notification-offset: var(--cd-spacing-6);
+  --cd-notification-offset: var(--cd-spacing-loose);
   --cd-notification-motion-duration: var(--cd-motion-duration-mid);
   --cd-notification-progress-height: 3px;
   --cd-notification-progress-color: var(--cd-color-primary);
@@ -762,8 +915,8 @@
   --cd-backtop-bg-active: var(--cd-color-fill-1);
   --cd-backtop-color: var(--cd-color-text-0);
   --cd-backtop-border: var(--cd-color-border);
-  --cd-backtop-shadow: var(--cd-shadow-3);
-  --cd-backtop-radius: var(--cd-radius-full);
+  --cd-backtop-shadow: var(--cd-shadow-elevated);
+  --cd-backtop-radius: var(--cd-border-radius-full);
   --cd-backtop-z: 900;
   --cd-backtop-focus-ring: var(--cd-color-primary);
   --cd-backtop-motion-duration: var(--cd-motion-duration-fast);
@@ -773,7 +926,7 @@
   --cd-lottieicon-color: var(--cd-color-text-0);
   --cd-lottieicon-color-hover: var(--cd-color-primary);
   --cd-lottieicon-bg-skeleton: var(--cd-color-bg-1);
-  --cd-lottieicon-radius: var(--cd-radius-1);
+  --cd-lottieicon-radius: var(--cd-border-radius-small);
   --cd-lottieicon-error-color: var(--cd-color-danger);
   --cd-lottieicon-valign: -0.125em;
 }
@@ -781,24 +934,83 @@
 [data-theme='dark'] {
   --cd-color-text-0: #f9f9f9;
   --cd-color-text-1: rgba(249, 249, 249, 0.8);
-  --cd-color-text-2: rgba(249, 249, 249, 0.6);
+  --cd-color-text-2: rgba(249, 249, 249, 0.62);
   --cd-color-text-3: rgba(249, 249, 249, 0.35);
   --cd-color-text-inverse: #ffffff;
-  --cd-color-primary: #54a9ff;
-  --cd-color-primary-hover: #3295fb;
-  --cd-color-primary-active: #65b2fc;
-  --cd-color-info: #54a9ff;
-  --cd-color-link: #54a9ff;
-  --cd-color-success: #5dc264;
-  --cd-color-warning: #ffae43;
-  --cd-color-danger: #fc725a;
+  --cd-color-rating-icon-default: #fdde43;
+  --cd-color-highlight: #ffffff;
+  --cd-color-highlight-bg: #fdf398;
+  --cd-color-primary: rgb(84, 169, 255);
+  --cd-color-primary-hover: rgb(127, 193, 255);
+  --cd-color-primary-active: rgb(169, 215, 255);
+  --cd-color-primary-disabled: rgb(19, 92, 184);
+  --cd-color-primary-light-default: rgba(84, 169, 255, 0.2);
+  --cd-color-primary-light-hover: rgba(84, 169, 255, 0.3);
+  --cd-color-primary-light-active: rgba(84, 169, 255, 0.4);
+  --cd-color-secondary: rgb(72, 179, 245);
+  --cd-color-secondary-hover: rgb(120, 199, 247);
+  --cd-color-secondary-active: rgb(168, 219, 250);
+  --cd-color-secondary-disabled: rgb(3, 102, 169);
+  --cd-color-secondary-light-default: rgba(72, 179, 245, 0.2);
+  --cd-color-secondary-light-hover: rgba(72, 179, 245, 0.3);
+  --cd-color-secondary-light-active: rgba(72, 179, 245, 0.4);
+  --cd-color-tertiary: rgb(136, 141, 146);
+  --cd-color-tertiary-hover: rgb(167, 171, 176);
+  --cd-color-tertiary-active: rgb(198, 202, 205);
+  --cd-color-tertiary-light-default: rgb(28, 31, 35);
+  --cd-color-tertiary-light-hover: rgb(46, 50, 56);
+  --cd-color-tertiary-light-active: rgb(65, 70, 76);
+  --cd-color-info: rgb(84, 169, 255);
+  --cd-color-info-hover: rgb(127, 193, 255);
+  --cd-color-info-active: rgb(169, 215, 255);
+  --cd-color-info-disabled: rgb(19, 92, 184);
+  --cd-color-info-light-default: rgba(84, 169, 255, 0.2);
+  --cd-color-info-light-hover: rgba(84, 169, 255, 0.3);
+  --cd-color-info-light-active: rgba(84, 169, 255, 0.4);
+  --cd-color-success: rgb(93, 194, 100);
+  --cd-color-success-hover: rgb(127, 209, 132);
+  --cd-color-success-active: rgb(166, 225, 168);
+  --cd-color-success-disabled: rgb(39, 119, 49);
+  --cd-color-success-light-default: rgba(93, 194, 100, 0.2);
+  --cd-color-success-light-hover: rgba(93, 194, 100, 0.3);
+  --cd-color-success-light-active: rgba(93, 194, 100, 0.4);
+  --cd-color-warning: rgb(255, 174, 67);
+  --cd-color-warning-hover: rgb(255, 199, 114);
+  --cd-color-warning-active: rgb(255, 221, 161);
+  --cd-color-warning-disabled: rgb(170, 80, 10);
+  --cd-color-warning-light-default: rgba(255, 174, 67, 0.2);
+  --cd-color-warning-light-hover: rgba(255, 174, 67, 0.3);
+  --cd-color-warning-light-active: rgba(255, 174, 67, 0.4);
+  --cd-color-danger: rgb(252, 114, 90);
+  --cd-color-danger-hover: rgb(253, 153, 131);
+  --cd-color-danger-active: rgb(253, 190, 172);
+  --cd-color-danger-disabled: rgb(180, 32, 25);
+  --cd-color-danger-light-default: rgba(252, 114, 90, 0.2);
+  --cd-color-danger-light-hover: rgba(252, 114, 90, 0.3);
+  --cd-color-danger-light-active: rgba(252, 114, 90, 0.4);
+  --cd-color-link: rgb(84, 169, 255);
+  --cd-color-link-hover: rgb(127, 193, 255);
+  --cd-color-link-active: rgb(169, 215, 255);
+  --cd-color-link-visited: rgb(84, 169, 255);
+  --cd-color-disabled-text: rgba(249, 249, 249, 0.35);
+  --cd-color-disabled-border: rgb(46, 50, 56);
+  --cd-color-disabled-bg: rgb(46, 50, 56);
+  --cd-color-disabled-fill: rgba(230, 232, 234, 0.04);
   --cd-color-bg-0: #16161a;
   --cd-color-bg-1: #232429;
-  --cd-color-bg-2: #2e3238;
-  --cd-color-bg-3: #41464c;
-  --cd-color-border: #41464c;
-  --cd-color-fill-0: rgba(249, 249, 249, 0.08);
-  --cd-color-fill-1: rgba(249, 249, 249, 0.12);
+  --cd-color-bg-2: #35363c;
+  --cd-color-bg-3: #43444a;
+  --cd-color-bg-4: #4a4d56;
+  --cd-color-nav-bg: #232429;
+  --cd-color-bg-inverse: #f9f9f9;
+  --cd-color-overlay-bg: rgba(22, 22, 26, 0.6);
+  --cd-color-border: rgba(255, 255, 255, 0.08);
+  --cd-color-fill-0: rgba(255, 255, 255, 0.12);
+  --cd-color-fill-1: rgba(255, 255, 255, 0.16);
+  --cd-color-fill-2: rgba(255, 255, 255, 0.2);
+  --cd-color-shadow: rgba(0, 0, 0, 0.04);
+  --cd-color-focus: rgb(84, 169, 255);
+  --cd-color-focus-border: rgb(84, 169, 255);
 }
 
 /* Base：把页面背景/前景绑到主题 token，使暗色模式开箱即用（对齐 Semi —— Semi 同样