refactor(theme): remove theme scale style in theme-provider, remove space style in common scss and theme-provider scss, use dynamicStyles to generate them in runtime, so that inherited scale value can work correctly

Author: lejunyang

packages/components/src/components/config/config.context.ts

@@ -38,6 +38,7 @@ export const GlobalContextConfig = reactive({
       sm: '2',
       xl: '3',
     },
+    scale: 1,
   } as ThemeConfig,
   zIndex: {
     teleport: 1000,

packages/components/src/components/theme-provider/ThemeProvider.tsx

@@ -4,7 +4,6 @@ import { themeProviderProps } from './type';
 import { provideContextConfig } from '../config';
 import { provide } from 'vue';
 import { useSetupEdit } from '@lun/core';
-import { useNamespace } from 'hooks';
 
 export const ThemeProviderKey = Symbol(__DEV__ ? 'ThemeProviderKey' : '');
 
@@ -23,11 +22,9 @@ export const ThemeProvider = defineSSRCustomElement({
       theme: props,
     });
     useSetupEdit();
-    const ns = useNamespace(name);
     // return () => undefined;
     return () => (
       <>
-        <style>{`:host{${ns.vn('scale', false)}:${props.scale}}`}</style>
         <slot></slot>
       </>
     );

packages/theme/src/index.ts

@@ -1 +1,2 @@
+export * from './scss/common';
 export * from './scss/components';

packages/theme/src/scss/common/index.scss

@@ -3,7 +3,6 @@
 @use '../mixins/config.scss' as *;
 @use '../mixins/theme.scss' as *;
 @use './radius.scss' as *;
-@use './space.scss' as *;
 
 :host([hidden]) {
   display: none;

packages/theme/src/scss/common/index.ts

@@ -0,0 +1,38 @@
+import { createImportStyle, getThemeValueFromInstance, TGlobalContextConfig } from '@lun/components';
+import { GlobalContextConfig, GlobalStaticConfig } from '@lun/components';
+import { once, toPxIfNum } from '@lun/utils';
+import commonStyles from './index.scss?inline';
+
+export const importCommonDynamicTheme = once(() => {
+  GlobalContextConfig.dynamicStyles.common.push((vm, name, context) => {
+    const { theme, namespace } = context as TGlobalContextConfig;
+    const themeScale = theme.scale as any;
+    const n = namespace || GlobalStaticConfig.namespace;
+    const { commonSeparator } = GlobalStaticConfig;
+    const scale = getThemeValueFromInstance(vm, 'scale') || themeScale?.[name] || themeScale?.common || themeScale;
+
+    function getVarName(...list: (string | number)[]) {
+      return '--' + n + commonSeparator + list.join(commonSeparator);
+    }
+    const scaleVar = `var(${getVarName('scale')})`;
+
+    const scaleStyle = scale > 0 ? `:host{${getVarName('scale')}:${scale}}` : '';
+    const spaces = [4, 8, 12, 16, 24, 32, 40, 48, 64],
+      spaceStyle = `:host([scale]),:host([root]){${spaces
+        .map(
+          (s, i) =>
+            `${getVarName('space', i + 1)}:calc(${toPxIfNum(s)} * ${scaleVar});` +
+            `${getVarName('space', 'hypot', i + 1)}:calc(${toPxIfNum(Math.hypot(s, s))} * ${scaleVar});`,
+        )
+        .join('')}}`;
+    // TODO font-size line-height... radius
+    return scaleStyle + spaceStyle;
+  });
+});
+
+export const importCommonStaticTheme = once(createImportStyle('common', commonStyles));
+
+export const importCommonTheme = () => {
+  importCommonStaticTheme();
+  importCommonDynamicTheme();
+};

packages/theme/src/scss/components/index.ts

@@ -41,13 +41,13 @@ import { importMessageBasicTheme } from './message/index.ts';
 import { importSpinBasicTheme } from './spin/index.ts';
 import { importProgressBasicTheme } from './progress/index.ts';
 import { importTextareaBasicTheme, importTextareaSurfaceTheme } from './textarea/index.ts';
-import { __internal_defineSubscriber, createImportStyle } from '@lun/components';
-import commonStyles from '../common/index.scss?inline';
+import { __internal_defineSubscriber } from '@lun/components';
 import { once } from '@lun/utils';
 import { importMentionsBasicTheme, importMentionsSurfaceTheme } from './mentions/index.ts';
 import { importRadioGroupBasicTheme } from './radio-group/index.ts';
 import { importThemeProviderBasicTheme } from './theme-provider/index.ts';
 import { importIconBasicTheme } from './icon/index.ts';
+import { importCommonTheme } from '../common/index.ts';
 
 export * from './button';
 export * from './callout';
@@ -134,8 +134,6 @@ export const importGhostTheme = once(() => {
   importInputGhostTheme();
 });
 
-export const importCommonTheme = once(createImportStyle('common', commonStyles));
-
 export const autoImportTheme = once(() => {
   importCommonTheme();
   __internal_defineSubscriber.push((comp) => {

packages/theme/src/scss/components/theme-provider/basic.scss

@@ -1,6 +1,5 @@
 @use "./colors.scss";
 @use "./radius.scss";
 @use "./shadow.scss";
-@use "./space.scss";
 @use "./theme-colors.scss";
 @use "./typography.scss";