docs: Add a visual with color palettes#113
Merged
Merged
Conversation
A new Color palettes section in theme-exploration.md shows every design token of the four palettes (Catppuccin Latte and Mocha, Soft Paper light and dark) as a colored swatch grid rendered natively by GitHub from Mermaid flowcharts, so no image file is committed. The diagrams are generated from the theme stylesheets (the source of truth) by the new scripts/generate_palette_diagrams.py, which picks each swatch label's color by WCAG relative luminance so the token name stays readable on its own background. Mermaid's block-beta grid would be the natural shape but it ignores the label color, leaving dark swatches unreadable, so the script emits flowcharts whose disconnected rows of invisible links stack into a grid; verified with mermaid-cli. Regenerate after any token change: python3 scripts/generate_palette_diagrams.py
docs/design/palettes.html shows the four palettes as side by side cards, each rendered with its own background, text, and border colors, and every token with its computed WCAG contrast ratio against its reference background (text tokens against bg, on-primary against primary, code tokens against code-bg, focus against bg at the 3:1 UI threshold) plus the AA verdict. Surface tokens are marked as decor. Self contained, French, print friendly: made to be attached to the dossier as is. The page is emitted by the same generator as the Mermaid section (scripts/generate_palette_diagrams.py, new --html flag), so both views regenerate from the theme stylesheets and cannot drift. The computed ratios were checked against the ones documented in the stylesheet comments (exact match). The Color palettes section of the theme study now links to the page. Side finding surfaced by the page: Soft Paper's code-comment token fails AA against code-bg in both modes (3.65:1 and 4.45:1); harmless today (code tokens only paint the decorative aria-hidden hero card) but to fix before lesson code blocks ship with that theme.
ebouchut
added
documentation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## dev #113 +/- ##
=========================================
Coverage 80.33% 80.33%
Complexity 186 186
=========================================
Files 38 38
Lines 783 783
Branches 42 42
=========================================
Hits 629 629
Misses 124 124
Partials 30 30 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
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
1 participant
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.
Add a side-by-side visual comparison of color palettes (themes), along with a rating of the contrast ratio (RGAA).