Convert color codes to Oklch + Seo improvements in docs #1069
Conversation
WalkthroughThis update introduces new SEO metadata modules for documentation pages, centralizes metadata imports, and transitions color token definitions in the Clarity design system from hex/HSL to OKLCH color values. Documentation content and structure are enhanced for clarity and accessibility. No public API signatures are changed; most updates are internal, stylistic, or content-focused. Changes
Sequence Diagram(s)sequenceDiagram
participant Page as Documentation Page (.mdx)
participant SEO as SEO Metadata Module (seo.ts)
participant Util as generateSeoMetadata Utility
Page->>SEO: import metadata from './seo'
SEO->>Util: call generateSeoMetadata({title, description})
Util-->>SEO: return metadata object
SEO-->>Page: export metadata
Page-->>App: export const metadata
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
docs/app/baseSeo.tsOops! Something went wrong! :( ESLint: 8.56.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/docs/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. docs/app/docs/components/accordion/seo.tsOops! Something went wrong! :( ESLint: 8.56.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/docs/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. docs/app/docs/components/blockquote/seo.tsOops! Something went wrong! :( ESLint: 8.56.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/docs/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (10)
docs/app/baseSeo.ts (1)
1-9: Centralized base SEO metadata is well-structured
The use ofgenerateSeoMetadatato standardize the site's title and description is correctly implemented.Consider enriching this module with additional SEO fields such as canonical URLs, Open Graph images, and keywords to boost social sharing and search visibility. For example:
const baseSeoMetadata = generateSeoMetadata({ title: "Rad UI", description: "Rad UI is a fast, flexible, and accessible open-source React UI library. Offering headless and unstyled components, it provides developers with the flexibility to customize and integrate seamlessly into any design system.", + keywords: ["React", "UI library", "accessible", "headless"], + canonical: "https://rad-ui.dev/", + openGraph: { + images: [{ url: "/images/og-rad-ui.png", alt: "Rad UI" }], + }, });docs/app/docs/components/toggle-group/seo.ts (1)
3-6: Review metadata payload for SEO best practices
Thetitleanddescriptionare clear and descriptive. Consider validating that the description stays under ~155 characters to avoid truncation in SERPs and that it includes any high-value keywords relevant to “Toggle Group”.docs/app/docs/components/strong/seo.ts (1)
3-7: Generate SEO Metadata InvocationThe call to
generateSeoMetadatacorrectly constructs thestrongMetadata. Consider trimming the description to be under ~160 characters for optimal search snippet display. For example:const strongMetadata = generateSeoMetadata({ title: "Strong - Rad UI", - description: "A headless React Strong component for semantically emphasizing important text. Fully accessible, customizable, and ideal for highlighting key information in interfaces." + description: "Accessible, customizable headless React Strong component for semantically emphasizing key text in interfaces." });docs/app/docs/components/separator/seo.ts (1)
3-6: Separator Metadata GenerationThe metadata is constructed correctly. Similar to other components, consider shortening the description to meet SEO best practices (<160 characters). For example:
const separatorMetadata = generateSeoMetadata({ title: "Separator - Rad UI", - description: "A headless React Separator component for creating accessible and customizable visual dividers between sections. Ideal for improving UX and content organization in user interfaces." + description: "Accessible, customizable headless React Separator component for visual dividers that improve content organization." });docs/app/docs/first-steps/installation/page.mdx (1)
14-14: Optional: Remove redundant--saveflagSince npm v5+,
npm installadds dependencies by default, making--savesuperfluous. Consider simplifying to:npm install @radui/uidocs/app/docs/first-steps/introduction/seo.ts (1)
5-6: Ensure consistent formatting with other SEO modules.
Remove the trailing comma after thedescriptionand add a semicolon at the end of thegenerateSeoMetadatainvocation to align with the semicolon usage in other SEO files.--- a/docs/app/docs/first-steps/introduction/seo.ts +++ b/docs/app/docs/first-steps/introduction/seo.ts @@ 4,7c4,7 - description: "Introduction to Rad UI - an Open Source React Headless UI Library. Get started with Rad UI in minutes.", -}) + description: "Introduction to Rad UI - an Open Source React Headless UI Library. Get started with Rad UI in minutes." +});docs/app/docs/first-steps/usage/seo.ts (1)
5-6: Normalize formatting to match other SEO modules.
Please remove the trailing comma after thedescriptionand add a semicolon after thegenerateSeoMetadatacall for consistency.--- a/docs/app/docs/first-steps/usage/seo.ts +++ b/docs/app/docs/first-steps/usage/seo.ts @@ 4,7c4,7 - description: "Usage steps for Rad UI - an Open Source React Headless UI Library. Learn how to use Rad UI in your project.", -}) + description: "Usage steps for Rad UI - an Open Source React Headless UI Library. Learn how to use Rad UI in your project." +});docs/app/docs/first-steps/usage/page.mdx (1)
63-86: Tailwind Presets GuidanceThe v3 preset instructions are spot-on, and the v4 teaser sets expectations. Consider linking to an issue or roadmap entry once the v4 preset is available.
docs/app/docs/guides/accessibility/page.mdx (2)
8-12: Sentence Variation SuggestionSeveral sentences begin with “We.” To improve rhythm, consider rephrasing or merging one of them.
🧰 Tools
🪛 LanguageTool
[style] ~10-~10: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...ee a seamless experience for all users. We are committed to ongoing improvements, ...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
51-59: Commented-Out Screen Reader AnnouncementsThis block is informative but currently inactive. Consider converting it to an “Upcoming Feature” note or removing it to avoid stale commented code.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (80)
.gitignore(1 hunks)docs/app/baseSeo.ts(1 hunks)docs/app/docs/components/accordion/seo.ts(1 hunks)docs/app/docs/components/aspect-ratio/page.mdx(1 hunks)docs/app/docs/components/aspect-ratio/seo.ts(1 hunks)docs/app/docs/components/avatar-group/page.mdx(1 hunks)docs/app/docs/components/avatar-group/seo.ts(1 hunks)docs/app/docs/components/avatar/page.mdx(1 hunks)docs/app/docs/components/avatar/seo.ts(1 hunks)docs/app/docs/components/badge/page.mdx(1 hunks)docs/app/docs/components/badge/seo.ts(1 hunks)docs/app/docs/components/blockquote/docs/seo.js(0 hunks)docs/app/docs/components/blockquote/page.mdx(1 hunks)docs/app/docs/components/blockquote/seo.ts(1 hunks)docs/app/docs/components/button/docs/seo.js(0 hunks)docs/app/docs/components/button/page.mdx(1 hunks)docs/app/docs/components/button/seo.ts(1 hunks)docs/app/docs/components/callout/docs/seo.js(0 hunks)docs/app/docs/components/callout/page.mdx(1 hunks)docs/app/docs/components/callout/seo.ts(1 hunks)docs/app/docs/components/card/docs/seo.js(0 hunks)docs/app/docs/components/card/page.mdx(1 hunks)docs/app/docs/components/card/seo.ts(1 hunks)docs/app/docs/components/code/docs/seo.js(0 hunks)docs/app/docs/components/code/page.mdx(1 hunks)docs/app/docs/components/code/seo.ts(1 hunks)docs/app/docs/components/em/docs/seo.js(0 hunks)docs/app/docs/components/em/page.mdx(1 hunks)docs/app/docs/components/em/seo.ts(1 hunks)docs/app/docs/components/heading/docs/seo.js(0 hunks)docs/app/docs/components/heading/page.mdx(1 hunks)docs/app/docs/components/heading/seo.ts(1 hunks)docs/app/docs/components/kbd/docs/seo.js(0 hunks)docs/app/docs/components/kbd/page.mdx(1 hunks)docs/app/docs/components/kbd/seo.ts(1 hunks)docs/app/docs/components/progress/docs/seo.js(0 hunks)docs/app/docs/components/progress/page.mdx(1 hunks)docs/app/docs/components/progress/seo.ts(1 hunks)docs/app/docs/components/separator/docs/seo.js(0 hunks)docs/app/docs/components/separator/page.mdx(1 hunks)docs/app/docs/components/separator/seo.ts(1 hunks)docs/app/docs/components/strong/docs/seo.js(0 hunks)docs/app/docs/components/strong/page.mdx(1 hunks)docs/app/docs/components/strong/seo.ts(1 hunks)docs/app/docs/components/switch/page.mdx(1 hunks)docs/app/docs/components/switch/seo.ts(1 hunks)docs/app/docs/components/text/docs/seo.js(0 hunks)docs/app/docs/components/text/page.mdx(1 hunks)docs/app/docs/components/text/seo.ts(1 hunks)docs/app/docs/components/toggle-group/page.mdx(1 hunks)docs/app/docs/components/toggle-group/seo.ts(1 hunks)docs/app/docs/components/toggle/page.mdx(1 hunks)docs/app/docs/components/toggle/seo.ts(1 hunks)docs/app/docs/components/tooltip/docs/seo.js(0 hunks)docs/app/docs/components/tooltip/page.mdx(1 hunks)docs/app/docs/components/tooltip/seo.ts(1 hunks)docs/app/docs/components/visually-hidden/page.mdx(1 hunks)docs/app/docs/components/visually-hidden/seo.ts(1 hunks)docs/app/docs/first-steps/installation/page.mdx(1 hunks)docs/app/docs/first-steps/installation/seo.ts(1 hunks)docs/app/docs/first-steps/introduction/page.mdx(1 hunks)docs/app/docs/first-steps/introduction/seo.ts(1 hunks)docs/app/docs/first-steps/usage/page.mdx(4 hunks)docs/app/docs/first-steps/usage/seo.ts(1 hunks)docs/app/docs/guides/accessibility/page.mdx(1 hunks)docs/app/docs/guides/accessibility/seo.ts(1 hunks)docs/app/page.tsx(1 hunks)docs/mdx-components.tsx(1 hunks)src/design-systems/clarity/tokens/colors/amber.ts(1 hunks)src/design-systems/clarity/tokens/colors/blue.ts(1 hunks)src/design-systems/clarity/tokens/colors/gray.ts(1 hunks)src/design-systems/clarity/tokens/colors/green.ts(1 hunks)src/design-systems/clarity/tokens/colors/purple.ts(1 hunks)src/design-systems/clarity/tokens/colors/red.ts(1 hunks)src/design-systems/clarity/tokens/colors/sage.ts(1 hunks)src/design-systems/clarity/tokens/colors/tomato.ts(1 hunks)src/design-systems/clarity/tokens/colors/violet.ts(1 hunks)src/design-systems/clarity/tokens/colors/yellow.ts(1 hunks)src/examples/Colors/Colors.stories.js(3 hunks)styles/jsTokens/colors.tokens.js(1 hunks)
💤 Files with no reviewable changes (13)
- docs/app/docs/components/heading/docs/seo.js
- docs/app/docs/components/separator/docs/seo.js
- docs/app/docs/components/strong/docs/seo.js
- docs/app/docs/components/blockquote/docs/seo.js
- docs/app/docs/components/text/docs/seo.js
- docs/app/docs/components/callout/docs/seo.js
- docs/app/docs/components/button/docs/seo.js
- docs/app/docs/components/tooltip/docs/seo.js
- docs/app/docs/components/em/docs/seo.js
- docs/app/docs/components/progress/docs/seo.js
- docs/app/docs/components/kbd/docs/seo.js
- docs/app/docs/components/card/docs/seo.js
- docs/app/docs/components/code/docs/seo.js
🧰 Additional context used
🪛 LanguageTool
docs/app/docs/guides/accessibility/page.mdx
[style] ~10-~10: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...ee a seamless experience for all users. We are committed to ongoing improvements, ...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~28-~28: Consider using polite language here.
Context: ...u have suggestions or encounter issues, let us know! ## Contrast and Color Accessibility ...
(INSERT_PLEASE)
[style] ~47-~47: This phrase is redundant. Consider using “outside”.
Context: ...prevent users from accidentally tabbing outside of the component and losing track of where...
(OUTSIDE_OF)
[grammar] ~63-~63: Did you mean “to vary”?
Context: ... We recognize that accessibility needs vary across different projects and users. To...
(MISSING_TO_BEFORE_A_VERB)
docs/app/docs/first-steps/introduction/page.mdx
[style] ~30-~30: ‘in control of’ might be wordy. Consider a shorter alternative.
Context: ...styling tools out of the box. You stay in control of structure, styling, and behavior at eve...
(EN_WORDINESS_PREMIUM_IN_CONTROL_OF)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (123)
.gitignore (1)
18-18: Appropriate ignore of LLM.md
Ignoring theLLM.mdfile prevents it from being tracked in version control, which is consistent with your documentation strategy.docs/app/docs/components/button/seo.ts (3)
1-2: Import of SEO utility is correct
The sharedgenerateSeoMetadatautility is imported using the absolute alias, ensuring consistency across modules.
3-6: Metadata configuration follows the pattern
Thetitleanddescriptionfields are concise and descriptive, aligning with other component metadata modules.
8-8: Default export is properly defined
ExportingbuttonMetadataas default ensures seamless integration with the documentation page.docs/app/docs/components/accordion/seo.ts (1)
5-6: Description refined for clarity
The updated description improves readability and maintains consistency with Rad UI’s documentation tone. The added semicolon at the end of the object literal also aligns with TypeScript style conventions.src/design-systems/clarity/tokens/colors/amber.ts (2)
3-14: OKLCH values correctly replace hex codes for light theme
The light theme tokens have been migrated to perceptually uniform OKLCH notation, preserving the original keys and structure.
17-28: OKLCH values correctly replace hex codes for dark theme
The dark theme tokens are consistently updated to OKLCH notation, matching the approach used across other palettes in this directory.docs/app/docs/first-steps/installation/seo.ts (3)
1-2: Importing SEO generator utility
The import ofgenerateSeoMetadatafollows the established pattern and path alias conventions.
3-6: Installation metadata is descriptive and concise
Thetitleanddescriptionclearly convey the purpose of the installation guide, improving SEO effectiveness.
8-8: Default export for installation metadata
ExportinginstallationMetadataas default ensures it can be correctly imported in the installation page.docs/app/docs/components/code/page.mdx (1)
5-7: Import and export of component-specific SEO metadata are correct
ThecodeMetadataimport from./seoand the re-export asmetadataalign with the new standardized pattern for component SEO modules. Ensure that the correspondingseo.tsfile exists and exports the expected metadata shape.docs/app/docs/components/switch/page.mdx (1)
4-7: Switch component page SEO metadata integration is consistent
AddingswitchMetadataimport and exporting it undermetadatacorrectly follows the established convention. Verify that the./seomodule exports the correct metadata object for the Switch component.docs/app/docs/components/strong/page.mdx (1)
5-7: Strong component page SEO metadata update is accurate
The import ofstrongMetadataand its re-export asmetadataaligns with the new SEO architecture. Confirm that the metadata file provides relevant titles and descriptions for this component.docs/app/docs/components/card/page.mdx (1)
6-8: Card component page metadata wiring looks good
Switching tocardMetadataand re-exporting it undermetadatacorrectly implements the new SEO pattern. Please verify that theseo.tsfile is populated with up-to-date and descriptive metadata for the Card component.docs/app/docs/components/avatar-group/page.mdx (2)
4-4: Imported SEO metadata correctly
The import ofavatarGroupMetadatafrom./seoaligns with the new centralized SEO module structure and will provide the page with the expected metadata.
6-6: Metadata export is properly wired
Exportingmetadata = avatarGroupMetadataensures Next.js will pick up the SEO configuration for this page.docs/app/docs/components/separator/page.mdx (2)
6-6: Imported component-specific SEO metadata
The change to importseparatorMetadatafrom./seocorrectly adopts the new SEO generation utility.
8-8: Exported metadata constant
Updating themetadataexport to useseparatorMetadatamaintains consistency and ensures accurate page metadata.docs/app/docs/components/text/page.mdx (2)
5-5: Switched to centralized SEO import
ImportingtextMetadatafrom./seofollows the standardized pattern for SEO metadata modules.
7-7: Updated metadata export
Themetadata = textMetadataexport is correctly updated for use by the documentation site.docs/app/docs/components/avatar/page.mdx (2)
4-4: Adopted new SEO metadata module
ImportingavatarMetadatafrom./seoaligns with the refactored SEO approach and replaces any legacy metadata.
6-6: Export metadata for Next.js
Assigningmetadata = avatarMetadatacorrectly surfaces the SEO details for this component page.docs/app/docs/components/visually-hidden/page.mdx (2)
4-4: Imported Visually Hidden SEO metadata
The newvisuallyHiddenMetadataimport from./seois consistent with the centralized metadata strategy.
6-6: Exported metadata constant
Exportingmetadata = visuallyHiddenMetadataensures the page uses the correct SEO configuration.docs/app/docs/components/callout/page.mdx (2)
12-12: Consistent SEO metadata import
The new import ofcalloutMetadatafrom./seoaligns with our standardized module pattern and improves clarity by naming the metadata after the component.
14-14: Export metadata for Next.js page
ExportingmetadataascalloutMetadatafollows the Next.js convention for dynamic page metadata and centralizes SEO configuration.docs/app/docs/components/aspect-ratio/page.mdx (2)
5-5: Standardize metadata import
ImportingaspectRatioMetadatafrom./seomatches the naming pattern used across component docs and aids discoverability.
7-7: Export component-specific metadata
Exporting themetadataconstant asaspectRatioMetadataensures consistent SEO handling in the Next.js page.docs/app/docs/components/progress/page.mdx (2)
6-6: Align SEO metadata import
Switching toprogressMetadatafrom./seostandardizes the import and ties the data directly to the Progress component.
8-8: Provide metadata export
ExportingmetadataasprogressMetadatacleanly integrates the new SEO module with Next.js metadata APIs.docs/app/docs/components/button/page.mdx (2)
11-11: Update metadata import naming
ImportingbuttonMetadatafrom./seocorrectly reflects the component’s context and follows established conventions.
13-13: Export page metadata
Theexport const metadata = buttonMetadataline properly exposes the SEO configuration to Next.js for this page.docs/app/docs/components/toggle-group/page.mdx (2)
5-5: Introduce component SEO metadata
ImportingtoggleGroupMetadatafrom./seoaligns with the centralized metadata approach for component documentation.
7-7: Expose metadata for page
ExportingmetadataastoggleGroupMetadataintegrates the new SEO metadata into the Next.js page lifecycle.docs/app/docs/components/toggle-group/seo.ts (2)
1-2: Ensure import path resolution
The alias import"@/utils/seo/generateSeoMetadata"must match your project’stsconfig.json/webpack (or Vite) configuration for the@root alias. Please verify that this path resolves correctly at compile time.
8-8: Default export is consistent
ExportingtoggleGroupMetadataas the default aligns with other component SEO modules and will integrate seamlessly with your MDX pages.docs/app/docs/components/em/page.mdx (2)
7-7: Validate new SEO metadata import
You’ve replaced the legacyseoimport withemMetadatafrom./seo. Confirm thatseo.tsexports a defaultemMetadataobject and that there are no lingering references to the old module.
9-9: Metadata export for Next.js pages
ExportingmetadataasemMetadataensures Next.js picks up the centralized SEO settings. This matches the standardized pattern across component docs.docs/app/docs/components/blockquote/page.mdx (2)
9-9: Import updated BlockQuote SEO metadata
Switching toimport blockquoteMetadata from './seo'is correct for the new setup. Please verify thatseo.tsexports it as default and that the path is correct.
11-11: Standardized metadata export
Exportingmetadata = blockquoteMetadataaligns with the new SEO metadata architecture and will be consumed correctly by the framework.docs/app/docs/components/toggle/page.mdx (2)
5-5: Import new Toggle SEO metadata
Ensure the filedocs/app/docs/components/toggle/seo.tsexists and exportstoggleMetadataas default so this import resolves.
7-7: Exporting page metadata
Usingexport const metadata = toggleMetadata;is consistent with other pages and will configure the page’s SEO correctly.docs/app/docs/components/kbd/page.mdx (2)
6-6: Add import for Kbd component SEO metadata
Verify thatseo.tsin this directory defines and exportskbdMetadataas the default. Remove any leftover references to olddocs/seomodules.
8-8: Approve metadata export
export const metadata = kbdMetadata;matches the new pattern and will be picked up by Next.js’s metadata API.docs/app/docs/components/tooltip/page.mdx (1)
8-10: Consistent SEO Metadata IntegrationImporting
tooltipMetadatafrom./seoand exporting it asmetadatacorrectly aligns this page with the new SEO pattern used across component docs. Double-check thatdocs/app/docs/components/tooltip/seo.tsprovides a default export namedtooltipMetadataso this import resolves without issues.docs/app/docs/components/badge/page.mdx (1)
10-12: SEO Metadata Module IntegrationSwitching to
import badgeMetadata from "./seo"and exporting it asmetadatais consistent with the new modular SEO approach. Validate thatdocs/app/docs/components/badge/seo.tsexportsbadgeMetadataas default.docs/app/docs/components/strong/seo.ts (2)
1-2: Import Path Alias for SEO UtilityThe alias import
import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"follows the configured path mappings. Ensure yourtsconfig.jsonor bundler settings resolve@/utils/seo/generateSeoMetadatacorrectly.
10-10: Default Export of MetadataExporting
strongMetadataas the default export matches the import pattern used in the correspondingpage.mdx. This ensures consistency across all SEO modules.docs/app/docs/components/heading/page.mdx (1)
5-7: Heading Metadata Export StandardizationThe import of
headingMetadatafrom./seoand exportingmetadatahere aligns with the standardized SEO metadata pattern. Ensure theseo.tsfile defines a default export namedheadingMetadata.docs/app/docs/components/separator/seo.ts (2)
1-2: SEO Utility Import PathThe import
generateSeoMetadatafrom"@/utils/seo/generateSeoMetadata"is correct as per the project alias settings. Confirm path resolution intsconfig.jsonor bundler config.
9-9: Exported Default MetadataUsing a default export of
separatorMetadataenables straightforward imports in the documentation pages. This matches the pattern used across all component SEO modules.docs/app/docs/guides/accessibility/seo.ts (1)
1-6: Approve SEO metadata module for the accessibility guide
The newaccessibilityMetadatacorrectly leverages the sharedgenerateSeoMetadatautility and follows the established import/export conventions.docs/app/docs/components/avatar-group/seo.ts (1)
1-6: Approve SEO metadata module for Avatar Group component
TheavatarGroupMetadataconstant usesgenerateSeoMetadataappropriately and the title/description align with the component’s purpose.docs/app/docs/components/aspect-ratio/seo.ts (1)
1-6: Approve SEO metadata module for Aspect Ratio component
TheaspectRatioMetadataexport follows the standardized pattern, providing a clear title and description via the centralized SEO utility.docs/app/docs/components/text/seo.ts (1)
1-6: Approve SEO metadata module for Text component
ThetextMetadatadefinition and export correctly mirror the other components’ SEO modules, maintaining consistency in naming and content.docs/app/docs/components/heading/seo.ts (3)
1-2: Correctly import the shared SEO utility
The import path forgenerateSeoMetadataaligns with the established alias configuration and centralizes metadata creation.
3-6: Consistent SEO metadata structure
Thetitleanddescriptionfields are descriptive and concise, following the project's SEO guidelines.
8-8: Default export of metadata
ExportingheadingMetadataas the default export is clear and matches the pattern used across component docs.docs/app/docs/components/blockquote/seo.ts (3)
1-2: Import shared SEO generator
Using the centralizedgenerateSeoMetadataimport ensures consistent metadata generation across all docs.
3-6: SEO payload is well-formed
Thetitleanddescriptionaccurately describe the Blockquote component and adhere to style guidelines.
8-8: Default export follows convention
TheblockquoteMetadatadefault export matches other component modules, ensuring consistency.docs/app/docs/components/em/seo.ts (3)
1-2: Centralized SEO import
ImportinggenerateSeoMetadatafrom the shared utilities keeps metadata logic DRY.
3-6: Metadata content is clear and precise
Thetitleanddescriptioneffectively convey the purpose and accessibility of the<em>component.
9-9: Consistent default export
ExportingemMetadataby default aligns with the naming pattern used in other component SEO modules.docs/app/docs/components/avatar/seo.ts (3)
1-2: Aligned import of SEO utility
The import statement correctly references the sharedgenerateSeoMetadatahelper.
3-6: Accurate avatar metadata
Thetitleanddescriptionsuccinctly highlight the Avatar component’s features and customization options.
8-8: Default export is correct
ExportingavatarMetadataas default is consistent with the other component modules.src/design-systems/clarity/tokens/colors/blue.ts (2)
3-14: OKLCH light palette values
The migration from hex to OKLCH for the light theme is complete and the syntax is consistent. Ensure you’ve verified these values in-browser or via design tooling to confirm perceptual uniformity.Please run a quick visual check or use your design system’s color preview to confirm these values render as expected.
17-28: OKLCH dark palette values
The dark theme entries have been successfully converted to OKLCH. As with the light palette, validate these in context to catch any unexpected shifts in hue or lightness.Consider sampling these in Storybook or your theme switcher to ensure the staged colors align with design specifications.
src/design-systems/clarity/tokens/colors/green.ts (2)
3-14: Consistency check: OKLCH values look correctly structuredThe transition from hex to OKLCH is consistent across all light shades, preserving the original keys and improving perceptual uniformity. All values follow the CSS
oklch(L C H)format, and theas constassertion ensures literal typing.
17-28: Dark theme palette conversion verifiedThe dark theme shades mirror the light theme’s format, correctly using OKLCH parameters without altering any keys. This will integrate seamlessly with existing theming logic.
docs/app/docs/components/callout/seo.ts (3)
1-1: Verify import path alias resolutionPlease confirm that the
"@/utils/seo/generateSeoMetadata"alias is correctly configured intsconfig.jsonand your bundler so that the module resolves without build errors.
3-6: SEO metadata structure is clear and descriptiveThe
titleanddescriptionfollow the established<Component> - Rad UIpattern, and delegating togenerateSeoMetadataensures consistency across docs.
8-8: Default export follows conventionExporting
calloutMetadataas the default matches the pattern used by other component SEO modules, keeping the API surface uniform.docs/app/docs/components/kbd/seo.ts (3)
1-1: Confirm alias configurationEnsure that
"@/utils/seo/generateSeoMetadata"is mapped correctly in your TypeScript and bundler settings so the import resolves.
3-6: Metadata content aligns with guidelinesThe
titleanddescriptionaccurately describe the Kbd component and adhere to the component naming conventions used throughout the docs.
8-8: Consistent export patternExporting
kbdMetadataby default is consistent with other SEO modules and supports uniform imports in MDX pages.src/design-systems/clarity/tokens/colors/sage.ts (2)
3-14: Light theme palette conversion verifiedThe sage light shades now use OKLCH, correctly formatted, with no changes to the key structure. The
as constensures the color tokens remain strongly typed.
17-28: Dark theme palette conversion verifiedDark mode tokens mirror the light mode’s OKLCH format and maintain the same keys, guaranteeing consistent theme behavior.
docs/app/docs/first-steps/installation/page.mdx (3)
1-4: Metadata import/export is correctImporting
installationMetadatafrom./seoand assigning it toexport const metadatafollows the established App Router conventions.
7-7: Introductory paragraph reads clearlyThe new opening paragraph provides a welcoming, concise overview for first-time integrators.
9-9: Heading updated for consistencyChanging “Install using npm” to “Install via npm” aligns with other guide pages.
docs/app/docs/components/visually-hidden/seo.ts (1)
1-9: SEO metadata file properly implemented.The new SEO metadata for the Visually Hidden component is well structured and follows the centralized pattern using the
generateSeoMetadatautility. The description effectively highlights the accessibility benefits of the component, which is essential for SEO and user understanding.src/design-systems/clarity/tokens/colors/yellow.ts (2)
3-14: Verify lightness progression in yellow light theme.The conversion to OKLCH color format looks good, which should provide better perceptual uniformity. However, I noticed that the lightness progression seems inconsistent:
- Shade 700: 0.78
- Shade 800: 0.94 (jumps up significantly)
- Shade 900: 0.91
This breaks the expected decreasing lightness pattern as the shade numbers increase.
17-28: Verify lightness progression in yellow dark theme.The OKLCH color format implementation looks good overall, but there appears to be an inconsistency in the lightness progression at the higher shade numbers:
- Shade 700: 0.57
- Shade 800: 0.94 (jumps drastically)
- Shade 900: 0.97
- Shade 950: 0.9
- Shade 1000: 0.93
In a typical dark theme palette, we would expect lightness to generally increase as shade numbers increase, but these values show a sudden jump and remain high through shade 1000.
src/design-systems/clarity/tokens/colors/red.ts (2)
3-14: Excellent color progression in the red light theme.The conversion to OKLCH color format has been implemented with a consistent and visually appropriate progression. The lightness values decrease steadily from lighter shades (50-100) to darker shades (900-1000), while the chroma (saturation) values peak appropriately in the middle-range shades.
17-28: Excellent color progression in the red dark theme.The OKLCH implementation for the dark theme shows a well-structured progression where lightness appropriately increases from darker shades (50-100) to lighter shades (900-1000), which is exactly what we want in a dark theme. The chroma values also follow a natural arc, peaking in the middle shades (700-900).
src/design-systems/clarity/tokens/colors/violet.ts (2)
3-14: Good OKLCH implementation for violet light theme.The conversion to OKLCH color format for the violet light theme shows a consistent progression of decreasing lightness (from 0.99 to 0.28) and appropriate chroma values that peak in the middle-range shades. The hue values (275-300) accurately represent the violet color spectrum.
17-28: Good OKLCH implementation for violet dark theme.The dark theme implementation shows a well-structured progression with lightness appropriately increasing from darker shades (0.15) to lighter shades (0.93), which is suitable for a dark theme. The chroma values also follow a natural pattern, and the hue values remain consistent within the violet spectrum.
docs/app/docs/components/badge/seo.ts (1)
1-9: SEO metadata module for Badge component looks good.
The import path and the generated metadata (title & description) follow the established pattern for other components. Everything is consistent and ready to ship.docs/app/docs/components/switch/seo.ts (1)
1-10: SEO metadata module for Switch component is consistent and correct.
Import, title, and description are well-defined, and semicolon usage matches other SEO files. No changes needed.docs/app/docs/components/toggle/seo.ts (1)
1-9: SEO metadata module for Toggle component looks solid.
The structure aligns with other component SEO modules, and the metadata values are clear and concise.docs/app/docs/components/tooltip/seo.ts (1)
1-8: LGTM: Well-structured SEO metadata for Tooltip componentThe implementation correctly imports the shared SEO utility and creates clear, descriptive metadata for the Tooltip component. The description provides valuable information about the component's purpose and benefits, which is excellent for SEO.
docs/app/docs/components/code/seo.ts (1)
1-9: LGTM: Well-structured SEO metadata for Code componentThe implementation follows the same pattern as other components, using the shared utility to generate consistent SEO metadata. The description is informative and keyword-rich.
docs/app/docs/components/card/seo.ts (1)
1-8: LGTM: Well-structured SEO metadata for Card componentThe implementation correctly follows the established pattern for component SEO metadata. The description effectively communicates the Card component's value proposition and features.
docs/mdx-components.tsx (1)
44-51: LGTM: Good addition of styled list componentsThe addition of styled
ulandlirenderers completes the MDX component customization, ensuring consistent styling throughout the documentation. The styling choices (list-disc, appropriate spacing, and text color) align well with the existing heading and paragraph styles.src/examples/Colors/Colors.stories.js (2)
6-6: Good addition of Theme component import.The import of the Theme component aligns well with the theming improvements being made across the design system.
15-25: Excellent refactoring of theme handling.Replacing conditional CSS classes with a dedicated Theme component is a significant improvement. This approach:
- Centralizes theme management
- Makes the theme context explicit in the component hierarchy
- Improves maintainability by removing scattered theme-related CSS classes
This change aligns well with the broader transition to OKLCH color values and improved theming in the design system.
styles/jsTokens/colors.tokens.js (1)
2-435: Clean formatting improvement for color tokens.The reformatting from JSON-style syntax to JavaScript object literal style improves code consistency and readability while maintaining the same semantic content. This stylistic change aligns well with modern JavaScript conventions and the broader color system improvements in this PR.
Note that while the actual references remain as CSS variables, this change complements the conversion of underlying color definitions to OKLCH format elsewhere in the codebase.
docs/app/docs/components/progress/seo.ts (1)
1-9: Well-structured SEO metadata implementation.This new SEO module follows a good pattern:
- Uses a centralized utility function for generating metadata
- Provides a clear, component-specific title
- Includes a comprehensive description that highlights the component's key features and use cases
The detailed description with keywords like "headless React", "customizable", "accessibility", and specific use cases will help improve search engine visibility.
docs/app/page.tsx (2)
9-10: Good centralization of SEO metadata imports.Adding this import is a positive step toward centralizing metadata management across the documentation.
12-12: Excellent refactoring of metadata export.Replacing inline metadata with a centralized import improves maintainability and consistency across the documentation. This approach ensures that SEO metadata follows a consistent pattern and can be updated in a single location.
src/design-systems/clarity/tokens/colors/tomato.ts (2)
3-14: OKLCH Conversion Seems CorrectThe light-mode
tomatoshades have been consistently migrated from HSL to OKLCH functional notation and maintain the same keys. The syntax aligns with CSS Color Level 4 specifications.
17-28: Dark-Mode Values Are ConsistentThe dark-mode
tomatopalette mirrors the structure of the light-mode definitions with valid OKLCH values. No issues found.src/design-systems/clarity/tokens/colors/gray.ts (2)
3-14: Light-Mode Gray Tokens Updated ProperlyAll light-mode gray tokens now use OKLCH with minimal chroma (
0.002) and hue 0, matching the previous HSL grays. Syntax is valid and keys are unchanged.
17-28: Dark-Mode Gray Tokens Are CorrectDark-mode grays follow the same OKLCH pattern. The values are consistent, semantically correct, and comply with CSS color standards.
docs/app/docs/first-steps/usage/page.mdx (5)
1-4: Consistent SEO Metadata ModularizationImporting
usageMetadataand re-exportingmetadataaligns with the centralized SEO module strategy introduced in this PR.
8-11: Clear Intro to Component ImportingThe new paragraph succinctly explains Rad UI’s headless flexibility versus quick prototyping, setting clear expectations for users.
17-28: Enhanced Component Usage GuidanceGood addition recommending custom abstractions to maintain consistency and centralize project-specific APIs.
31-38: Importing Base Styles SectionThis section clearly explains the headless default and how to pull in the default theme—very helpful for newcomers.
44-59: Theme Configuration ExampleThe
<Theme>component snippet is clear, demonstrates global preference management, and aligns with the updated example inColors.stories.js.docs/app/docs/guides/accessibility/page.mdx (7)
2-5: SEO Metadata Import in Accessibility GuideImporting
accessibilityMetadataand exportingmetadatamaintains consistency with other docs and centralizes SEO configuration.
19-20: WAI-ARIA Compliance ClarityThe wording is concise and effectively communicates adherence to ARIA guidelines.
26-29: Keyboard Navigation DetailsClear description of keyboard interactions and the beta notice adds transparency.
🧰 Tools
🪛 LanguageTool
[style] ~28-~28: Consider using polite language here.
Context: ...u have suggestions or encounter issues, let us know! ## Contrast and Color Accessibility ...(INSERT_PLEASE)
31-38: Contrast & Color Accessibility SectionExcellent addition covering WCAG contrast and recommending tooling like WebAIM’s checker.
41-48: Focus Management DescriptionThorough explanation of automatic focus shifting and trapping; very informative for implementers.
🧰 Tools
🪛 LanguageTool
[style] ~47-~47: This phrase is redundant. Consider using “outside”.
Context: ...prevent users from accidentally tabbing outside of the component and losing track of where...(OUTSIDE_OF)
61-68: Customizable Accessibility FeaturesWell-articulated section on ARIA attribute customization and disabling defaults to fit diverse needs.
🧰 Tools
🪛 LanguageTool
[grammar] ~63-~63: Did you mean “to vary”?
Context: ... We recognize that accessibility needs vary across different projects and users. To...(MISSING_TO_BEFORE_A_VERB)
71-78: Community Involvement SectionStrong call to action for feedback and contributions, reinforcing the community-driven accessibility efforts.
docs/app/docs/first-steps/introduction/page.mdx (5)
1-4: SEO Metadata Centralization
import introductionMetadataand re-exportingmetadataaligns with the new SEO module pattern.
8-13: Expanded Introduction CopyThe revised intro effectively emphasizes headless architecture, accessibility, and performance.
16-29: “Why Rad UI?” SubsectionsBreaking out Design System–Ready, Flexible Adoption, Accessibility by Default, and Composable sections greatly improves readability and depth.
33-44: Performance & Developer Experience HighlightsThe “Built for Speed,” “Developer Experience First,” and “Styling Freedom” subsections clearly articulate Rad UI’s core value propositions.
47-58: Target Audience and ClosingThe persona segmentation and final community call are well structured and compelling.
| 50: 'oklch(0.99 0.008 290)', | ||
| 100: 'oklch(0.98 0.012 286)', | ||
| 200: 'oklch(0.96 0.025 285)', | ||
| 300: 'oklch(0.94 0.041 284)', | ||
| 400: 'oklch(0.91 0.058 284)', | ||
| 500: 'oklch(0.87 0.075 283)', | ||
| 600: 'oklch(0.82 0.093 282)', | ||
| 700: 'oklch(0.75 0.115 280)', | ||
| 800: 'oklch(0.59 0.135 280)', | ||
| 900: 'oklch(0.55 0.132 280)', | ||
| 950: 'oklch(0.52 0.14 280)', | ||
| 1000: 'oklch(0.29 0.085 278)' |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify complete OKLCH migration for purple tokens
The purple palette values have been updated to OKLCH for both light and dark modes. To ensure no legacy HSL or hex values remain across all color token files, please run the following verification script:
Also applies to: 17-28
🏁 Script executed:
#!/bin/bash
# Verify no remaining HSL or hex color values in clarity color tokens
rg -n -e 'hsl\(' -e '#[0-9a-fA-F]+' src/design-systems/clarity/tokens/colorsLength of output: 41278
Incomplete OKLCH migration across clarity color tokens
The purple palette has been converted, but our scan shows legacy HSL and hex values still present in many other token files. Please migrate all palettes under src/design-systems/clarity/tokens/colors/ to OKLCH and confirm there are no remaining HSL/hex entries by running:
rg -n -e 'hsl\(' -e '#[0-9a-fA-F]+' src/design-systems/clarity/tokens/colorsAffected files include (but aren’t limited to):
- src/design-systems/clarity/tokens/colors/plum.ts
- src/design-systems/clarity/tokens/colors/teal.ts
- src/design-systems/clarity/tokens/colors/slate.ts
- src/design-systems/clarity/tokens/colors/sky.ts
- src/design-systems/clarity/tokens/colors/sand.ts
- …and all other
.tsfiles in that directory.
Summary by CodeRabbit
New Features
Refactor
Style
Chores
.gitignoreto exclude specific files from version control.