@uyun/everest-styles
Everest Styles with Uyun UED standard
Last updated 7 years ago
by shenting
.
Repository
·
$ cnpm install @uyun/everest-styles
Private package
everest-styles
Everest 主题换肤解决方案
这是一个基于优云 UED 规范的主题样式及换肤的解决方案，并提供包含完整色值的 Less 变量。
简介
基础 Less 变量与色值
由 UED 设计并整理的一系列颜色变量，以 Less 的形式供优云产品使用。
色彩体系分为 系统级色彩体系 与 产品级色彩体系。
系统级色彩体系 较为抽象，每组颜色根据一个主色和一定规则生成，由 UED 管理。
产品级色彩体系 则更语义化，且更为贴近业务，基于 系统级色彩体系 命名，具体可查看下文中的列表。
安装
$ unpm install --save @uyun/everest-styles
使用
基础用法
Less 版本
与 @uyun/less-plugin-themes 配合使用，这是最直观、简单的用法。
@import "~@uyun/everest-styles/index";
// 通过 less 中的 list 规则声明颜色数组，
// 默认主题为 ['default', 'blue']，
// 因此以下这个 list 规则中，依次为各属性在两种主题的对应颜色。
@button-bg: @geekblue-6, @blue-6;
.button {
background-color: @button-bg;
}
实际上，对于常用的主题颜色，UED 已经提供了一些组合。你会发现在高保真设计稿中，上例中的 @button-bg 可以用 @primary-color 代替。
@import "~@uyun/everest-styles/index";
.button {
background-color: @primary-color;
}
Javascript 版本
提供了可在 js 中使用的版本。
import { themes } from '@uyun/everest-styles'
themes['default']['@primary-color']
// @geekblue-6 => '#3883F8'
themes['blue']['@primary-color']
// @blue-6 => '#1F99E5'
产品级色彩体系列表
| 变量 | default | blue |
|---|---|---|
@primary-color |
@geekblue-6 |
@blue-6 |
@active-color |
@geekblue-1 |
@deep-5 |
@success-color |
@green-6 |
- |
@warning-color |
@yellow-6 |
- |
@serious-color |
@orange-6 |
- |
@error-color |
@red-6 |
- |
@disabled-color |
@grey-8 |
@deep-4 |
@recover-color |
@cyan-6 |
- |
@link-color |
@geekblue-6 |
@blue-5 |
@heading-color |
@grey-12 |
@grey-1 |
@text-color |
@grey-11 |
@deep-1 |
@text-color-secondary |
@grey-10 |
@deep-2 |
@hits-color |
@grey-9 |
@deep-3 |
@border-color |
@grey-7 |
@deep-7 |
@divider-color |
@grey-6 |
@deep-8 |
@page-bg |
@grey-1 |
@deep-14 |
@header-bg |
@grey-3 |
@deep-16 |
@component-background |
@grey-1 |
@deep-10 |
@divider-bg |
@grey-2 |
@deep-13 |
@disabled-bg |
@grey-4 |
@deep-12 |
@light-bg |
@grey-1 |
@deep-9 |
原子类
原子类提供了一系列基础的类名，用于快速实现一些样式。原子类需要单独引入。
// ./src/index.js
import '~@uyun/everest-styles/atomic.less'
示例
使用 font-size-lg 来快速声明大号文本字体。
// @font-size-body-3: 14px;
// .font-size-lg {
// font-size: @font-size-body-3;
// }
<div className="font-size-lg">
...
</div>
使用 border-base 来快速声明基础边框。
// @border-base: @border-width-base @border-style-base @border-color;
// .border-base {
// border: @border-base;
// }
<div className="border-base">
...
</div>
间距原子类
由于不同种类、方向、大小的间距数量较多，因此针对间距的原子类进行了一些缩写。
// .m16 {
// margin: 16px;
// }
// .pt12 {
// padding-top: 12px;
// }
<div className="m16 pt12">
...
</div>
间距缩写规则参考下表：
种类、方向、大小可根据顺序进行任意组合，如 mt4、mlg、plxs、pvmd 等。
| 种类 | 缩写 |
|---|---|
| margin | m |
| padding | p |
| 方向 | 缩写 |
|---|---|
| vertical | v |
| horizontal | h |
| top | t |
| right | r |
| bottom | b |
| left | l |
| 大小 | Alias |
|---|---|
| 0 | |
| 2 | |
| 4 | |
| 8 | xs |
| 10 | |
| 12 | sm |
| 16 | md |
| 20 | |
| 24 | lg |
| 44 |
原子类列表
| 原子类 | 值 | Alias |
|---|---|---|
.font-size-body-1 |
font-size: 12px; |
.font-size-sm, .font-size-base |
.font-size-body-2 |
font-size: 13px; |
.font-size-md |
.font-size-body-3 |
font-size: 14px; |
.font-size-lg |
.font-size-title-3 |
font-size: 12px; |
|
.font-size-title-3 |
font-size: 14px; |
|
.font-size-title-3 |
font-size: 16px; |
|
.font-size-display-3 |
font-size: 20px; |
|
.font-size-display-3 |
font-size: 24px; |
|
.font-size-display-3 |
font-size: 30px; |
|
.font-weight-1 |
font-weight: normal; |
.font-weight-base |
.font-weight-2 |
font-weight: bold; |
.font-weight-bold |
.line-height-1 |
line-height: 1.3; |
|
.line-height-2 |
line-height: 1.5; |
.line-height-base |
.line-height-3 |
line-height: 1.7; |
|
.shadow-0 |
box-shadow: none; |
|
.shadow-1-up |
box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, .15); |
|
.shadow-1-down |
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .15); |
.shadow-base |
.shadow-1-left |
box-shadow: -2px 0 8px 0 rgba(0, 0, 0, .15); |
|
.shadow-1-right |
box-shadow: 2px 0 8px 0 rgba(0, 0, 0, .15); |
|
.shadow-2 |
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .15); |
|
.border-radius-0 |
border-radius: 0; |
|
.border-radius-1 |
border-radius: 2px; |
.border-radius-base |
.border-radius-50 |
border-radius: 50%; |
.border-radius-circle |
.border-base |
1px solid @border-color; |
|
.border-dashed |
1px dashed @border-color; |
|
.border-split |
1px solid @divider-color; |
.border-base、.border-dashed、.border-split 另有 top、right、bottom、left 各四种不同方向的原子类，不再赘述。
Current Tags
- 4.2.0 ... latest (7 years ago)
216 Versions
- 6.0.0 ... 4 years ago
- 5.1.0-beta.150 ... 4 years ago
- 5.1.0-beta.149 ... 4 years ago
- 5.1.0-beta.148 ... 4 years ago
- 5.1.0-beta.147 ... 4 years ago
- 5.1.0-beta.146 ... 4 years ago
- 5.1.0-beta.145 ... 4 years ago
- 5.1.0-beta.144 ... 4 years ago
- 5.1.0-beta.143 ... 4 years ago
- 5.1.0-beta.142 ... 4 years ago
- 5.1.0-beta.141 ... 5 years ago
- 5.1.0-beta.140 ... 5 years ago
- 5.1.0-beta.139 ... 5 years ago
- 5.1.0-beta.138 ... 5 years ago
- 5.1.0-beta.137 ... 5 years ago
- 5.1.0-beta.135 ... 5 years ago
- 5.1.0-beta.134 ... 5 years ago
- 5.1.0-beta.133 ... 5 years ago
- 5.1.0-beta.132 ... 5 years ago
- 5.1.0-beta.131 ... 5 years ago
- 5.1.0-beta.130 ... 5 years ago
- 5.1.0-beta.129 ... 5 years ago
- 5.1.0-beta.128 ... 5 years ago
- 5.1.0-beta.127 ... 5 years ago
- 5.1.0-beta.126 ... 5 years ago
- 4.2.1-beta.2 ... 5 years ago
- 4.2.1-beta.1 ... 5 years ago
- 4.2.1-beta.0 ... 5 years ago
- 5.1.0-beta.125 ... 5 years ago
- 5.1.0-beta.124 ... 5 years ago
- 5.1.0-beta.123 ... 5 years ago
- 5.1.0-beta.122 ... 5 years ago
- 5.1.0-beta.121 ... 5 years ago
- 5.1.0-beta.120 ... 5 years ago
- 5.1.0-beta.119 ... 5 years ago
- 5.1.0-beta.118 ... 5 years ago
- 5.1.0-beta.117 ... 5 years ago
- 5.1.0-beta.116 ... 5 years ago
- 5.1.0-beta.115 ... 5 years ago
- 5.1.0-beta.114 ... 5 years ago
- 5.1.0-beta.113 ... 5 years ago
- 5.1.0-beta.112 ... 5 years ago
- 5.1.0-beta.111 ... 5 years ago
- 5.1.0-beta.110 ... 5 years ago
- 5.1.0-beta.109 ... 5 years ago
- 5.1.0-beta.108 ... 5 years ago
- 5.1.0-beta.106 ... 5 years ago
- 5.1.0-beta.105 ... 5 years ago
- 5.1.0-beta.104 ... 5 years ago
- 5.1.0-beta.103 ... 5 years ago
- 5.1.0-beta.102 ... 5 years ago
- 5.1.0-beta.101 ... 5 years ago
- 5.1.0-beta.100 ... 5 years ago
- 5.1.0-beta.99 ... 5 years ago
- 5.1.0-beta.98 ... 5 years ago
- 5.1.0-beta.97 ... 5 years ago
- 5.1.0-beta.96 ... 5 years ago
- 5.1.0-beta.95 ... 5 years ago
- 5.1.0-beta.94 ... 5 years ago
- 5.1.0-beta.93 ... 5 years ago
- 5.1.0-beta.92 ... 5 years ago
- 5.1.0-beta.91 ... 5 years ago
- 5.1.0-beta.90 ... 5 years ago
- 5.1.0-beta.89 ... 5 years ago
- 5.1.0-beta.88 ... 5 years ago
- 5.1.0-beta.87 ... 5 years ago
- 5.1.0-beta.86 ... 5 years ago
- 5.1.0-beta.85 ... 5 years ago
- 5.1.0-beta.84 ... 5 years ago
- 5.1.0-beta.83 ... 5 years ago
- 5.1.0-beta.82 ... 5 years ago
- 5.1.0-beta.81 ... 5 years ago
- 5.1.0-beta.80 ... 5 years ago
- 5.1.0-beta.79 ... 5 years ago
- 5.1.0-beta.78 ... 5 years ago
- 5.1.0-beta.77 ... 5 years ago
- 5.1.0-beta.76 ... 5 years ago
- 5.1.0-beta.75 ... 5 years ago
- 5.1.0-beta.74 ... 5 years ago
- 5.1.0-beta.73 ... 5 years ago
- 5.1.0-beta.72 ... 5 years ago
- 5.1.0-beta.71 ... 5 years ago
- 5.1.0-beta.70 ... 5 years ago
- 5.1.0-beta.69 ... 5 years ago
- 5.1.0-beta.68 ... 5 years ago
- 5.1.0-beta.67 ... 5 years ago
- 5.1.0-beta.66 ... 5 years ago
- 5.1.0-beta.65 ... 5 years ago
- 5.1.0-beta.64 ... 5 years ago
- 5.1.0-beta.62 ... 5 years ago
- 5.1.0-beta.61 ... 5 years ago
- 5.1.0-beta.60 ... 5 years ago
- 5.1.0-beta.59 ... 5 years ago
- 5.1.0-beta.58 ... 5 years ago
- 5.1.0-beta.57 ... 5 years ago
- 5.0.0-beta.32 ... 5 years ago
- 5.0.0-beta.31 ... 5 years ago
- 5.0.0-beta.30 ... 5 years ago
- 5.1.0-beta.56 ... 5 years ago
- 5.1.0-beta.55 ... 5 years ago
- 5.1.0-beta.54 ... 5 years ago
- 5.1.0-beta.53 ... 5 years ago
- 5.1.0-beta.52 ... 5 years ago
- 5.1.0-beta.51 ... 5 years ago
- 5.1.0-beta.50 ... 5 years ago
- 5.1.0-beta.49 ... 5 years ago
- 5.1.0-beta.48 ... 5 years ago
- 5.1.0-beta.47 ... 5 years ago
- 5.1.0-beta.46 ... 5 years ago
- 5.1.0-beta.45 ... 5 years ago
- 5.1.0-beta.44 ... 5 years ago
- 5.1.0-beta.43 ... 5 years ago
- 5.1.0-beta.42 ... 5 years ago
- 5.1.0-beta.41 ... 5 years ago
- 5.1.0-beta.40 ... 5 years ago
- 5.1.0-beta.39 ... 5 years ago
- 5.1.0-beta.38 ... 5 years ago
- 5.1.0-beta.37 ... 5 years ago
- 5.1.0-beta.36 ... 5 years ago
- 5.1.0-beta.35 ... 5 years ago
- 5.1.0-beta.34 ... 5 years ago
- 5.1.0-beta.33 ... 5 years ago
- 5.1.0-beta.32 ... 5 years ago
- 5.1.0-beta.31 ... 5 years ago
- 5.1.0-beta.30 ... 5 years ago
- 5.1.0-beta.29 ... 5 years ago
- 5.1.0-beta.28 ... 5 years ago
- 5.1.0-beta.27 ... 5 years ago
- 5.1.0-beta.26 ... 5 years ago
- 5.1.0-beta.25 ... 5 years ago
- 5.1.0-beta.24 ... 5 years ago
- 5.1.0-beta.23 ... 5 years ago
- 5.1.0-beta.22 ... 5 years ago
- 5.1.0-beta.20 ... 5 years ago
- 5.1.0-beta.19 ... 5 years ago
- 5.1.0-beta.18 ... 5 years ago
- 5.1.0-beta.16 ... 5 years ago
- 5.1.0-beta.15 ... 5 years ago
- 5.1.0-beta.14 ... 5 years ago
- 5.1.0-beta.13 ... 5 years ago
- 5.1.0-beta.12 ... 5 years ago
- 5.1.0-beta.11 ... 5 years ago
- 5.1.0-beta.10 ... 5 years ago
- 5.0.0-beta.29 ... 5 years ago
- 5.0.0-beta.28 ... 5 years ago
- 5.1.0-beta.9 ... 5 years ago
- 5.1.0-beta.8 ... 5 years ago
- 5.0.0-beta.27 ... 5 years ago
- 5.0.0-beta.26 ... 5 years ago
- 5.0.0-beta.25 ... 5 years ago
- 5.1.0-beta.7 ... 5 years ago
- 5.1.0-beta.6 ... 5 years ago
- 5.1.0-beta.5 ... 5 years ago
- 5.1.0-beta.4 ... 5 years ago
- 5.1.0-beta.3 ... 5 years ago
- 5.1.0-beta.2 ... 5 years ago
- 5.1.0-beta.1 ... 5 years ago
- 5.0.0-beta.24 ... 5 years ago
- 5.0.0-beta.23 ... 5 years ago
- 5.0.0-beta.22 ... 5 years ago
- 5.0.0-beta.21 ... 5 years ago
- 5.0.0-beta.20 ... 5 years ago
- 5.0.0-beta.19 ... 5 years ago
- 5.0.0-beta.18 ... 5 years ago
- 5.0.0-beta.17 ... 5 years ago
- 5.0.0-beta.16 ... 5 years ago
- 5.0.0-beta.15 ... 5 years ago
- 5.0.0-beta.14 ... 5 years ago
- 5.0.0-beta.13 ... 5 years ago
- 5.0.0-beta.12 ... 5 years ago
- 5.0.0-beta.11 ... 5 years ago
- 5.0.0-beta.9 ... 5 years ago
- 5.0.0-beta.7 ... 5 years ago
- 5.0.0-beta.6 ... 5 years ago
- 4.2.0-beta.2 ... 5 years ago
- 4.2.0-beta ... 5 years ago
- 5.0.0-beta.5 ... 5 years ago
- 5.0.0-beta.4 ... 5 years ago
- 5.0.0-beta.3 ... 5 years ago
- 5.0.0-beta.2 ... 5 years ago
- 5.0.0-beta.1 ... 5 years ago
- 5.0.0-beta.0 ... 5 years ago
- 1.0.0 ... 8 years ago
- 1.2.0 ... 8 years ago
- 1.5.0 ... 8 years ago
- 1.6.0 ... 8 years ago
- 1.6.2 ... 8 years ago
- 1.6.6 ... 8 years ago
- 1.8.0 ... 8 years ago
- 2.0.0 ... 8 years ago
- 2.1.0 ... 8 years ago
- 3.0.0 ... 8 years ago
- 3.0.1 ... 8 years ago
- 3.0.2 ... 8 years ago
- 3.0.3 ... 8 years ago
- 3.0.4 ... 8 years ago
- 3.0.5 ... 8 years ago
- 3.0.6 ... 8 years ago
- 3.0.7 ... 8 years ago
- 3.0.8 ... 8 years ago
- 3.0.9 ... 8 years ago
- 3.1.0 ... 8 years ago
- 3.1.1 ... 8 years ago
- 3.1.2 ... 8 years ago
- 3.1.3 ... 8 years ago
- 3.1.4 ... 8 years ago
- 3.1.5 ... 8 years ago
- 3.2.0 ... 8 years ago
- 4.0.0 ... 7 years ago
- 4.1.0 ... 7 years ago
- 4.1.1 ... 7 years ago
- 4.1.2 ... 7 years ago
- 2.2.0 ... 8 years ago
- 4.2.0 ... 7 years ago
- 1.9.0 ... 8 years ago
- 3.2.1 ... 8 years ago
liupeng
shenting
tanyb