feat(react): add createTheme for theme customization (#947)

* feat(react): add `createTheme` for theme customization

* feat: add default value for the `options` parameter

* docs: update examples

* chore: add `tonic-ui-945.md` changeset

* docs: update getting started usage guide

* docs: replace `\`\`\`jsx disabled` with `\`\`\`jsx` for the code block

* feat: enhance the `createTheme` function

* docs: update package description

* docs: update docs

* docs: update the package installation command

* refactor: add type validation for the `cssVariables` configuration parameter

* refactor: add input validation for the CSS variable name

* test: update tests

* feat: extract `theme.vars` into `theme.cssVariables` and `theme.cssVariablePrefix` for improved clarity

* refactor(styled-system): improve transforms for detecting CSS variable presence

* feat: set the default root selector to `:root`

* feat: add custom root selector support for CSS variables

* test: add a test for the custom root selector

.changeset/tonic-ui-945.md

@@ -0,0 +1,6 @@
+---
+"@tonic-ui/react": patch
+"@tonic-ui/theme": minor
+---
+
+feat(react): add `createTheme` for theme customization

packages/changelog-github/README.md

@@ -0,0 +1,3 @@
+# @tonic-ui/changelog-github
+
+A tool for generating changelogs with links to GitHub commits, PRs, and users.

packages/changelog-github/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@tonic-ui/changelog-github",
-  "description": "A changelog entry generator for GitHub that links to commits, PRs and users",
+  "description": "A tool for generating changelogs with links to GitHub commits, PRs, and users.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "files": [

packages/codemod/README.md

@@ -1,6 +1,6 @@
 # @tonic-ui/codemod
 
-This repository contains a collection of codemod scripts based for use with [jscodeshift](https://github.com/facebook/jscodeshift) that help update the APIs.
+A set of codemod scripts designed to simplify the migration and updating of Tonic UI applications.
 
 ## Usage
 

packages/codemod/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tonic-ui/codemod",
   "version": "2.1.0",
-  "description": "Codemod scripts for Tonic UI",
+  "description": "A set of codemod scripts designed to simplify the migration and updating of Tonic UI applications.",
   "bin": "./codemod-cli.js",
   "files": [
     "codemod-cli.js",

packages/react-base/README.md

@@ -1,6 +1,6 @@
 # @tonic-ui/react-base
 
-A library of headless React UI components.
+Headless React components intended for creating custom UI elements.
 
 ## Installation
 

packages/react-base/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tonic-ui/react-base",
   "version": "2.0.1",
-  "description": "A library of headless React UI components.",
+  "description": "Headless React components intended for creating custom UI elements.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "files": [

packages/react-docs/components/Demo.js

@@ -113,8 +113,8 @@ const Demo = ({
       >
         <IconButton
           data-track={showSourceCode
-            ? `CodeBlock|hide_source|${x({ path: router.pathname })}`
-            : `CodeBlock|show_source|${x({ path: router.pathname })}`
+            ? `Code|hide_source|${x({ path: router.pathname })}`
+            : `Code|show_source|${x({ path: router.pathname })}`
           }
           onClick={toggleShowSourceCode}
         >
@@ -123,23 +123,23 @@ const Demo = ({
           </Tooltip>
         </IconButton>
         <IconButton
-          data-track={`CodeBlock|copy_source|${x({ path: router.pathname })}`}
+          data-track={`Code|copy_source|${x({ path: router.pathname })}`}
           onClick={handleClickCopySource}
         >
           <Tooltip label={hasCopiedSource ? 'Copied' : 'Copy the source'}>
             <FileCopyOIcon />
           </Tooltip>
         </IconButton>
         <IconButton
-          data-track={`CodeBlock|edit_in_codesandbox|${router.pathname}`}
+          data-track={`Code|edit_in_codesandbox|${router.pathname}`}
           onClick={handleClickEditInCodeSandbox}
         >
           <Tooltip label="Edit in CodeSandbox">
             <CodeSandboxIcon />
           </Tooltip>
         </IconButton>
         <IconButton
-          data-track={`CodeBlock|reset|${router.pathname}`}
+          data-track={`Code|reset|${router.pathname}`}
           onClick={reset}
         >
           <Tooltip label="Reset the demo">

packages/react-docs/components/CodeBlock.js → packages/react-docs/components/PreformattedText.js

@@ -1,14 +1,14 @@
 import {
-  Box,
+  Text,
   useColorStyle,
 } from '@tonic-ui/react';
 import React from 'react';
 
-const CodeBlock = (props) => {
+const PreformattedText = (props) => {
   const [colorStyle] = useColorStyle();
 
   return (
-    <Box
+    <Text
       backgroundColor={colorStyle.background.secondary}
       border={1}
       borderColor={colorStyle.divider}
@@ -21,4 +21,4 @@ const CodeBlock = (props) => {
   );
 };
 
-export default CodeBlock;
+export default PreformattedText;

packages/react-docs/components/ThemeParser.js

@@ -5,7 +5,7 @@ import {
   useTheme,
 } from '@tonic-ui/react';
 import React from 'react';
-import CodeBlock from './CodeBlock';
+import PreformattedText from './PreformattedText';
 import jsonPrettify from '../utils/json-prettify';
 
 const ThemeParser = ({
@@ -33,9 +33,9 @@ const ThemeParser = ({
 
   return (
     <Box mb="6x">
-      <CodeBlock>
+      <PreformattedText>
         {`const ${themeKey} = ${jsonPrettify(token, indent)}`}
-      </CodeBlock>
+      </PreformattedText>
     </Box>
   );
 };

packages/react-docs/pages/_app.page.js

@@ -7,7 +7,7 @@ import {
   ToastManager,
   TonicProvider,
   colorStyle as defaultColorStyle,
-  theme,
+  createTheme, // For theme customization (introduced in v2.5.0)
   useTheme,
 } from '@tonic-ui/react';
 import {
@@ -50,28 +50,21 @@ const EmotionCacheProvider = ({
 };
 
 const App = (props) => {
-  const customTheme = useConst(() => {
-    return {
-      ...theme,
-      components: {
-        // Set default props for components here.
-        //
-        // Example:
-        // ```
-        // 'AccordionToggle': {
-        //   defaultProps: {
-        //     disabled: true,
-        //   },
-        // }
-        // ```
-      },
-      config: {
-        ...theme?.config,
-        // Enable CSS variables replacement
-        useCSSVariables: true,
-      },
-    };
-  });
+  const customTheme = useConst(() => createTheme({
+    cssVariables: true, // Enable CSS variables replacement
+    components: {
+      // Set default props for specific components
+      //
+      // Example:
+      // ```
+      // 'ToastCloseButton': {
+      //   defaultProps: {
+      //     'aria-label': 'Close toast',
+      //   },
+      // },
+      // ```
+    },
+  }));
   const [initialColorMode, setColorMode] = useState(null);
   const router = useRouter();
 

packages/react-docs/pages/components/alert/index.page.mdx

@@ -52,7 +52,7 @@ If not specified, the default icon will be used based on the `severity` prop.
 
 The `isClosable` prop is used to make an alert closable by adding a close button to it. By default, the value of `isClosable` is false. To make an alert closable, set `isClosable` to true.
 
-```jsx disabled
+```jsx
 <Alert variant="solid" severity="success" isClosable onClose={onClose}>
   <Text>This is a success alert.</Text>
 </Alert>
@@ -66,7 +66,7 @@ The `AlertCloseButton` component provides an easy way to add a close button to a
 
 Besides the default functionality of the `AlertCloseButton`, you can also pass additional props, such as `data-test` or `data-tracking` attributes, to the `AlertCloseButton` component as needed.
 
-```jsx disabled
+```jsx
 <Alert variant="solid" severity="success" onClose={onClose}>
   <Text pr="10x">This is a success alert.</Text>
   <AlertCloseButton top={3} right={7} position="absolute" data-test="alert-close-button" />

packages/react-docs/pages/components/button/index.page.mdx

@@ -34,7 +34,7 @@ You can make buttons look inactive or active by adding the `disabled` or `select
 
 If the `disabled` prop is set (or set to `true`), the button will have a `disabled` attribute and not respond to user interactions.
 
-```jsx disabled
+```jsx
 <button type="button" disabled aria-disabled="true">Button</button>
 ```
 
@@ -46,7 +46,7 @@ To customize the visual appearance of the disabled state, pass the `_disabled` s
 
 If the `selected` prop is set (or set to `true`), the button will have both `pointer-events: none` style and `tabindex="-1"` attribute. This will prevent the button from receiving pointer events and will not be reachable via sequential keyboard navigation.
 
-```jsx disabled
+```jsx
 <button type="button" aria-selected="true" tabindex="-1">Button</button>
 ```
 

packages/react-docs/pages/components/checkbox/index.page.mdx

@@ -45,7 +45,7 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
 * All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the `<label>` element.
 * When a label can't be used, it's necessary to add an attribute directly to the input component. In this case, you can apply the additional attribute (e.g. `aria-label`, `aria-labelledby`, `title`) via the `inputProps` prop.
 
-```jsx disabled
+```jsx
 <Checkbox
   inputProps={{
     'aria-label': 'Label',

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

@@ -8,7 +8,7 @@ By using `TonicProvider` at root of your application, it will add `ColorModeProv
 
 To get color mode working correctly, you may have to pass `colorMode` config to `TonicProvider` with `defaultValue` set to `dark` or `light`.
 
-```jsx disabled
+```jsx
 import React from 'react';
 import { Box, TonicProvider } from '@tonic-ui/react';
 
@@ -34,7 +34,7 @@ function App(props) {
 
 The above setup is equivalent to:
 
-```jsx disabled
+```jsx
 <ColorModeProvider defaultValue="dark">
   <Box {...props} />
 </ColorModeProvider>
@@ -44,11 +44,11 @@ The above setup is equivalent to:
 
 To opt the entire page into the user's color scheme preferences declare `color-scheme` on the document's root element.
 
-```jsx disabled
+```jsx
 import { Global, css } from '@emotion/react';
 ```
 
-```jsx disabled
+```jsx
 <Global
   styles={css`
     :root, :host {
@@ -62,7 +62,7 @@ import { Global, css } from '@emotion/react';
 
 ### Use default color mode
 
-```jsx disabled
+```jsx
 <TonicProvider
   colorMode={{
     defaultValue: 'dark',
@@ -76,7 +76,7 @@ import { Global, css } from '@emotion/react';
 
 This example uses the default color mode for the first render, and then switches to the system color mode for the rest of time.
 
-```jsx disabled
+```jsx
 <TonicProvider
   colorMode={{
     defaultValue: 'dark', // optional
@@ -89,7 +89,7 @@ This example uses the default color mode for the first render, and then switches
 
 ### Controlled color mode
 
-```jsx disabled
+```jsx
 <TonicProvider
   colorMode={{
     value: 'dark',
@@ -101,7 +101,7 @@ This example uses the default color mode for the first render, and then switches
 
 ### Controlled color mode with a toggle function
 
-```jsx disabled
+```jsx
 function App({ children }) {
   const [colorMode, toggleColorMode] = useToggle();
 

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

@@ -10,7 +10,7 @@ import { useColorStyle } from '@tonic-ui/react';
 
 ## Usage
 
-```jsx disabled
+```jsx
 import { Global, css } from '@emotion/react';
 import {
   Button,