Skip to content

fix(dark mode): make text-muted theme-aware via the secondary token#7985

Closed
talissoncosta wants to merge 1 commit into
mainfrom
fix/text-muted-dark-contrast
Closed

fix(dark mode): make text-muted theme-aware via the secondary token#7985
talissoncosta wants to merge 1 commit into
mainfrom
fix/text-muted-dark-contrast

Conversation

@talissoncosta

Copy link
Copy Markdown
Contributor

Changes

Contributes to #6606.

.text-muted is a static #656d7b with no dark variant, so muted text is 3.45:1 on the dark surface (fails WCAG AA). Point $text-muted at the --color-text-secondary token so the utility becomes theme-aware: #656d7b in light (unchanged, 5.22:1) and #9da4ae in dark (7.16:1).

One line, no usage churn. Unlike text-secondary, .text-muted doesn't collide with the token utilities, so its ~170 usages don't need migrating; fixing the value is enough. Full removal of Bootstrap's .text-muted can come with the later cleanup.

How did you test this code?

Compiled the stylesheet: .text-muted now emits color: var(--color-text-secondary) !important. Light mode unchanged; recommend a dark-mode eyeball on muted text (tables, forms, labels).

Point $text-muted at --color-text-secondary so the .text-muted utility
resolves to #656d7b in light (unchanged) and #9da4ae in dark: 7.16:1 vs
the old static 3.45:1, fixing WCAG AA. One line, no usage churn, since
.text-muted does not collide with the token utilities.

Contributes to #6606

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@talissoncosta talissoncosta requested a review from a team as a code owner July 10, 2026 16:36
@talissoncosta talissoncosta requested review from kyle-ssg and removed request for a team July 10, 2026 16:36
@vercel

vercel Bot commented Jul 10, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Jul 10, 2026 4:37pm
flagsmith-frontend-staging Ready Ready Preview, Comment Jul 10, 2026 4:37pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Jul 10, 2026 4:37pm

Request Review

@github-actions

github-actions Bot commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-7985 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-7985 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-7985 Finished ✅ Results
ghcr.io/flagsmith/flagsmith:pr-7985 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-private-cloud:pr-7985 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-frontend:pr-7985 Finished ✅ Results

@coderabbitai

coderabbitai Bot commented Jul 10, 2026

Copy link
Copy Markdown

Review Change Stack

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: a754a810-cba7-46de-ac31-7f62fa68b64d

📥 Commits

Reviewing files that changed from the base of the PR and between 3eeaf38 and 3a5f5e5.

📒 Files selected for processing (1)
  • frontend/web/styles/_variables.scss

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  5 passed

Details

stats  5 tests across 3 suites
duration  38 seconds
commit  3a5f5e5
info  🔄 Run: #18162 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  3 passed

Details

stats  3 tests across 3 suites
duration  12 seconds
commit  3a5f5e5
info  🔄 Run: #18162 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  5 passed

Details

stats  5 tests across 4 suites
duration  19.8 seconds
commit  3a5f5e5
info  🔄 Run: #18162 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  19.8 seconds
commit  3a5f5e5
info  🔄 Run: #18162 (attempt 1)

@coderabbitai

coderabbitai Bot commented Jul 10, 2026

Copy link
Copy Markdown

Caution

Failed to replace (edit) comment. This is likely due to insufficient permissions or the comment being deleted.

Error details
putComment timed out

@github-actions

Copy link
Copy Markdown
Contributor

Visual Regression

19 screenshots compared. See report for details.
View full report

@talissoncosta

Copy link
Copy Markdown
Contributor Author

Consolidated into #7982 so the whole dark-mode colour change can be QA'd in one pass. Same commit is included there.

@talissoncosta talissoncosta deleted the fix/text-muted-dark-contrast branch July 10, 2026 16:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

fix front-end Issue related to the React Front End Dashboard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant