More themeing#200
Merged
Merged
Conversation
- Callouts (Starlight asides): gradient card surface with a 1px ring and a soft shadow, an inline bold label that flows into the message, and per-type icons in the gutter — note (violet), tip (plain violet, no icon), caution (amber warning), danger (blue important). Light + dark, all WCAG AA. - Tables: rounded card with a hairline border and drop shadow, a borderless bold header over a rule, and zebra-striped rows. - 404: centered layout with the brand logo, an "Error 404" pill, a friendly headline, and a cityscape background. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
Preview Deployment
Commit: |
Contributor
Lighthouse Results
|
Contributor
E2E Test Results✅ Tests success Ran against: https://pr-200-superfly-sprites-docs.fly.dev |
The docs render callouts via the <Callout> React component (shadcn Alert), not Starlight asides — so the earlier aside styling never applied, and the component still used off-brand colors (info green, tip blue) with generic outline icons. Rewrite it to the card design: gradient surface, 1px ring, soft shadow, a filled glyph in the gutter, and an inline bold label. Hues: info=violet, tip=violet, warning=amber, danger=blue. Light + dark. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the all-violet mark with sprites.dev's two-tone invader: a navy #22183c body with a violet #7c3aed inner on light; the theme-appropriate inversion (#f3f1fb body / #8b5cf6 inner) on dark, with eyes reading as holes in the page colour. Header (SiteTitle), logo config SVGs, and the 404 mark updated; the favicon stays the solid-violet variant, matching sprites.dev's own favicon. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…dev ratio - Dark mark uses a bright violet (#c084fc / #e0c9ff) for visibility. - Eyes are black in both themes (matching sprites.dev). - Icon enlarged to 1.5rem against the 1.25rem wordmark with a 0.625rem gap, matching sprites.dev's h-6 / text-xl / gap-2.5 proportions. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Content links now use normal text colour with an emerald green (#34d399) underline — the green from sprites.dev's hero underline — and shift to violet text on hover. Drops the previous underline-free, always-violet link treatment. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Set ExpressiveCode to a single theme (starlight-dark / Night Owl) so code blocks render identically in either mode — same background and syntax colours, sharing one set of components. Force the near-black surface in both modes and drop the light-mode output-block overrides so output blocks match too. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add a green (#34d399) "$ " prompt before single-line shell command blocks, like fly.io/docs. Scoped to ExpressiveCode terminal frames whose code has a single .ec-line and a $-prompt shell language (bash/sh/zsh/shell/console) — so multi-line scripts and non-CLI blocks are untouched. It's a pseudo-element (user-select:none), so it's never selected or copied. Removes the old dead data-bash-prompt rule that nothing emitted. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…y check - Code blocks (always dark) drop the light hairline halo for a faint edge and swap EC's offset navy shadow for a soft neutral card shadow — looks clean on the light page too. - The copy-button check turns emerald (#34d399) on success, matching the $ prompt and link underlines. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
kylemclaren
changed the title
kylemclaren
changed the title
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.
Visual refresh of the docs theme, working in both light and dark:
<Callout>component restyled as gradient cards with a hairline ring, a gutter icon, and an inline bold label; per-type hues (info/tip violet, warning amber, danger blue).$prompt on single-line CLI commands; emerald copy-button checkmark.