feat: server entry and web shell with design tokens
Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Lucas Winther
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
7f33169487
commit
05eee4cd40
@@ -0,0 +1,13 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export function AppShell({ header, sidebar, children }: { header?: ReactNode; sidebar?: ReactNode; children: ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
{header ? <header className="stc-top">{header}</header> : null}
|
||||
<div className="stc-shell">
|
||||
{sidebar ? <aside className="stc-side">{sidebar}</aside> : null}
|
||||
<main className="stc-main">{children}</main>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@import "@fontsource/ibm-plex-sans/400.css";
|
||||
@import "@fontsource/ibm-plex-sans/500.css";
|
||||
@import "@fontsource/ibm-plex-sans/600.css";
|
||||
@import "@fontsource/ibm-plex-mono/400.css";
|
||||
@import "@fontsource/literata/400.css";
|
||||
@import "@fontsource/literata/600.css";
|
||||
@import "@fontsource/literata/400-italic.css";
|
||||
@@ -0,0 +1,2 @@
|
||||
export { AppShell } from "./AppShell";
|
||||
export { Pill, SegmentedToggle, ProgressBar, FloatingActionBar, CourseCover, monogram } from "./primitives";
|
||||
@@ -0,0 +1,46 @@
|
||||
import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from "react";
|
||||
|
||||
export function Pill({ variant = "default", className, ...rest }: { variant?: "default" | "primary" | "ghost" } & ButtonHTMLAttributes<HTMLButtonElement>) {
|
||||
const cls = ["stc-pill", variant !== "default" && `stc-pill--${variant}`, className].filter(Boolean).join(" ");
|
||||
return <button type="button" {...rest} className={cls} />;
|
||||
}
|
||||
|
||||
export function SegmentedToggle({ options, value, onChange, label }: {
|
||||
options: { value: string; label: string }[]; value: string; onChange: (v: string) => void; label: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="stc-seg" role="group" aria-label={label}>
|
||||
{options.map((o) => (
|
||||
<button key={o.value} type="button" aria-pressed={o.value === value} onClick={() => onChange(o.value)}>{o.label}</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProgressBar({ value, dim, label }: { value: number; dim?: boolean; label: string }) {
|
||||
const pct = Math.round(Math.min(1, Math.max(0, value)) * 100);
|
||||
return (
|
||||
<span className={dim ? "stc-bar stc-bar--dim" : "stc-bar"} role="progressbar" aria-label={label} aria-valuemin={0} aria-valuemax={100} aria-valuenow={pct}>
|
||||
<i style={{ width: `${pct}%` }} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function FloatingActionBar({ children }: { children: ReactNode }) {
|
||||
return <div className="stc-dock" role="toolbar">{children}</div>;
|
||||
}
|
||||
|
||||
export function monogram(title: string): string {
|
||||
const words = title.trim().split(/\s+/).filter(Boolean);
|
||||
const letters = words.length >= 2 ? [words[0]![0], words[1]![0]] : Array.from(words[0] ?? "?").slice(0, 2);
|
||||
return letters.join("").toUpperCase();
|
||||
}
|
||||
|
||||
export function CourseCover({ title, image, accent }: { title: string; image?: string; accent?: string }) {
|
||||
const style = accent ? ({ "--cfg": accent } as CSSProperties) : undefined;
|
||||
return (
|
||||
<div className="stc-cover" style={style} role="img" aria-label={title}>
|
||||
{image ? <img src={image} alt="" /> : <span aria-hidden="true">{monogram(title)}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
:root {
|
||||
--ground: #12141a; --side: #181b22; --raised: #232733; --line: #262a33; --line2: #343947;
|
||||
--text: #d9dce3; --read: #d9d4c8; --head: #f2efe8; --muted: #a4abb8; --faint: #8c93a0;
|
||||
--accent: #f1b44c; --accent-dim: #8c7440; --on-accent: #12141a;
|
||||
--ok: #86c79f; --bad: #ee8f8f;
|
||||
--sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
--serif: "Literata", Georgia, "Times New Roman", serif;
|
||||
--mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
|
||||
--top: 52px; --sidew: 296px; --fast: 140ms;
|
||||
color-scheme: dark;
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
body { margin: 0; background: var(--ground); color: var(--text); font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
|
||||
a { color: inherit; }
|
||||
button, input, textarea { font: inherit; color: inherit; }
|
||||
button { cursor: pointer; }
|
||||
code, pre { font-family: var(--mono); }
|
||||
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
|
||||
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
||||
|
||||
.reading { font-family: var(--serif); font-size: 19px; line-height: 1.75; color: var(--read); max-width: 660px; }
|
||||
.work { font-family: var(--sans); font-size: 15.5px; line-height: 1.6; color: var(--text); max-width: 760px; }
|
||||
|
||||
/* shell */
|
||||
.stc-top { position: sticky; top: 0; z-index: 30; height: var(--top); display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--ground); border-bottom: 1px solid var(--line); }
|
||||
.stc-shell { display: flex; align-items: flex-start; }
|
||||
.stc-side { position: sticky; top: var(--top); flex: none; width: var(--sidew); height: calc(100vh - var(--top)); overflow-y: auto; background: var(--side); border-right: 1px solid var(--line); }
|
||||
.stc-main { flex: 1; min-width: 0; padding: 44px 40px 0; }
|
||||
|
||||
/* pill */
|
||||
.stc-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px; border: 1px solid var(--line2); border-radius: 18px; background: none; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background var(--fast), color var(--fast), border-color var(--fast); }
|
||||
.stc-pill:hover { background: var(--raised); }
|
||||
.stc-pill--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
|
||||
.stc-pill--primary:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }
|
||||
.stc-pill--ghost { border-color: transparent; color: var(--muted); }
|
||||
.stc-pill--ghost:hover { color: var(--text); }
|
||||
.stc-pill:disabled { opacity: .45; cursor: default; }
|
||||
|
||||
/* segmented toggle */
|
||||
.stc-seg { display: inline-flex; padding: 2px; border: 1px solid var(--line2); border-radius: 20px; flex: none; }
|
||||
.stc-seg button { border: 0; background: none; height: 28px; padding: 0 13px; border-radius: 16px; font-size: 12.5px; font-weight: 500; color: var(--faint); transition: background var(--fast), color var(--fast); }
|
||||
.stc-seg button:hover { color: var(--text); }
|
||||
.stc-seg button[aria-pressed="true"] { background: var(--raised); color: var(--head); }
|
||||
|
||||
/* progress */
|
||||
.stc-bar { display: block; flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
|
||||
.stc-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
|
||||
.stc-bar--dim > i { background: var(--accent-dim); }
|
||||
|
||||
/* floating action bar */
|
||||
.stc-dock { position: sticky; bottom: 18px; z-index: 10; display: flex; width: max-content; max-width: 100%; margin: 56px auto 18px; gap: 4px; padding: 5px; background: var(--raised); border: 1px solid var(--line2); border-radius: 24px; box-shadow: 0 0 0 10px var(--ground); }
|
||||
.stc-dock .stc-pill { height: 36px; border-color: transparent; }
|
||||
.stc-dock .stc-pill:hover { background: var(--line2); }
|
||||
.stc-dock .stc-pill--primary:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }
|
||||
|
||||
/* cover */
|
||||
.stc-cover { flex: none; position: relative; width: var(--cw, 44px); aspect-ratio: 3 / 4; border-radius: 6px; background: var(--cbg, var(--raised)); color: var(--cfg, var(--accent)); border: 1px solid color-mix(in srgb, var(--cfg, var(--accent)) 18%, transparent); overflow: hidden; font: 600 calc(var(--cw, 44px) * .34) / 1 var(--sans); letter-spacing: -.03em; display: flex; align-items: flex-end; padding: calc(var(--cw, 44px) * .12); }
|
||||
.stc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
|
||||
Reference in New Issue
Block a user