Flagsmith / Flagsmith/flagsmith
Button dark mode gaps: btn-tertiary, btn-danger, btn--transparent
- Dominant language
- Python
- Stars
- 6.6k
- Forks
- 567
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 121
Description
## Problem
Three button variants — `btn-tertiary`, `btn-danger`, and `btn--transparent` — have no `.dark` mode overrides in `_buttons.scss`.
### Variable availability
- **`btn-tertiary`**: Dark mode variables **already defined** in `_variables.scss` (`$btn-tertiary-bg-dark`, `$btn-tertiary-hover-bg-dark`, `$btn-tertiary-active-bg-dark`) but not wired up in `_buttons.scss`
- **`btn-danger`**: **No dark mode variables exist** — new variables need to be created
- **`btn--transparent`**: **No dark mode variables exist** — hover state `rgba(0, 0, 0, 0.1)` needs a dark-appropriate alternative
## Proposed Fix
1. For `btn-tertiary`: wire up the existing dark mode variables in `_buttons.scss`
2. For `btn-danger`: define new dark mode variables in `_variables.scss`, then add `.dark` overrides
3. For `btn--transparent`: define appropriate dark mode hover/active states (e.g. `rgba(255, 255, 255, 0.1)`)
## Acceptance Criteria
- [ ] `btn-tertiary` renders correctly in both light and dark mode
- [ ] `btn-danger` renders correctly in both light and dark mode
- [ ] `btn--transparent` renders correctly in both light and dark mode
---
Part of the Design System Audit (#6606) · Epic: #6882
Contributor guide
Assessment
This issue has not been assessed yet.