fix(Datepicker): switch hardcoded color cyan -> primary
#1579
Conversation
🦋 Changeset detectedLatest commit: 9bccecc The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes update the Datepicker component's theme configuration by replacing all instances of the "cyan" color with "primary" in the relevant CSS class names. This affects focus rings, button backgrounds, and selection states, aligning the component styling with a more configurable color token. Changes
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
packages/ui/src/components/Datepicker/theme.tsOops! Something went wrong! :( ESLint: 8.57.0 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "/packages/ui".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in "packages/ui/.eslintrc.cjs". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ 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 (
|
SutuSebastian
force-pushed
the
fix/datepicker/colors
branch
from
d98a351 to
9bccecc
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 1
🧹 Nitpick comments (1)
.changeset/evil-rats-drum.md (1)
1-3: Reference issue in changeset for clarity
Consider adding a reference to issue #882 in the changeset description to provide context for this theming fix.fix(Datepicker): switch hardcoded color `cyan` -> `primary` +Refer to issue #882 for details on this update.Also applies to: 5-5
🛑 Comments failed to post (1)
packages/ui/src/components/Datepicker/theme.ts (1)
33-34: 💡 Verification agent
🧩 Analysis chain
Ensure primary color variants exist in Tailwind config
The focus ring and “today” button now referenceprimary-300,primary-700,primary-800, etc. Confirm these color variants are defined in your Tailwind setup to avoid missing CSS at runtime.
🏁 Script executed:
#!/bin/bash # Verify primary color token variants in Tailwind config rg "primary-300" -g "tailwind.config.js" || echo "primary-300 not found" rg "primary-700" -g "tailwind.config.js" || echo "primary-700 not found" rg "primary-800" -g "tailwind.config.js" || echo "primary-800 not found"Length of output: 722
🏁 Script executed:
#!/bin/bash # Locate Tailwind config file(s) and verify primary variants echo "Searching for Tailwind config files..." configs=$(find . -maxdepth 3 -type f -iname "tailwind.config.*") if [ -z "$configs" ]; then echo "No Tailwind config files found" exit 0 fi echo "Found Tailwind config(s):" echo "$configs" echo echo "Checking for primary color variants (300, 700, 800):" for cfg in $configs; do echo "In $cfg:" grep -E "primary-(300|700|800)" "$cfg" || echo " → none of primary-300, primary-700, or primary-800 found" doneLength of output: 1677
Add missing primary color variants to Tailwind configs
The Datepicker’s focus ring (focus:ring-primary-300) and “today” button classes (bg-primary-700,hover:bg-primary-800) reference color shades that aren’t defined in any of your Tailwind configs. Without these entries, those utilities will be stripped out at build time.Please update each Tailwind config to include the needed variants under
theme.extend.colors.primary(or adjust your token names to match existing ones):• apps/storybook/tailwind.config.cjs
• apps/web/tailwind.config.cjs
• packages/ui/tailwind.config.cjsExample snippet to add in each config:
module.exports = { theme: { extend: { colors: { primary: { 300: '#<your-300-hex>', 700: '#<your-700-hex>', 800: '#<your-800-hex>', }, }, }, }, }🤖 Prompt for AI Agents
In packages/ui/src/components/Datepicker/theme.ts around lines 33 to 34, the Tailwind CSS classes use primary color variants (primary-300, primary-700, primary-800) that are not defined in the Tailwind configuration files. To fix this, update each Tailwind config file (apps/storybook/tailwind.config.cjs, apps/web/tailwind.config.cjs, packages/ui/tailwind.config.cjs) by adding the missing primary color variants under theme.extend.colors.primary with appropriate hex color values for 300, 700, and 800 shades. This ensures the CSS utilities are generated and available at runtime.
Issue
#882 - comment ref
Changes
cyan->primarySummary by CodeRabbit