fix: border color incorrect in tailwind

[elibosley]

Summary by CodeRabbit

• New Features

  • Introduced new UI theme variables for border color, border radius, and primary color states to enhance customization options.

• Refactor

  • Removed redundant and unused CSS variables related to primary color and border radius for improved consistency and maintainability.

[coderabbitai]

Walkthrough

CSS custom properties for UI primary colors were removed from @tailwind-shared/base-utilities.css. In @tailwind-shared/unraid-theme.css, new UI-related CSS variables were added for borders, radii, and primary colors, and a duplicate radius variable was removed. No other changes or public API alterations occurred.

Changes

Cohort / File(s)	Change Summary
Removal of UI primary color variables @tailwind-shared/base-utilities.css	Removed --ui-primary, --ui-primary-hover, and --ui-primary-active variables from both :root and .dark.
Addition and consolidation of UI theme variables @tailwind-shared/unraid-theme.css	Added new UI-related custom properties (--ui-border-muted, --ui-radius, --ui-primary, --ui-primary-hover, --ui-primary-active); removed duplicate --ui-radius.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested reviewers

• zackspear

Poem

Colors shift and borders gleam,
Variables pruned in CSS stream.
A radius set, a duplicate gone,
New hues for UI to build upon.
With every tweak, the theme grows bright—
Code’s little dance in the style-sheet night! ✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

---

📜 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 e2fa648 and eb300d3.

📒 Files selected for processing (2)

• @tailwind-shared/base-utilities.css (0 hunks)
• @tailwind-shared/unraid-theme.css (1 hunks)

💤 Files with no reviewable changes (1)

• @tailwind-shared/base-utilities.css

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: elibosley
PR: unraid/api#1522
File: unraid-ui/src/components/ui/dialog/DialogContent.vue:45-50
Timestamp: 2025-07-17T14:10:14.613Z
Learning: The `outline-hidden` utility class is valid in Tailwind CSS and sets `outline-style: hidden`. This is different from `outline-none` which sets `outline: 2px solid transparent; outline-offset: 2px`. The change from `focus:outline-none` to `focus:outline-hidden` is part of the Tailwind CSS v4 upgrade.

Learnt from: elibosley
PR: unraid/api#1522
File: unraid-ui/src/components/ui/dialog/DialogContent.vue:45-50
Timestamp: 2025-07-17T14:10:14.613Z
Learning: In Tailwind CSS v4, `outline-hidden` is a valid utility class that replaces the v3 behavior of `outline-none`. It applies `outline: 2px solid transparent; outline-offset: 2px;` which hides the browser outline while preserving it in forced colors/high-contrast mode for accessibility. The migration pattern from v3 to v4 is to replace `focus:outline-none` with `focus:outline-hidden` for better accessibility.

Learnt from: elibosley
PR: unraid/api#1181
File: web/store/theme.ts:210-216
Timestamp: 2025-02-21T18:40:10.810Z
Learning: When updating theme-related CSS variables via `cssText`, preserve existing non-theme styles by filtering out only theme-related rules (those starting with '--') and combining them with the new theme styles.

Learnt from: elibosley
PR: unraid/api#1522
File: web/components/UserProfile/DropdownTrigger.vue:0-0
Timestamp: 2025-07-17T14:09:37.222Z
Learning: Tailwind CSS v4 changed gradient utility classes from bg-gradient-to-r to bg-linear-to-r. The new syntax uses bg-linear-to-r instead of the v3 syntax bg-gradient-to-r for linear gradients.

Learnt from: elibosley
PR: unraid/api#1155
File: web/store/theme.ts:49-50
Timestamp: 2025-02-20T15:52:56.733Z
Learning: CSS variable names in the theme store should be concise and follow established patterns. For example, prefer '--gradient-start' over '--color-customgradient-start' to maintain consistency with other variable names.

Learnt from: elibosley
PR: unraid/api#1522
File: unraid-ui/src/styles/globals.css:172-174
Timestamp: 2025-07-18T16:13:55.872Z
Learning: In Tailwind CSS v4, `--breakpoint-*` is valid syntax within the `@theme` directive for defining custom breakpoints. The wildcard pattern allows you to define breakpoints like `--breakpoint-xs`, `--breakpoint-2xl`, etc. Setting `--breakpoint-*: initial` is the documented way to remove default breakpoints. This syntax is specific to Tailwind's theme system and is not subject to standard CSS custom property naming rules.

Learnt from: mdatelle
PR: unraid/api#1106
File: unraid-ui/src/components/index.ts:2-2
Timestamp: 2025-02-04T17:21:39.710Z
Learning: The unraid-ui package is undergoing a major refactoring process, and breaking changes are expected during this transition period.

Learnt from: elibosley
PR: unraid/api#1181
File: web/store/theme.ts:0-0
Timestamp: 2025-02-24T14:51:21.328Z
Learning: In the Unraid API project's theme system, exact TypeScript type definitions are preferred over index signatures for theme variables to ensure better type safety.

Learnt from: elibosley
PR: unraid/api#1522
File: web/components/UserProfile/DropdownTrigger.vue:0-0
Timestamp: 2025-07-17T14:09:37.222Z
Learning: In Tailwind CSS v4, gradient utility classes use `bg-linear-to-r` instead of the v3 syntax `bg-gradient-to-r`. When reviewing Tailwind v4 code, `bg-linear-to-r`, `bg-linear-to-l`, `bg-linear-to-t`, `bg-linear-to-b`, etc. are the correct gradient utility classes.

Learnt from: elibosley
PR: unraid/api#972
File: web/store/theme.ts:46-49
Timestamp: 2024-12-17T14:59:32.458Z
Learning: In the `web/store/theme.ts` file of the Unraid web application, the header is intentionally designed to have a light background with dark text in dark mode, and a dark background with light text in light mode.

Learnt from: elibosley
PR: unraid/api#1522
File: web/components/Modal.vue:0-0
Timestamp: 2025-07-17T14:09:57.364Z
Learning: In Tailwind CSS v4, `outline-hidden` is a valid utility class that applies `outline: 2px solid transparent; outline-offset: 2px;`. It's the recommended replacement for v3's `outline-none` as it preserves accessibility by keeping outlines visible in high-contrast/forced-colors modes while hiding them visually in normal modes. The v4 `outline-none` now only sets `outline-style: none;` which completely removes outlines including for assistive technologies.

Learnt from: elibosley
PR: unraid/api#1211
File: unraid-ui/src/components/form/number/NumberFieldInput.vue:1-21
Timestamp: 2025-03-13T16:17:21.897Z
Learning: The unraid-ui is a UI library being published externally, where wrapping third-party components (like those from reka-ui) is an intentional design choice to maintain a consistent interface, standardize styling, and control the exposed API.

@tailwind-shared/unraid-theme.css (10)

Learnt from: elibosley
PR: #1181
File: web/store/theme.ts:210-216
Timestamp: 2025-02-21T18:40:10.810Z
Learning: When updating theme-related CSS variables via cssText, preserve existing non-theme styles by filtering out only theme-related rules (those starting with '--') and combining them with the new theme styles.

Learnt from: elibosley
PR: #1155
File: web/store/theme.ts:49-50
Timestamp: 2025-02-20T15:52:56.733Z
Learning: CSS variable names in the theme store should be concise and follow established patterns. For example, prefer '--gradient-start' over '--color-customgradient-start' to maintain consistency with other variable names.

Learnt from: elibosley
PR: #972
File: web/store/theme.ts:46-49
Timestamp: 2024-12-17T14:59:32.458Z
Learning: In the web/store/theme.ts file of the Unraid web application, the header is intentionally designed to have a light background with dark text in dark mode, and a dark background with light text in light mode.

Learnt from: elibosley
PR: #1181
File: web/store/theme.ts:0-0
Timestamp: 2025-02-24T14:51:21.328Z
Learning: In the Unraid API project's theme system, exact TypeScript type definitions are preferred over index signatures for theme variables to ensure better type safety.

Learnt from: elibosley
PR: #1522
File: unraid-ui/src/styles/globals.css:172-174
Timestamp: 2025-07-18T16:13:55.872Z
Learning: In Tailwind CSS v4, --breakpoint-* is valid syntax within the @theme directive for defining custom breakpoints. The wildcard pattern allows you to define breakpoints like --breakpoint-xs, --breakpoint-2xl, etc. Setting --breakpoint-*: initial is the documented way to remove default breakpoints. This syntax is specific to Tailwind's theme system and is not subject to standard CSS custom property naming rules.

Learnt from: mdatelle
PR: #1106
File: unraid-ui/src/components/index.ts:2-2
Timestamp: 2025-02-04T17:21:39.710Z
Learning: The unraid-ui package is undergoing a major refactoring process, and breaking changes are expected during this transition period.

Learnt from: elibosley
PR: #1211
File: unraid-ui/src/components/form/number/NumberFieldInput.vue:1-21
Timestamp: 2025-03-13T16:17:21.897Z
Learning: The unraid-ui is a UI library being published externally, where wrapping third-party components (like those from reka-ui) is an intentional design choice to maintain a consistent interface, standardize styling, and control the exposed API.

Learnt from: elibosley
PR: #1522
File: web/components/UserProfile/DropdownTrigger.vue:0-0
Timestamp: 2025-07-17T14:09:37.222Z
Learning: Tailwind CSS v4 changed gradient utility classes from bg-gradient-to-r to bg-linear-to-r. The new syntax uses bg-linear-to-r instead of the v3 syntax bg-gradient-to-r for linear gradients.

Learnt from: elibosley
PR: #1522
File: web/components/UserProfile/DropdownTrigger.vue:0-0
Timestamp: 2025-07-17T14:09:37.222Z
Learning: In Tailwind CSS v4, gradient utility classes use bg-linear-to-r instead of the v3 syntax bg-gradient-to-r. When reviewing Tailwind v4 code, bg-linear-to-r, bg-linear-to-l, bg-linear-to-t, bg-linear-to-b, etc. are the correct gradient utility classes.

Learnt from: elibosley
PR: #1522
File: unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue:18-22
Timestamp: 2025-07-17T14:10:23.390Z
Learning: In Tailwind CSS v4, outline-hidden is a valid utility class that sets outline: 2px solid transparent; outline-offset: 2px. This replaces the previous behavior of outline-none from v3 and maintains accessibility by keeping the outline visible in forced colors mode. Use outline-hidden instead of outline-none when you need to hide the outline while preserving accessibility features.

🔇 Additional comments (1)

@tailwind-shared/unraid-theme.css (1)

21-25: LGTM! Theme variable consolidation looks good.

The addition of UI-related variables (--ui-border-muted, --ui-radius, --ui-primary, --ui-primary-hover, --ui-primary-active) centralizes the theme definitions properly. The variable references to the primary color palette are correct and consistent with the existing color system.

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/border-color

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[claude]

Claude finished @elibosley's task —— View job

---

PR Review: Border Color Fix

Reviewing the Tailwind border color fix changes...

Todo List:

• Read and analyze changed files
• Review code quality and best practices
• Check for potential bugs or issues
• Assess performance considerations
• Evaluate security concerns
• Consider test coverage needs
• Provide comprehensive feedback

Analysis

Changes Overview:

• Removed: UI color variables from base-utilities.css (:root and .dark selectors)
• Added: Consolidated UI variables in unraid-theme.css within the @theme static block
• Fixed: Duplicate --ui-radius definition (removed from line 173, kept consolidated version)
• Added: New --ui-border-muted variable using HSL color function

Files Changed:

• @tailwind-shared/base-utilities.css: -10 lines (removed UI variable declarations)
• @tailwind-shared/unraid-theme.css: +5 lines (consolidated UI variables)

Review Feedback

✅ Code Quality & Best Practices:

• Good: Consolidates related variables in a single location within the theme configuration
• Good: Uses Tailwind v4's @theme static block for centralized theme management
• Good: Proper use of CSS custom properties with fallback values
• Good: Consistent naming convention for UI variables (--ui-*)

✅ Performance Considerations:

• Positive Impact: Reduces CSS duplication by removing redundant variable declarations
• Neutral: Variable consolidation may slightly improve parsing efficiency
• Good: No performance concerns introduced

✅ Security Concerns:

• No Issues: Changes are purely CSS variable reorganization with no security implications
• Safe: All values are standard CSS color/size properties

⚠️ Potential Issues:

1. Breaking Changes Risk: Moving variables between files could break components that expect variables to be available at specific cascade levels
2. Scope Concerns: Variables moved from :root (global scope) to @theme static - need to verify this doesn't affect variable availability
3. Dark Mode: Removed duplicate .dark selector - should verify dark mode still works correctly

🔍 Test Coverage Considerations:

• Visual Regression Tests: Should include tests for UI components using these variables
• Theme Switching: Test light/dark mode transitions
• Cross-Component: Verify border colors display correctly across different components

📝 Recommendations:

1. Add Description: PR lacks description - consider adding context about what border color issue was fixed
2. Testing: Manually test components using --ui-primary* and --ui-border-muted variables
3. Documentation: Consider documenting the variable consolidation approach for future developers

Overall Assessment: ✅ Approve with Testing
This is a clean refactoring that improves code organization by consolidating theme variables. The changes follow Tailwind v4 best practices and reduce code duplication. The main risk is ensuring existing components continue to work with the new variable locations.

---

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL:

https://preview.dl.unraid.net/unraid-api/tag/PR1544/dynamix.unraid.net.plg