Skip to content

Commit 2d7eac1

Browse files
irisSongirisSong
committed
style: 基础主题变更
1 parent 02c5b05 commit 2d7eac1

4 files changed

Lines changed: 192 additions & 126 deletions

File tree

‎src/styles/theme-dark.scss‎

Lines changed: 93 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -228,25 +228,59 @@ page {
228228
--nutui-color-border-disabled: var(--nutui-color-content-gray-1);
229229

230230
// 字体 ok
231-
--nutui-font-size-8: 8px;
232-
--nutui-font-size-9: 9px;
233-
--nutui-font-size-10: 10px;
234-
--nutui-font-size-11: 11px;
235-
--nutui-font-size-12: 12px;
236-
--nutui-font-size-13: 13px;
237-
--nutui-font-size-14: 14px;
238-
--nutui-font-size-15: 15px;
239-
--nutui-font-size-16: 16px;
240-
--nutui-font-size-17: 17px;
241-
--nutui-font-size-18: 18px;
242-
--nutui-font-size-19: 19px;
243-
--nutui-font-size-20: 20px;
244-
--nutui-font-size-21: 21px;
245-
--nutui-font-size-22: 22px;
246-
--nutui-font-size-23: 23px;
247-
--nutui-font-size-24: 24px;
248-
--nutui-font-size-25: 25px;
249-
--nutui-font-size-26: 26px;
231+
--nutui-font-size-8: calc(8px * var(--nut-scale-font, var(--nut-scale-f, 1)));
232+
--nutui-font-size-9: calc(9px * var(--nut-scale-font, var(--nut-scale-f, 1)));
233+
--nutui-font-size-10: calc(
234+
10px * var(--nut-scale-font, var(--nut-scale-f, 1))
235+
);
236+
--nutui-font-size-11: calc(
237+
11px * var(--nut-scale-font, var(--nut-scale-f, 1))
238+
);
239+
--nutui-font-size-12: calc(
240+
12px * var(--nut-scale-font, var(--nut-scale-f, 1))
241+
);
242+
--nutui-font-size-13: calc(
243+
13px * var(--nut-scale-font, var(--nut-scale-f, 1))
244+
);
245+
--nutui-font-size-14: calc(
246+
14px * var(--nut-scale-font, var(--nut-scale-f, 1))
247+
);
248+
--nutui-font-size-15: calc(
249+
15px * var(--nut-scale-font, var(--nut-scale-f, 1))
250+
);
251+
--nutui-font-size-16: calc(
252+
16px * var(--nut-scale-font, var(--nut-scale-f, 1))
253+
);
254+
--nutui-font-size-17: calc(
255+
17px * var(--nut-scale-font, var(--nut-scale-f, 1))
256+
);
257+
--nutui-font-size-18: calc(
258+
18px * var(--nut-scale-font, var(--nut-scale-f, 1))
259+
);
260+
--nutui-font-size-19: calc(
261+
19px * var(--nut-scale-font, var(--nut-scale-f, 1))
262+
);
263+
--nutui-font-size-20: calc(
264+
20px * var(--nut-scale-font, var(--nut-scale-f, 1))
265+
);
266+
--nutui-font-size-21: calc(
267+
21px * var(--nut-scale-font, var(--nut-scale-f, 1))
268+
);
269+
--nutui-font-size-22: calc(
270+
22px * var(--nut-scale-font, var(--nut-scale-f, 1))
271+
);
272+
--nutui-font-size-23: calc(
273+
23px * var(--nut-scale-font, var(--nut-scale-f, 1))
274+
);
275+
--nutui-font-size-24: calc(
276+
24px * var(--nut-scale-font, var(--nut-scale-f, 1))
277+
);
278+
--nutui-font-size-25: calc(
279+
25px * var(--nut-scale-font, var(--nut-scale-f, 1))
280+
);
281+
--nutui-font-size-26: calc(
282+
26px * var(--nut-scale-font, var(--nut-scale-f, 1))
283+
);
250284

251285
// 字号语义化
252286
// 徽标文字
@@ -301,22 +335,22 @@ page {
301335
--nutui-text-align: left;
302336

303337
// space
304-
--nutui-spacing-1: 1px;
305-
--nutui-spacing-2: 2px;
306-
--nutui-spacing-3: 3px;
307-
--nutui-spacing-4: 4px;
308-
--nutui-spacing-5: 5px;
309-
--nutui-spacing-6: 6px;
310-
--nutui-spacing-7: 7px;
311-
--nutui-spacing-8: 8px;
312-
--nutui-spacing-9: 9px;
313-
--nutui-spacing-10: 10px;
314-
--nutui-spacing-11: 11px;
315-
--nutui-spacing-12: 12px;
316-
--nutui-spacing-13: 13px;
317-
--nutui-spacing-14: 14px;
318-
--nutui-spacing-15: 15px;
319-
--nutui-spacing-16: 16px;
338+
--nutui-spacing-1: calc(1px * var(--nut-scale-f, 1));
339+
--nutui-spacing-2: calc(2px * var(--nut-scale-f, 1));
340+
--nutui-spacing-3: calc(3px * var(--nut-scale-f, 1));
341+
--nutui-spacing-4: calc(4px * var(--nut-scale-f, 1));
342+
--nutui-spacing-5: calc(5px * var(--nut-scale-f, 1));
343+
--nutui-spacing-6: calc(6px * var(--nut-scale-f, 1));
344+
--nutui-spacing-7: calc(7px * var(--nut-scale-f, 1));
345+
--nutui-spacing-8: calc(8px * var(--nut-scale-f, 1));
346+
--nutui-spacing-9: calc(9px * var(--nut-scale-f, 1));
347+
--nutui-spacing-10: calc(10px * var(--nut-scale-f, 1));
348+
--nutui-spacing-11: calc(11px * var(--nut-scale-f, 1));
349+
--nutui-spacing-12: calc(12px * var(--nut-scale-f, 1));
350+
--nutui-spacing-13: calc(13px * var(--nut-scale-f, 1));
351+
--nutui-spacing-14: calc(14px * var(--nut-scale-f, 1));
352+
--nutui-spacing-15: calc(15px * var(--nut-scale-f, 1));
353+
--nutui-spacing-16: calc(16px * var(--nut-scale-f, 1));
320354

321355
// space 语义化
322356
// 狭小空间内的紧密关联内容
@@ -338,30 +372,30 @@ page {
338372

339373
// radius ok
340374
--nutui-radius-0: 0px;
341-
--nutui-radius-1: 1px;
342-
--nutui-radius-2: 2px;
343-
--nutui-radius-3: 3px;
344-
--nutui-radius-4: 4px;
345-
--nutui-radius-5: 5px;
346-
--nutui-radius-6: 6px;
347-
--nutui-radius-7: 7px;
348-
--nutui-radius-8: 8px;
349-
--nutui-radius-9: 9px;
350-
--nutui-radius-10: 10px;
351-
--nutui-radius-11: 11px;
352-
--nutui-radius-12: 12px;
353-
--nutui-radius-13: 13px;
354-
--nutui-radius-14: 14px;
355-
--nutui-radius-15: 15px;
356-
--nutui-radius-16: 16px;
357-
--nutui-radius-17: 17px;
358-
--nutui-radius-18: 18px;
359-
--nutui-radius-19: 19px;
360-
--nutui-radius-20: 20px;
361-
--nutui-radius-21: 21px;
362-
--nutui-radius-22: 22px;
363-
--nutui-radius-23: 23px;
364-
--nutui-radius-24: 24px;
375+
--nutui-radius-1: calc(1px * var(--nut-scale-f, 1));
376+
--nutui-radius-2: calc(2px * var(--nut-scale-f, 1));
377+
--nutui-radius-3: calc(3px * var(--nut-scale-f, 1));
378+
--nutui-radius-4: calc(4px * var(--nut-scale-f, 1));
379+
--nutui-radius-5: calc(5px * var(--nut-scale-f, 1));
380+
--nutui-radius-6: calc(6px * var(--nut-scale-f, 1));
381+
--nutui-radius-7: calc(7px * var(--nut-scale-f, 1));
382+
--nutui-radius-8: calc(8px * var(--nut-scale-f, 1));
383+
--nutui-radius-9: calc(9px * var(--nut-scale-f, 1));
384+
--nutui-radius-10: calc(10px * var(--nut-scale-f, 1));
385+
--nutui-radius-11: calc(11px * var(--nut-scale-f, 1));
386+
--nutui-radius-12: calc(12px * var(--nut-scale-f, 1));
387+
--nutui-radius-13: calc(13px * var(--nut-scale-f, 1));
388+
--nutui-radius-14: calc(14px * var(--nut-scale-f, 1));
389+
--nutui-radius-15: calc(15px * var(--nut-scale-f, 1));
390+
--nutui-radius-16: calc(16px * var(--nut-scale-f, 1));
391+
--nutui-radius-17: calc(17px * var(--nut-scale-f, 1));
392+
--nutui-radius-18: calc(18px * var(--nut-scale-f, 1));
393+
--nutui-radius-19: calc(19px * var(--nut-scale-f, 1));
394+
--nutui-radius-20: calc(20px * var(--nut-scale-f, 1));
395+
--nutui-radius-21: calc(21px * var(--nut-scale-f, 1));
396+
--nutui-radius-22: calc(22px * var(--nut-scale-f, 1));
397+
--nutui-radius-23: calc(23px * var(--nut-scale-f, 1));
398+
--nutui-radius-24: calc(24px * var(--nut-scale-f, 1));
365399

366400
// radius 语义化
367401
// 内容描述型的详情页面通栏结构

‎src/styles/theme-default.scss‎

Lines changed: 93 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -227,25 +227,59 @@ page {
227227
--nutui-color-border-disabled: var(--nutui-color-content-gray-1);
228228

229229
// 字体 ok
230-
--nutui-font-size-8: 8px;
231-
--nutui-font-size-9: 9px;
232-
--nutui-font-size-10: 10px;
233-
--nutui-font-size-11: 11px;
234-
--nutui-font-size-12: 12px;
235-
--nutui-font-size-13: 13px;
236-
--nutui-font-size-14: 14px;
237-
--nutui-font-size-15: 15px;
238-
--nutui-font-size-16: 16px;
239-
--nutui-font-size-17: 17px;
240-
--nutui-font-size-18: 18px;
241-
--nutui-font-size-19: 19px;
242-
--nutui-font-size-20: 20px;
243-
--nutui-font-size-21: 21px;
244-
--nutui-font-size-22: 22px;
245-
--nutui-font-size-23: 23px;
246-
--nutui-font-size-24: 24px;
247-
--nutui-font-size-25: 25px;
248-
--nutui-font-size-26: 26px;
230+
--nutui-font-size-8: calc(8px * var(--nut-scale-font, var(--nut-scale-f, 1)));
231+
--nutui-font-size-9: calc(9px * var(--nut-scale-font, var(--nut-scale-f, 1)));
232+
--nutui-font-size-10: calc(
233+
10px * var(--nut-scale-font, var(--nut-scale-f, 1))
234+
);
235+
--nutui-font-size-11: calc(
236+
11px * var(--nut-scale-font, var(--nut-scale-f, 1))
237+
);
238+
--nutui-font-size-12: calc(
239+
12px * var(--nut-scale-font, var(--nut-scale-f, 1))
240+
);
241+
--nutui-font-size-13: calc(
242+
13px * var(--nut-scale-font, var(--nut-scale-f, 1))
243+
);
244+
--nutui-font-size-14: calc(
245+
14px * var(--nut-scale-font, var(--nut-scale-f, 1))
246+
);
247+
--nutui-font-size-15: calc(
248+
15px * var(--nut-scale-font, var(--nut-scale-f, 1))
249+
);
250+
--nutui-font-size-16: calc(
251+
16px * var(--nut-scale-font, var(--nut-scale-f, 1))
252+
);
253+
--nutui-font-size-17: calc(
254+
17px * var(--nut-scale-font, var(--nut-scale-f, 1))
255+
);
256+
--nutui-font-size-18: calc(
257+
18px * var(--nut-scale-font, var(--nut-scale-f, 1))
258+
);
259+
--nutui-font-size-19: calc(
260+
19px * var(--nut-scale-font, var(--nut-scale-f, 1))
261+
);
262+
--nutui-font-size-20: calc(
263+
20px * var(--nut-scale-font, var(--nut-scale-f, 1))
264+
);
265+
--nutui-font-size-21: calc(
266+
21px * var(--nut-scale-font, var(--nut-scale-f, 1))
267+
);
268+
--nutui-font-size-22: calc(
269+
22px * var(--nut-scale-font, var(--nut-scale-f, 1))
270+
);
271+
--nutui-font-size-23: calc(
272+
23px * var(--nut-scale-font, var(--nut-scale-f, 1))
273+
);
274+
--nutui-font-size-24: calc(
275+
24px * var(--nut-scale-font, var(--nut-scale-f, 1))
276+
);
277+
--nutui-font-size-25: calc(
278+
25px * var(--nut-scale-font, var(--nut-scale-f, 1))
279+
);
280+
--nutui-font-size-26: calc(
281+
26px * var(--nut-scale-font, var(--nut-scale-f, 1))
282+
);
249283

250284
// 字号语义化
251285
// 徽标文字
@@ -302,22 +336,22 @@ page {
302336
--nutui-text-align: left;
303337

304338
// space
305-
--nutui-spacing-1: 1px;
306-
--nutui-spacing-2: 2px;
307-
--nutui-spacing-3: 3px;
308-
--nutui-spacing-4: 4px;
309-
--nutui-spacing-5: 5px;
310-
--nutui-spacing-6: 6px;
311-
--nutui-spacing-7: 7px;
312-
--nutui-spacing-8: 8px;
313-
--nutui-spacing-9: 9px;
314-
--nutui-spacing-10: 10px;
315-
--nutui-spacing-11: 11px;
316-
--nutui-spacing-12: 12px;
317-
--nutui-spacing-13: 13px;
318-
--nutui-spacing-14: 14px;
319-
--nutui-spacing-15: 15px;
320-
--nutui-spacing-16: 16px;
339+
--nutui-spacing-1: calc(1px * var(--nut-scale-f, 1));
340+
--nutui-spacing-2: calc(2px * var(--nut-scale-f, 1));
341+
--nutui-spacing-3: calc(3px * var(--nut-scale-f, 1));
342+
--nutui-spacing-4: calc(4px * var(--nut-scale-f, 1));
343+
--nutui-spacing-5: calc(5px * var(--nut-scale-f, 1));
344+
--nutui-spacing-6: calc(6px * var(--nut-scale-f, 1));
345+
--nutui-spacing-7: calc(7px * var(--nut-scale-f, 1));
346+
--nutui-spacing-8: calc(8px * var(--nut-scale-f, 1));
347+
--nutui-spacing-9: calc(9px * var(--nut-scale-f, 1));
348+
--nutui-spacing-10: calc(10px * var(--nut-scale-f, 1));
349+
--nutui-spacing-11: calc(11px * var(--nut-scale-f, 1));
350+
--nutui-spacing-12: calc(12px * var(--nut-scale-f, 1));
351+
--nutui-spacing-13: calc(13px * var(--nut-scale-f, 1));
352+
--nutui-spacing-14: calc(14px * var(--nut-scale-f, 1));
353+
--nutui-spacing-15: calc(15px * var(--nut-scale-f, 1));
354+
--nutui-spacing-16: calc(16px * var(--nut-scale-f, 1));
321355

322356
// space 语义化
323357
// 狭小空间内的紧密关联内容
@@ -339,30 +373,30 @@ page {
339373

340374
// radius ok
341375
--nutui-radius-0: 0px;
342-
--nutui-radius-1: 1px;
343-
--nutui-radius-2: 2px;
344-
--nutui-radius-3: 3px;
345-
--nutui-radius-4: 4px;
346-
--nutui-radius-5: 5px;
347-
--nutui-radius-6: 6px;
348-
--nutui-radius-7: 7px;
349-
--nutui-radius-8: 8px;
350-
--nutui-radius-9: 9px;
351-
--nutui-radius-10: 10px;
352-
--nutui-radius-11: 11px;
353-
--nutui-radius-12: 12px;
354-
--nutui-radius-13: 13px;
355-
--nutui-radius-14: 14px;
356-
--nutui-radius-15: 15px;
357-
--nutui-radius-16: 16px;
358-
--nutui-radius-17: 17px;
359-
--nutui-radius-18: 18px;
360-
--nutui-radius-19: 19px;
361-
--nutui-radius-20: 20px;
362-
--nutui-radius-21: 21px;
363-
--nutui-radius-22: 22px;
364-
--nutui-radius-23: 23px;
365-
--nutui-radius-24: 24px;
376+
--nutui-radius-1: calc(1px * var(--nut-scale-f, 1));
377+
--nutui-radius-2: calc(2px * var(--nut-scale-f, 1));
378+
--nutui-radius-3: calc(3px * var(--nut-scale-f, 1));
379+
--nutui-radius-4: calc(4px * var(--nut-scale-f, 1));
380+
--nutui-radius-5: calc(5px * var(--nut-scale-f, 1));
381+
--nutui-radius-6: calc(6px * var(--nut-scale-f, 1));
382+
--nutui-radius-7: calc(7px * var(--nut-scale-f, 1));
383+
--nutui-radius-8: calc(8px * var(--nut-scale-f, 1));
384+
--nutui-radius-9: calc(9px * var(--nut-scale-f, 1));
385+
--nutui-radius-10: calc(10px * var(--nut-scale-f, 1));
386+
--nutui-radius-11: calc(11px * var(--nut-scale-f, 1));
387+
--nutui-radius-12: calc(12px * var(--nut-scale-f, 1));
388+
--nutui-radius-13: calc(13px * var(--nut-scale-f, 1));
389+
--nutui-radius-14: calc(14px * var(--nut-scale-f, 1));
390+
--nutui-radius-15: calc(15px * var(--nut-scale-f, 1));
391+
--nutui-radius-16: calc(16px * var(--nut-scale-f, 1));
392+
--nutui-radius-17: calc(17px * var(--nut-scale-f, 1));
393+
--nutui-radius-18: calc(18px * var(--nut-scale-f, 1));
394+
--nutui-radius-19: calc(19px * var(--nut-scale-f, 1));
395+
--nutui-radius-20: calc(20px * var(--nut-scale-f, 1));
396+
--nutui-radius-21: calc(21px * var(--nut-scale-f, 1));
397+
--nutui-radius-22: calc(22px * var(--nut-scale-f, 1));
398+
--nutui-radius-23: calc(23px * var(--nut-scale-f, 1));
399+
--nutui-radius-24: calc(24px * var(--nut-scale-f, 1));
366400

367401
// radius 语义化
368402
// 内容描述型的详情页面通栏结构

‎src/styles/variables.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
// ----------------------------------------------------
22
// 缩放系数
3-
:root {
3+
:root,
4+
page {
45
--nut-scale-f: 1;
56
--nut-scale-font: var(--nut-scale-f, 1);
67
--nut-scale-icon: var(--nut-scale-f, 1);
8+
79
// ---- icon size ----
810
--nut-icon-height: calc(
911
16px * var(--nut-scale-icon, var(--nut-scale-f, 1))

‎src/utils/scale-f.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,6 @@ export type ScaleProfile = 'standard' | 'large' | 'elderly'
3939
export type ScaleScene = 'layout' | 'font' | 'icon' | 'lego'
4040
export type ScaleDevice = 'phone' | 'pad'
4141

42-
/** 视口大于等于该宽度时按平板处理 */
43-
const PAD_BREAKPOINT = 600
44-
/** 平板默认整体缩放倍数 */
45-
const PAD_SCALE = 1.2
4642
/** 大字模式下仅 font 场景的相对倍率 */
4743
const LARGE_FONT_RATIO = 1.15
4844
/** 老年模式下 font/icon/lego 场景的相对倍率 */
@@ -88,7 +84,7 @@ function formatScaleValue(nextScale: number) {
8884
/** 根据屏宽粗略区分 phone / pad */
8985
function getCurrentDevice(): ScaleDevice {
9086
if (!canUseDom) return 'phone'
91-
return window.innerWidth >= PAD_BREAKPOINT ? 'pad' : 'phone'
87+
return window.innerWidth >= 600 ? 'pad' : 'phone'
9288
}
9389

9490
/** 在 profile 与 scene 维度上叠加额外倍率（与全局 scale 相乘） */
@@ -124,8 +120,8 @@ function getScaleByViewport() {
124120

125121
if (!deviceWidth) return 1
126122

127-
if (deviceWidth >= PAD_BREAKPOINT) {
128-
return PAD_SCALE
123+
if (deviceWidth >= 600) {
124+
return 1.2
129125
}
130126

131127
if (deviceWidth >= 375 && deviceWidth < 600) {

0 commit comments

Comments
 (0)