feat: enhance the memoization of the setter function in useColorMode and useColorStyle Hooks

packages/react-docs/components/CodeBlock.js

@@ -119,7 +119,7 @@ const CodeBlock = ({
   }, []);
   const language = React.isValidElement(children)
     ? ensureString(children.props.className).replace(/language-/, '')
-    : null;
+    : '';
 
   noInline = boolean(noInline);
 

packages/react-docs/pages/components/color-mode/dark-mode.js

@@ -0,0 +1,32 @@
+import {
+  Box,
+  DarkMode,
+  Text,
+  useColorMode,
+  useColorStyle,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const Component = () => {
+  const [colorMode] = useColorMode();
+  const [colorStyle] = useColorStyle({ colorMode });
+
+  return (
+    <Box
+      backgroundColor={colorStyle.background.secondary}
+      color={colorStyle.color.primary}
+    >
+      <Text px="4x" py="3x">
+        The color mode is set to {colorMode}
+      </Text>
+    </Box>
+  );
+};
+
+const App = () => (
+  <DarkMode>
+    <Component />
+  </DarkMode>
+);
+
+export default App;

packages/react-docs/pages/components/color-mode/dark-mode.page.mdx

@@ -10,29 +10,7 @@ import { DarkMode } from '@tonic-ui/react';
 
 ## Usage
 
-```jsx noInline
-function Example() {
-  const [colorMode] = useColorMode();
-  const [colorStyle] = useColorStyle({ colorMode });
-
-  return (
-    <Box
-      backgroundColor={colorStyle.background.secondary}
-      color={colorStyle.color.primary}
-    >
-      <Text px="4x" py="3x">
-        The color mode is set to {colorMode}
-      </Text>
-    </Box>
-  );
-}
-
-render(
-  <DarkMode>
-    <Example />
-  </DarkMode>
-);
-```
+{render('./dark-mode')}
 
 ## Props
 

packages/react-docs/pages/components/color-mode/inverted-mode-tooltip.js

@@ -0,0 +1,25 @@
+import {
+  Divider,
+  InvertedMode,
+  Text,
+  Tooltip,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => {
+  return (
+    <Tooltip
+      label={(
+        <InvertedMode width={80} py="1x">
+          <Text>Title</Text>
+          <Divider my="2x" />
+          <Text>Content</Text>
+        </InvertedMode>
+      )}
+    >
+      <Text display="inline-block">Hover Me</Text>
+    </Tooltip>
+  );
+};
+
+export default App;

packages/react-docs/pages/components/color-mode/inverted-mode.js

@@ -0,0 +1,32 @@
+import {
+  Box,
+  InvertedMode,
+  Text,
+  useColorMode,
+  useColorStyle,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const Component = () => {
+  const [colorMode] = useColorMode();
+  const [colorStyle] = useColorStyle({ colorMode });
+
+  return (
+    <Box
+      backgroundColor={colorStyle.background.secondary}
+      color={colorStyle.color.primary}
+    >
+      <Text px="4x" py="3x">
+        The current color mode is inverted to {colorMode} mode
+      </Text>
+    </Box>
+  );
+};
+
+const App = () => (
+  <InvertedMode>
+    <Component />
+  </InvertedMode>
+);
+
+export default App;

packages/react-docs/pages/components/color-mode/inverted-mode.page.mdx

@@ -10,47 +10,13 @@ import { InvertedMode } from '@tonic-ui/react';
 
 ## Usage
 
-```jsx noInline
-function Example() {
-  const [colorMode] = useColorMode();
-  const [colorStyle] = useColorStyle({ colorMode });
-
-  return (
-    <Box
-      backgroundColor={colorStyle.background.secondary}
-      color={colorStyle.color.primary}
-    >
-      <Text px="4x" py="3x">
-        The current color mode is inverted to {colorMode} mode
-      </Text>
-    </Box>
-  );
-}
-
-render(
-  <InvertedMode>
-    <Example />
-  </InvetedMode>
-);
-```
+{render('./inverted-mode')}
 
 ### Rendering tooltip label
 
 The `InvertedMode` component is useful when you want to render a tooltip label in inverted mode.
 
-```jsx
-<Tooltip
-  label={(
-    <InvertedMode width={80} py="1x">
-      <Text>Title</Text>
-      <Divider my="2x" />
-      <Text>Content</Text>
-    </InvertedMode>
-  )}
->
-  <Text display="inline-block">Hover Me</Text>
-</Tooltip>
-```
+{render('./inverted-mode-tooltip')}
 
 ## Props
 

packages/react-docs/pages/components/color-mode/light-mode.js

@@ -0,0 +1,32 @@
+import {
+  Box,
+  LightMode,
+  Text,
+  useColorMode,
+  useColorStyle,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const Component = () => {
+  const [colorMode] = useColorMode();
+  const [colorStyle] = useColorStyle({ colorMode });
+
+  return (
+    <Box
+      backgroundColor={colorStyle.background.secondary}
+      color={colorStyle.color.primary}
+    >
+      <Text px="4x" py="3x">
+        The color mode is set to {colorMode}
+      </Text>
+    </Box>
+  );
+};
+
+const App = () => (
+  <LightMode>
+    <Component />
+  </LightMode>
+);
+
+export default App;

packages/react-docs/pages/components/color-mode/light-mode.page.mdx

@@ -10,29 +10,7 @@ import { LightMode } from '@tonic-ui/react';
 
 ## Usage
 
-```jsx noInline
-function Example() {
-  const [colorMode] = useColorMode();
-  const [colorStyle] = useColorStyle({ colorMode });
-
-  return (
-    <Box
-      backgroundColor={colorStyle.background.secondary}
-      color={colorStyle.color.primary}
-    >
-      <Text px="4x" py="3x">
-        The color mode is set to {colorMode}
-      </Text>
-    </Box>
-  );
-}
-
-render(
-  <LightMode>
-    <Example />
-  </LightMode>
-);
-```
+{render('./light-mode')}
 
 ## Props
 

packages/react-docs/pages/components/color-mode/useColorMode.page.mdx

@@ -53,4 +53,4 @@ Returns an array with the current color mode and a function to change the color
 
 ## Demos
 
-{render('./color-mode')}
+{render('./useColorMode')}

packages/react-docs/pages/components/color-style/useColorStyle.js

@@ -0,0 +1,88 @@
+import {
+  Box,
+  Divider,
+  Stack,
+  useColorMode,
+  useColorStyle,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => {
+  const [colorMode] = useColorMode();
+  const [colorStyle] = useColorStyle({ colorMode });
+  const invertedPrimaryColor = {
+    dark: 'black:primary',
+    light: 'white:primary',
+  }[colorMode];
+
+  return (
+    <Stack spacing="4x" fontFamily="mono">
+      Background
+      <Box
+        sx={{
+          '> *': {
+            px: '3x',
+            py: '2x',
+          },
+        }}
+      >
+        <Box backgroundColor={colorStyle.background.primary}>
+          colorStyle.background.primary
+        </Box>
+        <Box backgroundColor={colorStyle.background.secondary}>
+          colorStyle.background.secondary
+        </Box>
+        <Box backgroundColor={colorStyle.background.tertiary}>
+          colorStyle.background.tertiary
+        </Box>
+        <Box backgroundColor={colorStyle.background.inverted} color={invertedPrimaryColor}>
+          colorStyle.background.inverted
+        </Box>
+        <Box backgroundColor={colorStyle.background.highlighted}>
+          colorStyle.background.highlighted
+        </Box>
+        <Box backgroundColor={colorStyle.background.selected}>
+          colorStyle.background.selected
+        </Box>
+      </Box>
+      <Divider />
+      <Box
+        sx={{
+          '> *': {
+            px: '3x',
+          },
+          '> *:not(:last-child)': {
+            pb: '2x',
+          },
+        }}
+      >
+        <Box color={colorStyle.color.primary}>
+          colorStyle.color.primary
+        </Box>
+        <Box color={colorStyle.color.secondary}>
+          colorStyle.color.secondary
+        </Box>
+        <Box color={colorStyle.color.tertiary}>
+          colorStyle.color.tertiary
+        </Box>
+        <Box color={colorStyle.color.disabled}>
+          colorStyle.color.disabled
+        </Box>
+        <Box color={colorStyle.color.success}>
+          colorStyle.color.success
+        </Box>
+        <Box color={colorStyle.color.info}>
+          colorStyle.color.info
+        </Box>
+        <Box color={colorStyle.color.warning}>
+          colorStyle.color.warning
+        </Box>
+        <Box color={colorStyle.color.error}>
+          colorStyle.color.error
+        </Box>
+      </Box>
+    </Stack>
+  );
+};
+
+export default App;