Skip to content

Replace hardcoded CSS colors with Claro/Gin theme variables#23

Open
jjroelofs wants to merge 1 commit into1.xfrom
theme-integration-claro-gin
Open

Replace hardcoded CSS colors with Claro/Gin theme variables#23
jjroelofs wants to merge 1 commit into1.xfrom
theme-integration-claro-gin

Conversation

@jjroelofs
Copy link
Copy Markdown
Contributor

Summary

Closes #22

  • Replace all hardcoded hex colors across 8 CSS files with shared Claro/Gin CSS variables using triple-layered fallbacks (--gin-*, --color-*, hardcoded) for dark mode support and theme compatibility
  • Use Claro's form-boolean class for checkboxes, removing ~50 lines of custom checkbox CSS
  • Use Claro's form-element class for link inputs, removing custom border/focus styling
  • Priority badges now use transparent background colors that adapt to both light and dark mode

Test plan

  • Verify page renders correctly in Gin light mode
  • Verify page renders correctly in Gin dark mode
  • Verify priority badges (HIGH/MEDIUM/LOW) are readable in both modes
  • Verify checkboxes work (check/uncheck toggles implemented state)
  • Verify link input appears correctly when clicking "+ Add link"
  • Verify delete buttons show on hover with correct red styling
  • Verify editable fields show focus/hover outlines

… compatibility

Replace all hardcoded hex colors with shared Claro/Gin CSS variables using
triple-layered fallbacks (--gin-*, --color-*, hardcoded) for dark mode support
and compatibility with both Gin and Claro admin themes.

- Cards, status bar, empty state: use --gin-bg-layer/--color-white for backgrounds
- Text colors: use --gin-color-text-light/--color-text-light
- Links: use --gin-color-primary/--color-link
- Danger/delete: use --gin-color-danger/--color-maximumred
- Priority badges: use theme-aware transparent backgrounds (warning, danger, green)
- Checkboxes: replace custom visual with Claro's form-boolean class
- Link inputs: add form-element class for native Claro/Gin input styling
- Remove ~50 lines of custom checkbox CSS replaced by Claro's built-in styles
- Remove custom link input border/focus CSS replaced by form-element class
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Replace hardcoded CSS colors with Claro/Gin theme variables

1 participant