Session 33: Design system Phase A+B — tokens, fonts, glitch CSS, shared components (1792 tests)
VYNDR 2.0 design-system conversion, foundation only (pages/mobile/systems are Sessions 34+). Frontend-only; zero backend changes. Phase A: §2 token set + token-wired typography + Inter/JetBrains Mono fonts + §4 glitch keyframes (ported verbatim from the prototype's vyndr.css) + scanline texture + §10 a11y data-* layer in globals.css. Legacy alias block kept. Phase B: web/src/lib/vyndrTokens.js (CommonJS helpers) + 9 shared components under web/src/components/vyndr/ (Wordmark, GradeBadge, SportBadge, TerminalInput, SectionHead, VBtn, Card, Sparkline, Ticker). 74 new design-system tests. Backend 1718 -> 1792, 141 suites, zero regressions. Web build clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
import type { CSSProperties, ReactNode } from 'react';
|
||||
|
||||
type CardProps = {
|
||||
children: ReactNode;
|
||||
/** Apply the scanline texture overlay (default true). */
|
||||
hoverScan?: boolean;
|
||||
style?: CSSProperties;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
/** Level-1 surface card (§5). bg-1 panel, border, scanline skin. */
|
||||
export default function Card({ children, hoverScan = true, style = {}, className = '' }: CardProps) {
|
||||
return (
|
||||
<div
|
||||
className={(hoverScan ? 'scanlines ' : '') + className}
|
||||
style={{
|
||||
background: 'var(--bg-1)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 10,
|
||||
position: 'relative',
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { gradeColor, gradeBadgeSize } from '@/lib/vyndrTokens';
|
||||
|
||||
type Grade = 'A+' | 'A' | 'A-' | 'B+' | 'B' | 'B-' | 'C' | 'D';
|
||||
|
||||
type GradeBadgeProps = {
|
||||
grade: Grade | string;
|
||||
/** Pixel height or a variant: sm 16 (inline) / md 30 / lg 48 (card) / hero 100 (80–120). */
|
||||
size?: number | 'sm' | 'md' | 'lg' | 'hero';
|
||||
/** A/A+ get a phosphor glow when true. */
|
||||
glow?: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* The grade chip (§5) — the product's core visual. The grade letter is ALWAYS
|
||||
* the largest, first-read element on a card; on hero surfaces it's 80–120px.
|
||||
* Colored strictly by grade token. JetBrains Mono. Data — never glitches.
|
||||
*/
|
||||
export default function GradeBadge({ grade, size = 'md', glow = false }: GradeBadgeProps) {
|
||||
const c = gradeColor(grade);
|
||||
const px = gradeBadgeSize(size);
|
||||
const isA = grade === 'A+' || grade === 'A';
|
||||
return (
|
||||
<span
|
||||
className="mono"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
minWidth: px + 6,
|
||||
height: px,
|
||||
padding: '0 6px',
|
||||
fontSize: px * 0.52,
|
||||
fontWeight: 800,
|
||||
color: c,
|
||||
border: `1.5px solid ${c}`,
|
||||
borderRadius: 4,
|
||||
background: `color-mix(in srgb, ${c} 12%, transparent)`,
|
||||
boxShadow: glow && isA ? `0 0 14px color-mix(in srgb, ${c} 55%, transparent)` : 'none',
|
||||
letterSpacing: grade.length > 1 ? '-0.02em' : '0',
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
{grade}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import type { CSSProperties, ReactNode } from 'react';
|
||||
|
||||
type SectionHeadProps = {
|
||||
children: ReactNode;
|
||||
/** Label color token (default muted text). */
|
||||
accent?: string;
|
||||
style?: CSSProperties;
|
||||
};
|
||||
|
||||
/**
|
||||
* All-caps 11px mono section label with a one-shot glitch tear on hover (§5).
|
||||
* Chrome — glitches; never wrap data in this.
|
||||
*/
|
||||
export default function SectionHead({ children, accent = 'var(--text-1)', style = {} }: SectionHeadProps) {
|
||||
return (
|
||||
<div
|
||||
className="label glitch-hover"
|
||||
style={{
|
||||
color: accent,
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
cursor: 'default',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 7,
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
type SparklineProps = {
|
||||
data: number[];
|
||||
/** Direction tint: green when up, red when down. */
|
||||
up?: boolean;
|
||||
w?: number;
|
||||
h?: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Tiny SVG line for line movement (§5). Green up / red down, dot on the last
|
||||
* point. Dependency-free. Data viz — the line itself never glitches.
|
||||
*/
|
||||
export default function Sparkline({ data, up = true, w = 92, h = 26 }: SparklineProps) {
|
||||
const safe = data && data.length ? data : [0, 0];
|
||||
const min = Math.min(...safe);
|
||||
const max = Math.max(...safe);
|
||||
const rng = max - min || 1;
|
||||
const pts = safe.map((v, i) => {
|
||||
const x = (i / Math.max(safe.length - 1, 1)) * w;
|
||||
const y = h - ((v - min) / rng) * (h - 4) - 2;
|
||||
return [x, y] as const;
|
||||
});
|
||||
const d = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
|
||||
const c = up ? 'var(--g-a)' : 'var(--miss)';
|
||||
const last = pts[pts.length - 1];
|
||||
return (
|
||||
<svg width={w} height={h} style={{ display: 'block', overflow: 'visible' }} aria-hidden>
|
||||
<path d={d} fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<circle cx={last[0]} cy={last[1]} r="2.2" fill={c} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { SPORT } from '@/lib/vyndrTokens';
|
||||
|
||||
type SportBadgeProps = {
|
||||
sport: 'nba' | 'mlb' | 'wnba' | 'soccer' | string;
|
||||
size?: 'sm' | 'md';
|
||||
};
|
||||
|
||||
/** Colored sport chip from the sport token (§5). JetBrains Mono caps. */
|
||||
export default function SportBadge({ sport, size = 'md' }: SportBadgeProps) {
|
||||
const s = SPORT[sport as keyof typeof SPORT] || SPORT.nba;
|
||||
const pad = size === 'sm' ? '2px 6px' : '3px 8px';
|
||||
const fs = size === 'sm' ? 10 : 11;
|
||||
return (
|
||||
<span
|
||||
className="mono"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
padding: pad,
|
||||
fontSize: fs,
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.08em',
|
||||
color: s.hex,
|
||||
border: `1px solid ${s.hex}`,
|
||||
borderRadius: 3,
|
||||
background: `${s.hex}1a`,
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
{s.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
'use client';
|
||||
|
||||
import { useState, type CSSProperties } from 'react';
|
||||
|
||||
type TerminalInputProps = {
|
||||
prompt?: string;
|
||||
placeholder?: string;
|
||||
value?: string;
|
||||
onChange?: (value: string) => void;
|
||||
/** Amber prompt + caret (system-state) instead of grade-green. */
|
||||
amber?: boolean;
|
||||
/** Monospace input text (default true — terminal copy is data). */
|
||||
mono?: boolean;
|
||||
style?: CSSProperties;
|
||||
};
|
||||
|
||||
/**
|
||||
* Terminal field with a `›` prompt and a phosphor cursor that pulses while empty (§5).
|
||||
* The focus ring is grade-green. Monospace by default — what you type is data.
|
||||
*/
|
||||
export default function TerminalInput({
|
||||
prompt = '›',
|
||||
placeholder = '',
|
||||
value,
|
||||
onChange,
|
||||
amber = false,
|
||||
mono = true,
|
||||
style = {},
|
||||
}: TerminalInputProps) {
|
||||
const [focused, setFocused] = useState(false);
|
||||
const empty = !value;
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
background: 'var(--bg-2)',
|
||||
border: `1px solid ${focused ? 'var(--border-hi)' : 'var(--border)'}`,
|
||||
borderRadius: 6,
|
||||
padding: '11px 14px',
|
||||
transition: 'border-color .15s',
|
||||
boxShadow: focused ? '0 0 0 1px rgba(0,212,160,.25)' : 'none',
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="mono"
|
||||
style={{ color: amber ? 'var(--amber)' : 'var(--g-a)', fontWeight: 700, fontSize: 14 }}
|
||||
>
|
||||
{prompt}
|
||||
</span>
|
||||
<div style={{ position: 'relative', flex: 1, display: 'flex', alignItems: 'center' }}>
|
||||
<input
|
||||
value={value || ''}
|
||||
onChange={(e) => onChange && onChange(e.target.value)}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
placeholder={placeholder}
|
||||
className={mono ? 'mono' : ''}
|
||||
style={{
|
||||
flex: 1,
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
outline: 'none',
|
||||
color: 'var(--text-0)',
|
||||
fontSize: 14,
|
||||
letterSpacing: '0.02em',
|
||||
fontFamily: mono ? 'var(--mono)' : 'var(--sans)',
|
||||
}}
|
||||
/>
|
||||
{empty && (
|
||||
<span
|
||||
className={'phosphor-cursor' + (amber ? ' amber' : '')}
|
||||
style={{ position: 'absolute', left: 1 }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
type TickerItem = {
|
||||
tag: string;
|
||||
text: string;
|
||||
/** Tag color (default amber). */
|
||||
color?: string;
|
||||
/** Amber glow on the tag. */
|
||||
glow?: boolean;
|
||||
/** Movement delta, e.g. "▲+1.5" (green) or "▼-0.5" (red). */
|
||||
delta?: string;
|
||||
};
|
||||
|
||||
type TickerProps = {
|
||||
items: TickerItem[];
|
||||
height?: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Scrolling marquee (§5). Continuous `ticker-scroll`; content duplicated so the
|
||||
* loop is seamless. Edge fades mask the wrap. Tags glow; values stay crisp.
|
||||
*/
|
||||
export default function Ticker({ items, height = 34 }: TickerProps) {
|
||||
const content = items.map((it, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="mono"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
padding: '0 26px',
|
||||
fontSize: 12,
|
||||
letterSpacing: '0.04em',
|
||||
color: 'var(--text-1)',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
color: it.color || 'var(--amber)',
|
||||
textShadow: it.glow ? 'var(--amber-glow)' : 'none',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{it.tag}
|
||||
</span>
|
||||
<span style={{ color: 'var(--text-0)' }}>{it.text}</span>
|
||||
{it.delta && (
|
||||
<span style={{ color: it.delta.startsWith('▲') ? 'var(--g-a)' : 'var(--miss)', fontWeight: 700 }}>
|
||||
{it.delta}
|
||||
</span>
|
||||
)}
|
||||
<span style={{ color: 'var(--text-2)' }}>·</span>
|
||||
</span>
|
||||
));
|
||||
return (
|
||||
<div
|
||||
className="scanlines"
|
||||
style={{
|
||||
height,
|
||||
overflow: 'hidden',
|
||||
background: 'var(--bg-1)',
|
||||
borderTop: '1px solid var(--border)',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div className="ticker-track">
|
||||
{content}
|
||||
{content}
|
||||
</div>
|
||||
<div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 60, background: 'linear-gradient(90deg, var(--bg-1), transparent)', zIndex: 2 }} />
|
||||
<div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 60, background: 'linear-gradient(270deg, var(--bg-1), transparent)', zIndex: 2 }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
'use client';
|
||||
|
||||
import type { CSSProperties, ReactNode, MouseEvent } from 'react';
|
||||
|
||||
type Variant = 'primary' | 'outline' | 'ghost' | 'amber' | 'danger';
|
||||
|
||||
type VBtnProps = {
|
||||
children: ReactNode;
|
||||
variant?: Variant;
|
||||
onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
|
||||
small?: boolean;
|
||||
style?: CSSProperties;
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
const VARIANTS: Record<Variant, CSSProperties> = {
|
||||
primary: { background: 'var(--g-a)', color: '#04140f', borderColor: 'var(--g-a)' },
|
||||
outline: { background: 'transparent', color: 'var(--text-0)', borderColor: 'var(--border-hi)' },
|
||||
ghost: { background: 'transparent', color: 'var(--text-1)', borderColor: 'transparent' },
|
||||
amber: { background: 'transparent', color: 'var(--amber)', borderColor: 'var(--amber)' },
|
||||
danger: { background: 'transparent', color: 'var(--miss)', borderColor: 'var(--miss)' },
|
||||
};
|
||||
|
||||
/** Button (§5). primary = grade-green filled. Inter, never glitches. */
|
||||
export default function VBtn({
|
||||
children,
|
||||
variant = 'primary',
|
||||
onClick,
|
||||
small = false,
|
||||
style = {},
|
||||
type = 'button',
|
||||
disabled = false,
|
||||
}: VBtnProps) {
|
||||
const base: CSSProperties = {
|
||||
fontFamily: 'var(--sans)',
|
||||
fontWeight: 700,
|
||||
fontSize: small ? 12.5 : 14,
|
||||
padding: small ? '8px 14px' : '11px 20px',
|
||||
borderRadius: 6,
|
||||
cursor: disabled ? 'not-allowed' : 'pointer',
|
||||
border: '1px solid transparent',
|
||||
transition: 'all .15s',
|
||||
letterSpacing: '0.01em',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
whiteSpace: 'nowrap',
|
||||
opacity: disabled ? 0.45 : 1,
|
||||
};
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
style={{ ...base, ...VARIANTS[variant], ...style }}
|
||||
onMouseEnter={(e) => {
|
||||
if (variant === 'outline') e.currentTarget.style.borderColor = 'var(--g-a)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (variant === 'outline') e.currentTarget.style.borderColor = 'var(--border-hi)';
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import type { CSSProperties } from 'react';
|
||||
|
||||
const SIZES: Record<string, number> = { sm: 18, md: 22, lg: 34 };
|
||||
|
||||
type WordmarkProps = {
|
||||
/** Pixel size or a named variant (sm 18 / md 22 / lg 34). */
|
||||
size?: number | 'sm' | 'md' | 'lg';
|
||||
/** Render the live blinking phosphor caret after the R. */
|
||||
cursor?: boolean;
|
||||
/** Render the BETA clearance pill. */
|
||||
beta?: boolean;
|
||||
style?: CSSProperties;
|
||||
ariaLabel?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* VYNDR 2.0 signature wordmark (§4). Inter 800 with RGB chromatic-aberration
|
||||
* (::before #ff2d6f / ::after #2dffd5), a permanently grade-green glowing R,
|
||||
* and a blinking caret. The `wm-tear` glitch fires twice per 5s cycle — restraint
|
||||
* is the premium. Appears EVERYWHERE the name does. Data never glitches; this does.
|
||||
*/
|
||||
export default function Wordmark({
|
||||
size = 'md',
|
||||
cursor = true,
|
||||
beta = false,
|
||||
style = {},
|
||||
ariaLabel = 'VYNDR',
|
||||
}: WordmarkProps) {
|
||||
const px = typeof size === 'number' ? size : SIZES[size] ?? SIZES.md;
|
||||
return (
|
||||
<span
|
||||
style={{ display: 'inline-flex', alignItems: 'center', gap: Math.round(px * 0.55) }}
|
||||
role="img"
|
||||
aria-label={beta ? `${ariaLabel} beta` : ariaLabel}
|
||||
>
|
||||
<span className="wm" data-text="VYNDR" style={{ fontSize: px, ...style }} aria-hidden>
|
||||
VYND<span className="wm-r">R</span>
|
||||
{cursor && <span className="wm-cursor" />}
|
||||
</span>
|
||||
{beta && <span className="wm-beta" aria-hidden>BETA</span>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
/* VYNDR 2.0 shared components (§5). Import from '@/components/vyndr'. */
|
||||
export { default as Wordmark } from './Wordmark';
|
||||
export { default as GradeBadge } from './GradeBadge';
|
||||
export { default as SportBadge } from './SportBadge';
|
||||
export { default as TerminalInput } from './TerminalInput';
|
||||
export { default as SectionHead } from './SectionHead';
|
||||
export { default as VBtn } from './VBtn';
|
||||
export { default as Card } from './Card';
|
||||
export { default as Sparkline } from './Sparkline';
|
||||
export { default as Ticker } from './Ticker';
|
||||
|
||||
export {
|
||||
GRADE_COLORS,
|
||||
GRADE_HEX,
|
||||
SPORT,
|
||||
GRADE_BADGE_SIZES,
|
||||
gradeColor,
|
||||
gradeHex,
|
||||
gradeBadgeSize,
|
||||
} from '@/lib/vyndrTokens';
|
||||
Reference in New Issue
Block a user