/* global React, PageShell, AGGIE_CATALOG */ /* * AggieVisualLanguage.jsx — Foundations / Visual language page. * * Showcases the Batch E-prelude token refresh: * - Two-ring focus * - Transportation-tempo easings * - Four-tier elevation * - Warm-neutral ramp extension * - Survey-rhythm density baseline * - Identity primitives (Texas star, TAMUS chevron, compass, ROW grid) * * Helper prefix: VL. */ const { useState: _vlUseState, useRef: _vlUseRef, useEffect: _vlUseEffect } = React; function VLBox({ dark = false, label, children, padded = true }) { return (
{label} on {dark ? "dark" : "light"}
{children}
); } function VLSectionLabel({ children }) { return (
{children}
); } function VLIntro({ children }) { return (
{children}
); } function VLSpecRow({ children }) { return (
{children}
); } function VLSpec({ label, value, note }) { return (
{label}
{value}
{note &&
{note}
}
); } // ════════════════════════════════════════════════════════════════════════ // 1. Two-ring focus // ════════════════════════════════════════════════════════════════════════ function VLFocusDemo() { return (
e.preventDefault()} style={{ color: "var(--brand-secondary)", fontWeight: 500 }}>Inline link
); } // ════════════════════════════════════════════════════════════════════════ // 2. Easing tokens // ════════════════════════════════════════════════════════════════════════ function VLEasingDemo() { const [tick, setTick] = _vlUseState(0); return (
{[ { name: "survey", curve: "cubic-bezier(0.4, 0, 0.2, 1)", note: "Tables, forms, disclosures" }, { name: "corridor", curve: "cubic-bezier(0.2, 0, 0, 1)", note: "Page-level, sheets, modals" }, { name: "arrival", curve: "cubic-bezier(0, 0, 0.2, 1)", note: "Toasts, banners, snapshots" }, ].map(c => (
--ease-{c.name}
{c.curve.replace("cubic-bezier", "cb")}
{c.note}
))}
); } // ════════════════════════════════════════════════════════════════════════ // 3. Elevation tiers // ════════════════════════════════════════════════════════════════════════ function VLElevationDemo() { const tiers = [ { name: "flat", token: "--elevation-flat", desc: "Border-only. Inline cards, list rows in a frame." }, { name: "rest", token: "--elevation-rest", desc: "Quietly lifted. Data tables, news cards in a grid." }, { name: "hover", token: "--elevation-hover", desc: "Temporarily lifted. Pair with translateY(-1px)." }, { name: "overlay", token: "--elevation-overlay", desc: "Popovers, sheets, modals — clearly above the page." }, { name: "pinned", token: "--elevation-pinned", desc: "Sticky chrome — bottom-only shadow." }, ]; return (
{tiers.map(t => (
{t.name}
{t.token}
{t.desc}
))}
); } // ════════════════════════════════════════════════════════════════════════ // 4. Warm-neutral ramp // ════════════════════════════════════════════════════════════════════════ function VLNeutralRamp() { const stops = [ { stop: 0, hex: "#FFFFFF" }, { stop: 50, hex: "#FAFAFA" }, { stop: 100, hex: "#F5F5F5" }, { stop: 150, hex: "#EFEEED", isNew: true }, { stop: 200, hex: "#E7E6E6" }, { stop: 250, hex: "#DCDBD8", isNew: true }, { stop: 300, hex: "#D1D2D4" }, { stop: 400, hex: "#A5A5A5" }, { stop: 450, hex: "#9B9A96", isNew: true }, { stop: 500, hex: "#939597" }, { stop: 550, hex: "#86847F", isNew: true }, { stop: 600, hex: "#7E7E7E" }, { stop: 650, hex: "#6B6964", isNew: true }, { stop: 700, hex: "#5D5D5D" }, { stop: 750, hex: "#535048", isNew: true }, { stop: 800, hex: "#4C4C4E" }, { stop: 850, hex: "#3A3833", isNew: true }, { stop: 900, hex: "#221F1F" }, ]; return (
{stops.map(s => (
{s.isNew && NEW}
= 500 ? "white" : "var(--text-primary)" }}>{s.stop}
= 500 ? "rgba(255,255,255,0.7)" : "var(--text-muted)", marginTop: 2 }}>{s.hex}
))}
); } // ════════════════════════════════════════════════════════════════════════ // 5. Survey rhythm // ════════════════════════════════════════════════════════════════════════ function VLRhythm() { const tokens = [ { name: "tight", px: 4, use: "between input rows in tables; chip-to-chip" }, { name: "snug", px: 8, use: "cell padding, chip padding, icon gap" }, { name: "normal", px: 12, use: "button padding, list-item gap, label-to-input" }, { name: "loose", px: 16, use: "form field gap, card section padding" }, { name: "roomy", px: 24, use: "section breaks, descriptions row gap" }, ]; return ( {tokens.map(t => (
--rhythm-{t.name}
{t.px}px
{t.use}
))} ); } // ════════════════════════════════════════════════════════════════════════ // 6. Identity primitives // ════════════════════════════════════════════════════════════════════════ function VLIdentityPrimitives() { const sprite = "../../assets/identity-primitives.svg"; const items = [ { id: "tux-star", name: "Texas star", note: "Lone-star reference; corner accents, badge marks", w: 40, h: 40 }, { id: "tux-chevron", name: "TAMUS chevron", note: "Section bracket, downward angle accent", w: 64, h: 32 }, { id: "tux-compass", name: "Compass rose", note: "Map-related families, geo embeds", w: 56, h: 56 }, { id: "tux-row-grid", name: "ROW grid", note: "Pavement-stripe pattern; data-density gradient", w: 128, h: 32 }, ]; return (
{items.map(it => (
{it.name}
#{it.id}
{it.note}
))}
{items.map(it => (
#{it.id}
))}
); } // ════════════════════════════════════════════════════════════════════════ // Page // ════════════════════════════════════════════════════════════════════════ function VisualLanguagePage() { const item = (window.AGGIE_CATALOG || []).find(c => c.id === "visual-language"); return ( Batch E-prelude — a token-only refresh shipped before the data-density refit. Every component family inherits these changes automatically. Lineage notes for each are in design/visual-language-evolution.md. 1 · Two-ring focus 2 · Transportation-tempo easings 3 · Four-tier elevation 4 · Warm-neutral ramp (12 → 18 stops) 5 · Survey rhythm — density baseline 6 · Identity primitives ); } Object.assign(window, { VisualLanguagePage });