Skip to content

feat(apollo-wind): apply Future theme styling to Checkbox and CodeBlock #639

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
1980computer merged 1 commit into from
May 1, 2026
+32 −12
Merged

feat(apollo-wind): apply Future theme styling to Checkbox and CodeBlock #639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 24 additions & 8 deletions packages/apollo-wind/src/components/ui/checkbox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ export const WithLabel = {
render: () => (
<Row gap={2} align="center">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms and conditions</Label>
<Label htmlFor="terms" className="future:text-foreground future:font-normal">
Accept terms and conditions
</Label>
</Row>
),
} satisfies Story;
Expand All @@ -38,7 +40,9 @@ export const Disabled = {
render: () => (
<Row gap={2} align="center">
<Checkbox id="disabled" disabled />
<Label htmlFor="disabled">Disabled checkbox</Label>
<Label htmlFor="disabled" className="future:font-normal future:text-foreground">
Disabled checkbox
</Label>
</Row>
),
} satisfies Story;
Expand All @@ -47,7 +51,9 @@ export const DisabledChecked = {
render: () => (
<Row gap={2} align="center">
<Checkbox id="disabled-checked" disabled defaultChecked />
<Label htmlFor="disabled-checked">Disabled and checked</Label>
<Label htmlFor="disabled-checked" className="future:font-normal future:text-foreground">
Disabled and checked
</Label>
</Row>
),
} satisfies Story;
Expand All @@ -57,7 +63,9 @@ export const WithDescription = {
<Column gap={2}>
<Row gap={2} align="center">
<Checkbox id="marketing" />
<Label htmlFor="marketing">Marketing emails</Label>
<Label htmlFor="marketing" className="future:font-normal future:text-foreground">
Marketing emails
</Label>
</Row>
<p className="text-sm text-muted-foreground pl-6">
Receive emails about new products, features, and more.
Expand All @@ -73,19 +81,27 @@ export const Group = {
<Column gap={2}>
<Row gap={2} align="center">
<Checkbox id="all" defaultChecked />
<Label htmlFor="all">All notifications</Label>
<Label htmlFor="all" className="future:font-normal future:text-foreground">
All notifications
</Label>
</Row>
<Row gap={2} align="center">
<Checkbox id="email" defaultChecked />
<Label htmlFor="email">Email notifications</Label>
<Label htmlFor="email" className="future:font-normal future:text-foreground">
Email notifications
</Label>
</Row>
<Row gap={2} align="center">
<Checkbox id="push" />
<Label htmlFor="push">Push notifications</Label>
<Label htmlFor="push" className="future:font-normal future:text-foreground">
Push notifications
</Label>
</Row>
<Row gap={2} align="center">
<Checkbox id="sms" />
<Label htmlFor="sms">SMS notifications</Label>
<Label htmlFor="sms" className="future:font-normal future:text-foreground">
SMS notifications
</Label>
</Row>
</Column>
</Column>
Expand Down
12 changes: 8 additions & 4 deletions packages/apollo-wind/src/components/ui/code-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ const THEME_CONFIG: Record<CodeBlockTheme, ThemeConfig> = {
// ── Future dark — VS Code Dark+ for a modern zinc feel ───────────────────
'future-dark': {
prismStyle: vscDarkPlus,
bg: '#18181b',
bg: 'var(--surface-raised)',
headerBg: '#09090b',
labelColor: '#a1a1aa',
iconColor: '#71717a',
Expand All @@ -112,7 +112,7 @@ const THEME_CONFIG: Record<CodeBlockTheme, ThemeConfig> = {
// ── Future light — VS Code Light for a clean zinc-50 feel ────────────────
'future-light': {
prismStyle: vs,
bg: '#fafafa',
bg: 'var(--surface-raised)',
headerBg: '#f4f4f5',
labelColor: '#52525b',
iconColor: '#71717a',
Expand Down Expand Up @@ -272,13 +272,16 @@ export function CodeBlock({

return (
<div
className={cn('overflow-hidden rounded-lg border border-border font-mono text-sm', className)}
className={cn(
'overflow-hidden rounded-lg border border-border future:border-border-subtle font-mono text-sm',
className
)}
style={{ background: config.bg }}
>
{/* ── Header ─────────────────────────────────────────────── */}
{showHeader && (
<div
className="flex items-center justify-between px-4 py-2 border-b border-border"
className="flex items-center justify-between px-4 py-2 border-b border-border future:border-border-subtle"
style={{ background: config.headerBg }}
>
<span className="text-xs font-medium" style={{ color: config.labelColor }}>
Expand Down Expand Up @@ -309,6 +312,7 @@ export function CodeBlock({
wrapLongLines={wrapLines}
customStyle={{
margin: 0,
border: 'none',
borderRadius: 0,
background: 'transparent',
padding: '1rem',
Expand Down
Loading