feat(theme): support toRem and convert

Author: haoziqaq

packages/varlet-ui/docs/browserAdaptation.en-US.md

@@ -43,7 +43,7 @@ module.exports = {
 }
 ```
 
-#### Theme Unit Adaptation
+#### Theme Unit Adaptation (Viewport)
 
 Because the theme is mounted at runtime and is not affected by postcss, the component library provides a utility tool `Themes.toViewport` for adaptation. The theme returned by the function will use the `375px -> 100vmin` rule by default.
 
@@ -68,6 +68,29 @@ const viewportTheme = Themes.toViewport(Themes.md3Dark, {
 })
 ```
 
+#### Theme Unit Adaptation (Rem)
+
+Similar to the Viewport solution
+
+```js
+import { Themes } from '@varlet/ui'
+
+const remTheme = Themes.toRem(Themes.md3Dark)
+```
+
+Or customize
+
+```js
+import { Themes } from '@varlet/ui'
+
+const viewportTheme = Themes.toRem(Themes.md3Dark, {
+  // defaults 16
+  rootFontSize: 32,
+  // defaults 6
+  unitPrecision: 4,
+})
+```
+
 ### Desktop Adaptation
 
 Because component library interaction events are developed using `touch` events, `mouse` events on the desktop side are not supported.

packages/varlet-ui/docs/browserAdaptation.zh-CN.md

@@ -42,7 +42,7 @@ module.exports = {
 }
 ```
 
-#### 主题包单位适配
+#### 主题包单位适配 (Viewport)
 
 因为主题包是运行时挂载的，不受 postcss 影响，组件库提供了实用工具 `Themes.toViewport` 进行适配，函数返回的主题将默认使用 `375px -> 100vmin` 的规则。
 
@@ -67,6 +67,29 @@ const viewportTheme = Themes.toViewport(Themes.md3Dark, {
 })
 ```
 
+####  主题包单位适配 (Rem)
+
+与 `Viewport` 方案类似
+
+```js
+import { Themes } from '@varlet/ui'
+
+const remTheme = Themes.toRem(Themes.md3Dark)
+```
+
+也支持自定义
+
+```js
+import { Themes } from '@varlet/ui'
+
+const viewportTheme = Themes.toRem(Themes.md3Dark, {
+  // 默认值为 16
+  rootFontSize: 32,
+  // 默认值为 6
+  unitPrecision: 4,
+})
+```
+
 ### 桌面端适配
 
 由于组件库交互事件使用 `touch` 事件进行开发，不支持桌面端的 `mouse` 事件，

packages/varlet-ui/src/themes/__tests__/index.spec.js

@@ -61,3 +61,51 @@ test('toViewport', () => {
     '--g': 'calc(100% - 4vw)',
   })
 })
+
+test('toRem', () => {
+  expect(
+    Themes.toRem({
+      '--a': '30px',
+      '--b': '30px -30px',
+      '--c': '30px 30px 30px',
+      '--d': '30px 30px 30px 30px',
+      '--e': '10px',
+      '--f': '10.55px',
+      '--g': 'calc(100% - 30px)',
+    }),
+  ).toStrictEqual({
+    '--a': '1.875rem',
+    '--b': '1.875rem -1.875rem',
+    '--c': '1.875rem 1.875rem 1.875rem',
+    '--d': '1.875rem 1.875rem 1.875rem 1.875rem',
+    '--e': '0.625rem',
+    '--f': '0.659375rem',
+    '--g': 'calc(100% - 1.875rem)',
+  })
+
+  expect(
+    Themes.toRem(
+      {
+        '--a': '30px',
+        '--b': '30px -30px',
+        '--c': '30px 30px 30px',
+        '--d': '30px 30px 30px 30px',
+        '--e': '10px',
+        '--f': '10.55px',
+        '--g': 'calc(100% - 30px)',
+      },
+      {
+        rootFontSize: 30,
+        unitPrecision: 4,
+      },
+    ),
+  ).toStrictEqual({
+    '--a': '1rem',
+    '--b': '1rem -1rem',
+    '--c': '1rem 1rem 1rem',
+    '--d': '1rem 1rem 1rem 1rem',
+    '--e': '0.3333rem',
+    '--f': '0.3517rem',
+    '--g': 'calc(100% - 1rem)',
+  })
+})

packages/varlet-ui/src/themes/convert.d.ts

@@ -0,0 +1,3 @@
+import { Themes } from '../../types'
+
+declare const convert: Themes['convert']

packages/varlet-ui/src/themes/convert.ts

@@ -0,0 +1,9 @@
+import { StyleVars } from '../style-provider'
+
+export function convert(theme: StyleVars, converter: (value: number) => string) {
+  return Object.entries(theme).reduce((target, [key, value]) => {
+    target[key] = value.includes('px') ? value.replace(/(\d+(\.\d+)?)px/g, (_, p1) => converter(p1)) : value
+
+    return target
+  }, {} as StyleVars)
+}

packages/varlet-ui/src/themes/index.ts

@@ -1,9 +1,11 @@
+import { convert } from './convert'
 import dark from './dark'
 import md3Dark from './md3-dark'
 import md3Light from './md3-light'
+import { toRem } from './toRem'
 import { toViewport } from './toViewport'
 
-const Themes = { dark, md3Light, md3Dark, toViewport }
+const Themes = { dark, md3Light, md3Dark, toViewport, toRem, convert }
 
 export const _ThemesComponent = null
 

packages/varlet-ui/src/themes/toRem.d.ts

@@ -0,0 +1,3 @@
+import { Themes } from '../../types'
+
+declare const toRem: Themes['toRem']

packages/varlet-ui/src/themes/toRem.ts

@@ -0,0 +1,12 @@
+import { StyleVars } from '../style-provider'
+import { convert } from './convert'
+
+export interface ThemesToRemOptions {
+  rootFontSize?: number
+  unitPrecision?: number
+}
+
+export function toRem(theme: StyleVars, options: ThemesToRemOptions = {}) {
+  const { rootFontSize = 16, unitPrecision = 6 } = options
+  return convert(theme, (value) => `${Number((value / rootFontSize).toFixed(unitPrecision))}rem`)
+}

packages/varlet-ui/src/themes/toViewport.ts

@@ -1,4 +1,5 @@
 import { StyleVars } from '../style-provider'
+import { convert } from './convert'
 
 export interface ThemesToViewportOptions {
   viewportWidth?: number
@@ -9,14 +10,5 @@ export interface ThemesToViewportOptions {
 export function toViewport(theme: StyleVars, options: ThemesToViewportOptions = {}) {
   const { viewportWidth = 375, viewportUnit = 'vmin', unitPrecision = 6 } = options
 
-  return Object.entries(theme).reduce((target, [key, value]) => {
-    target[key] = value.includes('px')
-      ? value.replace(
-          /(\d+(\.\d+)?)px/g,
-          (_, p1) => `${Number(((p1 / viewportWidth) * 100).toFixed(unitPrecision))}${viewportUnit}`,
-        )
-      : value
-
-    return target
-  }, {} as StyleVars)
+  return convert(theme, (value) => `${Number(((value / viewportWidth) * 100).toFixed(unitPrecision))}${viewportUnit}`)
 }

packages/varlet-ui/types/themes.d.ts

@@ -6,12 +6,19 @@ export interface ThemesToViewportOptions {
   unitPrecision?: number
 }
 
+export interface ThemesToRemOptions {
+  rootFontSize?: number
+  unitPrecision?: number
+}
+
 interface Themes {
   dark: StyleVars
   md3Light: StyleVars
   md3Dark: StyleVars
 
+  convert(theme: StyleVars, converter: (value: number) => string): StyleVars
   toViewport(theme: StyleVars, options?: ThemesToViewportOptions): StyleVars
+  toRem(theme: StyleVars, options?: ThemesToRemOptions): StyleVars
 }
 
 export declare const Themes: Themes