version 0.2.0 replaces fromer version!
This commit is contained in:
@@ -1,102 +0,0 @@
|
||||
// =============================================================
|
||||
// Atoms — Eyebrow, Tag, Button, StageDot, Stamp, IconBtn
|
||||
// =============================================================
|
||||
|
||||
function Eyebrow({ children, style }) {
|
||||
return (
|
||||
<span style={{
|
||||
font: '500 11px/1.2 var(--ff-mono)',
|
||||
letterSpacing: '0.08em',
|
||||
textTransform: 'uppercase',
|
||||
color: 'var(--fg-3)',
|
||||
...style,
|
||||
}}>{children}</span>
|
||||
);
|
||||
}
|
||||
|
||||
function Tag({ children, active, draft, style }) {
|
||||
const base = {
|
||||
font: '500 10px/1 var(--ff-mono)',
|
||||
letterSpacing: '0.1em',
|
||||
textTransform: 'uppercase',
|
||||
padding: '5px 10px',
|
||||
borderRadius: 'var(--r-pill)',
|
||||
border: '1px solid var(--border)',
|
||||
color: 'var(--fg-2)',
|
||||
background: 'var(--paper)',
|
||||
display: 'inline-block',
|
||||
};
|
||||
if (active) Object.assign(base, { background: 'var(--ink)', color: 'var(--paper)', borderColor: 'var(--ink)' });
|
||||
if (draft) Object.assign(base, { background: 'var(--hi)', color: 'var(--hi-ink)', borderColor: 'transparent' });
|
||||
return <span style={{ ...base, ...style }}>{children}</span>;
|
||||
}
|
||||
|
||||
function Button({ children, variant = 'secondary', onClick, style, icon }) {
|
||||
const base = {
|
||||
font: '500 13px var(--ff-sans)',
|
||||
letterSpacing: '-0.005em',
|
||||
padding: '9px 14px',
|
||||
borderRadius: 'var(--r-2)',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--paper)',
|
||||
color: 'var(--ink)',
|
||||
cursor: 'pointer',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
whiteSpace: 'nowrap',
|
||||
transition: 'background 120ms ease, border-color 120ms ease',
|
||||
};
|
||||
if (variant === 'primary') Object.assign(base, { background: 'var(--ink)', color: 'var(--paper)', borderColor: 'var(--ink)' });
|
||||
if (variant === 'ghost') Object.assign(base, { background: 'transparent', borderColor: 'transparent', padding: '7px 10px' });
|
||||
return (
|
||||
<button onClick={onClick} style={{ ...base, ...style }}>
|
||||
{icon && <i data-lucide={icon} style={{ width: 14, height: 14, strokeWidth: 1.5 }}></i>}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const STAGE_COLORS = {
|
||||
S0: '#B5B5B3', S1: '#8A8A8A', S2: '#5C5C5C', S3: '#0A0A0A', S4: '#FFD400',
|
||||
};
|
||||
|
||||
function StageDot({ level = 'S2', label, style }) {
|
||||
return (
|
||||
<span style={{
|
||||
font: '500 10px/1 var(--ff-mono)',
|
||||
letterSpacing: '0.1em',
|
||||
textTransform: 'uppercase',
|
||||
color: 'var(--fg-2)',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
...style,
|
||||
}}>
|
||||
<span style={{ width: 8, height: 8, borderRadius: 999, background: STAGE_COLORS[level] }}></span>
|
||||
{label || level}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function Stamp({ children, style }) {
|
||||
return (
|
||||
<span style={{
|
||||
display: 'inline-block',
|
||||
background: 'var(--hi)',
|
||||
color: 'var(--hi-ink)',
|
||||
padding: '5px 10px 3px',
|
||||
font: '500 10px/1 var(--ff-mono)',
|
||||
letterSpacing: '0.12em',
|
||||
textTransform: 'uppercase',
|
||||
transform: 'rotate(-1.5deg)',
|
||||
...style,
|
||||
}}>{children}</span>
|
||||
);
|
||||
}
|
||||
|
||||
function Icon({ name, size = 16, style }) {
|
||||
return <i data-lucide={name} style={{ width: size, height: size, strokeWidth: 1.5, ...style }}></i>;
|
||||
}
|
||||
|
||||
Object.assign(window, { Eyebrow, Tag, Button, StageDot, Stamp, Icon, STAGE_COLORS });
|
||||
@@ -1,165 +0,0 @@
|
||||
// =============================================================
|
||||
// Chrome — TopNav, Sidebar, PageHeader, PipelineStrip
|
||||
// =============================================================
|
||||
|
||||
function TopNav({ onNew }) {
|
||||
return (
|
||||
<nav style={{
|
||||
height: 56,
|
||||
background: 'rgba(255,255,255,0.92)',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 28,
|
||||
padding: '0 24px',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 10,
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<img src="../../assets/whynot-logo.png" alt="" style={{ width: 22, height: 22 }} />
|
||||
<span style={{ font: '500 14px var(--ff-sans)' }}>whynot</span>
|
||||
<span style={{ font: '400 12px var(--ff-mono)', color: 'var(--fg-3)', letterSpacing: '0.04em' }}>/ control</span>
|
||||
</div>
|
||||
<div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{
|
||||
font: '400 12px var(--ff-mono)',
|
||||
color: 'var(--fg-3)',
|
||||
border: '1px solid var(--border)',
|
||||
padding: '6px 10px',
|
||||
borderRadius: 'var(--r-1)',
|
||||
display: 'flex', alignItems: 'center', gap: 10,
|
||||
minWidth: 240,
|
||||
}}>
|
||||
<Icon name="search" size={14} />
|
||||
<span>Search ideas, prototypes, signals…</span>
|
||||
<span style={{ marginLeft: 'auto', padding: '1px 5px', border: '1px solid var(--border)', borderRadius: 2, fontSize: 10 }}>⌘ K</span>
|
||||
</div>
|
||||
<Button variant="primary" icon="plus" onClick={onNew}>New idea</Button>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
const NAV_ITEMS = [
|
||||
{ key: 'inbox', label: 'Inbox', icon: 'inbox', count: 7 },
|
||||
{ key: 'prototypes', label: 'Prototypes', icon: 'flask-conical', count: 4 },
|
||||
{ key: 'signals', label: 'Signals', icon: 'activity', count: 12 },
|
||||
{ key: 'betas', label: 'Betas', icon: 'users', count: 1 },
|
||||
{ key: 'decisions', label: 'Decisions', icon: 'check-square', count: 3 },
|
||||
];
|
||||
|
||||
const DOC_ITEMS = [
|
||||
{ key: 'intent', label: 'INTENT.md' },
|
||||
{ key: 'scope', label: 'SCOPE.md' },
|
||||
{ key: 'operating', label: 'OPERATING_MODEL.md' },
|
||||
{ key: 'pipeline', label: 'PROTOTYPE_PIPELINE.md' },
|
||||
{ key: 'agent', label: 'AGENT_RULES.md' },
|
||||
];
|
||||
|
||||
function Sidebar({ current, onNav }) {
|
||||
const itemStyle = (active) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
padding: '8px 12px',
|
||||
borderRadius: 4,
|
||||
color: active ? 'var(--fg-1)' : 'var(--fg-2)',
|
||||
background: active ? 'var(--paper)' : 'transparent',
|
||||
boxShadow: active ? '0 0 0 1px var(--border) inset' : 'none',
|
||||
font: '500 13px var(--ff-sans)',
|
||||
cursor: 'pointer',
|
||||
textDecoration: 'none',
|
||||
transition: 'background 120ms ease, color 120ms ease',
|
||||
});
|
||||
return (
|
||||
<aside style={{
|
||||
width: 240, flex: 'none',
|
||||
background: 'var(--paper-2)',
|
||||
borderRight: '1px solid var(--border)',
|
||||
padding: '24px 16px',
|
||||
display: 'flex', flexDirection: 'column', gap: 24,
|
||||
height: 'calc(100vh - 56px)',
|
||||
position: 'sticky', top: 56,
|
||||
overflowY: 'auto',
|
||||
}}>
|
||||
<div>
|
||||
<Eyebrow style={{ paddingLeft: 12, marginBottom: 8, display: 'block' }}>Work</Eyebrow>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{NAV_ITEMS.map(item => (
|
||||
<a key={item.key} onClick={() => onNav(item.key)} style={itemStyle(current === item.key)}>
|
||||
<Icon name={item.icon} size={16} />
|
||||
<span>{item.label}</span>
|
||||
<span style={{ marginLeft: 'auto', font: '400 11px var(--ff-mono)', color: 'var(--fg-3)' }}>{item.count}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Eyebrow style={{ paddingLeft: 12, marginBottom: 8, display: 'block' }}>Control docs</Eyebrow>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{DOC_ITEMS.map(item => (
|
||||
<a key={item.key} onClick={() => onNav('doc:' + item.key)} style={{ ...itemStyle(current === 'doc:' + item.key), font: '400 12px var(--ff-mono)' }}>
|
||||
<Icon name="file-text" size={14} />
|
||||
<span>{item.label}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: 'auto', paddingTop: 12, borderTop: '1px solid var(--border)' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 12px' }}>
|
||||
<span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--hi-2)' }}></span>
|
||||
<span style={{ font: '500 11px var(--ff-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-2)' }}>A1 · Incubating</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function PageHeader({ eyebrow, title, lede, actions }) {
|
||||
return (
|
||||
<header style={{ marginBottom: 32, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
|
||||
<div style={{ display: 'flex', alignItems: 'flex-end', gap: 24 }}>
|
||||
<h1 style={{ font: '500 32px/1.15 var(--ff-sans)', letterSpacing: '-0.015em', margin: 0, flex: 1 }}>{title}</h1>
|
||||
{actions && <div style={{ display: 'flex', gap: 8 }}>{actions}</div>}
|
||||
</div>
|
||||
{lede && <p style={{ font: '400 16px/1.55 var(--ff-sans)', color: 'var(--fg-2)', margin: 0, maxWidth: '60ch' }}>{lede}</p>}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function PipelineStrip({ activeIdx = 3 }) {
|
||||
const stages = [
|
||||
{ num: 'Stage 0', name: 'Raw idea', meta: 'inbox/' },
|
||||
{ num: 'Stage 1', name: 'Triage', meta: '2026-02-12' },
|
||||
{ num: 'Stage 2', name: 'Prototype card', meta: 'prototypes/' },
|
||||
{ num: 'Stage 3', name: 'Experiment', meta: 'ends 2026-04-01' },
|
||||
{ num: 'Stage 4', name: 'Signal review', meta: '— pending' },
|
||||
];
|
||||
return (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, position: 'relative', margin: '0 0 32px' }}>
|
||||
{stages.map((s, i) => {
|
||||
const state = i < activeIdx ? 'done' : i === activeIdx ? 'active' : 'pending';
|
||||
const topColor = state === 'done' ? 'var(--ink)' : state === 'active' ? 'var(--hi-2)' : 'var(--border)';
|
||||
return (
|
||||
<div key={i} style={{
|
||||
padding: '10px 12px 14px',
|
||||
borderTop: `2px solid ${topColor}`,
|
||||
display: 'flex', flexDirection: 'column', gap: 4,
|
||||
position: 'relative',
|
||||
}}>
|
||||
<span style={{ font: '500 10px/1 var(--ff-mono)', letterSpacing: '0.1em', textTransform: 'uppercase', color: state === 'pending' ? 'var(--fg-3)' : 'var(--fg-1)' }}>{s.num}</span>
|
||||
<span style={{ font: '500 14px/1.25 var(--ff-sans)', color: state === 'pending' ? 'var(--fg-3)' : 'var(--fg-1)' }}>{s.name}</span>
|
||||
<span style={{ font: '400 11px/1.35 var(--ff-mono)', color: 'var(--fg-3)' }}>{s.meta}</span>
|
||||
{i > 0 && (
|
||||
<span style={{ position: 'absolute', top: -8, right: -7, font: '400 14px var(--ff-mono)', color: state === 'pending' ? 'var(--ink-5)' : 'var(--ink)' }}>→</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Object.assign(window, { TopNav, Sidebar, PageHeader, PipelineStrip, NAV_ITEMS, DOC_ITEMS });
|
||||
604
src/elements/_styles.js
Normal file
604
src/elements/_styles.js
Normal file
@@ -0,0 +1,604 @@
|
||||
/* Auto-generated from src/styles/components.css by scripts/sync-shared-styles.mjs.
|
||||
* Do NOT edit by hand. Edit components.css and re-run the script.
|
||||
*/
|
||||
|
||||
export const SHARED_CSS = String.raw`/* ============================================================
|
||||
WhyNot Design System — Component Styles
|
||||
------------------------------------------------------------
|
||||
Utility classes that the Lit web components render to. These
|
||||
are also consumable directly from any HTML (no JS required)
|
||||
for the "Layer 1 only" use case — see MultiFrameworkSupport.md.
|
||||
============================================================ */
|
||||
|
||||
/* ====== Custom-element display defaults ======
|
||||
* For shadow-DOM components, the wn-* host has display: inline by default.
|
||||
* Set sensible defaults so layout works without the consumer specifying them.
|
||||
*/
|
||||
wn-eyebrow, wn-tag, wn-stage-dot, wn-phase-dot, wn-stamp, wn-icon,
|
||||
wn-search-input, wn-button { display: inline-block; }
|
||||
|
||||
wn-card, wn-modal, wn-top-nav, wn-sidebar, wn-page-header,
|
||||
wn-pipeline, wn-prototype-card, wn-field-row, wn-breadcrumb,
|
||||
wn-table, wn-banner, wn-empty-state,
|
||||
wn-input, wn-textarea, wn-select { display: block; }
|
||||
|
||||
wn-toast-region { display: block; }
|
||||
wn-toast { display: block; }
|
||||
|
||||
wn-sidebar-group, wn-sidebar-item { display: block; }
|
||||
wn-table-row, wn-table-cell { display: contents; }
|
||||
|
||||
/* host hidden state — needed because shadow-DOM components don't inherit
|
||||
* \`[hidden]\` semantics in light DOM. Lit's host attribute reflection
|
||||
* handles attributes, but \`hidden\` on the host itself should still work. */
|
||||
[hidden] { display: none !important; }
|
||||
|
||||
/* ====== Buttons ====== */
|
||||
.wn-btn {
|
||||
font: 500 13px var(--ff-sans);
|
||||
letter-spacing: -0.005em;
|
||||
padding: 9px 16px;
|
||||
border-radius: var(--r-2);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
|
||||
text-decoration: none;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.wn-btn:hover { border-color: var(--ink); }
|
||||
.wn-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
|
||||
.wn-btn:active { background: var(--bg-3); }
|
||||
.wn-btn[disabled], .wn-btn.is-disabled {
|
||||
color: var(--ink-5); border-color: var(--border); cursor: not-allowed; background: var(--paper);
|
||||
}
|
||||
|
||||
.wn-btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
|
||||
.wn-btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
|
||||
.wn-btn--primary:active { background: var(--ink); }
|
||||
.wn-btn--primary[disabled], .wn-btn--primary.is-disabled {
|
||||
background: var(--ink-5); border-color: var(--ink-5); color: var(--paper);
|
||||
}
|
||||
|
||||
.wn-btn--ghost { background: transparent; border-color: transparent; padding: 7px 10px; }
|
||||
.wn-btn--ghost:hover { background: var(--bg-3); border-color: transparent; }
|
||||
|
||||
.wn-btn--danger { background: var(--paper); color: var(--ink); border-color: var(--ink); }
|
||||
|
||||
.wn-btn--sm { padding: 5px 10px; font-size: 12px; }
|
||||
.wn-btn--lg { padding: 12px 20px; font-size: 14px; }
|
||||
|
||||
.wn-btn__icon { width: 14px; height: 14px; flex: none; }
|
||||
.wn-btn--lg .wn-btn__icon { width: 16px; height: 16px; }
|
||||
|
||||
/* ====== Eyebrows & labels ====== */
|
||||
.wn-eyebrow {
|
||||
font: 500 11px/1.2 var(--ff-mono);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
display: inline-block;
|
||||
}
|
||||
.wn-eyebrow--strong { color: var(--fg-1); }
|
||||
|
||||
/* ====== Tags ====== */
|
||||
.wn-tag {
|
||||
font: 500 10px/1 var(--ff-mono);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
padding: 5px 10px;
|
||||
border-radius: var(--r-pill);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--fg-2);
|
||||
background: var(--paper);
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wn-tag--active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
|
||||
.wn-tag--draft { background: var(--hi); color: var(--hi-ink); border-color: transparent; }
|
||||
|
||||
/* ====== Stage / Phase dots ====== */
|
||||
.wn-dot {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font: 500 10px/1 var(--ff-mono);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-2);
|
||||
}
|
||||
.wn-dot__bullet { width: 8px; height: 8px; border-radius: 999px; background: var(--ink); flex: none; }
|
||||
|
||||
/* signal levels (S0–S4) */
|
||||
.wn-stage-dot--s0 .wn-dot__bullet { background: var(--status-raw); }
|
||||
.wn-stage-dot--s1 .wn-dot__bullet { background: var(--status-weak); }
|
||||
.wn-stage-dot--s2 .wn-dot__bullet { background: var(--status-medium); }
|
||||
.wn-stage-dot--s3 .wn-dot__bullet { background: var(--status-strong); }
|
||||
.wn-stage-dot--s4 .wn-dot__bullet { background: var(--status-commercial); }
|
||||
|
||||
/* phase states (todo / active / done / warn) — numbered phases, distinct from signal */
|
||||
.wn-phase-dot__bullet {
|
||||
width: 18px; height: 18px; border-radius: 999px;
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--paper);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font: 500 10px/1 var(--ff-mono); color: var(--fg-3);
|
||||
flex: none;
|
||||
}
|
||||
.wn-phase-dot--todo .wn-phase-dot__bullet { border-color: var(--border-strong); color: var(--fg-3); background: var(--paper); }
|
||||
.wn-phase-dot--active .wn-phase-dot__bullet { border-color: var(--ink); color: var(--ink); background: var(--paper); box-shadow: 0 0 0 3px rgba(10,10,10,0.06); }
|
||||
.wn-phase-dot--done .wn-phase-dot__bullet { border-color: var(--ink); color: var(--paper); background: var(--ink); }
|
||||
.wn-phase-dot--warn .wn-phase-dot__bullet { border-color: var(--hi-2); color: var(--hi-ink); background: var(--hi); }
|
||||
|
||||
/* ====== Stamp ====== */
|
||||
.wn-stamp {
|
||||
display: inline-block;
|
||||
background: var(--hi);
|
||||
color: var(--hi-ink);
|
||||
padding: 5px 10px 3px;
|
||||
font: 500 10px/1 var(--ff-mono);
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
transform: rotate(-1.5deg);
|
||||
}
|
||||
|
||||
/* ====== Icon ====== */
|
||||
.wn-icon { stroke-width: 1.5; stroke: currentColor; fill: none; display: inline-block; vertical-align: middle; }
|
||||
.wn-icon--sm { width: 14px; height: 14px; }
|
||||
.wn-icon--md { width: 16px; height: 16px; }
|
||||
.wn-icon--lg { width: 20px; height: 20px; }
|
||||
.wn-icon--xl { width: 24px; height: 24px; }
|
||||
|
||||
/* ====== Card ====== */
|
||||
.wn-card {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-2);
|
||||
padding: var(--sp-5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-3);
|
||||
position: relative;
|
||||
}
|
||||
.wn-card--inset { background: var(--paper-2); border-color: var(--border); }
|
||||
.wn-card--recessed { background: var(--paper-3); }
|
||||
.wn-card--lg { padding: var(--sp-6); border-radius: var(--r-3); }
|
||||
.wn-card--sm { padding: var(--sp-4); gap: var(--sp-2); }
|
||||
.wn-card--clickable { cursor: pointer; transition: border-color 120ms ease; }
|
||||
.wn-card--clickable:hover { border-color: var(--ink); }
|
||||
.wn-card--clickable:hover::before {
|
||||
content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px;
|
||||
width: 2px; background: var(--ink); border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.wn-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
|
||||
.wn-card__title { font: 500 17px/1.35 var(--ff-sans); margin: 4px 0 8px; color: var(--fg-1); }
|
||||
.wn-card__foot {
|
||||
display: flex; justify-content: space-between; gap: var(--sp-3);
|
||||
padding-top: var(--sp-3); margin-top: 4px;
|
||||
border-top: 1px solid var(--border-soft);
|
||||
font: 500 11px var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
|
||||
/* ====== Field row (label + value, 3-col grid) ====== */
|
||||
.wn-field-row {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr auto;
|
||||
gap: var(--sp-4) var(--sp-5);
|
||||
padding: var(--sp-3) 0;
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
align-items: baseline;
|
||||
}
|
||||
.wn-field-row:last-child { border-bottom: 0; }
|
||||
.wn-field-row__label {
|
||||
font: 500 11px/1.5 var(--ff-mono);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
.wn-field-row__value { font: 400 15px/1.55 var(--ff-sans); color: var(--fg-1); }
|
||||
.wn-field-row__aside { font: 400 12px var(--ff-mono); color: var(--fg-3); text-align: right; }
|
||||
.wn-field-row--stacked { grid-template-columns: 1fr; gap: 6px; }
|
||||
.wn-field-row--narrow { grid-template-columns: 120px 1fr; }
|
||||
|
||||
/* ====== Form inputs ====== */
|
||||
.wn-form-label {
|
||||
font: 500 11px/1 var(--ff-mono);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.wn-input, .wn-textarea, .wn-select {
|
||||
font: 400 14px var(--ff-sans);
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--paper);
|
||||
border-radius: var(--r-1);
|
||||
color: var(--fg-1);
|
||||
outline: none;
|
||||
width: 100%;
|
||||
transition: border-color 120ms ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.wn-input:hover, .wn-textarea:hover, .wn-select:hover { border-color: var(--border-strong); }
|
||||
.wn-input:focus, .wn-textarea:focus, .wn-select:focus { border-color: var(--ink); }
|
||||
.wn-input::placeholder, .wn-textarea::placeholder { color: var(--ink-5); }
|
||||
.wn-input[disabled], .wn-textarea[disabled], .wn-select[disabled] {
|
||||
background: var(--paper-2); color: var(--fg-3); cursor: not-allowed;
|
||||
}
|
||||
.wn-textarea { resize: vertical; min-height: 96px; font-family: var(--ff-sans); }
|
||||
.wn-select {
|
||||
appearance: none; -webkit-appearance: none;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%235C5C5C' stroke-width='1.5'><path d='M1 1l4 4 4-4'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.wn-input--error, .wn-textarea--error, .wn-select--error {
|
||||
border-color: var(--ink); border-bottom-width: 2px;
|
||||
}
|
||||
.wn-form-help { font: 400 11px var(--ff-mono); color: var(--fg-3); margin-top: 6px; display: block; }
|
||||
.wn-form-error { font: 400 11px var(--ff-mono); color: var(--ink); margin-top: 6px; display: block; }
|
||||
|
||||
/* Search input — extracted from TopNav, also usable standalone */
|
||||
.wn-search {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: 1px solid var(--border);
|
||||
padding: 6px 10px;
|
||||
border-radius: var(--r-1);
|
||||
background: var(--paper);
|
||||
color: var(--fg-3);
|
||||
font: 400 12px var(--ff-mono);
|
||||
min-width: 200px;
|
||||
transition: border-color 120ms ease;
|
||||
}
|
||||
.wn-search:focus-within { border-color: var(--ink); }
|
||||
.wn-search input {
|
||||
border: 0; outline: 0; background: none; flex: 1;
|
||||
font: inherit; color: var(--fg-1); padding: 0;
|
||||
}
|
||||
.wn-search input::placeholder { color: var(--ink-5); }
|
||||
.wn-search__kbd {
|
||||
padding: 1px 5px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
font-size: 10px;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
|
||||
/* ====== Breadcrumb ====== */
|
||||
.wn-breadcrumb {
|
||||
display: flex; flex-wrap: wrap; align-items: center;
|
||||
gap: 6px;
|
||||
font: 400 12px/1.5 var(--ff-mono);
|
||||
color: var(--fg-3);
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
.wn-breadcrumb a {
|
||||
color: var(--fg-2);
|
||||
text-decoration: none;
|
||||
padding: 2px 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border-color 120ms ease, color 120ms ease;
|
||||
}
|
||||
.wn-breadcrumb a:hover { color: var(--fg-1); border-bottom-color: var(--border-strong); }
|
||||
.wn-breadcrumb__sep { color: var(--ink-5); user-select: none; }
|
||||
.wn-breadcrumb__current { color: var(--fg-1); }
|
||||
|
||||
/* ====== Modal / Dialog ====== */
|
||||
.wn-modal__backdrop {
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(10, 10, 10, 0.40);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
z-index: 100;
|
||||
padding: var(--sp-5);
|
||||
}
|
||||
.wn-modal__panel {
|
||||
background: var(--paper);
|
||||
border-radius: var(--r-3);
|
||||
box-shadow: var(--shadow-3);
|
||||
max-width: 560px; width: 100%;
|
||||
max-height: calc(100vh - 64px);
|
||||
display: flex; flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wn-modal__head {
|
||||
padding: var(--sp-5) var(--sp-6) var(--sp-4);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
|
||||
}
|
||||
.wn-modal__title { font: 500 20px/1.25 var(--ff-sans); margin: 0; color: var(--fg-1); }
|
||||
.wn-modal__close {
|
||||
background: none; border: 0; cursor: pointer; padding: 4px;
|
||||
color: var(--fg-3); border-radius: var(--r-1);
|
||||
transition: color 120ms ease;
|
||||
}
|
||||
.wn-modal__close:hover { color: var(--fg-1); }
|
||||
.wn-modal__body {
|
||||
padding: var(--sp-5) var(--sp-6);
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
font: 400 15px/1.6 var(--ff-sans);
|
||||
color: var(--fg-1);
|
||||
}
|
||||
.wn-modal__foot {
|
||||
padding: var(--sp-4) var(--sp-6) var(--sp-5);
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex; justify-content: flex-end; gap: var(--sp-2);
|
||||
}
|
||||
|
||||
/* ====== Table ======
|
||||
* Note: shadow-DOM-rendered rows can't be children of a real <table> (the
|
||||
* HTML table model rejects unknown elements between <table> and <tr>). The
|
||||
* <wn-table> component therefore renders a CSS-grid imitation. For real
|
||||
* <table> markup (Django QuerySet rendering, etc.) use these classes
|
||||
* directly on <table>/<tr>/<td> elements — see also the .wn-table--native
|
||||
* variant below.
|
||||
*/
|
||||
|
||||
/* CSS-grid imitation (default <wn-table>) */
|
||||
.wn-table {
|
||||
width: 100%;
|
||||
font-size: var(--fs-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wn-table__thead { border-bottom: 1px solid var(--border); }
|
||||
.wn-table__tbody { display: flex; flex-direction: column; }
|
||||
.wn-table__tr {
|
||||
display: grid;
|
||||
gap: var(--sp-4);
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
align-items: baseline;
|
||||
}
|
||||
.wn-table__tr:last-child { border-bottom: 0; }
|
||||
.wn-table__tr--head { border-bottom: 0; padding: var(--sp-3) var(--sp-4); }
|
||||
.wn-table__th {
|
||||
font: 500 11px/1.2 var(--ff-mono);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
.wn-table__td {
|
||||
color: var(--fg-1);
|
||||
line-height: 1.5;
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
.wn-table--compact .wn-table__tr { padding: var(--sp-2) var(--sp-3); }
|
||||
.wn-table__cell--mono { font-family: var(--ff-mono); color: var(--fg-2); font-size: 12px; }
|
||||
.wn-table__cell--meta { color: var(--fg-3); font: 400 12px var(--ff-mono); }
|
||||
.wn-table__cell--right { text-align: right; }
|
||||
|
||||
/* Native <table> variant — for Django QuerySet rendering etc. */
|
||||
.wn-table--native {
|
||||
border-collapse: collapse;
|
||||
display: table;
|
||||
}
|
||||
.wn-table--native thead th {
|
||||
text-align: left;
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font: 500 11px/1.2 var(--ff-mono);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
.wn-table--native tbody td {
|
||||
padding: var(--sp-4);
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
vertical-align: top;
|
||||
color: var(--fg-1);
|
||||
font-size: var(--fs-sm);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.wn-table--native tbody tr:hover { background: var(--paper-2); }
|
||||
.wn-table--native tbody tr:last-child td { border-bottom: 0; }
|
||||
|
||||
/* ====== Banner / Toast (success / info / warn) ====== */
|
||||
.wn-banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--paper);
|
||||
border-radius: var(--r-2);
|
||||
font: 400 14px/1.5 var(--ff-sans);
|
||||
color: var(--fg-1);
|
||||
position: relative;
|
||||
}
|
||||
.wn-banner__icon { color: var(--fg-2); flex: none; padding-top: 2px; }
|
||||
.wn-banner__body { flex: 1; }
|
||||
.wn-banner__title {
|
||||
font: 500 11px/1.2 var(--ff-mono);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
.wn-banner__dismiss {
|
||||
background: none; border: 0; cursor: pointer;
|
||||
color: var(--fg-3); padding: 4px;
|
||||
}
|
||||
.wn-banner__dismiss:hover { color: var(--fg-1); }
|
||||
.wn-banner--success { border-left: 2px solid var(--ink); }
|
||||
.wn-banner--warn { border-left: 2px solid var(--hi-2); background: #FFFCEB; }
|
||||
.wn-banner--error { border-left: 2px solid var(--ink); background: var(--paper); }
|
||||
.wn-banner--info { border-left: 2px solid var(--border-strong); }
|
||||
|
||||
.wn-toast-region {
|
||||
position: fixed;
|
||||
bottom: var(--sp-5); right: var(--sp-5);
|
||||
display: flex; flex-direction: column; gap: var(--sp-2);
|
||||
z-index: 200;
|
||||
max-width: 380px;
|
||||
}
|
||||
.wn-toast { box-shadow: var(--shadow-3); }
|
||||
|
||||
/* ====== Empty state ====== */
|
||||
.wn-empty {
|
||||
border: 1px dashed var(--border-strong);
|
||||
border-radius: var(--r-2);
|
||||
padding: var(--sp-7);
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
gap: var(--sp-2);
|
||||
text-align: center;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
.wn-empty__icon { color: var(--fg-3); margin-bottom: var(--sp-2); }
|
||||
.wn-empty__title { font: 500 14px var(--ff-sans); color: var(--fg-2); margin: 0; }
|
||||
.wn-empty__body { font: 400 13px/1.5 var(--ff-sans); color: var(--fg-3); max-width: 40ch; margin: 0; }
|
||||
.wn-empty__cta { margin-top: var(--sp-2); }
|
||||
|
||||
/* ====== Top navigation ====== */
|
||||
.wn-topnav {
|
||||
height: 56px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex; align-items: center;
|
||||
gap: var(--sp-6);
|
||||
padding: 0 var(--sp-5);
|
||||
position: sticky; top: 0; z-index: 10;
|
||||
}
|
||||
.wn-topnav__brand { display: flex; align-items: center; gap: 10px; font: 500 14px var(--ff-sans); }
|
||||
.wn-topnav__brand img { width: 22px; height: 22px; }
|
||||
.wn-topnav__brand-slug { font-family: var(--ff-mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.04em; }
|
||||
.wn-topnav__links { display: flex; gap: 22px; }
|
||||
.wn-topnav__link {
|
||||
font: 500 13px var(--ff-sans);
|
||||
color: var(--fg-2);
|
||||
text-decoration: none;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: color 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
.wn-topnav__link:hover { color: var(--fg-1); }
|
||||
.wn-topnav__link--active { color: var(--fg-1); border-bottom-color: var(--ink); }
|
||||
.wn-topnav__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
|
||||
|
||||
/* ====== Sidebar ====== */
|
||||
.wn-sidebar {
|
||||
width: 240px;
|
||||
flex: none;
|
||||
background: var(--paper-2);
|
||||
border-right: 1px solid var(--border);
|
||||
padding: var(--sp-5) var(--sp-4);
|
||||
display: flex; flex-direction: column; gap: var(--sp-5);
|
||||
height: calc(100vh - 56px);
|
||||
position: sticky; top: 56px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.wn-sidebar__group { display: flex; flex-direction: column; gap: 8px; }
|
||||
.wn-sidebar__group-label { padding-left: 12px; }
|
||||
.wn-sidebar__item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
color: var(--fg-2);
|
||||
font: 500 13px var(--ff-sans);
|
||||
cursor: pointer; text-decoration: none;
|
||||
transition: background 120ms ease, color 120ms ease;
|
||||
}
|
||||
.wn-sidebar__item:hover { color: var(--fg-1); }
|
||||
.wn-sidebar__item--active {
|
||||
color: var(--fg-1); background: var(--paper);
|
||||
box-shadow: 0 0 0 1px var(--border) inset;
|
||||
}
|
||||
.wn-sidebar__item--doc { font-family: var(--ff-mono); font-size: 12px; }
|
||||
.wn-sidebar__count { margin-left: auto; font: 400 11px var(--ff-mono); color: var(--fg-3); }
|
||||
.wn-sidebar__footer { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
|
||||
.wn-sidebar__activation {
|
||||
display: flex; align-items: center; gap: 8px; padding: 6px 12px;
|
||||
font: 500 11px var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase;
|
||||
color: var(--fg-2);
|
||||
}
|
||||
.wn-sidebar__activation-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--hi-2); }
|
||||
|
||||
/* ====== Page header ====== */
|
||||
.wn-page-header {
|
||||
margin-bottom: var(--sp-6);
|
||||
display: flex; flex-direction: column; gap: 8px;
|
||||
}
|
||||
.wn-page-header__row { display: flex; align-items: flex-end; gap: var(--sp-5); }
|
||||
.wn-page-header__title {
|
||||
font: 500 32px/1.15 var(--ff-sans);
|
||||
letter-spacing: -0.015em;
|
||||
margin: 0; flex: 1; color: var(--fg-1);
|
||||
}
|
||||
.wn-page-header__actions { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
.wn-page-header__lede {
|
||||
font: 400 16px/1.55 var(--ff-sans);
|
||||
color: var(--fg-2);
|
||||
margin: 0;
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
/* ====== Pipeline ====== */
|
||||
.wn-pipeline {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 0;
|
||||
position: relative;
|
||||
margin: 0 0 var(--sp-6);
|
||||
}
|
||||
.wn-pipeline__stage {
|
||||
padding: 10px 12px 14px;
|
||||
border-top: 2px solid var(--border);
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
position: relative;
|
||||
}
|
||||
.wn-pipeline__stage--done { border-top-color: var(--ink); }
|
||||
.wn-pipeline__stage--active { border-top-color: var(--hi-2); }
|
||||
.wn-pipeline__num {
|
||||
font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
.wn-pipeline__stage--done .wn-pipeline__num,
|
||||
.wn-pipeline__stage--active .wn-pipeline__num { color: var(--fg-1); }
|
||||
.wn-pipeline__name { font: 500 14px/1.25 var(--ff-sans); color: var(--fg-1); }
|
||||
.wn-pipeline__stage--pending .wn-pipeline__name { color: var(--fg-3); }
|
||||
.wn-pipeline__meta { font: 400 11px/1.35 var(--ff-mono); color: var(--fg-3); }
|
||||
.wn-pipeline__arrow {
|
||||
position: absolute; top: -8px; right: -7px;
|
||||
font: 400 14px var(--ff-mono); color: var(--ink-5);
|
||||
}
|
||||
.wn-pipeline__stage--done .wn-pipeline__arrow,
|
||||
.wn-pipeline__stage--active .wn-pipeline__arrow { color: var(--ink); }
|
||||
|
||||
/* ====== Prototype card (combined card variant) ====== */
|
||||
.wn-prototype-card { /* extends .wn-card */ }
|
||||
.wn-prototype-card__qrow {
|
||||
display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px;
|
||||
font-size: 13px; color: var(--fg-1);
|
||||
}
|
||||
.wn-prototype-card__qkey {
|
||||
font: 500 11px/1.5 var(--ff-mono);
|
||||
letter-spacing: 0.06em; text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
.wn-prototype-card__qval { line-height: 1.45; }
|
||||
|
||||
/* ====== Layout helpers ====== */
|
||||
.wn-main { padding: 40px 48px 80px; max-width: 1180px; }
|
||||
.wn-app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
|
||||
`;
|
||||
|
||||
let _sheet = null;
|
||||
export function getSharedSheet() {
|
||||
if (!_sheet) {
|
||||
_sheet = new CSSStyleSheet();
|
||||
_sheet.replaceSync(SHARED_CSS);
|
||||
}
|
||||
return _sheet;
|
||||
}
|
||||
164
src/elements/atoms.js
Normal file
164
src/elements/atoms.js
Normal file
@@ -0,0 +1,164 @@
|
||||
/* =============================================================
|
||||
* @whynot/design — atoms.js
|
||||
* ------------------------------------------------------------
|
||||
* <wn-button>, <wn-tag>, <wn-eyebrow>, <wn-stamp>,
|
||||
* <wn-stage-dot>, <wn-phase-dot>, <wn-icon>
|
||||
*
|
||||
* Shadow-DOM components. Each adopts the shared component
|
||||
* stylesheet so utility classes inside the shadow root work.
|
||||
* Token CSS variables cascade through shadow boundaries
|
||||
* because they're inherited properties.
|
||||
* ============================================================= */
|
||||
|
||||
import { LitElement, html, nothing } from "lit";
|
||||
import { getSharedSheet } from "./_styles.js";
|
||||
import { ICON_PATHS } from "./icons.js";
|
||||
|
||||
class WnBase extends LitElement {
|
||||
static styles = [];
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
// Adopt the shared sheet on first connect, after super() has built the shadow root.
|
||||
const root = this.shadowRoot;
|
||||
if (root && !root.adoptedStyleSheets.includes(getSharedSheet())) {
|
||||
root.adoptedStyleSheets = [...root.adoptedStyleSheets, getSharedSheet()];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-button> ---------- */
|
||||
export class WnButton extends WnBase {
|
||||
static properties = {
|
||||
variant: { type: String, reflect: true },
|
||||
size: { type: String, reflect: true },
|
||||
icon: { type: String },
|
||||
iconEnd: { type: String, attribute: "icon-end" },
|
||||
type: { type: String },
|
||||
disabled: { type: Boolean, reflect: true },
|
||||
href: { type: String },
|
||||
};
|
||||
constructor() {
|
||||
super();
|
||||
this.variant = "secondary";
|
||||
this.size = "md";
|
||||
this.type = "button";
|
||||
this.disabled = false;
|
||||
}
|
||||
render() {
|
||||
const cls = [
|
||||
"wn-btn",
|
||||
this.variant && this.variant !== "secondary" ? `wn-btn--${this.variant}` : "",
|
||||
this.size === "sm" ? "wn-btn--sm" : this.size === "lg" ? "wn-btn--lg" : "",
|
||||
].filter(Boolean).join(" ");
|
||||
const iconStart = this.icon
|
||||
? html`<wn-icon name=${this.icon} size="sm" class="wn-btn__icon"></wn-icon>`
|
||||
: nothing;
|
||||
const iconEnd = this.iconEnd
|
||||
? html`<wn-icon name=${this.iconEnd} size="sm" class="wn-btn__icon"></wn-icon>`
|
||||
: nothing;
|
||||
if (this.href) {
|
||||
return html`<a class=${cls} href=${this.href} part="button"
|
||||
aria-disabled=${this.disabled ? "true" : "false"}>${iconStart}<slot></slot>${iconEnd}</a>`;
|
||||
}
|
||||
return html`<button class=${cls} part="button"
|
||||
type=${this.type} ?disabled=${this.disabled}>${iconStart}<slot></slot>${iconEnd}</button>`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-tag> ---------- */
|
||||
export class WnTag extends WnBase {
|
||||
static properties = {
|
||||
active: { type: Boolean, reflect: true },
|
||||
draft: { type: Boolean, reflect: true },
|
||||
};
|
||||
render() {
|
||||
const cls = ["wn-tag",
|
||||
this.active ? "wn-tag--active" : "",
|
||||
this.draft ? "wn-tag--draft" : "",
|
||||
].filter(Boolean).join(" ");
|
||||
return html`<span class=${cls} part="tag"><slot></slot></span>`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-eyebrow> ---------- */
|
||||
export class WnEyebrow extends WnBase {
|
||||
static properties = { strong: { type: Boolean, reflect: true } };
|
||||
render() {
|
||||
const cls = "wn-eyebrow" + (this.strong ? " wn-eyebrow--strong" : "");
|
||||
return html`<span class=${cls} part="eyebrow"><slot></slot></span>`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-stamp> ---------- */
|
||||
export class WnStamp extends WnBase {
|
||||
render() { return html`<span class="wn-stamp" part="stamp"><slot></slot></span>`; }
|
||||
}
|
||||
|
||||
/* ---------- <wn-stage-dot> ---------- */
|
||||
export class WnStageDot extends WnBase {
|
||||
static properties = {
|
||||
level: { type: String, reflect: true },
|
||||
label: { type: String },
|
||||
};
|
||||
constructor() { super(); this.level = "S2"; }
|
||||
render() {
|
||||
const lvl = String(this.level || "S2").toLowerCase();
|
||||
const cls = `wn-dot wn-stage-dot wn-stage-dot--${lvl}`;
|
||||
return html`
|
||||
<span class=${cls} part="root">
|
||||
<span class="wn-dot__bullet"></span>
|
||||
<slot>${this.label || this.level}</slot>
|
||||
</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-phase-dot> ---------- */
|
||||
export class WnPhaseDot extends WnBase {
|
||||
static properties = {
|
||||
state: { type: String, reflect: true },
|
||||
num: { type: String, reflect: true },
|
||||
};
|
||||
constructor() { super(); this.state = "todo"; this.num = ""; }
|
||||
render() {
|
||||
const cls = `wn-phase-dot wn-phase-dot--${this.state}`;
|
||||
const glyph = this.state === "done" ? "✓" : this.num;
|
||||
return html`
|
||||
<span class=${cls} part="root">
|
||||
<span class="wn-phase-dot__bullet">${glyph}</span>
|
||||
<slot></slot>
|
||||
</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-icon> ---------- */
|
||||
export class WnIcon extends WnBase {
|
||||
static properties = {
|
||||
name: { type: String, reflect: true },
|
||||
size: { type: String, reflect: true },
|
||||
};
|
||||
constructor() { super(); this.size = "md"; }
|
||||
render() {
|
||||
const path = ICON_PATHS[this.name];
|
||||
const cls = `wn-icon wn-icon--${this.size || "md"}`;
|
||||
if (!path) {
|
||||
return html`<svg class=${cls} viewBox="0 0 24 24" aria-hidden="true" part="svg">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" fill="none" stroke="currentColor"/>
|
||||
</svg>`;
|
||||
}
|
||||
return html`<svg class=${cls} viewBox="0 0 24 24" aria-hidden="true" part="svg">${
|
||||
path.map(d => html`<path d=${d}></path>`)
|
||||
}</svg>`;
|
||||
}
|
||||
}
|
||||
|
||||
export function defineAtoms() {
|
||||
if (!customElements.get("wn-button")) customElements.define("wn-button", WnButton);
|
||||
if (!customElements.get("wn-tag")) customElements.define("wn-tag", WnTag);
|
||||
if (!customElements.get("wn-eyebrow")) customElements.define("wn-eyebrow", WnEyebrow);
|
||||
if (!customElements.get("wn-stamp")) customElements.define("wn-stamp", WnStamp);
|
||||
if (!customElements.get("wn-stage-dot")) customElements.define("wn-stage-dot", WnStageDot);
|
||||
if (!customElements.get("wn-phase-dot")) customElements.define("wn-phase-dot", WnPhaseDot);
|
||||
if (!customElements.get("wn-icon")) customElements.define("wn-icon", WnIcon);
|
||||
}
|
||||
|
||||
export { WnBase };
|
||||
206
src/elements/chrome.js
Normal file
206
src/elements/chrome.js
Normal file
@@ -0,0 +1,206 @@
|
||||
/* =============================================================
|
||||
* @whynot/design — chrome.js
|
||||
* ------------------------------------------------------------
|
||||
* <wn-top-nav>, <wn-sidebar> / <wn-sidebar-group> /
|
||||
* <wn-sidebar-item>, <wn-page-header>, <wn-pipeline>,
|
||||
* <wn-prototype-card>
|
||||
* ============================================================= */
|
||||
|
||||
import { LitElement, html, nothing } from "lit";
|
||||
import { WnBase } from "./atoms.js";
|
||||
|
||||
/* ---------- <wn-top-nav> ---------- */
|
||||
export class WnTopNav extends WnBase {
|
||||
static properties = {
|
||||
logoSrc: { type: String, attribute: "logo-src" },
|
||||
brand: { type: String },
|
||||
slug: { type: String },
|
||||
};
|
||||
constructor() { super(); this.brand = "whynot"; this.slug = "control"; }
|
||||
render() {
|
||||
return html`
|
||||
<nav class="wn-topnav" part="nav">
|
||||
<div class="wn-topnav__brand">
|
||||
${this.logoSrc ? html`<img src=${this.logoSrc} alt="">` : nothing}
|
||||
<span>${this.brand}</span>
|
||||
${this.slug ? html`<span class="wn-topnav__brand-slug">/ ${this.slug}</span>` : nothing}
|
||||
</div>
|
||||
<div class="wn-topnav__links"><slot name="links"></slot></div>
|
||||
<div class="wn-topnav__right"><slot name="right"></slot></div>
|
||||
</nav>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-sidebar> ---------- */
|
||||
export class WnSidebar extends WnBase {
|
||||
static properties = { activation: { type: String } };
|
||||
render() {
|
||||
return html`
|
||||
<aside class="wn-sidebar" part="sidebar">
|
||||
<slot></slot>
|
||||
${this.activation
|
||||
? html`<div class="wn-sidebar__footer">
|
||||
<div class="wn-sidebar__activation">
|
||||
<span class="wn-sidebar__activation-dot"></span>
|
||||
<span>${this.activation}</span>
|
||||
</div>
|
||||
</div>`
|
||||
: nothing}
|
||||
</aside>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
export class WnSidebarGroup extends WnBase {
|
||||
static properties = { label: { type: String } };
|
||||
render() {
|
||||
return html`
|
||||
<div class="wn-sidebar__group" part="group">
|
||||
${this.label ? html`<wn-eyebrow class="wn-sidebar__group-label">${this.label}</wn-eyebrow>` : nothing}
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
export class WnSidebarItem extends WnBase {
|
||||
static properties = {
|
||||
href: { type: String },
|
||||
icon: { type: String },
|
||||
active: { type: Boolean, reflect: true },
|
||||
count: { type: String },
|
||||
variant: { type: String, reflect: true },
|
||||
};
|
||||
render() {
|
||||
const cls = ["wn-sidebar__item",
|
||||
this.active ? "wn-sidebar__item--active" : "",
|
||||
this.variant === "doc" ? "wn-sidebar__item--doc" : "",
|
||||
].filter(Boolean).join(" ");
|
||||
const inner = html`
|
||||
${this.icon ? html`<wn-icon name=${this.icon} size=${this.variant === "doc" ? "sm" : "md"}></wn-icon>` : nothing}
|
||||
<slot></slot>
|
||||
${this.count ? html`<span class="wn-sidebar__count">${this.count}</span>` : nothing}
|
||||
`;
|
||||
return this.href
|
||||
? html`<a class=${cls} href=${this.href} part="item">${inner}</a>`
|
||||
: html`<div class=${cls} part="item">${inner}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-page-header> ---------- */
|
||||
export class WnPageHeader extends WnBase {
|
||||
static properties = {
|
||||
eyebrow: { type: String },
|
||||
title: { type: String },
|
||||
lede: { type: String },
|
||||
hasActions: { state: true },
|
||||
};
|
||||
constructor() { super(); this.hasActions = false; }
|
||||
_onSlot() { this.hasActions = !!this.querySelector('[slot="actions"]'); }
|
||||
render() {
|
||||
return html`
|
||||
<header class="wn-page-header" part="root">
|
||||
${this.eyebrow ? html`<wn-eyebrow>${this.eyebrow}</wn-eyebrow>` : nothing}
|
||||
<slot name="eyebrow"></slot>
|
||||
<div class="wn-page-header__row">
|
||||
<h1 class="wn-page-header__title">${this.title}<slot name="title"></slot></h1>
|
||||
<div class="wn-page-header__actions" ?hidden=${!this.hasActions}>
|
||||
<slot name="actions" @slotchange=${this._onSlot}></slot>
|
||||
</div>
|
||||
</div>
|
||||
${this.lede ? html`<p class="wn-page-header__lede">${this.lede}</p>` : nothing}
|
||||
<slot name="lede"></slot>
|
||||
</header>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-pipeline> ---------- */
|
||||
export class WnPipeline extends WnBase {
|
||||
static properties = {
|
||||
stages: { type: Array },
|
||||
activeIdx: { type: Number, attribute: "active-idx" },
|
||||
};
|
||||
constructor() {
|
||||
super();
|
||||
this.stages = [
|
||||
{ num: "Stage 0", name: "Raw idea", meta: "inbox/" },
|
||||
{ num: "Stage 1", name: "Triage", meta: "" },
|
||||
{ num: "Stage 2", name: "Prototype card", meta: "prototypes/" },
|
||||
{ num: "Stage 3", name: "Experiment", meta: "" },
|
||||
{ num: "Stage 4", name: "Signal review", meta: "" },
|
||||
];
|
||||
this.activeIdx = 0;
|
||||
}
|
||||
render() {
|
||||
return html`
|
||||
<div class="wn-pipeline" part="root">
|
||||
${this.stages.map((s, i) => {
|
||||
const state = i < this.activeIdx ? "done" : i === this.activeIdx ? "active" : "pending";
|
||||
const cls = `wn-pipeline__stage wn-pipeline__stage--${state}`;
|
||||
return html`
|
||||
<div class=${cls}>
|
||||
<span class="wn-pipeline__num">${s.num}</span>
|
||||
<span class="wn-pipeline__name">${s.name}</span>
|
||||
${s.meta ? html`<span class="wn-pipeline__meta">${s.meta}</span>` : nothing}
|
||||
${i > 0 ? html`<span class="wn-pipeline__arrow">→</span>` : nothing}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-prototype-card> ---------- */
|
||||
export class WnPrototypeCard extends WnBase {
|
||||
static properties = {
|
||||
cardId: { type: String, attribute: "card-id", reflect: true },
|
||||
signal: { type: String, reflect: true },
|
||||
stageLabel: { type: String, attribute: "stage-label" },
|
||||
href: { type: String },
|
||||
};
|
||||
constructor() { super(); this.signal = "S1"; }
|
||||
_onClick() {
|
||||
if (this.href) window.location.href = this.href;
|
||||
this.dispatchEvent(new CustomEvent("wn-open", { detail: { id: this.cardId }, bubbles: true, composed: true }));
|
||||
}
|
||||
render() {
|
||||
const clickable = !!this.href;
|
||||
const cls = "wn-card wn-prototype-card" + (clickable ? " wn-card--clickable" : "");
|
||||
return html`
|
||||
<article class=${cls}
|
||||
role=${clickable ? "button" : nothing}
|
||||
tabindex=${clickable ? "0" : nothing}
|
||||
@click=${clickable ? this._onClick : nothing}
|
||||
part="card">
|
||||
<header class="wn-card__head">
|
||||
<wn-eyebrow>${this.cardId ? this.cardId + " · " : ""}Prototype</wn-eyebrow>
|
||||
<wn-stage-dot level=${this.signal}>${this.stageLabel || this.signal}</wn-stage-dot>
|
||||
</header>
|
||||
<h3 class="wn-card__title"><slot name="pitch"></slot></h3>
|
||||
<div class="wn-prototype-card__qrow">
|
||||
<span class="wn-prototype-card__qkey">Learning q.</span>
|
||||
<span class="wn-prototype-card__qval"><slot name="learning"></slot></span>
|
||||
<span class="wn-prototype-card__qkey">Smallest test</span>
|
||||
<span class="wn-prototype-card__qval"><slot name="test"></slot></span>
|
||||
</div>
|
||||
<footer class="wn-card__foot">
|
||||
<span><slot name="target"></slot></span>
|
||||
<span>${this.signal} signal</span>
|
||||
</footer>
|
||||
</article>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
export function defineChrome() {
|
||||
if (!customElements.get("wn-top-nav")) customElements.define("wn-top-nav", WnTopNav);
|
||||
if (!customElements.get("wn-sidebar")) customElements.define("wn-sidebar", WnSidebar);
|
||||
if (!customElements.get("wn-sidebar-group")) customElements.define("wn-sidebar-group", WnSidebarGroup);
|
||||
if (!customElements.get("wn-sidebar-item")) customElements.define("wn-sidebar-item", WnSidebarItem);
|
||||
if (!customElements.get("wn-page-header")) customElements.define("wn-page-header", WnPageHeader);
|
||||
if (!customElements.get("wn-pipeline")) customElements.define("wn-pipeline", WnPipeline);
|
||||
if (!customElements.get("wn-prototype-card")) customElements.define("wn-prototype-card", WnPrototypeCard);
|
||||
}
|
||||
205
src/elements/form.js
Normal file
205
src/elements/form.js
Normal file
@@ -0,0 +1,205 @@
|
||||
/* =============================================================
|
||||
* @whynot/design — form.js
|
||||
* ------------------------------------------------------------
|
||||
* <wn-input>, <wn-textarea>, <wn-select>,
|
||||
* <wn-search-input>, <wn-field-row>
|
||||
*
|
||||
* Each wraps a real native element. Form participation works
|
||||
* because the native input is part of the light DOM via the
|
||||
* `name` attribute being copied through; for richer integration
|
||||
* use ElementInternals (deferred — see CHANGELOG).
|
||||
* ============================================================= */
|
||||
|
||||
import { LitElement, html, nothing } from "lit";
|
||||
import { WnBase } from "./atoms.js";
|
||||
|
||||
/* ---------- <wn-input> ---------- */
|
||||
export class WnInput extends WnBase {
|
||||
static properties = {
|
||||
name: { type: String, reflect: true },
|
||||
type: { type: String, reflect: true },
|
||||
value: { type: String },
|
||||
placeholder: { type: String },
|
||||
required: { type: Boolean, reflect: true },
|
||||
disabled: { type: Boolean, reflect: true },
|
||||
readonly: { type: Boolean, reflect: true },
|
||||
autocomplete:{ type: String },
|
||||
error: { type: Boolean, reflect: true },
|
||||
help: { type: String },
|
||||
errorText: { type: String, attribute: "error-text" },
|
||||
};
|
||||
constructor() {
|
||||
super();
|
||||
this.type = "text";
|
||||
this.value = "";
|
||||
this.required = false;
|
||||
this.disabled = false;
|
||||
this.readonly = false;
|
||||
this.error = false;
|
||||
}
|
||||
_onInput(e) {
|
||||
this.value = e.target.value;
|
||||
this.dispatchEvent(new CustomEvent("wn-input", { detail: { value: this.value }, bubbles: true, composed: true }));
|
||||
}
|
||||
render() {
|
||||
const cls = "wn-input" + (this.error ? " wn-input--error" : "");
|
||||
return html`
|
||||
<input class=${cls}
|
||||
part="input"
|
||||
name=${this.name ?? nothing}
|
||||
type=${this.type}
|
||||
.value=${this.value}
|
||||
placeholder=${this.placeholder ?? nothing}
|
||||
?required=${this.required}
|
||||
?disabled=${this.disabled}
|
||||
?readonly=${this.readonly}
|
||||
autocomplete=${this.autocomplete ?? nothing}
|
||||
@input=${this._onInput}>
|
||||
${this.error && this.errorText
|
||||
? html`<span class="wn-form-error">${this.errorText}</span>`
|
||||
: this.help
|
||||
? html`<span class="wn-form-help">${this.help}</span>`
|
||||
: nothing}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-textarea> ---------- */
|
||||
export class WnTextarea extends WnBase {
|
||||
static properties = {
|
||||
name: { type: String, reflect: true },
|
||||
value: { type: String },
|
||||
placeholder: { type: String },
|
||||
rows: { type: Number },
|
||||
required: { type: Boolean, reflect: true },
|
||||
disabled: { type: Boolean, reflect: true },
|
||||
error: { type: Boolean, reflect: true },
|
||||
help: { type: String },
|
||||
errorText: { type: String, attribute: "error-text" },
|
||||
};
|
||||
constructor() { super(); this.value = ""; this.rows = 4; }
|
||||
_onInput(e) {
|
||||
this.value = e.target.value;
|
||||
this.dispatchEvent(new CustomEvent("wn-input", { detail: { value: this.value }, bubbles: true, composed: true }));
|
||||
}
|
||||
render() {
|
||||
const cls = "wn-textarea" + (this.error ? " wn-textarea--error" : "");
|
||||
return html`
|
||||
<textarea class=${cls}
|
||||
part="textarea"
|
||||
name=${this.name ?? nothing}
|
||||
rows=${this.rows}
|
||||
placeholder=${this.placeholder ?? nothing}
|
||||
?required=${this.required}
|
||||
?disabled=${this.disabled}
|
||||
@input=${this._onInput}
|
||||
.value=${this.value}></textarea>
|
||||
${this.error && this.errorText
|
||||
? html`<span class="wn-form-error">${this.errorText}</span>`
|
||||
: this.help
|
||||
? html`<span class="wn-form-help">${this.help}</span>`
|
||||
: nothing}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-select> ----------
|
||||
* Slot <option> elements; they're cloned into the inner <select>. */
|
||||
export class WnSelect extends WnBase {
|
||||
static properties = {
|
||||
name: { type: String, reflect: true },
|
||||
value: { type: String },
|
||||
required: { type: Boolean, reflect: true },
|
||||
disabled: { type: Boolean, reflect: true },
|
||||
error: { type: Boolean, reflect: true },
|
||||
help: { type: String },
|
||||
};
|
||||
_onSlotChange(e) {
|
||||
const slot = e.target;
|
||||
const select = this.shadowRoot?.querySelector("select.wn-select");
|
||||
if (!select) return;
|
||||
const options = slot.assignedElements({ flatten: true }).filter(el => el.tagName === "OPTION");
|
||||
select.innerHTML = "";
|
||||
for (const opt of options) select.appendChild(opt.cloneNode(true));
|
||||
if (this.value != null) select.value = this.value;
|
||||
}
|
||||
_onChange(e) {
|
||||
this.value = e.target.value;
|
||||
this.dispatchEvent(new CustomEvent("wn-change", { detail: { value: this.value }, bubbles: true, composed: true }));
|
||||
}
|
||||
render() {
|
||||
const cls = "wn-select" + (this.error ? " wn-select--error" : "");
|
||||
return html`
|
||||
<select class=${cls}
|
||||
part="select"
|
||||
name=${this.name ?? nothing}
|
||||
?required=${this.required}
|
||||
?disabled=${this.disabled}
|
||||
@change=${this._onChange}></select>
|
||||
<slot @slotchange=${this._onSlotChange} style="display:none"></slot>
|
||||
${this.help ? html`<span class="wn-form-help">${this.help}</span>` : nothing}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-search-input> ---------- */
|
||||
export class WnSearchInput extends WnBase {
|
||||
static properties = {
|
||||
placeholder: { type: String },
|
||||
kbd: { type: String },
|
||||
value: { type: String },
|
||||
name: { type: String, reflect: true },
|
||||
};
|
||||
constructor() { super(); this.placeholder = "Search…"; this.kbd = "⌘ K"; this.value = ""; }
|
||||
_onInput(e) {
|
||||
this.value = e.target.value;
|
||||
this.dispatchEvent(new CustomEvent("wn-input", { detail: { value: this.value }, bubbles: true, composed: true }));
|
||||
}
|
||||
render() {
|
||||
return html`
|
||||
<label class="wn-search" part="root">
|
||||
<wn-icon name="search" size="sm"></wn-icon>
|
||||
<input type="search"
|
||||
name=${this.name ?? nothing}
|
||||
.value=${this.value}
|
||||
placeholder=${this.placeholder}
|
||||
@input=${this._onInput}>
|
||||
${this.kbd ? html`<span class="wn-search__kbd">${this.kbd}</span>` : nothing}
|
||||
</label>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-field-row> ---------- */
|
||||
export class WnFieldRow extends WnBase {
|
||||
static properties = {
|
||||
label: { type: String },
|
||||
aside: { type: String },
|
||||
stacked: { type: Boolean, reflect: true },
|
||||
narrow: { type: Boolean, reflect: true },
|
||||
htmlFor: { type: String, attribute: "for" },
|
||||
};
|
||||
render() {
|
||||
const cls = ["wn-field-row",
|
||||
this.stacked ? "wn-field-row--stacked" : "",
|
||||
this.narrow ? "wn-field-row--narrow" : "",
|
||||
].filter(Boolean).join(" ");
|
||||
return html`
|
||||
<div class=${cls} part="root">
|
||||
<label class="wn-field-row__label" for=${this.htmlFor ?? nothing}>${this.label}</label>
|
||||
<div class="wn-field-row__value"><slot></slot></div>
|
||||
${this.aside
|
||||
? html`<div class="wn-field-row__aside">${this.aside}<slot name="aside"></slot></div>`
|
||||
: html`<div class="wn-field-row__aside"><slot name="aside"></slot></div>`}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
export function defineForm() {
|
||||
if (!customElements.get("wn-input")) customElements.define("wn-input", WnInput);
|
||||
if (!customElements.get("wn-textarea")) customElements.define("wn-textarea", WnTextarea);
|
||||
if (!customElements.get("wn-select")) customElements.define("wn-select", WnSelect);
|
||||
if (!customElements.get("wn-search-input")) customElements.define("wn-search-input", WnSearchInput);
|
||||
if (!customElements.get("wn-field-row")) customElements.define("wn-field-row", WnFieldRow);
|
||||
}
|
||||
45
src/elements/icons.js
Normal file
45
src/elements/icons.js
Normal file
@@ -0,0 +1,45 @@
|
||||
/* =============================================================
|
||||
* @whynot/design — icons.js
|
||||
* ------------------------------------------------------------
|
||||
* Inline Lucide-style icon paths (24×24, stroke 1.5, fill none).
|
||||
* Only the icons used by the system ship here; consumers can
|
||||
* extend by importing extras directly from `lucide`.
|
||||
*
|
||||
* Each value is an array of `d` attributes — multi-path icons
|
||||
* are rendered as multiple <path> elements.
|
||||
*
|
||||
* Paths derived from Lucide (ISC). If you need an icon not in
|
||||
* this list, add it here, not in a consuming repo.
|
||||
* ============================================================= */
|
||||
|
||||
/* prettier-ignore */
|
||||
export const ICON_PATHS = {
|
||||
/* Navigation */
|
||||
"inbox": ["M22 12h-6l-2 3h-4l-2-3H2", "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"],
|
||||
"lightbulb": ["M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5", "M9 18h6", "M10 22h4"],
|
||||
"flask-conical": ["M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2", "M6.453 15h11.094", "M8.5 2h7"],
|
||||
"activity": ["M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.5.5 0 0 1-.96 0L9.24 2.18a.5.5 0 0 0-.96 0l-2.35 8.36A2 2 0 0 1 4 12H2"],
|
||||
"users": ["M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", "M22 21v-2a4 4 0 0 0-3-3.87", "M16 3.13a4 4 0 0 1 0 7.75", "M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"],
|
||||
"git-branch": ["M6 3v12", "M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z", "M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z", "M15 6a9 9 0 0 0-9 9"],
|
||||
"check-square": ["M9 11l3 3L22 4", "M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"],
|
||||
"archive": ["M21 8v13H3V8", "M1 3h22v5H1z", "M10 12h4"],
|
||||
"file-text": ["M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z", "M14 2v5h6", "M16 13H8", "M16 17H8", "M10 9H8"],
|
||||
"folder": ["M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"],
|
||||
|
||||
/* Actions / signals */
|
||||
"arrow-right": ["M5 12h14", "M12 5l7 7-7 7"],
|
||||
"arrow-left": ["M19 12H5", "M12 19l-7-7 7-7"],
|
||||
"plus": ["M12 5v14", "M5 12h14"],
|
||||
"x": ["M18 6L6 18", "M6 6l12 12"],
|
||||
"check": ["M20 6 9 17l-5-5"],
|
||||
"search": ["M21 21l-4.34-4.34", "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"],
|
||||
"filter": ["M22 3H2l8 9.46V19l4 2v-8.54L22 3z"],
|
||||
"circle-help": ["M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z", "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", "M12 17h.01"],
|
||||
"circle-alert": ["M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z", "M12 8v4", "M12 16h.01"],
|
||||
"circle-check": ["M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z", "M9 12l2 2 4-4"],
|
||||
"circle-info": ["M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z", "M12 16v-4", "M12 8h.01"],
|
||||
"settings": ["M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z", "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"],
|
||||
"more-horizontal": ["M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z", "M19 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z", "M5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"],
|
||||
"chevron-down": ["M6 9l6 6 6-6"],
|
||||
"chevron-right": ["M9 18l6-6-6-6"],
|
||||
};
|
||||
277
src/elements/layout.js
Normal file
277
src/elements/layout.js
Normal file
@@ -0,0 +1,277 @@
|
||||
/* =============================================================
|
||||
* @whynot/design — layout.js
|
||||
* ------------------------------------------------------------
|
||||
* <wn-card>, <wn-modal>, <wn-table> / <wn-table-row> /
|
||||
* <wn-table-cell>, <wn-banner>, <wn-toast>, <wn-toast-region>,
|
||||
* <wn-empty-state>, <wn-breadcrumb>
|
||||
* ============================================================= */
|
||||
|
||||
import { LitElement, html, nothing } from "lit";
|
||||
import { WnBase } from "./atoms.js";
|
||||
|
||||
/* ---------- <wn-card> ---------- */
|
||||
export class WnCard extends WnBase {
|
||||
static properties = {
|
||||
variant: { type: String, reflect: true },
|
||||
size: { type: String, reflect: true },
|
||||
clickable: { type: Boolean, reflect: true },
|
||||
hasHeader: { state: true },
|
||||
hasFooter: { state: true },
|
||||
};
|
||||
constructor() {
|
||||
super();
|
||||
this.hasHeader = false;
|
||||
this.hasFooter = false;
|
||||
}
|
||||
_onSlotChange() {
|
||||
this.hasHeader = !!this.querySelector('[slot="header"]');
|
||||
this.hasFooter = !!this.querySelector('[slot="footer"]');
|
||||
}
|
||||
render() {
|
||||
const cls = ["wn-card",
|
||||
this.variant && this.variant !== "default" ? `wn-card--${this.variant}` : "",
|
||||
this.size === "sm" ? "wn-card--sm" : this.size === "lg" ? "wn-card--lg" : "",
|
||||
this.clickable ? "wn-card--clickable" : "",
|
||||
].filter(Boolean).join(" ");
|
||||
return html`
|
||||
<div class=${cls}
|
||||
role=${this.clickable ? "button" : nothing}
|
||||
tabindex=${this.clickable ? "0" : nothing}
|
||||
part="card">
|
||||
<header class="wn-card__head" ?hidden=${!this.hasHeader}>
|
||||
<slot name="header" @slotchange=${this._onSlotChange}></slot>
|
||||
</header>
|
||||
<slot @slotchange=${this._onSlotChange}></slot>
|
||||
<footer class="wn-card__foot" ?hidden=${!this.hasFooter}>
|
||||
<slot name="footer" @slotchange=${this._onSlotChange}></slot>
|
||||
</footer>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-modal> ---------- */
|
||||
export class WnModal extends WnBase {
|
||||
static properties = {
|
||||
open: { type: Boolean, reflect: true },
|
||||
title: { type: String },
|
||||
dismissible: { type: Boolean, reflect: true },
|
||||
hasFooter: { state: true },
|
||||
};
|
||||
constructor() {
|
||||
super();
|
||||
this.open = false;
|
||||
this.dismissible = true;
|
||||
this.hasFooter = false;
|
||||
}
|
||||
_onSlotChange() {
|
||||
this.hasFooter = !!this.querySelector('[slot="footer"]');
|
||||
}
|
||||
_onBackdrop(e) {
|
||||
if (e.target === e.currentTarget && this.dismissible) this._dismiss();
|
||||
}
|
||||
_dismiss() {
|
||||
this.open = false;
|
||||
this.dispatchEvent(new CustomEvent("wn-dismiss", { bubbles: true, composed: true }));
|
||||
}
|
||||
_bindKey = (e) => {
|
||||
if (e.key === "Escape" && this.dismissible && this.open) this._dismiss();
|
||||
};
|
||||
connectedCallback() { super.connectedCallback(); document.addEventListener("keydown", this._bindKey); }
|
||||
disconnectedCallback() { document.removeEventListener("keydown", this._bindKey); super.disconnectedCallback(); }
|
||||
|
||||
render() {
|
||||
if (!this.open) return nothing;
|
||||
return html`
|
||||
<div class="wn-modal__backdrop" @click=${this._onBackdrop} role="presentation" part="backdrop">
|
||||
<div class="wn-modal__panel" role="dialog" aria-modal="true" aria-label=${this.title ?? nothing} part="panel">
|
||||
<header class="wn-modal__head">
|
||||
<h2 class="wn-modal__title">${this.title}<slot name="title"></slot></h2>
|
||||
${this.dismissible
|
||||
? html`<button class="wn-modal__close" type="button" aria-label="Close" @click=${this._dismiss}>
|
||||
<wn-icon name="x" size="md"></wn-icon>
|
||||
</button>`
|
||||
: nothing}
|
||||
</header>
|
||||
<div class="wn-modal__body"><slot @slotchange=${this._onSlotChange}></slot></div>
|
||||
<footer class="wn-modal__foot" ?hidden=${!this.hasFooter}>
|
||||
<slot name="footer" @slotchange=${this._onSlotChange}></slot>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-table>, <wn-table-row>, <wn-table-cell> ----------
|
||||
* Tables in shadow DOM can't render real <table>/<tr> with slotted rows —
|
||||
* the table model requires the row to be a child of <table>. So these
|
||||
* components use CSS grid + flexbox to imitate a table visually. For real
|
||||
* <table> + Django QuerySet rendering, write raw <table class="wn-table">
|
||||
* markup directly using utility classes.
|
||||
*/
|
||||
export class WnTable extends WnBase {
|
||||
static properties = {
|
||||
columns: { type: Array },
|
||||
compact: { type: Boolean, reflect: true },
|
||||
};
|
||||
constructor() { super(); this.columns = []; }
|
||||
render() {
|
||||
const cols = this.columns || [];
|
||||
const cls = "wn-table" + (this.compact ? " wn-table--compact" : "");
|
||||
return html`
|
||||
<div class=${cls} part="table" role="table">
|
||||
${cols.length
|
||||
? html`<div class="wn-table__thead" role="rowgroup">
|
||||
<div class="wn-table__tr wn-table__tr--head" role="row"
|
||||
style=${`grid-template-columns: ${cols.map(c => (typeof c === "object" && c.width) ? `${c.width}px` : "1fr").join(" ")}`}>
|
||||
${cols.map(c => html`<div class="wn-table__th" role="columnheader">${typeof c === "string" ? c : c.label}</div>`)}
|
||||
</div>
|
||||
</div>`
|
||||
: nothing}
|
||||
<div class="wn-table__tbody" role="rowgroup"
|
||||
style=${cols.length
|
||||
? `--wn-cols: ${cols.map(c => (typeof c === "object" && c.width) ? `${c.width}px` : "1fr").join(" ")}`
|
||||
: nothing}>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
export class WnTableRow extends WnBase {
|
||||
render() {
|
||||
return html`<div class="wn-table__tr" role="row" part="row"
|
||||
style="grid-template-columns: var(--wn-cols, repeat(auto-fit, minmax(80px, 1fr)));">
|
||||
<slot></slot>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
export class WnTableCell extends WnBase {
|
||||
static properties = { variant: { type: String, reflect: true } };
|
||||
render() {
|
||||
const cls = "wn-table__td" + (this.variant ? ` wn-table__cell--${this.variant}` : "");
|
||||
return html`<div class=${cls} role="cell" part="cell"><slot></slot></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-banner> ---------- */
|
||||
export class WnBanner extends WnBase {
|
||||
static properties = {
|
||||
variant: { type: String, reflect: true },
|
||||
title: { type: String },
|
||||
icon: { type: String },
|
||||
dismissible: { type: Boolean, reflect: true },
|
||||
};
|
||||
constructor() { super(); this.variant = "info"; }
|
||||
_dismiss() {
|
||||
this.dispatchEvent(new CustomEvent("wn-dismiss", { bubbles: true, composed: true }));
|
||||
this.remove();
|
||||
}
|
||||
render() {
|
||||
const iconName = this.icon || ({
|
||||
info: "circle-info", success: "circle-check",
|
||||
warn: "circle-alert", error: "circle-alert",
|
||||
}[this.variant]);
|
||||
const cls = `wn-banner wn-banner--${this.variant}`;
|
||||
return html`
|
||||
<div class=${cls} role=${this.variant === "error" || this.variant === "warn" ? "alert" : "status"} part="banner">
|
||||
${iconName ? html`<span class="wn-banner__icon"><wn-icon name=${iconName} size="md"></wn-icon></span>` : nothing}
|
||||
<div class="wn-banner__body">
|
||||
${this.title ? html`<p class="wn-banner__title">${this.title}</p>` : nothing}
|
||||
<slot></slot>
|
||||
</div>
|
||||
${this.dismissible
|
||||
? html`<button class="wn-banner__dismiss" type="button" aria-label="Dismiss" @click=${this._dismiss}>
|
||||
<wn-icon name="x" size="sm"></wn-icon>
|
||||
</button>`
|
||||
: nothing}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-toast> / <wn-toast-region> ---------- */
|
||||
export class WnToast extends WnBanner {
|
||||
constructor() { super(); this.dismissible = true; }
|
||||
render() {
|
||||
const base = super.render();
|
||||
return html`<div class="wn-toast" part="toast">${base}</div>`;
|
||||
}
|
||||
}
|
||||
export class WnToastRegion extends WnBase {
|
||||
render() {
|
||||
return html`<div class="wn-toast-region" role="region" aria-label="Notifications" part="root">
|
||||
<slot></slot>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-empty-state> ---------- */
|
||||
export class WnEmptyState extends WnBase {
|
||||
static properties = {
|
||||
icon: { type: String },
|
||||
title: { type: String },
|
||||
hasCta: { state: true },
|
||||
};
|
||||
constructor() { super(); this.hasCta = false; }
|
||||
_onSlot() { this.hasCta = !!this.querySelector('[slot="cta"]'); }
|
||||
render() {
|
||||
return html`
|
||||
<div class="wn-empty" part="empty">
|
||||
${this.icon ? html`<wn-icon class="wn-empty__icon" name=${this.icon} size="lg"></wn-icon>` : nothing}
|
||||
${this.title ? html`<p class="wn-empty__title">${this.title}</p>` : nothing}
|
||||
<p class="wn-empty__body"><slot @slotchange=${this._onSlot}></slot></p>
|
||||
<div class="wn-empty__cta" ?hidden=${!this.hasCta}>
|
||||
<slot name="cta" @slotchange=${this._onSlot}></slot>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- <wn-breadcrumb> ---------- */
|
||||
export class WnBreadcrumb extends WnBase {
|
||||
_onSlot(e) {
|
||||
const slot = e.target;
|
||||
const items = slot.assignedElements({ flatten: true });
|
||||
// Build the rendered tree: each item + a separator after it.
|
||||
const wrapper = this.shadowRoot?.querySelector('.wn-breadcrumb__list');
|
||||
if (!wrapper) return;
|
||||
wrapper.querySelectorAll('.wn-breadcrumb__sep').forEach(s => s.remove());
|
||||
items.forEach((el, i) => {
|
||||
el.classList.toggle("wn-breadcrumb__current", i === items.length - 1);
|
||||
if (i > 0) {
|
||||
const sep = document.createElement("span");
|
||||
sep.className = "wn-breadcrumb__sep";
|
||||
sep.setAttribute("aria-hidden", "true");
|
||||
sep.textContent = "/";
|
||||
// Use light-DOM-relative insertion: items are still in light DOM,
|
||||
// so DOM-order separators between them belong in light DOM too.
|
||||
el.parentNode.insertBefore(sep, el);
|
||||
}
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return html`
|
||||
<nav class="wn-breadcrumb" aria-label="Breadcrumb" part="root">
|
||||
<span class="wn-breadcrumb__list"><slot @slotchange=${this._onSlot}></slot></span>
|
||||
</nav>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
export function defineLayout() {
|
||||
if (!customElements.get("wn-card")) customElements.define("wn-card", WnCard);
|
||||
if (!customElements.get("wn-modal")) customElements.define("wn-modal", WnModal);
|
||||
if (!customElements.get("wn-table")) customElements.define("wn-table", WnTable);
|
||||
if (!customElements.get("wn-table-row")) customElements.define("wn-table-row", WnTableRow);
|
||||
if (!customElements.get("wn-table-cell")) customElements.define("wn-table-cell", WnTableCell);
|
||||
if (!customElements.get("wn-banner")) customElements.define("wn-banner", WnBanner);
|
||||
if (!customElements.get("wn-toast")) customElements.define("wn-toast", WnToast);
|
||||
if (!customElements.get("wn-toast-region")) customElements.define("wn-toast-region", WnToastRegion);
|
||||
if (!customElements.get("wn-empty-state")) customElements.define("wn-empty-state", WnEmptyState);
|
||||
if (!customElements.get("wn-breadcrumb")) customElements.define("wn-breadcrumb", WnBreadcrumb);
|
||||
}
|
||||
49
src/index.js
49
src/index.js
@@ -1,18 +1,35 @@
|
||||
// @whynot/design — barrel export.
|
||||
//
|
||||
// At A1 there is no build step: consumers import these JSX files directly.
|
||||
// Any modern bundler (Vite, Next.js, Webpack 5 with @babel/preset-react,
|
||||
// esbuild, Bun) handles JSX-in-.jsx out of the box.
|
||||
//
|
||||
// If you need to support a bundler that doesn't, fall back to either
|
||||
// (a) importing from `examples/whynot-control/` as inline <script type="text/babel">
|
||||
// or (b) adding a build step here when you next bump minor.
|
||||
/* =============================================================
|
||||
* @whynot/design — entry point
|
||||
* ------------------------------------------------------------
|
||||
* Side-effect import that registers every <wn-*> custom element.
|
||||
*
|
||||
* import "@whynot/design";
|
||||
*
|
||||
* If you only need a subset, import the per-group files instead:
|
||||
*
|
||||
* import "@whynot/design/atoms";
|
||||
* import "@whynot/design/form";
|
||||
* import "@whynot/design/layout";
|
||||
* import "@whynot/design/chrome";
|
||||
*
|
||||
* CSS is imported separately:
|
||||
*
|
||||
* import "@whynot/design/styles/colors_and_type.css";
|
||||
* import "@whynot/design/styles/components.css";
|
||||
* ============================================================= */
|
||||
|
||||
export * from "./components/Atoms.jsx";
|
||||
export * from "./components/Chrome.jsx";
|
||||
import { defineAtoms } from "./elements/atoms.js";
|
||||
import { defineForm } from "./elements/form.js";
|
||||
import { defineLayout } from "./elements/layout.js";
|
||||
import { defineChrome } from "./elements/chrome.js";
|
||||
|
||||
// CSS is exported as a side-effect import:
|
||||
//
|
||||
// import "@whynot/design/styles/colors_and_type.css";
|
||||
//
|
||||
// Do this once, at the app root.
|
||||
defineAtoms();
|
||||
defineForm();
|
||||
defineLayout();
|
||||
defineChrome();
|
||||
|
||||
// Re-export classes for consumers that want to extend or reference them.
|
||||
export * from "./elements/atoms.js";
|
||||
export * from "./elements/form.js";
|
||||
export * from "./elements/layout.js";
|
||||
export * from "./elements/chrome.js";
|
||||
|
||||
590
src/styles/components.css
Normal file
590
src/styles/components.css
Normal file
@@ -0,0 +1,590 @@
|
||||
/* ============================================================
|
||||
WhyNot Design System — Component Styles
|
||||
------------------------------------------------------------
|
||||
Utility classes that the Lit web components render to. These
|
||||
are also consumable directly from any HTML (no JS required)
|
||||
for the "Layer 1 only" use case — see MultiFrameworkSupport.md.
|
||||
============================================================ */
|
||||
|
||||
/* ====== Custom-element display defaults ======
|
||||
* For shadow-DOM components, the wn-* host has display: inline by default.
|
||||
* Set sensible defaults so layout works without the consumer specifying them.
|
||||
*/
|
||||
wn-eyebrow, wn-tag, wn-stage-dot, wn-phase-dot, wn-stamp, wn-icon,
|
||||
wn-search-input, wn-button { display: inline-block; }
|
||||
|
||||
wn-card, wn-modal, wn-top-nav, wn-sidebar, wn-page-header,
|
||||
wn-pipeline, wn-prototype-card, wn-field-row, wn-breadcrumb,
|
||||
wn-table, wn-banner, wn-empty-state,
|
||||
wn-input, wn-textarea, wn-select { display: block; }
|
||||
|
||||
wn-toast-region { display: block; }
|
||||
wn-toast { display: block; }
|
||||
|
||||
wn-sidebar-group, wn-sidebar-item { display: block; }
|
||||
wn-table-row, wn-table-cell { display: contents; }
|
||||
|
||||
/* host hidden state — needed because shadow-DOM components don't inherit
|
||||
* `[hidden]` semantics in light DOM. Lit's host attribute reflection
|
||||
* handles attributes, but `hidden` on the host itself should still work. */
|
||||
[hidden] { display: none !important; }
|
||||
|
||||
/* ====== Buttons ====== */
|
||||
.wn-btn {
|
||||
font: 500 13px var(--ff-sans);
|
||||
letter-spacing: -0.005em;
|
||||
padding: 9px 16px;
|
||||
border-radius: var(--r-2);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
|
||||
text-decoration: none;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.wn-btn:hover { border-color: var(--ink); }
|
||||
.wn-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
|
||||
.wn-btn:active { background: var(--bg-3); }
|
||||
.wn-btn[disabled], .wn-btn.is-disabled {
|
||||
color: var(--ink-5); border-color: var(--border); cursor: not-allowed; background: var(--paper);
|
||||
}
|
||||
|
||||
.wn-btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
|
||||
.wn-btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
|
||||
.wn-btn--primary:active { background: var(--ink); }
|
||||
.wn-btn--primary[disabled], .wn-btn--primary.is-disabled {
|
||||
background: var(--ink-5); border-color: var(--ink-5); color: var(--paper);
|
||||
}
|
||||
|
||||
.wn-btn--ghost { background: transparent; border-color: transparent; padding: 7px 10px; }
|
||||
.wn-btn--ghost:hover { background: var(--bg-3); border-color: transparent; }
|
||||
|
||||
.wn-btn--danger { background: var(--paper); color: var(--ink); border-color: var(--ink); }
|
||||
|
||||
.wn-btn--sm { padding: 5px 10px; font-size: 12px; }
|
||||
.wn-btn--lg { padding: 12px 20px; font-size: 14px; }
|
||||
|
||||
.wn-btn__icon { width: 14px; height: 14px; flex: none; }
|
||||
.wn-btn--lg .wn-btn__icon { width: 16px; height: 16px; }
|
||||
|
||||
/* ====== Eyebrows & labels ====== */
|
||||
.wn-eyebrow {
|
||||
font: 500 11px/1.2 var(--ff-mono);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
display: inline-block;
|
||||
}
|
||||
.wn-eyebrow--strong { color: var(--fg-1); }
|
||||
|
||||
/* ====== Tags ====== */
|
||||
.wn-tag {
|
||||
font: 500 10px/1 var(--ff-mono);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
padding: 5px 10px;
|
||||
border-radius: var(--r-pill);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--fg-2);
|
||||
background: var(--paper);
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wn-tag--active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
|
||||
.wn-tag--draft { background: var(--hi); color: var(--hi-ink); border-color: transparent; }
|
||||
|
||||
/* ====== Stage / Phase dots ====== */
|
||||
.wn-dot {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font: 500 10px/1 var(--ff-mono);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-2);
|
||||
}
|
||||
.wn-dot__bullet { width: 8px; height: 8px; border-radius: 999px; background: var(--ink); flex: none; }
|
||||
|
||||
/* signal levels (S0–S4) */
|
||||
.wn-stage-dot--s0 .wn-dot__bullet { background: var(--status-raw); }
|
||||
.wn-stage-dot--s1 .wn-dot__bullet { background: var(--status-weak); }
|
||||
.wn-stage-dot--s2 .wn-dot__bullet { background: var(--status-medium); }
|
||||
.wn-stage-dot--s3 .wn-dot__bullet { background: var(--status-strong); }
|
||||
.wn-stage-dot--s4 .wn-dot__bullet { background: var(--status-commercial); }
|
||||
|
||||
/* phase states (todo / active / done / warn) — numbered phases, distinct from signal */
|
||||
.wn-phase-dot__bullet {
|
||||
width: 18px; height: 18px; border-radius: 999px;
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--paper);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font: 500 10px/1 var(--ff-mono); color: var(--fg-3);
|
||||
flex: none;
|
||||
}
|
||||
.wn-phase-dot--todo .wn-phase-dot__bullet { border-color: var(--border-strong); color: var(--fg-3); background: var(--paper); }
|
||||
.wn-phase-dot--active .wn-phase-dot__bullet { border-color: var(--ink); color: var(--ink); background: var(--paper); box-shadow: 0 0 0 3px rgba(10,10,10,0.06); }
|
||||
.wn-phase-dot--done .wn-phase-dot__bullet { border-color: var(--ink); color: var(--paper); background: var(--ink); }
|
||||
.wn-phase-dot--warn .wn-phase-dot__bullet { border-color: var(--hi-2); color: var(--hi-ink); background: var(--hi); }
|
||||
|
||||
/* ====== Stamp ====== */
|
||||
.wn-stamp {
|
||||
display: inline-block;
|
||||
background: var(--hi);
|
||||
color: var(--hi-ink);
|
||||
padding: 5px 10px 3px;
|
||||
font: 500 10px/1 var(--ff-mono);
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
transform: rotate(-1.5deg);
|
||||
}
|
||||
|
||||
/* ====== Icon ====== */
|
||||
.wn-icon { stroke-width: 1.5; stroke: currentColor; fill: none; display: inline-block; vertical-align: middle; }
|
||||
.wn-icon--sm { width: 14px; height: 14px; }
|
||||
.wn-icon--md { width: 16px; height: 16px; }
|
||||
.wn-icon--lg { width: 20px; height: 20px; }
|
||||
.wn-icon--xl { width: 24px; height: 24px; }
|
||||
|
||||
/* ====== Card ====== */
|
||||
.wn-card {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-2);
|
||||
padding: var(--sp-5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-3);
|
||||
position: relative;
|
||||
}
|
||||
.wn-card--inset { background: var(--paper-2); border-color: var(--border); }
|
||||
.wn-card--recessed { background: var(--paper-3); }
|
||||
.wn-card--lg { padding: var(--sp-6); border-radius: var(--r-3); }
|
||||
.wn-card--sm { padding: var(--sp-4); gap: var(--sp-2); }
|
||||
.wn-card--clickable { cursor: pointer; transition: border-color 120ms ease; }
|
||||
.wn-card--clickable:hover { border-color: var(--ink); }
|
||||
.wn-card--clickable:hover::before {
|
||||
content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px;
|
||||
width: 2px; background: var(--ink); border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.wn-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
|
||||
.wn-card__title { font: 500 17px/1.35 var(--ff-sans); margin: 4px 0 8px; color: var(--fg-1); }
|
||||
.wn-card__foot {
|
||||
display: flex; justify-content: space-between; gap: var(--sp-3);
|
||||
padding-top: var(--sp-3); margin-top: 4px;
|
||||
border-top: 1px solid var(--border-soft);
|
||||
font: 500 11px var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
|
||||
/* ====== Field row (label + value, 3-col grid) ====== */
|
||||
.wn-field-row {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr auto;
|
||||
gap: var(--sp-4) var(--sp-5);
|
||||
padding: var(--sp-3) 0;
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
align-items: baseline;
|
||||
}
|
||||
.wn-field-row:last-child { border-bottom: 0; }
|
||||
.wn-field-row__label {
|
||||
font: 500 11px/1.5 var(--ff-mono);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
.wn-field-row__value { font: 400 15px/1.55 var(--ff-sans); color: var(--fg-1); }
|
||||
.wn-field-row__aside { font: 400 12px var(--ff-mono); color: var(--fg-3); text-align: right; }
|
||||
.wn-field-row--stacked { grid-template-columns: 1fr; gap: 6px; }
|
||||
.wn-field-row--narrow { grid-template-columns: 120px 1fr; }
|
||||
|
||||
/* ====== Form inputs ====== */
|
||||
.wn-form-label {
|
||||
font: 500 11px/1 var(--ff-mono);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.wn-input, .wn-textarea, .wn-select {
|
||||
font: 400 14px var(--ff-sans);
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--paper);
|
||||
border-radius: var(--r-1);
|
||||
color: var(--fg-1);
|
||||
outline: none;
|
||||
width: 100%;
|
||||
transition: border-color 120ms ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.wn-input:hover, .wn-textarea:hover, .wn-select:hover { border-color: var(--border-strong); }
|
||||
.wn-input:focus, .wn-textarea:focus, .wn-select:focus { border-color: var(--ink); }
|
||||
.wn-input::placeholder, .wn-textarea::placeholder { color: var(--ink-5); }
|
||||
.wn-input[disabled], .wn-textarea[disabled], .wn-select[disabled] {
|
||||
background: var(--paper-2); color: var(--fg-3); cursor: not-allowed;
|
||||
}
|
||||
.wn-textarea { resize: vertical; min-height: 96px; font-family: var(--ff-sans); }
|
||||
.wn-select {
|
||||
appearance: none; -webkit-appearance: none;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%235C5C5C' stroke-width='1.5'><path d='M1 1l4 4 4-4'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.wn-input--error, .wn-textarea--error, .wn-select--error {
|
||||
border-color: var(--ink); border-bottom-width: 2px;
|
||||
}
|
||||
.wn-form-help { font: 400 11px var(--ff-mono); color: var(--fg-3); margin-top: 6px; display: block; }
|
||||
.wn-form-error { font: 400 11px var(--ff-mono); color: var(--ink); margin-top: 6px; display: block; }
|
||||
|
||||
/* Search input — extracted from TopNav, also usable standalone */
|
||||
.wn-search {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: 1px solid var(--border);
|
||||
padding: 6px 10px;
|
||||
border-radius: var(--r-1);
|
||||
background: var(--paper);
|
||||
color: var(--fg-3);
|
||||
font: 400 12px var(--ff-mono);
|
||||
min-width: 200px;
|
||||
transition: border-color 120ms ease;
|
||||
}
|
||||
.wn-search:focus-within { border-color: var(--ink); }
|
||||
.wn-search input {
|
||||
border: 0; outline: 0; background: none; flex: 1;
|
||||
font: inherit; color: var(--fg-1); padding: 0;
|
||||
}
|
||||
.wn-search input::placeholder { color: var(--ink-5); }
|
||||
.wn-search__kbd {
|
||||
padding: 1px 5px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
font-size: 10px;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
|
||||
/* ====== Breadcrumb ====== */
|
||||
.wn-breadcrumb {
|
||||
display: flex; flex-wrap: wrap; align-items: center;
|
||||
gap: 6px;
|
||||
font: 400 12px/1.5 var(--ff-mono);
|
||||
color: var(--fg-3);
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
.wn-breadcrumb a {
|
||||
color: var(--fg-2);
|
||||
text-decoration: none;
|
||||
padding: 2px 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border-color 120ms ease, color 120ms ease;
|
||||
}
|
||||
.wn-breadcrumb a:hover { color: var(--fg-1); border-bottom-color: var(--border-strong); }
|
||||
.wn-breadcrumb__sep { color: var(--ink-5); user-select: none; }
|
||||
.wn-breadcrumb__current { color: var(--fg-1); }
|
||||
|
||||
/* ====== Modal / Dialog ====== */
|
||||
.wn-modal__backdrop {
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(10, 10, 10, 0.40);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
z-index: 100;
|
||||
padding: var(--sp-5);
|
||||
}
|
||||
.wn-modal__panel {
|
||||
background: var(--paper);
|
||||
border-radius: var(--r-3);
|
||||
box-shadow: var(--shadow-3);
|
||||
max-width: 560px; width: 100%;
|
||||
max-height: calc(100vh - 64px);
|
||||
display: flex; flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wn-modal__head {
|
||||
padding: var(--sp-5) var(--sp-6) var(--sp-4);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
|
||||
}
|
||||
.wn-modal__title { font: 500 20px/1.25 var(--ff-sans); margin: 0; color: var(--fg-1); }
|
||||
.wn-modal__close {
|
||||
background: none; border: 0; cursor: pointer; padding: 4px;
|
||||
color: var(--fg-3); border-radius: var(--r-1);
|
||||
transition: color 120ms ease;
|
||||
}
|
||||
.wn-modal__close:hover { color: var(--fg-1); }
|
||||
.wn-modal__body {
|
||||
padding: var(--sp-5) var(--sp-6);
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
font: 400 15px/1.6 var(--ff-sans);
|
||||
color: var(--fg-1);
|
||||
}
|
||||
.wn-modal__foot {
|
||||
padding: var(--sp-4) var(--sp-6) var(--sp-5);
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex; justify-content: flex-end; gap: var(--sp-2);
|
||||
}
|
||||
|
||||
/* ====== Table ======
|
||||
* Note: shadow-DOM-rendered rows can't be children of a real <table> (the
|
||||
* HTML table model rejects unknown elements between <table> and <tr>). The
|
||||
* <wn-table> component therefore renders a CSS-grid imitation. For real
|
||||
* <table> markup (Django QuerySet rendering, etc.) use these classes
|
||||
* directly on <table>/<tr>/<td> elements — see also the .wn-table--native
|
||||
* variant below.
|
||||
*/
|
||||
|
||||
/* CSS-grid imitation (default <wn-table>) */
|
||||
.wn-table {
|
||||
width: 100%;
|
||||
font-size: var(--fs-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wn-table__thead { border-bottom: 1px solid var(--border); }
|
||||
.wn-table__tbody { display: flex; flex-direction: column; }
|
||||
.wn-table__tr {
|
||||
display: grid;
|
||||
gap: var(--sp-4);
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
align-items: baseline;
|
||||
}
|
||||
.wn-table__tr:last-child { border-bottom: 0; }
|
||||
.wn-table__tr--head { border-bottom: 0; padding: var(--sp-3) var(--sp-4); }
|
||||
.wn-table__th {
|
||||
font: 500 11px/1.2 var(--ff-mono);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
.wn-table__td {
|
||||
color: var(--fg-1);
|
||||
line-height: 1.5;
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
.wn-table--compact .wn-table__tr { padding: var(--sp-2) var(--sp-3); }
|
||||
.wn-table__cell--mono { font-family: var(--ff-mono); color: var(--fg-2); font-size: 12px; }
|
||||
.wn-table__cell--meta { color: var(--fg-3); font: 400 12px var(--ff-mono); }
|
||||
.wn-table__cell--right { text-align: right; }
|
||||
|
||||
/* Native <table> variant — for Django QuerySet rendering etc. */
|
||||
.wn-table--native {
|
||||
border-collapse: collapse;
|
||||
display: table;
|
||||
}
|
||||
.wn-table--native thead th {
|
||||
text-align: left;
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font: 500 11px/1.2 var(--ff-mono);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
.wn-table--native tbody td {
|
||||
padding: var(--sp-4);
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
vertical-align: top;
|
||||
color: var(--fg-1);
|
||||
font-size: var(--fs-sm);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.wn-table--native tbody tr:hover { background: var(--paper-2); }
|
||||
.wn-table--native tbody tr:last-child td { border-bottom: 0; }
|
||||
|
||||
/* ====== Banner / Toast (success / info / warn) ====== */
|
||||
.wn-banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--paper);
|
||||
border-radius: var(--r-2);
|
||||
font: 400 14px/1.5 var(--ff-sans);
|
||||
color: var(--fg-1);
|
||||
position: relative;
|
||||
}
|
||||
.wn-banner__icon { color: var(--fg-2); flex: none; padding-top: 2px; }
|
||||
.wn-banner__body { flex: 1; }
|
||||
.wn-banner__title {
|
||||
font: 500 11px/1.2 var(--ff-mono);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
.wn-banner__dismiss {
|
||||
background: none; border: 0; cursor: pointer;
|
||||
color: var(--fg-3); padding: 4px;
|
||||
}
|
||||
.wn-banner__dismiss:hover { color: var(--fg-1); }
|
||||
.wn-banner--success { border-left: 2px solid var(--ink); }
|
||||
.wn-banner--warn { border-left: 2px solid var(--hi-2); background: #FFFCEB; }
|
||||
.wn-banner--error { border-left: 2px solid var(--ink); background: var(--paper); }
|
||||
.wn-banner--info { border-left: 2px solid var(--border-strong); }
|
||||
|
||||
.wn-toast-region {
|
||||
position: fixed;
|
||||
bottom: var(--sp-5); right: var(--sp-5);
|
||||
display: flex; flex-direction: column; gap: var(--sp-2);
|
||||
z-index: 200;
|
||||
max-width: 380px;
|
||||
}
|
||||
.wn-toast { box-shadow: var(--shadow-3); }
|
||||
|
||||
/* ====== Empty state ====== */
|
||||
.wn-empty {
|
||||
border: 1px dashed var(--border-strong);
|
||||
border-radius: var(--r-2);
|
||||
padding: var(--sp-7);
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
gap: var(--sp-2);
|
||||
text-align: center;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
.wn-empty__icon { color: var(--fg-3); margin-bottom: var(--sp-2); }
|
||||
.wn-empty__title { font: 500 14px var(--ff-sans); color: var(--fg-2); margin: 0; }
|
||||
.wn-empty__body { font: 400 13px/1.5 var(--ff-sans); color: var(--fg-3); max-width: 40ch; margin: 0; }
|
||||
.wn-empty__cta { margin-top: var(--sp-2); }
|
||||
|
||||
/* ====== Top navigation ====== */
|
||||
.wn-topnav {
|
||||
height: 56px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex; align-items: center;
|
||||
gap: var(--sp-6);
|
||||
padding: 0 var(--sp-5);
|
||||
position: sticky; top: 0; z-index: 10;
|
||||
}
|
||||
.wn-topnav__brand { display: flex; align-items: center; gap: 10px; font: 500 14px var(--ff-sans); }
|
||||
.wn-topnav__brand img { width: 22px; height: 22px; }
|
||||
.wn-topnav__brand-slug { font-family: var(--ff-mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.04em; }
|
||||
.wn-topnav__links { display: flex; gap: 22px; }
|
||||
.wn-topnav__link {
|
||||
font: 500 13px var(--ff-sans);
|
||||
color: var(--fg-2);
|
||||
text-decoration: none;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: color 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
.wn-topnav__link:hover { color: var(--fg-1); }
|
||||
.wn-topnav__link--active { color: var(--fg-1); border-bottom-color: var(--ink); }
|
||||
.wn-topnav__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
|
||||
|
||||
/* ====== Sidebar ====== */
|
||||
.wn-sidebar {
|
||||
width: 240px;
|
||||
flex: none;
|
||||
background: var(--paper-2);
|
||||
border-right: 1px solid var(--border);
|
||||
padding: var(--sp-5) var(--sp-4);
|
||||
display: flex; flex-direction: column; gap: var(--sp-5);
|
||||
height: calc(100vh - 56px);
|
||||
position: sticky; top: 56px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.wn-sidebar__group { display: flex; flex-direction: column; gap: 8px; }
|
||||
.wn-sidebar__group-label { padding-left: 12px; }
|
||||
.wn-sidebar__item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
color: var(--fg-2);
|
||||
font: 500 13px var(--ff-sans);
|
||||
cursor: pointer; text-decoration: none;
|
||||
transition: background 120ms ease, color 120ms ease;
|
||||
}
|
||||
.wn-sidebar__item:hover { color: var(--fg-1); }
|
||||
.wn-sidebar__item--active {
|
||||
color: var(--fg-1); background: var(--paper);
|
||||
box-shadow: 0 0 0 1px var(--border) inset;
|
||||
}
|
||||
.wn-sidebar__item--doc { font-family: var(--ff-mono); font-size: 12px; }
|
||||
.wn-sidebar__count { margin-left: auto; font: 400 11px var(--ff-mono); color: var(--fg-3); }
|
||||
.wn-sidebar__footer { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
|
||||
.wn-sidebar__activation {
|
||||
display: flex; align-items: center; gap: 8px; padding: 6px 12px;
|
||||
font: 500 11px var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase;
|
||||
color: var(--fg-2);
|
||||
}
|
||||
.wn-sidebar__activation-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--hi-2); }
|
||||
|
||||
/* ====== Page header ====== */
|
||||
.wn-page-header {
|
||||
margin-bottom: var(--sp-6);
|
||||
display: flex; flex-direction: column; gap: 8px;
|
||||
}
|
||||
.wn-page-header__row { display: flex; align-items: flex-end; gap: var(--sp-5); }
|
||||
.wn-page-header__title {
|
||||
font: 500 32px/1.15 var(--ff-sans);
|
||||
letter-spacing: -0.015em;
|
||||
margin: 0; flex: 1; color: var(--fg-1);
|
||||
}
|
||||
.wn-page-header__actions { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
.wn-page-header__lede {
|
||||
font: 400 16px/1.55 var(--ff-sans);
|
||||
color: var(--fg-2);
|
||||
margin: 0;
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
/* ====== Pipeline ====== */
|
||||
.wn-pipeline {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 0;
|
||||
position: relative;
|
||||
margin: 0 0 var(--sp-6);
|
||||
}
|
||||
.wn-pipeline__stage {
|
||||
padding: 10px 12px 14px;
|
||||
border-top: 2px solid var(--border);
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
position: relative;
|
||||
}
|
||||
.wn-pipeline__stage--done { border-top-color: var(--ink); }
|
||||
.wn-pipeline__stage--active { border-top-color: var(--hi-2); }
|
||||
.wn-pipeline__num {
|
||||
font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
.wn-pipeline__stage--done .wn-pipeline__num,
|
||||
.wn-pipeline__stage--active .wn-pipeline__num { color: var(--fg-1); }
|
||||
.wn-pipeline__name { font: 500 14px/1.25 var(--ff-sans); color: var(--fg-1); }
|
||||
.wn-pipeline__stage--pending .wn-pipeline__name { color: var(--fg-3); }
|
||||
.wn-pipeline__meta { font: 400 11px/1.35 var(--ff-mono); color: var(--fg-3); }
|
||||
.wn-pipeline__arrow {
|
||||
position: absolute; top: -8px; right: -7px;
|
||||
font: 400 14px var(--ff-mono); color: var(--ink-5);
|
||||
}
|
||||
.wn-pipeline__stage--done .wn-pipeline__arrow,
|
||||
.wn-pipeline__stage--active .wn-pipeline__arrow { color: var(--ink); }
|
||||
|
||||
/* ====== Prototype card (combined card variant) ====== */
|
||||
.wn-prototype-card { /* extends .wn-card */ }
|
||||
.wn-prototype-card__qrow {
|
||||
display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px;
|
||||
font-size: 13px; color: var(--fg-1);
|
||||
}
|
||||
.wn-prototype-card__qkey {
|
||||
font: 500 11px/1.5 var(--ff-mono);
|
||||
letter-spacing: 0.06em; text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
.wn-prototype-card__qval { line-height: 1.45; }
|
||||
|
||||
/* ====== Layout helpers ====== */
|
||||
.wn-main { padding: 40px 48px 80px; max-width: 1180px; }
|
||||
.wn-app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
|
||||
Reference in New Issue
Block a user