Repository navigation
docs: show color swatches next to README variables - #61
Merged
Merged
Conversation
Add a 16x16 solid-color swatch image (via singlecolorimage.com) next to every literal hex default in the SCSS variable reference tables, so readers see each variable's actual color inline. Change is additive only: swatches are added beside existing hex text; non-hex defaults (SCSS functions, var() references, variable aliases, null/none, sizes) are left unchanged.
The inline swatch image markdown added next to each hex value contains
slashes in its URL, which broke the light/dark `split("/")` in the
README-vs-stylesheet checker. Strip the `` images before
splitting so the backticked hex values are read correctly.
Replace the external singlecolorimage.com swatch images with small committed SVG files referenced by relative path, so the README renders its color swatches natively on GitHub with no dependency on a third-party CDN. One 16x16 solid-fill SVG per distinct hex lives under docs/swatches/.
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.
Adds a small 16x16 solid-color swatch image next to every literal hex default in the README SCSS variable reference tables, so a reader sees each variable's actual color inline instead of only the hex code.
docs/swatches/<hex>.svg, referenced by relative path. No external/third-party CDN dependency — GitHub renders the committed SVGs natively in the README.darken(...),var(--aa-...)refs, variable aliases,null/none, px/size values) are left unchanged — no swatch invented.test/css_check.rbstripsimage markdown before parsing, so relative swatch links are ignored by the README/declaration cross-check;rake csspasses.