HIsheR
113 lines
8.7 KiB
CSS
113 lines
8.7 KiB
CSS
/* @ui-arch design tokens - light theme defaults + dark theme overrides
|
|
分组：颜色 / 圆角 / 间距 / 字号 / 字重与行高 / 边框 / 阴影 / 动效 / 焦点环 / 控件高度 / 层级
|
|
约定：皮肤包（packages/skin/ui/ui.css）只能消费 var(--ua-*)，禁止硬编码颜色、阴影、时长、字号；
|
|
本文件是令牌唯一来源，ua tokens / llms-full.txt / MCP get_tokens 全部从这里派生。 */
|
|
:root {
|
|
/* ---- 颜色：语义色，暗色主题逐个覆盖 ---- */
|
|
--ua-color-bg: #ffffff; /* 页面底色：弹层、卡片之外的最底层 */
|
|
--ua-color-surface: #f6f7f9; /* 表面色：卡片 / 表头 / 次级容器 */
|
|
--ua-color-text: #1c1e21; /* 主文本色：正文与标题共用 */
|
|
--ua-color-text-muted: #6b7280; /* 辅助文本色：说明、占位、次要信息 */
|
|
--ua-color-border: rgba(0, 0, 0, 0.15); /* 基础边框色：输入框 / 卡片 / 分割线 */
|
|
--ua-color-accent: #185fa5; /* 强调色：主操作、选中态、焦点环底色 */
|
|
--ua-color-accent-contrast: #ffffff; /* 强调色上的文字色：保证主按钮对比度 */
|
|
--ua-color-danger: #a32d2d; /* 危险色：错误、删除、校验失败 */
|
|
--ua-color-success: #0f6e56; /* 成功色：完成、通过、正向结果 */
|
|
--ua-color-warning: #9a6b1f; /* 警告色：提醒、需注意但不阻断 */
|
|
|
|
/* ---- 圆角：三档，控件用小、卡片用中、弹层用大 ---- */
|
|
--ua-radius-sm: 4px; /* 小圆角：按钮 / 输入框 / 标签等控件 */
|
|
--ua-radius-md: 8px; /* 中圆角：卡片 / 面板 / 分组容器 */
|
|
--ua-radius-lg: 12px; /* 大圆角：弹窗 / 抽屉等浮层外壳 */
|
|
|
|
/* ---- 间距：4px 基准四档 + 表格单元格复合值 ---- */
|
|
--ua-space-1: 4px; /* 间距 1 档：图标与文字之间、紧邻元素 */
|
|
--ua-space-2: 8px; /* 间距 2 档：控件内边距、同组元素间隔 */
|
|
--ua-space-3: 12px; /* 间距 3 档：表单行内边距、卡片内边距 */
|
|
--ua-space-4: 16px;
|
|
--ua-space-05: 2px; /* 半步：微型内距（紧凑徽标内衬、选中点偏移） */
|
|
--ua-space-15: 6px; /* 一档半：紧凑控件内距（小按钮 / 标签） */
|
|
--ua-space-25: 10px; /* 二档半：标准控件内距（介于 8 与 12 之间的既有主流值） */
|
|
--ua-space-35: 14px; /* 三档半：宽松行内距（列表行 / 菜单行） */ /* 间距 4 档：区块内边距、卡片间距 */
|
|
--ua-space-table-cell: var(--ua-space-2) var(--ua-space-3); /* 表格单元格内边距：上下 2 档 / 左右 3 档 */
|
|
|
|
/* ---- 字号：五档主轴 + 三档展示字号 + 两档相对缩放（10/11px 统一归入 xs，避免单独成档） ---- */
|
|
--ua-font-size-xs: 11px; /* 最小字号：角标 / 辅助说明 / 密排表格 */
|
|
--ua-font-size-sm: 12px; /* 小字号：次级文本、表头、提示 */
|
|
--ua-font-size-md: 13px; /* 正文字号：控件文本与默认正文 */
|
|
--ua-font-size-lg: 14px; /* 大字号：强调正文、卡片标题 */
|
|
--ua-font-size-xl: 16px; /* 次标题字号：分组标题、弹窗标题 */
|
|
--ua-font-size-2xl: 18px; /* 标题字号：页面区块标题 */
|
|
--ua-font-size-3xl: 22px; /* 图标字号：评分星、开关内嵌图标等由字符撑起的图形 */
|
|
--ua-font-size-4xl: 26px; /* 指标字号：统计卡片的主数值 */
|
|
--ua-font-size-5xl: 34px; /* 插画字号：空状态、结果页的大号字符图标 */
|
|
--ua-font-size-scale-md: 0.92em; /* 相对缩放档（相对父级）：代码片段等需跟上下文缩放的文本 */
|
|
--ua-font-size-scale-sm: 0.85em; /* 相对缩放小档：行内小图标随文字一起缩，不建绝对像素 */
|
|
|
|
/* ---- 字重与行高：标题 / 正文 / 辅助三档 ---- */
|
|
--ua-weight-normal: 400; /* 正文档：正文与表单值 */
|
|
--ua-weight-medium: 500; /* 辅助强调档：控件文本、表头、次要标题 */
|
|
--ua-weight-semibold: 600; /* 标题档：区块标题、关键数值 */
|
|
--ua-weight-bold: 700; /* 特重档：统计大数字等少数强调位 */
|
|
--ua-leading-none: 1; /* 单行档：图标 / 数字 / 按钮文字的垂直居中 */
|
|
--ua-leading-tight: 1.35; /* 紧凑档：标题、单行控件 */
|
|
--ua-leading-normal: 1.55; /* 正文档：多行正文、说明文字 */
|
|
|
|
/* ---- 边框：细分（比基础边框更淡，用于分割线，避免 1px 线过重） ---- */
|
|
--ua-border-subtle: color-mix(in srgb, var(--ua-color-border) 60%, transparent); /* 细分边框色（专用于分割线）：表格行线 / 卡片页脚 / 弹窗抽屉页头页脚 / 列表项 / 选项卡底边 / 折叠面板与步骤条连接线 / 分隔线组件 */
|
|
|
|
/* ---- 阴影：四档 elevation，柔和优先（扩散大、透明度低） ---- */
|
|
--ua-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06); /* 1 档：贴地投影，用于卡片 / 输入组 / 轻浮起 */
|
|
--ua-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.1); /* 2 档：下拉菜单 / 选择面板 / 气泡提示 */
|
|
--ua-shadow-3: 0 10px 28px rgba(0, 0, 0, 0.12); /* 3 档：浮层 / 悬浮面板 / 拖拽中的卡片 */
|
|
--ua-shadow-4: 0 18px 44px rgba(0, 0, 0, 0.14); /* 4 档：模态弹窗 / 抽屉 / 通知中心等最高层 */
|
|
--ua-shadow-accent: 0 3px 10px color-mix(in srgb, var(--ua-color-accent) 25%, transparent); /* 主题色投影：主按钮 / 强调控件悬停浮起 */
|
|
--ua-shadow-accent-strong: 0 8px 20px color-mix(in srgb, var(--ua-color-accent) 35%, transparent); /* 主题色强投影：返回顶部等悬浮强调件 */
|
|
|
|
/* ---- 动效：三档时长 + 两条主缓动曲线 ---- */
|
|
--ua-duration-fast: 0.15s; /* 快：hover / 聚焦 / 颜色与边框变化（既有样式的主流时长） */
|
|
--ua-duration-base: 0.2s; /* 中：展开收起 / 位移 / 透明度过渡 */
|
|
--ua-duration-slow: 0.25s; /* 慢：浮层出入场 / 较大面积变化 */
|
|
--ua-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* 标准缓动：先快后缓，控件交互默认用这条 */
|
|
--ua-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* 出场缓动：元素进入视口 / 弹层出现时使用 */
|
|
|
|
/* ---- 焦点环：统一外环与内嵌两种形态，全部由强调色派生 ---- */
|
|
--ua-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 22%, transparent); /* 外焦点环：输入框 / 按钮 / 可聚焦控件 */
|
|
--ua-focus-ring-inset: inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 40%, transparent); /* 内嵌焦点环：内部已裁切或需要贴合边框的控件 */
|
|
|
|
/* ---- 控件高度：三档，略放大以提升可点面积 ---- */
|
|
--ua-control-h-sm: 28px; /* 小控件高度：紧凑工具栏、标签内嵌按钮 */
|
|
--ua-control-h-md: 34px; /* 中控件高度：输入框 / 下拉 / 按钮的默认档 */
|
|
--ua-control-h-lg: 40px; /* 大控件高度：主按钮、搜索框、移动端触控目标 */
|
|
|
|
/* ---- 层级：五档，数值留出间隙便于中间插入 ---- */
|
|
--ua-z-dropdown: 100; /* 下拉层：菜单 / 选择面板 / 气泡 */
|
|
--ua-z-sticky: 200; /* 粘性层：表头、吸顶工具栏 */
|
|
--ua-z-overlay: 300; /* 遮罩层：模态背后的半透明遮罩 */
|
|
--ua-z-modal: 400; /* 模态层：弹窗 / 抽屉本体 */
|
|
--ua-z-toast: 500; /* 通知层：全局消息提示，永远最高 */
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
--ua-color-bg: #101216; /* 暗色页面底色 */
|
|
--ua-color-surface: #1a1c22; /* 暗色表面色 */
|
|
--ua-color-text: #e7e9ec; /* 暗色主文本色 */
|
|
--ua-color-text-muted: #888780; /* 暗色辅助文本色 */
|
|
--ua-color-border: rgba(255, 255, 255, 0.15); /* 暗色基础边框色：改用白色低透明度，避免黑边在暗底上消失 */
|
|
--ua-color-accent: #378add; /* 暗色强调色：提亮以保证暗底可读 */
|
|
--ua-color-accent-contrast: #042c53; /* 暗色强调色上的文字色：深色反白，维持对比 */
|
|
--ua-color-danger: #d96a6a; /* 暗色危险色 */
|
|
--ua-color-success: #4fc39e; /* 暗色成功色 */
|
|
--ua-color-warning: #d9a94f; /* 暗色警告色 */
|
|
|
|
/* 暗色下投影需要更高黑度才看得见：亮色那套在暗底上几乎不可见 */
|
|
--ua-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); /* 暗色 1 档：贴地投影 */
|
|
--ua-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4); /* 暗色 2 档：下拉 / 气泡 */
|
|
--ua-shadow-3: 0 10px 28px rgba(0, 0, 0, 0.45); /* 暗色 3 档：浮层 / 悬浮面板 */
|
|
--ua-shadow-4: 0 18px 44px rgba(0, 0, 0, 0.5); /* 暗色 4 档：模态 / 抽屉 / 通知 */
|
|
--ua-shadow-accent: 0 3px 10px color-mix(in srgb, var(--ua-color-accent) 30%, transparent); /* 暗色主题色投影：透明度略升补可见性 */
|
|
--ua-shadow-accent-strong: 0 8px 20px color-mix(in srgb, var(--ua-color-accent) 40%, transparent); /* 暗色主题色强投影 */
|
|
--ua-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 34%, transparent); /* 暗色焦点环：透明度略升补对比 */
|
|
--ua-focus-ring-inset: inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 52%, transparent); /* 暗色内嵌焦点环 */
|
|
}
|