docs: update getting started guide and sandbox example for custom theme usage

[cheton]

PR Type

documentation, enhancement

---

Description

• Enhanced the theme customization by introducing a customTheme object, allowing for more flexible theme configurations.
• Enabled CSS variables in the theme configuration, improving the styling capabilities.
• Updated the Root component and documentation examples to utilize the new customTheme.
• Improved documentation with examples for setting default props for specific components.

---

Changes walkthrough 📝

	Relevant files
Enhancement	create-react-app.js Enhance theme customization with `customTheme` object        packages/react-docs/sandbox/create-react-app.js Introduced a customTheme object to manage theme configurations. Enabled CSS variables through theme configuration. Updated Root component to use customTheme. Added comments for setting default props for components. +44/-23
Documentation	index.page.mdx Update documentation for custom theme usage                            packages/react-docs/pages/getting-started/usage/index.page.mdx Updated documentation to use customTheme for theme configuration. Demonstrated enabling CSS variables in theme. Provided examples for setting default props in components. Improved code examples for clarity and accuracy. +67/-24

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 1900ca3f0984da5b2a38cafe23776880c3c6e8d9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codiumai-pr-agent-free[bot]]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Code Duplication The `customTheme` object is duplicated across multiple files with identical configuration. Consider extracting it to a shared configuration file to maintain consistency and reduce duplication. Syntax Error Extra semicolon after object declaration in the customTheme configuration which could cause syntax errors

[codiumai-pr-agent-free[bot]]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Best practice	Remove unnecessary semicolon after object definition in function component ___ **Remove the unnecessary semicolon after the customTheme object definition. The semicolon is redundant since this is inside a function component.** [packages/react-docs/sandbox/create-react-app.js [81-101]](https://github.com/trendmicro-frontend/tonic-ui/pull/944/files#diff-14c0fb986ac4a11afb38c20a4fefcfad591c0bbfb81de9f39105d143f0f13a88R81-R101) ```diff const customTheme = { ...theme, components: {}, config: { ...theme?.config, useCSSVariables: true, }, -}; +} ``` Suggestion importance[1-10]: 3 Why: While technically correct, removing the semicolon is a minor style improvement that has no functional impact. The code works correctly either way, making this a low-priority suggestion.	3

💡 Need additional feedback ? start a PR chat

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 78.34%. Comparing base (0ed3abc) to head (1900ca3). Report is 1 commits behind head on v2.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## v2 #944 +/- ## ======================================= Coverage 78.34% 78.34% ======================================= Files 405 405 Lines 6640 6640 ======================================= Hits 5202 5202 Misses 1438 1438 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[trendmicro-frontend-bot]

Tonic UI Demo

On 2024-11-11 14:28:18 +0000, PR #944 (1900ca3f0984da5b2a38cafe23776880c3c6e8d9) was successfully deployed. You can view it at the following link: https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-944/