feat: enhance the createTheme function

trendmicro-frontend · Nov 26, 2024 · 754d9f5 · 754d9f5
1 parent 67fd9bd
commit 754d9f5
Show file tree

Hide file tree

Showing 49 changed files with 254 additions and 245 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,8 @@ const EmotionCacheProvider = ({
 };
 
 const App = (props) => {
-  const customTheme = useConst(() => createTheme(theme, {
+  const customTheme = useConst(() => createTheme({
+    cssVariables: true, // Enable CSS variables replacement
     components: {
       // Set default props for specific components
       //
@@ -64,10 +64,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/contributing/react-components-part-1.page.mdx b/packages/react-docs/pages/contributing/react-components-part-1.page.mdx
@@ -103,7 +103,7 @@ import React from 'react';
 describe('Code', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true, // Enable CSS variables replacement
     };
     const { container } = render((
       <Code>Hello World</Code>

diff --git a/packages/react-docs/pages/getting-started/css-variables/default-css-variables.js b/packages/react-docs/pages/getting-started/css-variables/default-css-variables.js
@@ -6,19 +6,22 @@ const isColorCode = value => String(value).startsWith('#') || String(value).star
 const App = () => {
   const theme = useTheme();
   const [colorMode] = useColorMode();
-  const cssVariableMap = theme.__cssVariableMap;
-  const borderColor = {         
+  const borderColor = {
     dark: 'gray:60',
-    light: 'gray:30',                                  
-  }[colorMode]; 
+    light: 'gray:30',
+  }[colorMode];
   const tokenColor = {
     dark: 'red:50',
     light: 'red:60',
   }[colorMode];
 
   return (
     <Box fontFamily="mono">
-      {Object.entries(cssVariableMap).map(([name, value]) => {
+      {Object.entries(theme?.vars).map(([name, value]) => {
+        if (!name.startsWith('--')) {
+          return null;
+        }
+
         return (
           <Flex key={name} columnGap="2x">
             <Text color={tokenColor}>{name}:</Text>

diff --git a/packages/react-docs/pages/getting-started/css-variables/index.page.mdx b/packages/react-docs/pages/getting-started/css-variables/index.page.mdx
@@ -5,18 +5,17 @@
 Tonic UI supports converting theme tokens defined in the theme to CSS variables. You can enable this behavior by configuring the theme as shown below:
 
 ```jsx
-import { TonicProvider, theme } from '@tonic-ui/react';
-
-// Enable CSS variables
-theme.config.useCSSVariables = true;
-
-// Pass `theme` to the `TonicProvider`
-<TonicProvider theme={theme} />
+// Use `createTheme` to provide custom configuration
+<TonicProvider
+  theme={createTheme({ // `createTheme` was introduced in v2.5.0
+    cssVariables: true, // Enable CSS variables replacement
+  })}
+/>
 ```
 
 For example, consider a theme object that looks like this:
 
-```js disabled
+```js
 const theme = {
   colors: {
     'gray:10': '#fafafa',

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,17 +41,13 @@ 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, {
-  config: {
-    // Enable CSS variables replacement
-    useCSSVariables: true,
-  },
+const customTheme = createTheme({
+  cssVariables: true, // Enable CSS variables replacement
   components: {
     // Set default props for specific components
     //
@@ -99,9 +69,9 @@ function App(props) {
         defaultValue: 'dark', // One of: 'dark', 'light'
       }}
       colorStyle={{
-        defaultValue: colorStyle, // optional
+        defaultValue: colorStyle,
       }}
-      theme={customTheme} // optional
+      theme={customTheme}
       useCSSBaseline={true} // If `true`, apply CSS reset and base styles
     >
       <ToastManager
@@ -218,10 +188,8 @@ Tonic UI supports converting theme tokens defined in the theme to CSS variables.
 
 ```jsx
 <TonicProvider
-  theme={merge(theme, {
-    config: {
-      useCSSVariables: true,
-    },
+  theme={createTheme({
+    cssVariables: true, // Enable CSS variables replacement
   })}
 />
 ```
@@ -325,15 +293,12 @@ 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, {
-  config: {
-    useCSSVariables: true,
-  },
+const customTheme = createTheme({
+  cssVariables: true, // Enable CSS variables replacement
   colors: {
     brand: {
       90: "#1a365d",

diff --git a/packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx b/packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx
@@ -37,7 +37,7 @@ console.log(colorStyle.chart.classic.colors[0]);
 
 To use previously defined `severity` and `chart` colors, you need to pass a custom color style to `TonicProvider`. Follow the setup below to use previous `severity` and `chart` colors:
 
-```jsx disabled
+```jsx
 import React from 'react';
 import { Box, TonicProvider, colorStyle } from '@tonic-ui/react';
 import { merge } from '@tonic-ui/utils';

diff --git a/packages/react-docs/pages/styled-system/responsive-values/index.page.mdx b/packages/react-docs/pages/styled-system/responsive-values/index.page.mdx
@@ -16,15 +16,15 @@ To use the responsive values, you can use either the array or object syntax.
 
 Let's say you have a `Box` component that looks like this:
 
-```jsx disabled
+```jsx
 <Box backgroundColor="red:50" width="50%">
   This is a box
 </Box>
 ```
 
 To make the `width` responsive, you can use the array syntax as follows:
 
-```jsx disabled
+```jsx
 <Box backgroundColor="red:50" width={["25%","50%","75%","100%"]}>
   This is a box
 </Box>
@@ -45,15 +45,15 @@ You can also use the object syntax to define responsive values. It's also the re
 
 Let's say you have a `Text` component that looks like this:
 
-```jsx disabled
+```jsx
 <Text fontSize={32}>
   This is a text
 </Text>
 ```
 
 To make the `fontSize` responsive, you can use the object syntax as follows:
 
-```jsx disabled
+```jsx
 <Text fontSize={{ _: 24, md: 32, lg: 40, xl: 48 }}>
   This is a text
 </Text>
@@ -72,7 +72,7 @@ Here is how to interpret the object syntax:
 
 Given the following example:
 
-```jsx disabled
+```jsx
 <Box width={{ _: '100%', sm: '50%', md: '25%' }}>
   This is a box
 </Box>

diff --git a/packages/react-docs/pages/theme/breakpoints/index.page.mdx b/packages/react-docs/pages/theme/breakpoints/index.page.mdx
@@ -40,9 +40,12 @@ For more control over the breakpoints, you can define custom breakpoints for you
 
 To do this, add a `breakpoints` array with additional aliases (e.g. `sm`, `md`, `lg`, `xl`, and `2xl`) to your theme.
 
-```jsx disabled
+```jsx
 // 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,11 +73,8 @@ const customColorStyle = merge(colorStyle, {
   },
 });
 
-const customTheme = createTheme(theme, {
-  config: {
-    // Enable CSS variables replacement
-    useCSSVariables: true,
-  },
+const customTheme = createTheme({
+  cssVariables: true, // Enable CSS variables replacement
   components: {
     // Set default props for specific components
     //

diff --git a/packages/react/src/accordion/__tests__/Accordion.test.js b/packages/react/src/accordion/__tests__/Accordion.test.js
@@ -15,7 +15,7 @@ import React from 'react';
 describe('Accordion', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <Accordion rowGap={1}>

diff --git a/packages/react/src/badge/__tests__/Badge.test.js b/packages/react/src/badge/__tests__/Badge.test.js
@@ -7,7 +7,7 @@ import React from 'react';
 describe('Badge', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <Flex columnGap="4x">

diff --git a/packages/react/src/button/__tests__/ButtonBase.test.js b/packages/react/src/button/__tests__/ButtonBase.test.js
@@ -6,7 +6,7 @@ import React from 'react';
 describe('ButtonBase', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <>

diff --git a/packages/react/src/checkbox/__tests__/Checkbox.test.js b/packages/react/src/checkbox/__tests__/Checkbox.test.js
@@ -6,7 +6,7 @@ import React, { useEffect, useRef } from 'react';
 describe('Checkbox', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <>

diff --git a/packages/react/src/code/__tests__/Code.test.js b/packages/react/src/code/__tests__/Code.test.js
@@ -7,7 +7,7 @@ import React from 'react';
 describe('Code', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <Code data-testid="Code">

diff --git a/packages/react/src/date-pickers/DatePicker/__tests__/DatePicker.test.js b/packages/react/src/date-pickers/DatePicker/__tests__/DatePicker.test.js
@@ -66,7 +66,7 @@ describe('DatePicker', () => {
   it('should render correctly', async () => {
     const user = userEvent.setup();
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const defaultValue = new Date('2024-08-01');
     const inputFormat = 'yyyy-MM-dd';

diff --git a/packages/react/src/divider/__tests__/Divider.test.js b/packages/react/src/divider/__tests__/Divider.test.js
@@ -6,7 +6,7 @@ import React from 'react';
 describe('Divider', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <>

diff --git a/packages/react/src/drawer/__tests__/Drawer.test.js b/packages/react/src/drawer/__tests__/Drawer.test.js
@@ -19,7 +19,7 @@ import React, { useCallback, useRef, useState } from 'react';
 describe('Drawer', () => {
   it('should render correctly', async () => {
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { baseElement } = render((
       <Drawer

diff --git a/packages/react/src/input/__tests__/Input.test.js b/packages/react/src/input/__tests__/Input.test.js
@@ -10,7 +10,7 @@ describe('Input', () => {
     const sizes = ['sm', 'md', 'lg'];
     const variants = ['outline', 'filled', 'flush', 'unstyled'];
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <>

diff --git a/packages/react/src/input/__tests__/InputControl.test.js b/packages/react/src/input/__tests__/InputControl.test.js
@@ -10,7 +10,7 @@ describe('InputControl', () => {
     const sizes = ['sm', 'md', 'lg'];
     const variants = ['outline', 'filled', 'flush', 'unstyled'];
     const renderOptions = {
-      useCSSVariables: true,
+      cssVariables: true,
     };
     const { container } = render((
       <>