Appearance
设计变量 Design Tokens
安井 S2B 买家端全局语义化样式变量规范，支持商家自定义品牌主色与交互辅色动态换肤。点击表格任意一行即可复制对应的 var(--xxx) 变量。
品牌主色与交互辅色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
brand-color | #378C03 | --brand-color | 常规 / 品牌主色（顶部导航、商家门面） |
action-color | var(--color-primary-6) | --action-color | 常规 / 辅助交互色（按钮、加减器激活、选中态） |
action-color-light | var(--color-primary-1) | --action-color-light | 浅色 / 辅色 10% 透明浅底（soft 按钮、选中胶囊） |
primary-2 | rgba(65, 167, 2, 0.2) | --color-primary-2 | 悬浮 / 辅色 20% 透明浅底 |
primary-3 | rgba(65, 167, 2, 0.3) | --color-primary-3 | 点击 / 辅色 30% 透明浅底 |
警示与功能色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
text-red | var(--color-red-6) | --text-red | 错误 / 商品价格红、限时抢购强调 |
text-orange | #FF6010 | --text-orange | 警示 / 活动提醒、优惠标签文字 |
text-gold | #B56C31 | --text-gold | 特殊 / 销量榜、会员金色标签文字 |
边框颜色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
border-line-1 | var(--color-gray-2) | --border-line-1 | 浅色 / 最细内容分割线 |
border-line-2 | var(--color-gray-3) | --border-line-2 | 一般 / 浅分割线、筛选栏底边线 |
border-line-3 | var(--color-gray-4) | --border-line-3 | 深 / 置灰组件边框、禁用减号圈 |
border-line-4 | var(--color-gray-5) | --border-line-4 | 重 / 深色描边 |
border-action | var(--action-color) | --border-action | 交互 / 辅色边框、线框按钮描边 |
border-primary | var(--brand-color) | --border-primary | 品牌 / 主色边框 |
填充颜色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
fill-bg-1 | var(--color-gray-1) | --fill-bg-1 | 浅 / 未选中胶囊底色、侧边栏底色 |
fill-bg-2 | var(--color-gray-2) | --fill-bg-2 | 常规 / 输入框底色、加减器数字底色 |
fill-bg-3 | var(--color-gray-3) | --fill-bg-3 | 深 / 灰底悬浮填充色 |
fill-bg-4 | var(--color-gray-4) | --fill-bg-4 | 重 / 置灰块底色 |
fill-page-bg | #F1F3F5 | --fill-page-bg | 页面 / 全局页面底层背景色 |
fill-white | var(--color-white) | --fill-white | 卡片 / 纯白卡片、弹窗面板底色 |
文字颜色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
text-title | var(--color-gray-10) | --text-title | 强调 / 主标题、加减器数字 |
text-body | var(--color-gray-9) | --text-body | 正文 / 常规正文文字 |
text-label-1 | var(--color-gray-7) | --text-label-1 | 次要 / 规格说明标签 |
text-label-2 | var(--color-gray-5) | --text-label-2 | 弱化 / 辅助字、输入框占位符 |
text-disabled | var(--color-gray-4) | --text-disabled | 禁用 / 失效置灰文字 |
text-white | var(--color-white) | --text-white | 反白 / 深底或实底按钮纯白文字 |
text-primary | var(--brand-color) | --text-primary | 品牌 / 跟随商家主色文字 |
text-action | var(--action-color) | --text-action | 交互 / 辅色高亮与操作文字 |
图标颜色
| 变量名 | 变量值 | CSS变量 | 描述 |
|---|---|---|---|
icon-1 | var(--color-gray-10) | --icon-1 | 强调 / 最深图标、购物车激活加减号 |
icon-2 | var(--color-gray-9) | --icon-2 | 常规 / 常规功能图标 |
icon-3 | var(--color-gray-7) | --icon-3 | 次要 / 次要指示图标 |
icon-4 | var(--color-gray-5) | --icon-4 | 弱化 / 占位图标 |
icon-5 | var(--color-gray-4) | --icon-5 | 禁用 / 置灰图标、加减号禁用态 |
icon-primary | var(--brand-color) | --icon-primary | 品牌 / 主色图标 |
icon-action | var(--action-color) | --icon-action | 交互 / 辅色图标（列表加减号激活态） |