Skip to content

feat(styleguide): add sun & moon halo lab sub-page#56

Open
johannesjo wants to merge 1 commit into
mainfrom
task/create-a-sub-page-for-the-styleguide-fb8b8f
Open

feat(styleguide): add sun & moon halo lab sub-page#56
johannesjo wants to merge 1 commit into
mainfrom
task/create-a-sub-page-for-the-styleguide-fb8b8f

Conversation

@johannesjo

Copy link
Copy Markdown
Owner

What

Adds a halo lab sub-page to the styleguide for comparing sun/moon halo & glow treatments side by side and over the live page gradient.

  • Grid view — 12 sun + 12 moon halo studies, each rendered on the live --background-gradient so a pale halo is judged in context, not on a flat card.
  • Drag stage — click any study to open it full-screen and drag the disc across every band of the gradient; step through variants with ‹ / › and toggle dark mode to test the night sky.
  • Reached from a new "Open halo lab →" entry under the styleguide's Interactions section; "← styleguide" returns.

How

  • StyleguideHalos.tsx — the sub-page (grid + full-screen drag stage). One HaloDisc component backs both views; only the --halo-* custom properties change per variant.
  • haloVariants.ts — the 24 recipes, expressed purely as CSS-variable strings (--halo-disc / --halo-shadow / --halo-wash) so a winner ports into Sun.scss by copying three strings. Moons set --halo-wash: none to keep the night scene free of warm wash.
  • styleguideHalos.module.scss — grid, disc, and stage styling; halo breathes via opacity only (compositor-cheap) and respects prefers-reduced-motion.
  • Styleguide.tsx — a showHalos signal swaps the page for the lab via <Show>; reuses <Btn> and the shared BackgroundTransition.

Notes

  • Styleguide-only — no production interaction code is touched.
  • Rebased onto current main (resolved against the new let-go demo and dashboard-simulation sub-page); all three styleguide entry points coexist.
  • Typecheck clean for the new files.

@github-actions

Copy link
Copy Markdown

🌅 minded preview

This PR is deployed and ready to explore:

🎨 Styleguide — components & interactions https://johannesjo.github.io/minded/pr-preview/pr-56/
🌥️ Dashboard simulation — the full app shell https://johannesjo.github.io/minded/pr-preview/pr-56/dashboard.html

Updated for c1ec166. Auto-removed when the PR closes.

@johannesjo johannesjo added bug Something isn't working later and removed bug Something isn't working labels Jun 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant