Flagsmith / Flagsmith/flagsmith

Button dark mode gaps: btn-tertiary, btn-danger, btn--transparent

Open
#6,892 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.