53 lines
2.8 KiB
Plaintext
53 lines
2.8 KiB
Plaintext
/* ================================================================
|
|
* 全局主题变量（Design Token）—— 颜色
|
|
* ----------------------------------------------------------------
|
|
* 规则：样式类型禁止混用。即使颜色值相同,也必须按语义独立定义,
|
|
* 业务代码只允许引用本文件中的语义变量,严禁直接写色值。
|
|
* 分组：品牌色 / 文字色 / 背景色 / 按钮色 / 线条色 / 状态色 / 阴影色
|
|
* ================================================================ */
|
|
page {
|
|
/* 品牌色 —— 主色调,用于链接、强调、聚焦等品牌表达 */
|
|
--color-primary: #000000; /* 主色 */
|
|
--color-primary-disabled: #cccccc; /* 主色禁用态 */
|
|
|
|
/* 文字色 —— 仅用于 color 属性,禁止用于按钮/背景 */
|
|
--color-text: #333333; /* 一级正文 */
|
|
--color-text-secondary: #999999; /* 二级辅助文字 */
|
|
--color-text-placeholder: #cccccc; /* 占位文字 */
|
|
--color-text-inverse: #ffffff; /* 反白文字(深底上的白字) */
|
|
--color-text-disabled: #cccccc; /* 禁用文字 */
|
|
|
|
/* 背景色 —— 仅用于容器 background,禁止用于按钮 */
|
|
--color-bg: #f5f5f5; /* 页面底色 */
|
|
--color-bg-card: #ffffff; /* 卡片/容器底色 */
|
|
--color-bg-elevated: #ffffff; /* 浮层/弹框底色 */
|
|
--color-bg-mask: rgba(0, 0, 0, 0.5); /* 弹框蒙层(action-sheet/confirm) */
|
|
|
|
/* 按钮色 —— 仅用于按钮组件,与文字色/背景色完全解耦 */
|
|
--color-btn-primary: #000000; /* 主按钮底色 */
|
|
--color-btn-primary-text: #ffffff; /* 主按钮文字 */
|
|
--color-btn-default: #ffffff; /* 默认按钮底色 */
|
|
--color-btn-default-text: #333333; /* 默认按钮文字 */
|
|
--color-btn-default-border: #e5e5e5; /* 默认按钮边框 */
|
|
--color-btn-disabled: #cccccc; /* 禁用按钮底色 */
|
|
--color-btn-disabled-text: #ffffff; /* 禁用按钮文字 */
|
|
--color-btn-danger: #fa5151; /* 危险按钮底色(删除等) */
|
|
--color-btn-danger-text: #ffffff; /* 危险按钮文字 */
|
|
--color-btn-link: #000000; /* 链接按钮文字色 */
|
|
|
|
/* 线条色 —— 仅用于 border,禁止用于文字/背景 */
|
|
--color-border: #e5e5e5; /* 常规边框 */
|
|
--color-border-light: #f0f0f0; /* 浅边框 */
|
|
--color-divider: #eeeeee; /* 分割线 */
|
|
|
|
/* 状态色 —— 成功/警告/危险/信息提示 */
|
|
--color-success: #07c160; /* 成功(微信绿) */
|
|
--color-warning: #ff9500; /* 警告(橙) */
|
|
--color-danger: #fa5151; /* 危险/错误(红) */
|
|
--color-info: #1677ff; /* 信息(蓝) */
|
|
|
|
/* 阴影色 —— 仅用于 box-shadow */
|
|
--color-shadow: rgba(0, 0, 0, 0.08); /* 常规阴影 */
|
|
--color-shadow-card: rgba(0, 0, 0, 0.04); /* 卡片浅阴影 */
|
|
}
|