refactor(styles): diff view uses the shared code colour tokens by talissoncosta · Pull Request #8069 · Flagsmith/flagsmith

talissoncosta · 2026-07-22T12:21:10Z

I have read the Contributing Guide.
I have added information to docs/ if required so people know about the feature.
I have filled in the "Changes" section below.
I have filled in the "How did you test this code" section below.

Changes

Follow-up to #8023, from Kyle's review comment: the diff view (change requests, flag history) now uses the same code colour palette as the rest of the app's snippets, and follows light/dark mode for free.

Prism token colours in the diff map to the --color-code-* tokens, matching how highlight.js colours the same concepts (keys, strings, literals)
Row and word tints use the semantic surface tokens; new --color-surface-danger-strong / --color-surface-success-strong for word-level emphasis inside a tinted row
The manual .dark override in _react-diff.scss is gone, tokens flip themselves
Adds DiffString Storybook stories (changed JSON, changed string, same value)

Stacked on #8023 (needs its --color-code-* tokens); will retarget main once that merges.

How did you test this code?

Storybook: npm run storybook, Components/DiffString stories, toggled light/dark. In the app: a change request or feature history diff with a JSON value, both themes.

Changed JSON: keys/strings/literals match the code snippet colours; added/removed rows tinted, changed words stand out within them
Dark mode: same, with readable tints
Same-value view (unchanged flag value) still renders on the subtle surface

Screenshots

	After (light)	After (dark)
Changed JSON
Same value

New --color-code-* semantic family for highlight.js syntax, mapped to the nearest palette primitives (light in :root, lighter in .dark). Added to tokens.json (source of truth) and regenerated; registered in the Semantic Colour Tokens story so it shows the group. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Point the shared .hljs palette (and the Pylon --hljs-* var-feed) at the --color-code-* tokens so code blocks follow light/dark. Add .hljs--embedded for containers that own their surface (onboarding's CodeCard opts in via Highlight's embedded prop and drops its bespoke palette) and a theme-adaptive scrollbar. Nest the palette under .hljs to out-specify Pylon's injected rules. Drop the dead $code-color/$code-bg vars and the legacy .yaml override. Header chrome untouched. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…awHtml Add an `embedded` boolean prop that applies the .hljs--embedded modifier, instead of callers concatenating the class into the language string. Import Button (via the components/ alias) instead of the global, since the Highlight story renders it and Storybook doesn't stub the global. Extract the nested raw-html ternary into a getRawHtml method. No behaviour change. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Cover the code wrapper across languages plus the embedded variant. Stub the isMobile global so components that read it render in Storybook. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Review (Kyle): red tag names read as errors. Tags now render like an IDE: grey angle brackets (base text via the catch-all), blue tag name. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Covers markup tags inside JavaScript, mirroring the React code-help snippet, so the tag colour renders in Chromatic. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

The shared React init snippet was two files mashed into one - two 'export default function' (App and HomePage, invalid JS), duplicate imports, an unused useFlagsmith import, and an App that never rendered HomePage. Make it one coherent example: a named HomePage using useFlags, rendered inside the default App wrapped in FlagsmithProvider. Shared via codeHelp.INIT, so this fixes the snippet app-wide, including the onboarding wire step. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Ports the onboarding code-card fix (was on #7989) to the shared embedded variant: overflow-x auto instead of a permanently reserved gutter. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Snippet sources were pre-escaped (< >) because CodeHelp rendered them as raw HTML via preventEscape, so Copy Code shipped the entities to the clipboard. Store plain < > and let Highlight's default escaping handle rendering, like the onboarding code card already does. preventEscape now has no users, so the prop is gone. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Keep this PR theming-only. preventEscape removal + code-help source de-escaping move to #8062. Highlight keeps embedded + the de-nested getRawHtml (retaining preventEscape); escaping behaviour is unchanged here. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

One step above surface-success/danger, for emphasis inside an already tinted surface (e.g. changed words inside a diff row). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

vercel · 2026-07-22T12:21:12Z

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

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	Jul 22, 2026 12:36pm
flagsmith-frontend-staging	Ready	Preview, Comment	Jul 22, 2026 12:36pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	Jul 22, 2026 12:36pm

coderabbitai · 2026-07-22T12:21:18Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 3e582680-c46f-49ec-adcb-d79d91cfa0a7

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

github-actions · 2026-07-22T12:22:15Z

Docker builds report

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

github-actions · 2026-07-22T12:27:51Z

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

1 passed

Details

1 test across 1 suite
33.3 seconds
5b2b240
🔄 Run: #18627 (attempt 1)

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

1 passed

Details

1 test across 1 suite
44.8 seconds
5b2b240
🔄 Run: #18627 (attempt 1)

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

3 passed

Details

3 tests across 2 suites
11.5 seconds
5b2b240
🔄 Run: #18627 (attempt 1)

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

2 passed

Details

2 tests across 2 suites
37.4 seconds
5b2b240
🔄 Run: #18627 (attempt 1)

github-actions · 2026-07-22T12:28:24Z

Visual Regression

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

Review (Kyle on #8023): the diff should use the same palette as the code theme. Prism tokens now map to the --color-code-* tokens the way highlight.js maps the same concepts, and the row/word tints use the surface tokens, so the diff follows light/dark with no .dark override. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

talissoncosta and others added 11 commits July 17, 2026 11:15

test(storybook): add Highlight stories

64027e3

Cover the code wrapper across languages plus the embedded variant. Stub the isMobile global so components that read it render in Storybook. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

fix(styles): markup tag names use the title colour, not red

7a4c081

Review (Kyle): red tag names read as errors. Tags now render like an IDE: grey angle brackets (base text via the catch-all), blue tag name. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

test(storybook): add JSX Highlight story

904981b

Covers markup tags inside JavaScript, mirroring the React code-help snippet, so the tag colour renders in Chromatic. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

fix(styles): only show the embedded code scrollbar on overflow

a353029

Ports the onboarding code-card fix (was on #7989) to the shared embedded variant: overflow-x auto instead of a permanently reserved gutter. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

feat(tokens): add strong success/danger surface tokens

a21412d

One step above surface-success/danger, for emphasis inside an already tinted surface (e.g. changed words inside a diff row). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

talissoncosta requested a review from a team as a code owner July 22, 2026 12:21

talissoncosta requested review from kyle-ssg and removed request for a team July 22, 2026 12:21

github-actions Bot added the front-end Issue related to the React Front End Dashboard label Jul 22, 2026

vercel Bot deployed to Preview – flagsmith-frontend-staging July 22, 2026 12:22 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 22, 2026 12:22 View deployment

github-actions Bot added the refactor label Jul 22, 2026

talissoncosta marked this pull request as draft July 22, 2026 12:27

talissoncosta and others added 2 commits July 22, 2026 09:35

test(storybook): add DiffString stories

9c814b7

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

talissoncosta force-pushed the refactor/diff-code-tokens branch from 5b2b240 to 9c814b7 Compare July 22, 2026 12:35

vercel Bot deployed to Preview – flagsmith-frontend-preview July 22, 2026 12:36 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 22, 2026 12:36 View deployment

github-actions Bot removed the refactor label Jul 22, 2026

github-actions Bot added the refactor label Jul 22, 2026

Base automatically changed from refactor/hljs-theme-adaptive to main July 22, 2026 18:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(styles): diff view uses the shared code colour tokens#8069

refactor(styles): diff view uses the shared code colour tokens#8069
talissoncosta wants to merge 13 commits into
mainfrom
refactor/diff-code-tokens

talissoncosta commented Jul 22, 2026

Uh oh!

vercel Bot commented Jul 22, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 22, 2026 •

edited

Loading

Review skipped

Uh oh!

github-actions Bot commented Jul 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

talissoncosta commented Jul 22, 2026

Changes

How did you test this code?

Screenshots

Uh oh!

vercel Bot commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

github-actions Bot commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Docker builds report

Uh oh!

github-actions Bot commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Details

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

Details

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

Details

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

Details

Uh oh!

github-actions Bot commented Jul 22, 2026

Visual Regression

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented Jul 22, 2026 •

edited

Loading

coderabbitai Bot commented Jul 22, 2026 •

edited

Loading

github-actions Bot commented Jul 22, 2026 •

edited

Loading

github-actions Bot commented Jul 22, 2026 •

edited

Loading