refactor: govern CSS tokens and cascade
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user