feat(appearance): add theme presets constants module

定义 12 个 shadcn 主题预设标识、6 档缩放档位以及 UI 预览代表色,
作为后续 AppearanceProvider 和 globals.css 的共享基础。

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
xintaofei
2026-04-11 15:35:31 +08:00
parent 28f866e87a
commit 5298830fb8

61
src/lib/theme-presets.ts Normal file
View File

@@ -0,0 +1,61 @@
// src/lib/theme-presets.ts
/**
* 12 个 shadcn 官方主题预设的标识符。
* 实际 CSS 变量值定义在 src/app/globals.css 的 [data-theme="..."] 选择器中。
*/
export const THEME_COLORS = [
"neutral",
"zinc",
"slate",
"stone",
"gray",
"red",
"rose",
"orange",
"green",
"blue",
"yellow",
"violet",
] as const
export type ThemeColor = (typeof THEME_COLORS)[number]
/**
* 默认主题色。选用 "neutral" 是因为它对应当前 globals.css 的现存 :root 值
* (所有 chroma=0 的纯灰阶),可保证升级后视觉零差异。
*/
export const DEFAULT_THEME_COLOR: ThemeColor = "neutral"
/**
* UI 预览用的代表色OKLch 字符串,对应各预设的 primary 色 light 版本)。
* 仅用于 Appearance 页面的"色盘圆点"按钮渲染,不会被写入真实样式。
*
* 选择 light primary 而非其他变量,是因为 primary 是各预设视觉差异最大的部分。
* 这些值必须硬编码(不能通过 var(--primary) 读取),因为每个圆点要永远显示
* 自己对应预设的代表色,不能跟随当前激活的主题色。
*/
export const THEME_COLOR_PREVIEW: Record<ThemeColor, string> = {
neutral: "oklch(0.205 0 0)",
zinc: "oklch(0.21 0.006 285.885)",
slate: "oklch(0.208 0.042 265.755)",
stone: "oklch(0.216 0.006 56.043)",
gray: "oklch(0.21 0.034 264.665)",
red: "oklch(0.637 0.237 25.331)",
rose: "oklch(0.645 0.246 16.439)",
orange: "oklch(0.705 0.213 47.604)",
green: "oklch(0.723 0.219 149.579)",
blue: "oklch(0.546 0.245 262.881)",
yellow: "oklch(0.795 0.184 86.047)",
violet: "oklch(0.606 0.25 292.717)",
}
/**
* 缩放档位百分比。100 是默认。
* 选用离散档位而非连续滑块,是为了与现有 ThemeMode 选择器保持视觉一致。
*/
export const ZOOM_LEVELS = [80, 90, 100, 110, 125, 150] as const
export type ZoomLevel = (typeof ZOOM_LEVELS)[number]
export const DEFAULT_ZOOM_LEVEL: ZoomLevel = 100