feat: enhance the createTheme function

trendmicro-frontend · Nov 25, 2024 · 7e74c2a · 7e74c2a
1 parent 67fd9bd
commit 7e74c2a
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 72 deletions.
diff --git a/packages/react-docs/pages/_app.page.js b/packages/react-docs/pages/_app.page.js
@@ -7,8 +7,7 @@ import {
   ToastManager,
   TonicProvider,
   colorStyle as defaultColorStyle,
-  createTheme,
-  theme,
+  createTheme, // For theme customization (introduced in v2.5.0)
   useTheme,
 } from '@tonic-ui/react';
 import {
@@ -51,7 +50,11 @@ const EmotionCacheProvider = ({
 };
 
 const App = (props) => {
-  const customTheme = useConst(() => createTheme(theme, {
+  const customTheme = useConst(() => createTheme({
+    config: {
+      // Enable CSS variables replacement
+      useCSSVariables: true,
+    },
     components: {
       // Set default props for specific components
       //
@@ -64,10 +67,6 @@ const App = (props) => {
       // },
       // ```
     },
-    config: {
-      // Enable CSS variables replacement
-      useCSSVariables: true,
-    },
   }));
   const [initialColorMode, setColorMode] = useState(null);
   const router = useRouter();

diff --git a/packages/react-docs/pages/getting-started/usage/index.page.mdx b/packages/react-docs/pages/getting-started/usage/index.page.mdx
@@ -13,40 +13,14 @@ import React from 'react';
 import {
   Box,
   TonicProvider, // Provides theme and context for Tonic UI components
-  colorStyle,    // Default color style object
-  createTheme,   // For theme customization (introduced in v2.5.0)
-  theme,         // Default theme configuration
 } from '@tonic-ui/react';
 
-const customTheme = createTheme(theme, {
-  config: {
-    // Enable CSS variables replacement
-    useCSSVariables: true,
-  },
-  components: {
-    // Set default props for specific components
-    //
-    // Example:
-    // ```
-    // 'ToastCloseButton': {
-    //   defaultProps: {
-    //     'aria-label': 'Close toast',
-    //   },
-    // },
-    // ```
-  },
-});
-
 function App(props) {
   return (
     <TonicProvider
       colorMode={{
         defaultValue: 'dark', // One of: 'dark', 'light'
       }}
-      colorStyle={{
-        defaultValue: colorStyle, // optional
-      }}
-      theme={customTheme} // optional
       useCSSBaseline={true} // If `true`, apply CSS reset and base styles
     >
       <Box {...props} />
@@ -67,13 +41,12 @@ import {
   TonicProvider, // Provides theme and context for Tonic UI components
   colorStyle,    // Default color style object
   createTheme,   // For theme customization (introduced in v2.5.0)
-  theme,         // Default theme configuration
   useColorMode,  // Hook to manage color mode (e.g., light/dark)
   useColorStyle, // Hook to manage color style
   useTheme,      // Hook to access the theme object
 } from '@tonic-ui/react';
 
-const customTheme = createTheme(theme, {
+const customTheme = createTheme({
   config: {
     // Enable CSS variables replacement
     useCSSVariables: true,
@@ -218,7 +191,7 @@ Tonic UI supports converting theme tokens defined in the theme to CSS variables.
 
 ```jsx
 <TonicProvider
-  theme={merge(theme, {
+  theme={createTheme({
     config: {
       useCSSVariables: true,
     },
@@ -325,12 +298,11 @@ Override the theme object and pass it to the `<ThemeProvider>` component.
 
 ```js
 import {
-  createTheme,
-  theme,
+  createTheme, // For theme customization (introduced in v2.5.0)
 } from '@tonic-ui/react';
 
 // Let's say you want to add more colors
-const customTheme = createTheme(theme, {
+const customTheme = createTheme({
   config: {
     useCSSVariables: true,
   },

diff --git a/packages/react-docs/pages/theme/breakpoints/index.page.mdx b/packages/react-docs/pages/theme/breakpoints/index.page.mdx
@@ -42,7 +42,10 @@ To do this, add a `breakpoints` array with additional aliases (e.g. `sm`, `md`,
 
 ```jsx disabled
 // 1. Import the theme
-import { ThemeProvider, createTheme, theme } from '@tonic-ui/react';
+import {
+  TonicProvider, // Provides theme and context for Tonic UI components
+  createTheme,   // For theme customization (introduced in v2.5.0)
+} from '@tonic-ui/react';
 
 // 2. Update the breakpoints
 const breakpoints = [
@@ -59,16 +62,16 @@ breakpoints.xl = breakpoints[3];
 breakpoints['2xl'] = breakpoints[4];
 
 // 3. Extend the theme
-const customTheme = createTheme(theme, {
+const customTheme = createTheme({
   breakpoints,
 });
 
 // 4. Pass the custom theme to the theme provider
 function App() {
   return (
-    <ThemeProvider theme={customTheme}>
+    <TonicProvider theme={customTheme}>
       {children}
-    </ThemeProvider>
+    </TonicProvider>
   );
 }
 ```
diff --git a/packages/react-docs/sandbox/create-react-app.js b/packages/react-docs/sandbox/create-react-app.js
@@ -29,7 +29,6 @@ import {
   TonicProvider,
   colorStyle,
   createTheme,
-  theme,
   useColorMode,
   useColorStyle,
   useTheme,
@@ -74,7 +73,7 @@ const customColorStyle = merge(colorStyle, {
   },
 });
 
-const customTheme = createTheme(theme, {
+const customTheme = createTheme({
   config: {
     // Enable CSS variables replacement
     useCSSVariables: true,

diff --git a/packages/react/src/theme/createTheme.js b/packages/react/src/theme/createTheme.js
@@ -1,37 +1,24 @@
+import tonicTheme from '@tonic-ui/theme';
 import { merge } from '@tonic-ui/utils';
 import { ensurePlainObject } from 'ensure-type';
 import createCSSVariableMap from './utils/createCSSVariableMap';
 
 const defaultCSSVariablePrefix = 'tonic';
 
-const cssVariableScales = [
-  'borders',
-  'breakpoints',
-  'colors',
-  'fonts',
-  'fontSizes',
-  'fontWeights',
-  'letterSpacings',
-  'lineHeights',
-  'outlines',
-  'radii',
-  'shadows',
-  'sizes',
-  'space',
-  'zIndices',
-];
+const cssVariableScales = Object.keys(tonicTheme);
 
 const createTheme = (options = {}, ...args) => {
-  // Merge provided options with default configurations
-  let theme = merge(options, {
-    config: {
-      prefix: defaultCSSVariablePrefix,
-      useCSSVariables: false,
+  let theme = merge(
+    {
+      ...tonicTheme,
+      config: {
+        prefix: defaultCSSVariablePrefix,
+        useCSSVariables: false,
+      },
+      components: {},
     },
-  });
-
-  // Ensure the components field is initialized
-  theme.components = theme.components ?? {};
+    options,
+  );
 
   // Merge additional arguments into the theme
   theme = args.reduce((acc, arg) => merge(acc, arg), theme);

diff --git a/packages/react/src/theme/theme.js b/packages/react/src/theme/theme.js
@@ -1,6 +1,5 @@
-import tonicTheme from '@tonic-ui/theme';
 import createTheme from './createTheme';
 
-const theme = createTheme(tonicTheme);
+const theme = createTheme();
 
 export default theme;
diff --git a/packages/theme/src/createTheme.js b/packages/theme/src/createTheme.js
@@ -168,6 +168,7 @@ const createTheme = (unit) => {
     'px': _px(foundation),
   }[unit] ?? foundation;
 
+  // TODO: Consider adding `Object.freeze(theme)` in a future major release
   return theme;
 };