Skip to content

Commit d8c8420

Browse files
irisSongirisSong
committed
style: 基础主题变更
2 parents 3a8441c + 2d7eac1 commit d8c8420

6 files changed

Lines changed: 209 additions & 129 deletions

File tree

‎.cursor/skills/nutui-build-local-verify/SKILL.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
name: nutui-build-local-verify
3-
description: NutUI 比例缩放本地验证——默认就地覆盖：每个组件 SCSS 写回 src/packages 下同一路径（如 actionsheet/actionsheet.scss→同文件）；--mirror 才写到 scale-verify/ 对照。不写 build。
3+
description: NutUI 比例缩放本地验证——写回 src/packages 下同路径组件 SCSS（跳过 src/packages/**/demo.scss 与 demos）；--mirror 写 scale-verify/；不写 build。
44
disable-model-invocation: true
55
---
66

@@ -10,6 +10,8 @@ disable-model-invocation: true
1010

1111
**只做一步**：用 `scripts/px-to-scale-px-in-component-scss.cjs` 把组件 SCSS 里裸 `px` 转成 `scale-px` 等，并把结果写回磁盘。
1212

13+
**不扫描、不写入**：**`src/packages/<组件名>/demo.scss`**（各组件目录根下的单文件）、`**/demos/**`、路径中含 **`/demo/`**、测试与快照目录下的 `.scss`（与官方 `build.mjs` 里对 `**/demo.scss` 的 ignore 一致）。
14+
1315
- **默认（就地覆盖）**：对每个匹配的 `.scss`，**读、写都是同一路径**——相对 `src/packages` 的路径不变。例如 `src/packages/actionsheet/actionsheet.scss` 转换后仍写回该文件，不会改到别的目录或改名。
1416
- **`--mirror`**：不写源码；结果写到 **`scale-verify/<与 src/packages 相同的相对路径>`**（例如 `scale-verify/actionsheet/actionsheet.scss`），便于 diff。
1517

@@ -19,6 +21,14 @@ disable-model-invocation: true
1921

2022
在 **nutui-react 仓库根目录** 执行。**务必先 commit / stash**，用完 `git restore src/packages` 或 `git checkout -- src/packages` 恢复。
2123

24+
若只需还原 **`src/packages/<组件>/demo.scss`**（当前脚本已跳过；若曾被旧版本误改）：
25+
26+
```bash
27+
find src/packages -name 'demo.scss' -exec git restore -- {} \;
28+
```
29+
30+
**然后**在仓库根执行验证：
31+
2232
```bash
2333
pnpm run verify-scale
2434
```

‎.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
#!/usr/bin/env node
22
/**
3-
* 默认：每个文件读自且写回 src/packages 下同一路径（如 …/actionsheet/actionsheet.scss）。
4-
* 不包含 build；自行 git diff / 恢复即可。
3+
* 本地验证：默认就地写回 src/packages 下同一路径的组件 .scss（如 …/actionsheet/actionsheet.scss）。
4+
* 跳过 src/packages/**/demo.scss、demos、测试与快照（与 build.mjs ignore 一致）。
5+
* --mirror 只写 scale-verify/；不包含 build；自行 git diff / 恢复即可。
56
*/
67
import fs from 'node:fs/promises'
78
import path from 'path'
@@ -32,6 +33,9 @@ function isScssFile(name) {
3233

3334
function shouldSkip(relPath) {
3435
const p = relPath.replaceAll('\\', '/')
36+
// 与 build.mjs 的 ignore 一致：**/demo.scss 不参与 px→scale 写回
37+
if (path.posix.basename(p) === 'demo.scss') return true
38+
if (p.includes('/demo/')) return true
3539
if (p.includes('/demos/')) return true
3640
if (p.includes('/__test__/')) return true
3741
if (p.includes('/__tests__/')) return true

‎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
// 内容描述型的详情页面通栏结构

0 commit comments

Comments
 (0)