diff --git a/.cursor/skills/nutui-build-local-verify/SKILL.md b/.cursor/skills/nutui-build-local-verify/SKILL.md new file mode 100644 index 0000000000..d498ff7afc --- /dev/null +++ b/.cursor/skills/nutui-build-local-verify/SKILL.md @@ -0,0 +1,72 @@ +--- +name: nutui-build-local-verify +description: NutUI 比例缩放本地验证——写回 src/packages 下同路径组件 SCSS（跳过 src/packages/**/demo.scss 与 demos）；--mirror 写 scale-verify/；不写 build。 +disable-model-invocation: true +--- + +# NutUI Build Local Verify + +## 在做什么 + +**只做一步**：用 `scripts/px-to-scale-px-in-component-scss.cjs` 把组件 SCSS 里裸 `px` 转成 `scale-px` 等，并把结果写回磁盘。 + +**不扫描、不写入**：**`src/packages/<组件名>/demo.scss`**（各组件目录根下的单文件）、`**/demos/**`、路径中含 **`/demo/`**、测试与快照目录下的 `.scss`（与官方 `build.mjs` 里对 `**/demo.scss` 的 ignore 一致）。 + +- **默认（就地覆盖）**：对每个匹配的 `.scss`，**读、写都是同一路径**——相对 `src/packages` 的路径不变。例如 `src/packages/actionsheet/actionsheet.scss` 转换后仍写回该文件，不会改到别的目录或改名。 +- **`--mirror`**：不写源码；结果写到 **`scale-verify/<与 src/packages 相同的相对路径>`**（例如 `scale-verify/actionsheet/actionsheet.scss`），便于 diff。 + +之后是否再跑 `pnpm run build`、是否用别的工具核对，由你自行决定；本 skill **不要求** build。 + +## 覆盖原 SCSS（推荐） + +在 **nutui-react 仓库根目录** 执行。**务必先 commit / stash**，用完 `git restore src/packages` 或 `git checkout -- src/packages` 恢复。 + +若只需还原 **`src/packages/<组件>/demo.scss`**（当前脚本已跳过；若曾被旧版本误改）： + +```bash +find src/packages -name 'demo.scss' -exec git restore -- {} \; +``` + +**然后**在仓库根执行验证： + +```bash +pnpm run verify-scale +``` + +等价： + +```bash +node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs +``` + +（`--in-place` / `-i` 与默认等价。） + +## 报告 + +路径：**`scale-verify/report.json`**。覆盖模式下看 `overwriteSource === true`、`changedFileCount`、`changedFiles`。 + +## 其它命令 + +```bash +# 删除仓库根下 scale-verify/ 整目录（含 report；不还原已覆盖的 src/packages） +node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs --clean +``` + +**可选**（只镜像、不覆盖源码）： + +```bash +pnpm run verify-scale:mirror +``` + +`--mirror` 与 `--in-place` 不能同时使用。 + +## 核对清单 + +- [ ] 覆盖前已 git 可回滚 +- [ ] `changedFiles` 抽样无 `scale-px(0px)`、无重复嵌套 `scale-px` +- [ ] `font-size` / `font` 未被误改（转换器会跳过） + +## 给用户的一句话结论 + +- 脚本跑完 + `changedFileCount` + 列 2～3 个 `changedFiles` +- **覆盖的是真实源码**时，验证完用 **git 恢复** diff --git a/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs b/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs new file mode 100644 index 0000000000..e3922ada2e --- /dev/null +++ b/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs @@ -0,0 +1,136 @@ +#!/usr/bin/env node +/** + * 本地验证：默认就地写回 src/packages 下同一路径的组件 .scss（如 …/actionsheet/actionsheet.scss）。 + * 跳过 src/packages/**/demo.scss、demos、测试与快照（与 build.mjs ignore 一致）。 + * --mirror 只写 scale-verify/；不包含 build；自行 git diff / 恢复即可。 + */ +import fs from 'node:fs/promises' +import path from 'path' +import { createRequire } from 'node:module' + +const require = createRequire(import.meta.url) +const transform = require(path.resolve(process.cwd(), 'scripts/px-to-scale-px-in-component-scss.cjs')) + +const repoRoot = process.cwd() +const packagesRoot = path.resolve(repoRoot, 'src/packages') +const outRoot = path.resolve(repoRoot, 'scale-verify') +const reportPath = path.resolve(outRoot, 'report.json') + +const argv = new Set(process.argv.slice(2)) +const shouldClean = argv.has('--clean') +const mirrorMode = argv.has('--mirror') +/** 默认覆盖 src/packages 原 .scss；传 --mirror 则只写 scale-verify/ */ +const inPlace = !mirrorMode + +if (mirrorMode && (argv.has('--in-place') || argv.has('-i'))) { + console.error('[scale-verify] 不能同时使用 --mirror 与 --in-place / -i') + process.exit(1) +} + +function isScssFile(name) { + return name.endsWith('.scss') +} + +function shouldSkip(relPath) { + const p = relPath.replaceAll('\\', '/') + // 与 build.mjs 的 ignore 一致：**/demo.scss 不参与 px→scale 写回 + if (path.posix.basename(p) === 'demo.scss') return true + if (p.includes('/demo/')) return true + if (p.includes('/demos/')) return true + if (p.includes('/__test__/')) return true + if (p.includes('/__tests__/')) return true + if (p.includes('/__snapshots__/')) return true + if (p.startsWith('.scale-verify/')) return true + return false +} + +async function walkScssFiles(dir, base = dir, list = []) { + const entries = await fs.readdir(dir, { withFileTypes: true }) + for (const entry of entries) { + const abs = path.resolve(dir, entry.name) + const rel = path.relative(base, abs) + if (entry.isDirectory()) { + await walkScssFiles(abs, base, list) + continue + } + if (!entry.isFile() || !isScssFile(entry.name)) continue + if (shouldSkip(rel)) continue + list.push(abs) + } + return list +} + +async function ensureReportDir() { + await fs.mkdir(outRoot, { recursive: true }) +} + +async function prepareOutputLayout() { + if (shouldClean) { + await fs.rm(outRoot, { recursive: true, force: true }) + console.log('[scale-verify] cleaned:', path.relative(repoRoot, outRoot)) + return + } + + await fs.rm(outRoot, { recursive: true, force: true }) + await fs.mkdir(outRoot, { recursive: true }) +} + +async function main() { + await prepareOutputLayout() + if (shouldClean) { + return + } + + const files = await walkScssFiles(packagesRoot) + files.sort() + + const changed = [] + for (const absFile of files) { + const rel = path.relative(packagesRoot, absFile) + const source = await fs.readFile(absFile, 'utf8') + const transformed = transform(source) + if (source === transformed) continue + + const targetFile = inPlace ? absFile : path.resolve(outRoot, rel) + if (!inPlace) { + await fs.mkdir(path.dirname(targetFile), { recursive: true }) + } + await fs.writeFile(targetFile, transformed, 'utf8') + changed.push(rel.replaceAll('\\', '/')) + } + + await ensureReportDir() + const scssWriteRoot = inPlace + ? path.relative(repoRoot, packagesRoot).replaceAll('\\', '/') + : path.relative(repoRoot, outRoot).replaceAll('\\', '/') + + const report = { + generatedAt: new Date().toISOString(), + mode: inPlace ? 'in-place' : 'mirror', + overwriteSource: inPlace, + /** 本次写入的 SCSS 根路径：原地为 src/packages，镜像为仓库根下 scale-verify */ + scssWriteRoot, + /** 镜像模式下的实验目录；原地模式为 null */ + outDir: inPlace ? null : path.relative(repoRoot, outRoot).replaceAll('\\', '/'), + reportPath: path.relative(repoRoot, reportPath).replaceAll('\\', '/'), + totalScssFiles: files.length, + changedFileCount: changed.length, + changedFiles: changed, + } + await fs.writeFile(reportPath, `${JSON.stringify(report, null, 2)}\n`, 'utf8') + + console.log('[scale-verify] mode:', report.mode) + if (!inPlace) { + console.log('[scale-verify] outDir:', report.outDir) + } else { + console.log('[scale-verify] wrote into:', path.relative(repoRoot, packagesRoot)) + } + console.log('[scale-verify] totalScssFiles:', report.totalScssFiles) + console.log('[scale-verify] changedFileCount:', report.changedFileCount) + console.log('[scale-verify] report:', path.relative(repoRoot, reportPath)) +} + +main().catch((err) => { + console.error('[scale-verify] failed:', err) + process.exitCode = 1 +}) diff --git a/.cursor/skills/nutui-proportional-scaling/SKILL.md b/.cursor/skills/nutui-proportional-scaling/SKILL.md new file mode 100644 index 0000000000..4c2fcc482d --- /dev/null +++ b/.cursor/skills/nutui-proportional-scaling/SKILL.md @@ -0,0 +1,118 @@ +--- +name: nutui-proportional-scaling +description: >- + NutUI React proportional scaling on branch feat_resize: runtime --nut-scale-f / + --nut-scale-font / --nut-scale-icon from scale-f.ts (H5) and scale-f.taro.ts + (Taro), Sass helpers scale-px / scale-font-px / scale-icon-px and theme font + tokens in variables.scss & theme-*.scss; npm run build / build:taro run + scripts/px-to-scale-px-in-component-scss.cjs on component SCSS in memory; profiles standard / large / elderly; + commit-backed rules e.g. never scale 0px. Use when implementing 多尺寸适配, + 等比适配, 大字版, 老年版, scale-px, viewport or native bridge scaling, or + editing component SCSS for resize; SCSS: prefer calc($token + Npx) over + #{} in calc, use outer calc() when mixing tokens that compile to + var(--nutui-*). +--- + +# NutUI React 等比适配 + +## 1. 运行时：谁在写 CSS 变量 + +- **H5**：`src/utils/scale-f.ts` + - `initScaleF(profile?)`：首次计算缩放、`resize` 时 `refreshScaleF`。 + - `getScaleF`：优先 `jmfe.callNative('DongScreenAdapterPlugin','getScale')`，失败用视口规则。 + - 视口回退要点：`innerWidth >= 600` 视作 pad，基准乘 `1.2`；`375–600` 间按 `375` 比例，**上限 1.17**（与源码常量一致）。 +- **Taro 侧复用同一套契约**：`src/utils/scale-f.taro.ts`，并从 `src/utils/index.taro.ts` 导出。 +- 写入 `:root` 的变量（与 `variables.scss` 一致）： + - `--nut-scale-f`：布局/通用 `scale-px` + - `--nut-scale-font`：`scale-font-px`、主题 `--nutui-font-size-*` + - `--nut-scale-icon`：`scale-icon-px`、图标相关 + +**档位 `ScaleProfile`**：`standard` | `large` | `elderly`（仅后两者生效额外倍率）。 +**场景倍率**（与 `getSceneRatio` 一致）：老年对 `font` / `icon` / `lego` × `1.3`；大字仅对 `font` × `1.15`。 + +**JS 里算像素**：`calcByProfile(baseValue, { scene, profile?, scale?, device? })` — 用于组件内联样式、画布尺寸等，与 Sass 的 `calc(...* var(--nut-scale-*))` 同一套语义。 + +--- + +## 2. 样式层：`variables.scss` 中的函数 + +```scss +// 根上默认值见 variables.scss :root +@function scale-px($size) { + @return calc(#{$size} * var(--nut-scale-f, 1)); +} +@function scale-font-px($size) { + @return calc(#{$size} * var(--nut-scale-font, var(--nut-scale-f, 1))); +} +@function scale-icon-px($size) { + @return calc(#{$size} * var(--nut-scale-icon, var(--nut-scale-f, 1))); +} +``` + +**主题字号档**（`theme-default.scss` / `theme-dark.scss`）：`--nutui-font-size-*` 使用 `calc(Npx * var(--nut-scale-font, var(--nut-scale-f, 1)))`，与 **大字/老年** 档位对齐。 + +### 2.1 `npm run build` / `npm run build:taro` 时的 px → `scale-px` + +- 与 `package.json` 中顺序一致：先跑 **`scripts/replace-css-var.js`**，再 **`scripts/build.mjs`** 或 **`scripts/build-taro.mjs`**；上述脚本在读取 **`src/packages/**/\*.scss`（不含 demo）** 后，会经 **`scripts/px-to-scale-px-in-component-scss.cjs`** 在**内存**里把声明值中的裸 **`Npx`** 转为 **`scale-px(Npx)`**（规则见 §3），**不写回\*\*仓库里的组件 SCSS。 +- 源码里可继续手写 **`scale-px` / `scale-font-px` / `scale-icon-px`**；构建不会重复嵌套 `scale-px`。 +- 该脚本对 **`calc(...)` 体内同时含 `$` 与 `/`** 的整段先做占位再替换裸 `px`，避免 postcss-scss 把 **`calc($var / 2)`** 等拆坏；其它 `calc` 内的裸 `Npx` 仍会按规则转为 `scale-px`。 + +--- + +## 3. 提交里固化的规范（务必遵守） + +### 3.1 「0px 不转换」（`1a35d9b8`） + +凡应为 **数值 0** 的尺寸，**不要**写 `scale-px(0px)`，一律 **`0`** 或 **`0px`**（如 padding 某一维、`box-shadow` 偏移、border 为 0、`margin: 0`）。 +否则会得到 `calc(0px * var(--nut-scale-f))`，在部分浏览器或亚像素场景下与纯 `0` 表现不一致。 + +### 3.2 `line-height` + +- **比例行高**（如 `line-height: 1`）：不随系数变，用于挤压行盒、图标对齐等 — 与「等比 px」不同维度。 +- **与设计稿 px 绑定的行高**：用与字号一致的档位，通常为 **`scale-font-px`**，或与同一变量体系。 +- 参考历史修复：弹层标题等曾去掉不恰当的固定 `line-height` 以免与大字模式冲突 — 新增时不要给标题随意写死 `line-height: 20px` 类样式，除非走缩放函数或主题变量。 + +### 3.3 组件 SCSS 迁移模式（`dc4f1e28` / 后续 style 提交） + +- 间距、圆角、`border` 粗细、固定宽高（非纯文字）：优先 **`scale-px`**。 +- 纯字体大小：`scale-font-px` 或主题已有 `--nutui-font-size-*`。 +- 图标占位：**`scale-icon-px`** 或已有 `--nut-icon-*`。 +- 保持与 **无障碍/大屏** 相关提交协同：同一文件改尺度时，勿回退 `dialog` 等对大字兼容的改动。 + +### 3.5 组件 `.tsx` 图标尺寸治理（props → class → 变量） + +- 对 `@nutui/icons-react` / `@nutui/icons-react-taro`：尽量避免在组件上写死 `size={12}`、`width={16}`、`height={16}`。 +- **推荐模式**：在 `.tsx` 里只加语义化 `className`，到对应 `.scss` 里用变量控制尺寸（优先 `$icon-size-*` 阶梯，或组件专用变量）。 +- 若是内联 ``（非 NutUI 图标组件）也遵循同一规则：移除 `width/height` 字面量，改为 class，并在 SCSS 用变量（可新增如 `$xxx-icon-size`，默认 `scale-icon-px(Npx)`）。 +- 新增尺寸档优先沉淀到 `variables.scss`（如 `$icon-size-11`、`$icon-size-16`），避免同一像素值在多个组件重复散落。 + +### 3.4 `calc()`、Sass 变量与 `#{}`（与 `variables.scss` / 主题 token 一致） + +- **推荐**：在 `calc()` 里直接写 Sass 变量，如 **`calc($steps-vertical-head-icon-size + 1px)`**、**`calc($rate-item-margin / 2)`**，而不是 **`calc(#{$steps-vertical-head-icon-size} + 1px)`**。`#{}` 只在需要把值**硬插成无引号 CSS 片段**、或要避免 Sass 对单位做提前合并时再考虑；普通设计 token 用 **`$var` 作为 `calc` 的操作数**即可。 +- **与 `var(--nutui-*)` 一起运算时**：许多 token 会展开为 **`var(--nutui-…, calc(Npx * var(--nut-scale-f, 1)))`**。此时**不要**指望纯 Sass 括号在声明值里做「减法 + 固定 px」，例如 + **`margin: 0 ($switch-height - $switch-border-width + 3px) 0 7px`** + 会在编译结果里拼成 **`var(...)var(...)`** 一类**缺少运算符**的非法片段。应写成 **`margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px`**，让整条长度在**一个** CSS `calc()` 里由浏览器解析。 +- **`100%` 与长度相减**：用 **`calc(100% - Npx)`** 一层即可，避免出现 **`100% - calc(...)`** 这类单位不合法的组合（历史上有过 postcss / 手工替换导致的损坏，以当前组件 SCSS 为准）。 + +--- + +## 4. 业务接入清单 + +1. **入口调用**：在应用入口（仅浏览器环境）调用 `initScaleF(可选档位)`；档位可随业务切换并依赖内部 `setScaleProfile` 刷新变量。 +2. **Taro**：使用 `scale-f.taro` 导出，保证 H5 与小程序 WebView 行为一致（仍以仓库实现为准）。 +3. **覆写主题**：通过 `--nutui-*` 或 `--nut-scale-*` 覆盖时，保持 `calc` 与变量回退链完整。 +4. **验收**：切换标准/大字/老年、收窄与放宽视口、（如有）站内容器走原生 `getScale`，检查布局与字号是否同比变化且无「0px 被 scale」问题。 + +--- + +## 5. Agent 自检（改完缩放权相关代码时） + +- [ ] 新增 **0** 尺寸未误用 `scale-px(0px)`。 +- [ ] 字体/图标是否应走 **`scale-font-px` / `scale-icon-px`** 而非误用 `scale-px`。 +- [ ] 含 **`$token` 与裸 `px` 的混合运算**：若 token 会变成 **`var(--nutui-*)`**，是否已用 **`calc($a - $b + Npx)`**，而不是 **`($a - $b + Npx)`** 写在 `margin` / `width` 等非纯编译期长度位置。 +- [ ] `calc()` 内对设计 token 是否优先 **`calc($var + 1px)`**，避免无必要的 **`#{}`**。 +- [ ] 组件 `.tsx` 是否仍有写死图标尺寸（`size/width/height`）；如有，是否已改为 **class + SCSS 变量**（内联 `svg` 同理）。 +- [ ] TS 侧改 `scale-f*` 已同步考虑 **Taro** 文件。 +- [ ] 修改 `formatScaleValue` / 断点时，已通读 **视口与平板常量** 是否仍与文档、设计一致。 + +若与上游分支分歧，以**当前分支 `feat_resize` 最新提交**及 `src/utils/scale-f*.ts`、`src/styles/variables.scss` 为准。 diff --git "a/NutUI-React_\347\273\204\344\273\266\346\240\207\345\207\206\347\231\275\347\232\256\344\271\246.md" "b/NutUI-React_\347\273\204\344\273\266\346\240\207\345\207\206\347\231\275\347\232\256\344\271\246.md" index 0bdb4aedce..7a53a59c4a 100644 --- "a/NutUI-React_\347\273\204\344\273\266\346\240\207\345\207\206\347\231\275\347\232\256\344\271\246.md" +++ "b/NutUI-React_\347\273\204\344\273\266\346\240\207\345\207\206\347\231\275\347\232\256\344\271\246.md" @@ -114,7 +114,6 @@ NutUI 的演进伴随着移动端技术的演进，从移动端到跨端，从 V 定义组件 Props 前，**必须（MUST）**继承全局抽象类型 `BasicComponent`（或 `MiniProgramBasicProps` 等多端公共类型），确保组件基础能力的统一。 2. **强类型声明与规范**： - - **禁止 `any`**：Props 参数需使用显式联合类型，严禁使用 `any` 逃避类型检查。 - **事件命名**：对外事件统一以 `onXXX`（小驼峰）命名。 - **精简通信**：事件通信仅传递必要数据，避免携带冗余的组件实例或私有变量。 @@ -150,7 +149,6 @@ export const Button = React.forwardRef>( ### 5.4 组件防御与容灾红线 1. **防阻断式崩溃**： - - 针对入参异常、异步失败、逻辑边界等风险点，必须内置 `try-catch` 或提供兜底 UI。 - 组件内部错误不得外溢导致整个前端应用白屏死机。 diff --git a/package.json b/package.json index def1792648..823e6fc138 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,9 @@ "e2e:run:taro": "start-server-and-test dev:taro:h5 http://localhost:10086 cypress:run:taro", "e2e:open:taro": "start-server-and-test dev:taro:h5 http://localhost:10086 cypress:open:taro", "update:taro:entry": "node ./scripts/harmony/update-taro-entry", - "upgradeTaro": "pnpm --dir ./packages/nutui-taro-demo upgradeTaro" + "upgradeTaro": "pnpm --dir ./packages/nutui-taro-demo upgradeTaro", + "verify-scale": "node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs", + "verify-scale:mirror": "node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs --mirror" }, "lint-staged": { "*.{scss,md}": "prettier --write", diff --git a/packages/nutui-taro-demo/src/app.ts b/packages/nutui-taro-demo/src/app.ts index f44ee74bc2..f0db1e4eb9 100644 --- a/packages/nutui-taro-demo/src/app.ts +++ b/packages/nutui-taro-demo/src/app.ts @@ -1,4 +1,5 @@ import { Component } from 'react' +import { initScaleF } from '@/utils/scale-f' import('@/sites/assets/styles/reset.scss') import('@/packages/nutui.react.scss.taro') import('@nutui/touch-emulator') @@ -7,6 +8,17 @@ import './app.scss' // console.log(NutUI) class App extends Component { + private disposeScale?: () => void + + componentDidMount() { + // 写入 :root 的 --nut-scale-f / --nut-scale-font / --nut-scale-icon，与组件内 scale-* 一致 + this.disposeScale = initScaleF('elderly') + } + + componentWillUnmount() { + this.disposeScale?.() + } + render() { return this.props.children } diff --git a/scripts/build-taro.mjs b/scripts/build-taro.mjs index c5e78f4674..421a8708a7 100644 --- a/scripts/build-taro.mjs +++ b/scripts/build-taro.mjs @@ -7,6 +7,7 @@ import scss from 'postcss-scss' import { copy } from 'fs-extra' import { deleteAsync } from 'del' import { fileURLToPath } from 'url' +import { createRequire } from 'node:module' import { execSync } from 'child_process' import { access, mkdir, readFile, writeFile } from 'fs/promises' import { basename, dirname, extname, join, relative, resolve } from 'path' @@ -18,6 +19,8 @@ import { generate } from './build-theme-typings.mjs' const __filename = fileURLToPath(import.meta.url) const __dirname = dirname(__filename) +const require = createRequire(import.meta.url) +const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs') const dist = 'release/taro/dist' const filePath = resolve(__dirname, '../package.json') const packageJson = JSON.parse(readFileSync(filePath, 'utf8')) @@ -352,9 +355,10 @@ async function buildCSS(themeName = '') { join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`), ) for (const file of componentScssFiles) { - const scssContent = await readFile(join(__dirname, '../', file), { + let scssContent = await readFile(join(__dirname, '../', file), { encoding: 'utf8', }) + scssContent = pxToScalePxInComponentScss(scssContent) // countup 是特例 const base = basename(file) const loadPath = join( @@ -444,9 +448,10 @@ async function buildHarmonyCSS(themeName = '') { ), ) for (const file of componentScssFiles) { - const scssContent = await readFile(join(__dirname, '../', file), { + let scssContent = await readFile(join(__dirname, '../', file), { encoding: 'utf8', }) + scssContent = pxToScalePxInComponentScss(scssContent) // countup 是特例 const base = basename(file) const loadPath = join( diff --git a/scripts/build.mjs b/scripts/build.mjs index 947f1d11bd..2f366a0ee8 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -7,6 +7,7 @@ import scss from 'postcss-scss' import { copy } from 'fs-extra' import { deleteAsync } from 'del' import { fileURLToPath } from 'url' +import { createRequire } from 'node:module' import { execSync } from 'child_process' import { access, mkdir, readFile, writeFile } from 'fs/promises' import { basename, dirname, extname, join, relative, resolve } from 'path' @@ -18,6 +19,8 @@ import { generate } from './build-theme-typings.mjs' const __filename = fileURLToPath(import.meta.url) const __dirname = dirname(__filename) +const require = createRequire(import.meta.url) +const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs') const dist = 'release/h5/dist' const filePath = resolve(__dirname, '../package.json') const packageJson = JSON.parse(readFileSync(filePath, 'utf8')) @@ -301,9 +304,10 @@ async function buildCSS(themeName = '') { join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`), ) for (const file of componentScssFiles) { - const scssContent = await readFile(join(__dirname, '../', file), { + let scssContent = await readFile(join(__dirname, '../', file), { encoding: 'utf8', }) + scssContent = pxToScalePxInComponentScss(scssContent) // countup 是特例 const base = basename(file) const loadPath = join( diff --git a/scripts/generate-css-for-rtl-comparison.js b/scripts/generate-css-for-rtl-comparison.js index 1475746e4f..f985f6a039 100644 --- a/scripts/generate-css-for-rtl-comparison.js +++ b/scripts/generate-css-for-rtl-comparison.js @@ -21,6 +21,8 @@ const variables = fs.readFileSync( path.join(__dirname, '../src/styles/variables.scss') ) +const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs') + function postcssRemoveRtl() { return { postcssPlugin: 'postcss-remove-rtl', @@ -50,6 +52,7 @@ components.forEach((component) => { ) ) .toString() + content = pxToScalePxInComponentScss(content) let to = path.join( __dirname, `../src/packages/${componentName}/${componentName}.rtl.css` diff --git a/scripts/px-to-scale-px-in-component-scss.cjs b/scripts/px-to-scale-px-in-component-scss.cjs new file mode 100644 index 0000000000..f2c754a870 --- /dev/null +++ b/scripts/px-to-scale-px-in-component-scss.cjs @@ -0,0 +1,137 @@ +/** + * 仅在发布构建链路中（内存里）把组件 SCSS 声明值里的裸 Npx 转为 scale-px(Npx)， + * 与 .cursor/skills/nutui-proportional-scaling/SKILL.md 约定一致；不修改磁盘上的源文件。 + * + * 规则摘要： + * - 仅处理 Declaration，不处理 @media 等 at-rule 参数（避免断点被 scale）。 + * - 跳过 font-size、font、以及自定义属性 --*。 + * - 整段保留 scale-font-px(...) / scale-icon-px(...)；已写的 scale-px(...) 不嵌套。 + * - 数值 0 的 px → 字面量 0（不写 scale-px(0px)）。 + * - 已是 calc(Npx * var(--nut-scale-f,...)) 的不再包 scale-px。 + * - 含 Sass 变量 $ 且含除法 / 的 calc(...) 整段先占位再替换 px（避免 calc($var / 2) 被 postcss-scss 拆坏）。 + */ +const postcss = require('postcss') +const postcssScss = require('postcss-scss') + +const PROP_SKIP = new Set(['font-size', 'font']) + +function matchingCloseParen(str, openParenIdx) { + let depth = 1 + for (let i = openParenIdx + 1; i < str.length; i++) { + const c = str[i] + if (c === '(') depth++ + else if (c === ')') { + depth-- + if (depth === 0) return i + } + } + return -1 +} + +/** 最左侧的「体内不含 calc(」的 calc 块（同一层里先处理最左） */ +function findInnermostCalcRange(str) { + let best = null + let scan = 0 + const lower = str.toLowerCase() + while (true) { + const idx = lower.indexOf('calc(', scan) + if (idx === -1) break + const openParen = idx + 4 + const close = matchingCloseParen(str, openParen) + if (close < 0) { + scan = idx + 5 + continue + } + const body = str.slice(openParen + 1, close) + if (!body.toLowerCase().includes('calc(')) { + if (!best || idx < best.start) { + best = { start: idx, end: close + 1, body } + } + } + scan = idx + 5 + } + return best +} + +/** 体内同时有 $ 与 / 时整段保护（典型：calc(#{$var} / 2)） */ +function shouldProtectCalcBody(body) { + return /\$/.test(body) && /\//.test(body) +} + +function protectCalcsForPxPass(value) { + const saved = [] + let v = value + while (true) { + const m = findInnermostCalcRange(v) + if (!m) break + if (!shouldProtectCalcBody(m.body)) break + saved.push(v.slice(m.start, m.end)) + v = `${v.slice(0, m.start)}__NUT_CALC_${saved.length - 1}__${v.slice(m.end)}` + } + return { value: v, saved } +} + +function restoreCalcs(value, saved) { + let out = value + for (let i = saved.length - 1; i >= 0; i--) { + out = out.split(`__NUT_CALC_${i}__`).join(saved[i]) + } + return out +} + +function wrapBarePxInSegment(seg) { + return seg.replace( + /(-?\d*\.?\d+)px\b(?!\s*\*\s*var\(\s*--nut-scale-f)/g, + (full, numStr) => { + const n = parseFloat(numStr) + if (!Number.isFinite(n) || n === 0) return '0' + return `scale-px(${numStr}px)` + }, + ) +} + +/** 在非 scale-px(...) 段内包裸 px */ +function transformScalePxChunks(chunk) { + return chunk.split(/(\bscale-px\s*\([^)]*\))/g).map((part, i) => { + if (i % 2 === 1) return part + return wrapBarePxInSegment(part) + }).join('') +} + +function transformDeclValue(value) { + if (value == null || !/[\d.]+\s*px/i.test(value)) return value + const { value: v1, saved } = protectCalcsForPxPass(value) + let out = v1 + .split(/(\bscale-(?:font|icon)-px\s*\([^)]*\))/g) + .map((outer, oi) => { + if (oi % 2 === 1) return outer + return transformScalePxChunks(outer) + }) + .join('') + return restoreCalcs(out, saved) +} + +function pxToScalePxInComponentScssPlugin() { + return { + postcssPlugin: 'nutui-px-to-scale-px-in-component-scss', + Once(root) { + root.walkDecls((decl) => { + const prop = decl.prop.toLowerCase() + if (PROP_SKIP.has(prop)) return + if (decl.prop.startsWith('--')) return + decl.value = transformDeclValue(decl.value) + }) + }, + } +} + +function pxToScalePxInComponentScss(source) { + const result = postcss([pxToScalePxInComponentScssPlugin()]).process(source, { + from: undefined, + syntax: postcssScss, + }) + return result.css +} + +module.exports = pxToScalePxInComponentScss +module.exports.pxToScalePxInComponentScss = pxToScalePxInComponentScss diff --git a/scripts/replace-css-var.js b/scripts/replace-css-var.js index 5c7b278c42..cdbe546360 100644 --- a/scripts/replace-css-var.js +++ b/scripts/replace-css-var.js @@ -24,6 +24,8 @@ const theme = fs.readFileSync( path.join(__dirname, '../src/styles/theme-default.scss'), ).toString().replace('@import "./jd-font";', '').replace(`@import './jd-font';`, '') +const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs') + const exclude = ['icon'] components.forEach((component) => { const componentName = component.name.toLowerCase() @@ -37,6 +39,7 @@ components.forEach((component) => { ), ) .toString() + content = pxToScalePxInComponentScss(content) let to = path.join( __dirname, `../src/packages/${componentName}/${componentName}.harmony.css`, @@ -56,14 +59,18 @@ components.forEach((component) => { content = content.replace(m, '') const splitScssName = m.match(/\'\.\/([a-z]+)\.scss/) if (splitScssName && splitScssName.length == 2) { - componentSplitScss.push(fs - .readFileSync( - path.join( - __dirname, - `../src/packages/${componentName}/${splitScssName[1]}.scss`, - ), - ) - .toString()) + componentSplitScss.push( + pxToScalePxInComponentScss( + fs + .readFileSync( + path.join( + __dirname, + `../src/packages/${componentName}/${splitScssName[1]}.scss`, + ), + ) + .toString(), + ), + ) } } diff --git a/src/packages/address/address.scss b/src/packages/address/address.scss index 18fea0ecfc..e707c7252c 100644 --- a/src/packages/address/address.scss +++ b/src/packages/address/address.scss @@ -41,7 +41,7 @@ text-align: center; background: $button-primary-background-color; border-radius: 21px; - font-size: 15px; + font-size: $font-size-l; color: $color-primary-text; } } @@ -49,7 +49,7 @@ .nut-address { &-title { - font-size: 14px; + font-size: $font-size-base; font-weight: 500; padding: 16px 16px 12px 16px; } @@ -64,7 +64,7 @@ align-items: center; width: 63px; height: 28px; - font-size: 12px; + font-size: $font-size-s; border-radius: 4px; margin-bottom: 7px; /* #ifdef harmony dynamic*/ @@ -97,7 +97,7 @@ align-items: center; border-bottom: 1px solid $color-border; &-item { - font-size: 12px; + font-size: $font-size-s; display: inline-block; height: 28px; line-height: 28px; @@ -147,7 +147,7 @@ align-items: center; width: 16px; height: 16px; - font-size: 10px; + font-size: $font-size-xxs; border-radius: 16px; margin-bottom: 2px; color: $color-text-help; diff --git a/src/packages/audio/audio.scss b/src/packages/audio/audio.scss index e26ed4deb5..05b8c297a9 100644 --- a/src/packages/audio/audio.scss +++ b/src/packages/audio/audio.scss @@ -49,7 +49,7 @@ .time { min-width: 50px; - font-size: 12px; + font-size: $font-size-s; text-align: center; } diff --git a/src/packages/calendar/calendar.scss b/src/packages/calendar/calendar.scss index 3ca26a783f..e17a53a767 100644 --- a/src/packages/calendar/calendar.scss +++ b/src/packages/calendar/calendar.scss @@ -148,7 +148,7 @@ position: absolute; bottom: 5px; width: 100%; - font-size: 12px; + font-size: $font-size-s; line-height: 14px; } diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss index d9f24c8830..ccd2667370 100644 --- a/src/packages/calendarcard/calendarcard.scss +++ b/src/packages/calendarcard/calendarcard.scss @@ -11,6 +11,7 @@ align-items: center; justify-content: space-between; font-weight: normal; + line-height: $line-height-l; &-left, &-right { @@ -18,7 +19,6 @@ flex-direction: row; cursor: pointer; margin: 16px; - line-height: 1; .left { margin-left: 8px; @@ -73,7 +73,7 @@ justify-content: center; width: 100%; height: 12px; - font-size: 12px; + font-size: $font-size-s; line-height: 12px; } diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss index ba888dd854..a940cbb596 100644 --- a/src/packages/card/card.scss +++ b/src/packages/card/card.scss @@ -27,8 +27,8 @@ &-title { @include moreline-ellipsis(); - line-height: 1.5; - font-size: 14px; + line-height: $line-height-2xl; + font-size: $font-size-base; color: $color-title; } @@ -69,9 +69,9 @@ align-items: center; &-name { - line-height: 1.5; + line-height: $line-height-xl; color: $color-text; - font-size: 12px; + font-size: $font-size-s; padding-top: 4px; } } diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss index 58aa00a1a2..93d3c5ab35 100644 --- a/src/packages/checkbox/checkbox.scss +++ b/src/packages/checkbox/checkbox.scss @@ -103,10 +103,10 @@ bottom: 0; width: 0; height: 0; - border-top: 10px solid transparent; - border-left: 10px solid transparent; - border-bottom: 10px solid $color-primary; - border-right: 10px solid $color-primary; + border-top: $icon-size-10 solid transparent; + border-left: $icon-size-10 solid transparent; + border-bottom: $icon-size-10 solid $color-primary; + border-right: $icon-size-10 solid $color-primary; display: flex; align-items: flex-end; justify-content: flex-end; @@ -124,7 +124,7 @@ .nut-icon { position: absolute; - font-size: 12px; + font-size: $font-size-s; width: 12px; height: 12px; diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts index 3abbf27a8a..8709501775 100644 --- a/src/packages/configprovider/types.ts +++ b/src/packages/configprovider/types.ts @@ -54,18 +54,34 @@ export type NutCSSVariables = | 'nutuiFontSizeXxs' | 'nutuiFontSizeXs' | 'nutuiFontSizeS' + | 'nutuiFontSizeM' | 'nutuiFontSizeBase' | 'nutuiFontSizeL' + | 'nutuiFontSizeMd' | 'nutuiFontSizeIcon' | 'nutuiFontSizeXl' + | 'nutuiFontSize2Xl' | 'nutuiFontSizeXxl' | 'nutuiFontSize10' | 'nutuiFontSize11' + | 'nutuiLineHeightXxxs' + | 'nutuiLineHeightXxs' + | 'nutuiLineHeightXs' + | 'nutuiLineHeightS' + | 'nutuiLineHeightM' + | 'nutuiLineHeightBase' + | 'nutuiLineHeightL' + | 'nutuiLineHeightMd' + | 'nutuiLineHeightIcon' + | 'nutuiLineHeightXl' + | 'nutuiLineHeight2Xl' + | 'nutuiLineHeightXxl' + | 'nutuiLineHeightXxxl' + | 'nutuiLineHeightXxxxl' | 'nutuiFontWeightLight' | 'nutuiFontWeight' | 'nutuiFontWeightMedium' | 'nutuiFontWeightBold' - | 'nutuiLineHeightBase' | 'nutuiSpacingXxxs' | 'nutuiSpacingXxs' | 'nutuiSpacingXs' @@ -166,6 +182,15 @@ export type NutCSSVariables = | 'nutuiDividerSideWidth' | 'nutuiDividerVerticalHeight' | 'nutuiDividerVerticalMargin' + | 'nutuiIconSize6' + | 'nutuiIconSize8' + | 'nutuiIconSize10' + | 'nutuiIconSize11' + | 'nutuiIconSize12' + | 'nutuiIconSize16' + | 'nutuiIconSize18' + | 'nutuiIconSize20' + | 'nutuiIconSize22' | 'nutuiIconHeight' | 'nutuiIconWidth' | 'nutuiIconLineHeight' @@ -287,6 +312,12 @@ export type NutCSSVariables = | 'nutuiPriceSymbolSmallSize' | 'nutuiPriceIntegerSmallSize' | 'nutuiPriceDecimalSmallSize' + | 'nutuiPriceRootLineHeight' + | 'nutuiPriceMinorLineHeight' + | 'nutuiPriceIntegerXlargeLineHeight' + | 'nutuiPriceIntegerLargeLineHeight' + | 'nutuiPriceIntegerNormalLineHeight' + | 'nutuiPriceIntegerSmallLineHeight' | 'nutuiAvatarSquare' | 'nutuiAvatarLargeWidth' | 'nutuiAvatarLargeHeight' @@ -378,6 +409,8 @@ export type NutCSSVariables = | 'nutuiRateIconSize' | 'nutuiRateFontColor' | 'nutuiRateFontSize' + | 'nutuiRateFontSizeLarge' + | 'nutuiRateFontSizeSmall' | 'nutuiTabbarHeight' | 'nutuiTabbarActiveColor' | 'nutuiTabbarInactiveColor' diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss index 7c85ede37e..ce1b9300d4 100644 --- a/src/packages/fixednav/fixednav.scss +++ b/src/packages/fixednav/fixednav.scss @@ -74,7 +74,7 @@ color: $fixednav-color; .nut-fixednav-list-text { - font-size: 10px; + font-size: $font-size-xxs; } } diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss index d33de14b34..bb0c1dcdf9 100644 --- a/src/packages/hoverbuttonitem/hoverbuttonitem.scss +++ b/src/packages/hoverbuttonitem/hoverbuttonitem.scss @@ -28,7 +28,7 @@ display: block; width: 14px; height: 14px; - font-size: 14px; + font-size: $font-size-base; } } } @@ -44,7 +44,7 @@ display: block; width: 20px; height: 20px; - font-size: 20px; + font-size: $font-size-2xl; } } @@ -59,7 +59,7 @@ } &-text { - font-size: 10px; + font-size: $font-size-xxs; margin-top: 5px; line-height: 9px; } diff --git a/src/packages/input/input.scss b/src/packages/input/input.scss index 38fcf4928d..50cbd987f1 100644 --- a/src/packages/input/input.scss +++ b/src/packages/input/input.scss @@ -18,7 +18,7 @@ color: $color-text-disabled; width: 14px; height: 14px; - font-size: 14px; + font-size: $font-size-base; } &-container { height: 38px; diff --git a/src/packages/inputnumber/inputnumber.scss b/src/packages/inputnumber/inputnumber.scss index 7fb01dcff9..bda34176b4 100644 --- a/src/packages/inputnumber/inputnumber.scss +++ b/src/packages/inputnumber/inputnumber.scss @@ -23,8 +23,8 @@ height: $inputnumber-button-height; background-color: $inputnumber-button-background-color; .nut-icon { - --nut-icon-width: 10px; - --nut-icon-height: 10px; + width: 10px; + height: 10px; } } @@ -66,12 +66,12 @@ } &-icon-minus { - --nut-icon-width: 16px; - --nut-icon-height: 16px; + width: 16px; + height: 16px; } &-icon-plus { - --nut-icon-width: 16px; - --nut-icon-height: 16px; + width: 16px; + height: 16px; } } diff --git a/src/packages/inputnumber/inputnumber.taro.tsx b/src/packages/inputnumber/inputnumber.taro.tsx index 1a8ada7528..eb4769fb72 100644 --- a/src/packages/inputnumber/inputnumber.taro.tsx +++ b/src/packages/inputnumber/inputnumber.taro.tsx @@ -184,7 +184,6 @@ export const InputNumber: FunctionComponent< > & { if (titleIcon) return titleIcon if (icon) return icon return direction === 'up' ? ( - + ) : ( - + ) } return ( diff --git a/src/packages/menu/menu.tsx b/src/packages/menu/menu.tsx index 9296549527..3daaabf31b 100644 --- a/src/packages/menu/menu.tsx +++ b/src/packages/menu/menu.tsx @@ -137,17 +137,9 @@ export const Menu: FunctionComponent> & { if (titleIcon) return titleIcon if (icon) return icon return direction === 'up' ? ( - + ) : ( - + ) } return ( diff --git a/src/packages/menuitem/menuitem.scss b/src/packages/menuitem/menuitem.scss index 6277d7b808..ae6ca399f7 100644 --- a/src/packages/menuitem/menuitem.scss +++ b/src/packages/menuitem/menuitem.scss @@ -28,6 +28,11 @@ color: $menu-item-active-color; } + &-icon { + display: flex; + align-items: center; + } + .nut-icon { /* #ifdef dynamic*/ display: flex; diff --git a/src/packages/menuitem/menuitem.taro.tsx b/src/packages/menuitem/menuitem.taro.tsx index fb50e8ab8a..c4659bad1e 100644 --- a/src/packages/menuitem/menuitem.taro.tsx +++ b/src/packages/menuitem/menuitem.taro.tsx @@ -233,7 +233,6 @@ export const MenuItem = forwardRef((props: Partial, ref) => { ) : ( )} diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss index c6809f2718..04bbd95fb3 100644 --- a/src/packages/navbar/navbar.scss +++ b/src/packages/navbar/navbar.scss @@ -48,6 +48,7 @@ font-size: $navbar-title-font-size; font-weight: $navbar-title-font-weight; color: $navbar-title-font-color; + white-space: nowrap; &-center { max-width: 129px; @@ -72,7 +73,7 @@ .nutui-iconfont { width: 20px; height: 20px; - font-size: 20px; + font-size: $font-size-2xl; } /* #endif */ diff --git a/src/packages/noticebar/noticebar.scss b/src/packages/noticebar/noticebar.scss index 4c98dc203b..ca406526d2 100644 --- a/src/packages/noticebar/noticebar.scss +++ b/src/packages/noticebar/noticebar.scss @@ -74,6 +74,11 @@ } } + &-right-icon-default { + width: $icon-size-12; + height: $icon-size-12; + } + &-wrap { display: flex; flex: 1; diff --git a/src/packages/noticebar/noticebar.taro.tsx b/src/packages/noticebar/noticebar.taro.tsx index 93f479a1ae..ac9acb7d87 100644 --- a/src/packages/noticebar/noticebar.taro.tsx +++ b/src/packages/noticebar/noticebar.taro.tsx @@ -26,7 +26,7 @@ const defaultProps = { content: '', closeable: false, wrap: false, - leftIcon: , + leftIcon: , rightIcon: null, right: null, delay: 1, @@ -490,7 +490,9 @@ export const NoticeBar: FunctionComponent< className="nut-noticebar-box-right-icon" onClick={handleClickIcon} > - {rightIcon || } + {rightIcon || ( + + )} ) : null} diff --git a/src/packages/noticebar/noticebar.tsx b/src/packages/noticebar/noticebar.tsx index a371e56538..ccf99c42c5 100644 --- a/src/packages/noticebar/noticebar.tsx +++ b/src/packages/noticebar/noticebar.tsx @@ -24,7 +24,7 @@ const defaultProps = { content: '', closeable: false, wrap: false, - leftIcon: , + leftIcon: , rightIcon: null, right: null, delay: 1, @@ -475,7 +475,9 @@ export const NoticeBar: FunctionComponent< ) : null} {closeable || rightIcon ? (
- {rightIcon || } + {rightIcon || ( + + )}
) : null} @@ -534,7 +536,10 @@ export const NoticeBar: FunctionComponent< handleClickIcon(e) }} > - {rightIcon || (closeable ? : null)} + {rightIcon || + (closeable ? ( + + ) : null)} ) : null} diff --git a/src/packages/notify/notify.scss b/src/packages/notify/notify.scss index 9c7bf6e5a4..56937a7dd3 100644 --- a/src/packages/notify/notify.scss +++ b/src/packages/notify/notify.scss @@ -98,4 +98,9 @@ width: 12px; } } + + &-close-icon { + height: $icon-size-12; + width: $icon-size-12; + } } diff --git a/src/packages/notify/notify.taro.tsx b/src/packages/notify/notify.taro.tsx index 4b1e62df97..33ab4eed87 100644 --- a/src/packages/notify/notify.taro.tsx +++ b/src/packages/notify/notify.taro.tsx @@ -142,7 +142,10 @@ export const Notify: FunctionComponent> & { className={`${classPrefix}-right-icon`} onClick={handleClickIcon} > - {rightIcon || (closeable ? : null)} + {rightIcon || + (closeable ? ( + + ) : null)} ) : null} diff --git a/src/packages/numberkeyboard/numberkeyboard.scss b/src/packages/numberkeyboard/numberkeyboard.scss index 82f922c5bd..089c1085ad 100644 --- a/src/packages/numberkeyboard/numberkeyboard.scss +++ b/src/packages/numberkeyboard/numberkeyboard.scss @@ -1,6 +1,16 @@ @import '../popup/popup.scss'; .nut-numberkeyboard { + &-close-icon { + width: $icon-size-18; + height: $icon-size-18; + } + + &-delete-icon { + width: 28px; + height: 28px; + } + width: 100%; padding: $numberkeyboard-padding; user-select: none; diff --git a/src/packages/numberkeyboard/numberkeyboard.taro.tsx b/src/packages/numberkeyboard/numberkeyboard.taro.tsx index 347e8644a5..4b433c6f93 100644 --- a/src/packages/numberkeyboard/numberkeyboard.taro.tsx +++ b/src/packages/numberkeyboard/numberkeyboard.taro.tsx @@ -115,7 +115,7 @@ export const NumberKeyboard: FunctionComponent< case 'delete': return case 'close': - return + return case 'confirm': return <>{confirmText || locale.done} default: diff --git a/src/packages/numberkeyboard/numberkeyboard.tsx b/src/packages/numberkeyboard/numberkeyboard.tsx index 272d3418e2..7c6969967e 100644 --- a/src/packages/numberkeyboard/numberkeyboard.tsx +++ b/src/packages/numberkeyboard/numberkeyboard.tsx @@ -71,7 +71,7 @@ export const NumberKeyboard: FunctionComponent< const DeleteIcon = () => { return ( - + case 'close': - return + return case 'confirm': return <>{confirmText || locale.done} default: diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss index f51fdeaa0e..20081f9612 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -12,6 +12,8 @@ .nut-icon-ArrowRadius { position: absolute; color: $popover-content-background-color; + width: 8px; + height: 4px; } &-top { diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx index 51c0f83b18..0a26fdb272 100644 --- a/src/packages/popover/popover.taro.tsx +++ b/src/packages/popover/popover.taro.tsx @@ -265,7 +265,7 @@ export const Popover: FunctionComponent< {showArrow && ( - + )} {Array.isArray(children) ? children[1] : null} diff --git a/src/packages/popover/popover.tsx b/src/packages/popover/popover.tsx index 24c17f6eb0..e95789ec6c 100644 --- a/src/packages/popover/popover.tsx +++ b/src/packages/popover/popover.tsx @@ -293,7 +293,7 @@ export const Popover: FunctionComponent< > {showArrow && (
- +
)} {Array.isArray(children) ? children[1] : null} diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss index abcf55c7fe..cfa9ddd001 100644 --- a/src/packages/popup/popup.scss +++ b/src/packages/popup/popup.scss @@ -49,7 +49,9 @@ position: absolute; top: $popup-title-padding; right: $popup-title-padding; - + display: flex; + align-items: center; + justify-content: center; z-index: 1; width: $popup-icon-size; height: $popup-icon-size; diff --git a/src/packages/price/price.scss b/src/packages/price/price.scss index a0cd0b824f..5535cd8711 100644 --- a/src/packages/price/price.scss +++ b/src/packages/price/price.scss @@ -1,6 +1,7 @@ .nut-price { direction: ltr; font-size: $font-size-l; + line-height: $price-root-line-height; display: flex; flex-direction: row; align-items: baseline; @@ -10,7 +11,6 @@ &-decimal { color: $price-color; font-family: 'JDZH-Bold'; - line-height: 1; } &-darkgray { @@ -18,7 +18,6 @@ &-symbol, &-integer, &-decimal { - font-family: 'JDZH-Bold'; color: $price-darkgray-color; } } @@ -29,7 +28,6 @@ &-symbol, &-integer, &-decimal { - font-family: 'JDZH-Bold'; color: $price-primary-color; } } @@ -39,18 +37,22 @@ padding-right: $price-symbol-padding-right; &-xlarge { font-size: $price-symbol-xlarge-size; + line-height: $price-minor-line-height; } &-large { font-size: $price-symbol-large-size; + line-height: $price-minor-line-height; } &-normal { font-size: $price-symbol-normal-size; + line-height: $price-minor-line-height; } &-small { font-size: $price-symbol-small-size; + line-height: $price-minor-line-height; } &-rtl { @@ -62,45 +64,44 @@ &-integer { &-xlarge { font-size: $price-integer-xlarge-size; - /* #ifdef dynamic */ - line-height: $price-integer-xlarge-size; - /* #endif */ + line-height: $price-integer-xlarge-line-height; } &-large { font-size: $price-integer-large-size; - /* #ifdef dynamic */ - line-height: $price-integer-large-size; - /* #endif */ + line-height: $price-integer-large-line-height; } &-normal { font-size: $price-integer-normal-size; - /* #ifdef dynamic */ - line-height: $price-integer-normal-size; - /* #endif */ + line-height: $price-integer-normal-line-height; } &-small { font-size: $price-integer-small-size; + line-height: $price-integer-small-line-height; } } &-decimal { &-xlarge { font-size: $price-decimal-xlarge-size; + line-height: $price-minor-line-height; } &-large { font-size: $price-decimal-large-size; + line-height: $price-minor-line-height; } &-normal { font-size: $price-decimal-normal-size; + line-height: $price-minor-line-height; } &-small { font-size: $price-decimal-small-size; + line-height: $price-minor-line-height; } } diff --git a/src/packages/pulltorefresh/pulltorefresh.scss b/src/packages/pulltorefresh/pulltorefresh.scss index 7a16567fcb..9710b3429b 100644 --- a/src/packages/pulltorefresh/pulltorefresh.scss +++ b/src/packages/pulltorefresh/pulltorefresh.scss @@ -2,7 +2,7 @@ &-head { overflow: hidden; position: relative; - font-size: 12px; + font-size: $font-size-s; &-content { position: absolute; diff --git a/src/packages/quickenter/quickenter.scss b/src/packages/quickenter/quickenter.scss index 02da8b9257..66983ef493 100644 --- a/src/packages/quickenter/quickenter.scss +++ b/src/packages/quickenter/quickenter.scss @@ -3,7 +3,7 @@ .nut-quickenter { width: 100%; /* 限制弹层最大高度，包含安全区 */ - max-height: calc(#{$quickenter-max-height} + env(safe-area-inset-top, 0)); + max-height: calc($quickenter-max-height + env(safe-area-inset-top, 0px)); background: $quickenter-bg-color; border-radius: 0 0 12px 12px; overflow: hidden; @@ -101,8 +101,8 @@ svg, .nut-icon { - width: 22px; - height: 22px; + width: $icon-size-22; + height: $icon-size-22; } } @@ -110,7 +110,7 @@ font-size: $quickenter-item-title-font-size; color: $quickenter-item-title-color; text-align: center; - line-height: 1.4; + line-height: $line-height-md; // Allow multi-line if text is long, preventing truncation white-space: normal; word-wrap: break-word; diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss index cd9f42dcc9..adc282be67 100644 --- a/src/packages/range/range.scss +++ b/src/packages/range/range.scss @@ -146,7 +146,7 @@ &-mark-text { position: absolute; line-height: 16px; - font-size: 12px; + font-size: $font-size-s; color: #999; text-align: center; word-break: keep-all; @@ -214,7 +214,7 @@ top: 0px; right: 50%; overflow: visible; - font-size: 12px; + font-size: $font-size-s; padding: 0px; } diff --git a/src/packages/rate/rate.scss b/src/packages/rate/rate.scss index 7737e20d80..319f5d60da 100644 --- a/src/packages/rate/rate.scss +++ b/src/packages/rate/rate.scss @@ -106,20 +106,22 @@ align-items: center; color: $rate-font-color; font-family: 'JDZH-Regular'; - line-height: 1; &-normal { padding-left: $rate-item-margin; font-size: $rate-font-size; + line-height: $line-height-s; } &-large { - font-size: calc($rate-font-size + 6px); + font-size: $rate-font-size-large; + line-height: $line-height-xl; padding-left: calc($rate-item-margin * 2); } &-small { - font-size: calc($rate-font-size - 2px); + font-size: $rate-font-size-small; + line-height: $line-height-xxs; padding-left: calc($rate-item-margin / 2); } diff --git a/src/packages/searchbar/demos/h5/demo6.tsx b/src/packages/searchbar/demos/h5/demo6.tsx index 355b15a6fe..cea6358d91 100644 --- a/src/packages/searchbar/demos/h5/demo6.tsx +++ b/src/packages/searchbar/demos/h5/demo6.tsx @@ -20,7 +20,14 @@ const Demo6 = () => { }} list={itemList} > -
+
更多
diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss index cb7fe1286b..a3b8482372 100644 --- a/src/packages/searchbar/searchbar.scss +++ b/src/packages/searchbar/searchbar.scss @@ -40,7 +40,7 @@ } &-rightin { - font-size: 15px; + font-size: $font-size-l; font-weight: 500; color: $color-primary; @@ -74,8 +74,8 @@ &.nut-searchbar-icon { position: relative; .nut-icon { - width: 12px; - height: 12px; + width: $icon-size-12; + height: $icon-size-12; color: var(--nutui-black-5); margin-right: $searchbar-inner-gap; } @@ -97,7 +97,7 @@ background-color: #fff; top: 9px; left: 6px; - font-size: 12px; + font-size: $font-size-s; line-height: 12px; .nut-searchbar-value { @@ -111,9 +111,9 @@ } .nut-icon { - width: 6px; - height: 6px; - font-size: 6px; + width: $icon-size-6; + height: $icon-size-6; + font-size: $icon-size-6; color: #c2c4cc; margin-left: 4px; } diff --git a/src/packages/segmented/segmented.scss b/src/packages/segmented/segmented.scss index b5be3bb3a7..373976ce8d 100644 --- a/src/packages/segmented/segmented.scss +++ b/src/packages/segmented/segmented.scss @@ -23,7 +23,7 @@ border-radius: $segmented-item-radius; color: $segmented-item-color; font-size: $segmented-item-fontsize; - line-height: 1; + line-height: $line-height-s; box-sizing: border-box; } @@ -32,12 +32,14 @@ } .nut-segmented-icon { + display: flex; + align-items: center; height: 10px; width: 10px; margin-right: $segmented-icon-margin-right; .nut-icon { height: 10px; width: 10px; - font-size: 10px; + font-size: $font-size-xxs; } } diff --git a/src/packages/shortpassword/shortpassword.scss b/src/packages/shortpassword/shortpassword.scss index c2cbeb997d..04a13eb785 100644 --- a/src/packages/shortpassword/shortpassword.scss +++ b/src/packages/shortpassword/shortpassword.scss @@ -10,7 +10,7 @@ &-title { display: flex; justify-content: center; - line-height: 1; + line-height: $line-height-l; font-size: $font-size-l; color: $color-title; } @@ -20,7 +20,7 @@ justify-content: center; margin-top: 12px; margin-bottom: 24px; - line-height: 1; + line-height: $line-height-s; font-size: $font-size-s; color: $color-text; } @@ -85,13 +85,13 @@ width: 247px; &-error { - line-height: 1; + line-height: $line-height-xs; font-size: $font-size-xs; color: $shortpassword-error; } &-forget { - line-height: 1; + line-height: $line-height-s; font-size: $font-size-s; color: $shortpassword-forget; display: flex; @@ -101,6 +101,11 @@ margin-right: 3px; } } + + &-tips-icon { + width: $icon-size-11; + height: $icon-size-11; + } } &-footer { @@ -113,7 +118,7 @@ border: 1px solid $color-primary; border-radius: 15px; padding: 8px 38px; - line-height: 1; + line-height: $line-height-base; font-size: $font-size-base; color: $color-primary; } @@ -126,7 +131,7 @@ ); border-radius: 15px; padding: 8px 38px; - line-height: 1; + line-height: $line-height-base; font-size: $font-size-base; color: $color-primary-text; } diff --git a/src/packages/shortpassword/shortpassword.taro.tsx b/src/packages/shortpassword/shortpassword.taro.tsx index a22528970b..f86b013206 100644 --- a/src/packages/shortpassword/shortpassword.taro.tsx +++ b/src/packages/shortpassword/shortpassword.taro.tsx @@ -142,7 +142,7 @@ export const InternalShortPassword: ForwardRefRenderFunction< {tips || ( <> - + {locale.shortpassword.tips} )} diff --git a/src/packages/shortpassword/shortpassword.tsx b/src/packages/shortpassword/shortpassword.tsx index 4e7cc02da5..0873a87ace 100644 --- a/src/packages/shortpassword/shortpassword.tsx +++ b/src/packages/shortpassword/shortpassword.tsx @@ -141,7 +141,7 @@ export const InternalShortPassword: ForwardRefRenderFunction<
{tips || ( <> - + {locale.shortpassword.tips} )} diff --git a/src/packages/space/space.scss b/src/packages/space/space.scss index 9fba1b8b6b..9203872639 100644 --- a/src/packages/space/space.scss +++ b/src/packages/space/space.scss @@ -30,7 +30,7 @@ &-wrap { flex-wrap: wrap; - margin-bottom: calc(#{$space-gap} * -1); + margin-bottom: calc($space-gap * -1); &-item { padding-bottom: $space-gap; diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss index df168de948..f8b782772f 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -90,7 +90,6 @@ line-height: 14px; font-size: $steps-base-title-font-size; color: $steps-base-title-color; - overflow: hidden; white-space: nowrap; } diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss index 993c6a878c..c5ec372adc 100644 --- a/src/packages/steps/steps.scss +++ b/src/packages/steps/steps.scss @@ -13,8 +13,8 @@ &-icon { .nut-icon { - height: 10px; - width: 10px; + height: $icon-size-10; + width: $icon-size-10; } .nut-image { @@ -108,6 +108,7 @@ flex-direction: column; align-items: center; flex: 1; + min-width: 0; &-line { top: 0; @@ -130,7 +131,7 @@ &-head { justify-content: center; - margin-bottom: 6px; + margin-bottom: 5px; &-dot-wrap, &-icon-wrap, @@ -145,15 +146,22 @@ width: $steps-double-head-icon-size; .nut-icon { - height: 12px; - width: 12px; + height: $icon-size-12; + width: $icon-size-12; } } &-main { align-items: center; margin-left: 0; - margin-top: 2px; + } + + &-title { + height: auto; + line-height: 20px; + white-space: normal; + overflow-wrap: break-word; + text-align: center; } } @@ -214,15 +222,15 @@ &-head { align-items: center; justify-content: center; - height: 18px; + height: 20px; &-icon { width: $steps-vertical-head-icon-size; height: $steps-vertical-head-icon-size; .nut-icon { - height: 12px; - width: 12px; + height: $icon-size-12; + width: $icon-size-12; } } } diff --git a/src/packages/swipe/demos/h5/demo1.tsx b/src/packages/swipe/demos/h5/demo1.tsx index 97115480dd..1ac6ff0b30 100644 --- a/src/packages/swipe/demos/h5/demo1.tsx +++ b/src/packages/swipe/demos/h5/demo1.tsx @@ -9,7 +9,7 @@ const App = () => { diff --git a/src/packages/swipe/demos/h5/demo3.tsx b/src/packages/swipe/demos/h5/demo3.tsx index 656f22d57a..eb2c3a3e03 100644 --- a/src/packages/swipe/demos/h5/demo3.tsx +++ b/src/packages/swipe/demos/h5/demo3.tsx @@ -12,7 +12,7 @@ const App = () => { diff --git a/src/packages/swipe/demos/h5/demo4.tsx b/src/packages/swipe/demos/h5/demo4.tsx index 8e438d040e..9d129438e3 100644 --- a/src/packages/swipe/demos/h5/demo4.tsx +++ b/src/packages/swipe/demos/h5/demo4.tsx @@ -11,7 +11,7 @@ const App = () => { diff --git a/src/packages/swipe/demos/h5/demo5.tsx b/src/packages/swipe/demos/h5/demo5.tsx index a81693e073..7afe6ac52f 100644 --- a/src/packages/swipe/demos/h5/demo5.tsx +++ b/src/packages/swipe/demos/h5/demo5.tsx @@ -11,7 +11,7 @@ const App = () => { diff --git a/src/packages/swipe/demos/h5/demo6.tsx b/src/packages/swipe/demos/h5/demo6.tsx index 3815adce7a..504efbbb12 100644 --- a/src/packages/swipe/demos/h5/demo6.tsx +++ b/src/packages/swipe/demos/h5/demo6.tsx @@ -9,7 +9,7 @@ const App = () => { diff --git a/src/packages/swipe/demos/h5/demo7.tsx b/src/packages/swipe/demos/h5/demo7.tsx index 8fcdb5eb11..c83ca63569 100644 --- a/src/packages/swipe/demos/h5/demo7.tsx +++ b/src/packages/swipe/demos/h5/demo7.tsx @@ -14,7 +14,7 @@ const App = () => { type="success" style={{ alignSelf: 'stretch', - height: 46, + height: '100%', }} > 选择 @@ -25,14 +25,14 @@ const App = () => { diff --git a/src/packages/swipe/demos/h5/demo8.tsx b/src/packages/swipe/demos/h5/demo8.tsx index 64759e4f61..9cbfc5688e 100644 --- a/src/packages/swipe/demos/h5/demo8.tsx +++ b/src/packages/swipe/demos/h5/demo8.tsx @@ -19,7 +19,7 @@ const App = () => { @@ -29,7 +29,7 @@ const App = () => { diff --git a/src/packages/swipe/demos/h5/demo9.tsx b/src/packages/swipe/demos/h5/demo9.tsx index f35de4bd9f..8a35a72b43 100644 --- a/src/packages/swipe/demos/h5/demo9.tsx +++ b/src/packages/swipe/demos/h5/demo9.tsx @@ -10,7 +10,7 @@ const App = () => { diff --git a/src/packages/swipe/swipe.scss b/src/packages/swipe/swipe.scss index 7e4c86211c..4621183833 100644 --- a/src/packages/swipe/swipe.scss +++ b/src/packages/swipe/swipe.scss @@ -31,7 +31,9 @@ } &-right { + display: flex; //left: 100%; + height: 100%; right: 0px; transform: translate(100%, 0px); } diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss index aed7942448..193c5d204d 100644 --- a/src/packages/tabbar/tabbar.scss +++ b/src/packages/tabbar/tabbar.scss @@ -31,7 +31,7 @@ } .nut-tabbar-item-text { margin: 0 4px 0 6px; - font-size: 14px; + font-size: $font-size-base; } .nut-badge-sup { &::after { diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss index 74a2c6028d..40acfe77ab 100644 --- a/src/packages/tabbaritem/tabbaritem.scss +++ b/src/packages/tabbaritem/tabbaritem.scss @@ -12,7 +12,7 @@ .nut-icon { width: 24px; height: 24px; - font-size: 24px; + font-size: $font-size-xxl; /* #ifdef harmony dynamic*/ color: $tabbar-inactive-color; /* #endif*/ diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss index 82ca0a560b..a98beb4e36 100644 --- a/src/packages/tabs/tabs.scss +++ b/src/packages/tabs/tabs.scss @@ -93,12 +93,17 @@ .nut-icon { position: absolute; - font-size: 20px; + font-size: $font-size-2xl; width: 100%; height: 100%; } } + &-smile-icon { + width: 40px; + height: 20px; + } + &-active { .nut-icon { color: $tabs-titles-item-active-color; diff --git a/src/packages/tabs/tabs.taro.tsx b/src/packages/tabs/tabs.taro.tsx index d5edb93b94..f30e38754d 100644 --- a/src/packages/tabs/tabs.taro.tsx +++ b/src/packages/tabs/tabs.taro.tsx @@ -282,7 +282,10 @@ export const Tabs: FunctionComponent> & { // @ts-ignore ariaHidden > - + )} > & { className={`${classPrefix}-titles-item-smile`} aria-hidden="true" > - +
)}
> = (props) => { ) : ( { setVisible(false) onClose && onClose(e as any) diff --git a/src/packages/tag/tag.tsx b/src/packages/tag/tag.tsx index f4798fe18d..d86292335d 100644 --- a/src/packages/tag/tag.tsx +++ b/src/packages/tag/tag.tsx @@ -104,8 +104,7 @@ export const Tag: FunctionComponent> = (props) => { ) : ( { setVisible(false) onClose && onClose(e) diff --git a/src/packages/timeselect/timeselect.scss b/src/packages/timeselect/timeselect.scss index c9b761f350..4cb47454eb 100644 --- a/src/packages/timeselect/timeselect.scss +++ b/src/packages/timeselect/timeselect.scss @@ -13,7 +13,7 @@ } &-content-left { - width: $timeselect-date-width; + // width: $timeselect-date-width; min-width: $timeselect-date-width; height: 100%; /* #ifndef dynamic*/ diff --git a/src/packages/tour/tour.scss b/src/packages/tour/tour.scss index d04045f95d..5b81ad72bb 100644 --- a/src/packages/tour/tour.scss +++ b/src/packages/tour/tour.scss @@ -29,8 +29,8 @@ text-align: end; &-close { - --nut-icon-width: 10px; - --nut-icon-height: 10px; + width: 10px; + height: 10px; } } diff --git a/src/packages/uploader/uploader.scss b/src/packages/uploader/uploader.scss index 259dbc7cec..6c9a4097cf 100644 --- a/src/packages/uploader/uploader.scss +++ b/src/packages/uploader/uploader.scss @@ -95,7 +95,7 @@ &-msg { color: $color-text-help; - font-size: 12px; + font-size: $font-size-s; } } @@ -161,7 +161,7 @@ position: absolute; bottom: 0; left: 0; - font-size: 12px; + font-size: $font-size-s; color: $white; text-align: center; box-sizing: border-box; @@ -197,7 +197,7 @@ &-name { display: flex; width: 90%; - font-size: 12px; + font-size: $font-size-s; color: $color-text; @include moreline-ellipsis(); diff --git a/src/packages/virtuallist/virtuallist.scss b/src/packages/virtuallist/virtuallist.scss index 71605201dd..857f7829ca 100644 --- a/src/packages/virtuallist/virtuallist.scss +++ b/src/packages/virtuallist/virtuallist.scss @@ -27,7 +27,7 @@ box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1); margin-top: 20px; padding: 14px 15px; - font-size: 13px; + font-size: $font-size-m; line-height: 18px; font-family: PingFangSC; font-weight: 500; diff --git a/src/sites/mobile/main.tsx b/src/sites/mobile/main.tsx index 148d98c441..f83d6b6859 100644 --- a/src/sites/mobile/main.tsx +++ b/src/sites/mobile/main.tsx @@ -3,6 +3,7 @@ import * as ReactDOM from 'react-dom/client' import App from './App' import '@nutui/touch-emulator' // 适配 h5 示例桌面端预览 import { isMobile } from '@/sites/assets/util' +import { initScaleF } from '@/utils/scale-f' import('../../packages/nutui.react.scss') const projectID = import.meta.env.VITE_APP_PROJECT_ID || '' @@ -28,6 +29,7 @@ if (!isMobile && pathname.includes('demo') && !pathname.includes('jmapp')) { } if (rootElement != null) { + initScaleF('elderly') const root = ReactDOM.createRoot(rootElement) root.render() } diff --git a/src/styles/theme-dark.scss b/src/styles/theme-dark.scss index ad8ff1248f..934a2e263a 100644 --- a/src/styles/theme-dark.scss +++ b/src/styles/theme-dark.scss @@ -228,25 +228,59 @@ page { --nutui-color-border-disabled: var(--nutui-color-content-gray-1); // 字体 ok - --nutui-font-size-8: 8px; - --nutui-font-size-9: 9px; - --nutui-font-size-10: 10px; - --nutui-font-size-11: 11px; - --nutui-font-size-12: 12px; - --nutui-font-size-13: 13px; - --nutui-font-size-14: 14px; - --nutui-font-size-15: 15px; - --nutui-font-size-16: 16px; - --nutui-font-size-17: 17px; - --nutui-font-size-18: 18px; - --nutui-font-size-19: 19px; - --nutui-font-size-20: 20px; - --nutui-font-size-21: 21px; - --nutui-font-size-22: 22px; - --nutui-font-size-23: 23px; - --nutui-font-size-24: 24px; - --nutui-font-size-25: 25px; - --nutui-font-size-26: 26px; + --nutui-font-size-8: calc(8px * var(--nut-scale-font, var(--nut-scale-f, 1))); + --nutui-font-size-9: calc(9px * var(--nut-scale-font, var(--nut-scale-f, 1))); + --nutui-font-size-10: calc( + 10px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-11: calc( + 11px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-12: calc( + 12px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-13: calc( + 13px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-14: calc( + 14px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-15: calc( + 15px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-16: calc( + 16px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-17: calc( + 17px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-18: calc( + 18px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-19: calc( + 19px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-20: calc( + 20px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-21: calc( + 21px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-22: calc( + 22px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-23: calc( + 23px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-24: calc( + 24px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-25: calc( + 25px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-26: calc( + 26px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); // 字号语义化 // 徽标文字 @@ -257,12 +291,18 @@ page { --nutui-font-size-xs: var(--nutui-font-size-11); // 汉字：次要内容、辅助类信息 数字：羊角符号、小数点及角分 --nutui-font-size-s: var(--nutui-font-size-12); + --nutui-font-size-m: var(--nutui-font-size-13); // 标准内容、名称类关键信息 --nutui-font-size-base: var(--nutui-font-size-14); // 汉字：楼层标题、卡片标题 数字：重复型价格，如搜推商卡 --nutui-font-size-l: var(--nutui-font-size-16); + // 16px 字阶（与 l 同档数值，供 --nutui-font-size-md 语义） + --nutui-font-size-md: var(--nutui-font-size-16); + --nutui-font-size-icon: var(--nutui-font-size-16); // 汉字：页面标题、页面级最重要内容 数字：模块级主价格，如购物车、结算、底导 --nutui-font-size-xl: var(--nutui-font-size-18); + // xl(18) 与 xxl(24) 之间（20px） + --nutui-font-size-2xl: var(--nutui-font-size-20); // 数字：页面级主价格，如商详、收银台 --nutui-font-size-xxl: var(--nutui-font-size-24); // zanwu @@ -277,28 +317,40 @@ page { --nutui-font-weight-bold: 600; // 行高 - --nutui-line-height-base: 1.5; + --nutui-line-height-xxxs: var(--nutui-font-size-xxxs); + --nutui-line-height-xxs: var(--nutui-font-size-xxs); + --nutui-line-height-xs: var(--nutui-font-size-xs); + --nutui-line-height-s: var(--nutui-font-size-s); + --nutui-line-height-m: var(--nutui-font-size-m); + --nutui-line-height-base: var(--nutui-font-size-base); + --nutui-line-height-l: var(--nutui-font-size-l); + --nutui-line-height-md: var(--nutui-font-size-md); + --nutui-line-height-icon: var(--nutui-font-size-icon); + --nutui-line-height-xl: var(--nutui-font-size-xl); + --nutui-line-height-2xl: var(--nutui-font-size-2xl); + --nutui-line-height-xxl: var(--nutui-font-size-xxl); + --nutui-line-height-xxxl: var(--nutui-font-size-xxxl); // 对齐方式 --nutui-text-align: left; // space - --nutui-spacing-1: 1px; - --nutui-spacing-2: 2px; - --nutui-spacing-3: 3px; - --nutui-spacing-4: 4px; - --nutui-spacing-5: 5px; - --nutui-spacing-6: 6px; - --nutui-spacing-7: 7px; - --nutui-spacing-8: 8px; - --nutui-spacing-9: 9px; - --nutui-spacing-10: 10px; - --nutui-spacing-11: 11px; - --nutui-spacing-12: 12px; - --nutui-spacing-13: 13px; - --nutui-spacing-14: 14px; - --nutui-spacing-15: 15px; - --nutui-spacing-16: 16px; + --nutui-spacing-1: calc(1px * var(--nut-scale-f, 1)); + --nutui-spacing-2: calc(2px * var(--nut-scale-f, 1)); + --nutui-spacing-3: calc(3px * var(--nut-scale-f, 1)); + --nutui-spacing-4: calc(4px * var(--nut-scale-f, 1)); + --nutui-spacing-5: calc(5px * var(--nut-scale-f, 1)); + --nutui-spacing-6: calc(6px * var(--nut-scale-f, 1)); + --nutui-spacing-7: calc(7px * var(--nut-scale-f, 1)); + --nutui-spacing-8: calc(8px * var(--nut-scale-f, 1)); + --nutui-spacing-9: calc(9px * var(--nut-scale-f, 1)); + --nutui-spacing-10: calc(10px * var(--nut-scale-f, 1)); + --nutui-spacing-11: calc(11px * var(--nut-scale-f, 1)); + --nutui-spacing-12: calc(12px * var(--nut-scale-f, 1)); + --nutui-spacing-13: calc(13px * var(--nut-scale-f, 1)); + --nutui-spacing-14: calc(14px * var(--nut-scale-f, 1)); + --nutui-spacing-15: calc(15px * var(--nut-scale-f, 1)); + --nutui-spacing-16: calc(16px * var(--nut-scale-f, 1)); // space 语义化 // 狭小空间内的紧密关联内容 @@ -320,30 +372,30 @@ page { // radius ok --nutui-radius-0: 0px; - --nutui-radius-1: 1px; - --nutui-radius-2: 2px; - --nutui-radius-3: 3px; - --nutui-radius-4: 4px; - --nutui-radius-5: 5px; - --nutui-radius-6: 6px; - --nutui-radius-7: 7px; - --nutui-radius-8: 8px; - --nutui-radius-9: 9px; - --nutui-radius-10: 10px; - --nutui-radius-11: 11px; - --nutui-radius-12: 12px; - --nutui-radius-13: 13px; - --nutui-radius-14: 14px; - --nutui-radius-15: 15px; - --nutui-radius-16: 16px; - --nutui-radius-17: 17px; - --nutui-radius-18: 18px; - --nutui-radius-19: 19px; - --nutui-radius-20: 20px; - --nutui-radius-21: 21px; - --nutui-radius-22: 22px; - --nutui-radius-23: 23px; - --nutui-radius-24: 24px; + --nutui-radius-1: calc(1px * var(--nut-scale-f, 1)); + --nutui-radius-2: calc(2px * var(--nut-scale-f, 1)); + --nutui-radius-3: calc(3px * var(--nut-scale-f, 1)); + --nutui-radius-4: calc(4px * var(--nut-scale-f, 1)); + --nutui-radius-5: calc(5px * var(--nut-scale-f, 1)); + --nutui-radius-6: calc(6px * var(--nut-scale-f, 1)); + --nutui-radius-7: calc(7px * var(--nut-scale-f, 1)); + --nutui-radius-8: calc(8px * var(--nut-scale-f, 1)); + --nutui-radius-9: calc(9px * var(--nut-scale-f, 1)); + --nutui-radius-10: calc(10px * var(--nut-scale-f, 1)); + --nutui-radius-11: calc(11px * var(--nut-scale-f, 1)); + --nutui-radius-12: calc(12px * var(--nut-scale-f, 1)); + --nutui-radius-13: calc(13px * var(--nut-scale-f, 1)); + --nutui-radius-14: calc(14px * var(--nut-scale-f, 1)); + --nutui-radius-15: calc(15px * var(--nut-scale-f, 1)); + --nutui-radius-16: calc(16px * var(--nut-scale-f, 1)); + --nutui-radius-17: calc(17px * var(--nut-scale-f, 1)); + --nutui-radius-18: calc(18px * var(--nut-scale-f, 1)); + --nutui-radius-19: calc(19px * var(--nut-scale-f, 1)); + --nutui-radius-20: calc(20px * var(--nut-scale-f, 1)); + --nutui-radius-21: calc(21px * var(--nut-scale-f, 1)); + --nutui-radius-22: calc(22px * var(--nut-scale-f, 1)); + --nutui-radius-23: calc(23px * var(--nut-scale-f, 1)); + --nutui-radius-24: calc(24px * var(--nut-scale-f, 1)); // radius 语义化 // 内容描述型的详情页面通栏结构 diff --git a/src/styles/theme-default.scss b/src/styles/theme-default.scss index aa5d69a673..118f158f1f 100644 --- a/src/styles/theme-default.scss +++ b/src/styles/theme-default.scss @@ -227,25 +227,59 @@ page { --nutui-color-border-disabled: var(--nutui-color-content-gray-1); // 字体 ok - --nutui-font-size-8: 8px; - --nutui-font-size-9: 9px; - --nutui-font-size-10: 10px; - --nutui-font-size-11: 11px; - --nutui-font-size-12: 12px; - --nutui-font-size-13: 13px; - --nutui-font-size-14: 14px; - --nutui-font-size-15: 15px; - --nutui-font-size-16: 16px; - --nutui-font-size-17: 17px; - --nutui-font-size-18: 18px; - --nutui-font-size-19: 19px; - --nutui-font-size-20: 20px; - --nutui-font-size-21: 21px; - --nutui-font-size-22: 22px; - --nutui-font-size-23: 23px; - --nutui-font-size-24: 24px; - --nutui-font-size-25: 25px; - --nutui-font-size-26: 26px; + --nutui-font-size-8: calc(8px * var(--nut-scale-font, var(--nut-scale-f, 1))); + --nutui-font-size-9: calc(9px * var(--nut-scale-font, var(--nut-scale-f, 1))); + --nutui-font-size-10: calc( + 10px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-11: calc( + 11px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-12: calc( + 12px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-13: calc( + 13px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-14: calc( + 14px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-15: calc( + 15px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-16: calc( + 16px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-17: calc( + 17px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-18: calc( + 18px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-19: calc( + 19px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-20: calc( + 20px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-21: calc( + 21px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-22: calc( + 22px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-23: calc( + 23px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-24: calc( + 24px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-25: calc( + 25px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-26: calc( + 26px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); // 字号语义化 // 徽标文字 @@ -256,13 +290,18 @@ page { --nutui-font-size-xs: var(--nutui-font-size-11); // 汉字：次要内容、辅助类信息 数字：羊角符号、小数点及角分 --nutui-font-size-s: var(--nutui-font-size-12); + --nutui-font-size-m: var(--nutui-font-size-13); // 标准内容、名称类关键信息 --nutui-font-size-base: var(--nutui-font-size-14); // 汉字：楼层标题、卡片标题 数字：重复型价格，如搜推商卡 --nutui-font-size-l: var(--nutui-font-size-15); + // l(15) 与 xl(18) 之间，价格整数 normal 等（16px，字阶缩放） + --nutui-font-size-md: var(--nutui-font-size-16); --nutui-font-size-icon: var(--nutui-font-size-16); // 汉字：页面标题、页面级最重要内容 数字：模块级主价格，如购物车、结算、底导 --nutui-font-size-xl: var(--nutui-font-size-18); + // xl(18) 与 xxl(24) 之间（20px） + --nutui-font-size-2xl: var(--nutui-font-size-20); // 数字：页面级主价格，如商详、收银台 --nutui-font-size-xxl: var(--nutui-font-size-24); // zanwu @@ -279,28 +318,40 @@ page { --nutui-font-weight-bold: 600; // 行高 - --nutui-line-height-base: 1.5; + --nutui-line-height-xxxs: var(--nutui-font-size-xxxs); + --nutui-line-height-xxs: var(--nutui-font-size-xxs); + --nutui-line-height-xs: var(--nutui-font-size-xs); + --nutui-line-height-s: var(--nutui-font-size-s); + --nutui-line-height-m: var(--nutui-font-size-m); + --nutui-line-height-base: var(--nutui-font-size-base); + --nutui-line-height-l: var(--nutui-font-size-l); + --nutui-line-height-md: var(--nutui-font-size-md); + --nutui-line-height-icon: var(--nutui-font-size-icon); + --nutui-line-height-xl: var(--nutui-font-size-xl); + --nutui-line-height-2xl: var(--nutui-font-size-2xl); + --nutui-line-height-xxl: var(--nutui-font-size-xxl); + --nutui-line-height-xxxl: var(--nutui-font-size-xxxl); // 对齐方式 --nutui-text-align: left; // space - --nutui-spacing-1: 1px; - --nutui-spacing-2: 2px; - --nutui-spacing-3: 3px; - --nutui-spacing-4: 4px; - --nutui-spacing-5: 5px; - --nutui-spacing-6: 6px; - --nutui-spacing-7: 7px; - --nutui-spacing-8: 8px; - --nutui-spacing-9: 9px; - --nutui-spacing-10: 10px; - --nutui-spacing-11: 11px; - --nutui-spacing-12: 12px; - --nutui-spacing-13: 13px; - --nutui-spacing-14: 14px; - --nutui-spacing-15: 15px; - --nutui-spacing-16: 16px; + --nutui-spacing-1: calc(1px * var(--nut-scale-f, 1)); + --nutui-spacing-2: calc(2px * var(--nut-scale-f, 1)); + --nutui-spacing-3: calc(3px * var(--nut-scale-f, 1)); + --nutui-spacing-4: calc(4px * var(--nut-scale-f, 1)); + --nutui-spacing-5: calc(5px * var(--nut-scale-f, 1)); + --nutui-spacing-6: calc(6px * var(--nut-scale-f, 1)); + --nutui-spacing-7: calc(7px * var(--nut-scale-f, 1)); + --nutui-spacing-8: calc(8px * var(--nut-scale-f, 1)); + --nutui-spacing-9: calc(9px * var(--nut-scale-f, 1)); + --nutui-spacing-10: calc(10px * var(--nut-scale-f, 1)); + --nutui-spacing-11: calc(11px * var(--nut-scale-f, 1)); + --nutui-spacing-12: calc(12px * var(--nut-scale-f, 1)); + --nutui-spacing-13: calc(13px * var(--nut-scale-f, 1)); + --nutui-spacing-14: calc(14px * var(--nut-scale-f, 1)); + --nutui-spacing-15: calc(15px * var(--nut-scale-f, 1)); + --nutui-spacing-16: calc(16px * var(--nut-scale-f, 1)); // space 语义化 // 狭小空间内的紧密关联内容 @@ -322,30 +373,30 @@ page { // radius ok --nutui-radius-0: 0px; - --nutui-radius-1: 1px; - --nutui-radius-2: 2px; - --nutui-radius-3: 3px; - --nutui-radius-4: 4px; - --nutui-radius-5: 5px; - --nutui-radius-6: 6px; - --nutui-radius-7: 7px; - --nutui-radius-8: 8px; - --nutui-radius-9: 9px; - --nutui-radius-10: 10px; - --nutui-radius-11: 11px; - --nutui-radius-12: 12px; - --nutui-radius-13: 13px; - --nutui-radius-14: 14px; - --nutui-radius-15: 15px; - --nutui-radius-16: 16px; - --nutui-radius-17: 17px; - --nutui-radius-18: 18px; - --nutui-radius-19: 19px; - --nutui-radius-20: 20px; - --nutui-radius-21: 21px; - --nutui-radius-22: 22px; - --nutui-radius-23: 23px; - --nutui-radius-24: 24px; + --nutui-radius-1: calc(1px * var(--nut-scale-f, 1)); + --nutui-radius-2: calc(2px * var(--nut-scale-f, 1)); + --nutui-radius-3: calc(3px * var(--nut-scale-f, 1)); + --nutui-radius-4: calc(4px * var(--nut-scale-f, 1)); + --nutui-radius-5: calc(5px * var(--nut-scale-f, 1)); + --nutui-radius-6: calc(6px * var(--nut-scale-f, 1)); + --nutui-radius-7: calc(7px * var(--nut-scale-f, 1)); + --nutui-radius-8: calc(8px * var(--nut-scale-f, 1)); + --nutui-radius-9: calc(9px * var(--nut-scale-f, 1)); + --nutui-radius-10: calc(10px * var(--nut-scale-f, 1)); + --nutui-radius-11: calc(11px * var(--nut-scale-f, 1)); + --nutui-radius-12: calc(12px * var(--nut-scale-f, 1)); + --nutui-radius-13: calc(13px * var(--nut-scale-f, 1)); + --nutui-radius-14: calc(14px * var(--nut-scale-f, 1)); + --nutui-radius-15: calc(15px * var(--nut-scale-f, 1)); + --nutui-radius-16: calc(16px * var(--nut-scale-f, 1)); + --nutui-radius-17: calc(17px * var(--nut-scale-f, 1)); + --nutui-radius-18: calc(18px * var(--nut-scale-f, 1)); + --nutui-radius-19: calc(19px * var(--nut-scale-f, 1)); + --nutui-radius-20: calc(20px * var(--nut-scale-f, 1)); + --nutui-radius-21: calc(21px * var(--nut-scale-f, 1)); + --nutui-radius-22: calc(22px * var(--nut-scale-f, 1)); + --nutui-radius-23: calc(23px * var(--nut-scale-f, 1)); + --nutui-radius-24: calc(24px * var(--nut-scale-f, 1)); // radius 语义化 // 内容描述型的详情页面通栏结构 diff --git a/src/styles/variables-daojia.scss b/src/styles/variables-daojia.scss index 9a9e62e432..8417bccaca 100644 --- a/src/styles/variables-daojia.scss +++ b/src/styles/variables-daojia.scss @@ -151,10 +151,13 @@ $font-size-xxxs: var(--nutui-font-size-xxxs, 9px) !default; $font-size-xxs: var(--nutui-font-size-xxs, 10px) !default; $font-size-xs: var(--nutui-font-size-xs, 11px) !default; $font-size-s: var(--nutui-font-size-s, 12px) !default; +$font-size-m: var(--nutui-font-size-m, 13px) !default; $font-size-base: var(--nutui-font-size-base, 14px) !default; $font-size-l: var(--nutui-font-size-l, 15px) !default; +$font-size-md: var(--nutui-font-size-md, 16px) !default; $font-size-icon: var(--nutui-font-size-icon, 16px) !default; $font-size-xl: var(--nutui-font-size-xl, 18px) !default; +$font-size-2xl: var(--nutui-font-size-2xl, 20px) !default; $font-size-xxl: var(--nutui-font-size-xxl, 24px) !default; $font-size-xxxl: var(--nutui-font-size-10, 26px) !default; $font-size-xxxxl: var(--nutui-font-size-11, 28px) !default; @@ -165,8 +168,21 @@ $font-weight: var(--nutui-font-weight, 400) !default; $font-weight-medium: var(--nutui-font-weight-medium, 500) !default; $font-weight-bold: var(--nutui-font-weight-bold, 600) !default; -// 行高 -$line-height-base: var(--nutui-line-height-base, 1.5) !default; +// 行高（与同档字号等值；不经 scale） +$line-height-xxxs: var(--nutui-line-height-xxxs, $font-size-xxxs) !default; +$line-height-xxs: var(--nutui-line-height-xxs, $font-size-xxs) !default; +$line-height-xs: var(--nutui-line-height-xs, $font-size-xs) !default; +$line-height-s: var(--nutui-line-height-s, $font-size-s) !default; +$line-height-m: var(--nutui-line-height-m, $font-size-m) !default; +$line-height-base: var(--nutui-line-height-base, $font-size-base) !default; +$line-height-l: var(--nutui-line-height-l, $font-size-l) !default; +$line-height-md: var(--nutui-line-height-md, $font-size-md) !default; +$line-height-icon: var(--nutui-line-height-icon, $font-size-icon) !default; +$line-height-xl: var(--nutui-line-height-xl, $font-size-xl) !default; +$line-height-2xl: var(--nutui-line-height-2xl, $font-size-2xl) !default; +$line-height-xxl: var(--nutui-line-height-xxl, $font-size-xxl) !default; +$line-height-xxxl: var(--nutui-line-height-xxxl, $font-size-xxxl) !default; +$line-height-xxxxl: var(--nutui-line-height-xxxxl, $font-size-xxxxl) !default; // 间距 space $spacing-xxxs: var(--nutui-spacing-xxxs, 2px) !default; diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss index cc8e386609..771ad1c2af 100644 --- a/src/styles/variables-jmapp.scss +++ b/src/styles/variables-jmapp.scss @@ -106,9 +106,6 @@ $font-weight: var(--nutui-font-weight); $font-weight-medium: var(--nutui-font-weight-medium, 500) !default; $font-weight-bold: var(--nutui-font-weight-bold); -// 行高 -$line-height-base: var(--nutui-line-height) !default; - // 圆角 corners $radius-xxs: var( --nutui-radius-xxs @@ -169,16 +166,54 @@ $font-family: SimSun, sans-serif !default; -// Font +// Font（token 与 variables.scss 对齐；回落为 px / 设计 token，不经 scale 函数） $font-size-xxxs: var(--nutui-font-size-xxxs, 9px) !default; $font-size-xxs: $font-text-mini !default; $font-size-xs: $font-text-xs !default; $font-size-s: $font-text-small !default; +$font-size-m: var(--nutui-font-size-m, $font-text-small) !default; $font-size-base: $font-text !default; $font-size-l: $font-text-large !default; +$font-size-md: var(--nutui-font-size-md, 16px) !default; +$font-size-icon: var(--nutui-font-size-icon, 16px) !default; $font-size-xl: $font-h2 !default; +$font-size-2xl: var(--nutui-font-size-2xl, 20px) !default; $font-size-xxl: var(--nutui-font-size-8) !default; $font-size-xxxl: var(--nutui-font-size-10) !default; +$font-size-xxxxl: var(--nutui-font-size-11, 28px) !default; + +// 行高（与同档字号等值；不经 scale） +$line-height-xxxs: var(--nutui-line-height-xxxs, $font-size-xxxs) !default; +$line-height-xxs: var(--nutui-line-height-xxs, $font-size-xxs) !default; +$line-height-xs: var(--nutui-line-height-xs, $font-size-xs) !default; +$line-height-s: var(--nutui-line-height-s, $font-size-s) !default; +$line-height-m: var(--nutui-line-height-m, $font-size-m) !default; +$line-height-base: var( + --nutui-line-height-base, + var(--nutui-line-height, $font-size-base) +) !default; +$line-height-l: var(--nutui-line-height-l, $font-size-l) !default; +$line-height-md: var(--nutui-line-height-md, $font-size-md) !default; +$line-height-icon: var(--nutui-line-height-icon, $font-size-icon) !default; +$line-height-xl: var(--nutui-line-height-xl, $font-size-xl) !default; +$line-height-2xl: var(--nutui-line-height-2xl, $font-size-2xl) !default; +$line-height-xxl: var(--nutui-line-height-xxl, $font-size-xxl) !default; +$line-height-xxxl: var(--nutui-line-height-xxxl, $font-size-xxxl) !default; +$line-height-xxxxl: var(--nutui-line-height-xxxxl, $font-size-xxxxl) !default; + +// icon 尺寸（与 variables.scss 对齐；回落为 px，不经 scale-icon-px） +$icon-size-6: var(--nutui-icon-size-6, 6px) !default; +$icon-size-8: var(--nutui-icon-size-8, 8px) !default; +$icon-size-10: var(--nutui-icon-size-10, 10px) !default; +$icon-size-11: var(--nutui-icon-size-11, 11px) !default; +$icon-size-12: var(--nutui-icon-size-12, 12px) !default; +$icon-size-16: var(--nutui-icon-size-16, 16px) !default; +$icon-size-18: var(--nutui-icon-size-18, 18px) !default; +$icon-size-20: var(--nutui-icon-size-20, 20px) !default; +$icon-size-22: var(--nutui-icon-size-22, 22px) !default; +$icon-height: var(--nutui-icon-height, $icon-size-20) !default; +$icon-width: var(--nutui-icon-width, $icon-size-20) !default; +$icon-line-height: var(--nutui-icon-line-height, $icon-size-20) !default; // 间距 space $spacing-xxxs: var(--nutui-spacing-xxxs) !default; // 多用于文本与图标之间的间距 @@ -913,6 +948,32 @@ $price-symbol-small-size: var(--nutui-price-symbol-small-size, 10px) !default; $price-integer-small-size: var(--nutui-price-integer-small-size, 12px) !default; $price-decimal-small-size: var(--nutui-price-decimal-small-size, 10px) !default; +// price 行高（与 variables.scss 对齐） +$price-root-line-height: var( + --nutui-price-root-line-height, + $line-height-l +) !default; +$price-minor-line-height: var( + --nutui-price-minor-line-height, + $line-height-s +) !default; +$price-integer-xlarge-line-height: var( + --nutui-price-integer-xlarge-line-height, + $line-height-xxl +) !default; +$price-integer-large-line-height: var( + --nutui-price-integer-large-line-height, + $line-height-xl +) !default; +$price-integer-normal-line-height: var( + --nutui-price-integer-normal-line-height, + $line-height-md +) !default; +$price-integer-small-line-height: var( + --nutui-price-integer-small-line-height, + $line-height-s +) !default; + //avatar（✅） $avatar-square: var(--nutui-avatar-square, $radius-base) !default; $avatar-large-width: var(--nutui-avatar-large-width, 48px) !default; @@ -1221,6 +1282,14 @@ $rate-icon-inactive-color: var( $rate-icon-size: var(--nutui-rate-icon-size, 12px) !default; $rate-font-color: var(--nutui-rate-font-color, $color-primary-icon) !default; $rate-font-size: var(--nutui-rate-font-size, 12px) !default; +$rate-font-size-large: var( + --nutui-rate-font-size-large, + calc(#{$rate-font-size} + 6px) +) !default; +$rate-font-size-small: var( + --nutui-rate-font-size-small, + calc(#{$rate-font-size} - 2px) +) !default; // tabbar（✅） $tabbar-height: var(--nutui-tabbar-height, 50px) !default; diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss index 8c51b238a3..5b001961d3 100644 --- a/src/styles/variables-jrkf.scss +++ b/src/styles/variables-jrkf.scss @@ -129,9 +129,6 @@ $font-weight: var(--nutui-font-weight) !default; $font-weight-medium: var(--nutui-font-weight-medium, 500) !default; $font-weight-bold: var(--nutui-font-weight-bold) !default; -// 行高 -$line-height-base: var(--nutui-line-height) !default; - // 间距 space $spacing-xxxs: var(--nutui-spacing-xxxs, 2px) !default; $spacing-xxs: var(--nutui-spacing-xxs) !default; // 多用于文本与图标之间的间距 @@ -205,16 +202,54 @@ $font-family: SimSun, sans-serif !default; -// Font +// Font（token 与 variables.scss 对齐；回落为 px / 设计 token，不经 scale 函数） $font-size-xxxs: var(--nutui-font-size-xxxs, 9px) !default; $font-size-xxs: $font-text-mini !default; $font-size-xs: $font-text-xs !default; $font-size-s: $font-text-small !default; +$font-size-m: var(--nutui-font-size-m, $font-text-small) !default; $font-size-base: $font-text !default; $font-size-l: $font-text-large !default; +$font-size-md: var(--nutui-font-size-md, 16px) !default; +$font-size-icon: var(--nutui-font-size-icon, 16px) !default; $font-size-xl: $font-h2 !default; +$font-size-2xl: var(--nutui-font-size-2xl, 20px) !default; $font-size-xxl: var(--nutui-font-size-8) !default; $font-size-xxxl: var(--nutui-font-size-10) !default; +$font-size-xxxxl: var(--nutui-font-size-11, 28px) !default; + +// 行高（与同档字号等值；不经 scale） +$line-height-xxxs: var(--nutui-line-height-xxxs, $font-size-xxxs) !default; +$line-height-xxs: var(--nutui-line-height-xxs, $font-size-xxs) !default; +$line-height-xs: var(--nutui-line-height-xs, $font-size-xs) !default; +$line-height-s: var(--nutui-line-height-s, $font-size-s) !default; +$line-height-m: var(--nutui-line-height-m, $font-size-m) !default; +$line-height-base: var( + --nutui-line-height-base, + var(--nutui-line-height, $font-size-base) +) !default; +$line-height-l: var(--nutui-line-height-l, $font-size-l) !default; +$line-height-md: var(--nutui-line-height-md, $font-size-md) !default; +$line-height-icon: var(--nutui-line-height-icon, $font-size-icon) !default; +$line-height-xl: var(--nutui-line-height-xl, $font-size-xl) !default; +$line-height-2xl: var(--nutui-line-height-2xl, $font-size-2xl) !default; +$line-height-xxl: var(--nutui-line-height-xxl, $font-size-xxl) !default; +$line-height-xxxl: var(--nutui-line-height-xxxl, $font-size-xxxl) !default; +$line-height-xxxxl: var(--nutui-line-height-xxxxl, $font-size-xxxxl) !default; + +// icon 尺寸（与 variables.scss 对齐；回落为 px，不经 scale-icon-px） +$icon-size-6: var(--nutui-icon-size-6, 6px) !default; +$icon-size-8: var(--nutui-icon-size-8, 8px) !default; +$icon-size-10: var(--nutui-icon-size-10, 10px) !default; +$icon-size-11: var(--nutui-icon-size-11, 11px) !default; +$icon-size-12: var(--nutui-icon-size-12, 12px) !default; +$icon-size-16: var(--nutui-icon-size-16, 16px) !default; +$icon-size-18: var(--nutui-icon-size-18, 18px) !default; +$icon-size-20: var(--nutui-icon-size-20, 20px) !default; +$icon-size-22: var(--nutui-icon-size-22, 22px) !default; +$icon-height: var(--nutui-icon-height, $icon-size-20) !default; +$icon-width: var(--nutui-icon-width, $icon-size-20) !default; +$icon-line-height: var(--nutui-icon-line-height, $icon-size-20) !default; $space-mini: $spacing-xs !default; $space-large: $spacing-l !default; @@ -1002,6 +1037,32 @@ $price-symbol-small-size: var(--nutui-price-symbol-small-size, 10px) !default; $price-integer-small-size: var(--nutui-price-integer-small-size, 12px) !default; $price-decimal-small-size: var(--nutui-price-decimal-small-size, 10px) !default; +// price 行高（与 variables.scss 对齐） +$price-root-line-height: var( + --nutui-price-root-line-height, + $line-height-l +) !default; +$price-minor-line-height: var( + --nutui-price-minor-line-height, + $line-height-s +) !default; +$price-integer-xlarge-line-height: var( + --nutui-price-integer-xlarge-line-height, + $line-height-xxl +) !default; +$price-integer-large-line-height: var( + --nutui-price-integer-large-line-height, + $line-height-xl +) !default; +$price-integer-normal-line-height: var( + --nutui-price-integer-normal-line-height, + $line-height-md +) !default; +$price-integer-small-line-height: var( + --nutui-price-integer-small-line-height, + $line-height-s +) !default; + //avatar（✅） $avatar-square: var(--nutui-avatar-square, $radius-base) !default; $avatar-large-width: var(--nutui-avatar-large-width, 48px) !default; @@ -1320,6 +1381,14 @@ $notify-background-color: var(--nutui-notify-background-color, $white) !default; $rate-icon-size: var(--nutui-rate-icon-size, 12px) !default; $rate-font-color: var(--nutui-rate-font-color, $color-primary-icon) !default; $rate-font-size: var(--nutui-rate-font-size, 12px) !default; +$rate-font-size-large: var( + --nutui-rate-font-size-large, + calc(#{$rate-font-size} + 6px) +) !default; +$rate-font-size-small: var( + --nutui-rate-font-size-small, + calc(#{$rate-font-size} - 2px) +) !default; $rate-item-margin: var(--nutui-rate-item-margin, 14px) !default; $rate-icon-color: var(--nutui-rate-icon-color, $color-primary) !default; $rate-icon-inactive-color: var( diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 3bb38d962b..05c8c4ada1 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,4 +1,31 @@ // ---------------------------------------------------- +// 缩放系数 +:root, +page { + --nut-scale-f: 1; + --nut-scale-font: var(--nut-scale-f, 1); + --nut-scale-icon: var(--nut-scale-f, 1); + + // ---- icon size ---- + --nut-icon-height: calc( + 16px * var(--nut-scale-icon, var(--nut-scale-f, 1)) + ) !important; + --nut-icon-width: calc( + 16px * var(--nut-scale-icon, var(--nut-scale-f, 1)) + ) !important; + --nut-icon-line-height: calc( + 16px * var(--nut-scale-icon, var(--nut-scale-f, 1)) + ) !important; +} +@function scale-px($size) { + @return calc(#{$size} * var(--nut-scale-f, 1)); +} +@function scale-font-px($size) { + @return calc(#{$size} * var(--nut-scale-font, var(--nut-scale-f, 1))); +} +@function scale-icon-px($size) { + @return calc(#{$size} * var(--nut-scale-icon, var(--nut-scale-f, 1))); +} // 主色调 // done $color-primary: var(--nutui-color-primary, #ff0f23) !default; $color-primary-stop-1: var(--nutui-color-primary-stop-1, #ff475d) !default; @@ -147,17 +174,36 @@ $font-family: sans-serif !default; // Font -$font-size-xxxs: var(--nutui-font-size-xxxs, 9px) !default; -$font-size-xxs: var(--nutui-font-size-xxs, 10px) !default; -$font-size-xs: var(--nutui-font-size-xs, 11px) !default; -$font-size-s: var(--nutui-font-size-s, 12px) !default; -$font-size-base: var(--nutui-font-size-base, 14px) !default; -$font-size-l: var(--nutui-font-size-l, 15px) !default; -$font-size-icon: var(--nutui-font-size-icon, 16px) !default; -$font-size-xl: var(--nutui-font-size-xl, 18px) !default; -$font-size-xxl: var(--nutui-font-size-xxl, 24px) !default; -$font-size-xxxl: var(--nutui-font-size-10, 26px) !default; -$font-size-xxxxl: var(--nutui-font-size-11, 28px) !default; +$font-size-xxxs: var(--nutui-font-size-xxxs, scale-font-px(9px)) !default; +$font-size-xxs: var(--nutui-font-size-xxs, scale-font-px(10px)) !default; +$font-size-xs: var(--nutui-font-size-xs, scale-font-px(11px)) !default; +$font-size-s: var(--nutui-font-size-s, scale-font-px(12px)) !default; +$font-size-m: var(--nutui-font-size-m, scale-font-px(13px)) !default; +$font-size-base: var(--nutui-font-size-base, scale-font-px(14px)) !default; +$font-size-l: var(--nutui-font-size-l, scale-font-px(15px)) !default; +$font-size-md: var(--nutui-font-size-md, scale-font-px(16px)) !default; +$font-size-icon: var(--nutui-font-size-icon, scale-icon-px(16px)) !default; +$font-size-xl: var(--nutui-font-size-xl, scale-font-px(18px)) !default; +$font-size-2xl: var(--nutui-font-size-2xl, scale-font-px(20px)) !default; +$font-size-xxl: var(--nutui-font-size-xxl, scale-font-px(24px)) !default; +$font-size-xxxl: var(--nutui-font-size-10, scale-font-px(26px)) !default; +$font-size-xxxxl: var(--nutui-font-size-11, scale-font-px(28px)) !default; + +// 行高（与各字号 token 一一对应，与同档字号等值） +$line-height-xxxs: var(--nutui-line-height-xxxs, $font-size-xxxs) !default; +$line-height-xxs: var(--nutui-line-height-xxs, $font-size-xxs) !default; +$line-height-xs: var(--nutui-line-height-xs, $font-size-xs) !default; +$line-height-s: var(--nutui-line-height-s, $font-size-s) !default; +$line-height-m: var(--nutui-line-height-m, $font-size-m) !default; +$line-height-base: var(--nutui-line-height-base, $font-size-base) !default; +$line-height-l: var(--nutui-line-height-l, $font-size-l) !default; +$line-height-md: var(--nutui-line-height-md, $font-size-md) !default; +$line-height-icon: var(--nutui-line-height-icon, $font-size-icon) !default; +$line-height-xl: var(--nutui-line-height-xl, $font-size-xl) !default; +$line-height-2xl: var(--nutui-line-height-2xl, $font-size-2xl) !default; +$line-height-xxl: var(--nutui-line-height-xxl, $font-size-xxl) !default; +$line-height-xxxl: var(--nutui-line-height-xxxl, $font-size-xxxl) !default; +$line-height-xxxxl: var(--nutui-line-height-xxxxl, $font-size-xxxxl) !default; // 字重 ok $font-weight-light: var(--nutui-font-weight-light, 300) !default; @@ -165,37 +211,43 @@ $font-weight: var(--nutui-font-weight, 400) !default; $font-weight-medium: var(--nutui-font-weight-medium, 500) !default; $font-weight-bold: var(--nutui-font-weight-bold, 600) !default; -// 行高 -$line-height-base: var(--nutui-line-height-base, 1.5) !default; - // 间距 space -$spacing-xxxs: var(--nutui-spacing-xxxs, 2px) !default; -$spacing-xxs: var(--nutui-spacing-xxs, 4px) !default; -$spacing-xs: var(--nutui-spacing-xs, 6px) !default; -$spacing-s: var(--nutui-spacing-s, 7px) !default; -$spacing-base: var(--nutui-spacing-base, 8px) !default; -$spacing-l: var(--nutui-spacing-l, 9px) !default; -$spacing-xl: var(--nutui-spacing-xl, 12px) !default; -$spacing-xxl: var(--nutui-spacing-xxl, 16px) !default; -$spacing-xxxl: var(--nutui-spacing-xxxl, 18px) !default; +$spacing-xxxs: var(--nutui-spacing-xxxs, scale-px(2px)) !default; +$spacing-xxs: var(--nutui-spacing-xxs, scale-px(4px)) !default; +$spacing-xs: var(--nutui-spacing-xs, scale-px(6px)) !default; +$spacing-s: var(--nutui-spacing-s, scale-px(7px)) !default; +$spacing-base: var(--nutui-spacing-base, scale-px(8px)) !default; +$spacing-l: var(--nutui-spacing-l, scale-px(9px)) !default; +$spacing-xl: var(--nutui-spacing-xl, scale-px(12px)) !default; +$spacing-xxl: var(--nutui-spacing-xxl, scale-px(16px)) !default; +$spacing-xxxl: var(--nutui-spacing-xxxl, scale-px(18px)) !default; // 圆角 corners ok $radius-xxxs: var( --nutui-radius-xxxs, 0 ) !default; // 内容描述型的详情页面通栏结构 -$radius-xxs: var(--nutui-radius-xxs, 2px) !default; // 标签 -$radius-xs: var(--nutui-radius-xs, 4px) !default; // 单行高度20、24、28的组件 -$radius-s: var(--nutui-radius-s, 6px) !default; // 单行高度32、36的组件 -$radius-base: var(--nutui-radius-base, 8px) !default; // 单行高度40及以上的组件 -$radius-l: var(--nutui-radius-l, 8px) !default; // 入口型非通栏卡片 +$radius-xxs: var(--nutui-radius-xxs, scale-px(2px)) !default; // 标签 +$radius-xs: var( + --nutui-radius-xs, + scale-px(4px) +) !default; // 单行高度20、24、28的组件 +$radius-s: var( + --nutui-radius-s, + scale-px(6px) +) !default; // 单行高度32、36的组件 +$radius-base: var( + --nutui-radius-base, + scale-px(8px) +) !default; // 单行高度40及以上的组件 +$radius-l: var(--nutui-radius-l, scale-px(8px)) !default; // 入口型非通栏卡片 $radius-xl: var( --nutui-radius-xl, - 12px + scale-px(12px) ) !default; // 结构分割、通栏卡片、临时操作层组件等场景 -$radius-xxl: var(--nutui-radius-xxl, 14px) !default; // 暂无 -$radius-xxxl: var(--nutui-radius-xxxl, 16px) !default; // 暂无 -$radius-circle: 50px !default; // 按钮、徽标等组件的胶囊形态圆角样式 +$radius-xxl: var(--nutui-radius-xxl, scale-px(14px)) !default; // 暂无 +$radius-xxxl: var(--nutui-radius-xxxl, scale-px(16px)) !default; // 暂无 +$radius-circle: scale-px(50px) !default; // 按钮、徽标等组件的胶囊形态圆角样式 $radius-full: 50% !default; // 头像、图片等不限制尺寸规格，需要以圆形呈现 // 阴影 shadows @@ -218,9 +270,18 @@ $button-square-border-radius: var( 0 ) !default; $button-border-radius: var(--nutui-button-border-radius, $radius-s) !default; -$button-border-width: var(--nutui-button-border-width, 0.5px) !default; -$button-normal-padding: var(--nutui-button-normal-padding, 0px 12px) !default; -$button-default-height: var(--nutui-button-default-height, 32px) !default; +$button-border-width: var( + --nutui-button-border-width, + scale-px(0.5px) +) !default; +$button-normal-padding: var( + --nutui-button-normal-padding, + 0px scale-px(12px) +) !default; +$button-default-height: var( + --nutui-button-default-height, + scale-px(32px) +) !default; $button-default-color: var(--nutui-button-default-color, $color-title) !default; $button-default-background-color: var( --nutui-button-default-background-color, @@ -238,29 +299,41 @@ $button-default-disabled-color: var( --nutui-button-default-disabled-color, $color-text-help ) !default; -$button-default-padding: var(--nutui-button-default-padding, 0px 12px) !default; +$button-default-padding: var( + --nutui-button-default-padding, + 0px scale-px(12px) +) !default; $button-default-font-size: var( --nutui-button-default-font-size, $font-size-base ) !default; -$button-xlarge-height: var(--nutui-button-xlarge-height, 48px) !default; -$button-xlarge-padding: var(--nutui-button-xlarge-padding, 0px 24px) !default; +$button-xlarge-height: var( + --nutui-button-xlarge-height, + scale-px(48px) +) !default; +$button-xlarge-padding: var( + --nutui-button-xlarge-padding, + 0px scale-px(24px) +) !default; $button-xlarge-font-size: var( --nutui-button-xlarge-font-size, $font-size-xl ) !default; $button-xlarge-text-icon-margin: var( --nutui-button-xlarge-text-icon-margin, - 6px + scale-px(6px) ) !default; $button-xlarge-border-radius: var( --nutui-button-xlarge-border-radius, $radius-base ) !default; -$button-large-height: var(--nutui-button-large-height, 40px) !default; -$button-large-padding: var(--nutui-button-large-padding, 0px 16px) !default; +$button-large-height: var(--nutui-button-large-height, scale-px(40px)) !default; +$button-large-padding: var( + --nutui-button-large-padding, + 0px scale-px(16px) +) !default; $button-large-font-size: var( --nutui-button-large-font-size, $font-size-l @@ -274,15 +347,21 @@ $button-small-font-size: var( --nutui-button-small-font-size, $font-size-s ) !default; -$button-small-padding: var(--nutui-button-small-padding, 0px 8px) !default; -$button-small-height: var(--nutui-button-small-height, 28px) !default; +$button-small-padding: var( + --nutui-button-small-padding, + 0px scale-px(8px) +) !default; +$button-small-height: var(--nutui-button-small-height, scale-px(28px)) !default; $button-small-border-radius: var( --nutui-button-small-border-radius, $radius-s ) !default; -$button-mini-padding: var(--nutui-button-mini-padding, 0px 8px) !default; -$button-mini-height: var(--nutui-button-mini-height, 24px) !default; +$button-mini-padding: var( + --nutui-button-mini-padding, + 0px scale-px(8px) +) !default; +$button-mini-height: var(--nutui-button-mini-height, scale-px(24px)) !default; $button-mini-font-size: var( --nutui-button-mini-font-size, $font-size-xs @@ -379,7 +458,10 @@ $button-danger-disabled: var( $color-danger-disabled ) !default; -$button-text-icon-margin: var(--nutui-button-text-icon-margin, 4px) !default; +$button-text-icon-margin: var( + --nutui-button-text-icon-margin, + scale-px(4px) +) !default; // cell（✅） $cell-title-color: var(--nutui-cell-title-color, $color-title) !default; @@ -400,14 +482,17 @@ $cell-extra-font-size: var( $font-size-base ) !default; $cell-extra-color: var(--nutui-cell-extra-color, $color-text) !default; -$cell-border-radius: var(--nutui-cell-border-radius, 6px) !default; -$cell-padding: var(--nutui-cell-padding, 13px 16px) !default; -$cell-line-height: var(--nutui-cell-line-height, 20px) !default; -$cell-divider-right: var(--nutui-cell-divider-right, 16px) !default; -$cell-divider-left: var(--nutui-cell-divider-left, 16px) !default; +$cell-border-radius: var(--nutui-cell-border-radius, scale-px(6px)) !default; +$cell-padding: var( + --nutui-cell-padding, + scale-px(13px) scale-px(16px) +) !default; +$cell-line-height: var(--nutui-cell-line-height, scale-px(20px)) !default; +$cell-divider-right: var(--nutui-cell-divider-right, scale-px(16px)) !default; +$cell-divider-left: var(--nutui-cell-divider-left, scale-px(16px)) !default; $cell-divider-border-bottom: var( --nutui-cell-divider-border-bottom, - 1px solid $color-border + scale-px(1px) solid $color-border ) !default; $cell-background-color: var( --nutui-cell-background-color, @@ -415,13 +500,13 @@ $cell-background-color: var( ) !default; $cell-box-shadow: var( --nutui-cell-box-shadow, - 0px 1px 7px 0px rgba(237, 238, 241, 1) + 0px scale-px(1px) scale-px(7px) 0px rgba(237, 238, 241, 1) ) !default; // cell-group（✅） $cell-group-title-padding: var( --nutui-cell-group-title-padding, - 0 10px + 0 scale-px(10px) ) !default; $cell-group-title-color: var( --nutui-cell-group-title-color, @@ -433,11 +518,11 @@ $cell-group-title-font-size: var( ) !default; $cell-group-title-line-height: var( --nutui-cell-group-title-line-height, - 20px + scale-px(20px) ) !default; $cell-group-description-padding: var( --nutui-cell-group-description-padding, - 0 10px + 0 scale-px(10px) ) !default; $cell-group-description-color: var( --nutui-cell-group-description-color, @@ -449,16 +534,19 @@ $cell-group-description-font-size: var( ) !default; $cell-group-description-line-height: var( --nutui-cell-group-description-line-height, - 16px + scale-px(16px) ) !default; $cell-group-background-color: var( --nutui-cell-group-background-color, $color-background-overlay ) !default; -$cell-group-wrap-margin: var(--nutui-cell-group-wrap-margin, 10px) !default; +$cell-group-wrap-margin: var( + --nutui-cell-group-wrap-margin, + scale-px(10px) +) !default; // divider（✅） -$divider-margin: var(--nutui-divider-margin, 16px 0) !default; +$divider-margin: var(--nutui-divider-margin, scale-px(16px) 0) !default; $divider-text-font-size: var( --nutui-divider-text-font-size, $font-size-base @@ -468,25 +556,47 @@ $divider-border-color: var( $color-border ) !default; $divider-text-color: var(--nutui-divider-text-color, $color-text) !default; -$divider-line-height: var(--nutui-divider-line-height, 1px) !default; -$divider-spacing: var(--nutui-divider-spacing, 8px) !default; +$divider-line-height: var(--nutui-divider-line-height, scale-px(1px)) !default; +$divider-spacing: var(--nutui-divider-spacing, scale-px(8px)) !default; $divider-side-width: var(--nutui-divider-side-width, 10%) !default; -$divider-vertical-height: var(--nutui-divider-vertical-height, 12px) !default; -$divider-vertical-margin: var(--nutui-divider-vertical-margin, 0 8px) !default; +$divider-vertical-height: var( + --nutui-divider-vertical-height, + scale-px(12px) +) !default; +$divider-vertical-margin: var( + --nutui-divider-vertical-margin, + 0 scale-px(8px) +) !default; // icon（✅） -$icon-height: var(--nutui-icon-height, 20px) !default; -$icon-width: var(--nutui-icon-width, 20px) !default; -$icon-line-height: var(--nutui-icon-line-height, 20px) !default; +$icon-size-6: var(--nutui-icon-size-6, scale-icon-px(6px)) !default; +$icon-size-8: var(--nutui-icon-size-8, scale-icon-px(8px)) !default; +$icon-size-10: var(--nutui-icon-size-10, scale-icon-px(10px)) !default; +$icon-size-11: var(--nutui-icon-size-11, scale-icon-px(11px)) !default; +$icon-size-12: var(--nutui-icon-size-12, scale-icon-px(12px)) !default; +$icon-size-16: var(--nutui-icon-size-16, scale-icon-px(16px)) !default; +$icon-size-18: var(--nutui-icon-size-18, scale-icon-px(18px)) !default; +$icon-size-20: var(--nutui-icon-size-20, scale-icon-px(20px)) !default; +$icon-size-22: var(--nutui-icon-size-22, scale-icon-px(22px)) !default; + +$icon-height: var(--nutui-icon-height, $icon-size-20) !default; +$icon-width: var(--nutui-icon-width, $icon-size-20) !default; +$icon-line-height: var(--nutui-icon-line-height, $icon-size-20) !default; // uploader（✅） -$uploader-image-width: var(--nutui-uploader-image-width, 100px) !default; -$uploader-image-height: var(--nutui-uploader-image-height, 100px) !default; +$uploader-image-width: var( + --nutui-uploader-image-width, + scale-px(100px) +) !default; +$uploader-image-height: var( + --nutui-uploader-image-height, + scale-px(100px) +) !default; $uploader-image-border: var(--nutui-uploader-image-border, 0px) !default; $uploader-image-border-radius: var( --nutui-uploader-image-border-radius, - 4px + scale-px(4px) ) !default; $uploader-background: var( --nutui-uploader-background, @@ -506,11 +616,11 @@ $uploader-image-disabled: var( ) !default; $uploader-image-icon-margin-bottom: var( --nutui-uploader-image-icon-margin-bottom, - 6px + scale-px(6px) ) !default; $uploader-image-icon-tip-font-size: var( --nutui-uploader-image-icon-tip-font-size, - 12px + $font-size-s ) !default; $uploader-preview-progress-background: var( --nutui-uploader-preview-progress-background, @@ -518,15 +628,15 @@ $uploader-preview-progress-background: var( ) !default; $uploader-preview-margin-right: var( --nutui-uploader-preview-margin-right, - 10px + scale-px(10px) ) !default; $uploader-preview-margin-bottom: var( --nutui-uploader-preview-margin-bottom, - 10px + scale-px(10px) ) !default; $uploader-preview-tips-height: var( --nutui-uploader-preview-tips-height, - 24px + scale-px(24px) ) !default; $uploader-preview-tips-background: var( --nutui-uploader-preview-tips-background, @@ -534,7 +644,7 @@ $uploader-preview-tips-background: var( ) !default; $uploader-preview-tips-padding: var( --nutui-uploader-preview-tips-padding, - 0 5px + 0 scale-px(5px) ) !default; $uploader-preview-close-right: var( --nutui-uploader-preview-close-right, @@ -564,7 +674,7 @@ $picker-title-ok-font-size: var( ) !default; // picker-view（✅） -$picker-item-height: var(--nutui-picker-item-height, 36px) !default; +$picker-item-height: var(--nutui-picker-item-height, scale-px(36px)) !default; $picker-list-height: calc($picker-item-height * 7) !default; $picker-item-text-color: var( --nutui-picker-item-text-color, @@ -576,7 +686,7 @@ $picker-item-text-font-size: var( ) !default; $picker-item-active-line-border: var( --nutui-picker-item-active-line-border, - 1px solid $color-border + scale-px(1px) solid $color-border ) !default; $picker-mask-background: var( --picker-mask-background, @@ -602,10 +712,10 @@ $input-background-color: var( --nutui-input-background-color, $color-background-overlay ) !default; -$input-padding: var(--nutui-input-padding, 12px) !default; +$input-padding: var(--nutui-input-padding, scale-px(12px)) !default; // textarea（✅） -$textarea-padding: var(--nutui-textarea-padding, 12px) !default; +$textarea-padding: var(--nutui-textarea-padding, scale-px(12px)) !default; $textarea-text-color: var(--nutui-textarea-text-color, $color-title) !default; $textarea-text-curror-color: var( --nutui-textarea-text-curror-color, @@ -613,12 +723,18 @@ $textarea-text-curror-color: var( ) !default; $textarea-text-line-height: var( --nutui-textarea-text-line-height, - 20px + scale-px(20px) ) !default; // inputnumber（✅） -$inputnumber-input-width: var(--nutui-inputnumber-input-width, 26px) !default; -$inputnumber-input-height: var(--nutui-inputnumber-input-height, 20px) !default; +$inputnumber-input-width: var( + --nutui-inputnumber-input-width, + scale-px(26px) +) !default; +$inputnumber-input-height: var( + --nutui-inputnumber-input-height, + scale-px(20px) +) !default; $inputnumber-input-background-color: var( --nutui-inputnumber-input-background-color, $color-background @@ -634,13 +750,16 @@ $inputnumber-input-font-size: var( $inputnumber-input-border: var(--nutui-inputnumber-input-border, 0) !default; $inputnumber-input-border-radius: var( --nutui-inputnumber-input-border-radius, - 4px + scale-px(4px) ) !default; $inputnumber-input-margin: var(--nutui-inputnumber-input-margin, 0px) !default; -$inputnumber-button-width: var(--nutui-inputnumber-button-width, 20px) !default; +$inputnumber-button-width: var( + --nutui-inputnumber-button-width, + scale-px(20px) +) !default; $inputnumber-button-height: var( --nutui-inputnumber-button-height, - 20px + scale-px(20px) ) !default; $inputnumber-button-background-color: var( --nutui-inputnumber-button-background-color, @@ -650,7 +769,10 @@ $inputnumber-icon-color: var( --nutui-inputnumber-icon-color, $color-text ) !default; -$inputnumber-icon-size: var(--nutui-inputnumber-icon-size, 8px) !default; +$inputnumber-icon-size: var( + --nutui-inputnumber-icon-size, + scale-px(8px) +) !default; $inputnumber-disabled-color: var( --nutui-inputnumber-disabled-color, $color-text-disabled @@ -676,7 +798,7 @@ $actionsheet-item-border-bottom: var( ) !default; $actionsheet-item-line-height: var( --nutui-actionsheet-item-line-height, - 24px + scale-px(24px) ) !default; $actionsheet-item-color: var( --nutui-actionsheet-item-color, @@ -705,7 +827,7 @@ $shortpassword-forget: var( //numberkeyboard（✅） $numberkeyboard-padding: var( --nutui-numberkeyboard-padding, - 0 0 22px 0 + 0 0 scale-px(22px) 0 ) !default; $numberkeyboard-background-color: var( --nutui-numberkeyboard-background-color, @@ -717,7 +839,7 @@ $numberkeyboard-wrapper-background-color: var( ) !default; $numberkeyboard-header-close-padding: var( --nutui-numberkeyboard-header-close-padding, - 0 16px + 0 scale-px(16px) ) !default; $numberkeyboard-header-close-color: var( --nutui-numberkeyboard-header-close-color, @@ -725,7 +847,7 @@ $numberkeyboard-header-close-color: var( ) !default; $numberkeyboard-header-close-font-size: var( --nutui-numberkeyboard-header-close-font-size, - 14px + $font-size-base ) !default; $numberkeyboard-header-close-background-color: var( --nutui-numberkeyboard-header-close-background-color, @@ -741,7 +863,7 @@ $numberkeyboard-key-active-background-color: var( ) !default; $numberkeyboard-key-height: var( --nutui-numberkeyboard-key-height, - 48px + scale-px(48px) ) !default; $numberkeyboard-key-line-height: var( --nutui-numberkeyboard-key-line-height, @@ -749,7 +871,7 @@ $numberkeyboard-key-line-height: var( ) !default; $numberkeyboard-key-border-radius: var( --nutui-numberkeyboard-key-border-radius, - 8px + scale-px(8px) ) !default; $numberkeyboard-key-border: var( --nutui-numberkeyboard-key-border, @@ -784,14 +906,17 @@ $coutdown-font-weight: var( --nutui-countdown-font-weight, $font-weight ) !default; -$countdown-height: var(--nutui-countdown-height, 16px) !default; -$countdown-width: var(--nutui-countdown-width, 16px) !default; +$countdown-height: var(--nutui-countdown-height, scale-px(16px)) !default; +$countdown-width: var(--nutui-countdown-width, scale-px(16px)) !default; $countdown-number-padding: var(--nutui-countdown-number-padding, 0 0) !default; $countdown-number-border-radius: var( --nutui-countdown-number-border-radius, $radius-xxs ) !default; -$countdown-number-margin: var(--nutui-countdown-number-margin, 0 1px) !default; +$countdown-number-margin: var( + --nutui-countdown-number-margin, + 0 scale-px(1px) +) !default; $countdown-number-color: var( --nutui-countdown-number-color, $color-primary @@ -834,45 +959,98 @@ $price-symbol-padding-right: var( ) !default; //xlarge price（✅） -$price-symbol-xlarge-size: var(--nutui-price-symbol-xlarge-size, 12px) !default; +$price-symbol-xlarge-size: var( + --nutui-price-symbol-xlarge-size, + $font-size-s +) !default; $price-integer-xlarge-size: var( --nutui-price-integer-xlarge-size, - 24px + $font-size-xxl ) !default; $price-decimal-xlarge-size: var( --nutui-price-decimal-xlarge-size, - 12px + $font-size-s ) !default; //large price（✅） -$price-symbol-large-size: var(--nutui-price-symbol-large-size, 12px) !default; -$price-integer-large-size: var(--nutui-price-integer-large-size, 18px) !default; -$price-decimal-large-size: var(--nutui-price-decimal-large-size, 12px) !default; +$price-symbol-large-size: var( + --nutui-price-symbol-large-size, + $font-size-s +) !default; +$price-integer-large-size: var( + --nutui-price-integer-large-size, + $font-size-xl +) !default; +$price-decimal-large-size: var( + --nutui-price-decimal-large-size, + $font-size-s +) !default; //normal price（✅） -$price-symbol-normal-size: var(--nutui-price-symbol-normal-size, 12px) !default; +$price-symbol-normal-size: var( + --nutui-price-symbol-normal-size, + $font-size-s +) !default; $price-integer-normal-size: var( --nutui-price-integer-normal-size, - 16px + $font-size-md ) !default; $price-decimal-normal-size: var( --nutui-price-decimal-normal-size, - 12px + $font-size-s ) !default; // small price（✅） -$price-symbol-small-size: var(--nutui-price-symbol-small-size, 12px) !default; -$price-integer-small-size: var(--nutui-price-integer-small-size, 12px) !default; -$price-decimal-small-size: var(--nutui-price-decimal-small-size, 12px) !default; +$price-symbol-small-size: var( + --nutui-price-symbol-small-size, + $font-size-s +) !default; +$price-integer-small-size: var( + --nutui-price-integer-small-size, + $font-size-s +) !default; +$price-decimal-small-size: var( + --nutui-price-decimal-small-size, + $font-size-s +) !default; + +// price 行高 +$price-root-line-height: var( + --nutui-price-root-line-height, + $line-height-l +) !default; +$price-minor-line-height: var( + --nutui-price-minor-line-height, + $line-height-s +) !default; +$price-integer-xlarge-line-height: var( + --nutui-price-integer-xlarge-line-height, + $line-height-xxl +) !default; +$price-integer-large-line-height: var( + --nutui-price-integer-large-line-height, + $line-height-xl +) !default; +$price-integer-normal-line-height: var( + --nutui-price-integer-normal-line-height, + $line-height-md +) !default; +$price-integer-small-line-height: var( + --nutui-price-integer-small-line-height, + $line-height-s +) !default; //avatar（✅） -$avatar-square: var(--nutui-avatar-square, 5px) !default; -$avatar-large-width: var(--nutui-avatar-large-width, 60px) !default; -$avatar-large-height: var(--nutui-avatar-large-height, 60px) !default; -$avatar-small-width: var(--nutui-avatar-small-width, 32px) !default; -$avatar-small-height: var(--nutui-avatar-small-height, 32px) !default; -$avatar-normal-width: var(--nutui-avatar-normal-width, 40px) !default; -$avatar-normal-height: var(--nutui-avatar-normal-height, 40px) !default; +$avatar-square: var(--nutui-avatar-square, scale-px(5px)) !default; +$avatar-large-width: var(--nutui-avatar-large-width, scale-px(60px)) !default; +$avatar-large-height: var(--nutui-avatar-large-height, scale-px(60px)) !default; +$avatar-small-width: var(--nutui-avatar-small-width, scale-px(32px)) !default; +$avatar-small-height: var(--nutui-avatar-small-height, scale-px(32px)) !default; +$avatar-normal-width: var(--nutui-avatar-normal-width, scale-px(40px)) !default; +$avatar-normal-height: var( + --nutui-avatar-normal-height, + scale-px(40px) +) !default; //switch（✅） $switch-active-background-color: var( @@ -895,14 +1073,14 @@ $switch-inactive-line-background-color: var( --nutui-switch-inactive-line-background-color, #ffffff ) !default; -$switch-width: var(--nutui-switch-width, 46px) !default; -$switch-height: var(--nutui-switch-height, 28px) !default; -$switch-line-height: var(--nutui-switch-line-height, 28px) !default; +$switch-width: var(--nutui-switch-width, scale-px(46px)) !default; +$switch-height: var(--nutui-switch-height, scale-px(28px)) !default; +$switch-line-height: var(--nutui-switch-line-height, scale-px(28px)) !default; $switch-border-radius: var( --nutui-switch-border-radius, $radius-circle ) !default; -$switch-border-width: var(--nutui-switch-border-width, 2px) !default; +$switch-border-width: var(--nutui-switch-border-width, scale-px(2px)) !default; $switch-inside-border-radius: var( --nutui-switch-inside-border-radius, $radius-full @@ -910,15 +1088,15 @@ $switch-inside-border-radius: var( /* #ifdef harmony */ $switch-inside-box-shadow: var( --nutui-switch-inside-box-shadow, - 0px 2px 6px 0px rgba(0, 0, 0, 0.1) + 0px scale-px(2px) scale-px(6px) 0px rgba(0, 0, 0, 0.1) ) !default; /* #endif */ /* #ifndef harmony */ $switch-inside-box-shadow: var( --nutui-switch-inside-box-shadow, - 0px 2px 1px 0px rgba(0, 0, 0, 0.06), - 0px 2px 6px 0px rgba(0, 0, 0, 0.1), - 0px 0px 0px 1px rgba(0, 0, 0, 0.02) + 0px scale-px(2px) scale-px(1px) 0px rgba(0, 0, 0, 0.06), + 0px scale-px(2px) scale-px(6px) 0px rgba(0, 0, 0, 0.1), + 0px 0px 0px scale-px(1px) rgba(0, 0, 0, 0.02) ) !default; /* #endif */ $switch-label-text-color: var( @@ -936,10 +1114,19 @@ $switch-inactive-disabled-label-text-color: var( // toast（✅） $toast-inner-text-align: var(--nutui-toast-inner-text-align, center) !default; -$toast-title-font-size: var(--nutui-toast-title-font-size, 16px) !default; -$toast-text-font-size: var(--nutui-toast-text-font-size, 14px) !default; +$toast-title-font-size: var( + --nutui-toast-title-font-size, + $font-size-md +) !default; +$toast-text-font-size: var( + --nutui-toast-text-font-size, + $font-size-base +) !default; $toast-font-color: var(--nutui-toast-font-color, $white) !default; -$toast-inner-padding: var(--nutui-toast-inner-padding, 13px 16px) !default; +$toast-inner-padding: var( + --nutui-toast-inner-padding, + scale-px(13px) scale-px(16px) +) !default; $toast-inner-bg-color: var(--nutui-toast-inner-bg-color, $color-mask) !default; $toast-inner-border-radius: var( --nutui-toast-inner-border-radius, @@ -948,36 +1135,45 @@ $toast-inner-border-radius: var( $toast-inner-top: var(--nutui-toast-inner-top, 50%) !default; //tour（✅） -$tour-mask-border-radius: var(--nutui-tour-mask-border-radius, 10px) !default; -$tour-content-min-width: var(--nutui-tour-content-min-width, 200px) !default; -$tour-content-padding: var(--nutui-tour-content-padding, 10px 12px) !default; +$tour-mask-border-radius: var( + --nutui-tour-mask-border-radius, + scale-px(10px) +) !default; +$tour-content-min-width: var( + --nutui-tour-content-min-width, + scale-px(200px) +) !default; +$tour-content-padding: var( + --nutui-tour-content-padding, + scale-px(10px) scale-px(12px) +) !default; $tour-content-inner-margin: var( --nutui-tour-content-inner-margin, - 10px 0px + scale-px(10px) 0px ) !default; $tour-content-inner-font-size: var( --nutui-tour-content-inner-font-size, - 14px + $font-size-base ) !default; $tour-content-bottom-margin-top: var( --nutui-tour-content-bottom-margin-top, - 10px + scale-px(10px) ) !default; $tour-content-bottom-btn-margin-left: var( --nutui-tour-content-bottom-btn-margin-left, - 4px + scale-px(4px) ) !default; $tour-content-bottom-btn-padding: var( --nutui-tour-content-bottom-btn-padding, - 2px 4px + scale-px(2px) scale-px(4px) ) !default; $tour-content-bottom-btn-font-size: var( --nutui-tour-content-bottom-btn-font-size, - 12px + $font-size-s ) !default; $tour-content-bottom-btn-border-radius: var( --nutui-tour-content-bottom-btn-border-radius, - 4px + scale-px(4px) ) !default; // calendar（✅） @@ -1017,29 +1213,35 @@ $calendar-sub-title-font-size: var( --nutui-calendar-sub-title-font-size, $font-size-base ) !default; -$calendar-header-height: var(--nutui-calendar-header-height, 24px) !default; +$calendar-header-height: var( + --nutui-calendar-header-height, + scale-px(24px) +) !default; $calendar-day-width: var(--nutui-calendar-day-width, 14.28%) !default; -$calendar-day-height: var(--nutui-calendar-day-height, 60px) !default; +$calendar-day-height: var(--nutui-calendar-day-height, scale-px(60px)) !default; $calendar-day-font-weight: var( --nutui-calendar-day-font-weight, $font-weight-bold ) !default; $calendar-day-active-border-radius: var( --nutui-calendar-day-active-border-radius, - 4px + scale-px(4px) ) !default; //hoverbutton $hoverbutton-spacing: var(--nutui-hoverbutton-spacing, $spacing-base) !default; $hoverbutton-position-bottom: var( --nutui-hoverbutton-position-bottom, - 60px + scale-px(60px) ) !default; $hoverbutton-position-right: var( --nutui-hoverbutton-position-right, $spacing-base ) !default; -$hoverbutton-item-size: var(--nutui-hoverbutton-item-size, 40px) !default; +$hoverbutton-item-size: var( + --nutui-hoverbutton-item-size, + scale-px(40px) +) !default; $hoverbutton-item-border-color: var( --nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12) @@ -1077,8 +1279,8 @@ $overlay-animation-duration: var( ) !default; //popup（✅） $popup-border-radius: var(--nutui-popup-border-radius, $radius-xl) !default; -$popup-icon-size: var(--nutui-popup-icon-size, 20px) !default; -$popup-title-padding: var(--nutui-popup-title-padding, 11px) !default; +$popup-icon-size: var(--nutui-popup-icon-size, scale-px(20px)) !default; +$popup-title-padding: var(--nutui-popup-title-padding, scale-px(16px)) !default; $popup-title-font-size: var( --nutui-popup-title-font-size, $font-size-xl @@ -1095,17 +1297,20 @@ $popup-description-spacing: var( --nutui-popup-description-spacing, $spacing-base ) !default; -$popup-title-height: var(--nutui-popup-title-height, 50px) !default; +$popup-title-height: var(--nutui-popup-title-height, scale-px(50px)) !default; $popup-title-border-bottom: var(--nutui-popup-title-border-bottom, 0) !default; $popup-animation-duration: var(--nutui-popup-animation-duration, 0.3s) !default; // Notify（✅） -$notify-height: var(--nutui-notify-height, 40px) !default; -$notify-padding: var(--nutui-notify-padding, 0px 12px) !default; -$notify-border-radius: var(--nutui-notify-border-radius, 8px) !default; +$notify-height: var(--nutui-notify-height, scale-px(40px)) !default; +$notify-padding: var(--nutui-notify-padding, 0px scale-px(12px)) !default; +$notify-border-radius: var( + --nutui-notify-border-radius, + scale-px(8px) +) !default; $notify-box-shadow: var( --nutui-notify-box-shadow, - 0px 4px 12px 0px rgba(0, 0, 0, 0.06) + 0px scale-px(4px) scale-px(12px) 0px rgba(0, 0, 0, 0.06) ) !default; $notify-z-index: var(--nutui-notify-z-index, 1000) !default; $notify-text-color: var(--nutui-notify-text-color, $color-title) !default; @@ -1113,18 +1318,26 @@ $notify-font-size: var(--nutui-notify-font-size, $font-size-base) !default; $notify-background-color: var(--nutui-notify-background-color, $white) !default; // rate（✅） -$rate-item-margin: var(--nutui-rate-item-margin, 4px) !default; +$rate-item-margin: var(--nutui-rate-item-margin, scale-px(4px)) !default; $rate-icon-color: var(--nutui-rate-icon-color, $color-primary-icon) !default; $rate-icon-inactive-color: var( --nutui-rate-icon-inactive-color, $color-primary-icon-disabled ) !default; -$rate-icon-size: var(--nutui-rate-icon-size, 12px) !default; +$rate-icon-size: var(--nutui-rate-icon-size, scale-font-px(12px)) !default; $rate-font-color: var(--nutui-rate-font-color, $color-primary-icon) !default; -$rate-font-size: var(--nutui-rate-font-size, 12px) !default; +$rate-font-size: var(--nutui-rate-font-size, $font-size-s) !default; +$rate-font-size-large: var( + --nutui-rate-font-size-large, + calc($rate-font-size + scale-font-px(6px)) +) !default; +$rate-font-size-small: var( + --nutui-rate-font-size-small, + calc($rate-font-size - scale-font-px(2px)) +) !default; // tabbar（✅） -$tabbar-height: var(--nutui-tabbar-height, 46px) !default; +$tabbar-height: var(--nutui-tabbar-height, scale-px(46px)) !default; $tabbar-active-color: var(--nutui-tabbar-active-color, $color-primary) !default; $tabbar-inactive-color: var( --nutui-tabbar-inactive-color, @@ -1145,14 +1358,23 @@ $tabbar-text-large-font-weight: var( --nutui-tabbar-text-large-font-weight, $font-weight ) !default; -$tabbar-text-line-height: var(--nutui-tabbar-text-line-height, 20px) !default; -$tabbar-text-margin-top: var(--nutui-tabbar-text-margin-top, 4px) !default; +$tabbar-text-line-height: var( + --nutui-tabbar-text-line-height, + scale-px(20px) +) !default; +$tabbar-text-margin-top: var( + --nutui-tabbar-text-margin-top, + scale-px(4px) +) !default; //pulltorefresh -$pulltorefresh-icon-width: var(--nutui-pulltorefresh-icon-width, 36px) !default; +$pulltorefresh-icon-width: var( + --nutui-pulltorefresh-icon-width, + scale-px(36px) +) !default; $pulltorefresh-icon-height: var( --nutui-pulltorefresh-icon-height, - 26px + scale-px(26px) ) !default; $pulltorefresh-color-primary: var( --nutui-pulltorefresh-color-primary, @@ -1166,13 +1388,13 @@ $infiniteloading-color: var( ) !default; $infiniteloading-icon-size: var( --nutui-infiniteloading-icon-size, - 24px + $font-size-xxl ) !default; //range（✅） $range-color: var(--nutui-range-color, $color-title) !default; -$range-height: var(--nutui-range-height, 4px) !default; -$range-margin: var(--nutui-range-margin, 15px) !default; +$range-height: var(--nutui-range-height, scale-px(4px)) !default; +$range-margin: var(--nutui-range-margin, scale-px(15px)) !default; $range-inactive-color: var( --nutui-range-inactive-color, $color-primary-light-pressed @@ -1182,15 +1404,15 @@ $range-button-background: var( --nutui-range-button-background, $color-primary-text ) !default; -$range-button-width: var(--nutui-range-button-width, 24px) !default; -$range-button-height: var(--nutui-range-button-height, 24px) !default; +$range-button-width: var(--nutui-range-button-width, scale-px(24px)) !default; +$range-button-height: var(--nutui-range-button-height, scale-px(24px)) !default; $range-button-border: var( --nutui-range-button-border, - 1px solid $color-primary + scale-px(1px) solid $color-primary ) !default; //swiper（✅） -$swiper-indicator-bottom: var(--nutui-swiper-indicator-bottom, 12px); +$swiper-indicator-bottom: var(--nutui-swiper-indicator-bottom, scale-px(12px)); //address $address-tab-line-background: linear-gradient( @@ -1201,7 +1423,10 @@ $address-tab-line-background: linear-gradient( //steps（✅） $steps-background-color: var(--nutui-steps-background-color, $white) !default; -$steps-base-head-height: var(--nutui-steps-base-head-height, 14px) !default; +$steps-base-head-height: var( + --nutui-steps-base-head-height, + scale-px(14px) +) !default; $steps-base-head-background-color: var( --nutui-steps-base-head-background-color, $color-background @@ -1209,7 +1434,7 @@ $steps-base-head-background-color: var( $steps-base-head-border: var(--nutui-steps-base-head-border, none) !default; $steps-base-head-text-size: var( --nutui-steps-base-head-text-size, - 12px + $font-size-s ) !default; $steps-base-head-size: var( --nutui-steps-base-icon-size, @@ -1219,24 +1444,30 @@ $steps-base-head-color: var( --nutui-steps-base-head-color, $color-text ) !default; -$steps-base-head-dot-size: var(--nutui-steps-base-head-dot-size, 6px) !default; +$steps-base-head-dot-size: var( + --nutui-steps-base-head-dot-size, + $icon-size-6 +) !default; $steps-base-head-dot-background-color: var( --nutui-steps-base-head-dot-background-color, $color-text-disabled ) !default; $steps-base-head-icon-size: var( --nutui-steps-base-head-icon-size, - 16px + $font-size-md ) !default; $steps-double-head-icon-size: var( --nutui-steps-base-head-icon-size-right, - 20px + scale-px(20px) ) !default; $steps-vertical-head-icon-size: var( --nutui-steps-vertical-item-icon-size, - 20px + scale-px(20px) +) !default; +$steps-base-line-height: var( + --nutui-steps-base-line-height, + scale-px(1px) ) !default; -$steps-base-line-height: var(--nutui-steps-base-line-height, 1px) !default; $steps-base-line-background: var( --nutui-steps-base-line-background, $color-border @@ -1251,7 +1482,7 @@ $steps-base-title-color: var( ) !default; $steps-base-description-margin-top: var( --nutui-steps-base-title-margin-bottom, - 2px + scale-px(2px) ) !default; $steps-base-description-font-size: var( --nutui-steps-base-description-font-size, @@ -1344,23 +1575,23 @@ $steps-enhanced-finish-head-text-color: var( ) !default; $steps-horizontal-item-padding-right: var( --nutui-steps-horizontal-item-padding-right, - 28px + scale-px(28px) ) !default; $steps-horizontal-item-line-padding: var( --nutui-steps-horizontal-item-line-padding, - 0 8px + 0 scale-px(8px) ) !default; $steps-horizontal-item-special-padding-right: var( --nutui-steps-horizontal-item-special-padding-right, - 22px + scale-px(22px) ) !default; $steps-horizontal-item-special-3-padding-right: var( --nutui-steps-horizontal-item-special-3-padding-right, - 9px + scale-px(9px) ) !default; $steps-vertical-item-padding-bottom: var( --nutui-steps-vertical-item-padding-bottom, - 13px + scale-px(12px) ) !default; $steps-vertical-title-font-size: var( --nutui-steps-vertical-title-font-size, @@ -1368,11 +1599,11 @@ $steps-vertical-title-font-size: var( ) !default; $steps-vertical-title-margin-bottom: var( --nutui-steps-vertical-title-margin-bottom, - 4px + scale-px(3px) ) !default; $steps-vertical-line-height: var( --nutui-steps-vertical-line-height, - 18px + scale-px(20px) ) !default; $steps-vertical-description-font-size: var( --nutui-steps-vertical-description-font-size, @@ -1380,15 +1611,15 @@ $steps-vertical-description-font-size: var( ) !default; $steps-vertical-description-margin: var( --nutui-steps-vertical-description-margin, - 0 0 1px + 0 0 scale-px(1px) ) !default; // dialog（✅） -$dialog-min-width: var(--nutui-dialog-min-width, 240px) !default; -$dialog-width: var(--nutui-dialog-width, 295px) !default; -$dialog-padding: var(--nutui-dialog-padding, 24px) !default; -$dialog-max-height: var(--nutui-dialog-max-height, 420px) !default; -$dialog-min-height: var(--nutui-dialog-min-height, 124px) !default; +$dialog-min-width: var(--nutui-dialog-min-width, scale-px(240px)) !default; +$dialog-width: var(--nutui-dialog-width, scale-px(295px)) !default; +$dialog-padding: var(--nutui-dialog-padding, scale-px(24px)) !default; +$dialog-max-height: var(--nutui-dialog-max-height, scale-px(420px)) !default; +$dialog-min-height: var(--nutui-dialog-min-height, scale-px(124px)) !default; $dialog-border-radius: var(--nutui-dialog-border-radius, $radius-xl) !default; $dialog-background: var( --nutui-dialog-background, @@ -1396,16 +1627,19 @@ $dialog-background: var( ) !default; $dialog-title-margin-bottom: var( --nutui-dialog-title-margin-bottom, - 8px + scale-px(8px) +) !default; +$dialog-content-margin: var( + --nutui-dialog-content-margin, + 0 0 scale-px(20px) 0 ) !default; -$dialog-content-margin: var(--nutui-dialog-content-margin, 0 0 20px 0) !default; $dialog-content-max-height: var( --nutui-dialog-content-max-height, - 268px + scale-px(268px) ) !default; $dialog-content-line-height: var( --nutui-dialog-content-line-height, - 20px + scale-px(20px) ) !default; $dialog-content-text-align: var( --nutui-dialog-content-text-align, @@ -1413,15 +1647,15 @@ $dialog-content-text-align: var( ) !default; $dialog-footer-button-border: var( --nutui-dialog-footer-button-border, - 6px + scale-px(6px) ) !default; $dialog-footer-button-min-width: var( --nutui-dialog-footer-button-min-width, - 117px + scale-px(117px) ) !default; $dialog-footer-cancel-margin-right: var( --nutui-dialog-footer-cancel-margin-right, - 12px + scale-px(12px) ) !default; $dialog-footer-cancel-bg: var( --nutui-dialog-footer-cancel-bg, @@ -1429,24 +1663,27 @@ $dialog-footer-cancel-bg: var( ); $dialog-footer-ok-max-width: var( --nutui-dialog-footer-ok-max-width, - 128px + scale-px(128px) ) !default; $dialog-footer-badge-height: var( --nutui-dialog-footer-badge-height, - 14px + scale-px(14px) ) !default; $dialog-footer-badge-fontsize: var( --nutui-dialog-footer-badge-fontsize, - 10px + scale-px(10px) ) !default; $dialog-footer-badge-padding: var( --nutui-dialog-footer-badge-padding, - 0 3px + 0 scale-px(3px) +) !default; +$dialog-footer-badge-top: var( + --nutui-dialog-footer-badge-top, + scale-px(-8px) ) !default; -$dialog-footer-badge-top: var(--nutui-dialog-footer-badge-top, -8px) !default; $dialog-footer-badge-border-radius: var( --nutui-dialog-footer-badge-border-radius, - 2px 2px 0px 2px + scale-px(2px) scale-px(2px) 0px scale-px(2px) ) !default; $dialog-footer-badge-bg-ok: var( --nutui-dialog-footer-badge-bg-ok, @@ -1474,18 +1711,18 @@ $dialog-header-font-weight: var( ) !default; $dialog-vertical-footer-ok-margin-top: var( --nutui-dialog-vertical-footer-ok-margin-top, - 16px + scale-px(16px) ) !default; $dialog-close-color: var(--nutui-dialog-close-color, #ffffff) !default; -$dialog-close-width: var(--nutui-dialog-close-width, 16px) !default; -$dialog-close-height: var(--nutui-dialog-close-height, 16px) !default; +$dialog-close-width: var(--nutui-dialog-close-width, scale-px(16px)) !default; +$dialog-close-height: var(--nutui-dialog-close-height, scale-px(16px)) !default; $dialog-bottom-close-icon-size: var( --nutui-dialog-bottom-close-icon-size, - 24px + $font-size-xxl ) !default; -$dialog-close-top: var(--nutui-dialog-close-top, 16px) !default; -$dialog-close-left: var(--nutui-dialog-close-left, 16px) !default; -$dialog-close-right: var(--nutui-dialog-close-right, 16px) !default; +$dialog-close-top: var(--nutui-dialog-close-top, scale-px(16px)) !default; +$dialog-close-left: var(--nutui-dialog-close-left, scale-px(16px)) !default; +$dialog-close-right: var(--nutui-dialog-close-right, scale-px(16px)) !default; // checkbox（✅） $checkbox-label-disable-color: var( @@ -1517,15 +1754,15 @@ $checkbox-button-color: $color-text; $checkbox-button-background: $color-background; $checkbox-button-padding: var( --nutui-checkbox-button-padding, - 5px 18px + scale-px(5px) scale-px(18px) ) !default; $checkbox-button-border-radius: var( --nutui-checkbox-button-border-radius, - 15px + scale-px(15px) ) !default; $checkbox-button-active-border: var( --nutui-checkbox-button-active-border, - 1px solid $color-primary + scale-px(1px) solid $color-primary ) !default; $checkbox-button-disabled-active-color: var( --nutui-checkbox-button-disabled-active-color, @@ -1537,12 +1774,15 @@ $checkbox-list-background-color: var( ) !default; $checkbox-list-item-border: var( --nutui-checkbox-list-item-border, - 1px solid $color-border + scale-px(1px) solid $color-border +) !default; +$checkbox-list-padding: var( + --nutui-checkbox-list-padding, + 0 0 0 scale-px(12px) ) !default; -$checkbox-list-padding: var(--nutui-checkbox-list-padding, 0 0 0 12px) !default; $checkbox-list-item-padding: var( --nutui-checkbox-list-item-padding, - 12px 12px 12px 0 + scale-px(12px) scale-px(12px) scale-px(12px) 0 ) !default; //radio（✅） @@ -1559,16 +1799,22 @@ $radio-label-font-size: var( --nutui-radio-label-font-size, $font-size-s ) !default; -$radio-label-margin-left: var(--nutui-radio-label-margin-left, 4px) !default; +$radio-label-margin-left: var( + --nutui-radio-label-margin-left, + scale-px(4px) +) !default; $radio-button-font-size: var( --nutui-radio-button-font-size, $font-size-s ) !default; $radio-button-color: $color-text; -$radio-button-padding: var(--nutui-radio-button-padding, 5px 18px) !default; +$radio-button-padding: var( + --nutui-radio-button-padding, + scale-px(5px) scale-px(18px) +) !default; $radio-button-border-radius: var( --nutui-radio-button-border-radius, - 15px + scale-px(15px) ) !default; $radio-button-background: var( --nutui-radio-button-background, @@ -1576,20 +1822,23 @@ $radio-button-background: var( ) !default; $radio-button-active-border: var( --nutui-radio-button-active-border, - 1px solid $color-primary + scale-px(1px) solid $color-primary ) !default; $radio-button-disabled-active-color: var( --nutui-radio-button-disabled-active-color, $white ) !default; -$radiogroup-radio-margin: var(--nutui-radiogroup-radio-margin, 20px) !default; +$radiogroup-radio-margin: var( + --nutui-radiogroup-radio-margin, + scale-px(20px) +) !default; $radiogroup-radio-margin-bottom: var( --nutui-radiogroup-radio-margin-bottom, - 5px + scale-px(5px) ) !default; $radiogroup-radio-label-margin: var( --nutui-radiogroup-radio-label-margin, - 0 5px + 0 scale-px(5px) ) !default; // signature（✅） @@ -1597,7 +1846,10 @@ $signature-border-color: var( --nutui-signature-border-color, $color-border ) !default; -$signature-border-width: var(--nutui-signature-border-width, 1px) !default; +$signature-border-width: var( + --nutui-signature-border-width, + scale-px(1px) +) !default; $signature-height: var(--nutui-signature-height, 10rem) !default; $signature-background-color: var( --nutui-signature-background-color, @@ -1625,42 +1877,60 @@ $fixednav-item-active-color: var( ) !default; // NoticeBar（✅） -$noticebar-height: var(--nutui-noticebar-height, 36px) !default; +$noticebar-height: var(--nutui-noticebar-height, scale-px(36px)) !default; $noticebar-background: var( --nutui-noticebar-background, rgba(251, 248, 220, 1) ) !default; $noticebar-color: var(--nutui-noticebar-color, #d9500b) !default; $noticebar-font-size: var(--nutui-noticebar-font-size, $font-size-s) !default; -$noticebar-line-height: var(--nutui-noticebar-line-height, 24px) !default; -$noticebar-box-padding: var(--nutui-noticebar-box-padding, 0 16px) !default; +$noticebar-line-height: var( + --nutui-noticebar-line-height, + scale-px(24px) +) !default; +$noticebar-box-padding: var( + --nutui-noticebar-box-padding, + 0 scale-px(16px) +) !default; $noticebar-border-radius: var(--nutui-noticebar-border-radius, 0) !default; $noticebar-wrap-padding: var( --nutui-noticebar-wrapable-padding, - 8px 16px + scale-px(8px) scale-px(16px) ) !default; -$noticebar-icon-gap: var(--nutui-noticebar-icon-gap, 4px) !default; +$noticebar-icon-gap: var(--nutui-noticebar-icon-gap, scale-px(4px)) !default; $noticebar-left-icon-width: var( --nutui-noticebar-left-icon-width, - 16px + scale-px(16px) ) !default; $noticebar-right-icon-width: var( --nutui-noticebar-right-icon-width, - 16px + scale-px(16px) ) !default; // TimeSelect（✅） -$timeselect-date-width: var(--nutui-timeselect-date-width, 140px) !default; -$timeselect-date-height: var(--nutui-timeselect-date-height, 40px) !default; +$timeselect-date-width: var( + --nutui-timeselect-date-width, + scale-px(140px) +) !default; +$timeselect-date-height: var( + --nutui-timeselect-date-height, + scale-px(40px) +) !default; $timeselect-date-active-color: var( --nutui-timeselect-date-active-color, $color-title ) !default; -$timeselect-time-width: var(--nutui-timeselect-time-width, 100px) !default; -$timeselect-time-height: var(--nutui-timeselect-time-height, 50px) !default; +$timeselect-time-width: var( + --nutui-timeselect-time-width, + scale-px(110px) +) !default; +$timeselect-time-height: var( + --nutui-timeselect-time-height, + scale-px(50px) +) !default; $timeselect-time-margin: var( --nutui-timeselect-time-margin, - 0 10px 10px 0 + 0 scale-px(10px) scale-px(10px) 0 ) !default; $timeselect-time-background: var( --nutui-timeselect-time-background, @@ -1668,12 +1938,12 @@ $timeselect-time-background: var( ) !default; //tag（✅） -$tag-padding: var(--nutui-tag-padding, 0px 2px) !default; +$tag-padding: var(--nutui-tag-padding, 0px scale-px(2px)) !default; $tag-font-size: var(--nutui-tag-font-size, $font-size-xxs) !default; -$tag-border-radius: var(--nutui-tag-border-radius, 2px) !default; -$tag-height: var(--nutui-tag-height, 14px) !default; +$tag-border-radius: var(--nutui-tag-border-radius, scale-px(2px)) !default; +$tag-height: var(--nutui-tag-height, scale-px(14px)) !default; $tag-color: var(--nutui-tag-color, #ffffff) !default; -$tag-border-width: var(--nutui-tag-border-width, 1px) !default; +$tag-border-width: var(--nutui-tag-border-width, scale-px(1px)) !default; $tag-background-color: var(--nutui-tag-background-color, $color-title) !default; $tag-primary-background-color: var( --nutui-tag-primary-background-color, @@ -1695,14 +1965,17 @@ $tag-warning-background-color: var( --nutui-tag-warning-background-color, $color-warning ) !default; -$tag-round-border-radius: var(--nutui-tag-round-border-radius, 8px) !default; +$tag-round-border-radius: var( + --nutui-tag-round-border-radius, + scale-px(8px) +) !default; $tag-mark-border-radius: var( --nutui-tag-mark-border-radius, - 0 8px 8px 0 + 0 scale-px(8px) scale-px(8px) 0 ) !default; //badge（✅） -$badge-height: var(--nutui-badge-height, 14px) !default; +$badge-height: var(--nutui-badge-height, scale-px(14px)) !default; $badge-background-color: var( --nutui-badge-background-color, $color-primary @@ -1715,26 +1988,38 @@ $badge-color: var(--nutui-badge-color, $color-primary-text) !default; $badge-font-size: var(--nutui-badge-font-size, $font-size-xxxs) !default; $badge-border: var( --nutui-badge-border, - 1px solid $color-primary-text + scale-px(1px) solid $color-primary-text ) !default; $badge-border-radius: var(--nutui-badge-border-radius, $badge-height) !default; -$badge-min-width: var(--nutui-badge-min-width, 6px) !default; -$badge-padding: var(--nutui-badge-padding, 1px 4px) !default; -$badge-icon-padding: var(--nutui-badge-icon-padding, 2px) !default; -$badge-icon-size: var(--nutui-badge-icon-size, 10px) !default; +$badge-min-width: var(--nutui-badge-min-width, scale-px(6px)) !default; +$badge-padding: var( + --nutui-badge-padding, + scale-px(1px) scale-px(4px) +) !default; +$badge-icon-padding: var(--nutui-badge-icon-padding, scale-px(2px)) !default; +$badge-icon-size: var(--nutui-badge-icon-size, $font-size-xxs) !default; $badge-content-transform: var( --nutui-badge-content-transform, translate(50%, -50%) ) !default; $badge-z-index: var(--nutui-badge-z-index, 1) !default; -$badge-dot-width: var(--nutui-badge-dot-width, 6px) !default; -$badge-dot-small-width: var(--nutui-badge-dot-small-width, 4px) !default; -$badge-dot-large-width: var(--nutui-badge-dot-large-width, 8px) !default; -$badge-dot-border: var(--nutui-badge-dot-border, 1px solid $color-primary-text); +$badge-dot-width: var(--nutui-badge-dot-width, scale-px(6px)) !default; +$badge-dot-small-width: var( + --nutui-badge-dot-small-width, + scale-px(4px) +) !default; +$badge-dot-large-width: var( + --nutui-badge-dot-large-width, + scale-px(8px) +) !default; +$badge-dot-border: var( + --nutui-badge-dot-border, + scale-px(1px) solid $color-primary-text +); $badge-outline-color: var(--nutui-badge-outline-color, $color-primary) !default; $badge-outline-border: var( --nutui-badge-outline-border, - 1px solid $color-primary + scale-px(1px) solid $color-primary ); //popover（✅） @@ -1753,11 +2038,11 @@ $popover-divider-color: var( --nutui-popover-divider-color, $color-border ) !default; -$popover-padding: var(--nutui-popover-padding, 8px) !default; -$popover-item-width: var(--nutui-popover-item-width, 160px) !default; +$popover-padding: var(--nutui-popover-padding, scale-px(8px)) !default; +$popover-item-width: var(--nutui-popover-item-width, scale-px(160px)) !default; //progress（✅） -$progress-height: var(--nutui-progress-height, 10px) !default; +$progress-height: var(--nutui-progress-height, scale-px(10px)) !default; $progress-color: var( --nutui-progress-color, $color-primary-gradient-1 @@ -1766,7 +2051,10 @@ $progress-background: var( --nutui-progress-background, $color-background ) !default; -$progress-border-radius: var(--nutui-progress-border-radius, 12px) !default; +$progress-border-radius: var( + --nutui-progress-border-radius, + scale-px(12px) +) !default; $progress-text-color: var( --nutui-progress-text-color, $color-text-help @@ -1775,19 +2063,25 @@ $progress-text-background: var( --nutui-progress-text-background, $color-primary-gradient-1 ) !default; -$progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default; -$progress-text-font-size: var(--nutui-progress-text-font-size, 13px) !default; +$progress-text-padding: var( + --nutui-progress-text-padding, + 0 scale-px(5px) +) !default; +$progress-text-font-size: var( + --nutui-progress-text-font-size, + scale-font-px(13px) +) !default; $progress-text-position-top: var( --nutui-progress-text-position-top, - -4px + scale-px(-4px) ) !default; $progress-text-position-bottom: var( --nutui-progress-text-position-bottom, - -4px + scale-px(-4px) ) !default; $progress-text-border-radius: var( --nutui-progress-text-border-radius, - 5px + scale-px(5px) ) !default; //pagination（✅） @@ -1812,18 +2106,24 @@ $pagination-disable-background-color: var( ) !default; $pagination-item-border-width: var( --nutui-pagination-item-border-width, - 1px + scale-px(1px) ) !default; $pagination-item-border-radius: var( --nutui-pagination-item-border-radius, - 2px + scale-px(2px) ) !default; $pagination-prev-next-padding: var( --nutui-pagination-prev-next-padding, - 0 12px + 0 scale-px(12px) +) !default; +$pagination-lite-width: var( + --nutui-pagination-lite-width, + scale-px(40px) +) !default; +$pagination-lite-height: var( + --nutui-pagination-lite-height, + scale-px(20px) ) !default; -$pagination-lite-width: var(--nutui-pagination-lite-width, 40px) !default; -$pagination-lite-height: var(--nutui-pagination-lite-height, 20px) !default; $pagination-lite-radius: var( --nutui-pagination-lite-radius, $radius-xs @@ -1838,19 +2138,19 @@ $pagination-lite-active-background-color: var( ) !default; // tabs（✅） -$tabs-titles-height: var(--nutui-tabs-titles-height, 44px) !default; +$tabs-titles-height: var(--nutui-tabs-titles-height, scale-px(44px)) !default; $tabs-titles-background-color: var( --nutui-tabs-titles-background-color, $color-background ) !default; -$tabs-titles-gap: var(--nutui-tabs-titles-gap, 12px) !default; +$tabs-titles-gap: var(--nutui-tabs-titles-gap, scale-px(12px)) !default; $tabs-titles-font-size: var( --nutui-tabs-titles-font-size, $font-size-base ) !default; $tabs-titles-item-min-width: var( --nutui-tabs-titles-item-min-width, - 50px + scale-px(50px) ) !default; $tabs-titles-item-color: var( --nutui-tabs-titles-item-color, @@ -1872,13 +2172,16 @@ $tabs-titles-item-active-background-color: var( --nutui-tabs-titles-item-active-background-color, $color-background-overlay ) !default; -$tabs-tab-line-width: var(--nutui-tabs-tab-line-width, 12px) !default; -$tabs-tab-line-height: var(--nutui-tabs-tab-line-height, 2px) !default; +$tabs-tab-line-width: var(--nutui-tabs-tab-line-width, scale-px(12px)) !default; +$tabs-tab-line-height: var( + --nutui-tabs-tab-line-height, + scale-px(2px) +) !default; $tabs-tab-line-color: var(--nutui-tabs-tab-line-color, $color-primary) !default; $tabs-tab-line-bottom: var(--nutui-tabs-line-bottom, 15%) !default; $tabs-tab-line-border-radius: var( --nutui-tabs-line-border-radius, - 2px + scale-px(2px) ) !default; $tabs-tab-line-opacity: var(--nutui-tabs-tab-line-opacity, 1) !default; $tabs-tab-button-border-radius: var( @@ -1891,15 +2194,15 @@ $tabs-tab-button-active-background-color: var( ) !default; $tabs-tab-button-active-border: var( --nutui-tabs-button-active-border, - 1px solid $color-primary + scale-px(1px) solid $color-primary ) !default; $tabs-vertical-titles-width: var( --nutui-tabs-vertical-titles-width, - 100px + scale-px(100px) ) !default; $tabs-vertical-titles-item-height: var( --nutui-tabs-vertical-titles-item-height, - 40px + scale-px(40px) ) !default; $tabs-vertical-tab-line-color: var( --nutui-tabs-vertical-tab-line-color, @@ -1911,17 +2214,20 @@ $tabs-vertical-tab-line-color: var( ) !default; $tabs-vertical-tab-line-width: var( --nutui-tabs-vertical-tab-line-width, - 3px + scale-px(3px) ) !default; $tabs-vertical-tab-line-height: var( --nutui-tabs-vertical-tab-line-height, - 12px + scale-px(12px) ) !default; $tabs-titles-item-smile-bottom: var( --nutui-tabs-titles-item-smile-bottom, -10% ) !default; -$tabs-tabpane-padding: var(--nutui-tabs-tabpane-padding, 24px 20px) !default; +$tabs-tabpane-padding: var( + --nutui-tabs-tabpane-padding, + scale-px(24px) scale-px(20px) +) !default; $tabs-tabpane-background-color: var( --nutui-tabs-tabpane-background-color, #fff @@ -1929,10 +2235,10 @@ $tabs-tabpane-background-color: var( // indicator（✅） $indicator-color: var(--nutui-indicator-color, $color-primary) !default; $indicator-dot-color: var(--nutui-indicator-dot-color, $color-border) !default; -$indicator-dot-size: var(--nutui-indicator-dot-size, 3px) !default; +$indicator-dot-size: var(--nutui-indicator-dot-size, scale-px(3px)) !default; $indicator-dot-active-size: var( --nutui-indicator-dot-active-size, - 6px + scale-px(6px) ) !default; $indicator-border-radius: var( --nutui-indicator-border-radius, @@ -1946,21 +2252,30 @@ $menu-scroll-fixed-z-index: var( --nutui-menu-scroll-fixed-z-index, $mask-z-index ) !default; -$menu-bar-line-height: var(--nutui-menu-bar-line-height, 48px) !default; +$menu-bar-line-height: var( + --nutui-menu-bar-line-height, + scale-px(48px) +) !default; $menu-bar-box-shadow: var( --nutui-menu-bar-box-shadow, - 0 2px 12px rgba(89, 89, 89, 0.12) + 0 scale-px(2px) scale-px(12px) rgba(89, 89, 89, 0.12) ) !default; $menu-bar-opened-z-index: var(--nutui-menu-bar-opened-z-index, 1000) !default; -$menu-title-padding: var(--nutui-menu-title-padding, 0 8px) !default; +$menu-title-padding: var(--nutui-menu-title-padding, 0 scale-px(8px)) !default; $menu-title-font-size: var( --nutui-menu-title-font-size, $font-size-base ) !default; $menu-title-color: var(--nutui-menu-title-color, $color-title) !default; $menu-container-z-index: var(--nutui-menu-container-z-index, 1000) !default; -$menu-content-padding: var(--nutui-menu-content-padding, 12px 24px) !default; -$menu-content-max-height: var(--nutui-menu-content-max-height, 214px) !default; +$menu-content-padding: var( + --nutui-menu-content-padding, + scale-px(12px) scale-px(24px) +) !default; +$menu-content-max-height: var( + --nutui-menu-content-max-height, + scale-px(214px) +) !default; $menu-content-background-color: var( --nutui-menu-content-background-color, $color-background-overlay @@ -1977,8 +2292,11 @@ $menu-item-disabled-color: var( --nutui-menu-item-disabled-color, $color-text-disabled ) !default; -$menu-item-padding: var(--nutui-menu-item-padding, 12px 0) !default; -$menu-item-icon-margin: var(--nutui-menu-item-icon-margin, 8px) !default; +$menu-item-padding: var(--nutui-menu-item-padding, scale-px(12px) 0) !default; +$menu-item-icon-margin: var( + --nutui-menu-item-icon-margin, + scale-px(8px) +) !default; // collapse（✅） $collapse-item-border-bottom: var( @@ -1987,9 +2305,12 @@ $collapse-item-border-bottom: var( ) !default; $collapse-item-header-border-bottom: var( --nutui-collapse-item-header-border-bottom, - 1px solid $color-border + scale-px(1px) solid $color-border +) !default; +$collapse-item-padding: var( + --nutui-collapse-item-padding, + scale-px(13px) scale-px(26px) ) !default; -$collapse-item-padding: var(--nutui-collapse-item-padding, 13px 26px) !default; $collapse-item-color: var(--nutui-collapse-item-color, $color-title) !default; $collapse-item-disabled-color: var( --nutui-collapse-item-disabled-color, @@ -2001,7 +2322,7 @@ $collapse-item-font-size: var( ) !default; $collapse-item-line-height: var( --nutui-collapse-item-line-height, - 24px + scale-px(24px) ) !default; $collapse-item-extra-color: var( --nutui-collapse-item-extra-color, @@ -2009,7 +2330,7 @@ $collapse-item-extra-color: var( ) !default; $collapse-wrapper-content-padding: var( --nutui-collapse-wrapper-content-padding, - 12px 26px + scale-px(12px) scale-px(26px) ) !default; $collapse-wrapper-content-color: var( --nutui-collapse-wrapper-content-color, @@ -2030,14 +2351,17 @@ $collapse-wrapper-content-background-color: var( // searchbar（✅） $searchbar-width: var(--nutui-searchbar-width, 100%) !default; -$searchbar-padding: var(--nutui-searchbar-padding, 1px 8px) !default; +$searchbar-padding: var( + --nutui-searchbar-padding, + scale-px(1px) scale-px(8px) +) !default; $searchbar-background: var( --nutui-searchbar-background, $color-background-sunken ) !default; $searchbar-color: var(--nutui-searchbar-color, $color-title) !default; -$searchbar-gap: var(--nutui-searchbar-gap, 12px) !default; -$searchbar-inner-gap: var(--nutui-searchbar-inner-gap, 8px) !default; +$searchbar-gap: var(--nutui-searchbar-gap, scale-px(12px)) !default; +$searchbar-inner-gap: var(--nutui-searchbar-inner-gap, scale-px(8px)) !default; $searchbar-font-size: var( --nutui-searchbar-font-size, $font-size-base @@ -2048,17 +2372,20 @@ $searchbar-content-background: var( ) !default; $searchbar-content-border-radius: var( --nutui-searchbar-content-border-radius, - 8px + scale-px(8px) ) !default; $searchbar-content-round-border-radius: var( --nutui-searchbar-content-round-border-radius, - 19px + scale-px(19px) +) !default; +$searchbar-icon-size: var(--nutui-searchbar-icon-size, scale-px(20px)) !default; +$searchbar-input-height: var( + --nutui-searchbar-input-height, + scale-px(38px) ) !default; -$searchbar-icon-size: var(--nutui-searchbar-icon-size, 20px) !default; -$searchbar-input-height: var(--nutui-searchbar-input-height, 38px) !default; $searchbar-input-padding: var( --nutui-searchbar-input-padding, - 0 0 0 8px + 0 0 0 scale-px(8px) ) !default; $searchbar-input-text-color: var( --nutui-searchbar-input-text-color, @@ -2074,14 +2401,14 @@ $searchbar-input-text-align: var( ) !default; // segmented -$segmented-height: var(--nutui-segmented-height, 24px) !default; +$segmented-height: var(--nutui-segmented-height, scale-px(24px)) !default; $segmented-padding: var(--nutui-segmented-padding, $spacing-xxxs) !default; $segmented-border-radius: var(--nutui-segmented-radius, $radius-xs) !default; $segmented-background: var( --nutui-segmented-background, $color-mask-part ) !default; -$segmented-item-height: var(--nutui-segmented-height, 20px) !default; +$segmented-item-height: var(--nutui-segmented-height, scale-px(20px)) !default; $segmented-item-padding: var( --nutui-segmented-item-padding, 0 $spacing-xs @@ -2105,9 +2432,15 @@ $segmented-icon-margin-right: var( ) !default; // empty（✅） -$empty-padding: var(--nutui-empty-padding, 32px 40px) !default; -$empty-image-size: var(--nutui-empty-image-size, 160px) !default; -$empty-image-small-size: var(--nutui-empty-image-small-size, 120px) !default; +$empty-padding: var( + --nutui-empty-padding, + scale-px(32px) scale-px(40px) +) !default; +$empty-image-size: var(--nutui-empty-image-size, scale-px(160px)) !default; +$empty-image-small-size: var( + --nutui-empty-image-small-size, + scale-px(120px) +) !default; $empty-title-margin-top: var(--nutui-empty-title-margin-top, 0px) !default; $empty-background-color: var( --nutui-empty-background-color, @@ -2115,7 +2448,7 @@ $empty-background-color: var( ) !default; $empty-title-margin-bottom: var( --nutui-empty-title-margin-bottom, - 12px + scale-px(12px) ) !default; $empty-title-line-height: var( --nutui-empty-title-line-height, @@ -2128,28 +2461,43 @@ $empty-description-line-height: var( // cascader（✅） $cascader-font-size: var(--nutui-cascader-font-size, $font-size-base) !default; -$cascader-pane-height: var(--nutui-cascader-pane-height, 342px) !default; -$cascader-pane-paddingTop: var(--nutui-cascader-pane-paddingTop, 10px) !default; +$cascader-pane-height: var( + --nutui-cascader-pane-height, + scale-px(342px) +) !default; +$cascader-pane-paddingTop: var( + --nutui-cascader-pane-paddingTop, + scale-px(10px) +) !default; $cascader-icon-checklist-marginLeft: var( --nutui-cascader-icon-checklist-marginLeft, - 10px + scale-px(10px) ) !default; $cascader-tabs-item-padding: var( --nutui-cascader-tabs-item-padding, - 0 10px + 0 scale-px(10px) ) !default; $cascader-bar-padding: var( --nutui-cascader-bar-padding, - 24px 20px 17px + scale-px(24px) scale-px(20px) scale-px(17px) ) !default; $cascader-bar-font-size: var( --nutui-cascader-bar-font-size, $font-size-xl ) !default; -$cascader-bar-line-height: var(--nutui-cascader-bar-line-height, 20px) !default; +$cascader-bar-line-height: var( + --nutui-cascader-bar-line-height, + scale-px(20px) +) !default; $cascader-bar-color: var(--nutui-cascader-bar-color, $color-title) !default; -$cascader-item-height: var(--nutui-cascader-item-height, 40px) !default; -$cascader-item-padding: var(--nutui-cascader-item-padding, 10px 20px) !default; +$cascader-item-height: var( + --nutui-cascader-item-height, + scale-px(40px) +) !default; +$cascader-item-padding: var( + --nutui-cascader-item-padding, + scale-px(10px) scale-px(20px) +) !default; $cascader-item-margin: var(--nutui-cascader-item-margin, 0px) !default; $cascader-item-border-bottom: var( --nutui-cascader-item-border-bottom, @@ -2182,10 +2530,13 @@ $form-item-label-font-size: var( --nutui-form-item-label-font-size, $font-size-s ) !default; -$form-item-label-width: var(--nutui-form-item-label-width, 90px) !default; +$form-item-label-width: var( + --nutui-form-item-label-width, + scale-px(90px) +) !default; $form-item-label-margin-right: var( --nutui-form-item-label-margin-right, - 10px + scale-px(10px) ) !default; $form-item-label-text-align: var( --nutui-form-item-label-text-align, @@ -2193,7 +2544,7 @@ $form-item-label-text-align: var( ) !default; $form-item-required-margin-right: var( --nutui-form-item-required-margin-right, - 4px + scale-px(4px) ) !default; $form-item-body-font-size: var( --nutui-form-item-body-font-size, @@ -2221,15 +2572,15 @@ $skeleton-background: var( $skeleton-line-width: var(--nutui-skeleton-line-width, 100%) !default; $skeleton-line-small-height: var( --nutui-skeleton-line-small-height, - 16px + scale-px(16px) ) !default; $skeleton-line-normal-height: var( --nutui-skeleton-line-normal-height, - 24px + scale-px(24px) ) !default; $skeleton-line-large-height: var( --nutui-skeleton-line-large-height, - 32px + scale-px(32px) ) !default; $skeleton-line-border-radius: var( --nutui-skeleton-line-border-radius, @@ -2237,7 +2588,7 @@ $skeleton-line-border-radius: var( ) !default; // card（✅） -$card-border-radius: var(--nutui-card-border-radius, 4px) !default; +$card-border-radius: var(--nutui-card-border-radius, scale-px(4px)) !default; // grid（✅） $grid-border-width: var(--nutui-grid-border-width, 0px) !default; @@ -2248,13 +2599,16 @@ $grid-item-border-radius: var( ) !default; $grid-item-content-padding: var( --nutui-grid-item-content-padding, - 16px 8px + scale-px(16px) scale-px(8px) ) !default; $grid-item-content-bg-color: var( --nutui-grid-item-content-bg-color, var(--nutui-gray-1) ) !default; -$grid-item-text-margin: var(--nutui-grid-item-text-margin, 8px) !default; +$grid-item-text-margin: var( + --nutui-grid-item-text-margin, + scale-px(8px) +) !default; $grid-item-text-color: var(--nutui-grid-item-text-color, $color-title) !default; $grid-item-text-font-size: var( --nutui-grid-item-text-font-size, @@ -2263,7 +2617,7 @@ $grid-item-text-font-size: var( // table（✅） $table-border-color: var(--nutui-table-border-color, $color-border) !default; -$table-cols-padding: var(--nutui-table-cols-padding, 10px) !default; +$table-cols-padding: var(--nutui-table-cols-padding, scale-px(10px)) !default; $table-tr-even-bg-color: var( --nutui-table-tr-even-bg-color, $color-background @@ -2271,17 +2625,20 @@ $table-tr-even-bg-color: var( $table-tr-odd-bg-color: var(--nutui-table-tr-odd-bg-color, $white) !default; $table-sticky-left-shadow: var( --nutui-table-sticky-left-shadow, - 4px 0 8px 0 rgba(0, 0, 0, 0.1) + scale-px(4px) 0 scale-px(8px) 0 rgba(0, 0, 0, 0.1) ) !default; $table-sticky-right-shadow: var( --nutui-table-sticky-right-shadow, - -4px 0 8px 0 rgba(0, 0, 0, 0.1) + scale-px(-4px) 0 scale-px(8px) 0 rgba(0, 0, 0, 0.1) ) !default; // navbar（✅） $navbar-width: var(--nutui-navbar-width, 100%) !default; -$navbar-height: var(--nutui-navbar-height, 44px) !default; -$navbar-margin-bottom: var(--nutui-navbar-margin-bottom, 20px) !default; +$navbar-height: var(--nutui-navbar-height, scale-px(44px)) !default; +$navbar-margin-bottom: var( + --nutui-navbar-margin-bottom, + scale-px(20px) +) !default; $navbar-background: var(--nutui-navbar-background, $white) !default; $navbar-box-shadow: var(--nutui-navbar-box-shadow, none) !default; $navbar-color: var(--nutui-navbar-color, $color-title) !default; @@ -2305,9 +2662,12 @@ $sidebar-background-color: var( $color-background ) !default; $sidebar-border-radius: var(--nutui-sidebar-border-radius, 0) !default; -$sidebar-width: var(--nutui-sidebar-width, 104px) !default; -$sidebar-max-width: var(--nutui-sidebar-max-width, 128px) !default; -$sidebar-title-height: var(--nutui-sidebar-title-height, 52px) !default; +$sidebar-width: var(--nutui-sidebar-width, scale-px(104px)) !default; +$sidebar-max-width: var(--nutui-sidebar-max-width, scale-px(128px)) !default; +$sidebar-title-height: var( + --nutui-sidebar-title-height, + scale-px(52px) +) !default; $sidebar-inactive-font-size: var( --nutui-sidebar-inactive-font-size, $font-size-base @@ -2325,7 +2685,10 @@ $sidebar-active-color: var( $color-primary ) !default; $sidebar-item-background: var(--nutui-sidebar-item-background, $white) !default; -$sidebar-item-padding: var(--nutui-sidebar-item-padding, 24px 20px) !default; +$sidebar-item-padding: var( + --nutui-sidebar-item-padding, + scale-px(24px) scale-px(20px) +) !default; // elevator（✅） $elevator-list-bg-color: var(--nutui-elevator-list-bg-color, $white) !default; @@ -2336,11 +2699,11 @@ $elevator-list-font-size: var( $elevator-list-color: var(--nutui-elevator-list-color, $color-title) !default; $elevator-list-item-padding: var( --nutui-elevator-list-item-padding, - 0 36px 0 20px + 0 scale-px(36px) 0 scale-px(20px) ) !default; $elevator-list-item-name-height: var( --nutui-elevator-list-item-name-height, - 34px + scale-px(34px) ) !default; $elevator-list-item-code-font-size: var( @@ -2357,19 +2720,19 @@ $elevator-list-item-code-font-weight: var( ) !default; $elevator-list-item-code-height: var( --nutui-elevator-list-item-code-height, - 34px + scale-px(34px) ) !default; $elevator-list-item-code-width: var( --nutui-elevator-list-item-code-width, - 34px + scale-px(34px) ) !default; $elevator-list-item-code-border-bottom: var( --nutui-elevator-list-item-code-border-bottom, - 1px solid $color-border + scale-px(1px) solid $color-border ) !default; -$elevator-list-item-code-current-box-shadow: 0 3px 3px 1px - rgba(240, 240, 240, 1) !default; +$elevator-list-item-code-current-box-shadow: 0 scale-px(3px) scale-px(3px) + scale-px(1px) rgba(240, 240, 240, 1) !default; $elevator-list-item-code-current-bg-color: var( --nutui-elevator-list-item-code-current-bg-color, $color-text-disabled @@ -2380,15 +2743,15 @@ $elevator-list-item-code-current-border-radius: var( ) !default; $elevator-list-item-code-current-width: var( --nutui-elevator-list-item-code-current-width, - 45px + scale-px(45px) ) !default; $elevator-list-item-code-current-height: var( --nutui-elevator-list-item-code-current-height, - 45px + scale-px(45px) ) !default; $elevator-list-item-code-current-right: var( --nutui-elevator-list-item-code-current-right, - 60px + scale-px(60px) ) !default; $elevator-list-item-code-current-top: var( --nutui-elevator-list-item-code-current-top, @@ -2398,7 +2761,7 @@ $elevator-list-item-code-current-color: var( --nutui-elevator-list-item-code-current-color, $white ) !default; -$elevator-bars-right: var(--nutui-elevator-bars-right, 16px) !default; +$elevator-bars-right: var(--nutui-elevator-bars-right, scale-px(16px)) !default; $elevator-bars-top: var(--nutui-elevator-bars-top, 50%) !default; $elevator-bars-transform: var( --nutui-elevator-bars-transform, @@ -2427,17 +2790,20 @@ $elevator-list-fixed-bg-color: var( ) !default; $elevator-list-fixed-box-shadow: var( --nutui-elevator-list-fixed-box-shadow, - 0 0 10px #eee + 0 0 scale-px(10px) #eee ) !default; // list（✅） -$list-item-margin: var(--nutui-list-item-margin, 0 0 10px 0) !default; +$list-item-margin: var(--nutui-list-item-margin, 0 0 scale-px(10px) 0) !default; //addresslist $addresslist-bg: var(--nutui-addresslist-bg, #fff) !default; $addresslist-border: var(--nutui-addresslist-border, #f0f0f0) !default; $addresslist-font-color: var(--nutui-addresslist-font-color, #333333) !default; -$addresslist-font-size: var(--nutui-addresslist-font-size, 16px) !default; +$addresslist-font-size: var( + --nutui-addresslist-font-size, + $font-size-md +) !default; $addresslist-mask-bg: var( --nutui-addresslist-mask-bg, rgba(0, 0, 0, 0.4) @@ -2448,7 +2814,7 @@ $addresslist-addr-font-color: var( ) !default; $addresslist-addr-font-size: var( --nutui-addresslist-addr-font-size, - 12px + $font-size-s ) !default; $addresslist-set-bg: var(--nutui-addresslist-set-bg, #f5a623) !default; $addresslist-del-bg: var(--nutui-addresslist-del-bg, #e1251b) !default; @@ -2492,14 +2858,23 @@ $watermark-z-index: var( ) !default; // TrendArrow -$trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default; -$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default; +$trendarrow-font-size: var( + --nutui-trendarrow-font-size, + $font-size-base +) !default; +$trendarrow-icon-margin: var( + --nutui-trendarrow-icon-margin, + scale-px(4px) +) !default; // animatingnumbers（✅） $countup-width: var(--nutui-countup-width, auto) !default; -$countup-height: var(--nutui-countup-height, 32px) !default; -$countup-base-size: var(--nutui-countup-base-size, 18px) !default; -$countup-border-radius: var(--nutui-countup-border-radius, 4px) !default; +$countup-height: var(--nutui-countup-height, scale-px(32px)) !default; +$countup-base-size: var(--nutui-countup-base-size, $font-size-xl) !default; +$countup-border-radius: var( + --nutui-countup-border-radius, + scale-px(4px) +) !default; $countup-lr-margin: var(--nutui-countup-lr-margin, 0) !default; $countup-bg-color: var(--nutui-countup-bg-color, inherit) !default; $countup-color: var(--nutui-countup-color, $color-title) !default; @@ -2520,21 +2895,30 @@ $row-content-light-background-color: var( ) !default; $row-content-border-radius: var( --nutui-row-content-border-radius, - 6px + scale-px(6px) +) !default; +$row-content-height: var(--nutui-row-content-height, scale-px(50px)) !default; +$row-content-line-height: var( + --nutui-row-content-line-height, + scale-px(40px) ) !default; -$row-content-height: var(--nutui-row-content-height, 50px) !default; -$row-content-line-height: var(--nutui-row-content-line-height, 40px) !default; $col-default-margin-bottom: var( --nutui-col-default-margin-bottom, - 15px + scale-px(15px) ) !default; // TrendArrow -$trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default; -$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default; +$trendarrow-font-size: var( + --nutui-trendarrow-font-size, + $font-size-base +) !default; +$trendarrow-icon-margin: var( + --nutui-trendarrow-icon-margin, + scale-px(4px) +) !default; // Space -$space-gap: var(--nutui-space-gap, 8px) !default; +$space-gap: var(--nutui-space-gap, scale-px(8px)) !default; // loading $loading-icon-color: var(--nutui-loading-icon-color, $color-text-help) !default; @@ -2547,15 +2931,18 @@ $loading-lottie-background: var( ) !default; // ResultPage -$resultpage-width: var(--nutui-resultpage-width, 240px) !default; -$resultpage-icon-size: var(--nutui-resultpage-icon-size, 36px) !default; +$resultpage-width: var(--nutui-resultpage-width, scale-px(240px)) !default; +$resultpage-icon-size: var( + --nutui-resultpage-icon-size, + scale-px(36px) +) !default; $resultpage-icon-margin-bottom: var( --nutui-resultpage-icon-margin-bottom, - 12px + scale-px(12px) ) !default; $resultpage-title-margin-bottom: var( --nutui-resultpage-title-margin-bottom, - 12px + scale-px(12px) ) !default; $resultpage-title-font-size: var( --nutui-resultpage-title-font-size, @@ -2575,16 +2962,19 @@ $resultpage-description-color: var( ) !default; $resultpage-description-line-height: var( --nutui-resultpage-description-line-height, - 20px + scale-px(20px) ) !default; $resultpage-actions-margin-top: var( --nutui-resultpage-actions-margin-top, - 16px + scale-px(16px) ) !default; // quickenter $quickenter-bg-color: var(--nutui-quickenter-bg-color, #f5f5f5) !default; -$quickenter-max-height: var(--nutui-quickenter-max-height, 256px) !default; +$quickenter-max-height: var( + --nutui-quickenter-max-height, + scale-px(256px) +) !default; $quickenter-title-font-size: var( --nutui-quickenter-title-font-size, $font-size-base @@ -2611,7 +3001,7 @@ $quickenter-item-icon-color: var( ) !default; $quickenter-close-icon-size: var( --nutui-quickenter-close-icon-size, - 12px + $icon-size-12 ) !default; $quickenter-close-icon-color: var( --nutui-quickenter-close-icon-color, @@ -2619,8 +3009,8 @@ $quickenter-close-icon-color: var( ) !default; $quickenter-box-shadow: var( --nutui-quickenter-box-shadow, - 0px 8px 16px rgba(141, 153, 167, 0.2), - 0px -0.5px 0px rgba(0, 0, 0, 0.05) inset + 0px scale-px(8px) scale-px(16px) rgba(141, 153, 167, 0.2), + 0px scale-px(-0.5px) 0px scale-px(0.05) inset ) !default; // $quickenter-backdrop-filter: var( // --nutui-quickenter-backdrop-filter, diff --git a/src/utils/index.taro.ts b/src/utils/index.taro.ts index dba3cac020..1ee120c176 100644 --- a/src/utils/index.taro.ts +++ b/src/utils/index.taro.ts @@ -26,6 +26,7 @@ export * from './taro/px-transform' export * from './raf' export * from './render' export * from './rubberband' +export * from './scale-f' export * from './sleep' export * from './supports-passive' export * from './to-array' diff --git a/src/utils/index.ts b/src/utils/index.ts index 0cf6130d54..ca3ea7f91a 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -20,6 +20,7 @@ export * from './px-check' export * from './raf' export * from './render' export * from './rubberband' +export * from './scale-f' export * from './sleep' export * from './supports-passive' export * from './to-array' diff --git a/src/utils/scale-f.ts b/src/utils/scale-f.ts new file mode 100644 index 0000000000..c05cfc4ee6 --- /dev/null +++ b/src/utils/scale-f.ts @@ -0,0 +1,238 @@ +/** + * 响应式缩放系数（--nut-scale-f）：结合京东站内原生桥与站外视口规则， + * 写入根节点 CSS 变量（--nut-scale-f / --nut-scale-font / --nut-scale-icon）， + * 供布局/字号/icon 等按比例换算（见 calcByProfile）。H5 与 Taro WebView 共用此实现。 + */ +import { canUseDom } from './can-use-dom' + +/** 原生 DongScreenAdapterPlugin.getScale 的典型返回结构 */ +type NativeScaleResponse = { + status?: string + data?: { + scale?: number | string + } +} + +/** jmfe 通用 callNative 签名 */ +type NativeCaller = ( + plugin: string, + method: string, + params: string, + extra: string +) => Promise + +/** 站内容器的 jmfe 桥接方法（可选） */ +declare global { + interface Window { + jmfe?: { + callNative?: NativeCaller + } + } +} + +/** 当前基准缩放（来自原生或视口计算） */ +let scale = 1 + +/** 字体档位：标准、大字、老年 */ +export type ScaleProfile = 'standard' | 'large' | 'elderly' +/** 不同场景可选用不同放大比例（layout 等默认可不额外放大） */ +export type ScaleScene = 'layout' | 'font' | 'icon' | 'lego' +export type ScaleDevice = 'phone' | 'pad' + +/** 大字模式下仅 font 场景的相对倍率 */ +const LARGE_FONT_RATIO = 1.15 +/** 老年模式下 font/icon/lego 场景的相对倍率 */ +const ELDERLY_RATIO = 1.3 + +/** 全局当前档位，与 scale 共同参与 calcByProfile */ +let profile: ScaleProfile = 'standard' + +/** 仅 large / elderly 有效，其余一律视为 standard */ +function normalizeProfile(nextProfile?: ScaleProfile) { + if (nextProfile === 'large' || nextProfile === 'elderly') return nextProfile + return 'standard' +} + +/** 计算 CSS 变量要使用的场景缩放（基准 scale × 场景倍率） */ +function getCssSceneScale(scene: ScaleScene, baseScale: number) { + return baseScale * getSceneRatio(scene, profile) +} + +/** 将缩放值同步到 :root 的 --nut-scale-f / --nut-scale-font / --nut-scale-icon */ +function applyScaleCssVars(nextScale: number) { + if (!canUseDom) return + const rootStyle = document.documentElement.style + rootStyle.setProperty('--nut-scale-f', formatScaleValue(nextScale)) + rootStyle.setProperty( + '--nut-scale-font', + formatScaleValue(getCssSceneScale('font', nextScale)) + ) + rootStyle.setProperty( + '--nut-scale-icon', + formatScaleValue(getCssSceneScale('icon', nextScale)) + ) +} + +/** >1 保留两位小数字符串；否则取整，与 CSS 消费端约定一致 */ +function formatScaleValue(nextScale: number) { + if (nextScale > 1) { + return (Math.round(nextScale * 100) / 100).toFixed(2) + } + return `${Math.round(nextScale)}` +} + +/** 根据屏宽粗略区分 phone / pad */ +function getCurrentDevice(): ScaleDevice { + if (!canUseDom) return 'phone' + return window.innerWidth >= 600 ? 'pad' : 'phone' +} + +/** 在 profile 与 scene 维度上叠加额外倍率（与全局 scale 相乘） */ +function getSceneRatio(scene: ScaleScene, currentProfile: ScaleProfile) { + if ( + currentProfile === 'elderly' && + (scene === 'font' || scene === 'icon' || scene === 'lego') + ) { + return ELDERLY_RATIO + } + if (currentProfile === 'large' && scene === 'font') { + return LARGE_FONT_RATIO + } + return 1 +} + +/** 输出 px 等单位时的取整规则：缩放>1 或强制时保留两位小数精度 */ +function roundByScaleRule( + value: number, + baseScale: number, + forceKeepTwoDecimals = false +) { + if (forceKeepTwoDecimals || baseScale > 1) { + return Math.round(value * 100) / 100 + } + return Math.round(value) +} + +/** 无原生桥时按屏宽推算 scale（含平板与 375 基准窄屏区间） */ +function getScaleByViewport() { + if (!canUseDom) return 1 + const deviceWidth = window.innerWidth + + if (!deviceWidth) return 1 + + if (deviceWidth >= 600) { + return 1.2 + } + + if (deviceWidth >= 375 && deviceWidth < 600) { + const ratio = deviceWidth / 375 + return ratio >= 1.17 ? 1.17 : ratio + } + + return 1 +} + +/** 通过 jmfe.callNative 拉取 DongScreenAdapterPlugin；失败返回 null */ +async function getScaleByNative() { + if (!canUseDom || !window.jmfe?.callNative) return null + + try { + const res = await window.jmfe.callNative( + 'DongScreenAdapterPlugin', + 'getScale', + JSON.stringify({}), + '' + ) + if (res?.status === '0' && res.data?.scale !== undefined) { + const parsed = Number(res.data.scale) + if (Number.isFinite(parsed) && parsed > 0) { + return parsed + } + } + } catch { + /* 原生异常时由 getScaleF 回退到视口规则 */ + } + + return null +} + +/** 统一获取缩放：站内原生优先，失败则用视口规则 */ +async function getScaleF() { + const nativeScale = await getScaleByNative() + if (nativeScale) return nativeScale + return getScaleByViewport() +} + +/** 校验后更新内存中的 scale，并写入 --nut-scale-f */ +function setScaleF(nextScale: number) { + const validScale = Number.isFinite(nextScale) && nextScale > 0 ? nextScale : 1 + scale = validScale + applyScaleCssVars(validScale) + return scale +} + +/** 重新拉取缩放；可选同时切换 profile，避免与当前值相同时重复写 DOM */ +async function refreshScaleF(nextProfile?: ScaleProfile) { + if (nextProfile) { + setScaleProfile(nextProfile) + } + const nextScale = await getScaleF() + if (!scale || nextScale !== scale) { + setScaleF(nextScale) + } + return scale +} + +/** 首次计算缩放并订阅 resize；返回卸载函数（SSR 下为空函数） */ +export function initScaleF(nextProfile?: ScaleProfile) { + if (!canUseDom) return () => {} + setScaleProfile(nextProfile) + + const handler = () => { + refreshScaleF() + } + + handler() + window.addEventListener('resize', handler) + + return () => { + window.removeEventListener('resize', handler) + } +} + +/** 更新全局 profile，并在当前 scale 下重刷 CSS 变量 */ +function setScaleProfile(nextProfile?: ScaleProfile) { + profile = normalizeProfile(nextProfile) + // profile 切换后需要重新应用当前缩放值。 + setScaleF(scale) + return profile +} + +/** calcByProfile 的可选覆盖项：临时指定档位、场景、scale 或设备 */ +type CalcByProfileOptions = { + profile?: ScaleProfile + scene?: ScaleScene + scale?: number + device?: ScaleDevice +} + +/** + * 按档位与场景将设计稿基准值换算为实际数值：base × 场景倍率 × 当前 scale，再按规则取整。 + */ +export function calcByProfile( + baseValue: number, + options: CalcByProfileOptions = {} +) { + const currentProfile = normalizeProfile(options.profile ?? profile) + const scene = options.scene ?? 'layout' + const currentScale = + Number.isFinite(options.scale) && Number(options.scale) > 0 + ? Number(options.scale) + : scale + const device = options.device ?? getCurrentDevice() + const ratio = getSceneRatio(scene, currentProfile) + const rawValue = baseValue * ratio * currentScale + const forceKeepTwoDecimals = + scene === 'font' && currentProfile === 'large' && device === 'pad' + return roundByScaleRule(rawValue, currentScale, forceKeepTwoDecimals) +}