docs: fix progressradial dark class

[shinokada]

Closes #1809

📑 Description

Add dark class to progressradial examples

Status

• Not Completed
• Completed

✅ Checks

• My pull request adheres to the code style of this project
• My code requires changes to the documentation
• I have updated the documentation and api-check directory as required
• All the tests and check have passed by running pnpm check && pnpm test:e2e
• My pull request is based on the latest commit (not the npm version).
• I have checked the page with https://validator.unl.edu/

ℹ Additional Information

Summary by CodeRabbit

• New Features
  • Progressradial component now supports custom styling options for dark mode text colors on labels and outside elements.

[vercel]

@shinokada is attempting to deploy a commit to the Themesberg Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

The pull request adds dark mode styling support to Progressradial component examples by introducing a classes prop that enables custom styling for outside and label elements, replacing previous explicit color class configurations.

Changes

Cohort / File(s)	Summary
Progressradial Dark Mode Styling src/routes/docs-examples/extend/progressradial/Animation.svelte, src/routes/docs-examples/extend/progressradial/Colors.svelte	Introduced classes prop with shape { outside: string } to Progressradial component usages. Updated all instances to pass classes={{outside:'dark:text-white'}} for consistent dark mode text color on outside labels, replacing previous explicit color variants and component configuration patterns.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Changes follow a consistent, homogeneous refactor pattern across both files (prop usage standardization)
• No complex logic modifications; purely styling configuration updates
• Straightforward application of the new classes prop API across example components

Possibly related PRs

• PR feat: progressbar new way of handling classes #1607: Updates Progressradial example usages to pass the new classes prop, directly corresponding to the unified styling prop refactor in these component examples.

Poem

🐰 In moonlit hours when darkness falls,
the Progressradial answers calls—
With classes bright and outside white,
dark mode dances through the night! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title "docs: fix progressradial dark class" clearly relates to the changeset, which modifies documentation example files to add dark mode styling support to progressradial components. While "fix" might suggest bug correction rather than feature addition, it accurately conveys that the examples are being updated to include proper dark class handling. The title is concise, specific enough for a developer scanning history to understand the primary change involves dark mode styling for progressradial examples, and appropriately uses the "docs:" prefix to indicate documentation changes.
Linked Issues Check	✅ Passed	The changes address the requirements specified in linked issue #1809 by adding dark mode styling to progressradial examples. The modifications to Animation.svelte and Colors.svelte introduce a classes prop with dark mode text colors (dark:text-white) applied to the outside element, which corresponds to the labelOutside requirement mentioned in the issue. The raw summary confirms that both example files have been updated to apply consistent dark-mode styling through the classes prop, fulfilling the stated objective to add dark class support for progressradial components.
Out of Scope Changes Check	✅ Passed	All changes in this pull request are directly related to the stated objective of adding dark class support to progressradial examples. The modifications are limited to two documentation example files (Animation.svelte and Colors.svelte) and focus exclusively on applying dark mode styling through the classes prop. No unrelated code changes, dependency updates, or structural modifications are present in the changeset.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 554a214 and 3deb06c.

📒 Files selected for processing (2)

• src/routes/docs-examples/extend/progressradial/Animation.svelte (1 hunks)
• src/routes/docs-examples/extend/progressradial/Colors.svelte (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Playwright and Lint

🔇 Additional comments (2)

src/routes/docs-examples/extend/progressradial/Animation.svelte (1)

7-7: Dark mode classes added correctly.

The addition of dark mode text colors for both the outside label and inside label ensures visibility in dark mode. The classes prop syntax is correct.

src/routes/docs-examples/extend/progressradial/Colors.svelte (1)

5-24: The review comment is based on incorrect assumptions and should be disregarded.

The Progressradial component from flowbite-svelte uses the progress prop to set the fill amount (0–100), not as a styling element. The inconsistency concern is also moot: Colors.svelte uses only labelOutside (unlike Animation.svelte which uses both labelOutside and labelInside), making the suggestion to add label: 'dark:text-white' unnecessary. The current dark mode styling for outside labels is correct and complete for this example.

Likely an incorrect or invalid review comment.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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