11:root ,
22page {
3+ // 品牌颜色
34 --nutui-brand-1 : #403635 ; // 梯度1
45 --nutui-brand-2 : #665452 ; // 梯度2
56 --nutui-brand-3 : #99706b ; // 梯度3
@@ -11,32 +12,28 @@ page {
1112 --nutui-brand-9 : #f26e61 ; // 梯度9
1213 --nutui-brand-10 : #e5928a ; // 梯度10
1314
14- --nutui-brand-stop-1 : #ff475d ; // 梯度100
15- --nutui-brand-stop-2 : #fa3725 ; // 渐变色止
15+ --nutui-brand-11 : #330f02 ; // 梯度11
1616
17- --nutui-secondary-1 : #1bbf30 ; // 辅助色
17+ --nutui-brand-stop-1 : #ff475d ; // 渐变色起
18+ --nutui-brand-stop-2 : #fa3725 ; // 渐变色止
1819
1920 // 品牌颜色语义化
20- --nutui-color-primary : var (
21- --nutui-brand-6
22- ); // 品牌主色调默认态,主要功能控件的背景、边框、镂空状态下的文字等
23- --nutui-color-primary-stop-1 : var (--nutui-brand-stop-1 ); // 品牌渐变色左端
24- --nutui-color-primary-stop-2 : var (--nutui-brand-stop-2 ); // 品牌渐变色右端
25- --nutui-color-primary-text : var (
26- --nutui-color-background-gray-1
27- ); // 品牌主色调或其他深色背景下的文字
28- --nutui-color-primary-pressed : var (
29- --nutui-brand-7
30- ); // 品牌主色调点击态,背景、边框、镂空状态下的文字
31- --nutui-color-primary-disabled : var (
32- --nutui-color-content-gray-1
33- ); // 品牌主色调禁用态,背景、边框、镂空状态下的文字
34- --nutui-color-primary-disabled-special : var (
35- --nutui-brand-3
36- ); // 品牌主色调特殊禁用态,通过操作后可转位默认态
37- --nutui-color-primary-light-pressed : var (
38- --nutui-brand-1
39- ); // 品牌主色调镂空背景点击态
21+ // 品牌主色调默认态,主要功能控件的背景、边框、镂空状态下的文字等
22+ --nutui-color-primary : var (--nutui-brand-6 );
23+ // 品牌渐变色左端
24+ --nutui-color-primary-stop-1 : var (--nutui-brand-stop-1 );
25+ // 品牌渐变色右端
26+ --nutui-color-primary-stop-2 : var (--nutui-brand-stop-2 );
27+ // 品牌主色调或其他深色背景下的文字
28+ --nutui-color-primary-text : var (--nutui-color-background-gray-1 );
29+ // 品牌主色调点击态,背景、边框、镂空状态下的文字
30+ --nutui-color-primary-pressed : var (--nutui-brand-7 );
31+ // 品牌主色调禁用态,背景、边框、镂空状态下的文字
32+ --nutui-color-primary-disabled : var (--nutui-color-content-gray-1 );
33+ // 品牌主色调特殊禁用态,通过操作后可转位默认态
34+ --nutui-color-primary-disabled-special : var (--nutui-brand-3 );
35+ // 品牌主色调镂空背景点击态
36+ --nutui-color-primary-light-pressed : var (--nutui-brand-1 );
4037
4138 // service color
4239 --nutui-golden-1 : #fff2e0 ;
@@ -121,6 +118,8 @@ page {
121118 --nutui-black-4 : rgba (20 , 20 , 20 , 0.1 );
122119 --nutui-black-5 : rgba (20 , 20 , 20 , 0.2 );
123120 --nutui-black-6 : rgba (20 , 20 , 20 , 0.3 );
121+ // 蒙层色
122+ // 局部蒙层,像图片上的小蒙层,无货、采购中等
124123 --nutui-black-7 : rgba (20 , 20 , 20 , 0.4 );
125124 --nutui-black-8 : rgba (20 , 20 , 20 , 0.5 );
126125 --nutui-black-9 : rgba (20 , 20 , 20 , 0.6 );
@@ -133,7 +132,7 @@ page {
133132
134133 --nutui-white-1 : rgba (31 , 31 , 31 , 0 );
135134 // --nutui-white-2: rgba(255, 255, 255, 0.02);
136- // --nutui-white-3: rgba(255, 255, 255, 0.06 );
135+ // --nutui-white-3: rgba(255, 255, 255, 0.05 );
137136 // --nutui-white-4: rgba(255, 255, 255, 0.1);
138137 // --nutui-white-5: rgba(255, 255, 255, 0.2);
139138 // --nutui-white-6: rgba(255, 255, 255, 0.3);
@@ -150,48 +149,49 @@ page {
150149 --nutui-color-content-gray-2 : var (--nutui-gray-5 );
151150 --nutui-color-content-gray-3 : var (--nutui-gray-6 );
152151 --nutui-color-content-gray-4 : var (--nutui-gray-7 );
153- --nutui-color-title : var (--nutui-color-content-gray-4 ); // 一级文字色(重要)
154- --nutui-color-text : var (
155- --nutui-color-content-gray-3
156- ); // 二级文字色或可操作用色(常规)
157- --nutui-color-text-help : var (
158- --nutui-color-content-gray-2
159- ); // 三级文字色(次要)
160- --nutui-color-text-disabled : var (
161- --nutui-color-content-gray-1
162- ); // 四级文字色(不可操作)
152+ // 一级文字色(重要)
153+ --nutui-color-title : var (--nutui-color-content-gray-4 );
154+ // 二级文字色或可操作用色(常规)
155+ --nutui-color-text : var (--nutui-color-content-gray-3 );
156+ // 三级文字色(次要)
157+ --nutui-color-text-help : var (--nutui-color-content-gray-2 );
158+ // 四级文字色(不可操作)
159+ --nutui-color-text-disabled : var (--nutui-color-content-gray-1 );
163160
164161 // 背景颜色值 语义化
165162 --nutui-color-background-gray-1 : var (--nutui-gray-1 );
166163 --nutui-color-background-gray-2 : var (--nutui-gray-2 );
167164 --nutui-color-background-gray-3 : var (--nutui-gray-3 );
168- --nutui-color-background : var (--nutui-color-background-gray-3 ); // 页面背景
169- --nutui-color-background-overlay : var (
170- --nutui-color-background-gray-1
171- ); // 卡片背景
172- --nutui-color-background-sunken : var (
173- --nutui-color-background-gray-2
174- ); // 卡片内容器背景
165+ // 页面背景
166+ --nutui-color-background : var (--nutui-color-background-gray-3 );
167+ // 卡片背景
168+ --nutui-color-background-overlay : var (--nutui-color-background-gray-1 );
169+ // 卡片内容器背景
170+ --nutui-color-background-sunken : var (--nutui-color-background-gray-2 );
175171
176172 // 蒙层颜色值 语义化
177173 --nutui-color-mask-gray-1 : var (--nutui-black-2 );
178174 --nutui-color-mask-gray-2 : var (--nutui-black-7 );
179175 --nutui-color-mask-gray-3 : var (--nutui-black-10 );
180- --nutui-color-mask : var (--nutui-color-mask-gray-3 ); // 全部蒙层
181- --nutui-color-mask-part : var (--nutui-color-mask-gray-2 ); // 局部弹层
182- --nutui-color-mask-fault-toleran : var (--nutui-color-mask-gray-1 ); // 容错弹层
176+ // 全部蒙层
177+ --nutui-color-mask : var (--nutui-color-mask-gray-3 );
178+ // 局部弹层
179+ --nutui-color-mask-part : var (--nutui-color-mask-gray-2 );
180+ // 容错弹层
181+ --nutui-color-mask-fault-toleran : var (--nutui-color-mask-gray-1 );
183182
184183 // 线颜色值 语义化
185184 --nutui-color-line-gray-1 : var (--nutui-black-3 );
186- --nutui-color-border : var ( --nutui-color-line-gray-1 ); // 间隔线或容错线
187- --nutui-color-border-disabled : var (
188- --nutui-color-content-gray-1
189- ); // 组件边框禁用色
185+ // 间隔线或容错线
186+ --nutui-color-border : var (--nutui-color-line-gray-1 );
187+ // 组件边框禁用色
188+ --nutui-color-border-disabled : var ( --nutui-color-content-gray-1 );
190189
191190 // 字体 ok
192191 --nutui-font-size-8 : 8px ;
193192 --nutui-font-size-9 : 9px ;
194193 --nutui-font-size-10 : 10px ;
194+ --nutui-font-size-11 : 11px ;
195195 --nutui-font-size-12 : 12px ;
196196 --nutui-font-size-13 : 13px ;
197197 --nutui-font-size-14 : 14px ;
@@ -209,29 +209,30 @@ page {
209209 --nutui-font-size-26 : 26px ;
210210
211211 // 字号语义化
212- --nutui-font-size-xxs : var (--nutui-font-size-10 ); // 标签内文字
213- --nutui-font-size-xs : var (
214- --nutui-font-size-11
215- ); // 导购或信息密集的次要内容、辅助信息
216- --nutui-font-size-s : var (
217- --nutui-font-size-12
218- ); // 汉字:次要内容、辅助类信息 数字:羊角符号、小数点及角分
219- --nutui-font-size-base : var (--nutui-font-size-14 ); // 标准内容、名称类关键信息
220- --nutui-font-size-l : var (
221- --nutui-font-size-16
222- ); // 汉字:楼层标题、卡片标题 数字:重复型价格,如搜推商卡
223- --nutui-font-size-xl : var (
224- --nutui-font-size-18
225- ); // 汉字:页面标题、页面级最重要内容 数字:模块级主价格,如购物车、结算、底导
226- --nutui-font-size-xxl : var (
227- --nutui-font-size-24
228- ); // 数字:页面级主价格,如商详、收银台
229- --nutui-font-size-xxxl : var (--nutui-font-size-26 ); // zanwu
212+ // 标签内文字
213+ --nutui-font-size-xxs : var (--nutui-font-size-10 );
214+ // 导购或信息密集的次要内容、辅助信息
215+ --nutui-font-size-xs : var (--nutui-font-size-11 );
216+ // 汉字:次要内容、辅助类信息 数字:羊角符号、小数点及角分
217+ --nutui-font-size-s : var (--nutui-font-size-12 );
218+ // 标准内容、名称类关键信息
219+ --nutui-font-size-base : var (--nutui-font-size-14 );
220+ // 汉字:楼层标题、卡片标题 数字:重复型价格,如搜推商卡
221+ --nutui-font-size-l : var (--nutui-font-size-16 );
222+ // 汉字:页面标题、页面级最重要内容 数字:模块级主价格,如购物车、结算、底导
223+ --nutui-font-size-xl : var (--nutui-font-size-18 );
224+ // 数字:页面级主价格,如商详、收银台
225+ --nutui-font-size-xxl : var (--nutui-font-size-24 );
226+ // zanwu
227+ --nutui-font-size-xxxl : var (--nutui-font-size-26 );
230228
231229 // 字重 ok
232- --nutui-font-weight-light : 300 ; // 次要内容
233- --nutui-font-weight : 400 ; // 常规内容
234- --nutui-font-weight-bold : 600 ; // 强化内容
230+ // 次要内容
231+ --nutui-font-weight-light : 300 ;
232+ // 常规内容
233+ --nutui-font-weight : 400 ;
234+ // 强化内容
235+ --nutui-font-weight-bold : 600 ;
235236
236237 // 行高
237238 --nutui-line-height-base : 1.5 ;
@@ -258,22 +259,22 @@ page {
258259 --nutui-spacing-16 : 16px ;
259260
260261 // space 语义化
261- --nutui-spacing-xxxs : var ( --nutui-spacing-2 ); // 狭小空间内的紧密关联内容
262- --nutui-spacing-xxs : var (
263- --nutui-spacing-4
264- ); // 导购:紧密关联内容;平台:紧密关联内容
265- --nutui-spacing-xs : var (
266- --nutui-spacing-6
267- ); // 导购:常规关联内容;平台:替代常规关联内容
268- --nutui-spacing-s : var (--nutui-spacing-7 ); // 一行二、一行三卡片间距
269- --nutui-spacing-base : var (
270- --nutui-spacing-8
271- ); // 导购:弱关联内容;平台:常规关联内容
272- --nutui-spacing-l : var (--nutui-spacing-9 ); // 一行四卡片间距
273- --nutui-spacing-xl : var (
274- --nutui-spacing-12
275- ); // 导购:无关联内容; 平台:弱关联内容
276- --nutui-spacing-xxl : var (--nutui-spacing-16 ); // 平台:无关联内容
262+ // 狭小空间内的紧密关联内容
263+ --nutui-spacing-xxxs : var (--nutui-spacing-2 );
264+ // 导购:紧密关联内容;平台:紧密关联内容
265+ --nutui-spacing-xxs : var ( --nutui-spacing-4 );
266+ // 导购:常规关联内容;平台:替代常规关联内容
267+ --nutui-spacing-xs : var ( --nutui-spacing-6 );
268+ // 一行二、一行三卡片间距
269+ --nutui-spacing-s : var (--nutui-spacing-7 );
270+ // 导购:弱关联内容;平台:常规关联内容
271+ --nutui-spacing-base : var ( --nutui-spacing-8 );
272+ // 一行四卡片间距
273+ --nutui-spacing-l : var (--nutui-spacing-9 );
274+ // 导购:无关联内容;平台:弱关联内容
275+ --nutui-spacing-xl : var ( --nutui-spacing-12 );
276+ // 平台:无关联内容
277+ --nutui-spacing-xxl : var (--nutui-spacing-16 );
277278
278279 // radius ok
279280 --nutui-radius-0 : 0px ;
@@ -303,15 +304,20 @@ page {
303304 --nutui-radius-24 : 24px ;
304305
305306 // radius 语义化
306- --nutui-radius-xxxs : var (--nutui-radius-0 ); // 内容描述型的详情页面通栏结构
307- --nutui-radius-xxs : var (--nutui-radius-2 ); // 标签
308- --nutui-radius-xs : var (--nutui-radius-4 ); // 单行高度20、24、28的组件
309- --nutui-radius-s : var (--nutui-radius-6 ); // 单行高度32、36的组件
310- --nutui-radius-base : var (--nutui-radius-8 ); // 单行高度40及以上的组件
311- --nutui-radius-l : var (--nutui-radius-8 ); // 入口型非通栏卡片
312- --nutui-radius-xl : var (
313- --nutui-radius-12
314- ); // 结构分割、通栏卡片、临时操作层组件等场景
307+ // 内容描述型的详情页面通栏结构
308+ --nutui-radius-xxxs : var (--nutui-radius-0 );
309+ // 标签
310+ --nutui-radius-xxs : var (--nutui-radius-2 );
311+ // 单行高度20、24、28的组件
312+ --nutui-radius-xs : var (--nutui-radius-4 );
313+ // 单行高度32、36的组件
314+ --nutui-radius-s : var (--nutui-radius-6 );
315+ // 单行高度40及以上的组件
316+ --nutui-radius-base : var (--nutui-radius-8 );
317+ // 入口型非通栏卡片
318+ --nutui-radius-l : var (--nutui-radius-8 );
319+ // 结构分割、通栏卡片、临时操作层组件等场景
320+ --nutui-radius-xl : var (--nutui-radius-12 );
315321 --nutui-radius-xxl : var (--nutui-radius-14 ); // zanwu
316322 --nutui-radius-xxxl : var (--nutui-radius-16 ); // zanwu
317323}
0 commit comments