Skip to content

Update docs dark mode palette#6604

Open
carlosabadia wants to merge 7 commits into
mainfrom
carlos/update-docs-colors
Open

Update docs dark mode palette#6604
carlosabadia wants to merge 7 commits into
mainfrom
carlos/update-docs-colors

Conversation

@carlosabadia
Copy link
Copy Markdown
Contributor

No description provided.

@carlosabadia carlosabadia added the skip-changelog For doc/internal changes label Jun 4, 2026
@codspeed-hq
Copy link
Copy Markdown

codspeed-hq Bot commented Jun 4, 2026

Merging this PR will not alter performance

✅ 28 untouched benchmarks


Comparing carlos/update-docs-colors (fdfdf83) with main (9c8a0ae)

Open in CodSpeed

@carlosabadia carlosabadia marked this pull request as ready for review June 5, 2026 09:25
@carlosabadia carlosabadia requested review from a team and Alek99 as code owners June 5, 2026 09:25
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented Jun 5, 2026

Greptile Summary

This PR migrates the docs site from a fragmented set of marketing-specific CSS variables (m-slate-*, m-violet-*, c-slate-*) to a unified semantic token system (secondary-*, primary-*), and updates the dark mode palette to a darker base (slate-1 #090A0B) across 63 files.

  • Removes the m-slate-* / m-violet-* marketing color blocks from both custom-colors.css files and their corresponding Tailwind theme entries, and deletes the now-unused globals.css and shared-package custom-colors.css (neither is imported by any Python or TS code).
  • Systematically replaces all slate-*, m-slate-*, c-slate-*, and violet-* Tailwind class names throughout Python components and CSS with secondary-* / primary-*, eliminating the need for separate dark: overrides since the CSS variables now respond to color mode automatically.
  • Adds PostHog conversations widget suppression CSS unrelated to the palette work.

Confidence Score: 4/5

Safe to merge — the changes are a consistent, mechanical token substitution with no logic changes outside of color styling.

The migration is systematic and the CSS variable semantics are correct. The one substantive change worth a second look is in the multi-docs tab switcher in component.py, where the inactive button's resting and hover text colors were accidentally set to the same value, removing visible hover feedback. Everything else appears intentional and consistent with the new palette direction.

docs/app/reflex_docs/pages/docs/component.py — the non_active_class_name string lost its hover feedback; and docs/app/assets/tailwind-theme.css for the unrelated PostHog widget suppression block.

Important Files Changed

Filename Overview
docs/app/assets/custom-colors.css Dark mode palette updated — slate scale shifted darker and --c-white-1 changed from #1b1d20 to #050506; m-slate-* and m-violet-* marketing color blocks removed from both light and dark sections.
docs/app/assets/tailwind-theme.css Removes --color-m-slate-* / --color-m-violet-* Tailwind tokens and migrates all c-slate-* and m-slate-* utility class references to the new secondary-* semantic tokens; adds PostHog chat widget CSS suppression.
docs/app/assets/components/GradientButton.tsx Migrates m-slate-* token references to secondary-* tokens in BASE_CLASSES and VARIANT_CLASSES; removes redundant dark:text-* overrides since the CSS variables now respond to color mode.
docs/app/reflex_docs/templates/docpage/docpage.py Large systematic replacement of slate-, m-slate-, and violet-* class names with secondary-* and primary-* semantic tokens throughout all docpage components.
docs/app/reflex_docs/pages/docs/component.py Migrates color tokens to secondary-*; non_active_class_name in multi_docs now uses text-secondary-11 for both resting and hover states, removing the visual hover feedback previously provided by the slate-9 to slate-11 transition.
packages/reflex-site-shared/src/reflex_site_shared/styles/globals.css File deleted entirely (2051 lines); no code in the repository references it, so the deletion is clean.
packages/reflex-site-shared/src/reflex_site_shared/styles/custom-colors.css File deleted entirely; the active custom-colors.css served from the docs app assets is a separate file that was updated, not deleted.
packages/reflex-site-shared/src/reflex_site_shared/views/marketing_navbar.py Navbar gradient updated from explicit from-white dark:from-m-slate-11 to from-secondary-2 which handles both modes through the CSS variable; also bumps a ship navbar asset to ship_navbar_4.svg.
packages/reflex-site-shared/src/reflex_site_shared/views/sidebar/init.py Replaces slate-* and m-slate-* tokens with secondary-*, and replaces violet-9 hover color with primary-9 on drawer items for semantic consistency.
docs/app/reflex_docs/docgen_pipeline.py Migrates c-slate-* CSS variable references in alert/callout styling to secondary-*; adds a foreground_override parameter to info-type alerts for consistent semantic color use.
packages/reflex-site-shared/src/reflex_site_shared/styles/styles.py Replaces c_color(slate, 11) and var(--c-slate-1) with var(--secondary-11) and var(--secondary-1) in cell style and BASE_STYLE.

Reviews (1): Last reviewed commit: "Merge branch 'main' into carlos/update-d..." | Re-trigger Greptile

Comment thread docs/app/assets/tailwind-theme.css
Comment thread docs/app/reflex_docs/pages/docs/component.py Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

skip-changelog For doc/internal changes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant