refactor: govern CSS tokens and cascade

This commit is contained in:
leefer
2026-07-29 21:56:39 +08:00
parent 8d617cfa17
commit ed2b47fe90
11 changed files with 551 additions and 425 deletions
-83
View File
@@ -2,60 +2,6 @@
Structural layer built on semantic tokens. Page-specific character (notably Wentian)
remains owned by the underlying feature styles. */
:root {
/* primitive */
--xb-gray-25: #fcfcfd;
--xb-gray-50: #f8f9fb;
--xb-gray-100: #f2f4f7;
--xb-gray-200: #e5e8ee;
--xb-gray-300: #d4d9e2;
--xb-gray-500: #697386;
--xb-gray-700: #344054;
--xb-gray-900: #172033;
--xb-blue-50: #eef4ff;
--xb-blue-100: #dce8ff;
--xb-blue-500: #356ae6;
--xb-blue-600: #2858c7;
--xb-red-50: #fff1f0;
--xb-red-500: #df493b;
--xb-green-50: #ecf9f1;
--xb-green-500: #179b55;
--xb-amber-50: #fff7e8;
--xb-amber-500: #d7820b;
/* semantic */
--surface-canvas: var(--xb-gray-100);
--surface-raised: #ffffff;
--surface-subtle: var(--xb-gray-50);
--surface-selected: var(--xb-blue-50);
--text-primary: var(--xb-gray-900);
--text-secondary: var(--xb-gray-500);
--text-tertiary: #98a1b2;
--border: var(--xb-gray-200);
--border-strong: var(--xb-gray-300);
--primary: var(--xb-blue-500);
--primary-hover: var(--xb-blue-600);
--danger: var(--xb-red-500);
--success: var(--xb-green-500);
--warning: var(--xb-amber-500);
--radius-sm: 5px;
--radius-md: 8px;
--radius-lg: 10px;
--shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
--shadow-sm: 0 3px 10px rgba(16, 24, 40, .055);
--shadow-float: 0 14px 38px rgba(16, 24, 40, .14);
--duration-fast: 150ms;
--duration-normal: 220ms;
/* component */
--card-bg: var(--surface-raised);
--card-border: var(--border);
--card-radius: var(--radius-lg);
--card-shadow: var(--shadow-xs);
--control-height: 34px;
--page-gap: 12px;
}
html { background: var(--surface-canvas); }
body {
@@ -870,35 +816,6 @@ body[data-active-view="reviewWorkspaceView"] .workspace-view {
.curated-strategy-card { animation: none !important; transition: none !important; }
}
/* Visual master alignment: based on the approved desktop prototypes. */
:root {
--xb-blue-500: #2563eb;
--xb-blue-600: #1d4ed8;
--xb-red-500: #e04536;
--xb-green-500: #16a34a;
--xb-amber-500: #b45309;
--surface-canvas: #f4f5f7;
--surface-subtle: #f8fafc;
--text-primary: #1f2937;
--text-secondary: #6b7280;
--text-tertiary: #9ca3af;
--border: #e5e7eb;
--border-strong: #d1d5db;
--primary: var(--xb-blue-500);
--primary-hover: var(--xb-blue-600);
--danger: var(--xb-red-500);
--success: var(--xb-green-500);
--warning: var(--xb-amber-500);
--radius-sm: 5px;
--radius-md: 7px;
--radius-lg: 10px;
--shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
--shadow-sm: 0 4px 14px rgba(16, 24, 40, .06);
--card-radius: 10px;
--card-shadow: var(--shadow-xs);
--control-height: 32px;
}
body {
grid-template-columns: 200px minmax(0, 1fr);
grid-template-rows: 46px minmax(0, 1fr) 30px;