docs: add styling guide to overview section

[ravisuhag]

Summary

• Adds a new Styling page to the Overview section covering recommended approaches for styling and customizing Apsara components
• Covers design tokens, className/style prop customization, data-attribute styling, CSS Modules, CVA patterns, and best practices
• Updates Introduction page with a link to the new guide and sets explicit page ordering in meta.json

Test plan

• Verify the styling page renders at /docs/styling
• Verify navigation order: Introduction → Getting Started → Styling
• Verify the Styling link in the Introduction "Next Steps" section works

Summary by CodeRabbit

Release Notes

• Documentation
  • Added comprehensive styling documentation covering design tokens, CSS customization methods (className, style props, data attributes), and theming options for the Apsara design system.
  • Updated navigation to include the new Styling guide in the Overview section.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Feb 18, 2026 7:16am

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adds comprehensive styling documentation for the Apsara design system, introducing a new "Styling" guide that covers CSS custom properties, component customization methods, theming, and best practices for developers.

Changes

Cohort / File(s)	Summary
Styling Documentation apps/www/src/content/docs/(overview)/styling.mdx	New comprehensive styling guide covering design tokens, CSS custom properties, component customization via className/style/data-attributes, theming options, CSS Modules, CVA usage, and styling best practices.
Documentation Navigation apps/www/src/content/docs/(overview)/index.mdx, apps/www/src/content/docs/(overview)/meta.json	Updated navigation metadata and next steps to include the new Styling guide, inserted between Getting Started and Theme Overview.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

• paanSinghCoder
• rohanchkrabrty

Poem

🐰 Hops through tokens, custom and bright,
CSS crafted with vanilla delight,
Classes and styles in harmony flow,
A styling guide for the Apsara glow! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and accurately summarizes the main change: adding a new styling guide documentation page to the overview section.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch styling-guide

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/www/src/content/docs/`(overview)/styling.mdx:
- Around line 175-179: The TagProps type is missing the children prop used by
the Tag component; update TagProps (the type alias named TagProps) to include
children?: React.ReactNode (or appropriate children type) so the destructured
children in export function Tag({ size, color, className, children }: TagProps)
is correctly typed and TypeScript errors are resolved.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Missing children prop in TagProps type definition.

The TagProps type doesn't include children, but it's destructured and used in the component. This would cause a TypeScript error.

Proposed fix

-type TagProps = VariantProps<typeof tag> & { className?: string };
+type TagProps = VariantProps<typeof tag> & { 
+  className?: string;
+  children?: React.ReactNode;
+};

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	type TagProps = VariantProps<typeof tag> & { className?: string };
	export function Tag({ size, color, className, children }: TagProps) {
	return <span className={tag({ size, color, className })}>{children}</span>;
	}
	type TagProps = VariantProps<typeof tag> & {
	className?: string;
	children?: React.ReactNode;
	};
	export function Tag({ size, color, className, children }: TagProps) {
	return <span className={tag({ size, color, className })}>{children}</span>;
	}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/www/src/content/docs/`(overview)/styling.mdx around lines 175 - 179, The
TagProps type is missing the children prop used by the Tag component; update
TagProps (the type alias named TagProps) to include children?: React.ReactNode
(or appropriate children type) so the destructured children in export function
Tag({ size, color, className, children }: TagProps) is correctly typed and
TypeScript errors are resolved.

[rohanchkrabrty]

Let's keep this as ["..."]