Skip to content

主题变量规范

Jump to bottom
MomoPoppy edited this page Dec 3, 2024 · 1 revision

背景

在过去的迭代中，为兼容多个主题，common 变量和组件级变量逐步膨胀，拆分过细，也有不合理使用的地方，导致历史包袱过重。固在 3.19.0 版本对主题进行了重构，按场景梳理出一套尽可能精简的主题变量，并统一按规范重构组件级变量。

vars.less

1、组件级变量命名

组件变量的命名统一为（关键字的顺序统一保持一致）：

组件名前缀 + 区域关键字（可选） + 样式关键字 + 类别关键字（可选) + 尺寸关键字（可选）+ 状态关键字（可选）

  • 组件名前缀：--ti-组件名大驼峰

  • 区域关键字：描述这个变量用在组件的那个 dom 节点

  • 样式关键字：描述这个变量是设置什么样式的，要一目了然

  • 类别关键字：往往有 type 属性的组件样式不同，描述 primary/ success/ info /warning/danger/error 等类型

  • 尺寸关键字：往往有 size 属性的组件样式不同,描述 mini/small/medium/large/xLarge 等尺寸

  • 状态关键字: 描述组件状态(交互状态/选中状态）： hover/active /disabled/selected

顺序保持一致，eg：

--ti-Button-title-height-primary-md-hover

--ti-ButtonGroup-title-height-primary-md-hover

2、组件级变量需写详细注释

3、组件级变量只能引用对应场景的 common 变量，不可以使用 base 变量。

eg：按钮禁用背景色只能引用禁用背景色的 common 变量 // 按钮项禁用背景色 --tv-ButtonGroup-item-btn-bg-color-disabled: var(--tv-color-bg-disabled);

4、组件级变量尽量保持在 52 个字符以内，命名简洁且语义化（无法强求，但需要保持这种意识）

5、只能定义当前组件的变量。

eg： 不要在 button/vars.less 文件里 定义 button-group 组件的组件级变量

index.less

1、只能引用组件级变量，不允许 base / common 变量

2、审查 !important，理论上来说不使用 !important

关键字：

关键字和样式保持一致。

eg：border / margin-top / margin-x / margin-y / padding / bg / display,

  • 颜色变量

bg-color / text-color / icon-color / border-color

  • 字体变量

font-family / font-size / font-weight / line-height

  • 线变量

border / border-weight / border-style / border-color

  • 圆角

border-radius

  • 阴影变量

box-shadow

  • 间距变量

padding / margin / padding-top / margin-top / padding-x / padding-y / top / left / right / bottom

  • 尺寸变量

icon-size / width / height

  • 其他样式关键字：

display / transition / position （特殊，不涉及其他主题差异的情况下不需要抽取）

  • 类别关键字

primary / success / info / warning / danger

success / info / warning / error

  • 尺寸关键字

xs / sm / md / lg / xl / xxl

  • 状态关键字

  • 交互状态

hover / active / disabled

  • 选中状态

selected

Clone this wiki locally