order: 0 toc: "menu"

设计规范

one组件库目前拥有三十多个基础组件，为了方便后续业务开发，减少样式重构的工作，我们同设计团队一起制定了标准UI规范。目前one组件库中所有需要界面的组件，都根据标准UI规范进行设计开发。使我们在业务开发中可以直接使用，基本不需要做UI改造。

根据现有的UI规范和常用组件，我们抽离了一部分的主要样式变量，形成了一份主题文件，因此可以通过修改主题文件中的样式变量修改整个组件库的主题。

目前已有的主题变量包括：主色调、按钮变量、背景变量、文字色彩、文字尺寸、辅助颜色等。

主题变量规范

// 颜色规范
// 主色调变量
@primary-color: #00c365;
@warning-color: #ff9a1e;
@info-color: #5c9aff;
@danger-color: #ff482c;
@transparent-color: #00000000;

// 按钮颜色变量

@btn-active-color-primary: shade(@primary-color, 10% );
@btn-active-color-warning: shade(@warning-color, 10% );
@btn-active-color-info: shade(@info-color, 10% );
@btn-active-color-danger: shade(@danger-color, 10% );
@btn-diable-fill: #DBDBDB;
@btn-disable-fill-color: #fff;

@btn-active-color-primary-plain: #00A555;
@btn-active-bg-primary-plain: #F2FCF7;
@btn-active-color-warning-plain: #F88200;
@btn-active-bg-warning-plain: #FFF6EB;
@btn-active-color-info-plain: #528AE5;
@btn-active-bg-info-plain: #EFF5FF;
@btn-active-color-danger-plain: #EA462D;
@btn-active-bg-danger-plain: #FFF6F4;
@btn-disable-plain: #BBBBBB;
@btn-disable-plain-color: #BBBBBB;


@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #646566;
@gray-8: #323233;

// 背景变量
@bg-color: #f5f8f8;
@card-bg-1: #f3faf9;
@card-bg-2: #fef6eb;
@card-bg-3: #eff3fe;
@card-bg-4: #fdf3f3;

// 渐变变量
@gd-primary: linear-gradient(#00c365, #39d98c);
@gd-warning: linear-gradient(#ff9738, #ffba42);
@gd-info: linear-gradient(#78bfff, #5c9aff);
@gd-danger: linear-gradient(#ff706f, #ffa0a2);
@gd-light: linear-gradient(#e7faf1, #ffffff);

// 文字颜色变量
@text-black: #222;
@text-dark: #666;
@text-gray: #999;
@text-light: #bbb;
@text-white: #ddd;
@text-light-white: #fff;


// 尺寸规范

@hd: 2px; // 标准倍数单位

// 文字尺寸
@text-size-48: 24 * @hd;
@text-size-44: 22 * @hd;
@text-size-40: 20 * @hd;
@text-size-36: 18 * @hd;
@text-size-32: 16 * @hd;
@text-size-28: 14 * @hd;
@text-size-26: 13 * @hd;
@text-size-24: 12 * @hd;
@text-size-20: 10 * @hd;

// 按钮尺寸
@btn-large-lineheight: 26 * @hd;
@btn-normal-lineheight: 20 * @hd;
@btn-small-lineheight: 16 * @hd;
@btn-large-lineheight-plain: 24 * @hd;
@btn-normal-lineheight-plain: 18* @hd;
@btn-small-lineheight-plain: 14 * @hd;
@btn-large-padding: 11 * @hd 24 * @hd;
@btn-normal-padding: 4 * @hd 16 * @hd;
@btn-small-padding: 2 * @hd 10 * @hd; 
@btn-font-large: 18 * @hd;
@btn-font-normal: 14 * @hd;
@btn-font-small: 11 * @hd;

@font: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei";

修改主题

如果需要修改主题变量，可以在项目目录下的src/themes/default.less中引入你的主题文件,覆盖默认的主题变量.主题的变量参考主题变量规范。

也可以如下例子,直接覆盖主题中的变量

@import "../package/theme/less/default.less";

@primary-color: #4ca1fb;