/** * GoEdge 控制台设计系统 · 令牌层 * ============================================================================ * 全部令牌定义在 `:root`，纯 CSS，无需 JS 注入。 * * 依据（真实浏览器实测，非推测）： * - `:root` 上确实存在 Soybean 注入的 `--primary-color` 与**完整 50–950 色阶** * （`--primary-50-color: 240 243 255` … `--primary-950-color: 15 9 64`，均为 RGB 三元组）； * - 语义色 `--info/success/warning/error-color`、表面色 `--container-bg-color`、 * `--layout-bg-color`、文本色 `--base-text-color` 同样在 `:root`； * - 这些变量会随**主题色**与**亮暗模式**自动切换 * （实测 container 亮色 `255 255 255` → 暗色 `28 28 28`）； * - Naive UI 的 `--n-*` **不在** `:root`（只以内联 style 注入各组件自身根元素）， * 所以业务样式一律不要直接引用 `--n-*`； * - `color-mix()` 可用，因此浅底色一律用「主色 × 表面色」混合派生， * 亮色得到淡彩底、暗色得到深彩底，无需为两套模式各写一份。 * * 命名约定：`--ge-*`。业务页面与外壳共用同一套，禁止再出现硬编码色值。 */ :root { /* ========================================================================== * 品牌与语义色 * ========================================================================== */ --ge-primary: rgb(var(--primary-color)); --ge-primary-hover: rgb(var(--primary-400-color)); --ge-primary-active: rgb(var(--primary-700-color)); --ge-primary-weak: rgb(var(--primary-100-color)); --ge-on-primary: #fff; --ge-info: rgb(var(--info-color)); --ge-success: rgb(var(--success-color)); --ge-warning: rgb(var(--warning-color)); --ge-error: rgb(var(--error-color)); /* 浅底色：与「表面色」混合，自动适配亮/暗 */ --ge-primary-soft: color-mix(in srgb, var(--ge-primary) 11%, var(--ge-surface)); --ge-primary-soft-hover: color-mix(in srgb, var(--ge-primary) 17%, var(--ge-surface)); --ge-success-soft: color-mix(in srgb, var(--ge-success) 13%, var(--ge-surface)); --ge-warning-soft: color-mix(in srgb, var(--ge-warning) 16%, var(--ge-surface)); --ge-error-soft: color-mix(in srgb, var(--ge-error) 13%, var(--ge-surface)); --ge-info-soft: color-mix(in srgb, var(--ge-info) 13%, var(--ge-surface)); --ge-neutral-soft: color-mix(in srgb, rgb(var(--base-text-color)) 6%, var(--ge-surface)); /* 描边式强调（用于左侧色条、进度条、图表） */ --ge-primary-line: color-mix(in srgb, var(--ge-primary) 45%, var(--ge-surface)); --ge-success-line: color-mix(in srgb, var(--ge-success) 45%, var(--ge-surface)); --ge-warning-line: color-mix(in srgb, var(--ge-warning) 45%, var(--ge-surface)); --ge-error-line: color-mix(in srgb, var(--ge-error) 45%, var(--ge-surface)); /* 焦点环 */ --ge-ring: 0 0 0 3px color-mix(in srgb, var(--ge-primary) 22%, transparent); /* ========================================================================== * 表面、文本、描边 * ========================================================================== */ --ge-surface: rgb(var(--container-bg-color)); --ge-canvas: rgb(var(--layout-bg-color)); /* 比表面略高一层（卡片头、表头、内嵌块） */ --ge-surface-sunken: color-mix(in srgb, rgb(var(--base-text-color)) 3%, var(--ge-surface)); --ge-surface-raised: color-mix(in srgb, rgb(var(--base-text-color)) 8%, var(--ge-surface)); --ge-text: rgb(var(--base-text-color)); --ge-text-2: color-mix(in srgb, rgb(var(--base-text-color)) 72%, var(--ge-surface)); --ge-text-3: color-mix(in srgb, rgb(var(--base-text-color)) 48%, var(--ge-surface)); --ge-text-disabled: color-mix(in srgb, rgb(var(--base-text-color)) 34%, var(--ge-surface)); --ge-border: color-mix(in srgb, rgb(var(--base-text-color)) 13%, transparent); --ge-border-strong: color-mix(in srgb, rgb(var(--base-text-color)) 22%, transparent); --ge-divider: color-mix(in srgb, rgb(var(--base-text-color)) 9%, transparent); --ge-fill: color-mix(in srgb, rgb(var(--base-text-color)) 5%, transparent); --ge-fill-hover: color-mix(in srgb, rgb(var(--base-text-color)) 8%, transparent); /* ========================================================================== * 间距（4px 基准） * ========================================================================== */ --ge-space-1: 4px; --ge-space-2: 8px; --ge-space-3: 12px; --ge-space-4: 16px; --ge-space-5: 20px; --ge-space-6: 24px; --ge-space-8: 32px; --ge-space-10: 40px; --ge-space-12: 48px; /* ========================================================================== * 圆角 * ========================================================================== */ --ge-radius-xs: 4px; --ge-radius-sm: 6px; --ge-radius: 8px; --ge-radius-lg: 12px; --ge-radius-xl: 16px; --ge-radius-pill: 999px; /* ========================================================================== * 字体与行高 * ========================================================================== */ --ge-font-size-caption: 12px; --ge-font-size-sm: 13px; --ge-font-size: 14px; --ge-font-size-lg: 15px; --ge-font-size-title: 17px; --ge-font-size-h1: 22px; --ge-font-size-display: 30px; --ge-line-height-tight: 1.3; --ge-line-height: 1.5715; --ge-line-height-loose: 1.75; --ge-weight-medium: 500; --ge-weight-semibold: 600; --ge-weight-bold: 650; /* ========================================================================== * 阴影与动效 * ========================================================================== */ --ge-shadow-xs: 0 1px 2px rgb(0 0 0 / 4%); --ge-shadow-sm: 0 1px 3px rgb(0 0 0 / 6%), 0 1px 2px rgb(0 0 0 / 4%); --ge-shadow: 0 4px 14px rgb(0 0 0 / 7%); --ge-shadow-lg: 0 14px 38px rgb(0 0 0 / 12%); --ge-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ge-duration-fast: 120ms; --ge-duration: 180ms; --ge-duration-slow: 260ms; /* ========================================================================== * 布局尺寸 * ========================================================================== */ --ge-content-max: 1680px; --ge-page-gap: var(--ge-space-4); } /* * 暗色下阴影要更重才看得出层次；纯灰的暗色表面偏"平"， * 这里给表面加一点点冷色倾向，整体更接近高端产品的观感。 */ html.dark { --ge-shadow-xs: 0 1px 2px rgb(0 0 0 / 32%); --ge-shadow-sm: 0 1px 3px rgb(0 0 0 / 38%), 0 1px 2px rgb(0 0 0 / 26%); --ge-shadow: 0 6px 18px rgb(0 0 0 / 42%); --ge-shadow-lg: 0 18px 44px rgb(0 0 0 / 52%); --ge-surface-raised: color-mix(in srgb, #fff 9%, var(--ge-surface)); --ge-surface-sunken: color-mix(in srgb, #000 22%, var(--ge-surface)); --ge-border: color-mix(in srgb, #fff 14%, transparent); --ge-border-strong: color-mix(in srgb, #fff 24%, transparent); --ge-divider: color-mix(in srgb, #fff 10%, transparent); --ge-fill: color-mix(in srgb, #fff 7%, transparent); --ge-fill-hover: color-mix(in srgb, #fff 11%, transparent); }