Skip to content

fix(dark mode): reclaim border-colour and shadow utilities for tokens#7986

Closed
talissoncosta wants to merge 1 commit into
mainfrom
fix/reclaim-border-shadow-tokens
Closed

fix(dark mode): reclaim border-colour and shadow utilities for tokens#7986
talissoncosta wants to merge 1 commit into
mainfrom
fix/reclaim-border-shadow-tokens

Conversation

@talissoncosta

Copy link
Copy Markdown
Contributor

Changes

Contributes to #6606. Same map-remove pattern as the text-colour reclaim, extended to two more utility families found by auditing token-vs-Bootstrap collisions.

  • border-colour (danger/info/success/warning): token .border-* was shadowed by Bootstrap. Values are identical, so this is a no-op; it just moves ownership to the token layer.
  • shadow (sm/lg/none): .shadow-sm and .shadow-lg were silently using Bootstrap's shadows, while .shadow-md/.shadow-xl (token-only) used the DS tokens, so the scale was half-and-half. Now all of sm/md/lg/xl use --shadow-*. Suffixless .shadow stays Bootstrap.

How did you test this code?

Compiled the stylesheet: .border-* now resolve to var(--color-border-*), and .shadow-sm/.shadow-lg to var(--shadow-*). Border is a no-op (identical values). Shadow is a real change but tiny footprint (shadow-sm: 1 usage, shadow-lg: 0) — the DS shadows are subtler; worth a quick eyeball on that one shadow-sm element.

Extend the Bootstrap utilities map-remove beyond text colour:
- border-color danger/info/success/warning -> token .border-* (values are
  identical to Bootstrap, so a no-op; ownership only).
- shadow sm/lg/none -> token .shadow-* so the DS shadow scale is consistent.
  .shadow-md/.shadow-xl were already token-only; .shadow-sm/.shadow-lg were
  silently using Bootstrap's heavier shadows. Suffixless .shadow stays Bootstrap.

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:46
@talissoncosta talissoncosta requested review from kyle-ssg and removed request for a team July 10, 2026 16:46
@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)
docs Building Building Preview, Comment Jul 10, 2026 4:47pm
flagsmith-frontend-preview Ready Ready Preview, Comment Jul 10, 2026 4:47pm
flagsmith-frontend-staging Ready Ready Preview, Comment Jul 10, 2026 4:47pm

Request Review

@coderabbitai

coderabbitai Bot commented Jul 10, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: ec87a181-2898-4a3c-a6f8-6499e0de78c0

📥 Commits

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

📒 Files selected for processing (1)
  • frontend/web/styles/3rdParty/_bootstrap.scss

📝 Walkthrough

Walkthrough

The Bootstrap stylesheet now removes the danger, info, success, and warning border-colour utilities, plus the sm, lg, and none shadow utilities. The modified maps are re-merged into Bootstrap’s $utilities configuration.

Estimated code review effort: 2 (Simple) | ~5 minutes


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

@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-e2e:pr-7986 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api-test:pr-7986 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-7986 Finished ✅ Results
ghcr.io/flagsmith/flagsmith:pr-7986 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-private-cloud:pr-7986 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-frontend:pr-7986 Finished ✅ Results

@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/reclaim-border-shadow-tokens branch July 10, 2026 16:53
@github-actions

github-actions Bot commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

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

passed  3 passed

Details

stats  3 tests across 2 suites
duration  11.6 seconds
commit  81322f5
info  🔄 Run: #18163 (attempt 1)

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

passed  6 passed

Details

stats  6 tests across 5 suites
duration  36 seconds
commit  81322f5
info  🔄 Run: #18163 (attempt 1)

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  11.9 seconds
commit  81322f5
info  🔄 Run: #18163 (attempt 1)

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

failed  1 failed
passed  1 passed

Details

stats  2 tests across 2 suites
duration  59.5 seconds
commit  81322f5
info  📦 Artifacts: View test results and HTML report
🔄 Run: #18163 (attempt 1)

Failed tests

firefox › tests/environment-permission-test.pw.ts › Environment Permission Tests › Environment-level permissions control access to features, identities, and segments @enterprise

@github-actions

Copy link
Copy Markdown
Contributor

Visual Regression

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

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