Give the docs site both halves of the theme toggle - #4
Merged
Conversation
The previews followed the operating system whatever the site's own switch said. A reader on a dark machine who asked laradocs for light got a white preview stage with dark buttons standing on it, and the reverse on a light machine. docs/theming.md describes a manual toggle as two halves: a custom variant so dark: compiles against the selector, and the three blocks in shape.css restated under it, because a media query cannot be re-pointed at a selector from outside. theme.src.css already writes both out, and both gallery builds import it — but docs.src.css had only a hand-rolled copy of the custom variant. So the switch repainted the stage, which is a utility, and nothing standing on it: --shape-tone, the surface contract and the progress track were all still being set by prefers-color-scheme inside shape.css. Import the same file the gallery imports rather than keeping a second copy of half of it. The docs site is a consuming application too, so it takes the path the documentation describes. The token half also carries color-scheme, which laradocs never declares, so the previews stop showing light native scrollbars and form-control chrome on a dark page.
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.
The component previews on the documentation site followed the operating system whatever the site's own theme switch said. A reader on a dark machine who asked laradocs for light got a white preview stage with dark buttons standing on it, and the reverse on a light machine.
Cause
docs/theming.mddescribes a manual toggle as two halves: a@custom-variant darksodark:compiles against the selector, and the three blocks inshape.cssrestated under that selector, because a media query cannot be re-pointed at a selector from outside.workbench/resources/css/theme.src.cssalready writes both halves out, and both gallery builds import it — butdocs.src.csscarried only a hand-rolled copy of the custom variant. So the switch repainted the preview stage, which is a utility, and nothing standing on it:--shape-tone, the surface contract and the progress track were all still being set byprefers-color-schemeinsideshape.css.Fix
Import the same file the gallery imports, rather than keep a second copy of half of it. The docs site is a consuming application too, so it takes the path the documentation already describes.
The token half also carries
color-scheme, which laradocs never declares at all — so the previews stop showing light native scrollbars and form-control chrome on a dark page. That applies to the whole documentation page, not only the previews.Verification
Checked against a running
composer servewithprefers-color-schemeemulated in each direction:--shape-tonenow flips with the switch, and the restated blocks land in the layers their originals are in — the surface contract in@layer base, the tone block and progress track in@layer components. That ordering is load-bearing: a tone restatement written inbaseloses to the plain[data-shape-tone]incomponents, and the symptom is a page that turns dark around buttons that stay light.npm run previewandnpm run preview:seedrebuild byte-identical; only comments changed intheme.src.css.composer testpasses — PHPStan clean, Pint clean, 100% type coverage, 842 tests / 2163 assertions.