Update buttons outline color

[skrobek]

User description

Update secondary blue, ghost & link buttons outline colors

---

PR Type

enhancement, dependencies

---

Description

• Added new outline color classes (outline-blue-300, outline-blue-700, outline-slate-300) in style.css for enhanced button styling.
• Updated var(--tw-border-opacity) and var(--tw-bg-opacity) to include default fallback values for better CSS compatibility.
• Enhanced button variants in button.tsx by adding outline properties to secondaryBlue, link, and ghost variants.
• Refactored button variant definitions for improved maintainability.
• Upgraded TailwindCSS version from 3.4.9 to 3.4.17 in both style.css and package.json.
• Updated package version in package.json from 0.12.17 to 0.12.18.

---

Changes walkthrough 📝

	Relevant files
Enhancement	style.css Added new button outline styles and updated TailwindCSS version. style.css Added new outline color classes for buttons (outline-blue-300, outline-blue-700, outline-slate-300). Updated var(--tw-border-opacity) and var(--tw-bg-opacity) to include default fallback values. Refactored and added new focus-visible outline styles (focus-visible:outline-blue-300). Updated TailwindCSS version from 3.4.9 to 3.4.17. +251/-235 button.tsx Enhanced button variants with outline properties.                src/components/ui/button/button.tsx Added outline properties to secondaryBlue, link, and ghost button variants. Refactored button variants to improve clarity and maintainability. +11/-11
Dependencies	package.json Updated package version and TailwindCSS dependency.            package.json Updated package version from 0.12.17 to 0.12.18. Upgraded tailwindcss dependency from version 3.4.9 to 3.4.17. +2/-2

---

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

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

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

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Code Smell The buttonVariants object has grown significantly with multiple variants and properties. Consider modularizing or simplifying the structure for better maintainability and readability. Code Duplication The addition of multiple outline-* and border-* classes with similar patterns introduces redundancy. Consider using a more dynamic or reusable approach to define these styles. Dependency Update The TailwindCSS version has been updated from 3.4.9 to 3.4.17. Ensure that this update does not introduce breaking changes or compatibility issues with existing styles.

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Accessibility	Ensure focus outlines are applied to button variants for accessibility and clarity Verify that the outline classes (e.g., outline-blue-500, outline-slate-300) are applied correctly in the button variants to ensure accessibility and visual clarity when buttons are focused. src/components/ui/button/button.tsx [20-25] secondaryBlue: - 'text-blue-700 bg-blue-50 border-blue-200 hover:bg-blue-100 hover:border-blue-300 active:bg-blue-100 active:border-blue-300 disabled:bg-blue-50 disabled:border-blue-200 disabled:text-blue-200 outline-blue-500', + 'text-blue-700 bg-blue-50 border-blue-200 hover:bg-blue-100 hover:border-blue-300 active:bg-blue-100 active:border-blue-300 disabled:bg-blue-50 disabled:border-blue-200 disabled:text-blue-200 focus:outline-blue-500', ghost: - 'btn-ghost text-slate-600 hover:bg-slate-100 active:bg-slate-100 disabled:text-slate-200 disabled:bg-transparent outline-slate-300', + 'btn-ghost text-slate-600 hover:bg-slate-100 active:bg-slate-100 disabled:text-slate-200 disabled:bg-transparent focus:outline-slate-300', Suggestion importance[1-10]: 8 Why: Adding focus outlines to button variants improves accessibility and visual clarity, which is crucial for users relying on keyboard navigation or assistive technologies. This is a meaningful enhancement to the user experience.	8
General	Align outline-color values with the design system to maintain consistency Ensure that the outline-color values in .outline-blue-300, .outline-blue-700, and .outline-slate-300 are consistent with the project's design system or color palette to avoid unintended visual inconsistencies. style.css [4500-4510] .outline-blue-300 { - outline-color: #93c5fd; + outline-color: var(--design-blue-300, #93c5fd); } .outline-blue-700 { - outline-color: #1d4ed8; + outline-color: var(--design-blue-700, #1d4ed8); } .outline-slate-300 { - outline-color: #cbd5e1; + outline-color: var(--design-slate-300, #cbd5e1); } Suggestion importance[1-10]: 7 Why: The suggestion promotes consistency with the design system by using variables for outline colors, which enhances maintainability and ensures adherence to the project's color palette. However, it assumes the existence of these variables without verifying their presence in the codebase.	7
	Verify compatibility of the updated TailwindCSS version with other dependencies Confirm compatibility of the updated tailwindcss version (3.4.17) with other dependencies to prevent potential build or runtime issues. package.json [89] +"tailwindcss": "^3.4.17", - Suggestion importance[1-10]: 5 Why: While the suggestion to confirm compatibility is valid, it is not actionable and relies on external verification rather than providing a direct improvement to the code. This limits its impact on the PR.	5