-
Notifications
You must be signed in to change notification settings - Fork 278
样式开发指南1、主题变量的命名规则
前言：主题变量是在theme/**/vars.less里面编写的。
先来做个热身活动，
从这两个pr中思考一个问题：规范吗？如若不规范，为什么？ https://github.com/opentiny/tiny-vue/pull/357/files#diff-6e0a6409f55dc9582900b52a83e8d427668ed808b9fced19fc54dc517a4899bf
命名风格：前缀-组件名-配置项-类型[可选]-状态[可选]（配置项可以直接写成以下对应的关键字）
每个样式属性都有对应的关键字，从下文中查找对应关键字，并放入变量名字中；
主要分为两部分：需要拆分成多个主题变量的的样式属性，和只需要一个主题变量的样式属性；
【背景色 需带-bg-color 或者 background-color】例如：--ti-button-bg-color-primary-hover
【文本色 需带-text-color】例如：--ti-button-text-color-primary-hover
【图标色 需带-icon-color】例如：--ti-button-icon-color-primary-hover
【填充色 需带-fill-color】例如：--ti-button-fill-color-primary-hover
【边框色 需带-border-color】例如：--ti-button-border-color-primary-active
【字族 需带-font-family】 例如：--ti-button-font-family
【字号 需带-font-size】 例如：--ti-button-font-size
【字重 需带-font-weight】 例如：--ti-button-font-weight
【边框样式 需带-border-style】例如：--ti-button-border-style-primary
【边框粗细 需带-border-weight】例如：--ti-button-border-weight-primary
【边框圆角 需带-border-radius】例如：--ti-button-border-radius-danger
【阴影 需带-box-shadow】例如：--ti-button-box-shadow
【尺寸 需带-size】例如：--ti-button-size
【行高 需带-line-height】例如：--ti-button-line-height
【大尺寸 需带： large-】例如：--ti-button-large-size
【中号尺寸 需带：middle-】例如：--ti-button-middle-size
【小号尺寸：small-】例如：--ti-button-small-size
【XS号尺寸 需带： xs-】例如：--ti-button-xs-size
【图标尺寸：icon-size】例如：--ti-button-icon-size
需要拆分的组合属性有：如padding, margin，border等；
【内边距，拆分成水平方向和垂直方向的两个变量；对应：
水平方向的内边距 需带：padding-x 或者再拆成两个变量，需带 padding-left + padding-right
垂直方向的内边距 需带：padding-y 或者再拆成两个变量，需带 padding-top + padding-bottom】
【外边距，同理需要拆分成：
水平方向的外边距 需带：margin-x 或者 margin-left + margin-right
垂直方向的外边距 需带：margin-y 或者 margin-top + margin-bottom 】
【border属性，拆分成：
边框粗细、边框样式、边框圆角三个样式主题变量】
不需要拆分的组合属性：如box-shadow，transition等不用拆分；
如果没有找到上文中相应的样式属性关键字，比如display属性：需要携带display关键字：示例：--ti-button-display;
带上对应的属性名即可
例如：'--ti-button-bg-color-primary-hover'.length <= 50 即是符合长度规范的