fix: remove undefined CSS custom property references #3931
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Replace undefined opacity properties with numeric values (0.5, 0.6, 0.7) - Replace undefined font-weight properties with numeric values (400, 500, 600) - Replace undefined color properties with defined variables - Replace undefined border-radius properties with defined variables - Replace undefined spacing properties with defined variables or remove them - Remove undefined Radix UI properties from animations - Remove undefined shadow properties - Rebuild CLI package to regenerate minified CSS Fixes route06/liam-internal#5967 Co-Authored-By: [email protected] <[email protected]>
Contributor
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
|
Finished running flow.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Updates to Preview Branch (devin/1761724636-remove-undefined-css-properties) ↗︎
Tasks are run on every commit but only new migration files are pushed.
View logs for this Workflow Run ↗︎. |
Contributor
|
Important Review skippedBot user detected. To trigger a single review, invoke the You can disable this status message by setting the Comment |
Check changeset necessityStatus: REQUIRED Reason:
Changeset (copy & paste):---
"@liam-hq/ui": patch
"@liam-hq/erd-core": patch
---
- 🐛 Remove undefined CSS custom property references and align styles to valid design tokens
- Replace undefined variables with concrete values (e.g., opacity 0.6/0.7, font-weight 400/500/600/700)
- Map deprecated tokens to current ones (e.g., --color-border → --pane-border, --radius-2 → --border-radius-sm)
- Adjust focus/hover visuals to use --primary-accent; remove Radix-only sizing vars
- No API changes; visual output may subtly change where prior values were ignored |
- Delete all undefined CSS custom property references instead of replacing them - These properties had no effect in production (browsers ignored them) - Preserve Radix UI properties with stylelint disable comments (false positives) - Radix UI injects --radix-* variables at runtime, so they are valid Changes: - Deleted opacity, font-weight, color, background-color, border-radius properties - Deleted outline, border, spacing, and other undefined properties - Added stylelint disable/enable comments for Radix UI collapsible animations - All 27 CSS module files corrected Verified: pnpm run lint:stylelint returns 0 errors Co-Authored-By: [email protected] <[email protected]>
…ity and accessibility - Restore Radix UI runtime variables (--radix-select-trigger-width, --radix-select-content-available-height) with stylelint suppression - Restore focus outlines for keyboard navigation accessibility (LeftPane, Call components) - Restore Resizable handle visibility (border and background) - Restore disabled state opacity (0.6) across all form components and buttons - Restore Sidebar offcanvas positioning with fallback value These properties were incorrectly identified as undefined CSS variables but are actually: 1. Runtime-injected by Radix UI 2. Essential for accessibility (focus outlines) 3. Important for visual affordance (disabled states, handle visibility) 4. Critical for layout (offcanvas positioning) Co-Authored-By: [email protected] <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue
This PR addresses critical functionality and accessibility issues found during code review of PR #3931.
Link to Devin run: https://app.devin.ai/sessions/e6b4e7ed91ed4ac298e6d03b67b1d395
Requested by: [email protected] (@MH4GF)
Why is this change needed?
During review of PR #3931 (which removes undefined CSS custom properties), I identified several CSS property deletions that negatively impact functionality and accessibility. While most of the removed properties were indeed dead code, some were critical:
Critical Fixes Applied
1. Radix UI Runtime Variables (High Priority)
Select.module.css--radix-select-trigger-widthand--radix-select-content-available-heightwhich are injected at runtime by Radix UIstylelint-disablecomments to suppress false positives2. Accessibility - Focus Outlines (High Priority)
LeftPane.module.css,Call.module.cssoutline-offsetvar(--primary-accent)3. Visual Affordances (Medium Priority)
opacity: 0.6for disabled states (replaced undefined variables likevar(--opacity-disabled)with numeric values)4. Layout - Sidebar Positioning (Medium Priority)
Sidebar.module.cssleft: calc(var(--sidebar-width, 16rem) * -1)Review Checklist for Maintainers
schema.generated.tsappears in this diff. This should likely be removed from the PR or added to.gitignore.Remaining Original Changes
The original PR's removal of truly undefined CSS variables remains intact in files I didn't modify. Those changes appear to be valid dead code elimination.