docs: introduce enriched-html coloring - #718
Open
hejsztynx wants to merge 5 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the documentation theme to use an enriched-html orange accent (instead of the prior purple), adjusts supporting UI/token colors (including red saturation and link colors), and adds a temporary page to visually validate the new palette in light/dark modes.
Changes:
- Switched theme accent colors (MUI secondary + multiple CSS tokens) to an orange palette and added new orange CSS variables.
- Updated typography/link styling and several UI state tokens (tabs, details, pagination, search, etc.) to match the new accent strategy.
- Adjusted code block highlighting tokens and added a
colors-demopage for visual verification.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/src/theme/muiTheme.tsx | Updates MUI theme secondary color to the new orange accent. |
| docs/src/theme/CodeBlock/highlighting-light.js | Tweaks light-mode syntax highlighting token colors. |
| docs/src/theme/CodeBlock/highlighting-dark.js | Tweaks dark-mode syntax highlighting token colors. |
| docs/src/css/typography.css | Updates link underline/border styling to align with new link colors. |
| docs/src/css/colors.css | Introduces orange palette variables and retunes multiple UI/theme tokens to orange. |
| docs/docs/fundamentals/colors-demo.md | Adds a demo doc page to preview theme colors and components. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
hejsztynx
force-pushed
the
@ksienkiewicz/docs-colors
branch
from
July 22, 2026 09:47
8984222 to
6828d41
Compare
kacperzolkiewski
approved these changes
Jul 22, 2026
kacperzolkiewski
left a comment
Collaborator
There was a problem hiding this comment.
Nice work 🚀
Right now, the colors match the enriched logo.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Introduced
enriched-htmlcolor palette, symmetrically how it was done in thereanimateddocs, where the theme color was purple. Here it is orange, which encodings i took from theenriched-htmllanding page.enriched-htmlcolorings,swm-reda bit more saturated, so there is a clearer distinction between theswm-redandswm-orange, e.g. between a red:::cautionnote and a orange, drop-downdetails,reanimateddocs,reanimated's purpleTesting
Go to
colors-demosection where I added a couple elements to see the changes and if they are visually pleasing. Switch between light and dark mode in the docs.I'll remove the
colors-demoonce it's ready to mergeScreenshots
Before 🟣 :
After 🟠 :