generated from coulomb/repo-seed
Adopt whynot-design tokens (WP-0017 Phase 1)
Replace vergabe's blue brand-* palette with whynot's near-black/paper/yellow visual language. Tokens vendored at static/src/vendor/whynot-design/ (synced from commit 9419f16 via scripts/sync-whynot-design.sh / make sync-whynot-design). main.css imports the vendored CSS first, exposes ink/paper/hi as Tailwind @theme tokens (bg-paper, text-ink, border-line, etc.), and re-tones every component class (.btn-*, .card, .field-row, .phase-*, .form-input, .table-*, .sidebar-*). Border radii drop to whynot's 0-4px; .card loses its shadow. Legacy text-brand-* / bg-brand-* / border-brand-* template references are kept working via @theme aliases that map the old blue scale onto the whynot ink ramp — Phase 1 is tokens-only, no template churn. btn-danger keeps an off-spec red (#B22222) as a local --danger var until upstream defines a canonical destructive color. base.html body class swapped: bg-slate-50 → bg-paper-2 text-ink. Phase 2 (component adoption) deferred until whynot-design ships Lit web components + missing atoms (Card, Modal, Input, Table, Toast). See wiki/DesignSystem.md and history/2026-05-23-whynot-design-cross-framework-analysis.md. Verified: 8/8 e2e tests pass; dev server boots; static/dist/main.css contains no #3b5bdb references. Visual pixel-level verification still pending Bernd's browser walk.
This commit is contained in:
@@ -1,3 +1,9 @@
|
||||
/* whynot-design tokens & semantic element styles (pinned via
|
||||
scripts/sync-whynot-design.sh; see .whynot-design-ref).
|
||||
Must precede the Tailwind import so the @import url(...) for IBM Plex
|
||||
ends up at the top of the generated bundle. */
|
||||
@import "./vendor/whynot-design/colors_and_type.css";
|
||||
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Explicit content sources. Without these, Tailwind's automatic detection
|
||||
@@ -7,44 +13,88 @@
|
||||
template dirs copied in the Dockerfile `assets` stage. */
|
||||
@source "../../vergabe_teilnahme/templates";
|
||||
|
||||
/* whynot tokens → Tailwind theme. Exposes utilities like bg-paper, text-ink,
|
||||
border-line, bg-paper-2, text-ink-3, … */
|
||||
@theme {
|
||||
--color-brand-50: #f0f4ff;
|
||||
--color-brand-100: #dce7ff;
|
||||
--color-brand-500: #3b5bdb;
|
||||
--color-brand-600: #2f4ac7;
|
||||
--color-brand-700: #2541b2;
|
||||
--color-brand-900: #152d99;
|
||||
--color-ink: #0A0A0A;
|
||||
--color-ink-2: #1F1F1F;
|
||||
--color-ink-3: #5C5C5C;
|
||||
--color-ink-4: #8A8A8A;
|
||||
--color-ink-5: #B5B5B3;
|
||||
--color-line: #E5E5E2;
|
||||
--color-line-strong: #C9C9C5;
|
||||
--color-line-soft: #F0F0EC;
|
||||
--color-paper: #FFFFFF;
|
||||
--color-paper-2: #FAFAF7;
|
||||
--color-paper-3: #F4F4EF;
|
||||
--color-hi: #FFE14A;
|
||||
--color-hi-2: #FFD400;
|
||||
--color-hi-ink: #1A1500;
|
||||
|
||||
/* Backwards-compat aliases for legacy `brand-*` utility usage in templates.
|
||||
Keeps Phase 1 a tokens-only swap; templates can migrate to ink/paper at
|
||||
leisure. Map blue-brand scale onto the whynot ink ramp. */
|
||||
--color-brand-50: #FAFAF7;
|
||||
--color-brand-100: #F4F4EF;
|
||||
--color-brand-500: #0A0A0A;
|
||||
--color-brand-600: #1F1F1F;
|
||||
--color-brand-700: #0A0A0A;
|
||||
--color-brand-900: #0A0A0A;
|
||||
}
|
||||
|
||||
/* Off-spec — vergabe-local until whynot-design defines a canonical
|
||||
destructive color. See history/2026-05-23-whynot-design-cross-framework-analysis.md
|
||||
§4 for context. */
|
||||
:root {
|
||||
--danger: #B22222;
|
||||
--danger-fg: #FFFFFF;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
/* German-app base resets */
|
||||
html {
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
font-family: var(--ff-sans, ui-sans-serif), system-ui, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.card { @apply bg-white rounded-xl border border-slate-200 shadow-sm p-6; }
|
||||
.btn-primary { @apply bg-brand-500 text-white px-4 py-2 rounded-lg hover:bg-brand-600 transition-colors; }
|
||||
.btn-secondary { @apply bg-white text-slate-700 border border-slate-300 px-4 py-2 rounded-lg hover:bg-slate-50; }
|
||||
.btn-danger { @apply bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700; }
|
||||
.btn-ghost { @apply text-slate-600 px-3 py-2 rounded-lg hover:bg-slate-100; }
|
||||
.field-row { @apply grid grid-cols-3 gap-4 py-3 border-b border-slate-100 last:border-0; }
|
||||
.field-label { @apply text-sm font-medium text-slate-500 col-span-1; }
|
||||
.field-value { @apply text-sm text-slate-900 col-span-2; }
|
||||
.phase-badge { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold; }
|
||||
.phase-todo { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-slate-200 text-slate-500; }
|
||||
.phase-active { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-brand-500 text-white; }
|
||||
.phase-done { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-green-500 text-white; }
|
||||
.phase-warn { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-amber-400 text-amber-900; }
|
||||
.section-title { @apply text-base font-semibold text-slate-900 mb-4; }
|
||||
.page-title { @apply text-2xl font-bold text-slate-900; }
|
||||
.form-input { @apply w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent; }
|
||||
.form-label { @apply block text-sm font-medium text-slate-700 mb-1; }
|
||||
.table-base { @apply w-full text-sm text-left; }
|
||||
.table-header { @apply bg-slate-50 text-slate-500 font-medium text-xs uppercase tracking-wide; }
|
||||
.table-row { @apply border-t border-slate-100 hover:bg-slate-50 transition-colors; }
|
||||
.sidebar-link { @apply flex items-center px-3 py-2 rounded-lg text-sm text-slate-700 hover:bg-slate-100 transition-colors; }
|
||||
.sidebar-link-active { @apply bg-brand-50 text-brand-700 font-medium; }
|
||||
.sidebar-section-btn { @apply w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-slate-500 uppercase tracking-wide hover:text-slate-700; }
|
||||
/* Cards / sheets — whynot: no shadow, hairline border */
|
||||
.card { @apply bg-paper rounded border border-line p-6; }
|
||||
|
||||
/* Buttons — whynot: 3 variants + off-spec danger */
|
||||
.btn-primary { @apply bg-ink text-paper px-4 py-2 rounded hover:bg-ink-2 transition-colors; }
|
||||
.btn-secondary { @apply bg-paper text-ink border border-line px-4 py-2 rounded hover:bg-paper-2 transition-colors; }
|
||||
.btn-ghost { @apply text-ink-3 px-3 py-2 rounded hover:bg-paper-2; }
|
||||
.btn-danger { background: var(--danger); color: var(--danger-fg); @apply px-4 py-2 rounded transition-colors; }
|
||||
.btn-danger:hover { filter: brightness(0.92); }
|
||||
|
||||
/* Field-row — label/value grid */
|
||||
.field-row { @apply grid grid-cols-3 gap-4 py-3 border-b border-line-soft last:border-0; }
|
||||
.field-label { @apply text-sm font-medium text-ink-3 col-span-1; }
|
||||
.field-value { @apply text-sm text-ink col-span-2; }
|
||||
|
||||
/* Phase indicators — vergabe semantics (todo/active/done/warn), translated
|
||||
into whynot palette. `phase-warn` uses --hi (annotation yellow). */
|
||||
.phase-badge { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold; }
|
||||
.phase-todo { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-paper-3 text-ink-4; }
|
||||
.phase-active { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-ink text-paper; }
|
||||
.phase-done { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-ink-3 text-paper; }
|
||||
.phase-warn { background: var(--hi); color: var(--hi-ink); @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold; }
|
||||
|
||||
/* Titles / sections */
|
||||
.section-title { @apply text-base font-semibold text-ink mb-4; }
|
||||
.page-title { @apply text-2xl font-medium text-ink tracking-tight; }
|
||||
|
||||
/* Forms */
|
||||
.form-input { @apply w-full rounded border border-line px-3 py-2 text-sm bg-paper focus:outline-none focus:border-ink transition-colors; }
|
||||
.form-label { @apply block text-sm font-medium text-ink-2 mb-1; }
|
||||
|
||||
/* Tables */
|
||||
.table-base { @apply w-full text-sm text-left; }
|
||||
.table-header { @apply bg-paper-2 text-ink-3 font-medium text-xs uppercase tracking-wide; }
|
||||
.table-row { @apply border-t border-line-soft hover:bg-paper-2 transition-colors; }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar-link { @apply flex items-center px-3 py-2 rounded text-sm text-ink-2 hover:bg-paper-2 transition-colors; }
|
||||
.sidebar-link-active { @apply bg-paper text-ink font-medium; box-shadow: inset 0 0 0 1px var(--line); }
|
||||
.sidebar-section-btn { @apply w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-ink-4 uppercase tracking-wide hover:text-ink-2; }
|
||||
}
|
||||
|
||||
1
static/src/vendor/whynot-design/.whynot-design-ref
vendored
Normal file
1
static/src/vendor/whynot-design/.whynot-design-ref
vendored
Normal file
@@ -0,0 +1 @@
|
||||
9419f166ce395858f55b10a5c72268a1fe9fc9d2
|
||||
273
static/src/vendor/whynot-design/colors_and_type.css
vendored
Normal file
273
static/src/vendor/whynot-design/colors_and_type.css
vendored
Normal file
@@ -0,0 +1,273 @@
|
||||
/* ============================================================
|
||||
WhyNot Design System — Colors & Type
|
||||
------------------------------------------------------------
|
||||
Neutral, mostly black/white. Color is used SPARINGLY — only
|
||||
one warm accent (annotation yellow) borrowed from the LEGO
|
||||
brick in the logo. The system favours light grey wireframe
|
||||
artefacts over heavy fills.
|
||||
============================================================ */
|
||||
|
||||
/* ---------- Webfonts (Google Fonts, see /fonts for offline) ---------- */
|
||||
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;1,400&display=swap");
|
||||
|
||||
:root {
|
||||
/* ---------- Base palette: neutrals ---------- */
|
||||
--ink: #0A0A0A; /* near-black, the only "fill" most of the time */
|
||||
--ink-2: #1F1F1F;
|
||||
--ink-3: #5C5C5C;
|
||||
--ink-4: #8A8A8A;
|
||||
--ink-5: #B5B5B3; /* placeholder text, wireframe labels */
|
||||
--line: #E5E5E2; /* default 1px wireframe rule */
|
||||
--line-strong: #C9C9C5; /* dividers between sections */
|
||||
--line-soft: #F0F0EC; /* hairline within a card */
|
||||
--paper: #FFFFFF; /* canvas */
|
||||
--paper-2: #FAFAF7; /* sheet, dim canvas */
|
||||
--paper-3: #F4F4EF; /* recessed surface, code block bg */
|
||||
|
||||
/* ---------- Foreground / background semantic ---------- */
|
||||
--fg-1: var(--ink);
|
||||
--fg-2: var(--ink-3);
|
||||
--fg-3: var(--ink-4);
|
||||
--fg-mute: var(--ink-5);
|
||||
--fg-on-dark: #FAFAF7;
|
||||
|
||||
--bg-1: var(--paper);
|
||||
--bg-2: var(--paper-2);
|
||||
--bg-3: var(--paper-3);
|
||||
--bg-invert: var(--ink);
|
||||
|
||||
--border: var(--line);
|
||||
--border-strong: var(--line-strong);
|
||||
--border-soft: var(--line-soft);
|
||||
|
||||
/* ---------- The single accent: annotation yellow ---------- */
|
||||
/* Lifted from the LEGO brick. Used as highlighter, "draft"
|
||||
stamp, signal-marker. Never as a button fill. */
|
||||
--hi: #FFE14A;
|
||||
--hi-2: #FFD400;
|
||||
--hi-ink: #1A1500; /* text on yellow */
|
||||
|
||||
/* ---------- Status (for prototype lifecycle, signal strength) ---------- */
|
||||
/* Kept deliberately desaturated so they read as labels, not UI. */
|
||||
--status-raw: #B5B5B3; /* S0 — no signal */
|
||||
--status-weak: #8A8A8A; /* S1 — weak signal */
|
||||
--status-medium: #5C5C5C; /* S2 — medium signal */
|
||||
--status-strong: #0A0A0A; /* S3 — strong signal */
|
||||
--status-commercial: #FFD400; /* S4 — commercial */
|
||||
|
||||
/* ---------- Type families ---------- */
|
||||
--ff-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
|
||||
--ff-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
||||
--ff-serif: "IBM Plex Serif", "Iowan Old Style", Georgia, serif;
|
||||
|
||||
/* ---------- Type scale (modular, ~1.2) ---------- */
|
||||
--fs-xs: 11px;
|
||||
--fs-sm: 13px;
|
||||
--fs-base: 15px;
|
||||
--fs-md: 17px;
|
||||
--fs-lg: 20px;
|
||||
--fs-xl: 24px;
|
||||
--fs-2xl: 32px;
|
||||
--fs-3xl: 44px;
|
||||
--fs-4xl: 64px;
|
||||
--fs-5xl: 96px;
|
||||
|
||||
--lh-tight: 1.05;
|
||||
--lh-snug: 1.25;
|
||||
--lh-base: 1.5;
|
||||
--lh-loose: 1.7;
|
||||
|
||||
--tr-tight: -0.02em;
|
||||
--tr-snug: -0.01em;
|
||||
--tr-base: 0em;
|
||||
--tr-mono: 0.02em;
|
||||
--tr-label: 0.08em; /* uppercase eyebrow labels */
|
||||
|
||||
/* ---------- Spacing (4px base) ---------- */
|
||||
--sp-1: 4px;
|
||||
--sp-2: 8px;
|
||||
--sp-3: 12px;
|
||||
--sp-4: 16px;
|
||||
--sp-5: 24px;
|
||||
--sp-6: 32px;
|
||||
--sp-7: 48px;
|
||||
--sp-8: 64px;
|
||||
--sp-9: 96px;
|
||||
--sp-10: 128px;
|
||||
|
||||
/* ---------- Radii — small, mostly square ---------- */
|
||||
--r-0: 0px;
|
||||
--r-1: 2px;
|
||||
--r-2: 4px;
|
||||
--r-3: 8px;
|
||||
--r-pill: 999px;
|
||||
|
||||
/* ---------- Elevation — almost none. This is a wireframe system. ---------- */
|
||||
--shadow-0: none;
|
||||
--shadow-1: 0 1px 0 var(--line);
|
||||
--shadow-2: 0 1px 0 var(--line-strong);
|
||||
--shadow-3: 0 4px 12px -6px rgba(10,10,10,0.10);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Semantic element styles
|
||||
============================================================ */
|
||||
|
||||
html {
|
||||
font-family: var(--ff-sans);
|
||||
font-size: var(--fs-base);
|
||||
line-height: var(--lh-base);
|
||||
color: var(--fg-1);
|
||||
background: var(--bg-1);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-feature-settings: "ss01", "cv11";
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
/* ---------- Headings ---------- */
|
||||
h1, .h1 {
|
||||
font: 600 var(--fs-3xl)/var(--lh-tight) var(--ff-sans);
|
||||
letter-spacing: var(--tr-tight);
|
||||
margin: 0 0 var(--sp-5);
|
||||
color: var(--fg-1);
|
||||
}
|
||||
h2, .h2 {
|
||||
font: 500 var(--fs-2xl)/var(--lh-snug) var(--ff-sans);
|
||||
letter-spacing: var(--tr-snug);
|
||||
margin: 0 0 var(--sp-4);
|
||||
}
|
||||
h3, .h3 {
|
||||
font: 500 var(--fs-xl)/var(--lh-snug) var(--ff-sans);
|
||||
letter-spacing: var(--tr-snug);
|
||||
margin: 0 0 var(--sp-3);
|
||||
}
|
||||
h4, .h4 {
|
||||
font: 500 var(--fs-lg)/var(--lh-snug) var(--ff-sans);
|
||||
margin: 0 0 var(--sp-2);
|
||||
}
|
||||
h5, .h5 {
|
||||
font: 500 var(--fs-md)/var(--lh-snug) var(--ff-sans);
|
||||
margin: 0 0 var(--sp-2);
|
||||
}
|
||||
|
||||
/* ---------- Display (for hero / title slides) ---------- */
|
||||
.display-1 {
|
||||
font: 300 var(--fs-5xl)/0.95 var(--ff-sans);
|
||||
letter-spacing: -0.035em;
|
||||
color: var(--fg-1);
|
||||
}
|
||||
.display-2 {
|
||||
font: 400 var(--fs-4xl)/1.0 var(--ff-sans);
|
||||
letter-spacing: var(--tr-tight);
|
||||
}
|
||||
|
||||
/* ---------- Body ---------- */
|
||||
p {
|
||||
margin: 0 0 var(--sp-4);
|
||||
line-height: var(--lh-base);
|
||||
color: var(--fg-1);
|
||||
}
|
||||
.lead {
|
||||
font-size: var(--fs-md);
|
||||
line-height: 1.55;
|
||||
color: var(--fg-2);
|
||||
}
|
||||
small, .small {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--fg-2);
|
||||
}
|
||||
|
||||
/* ---------- Eyebrow / uppercase labels (very common in this system) ---------- */
|
||||
.eyebrow,
|
||||
.label {
|
||||
font: 500 var(--fs-xs)/1.2 var(--ff-mono);
|
||||
letter-spacing: var(--tr-label);
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
|
||||
/* ---------- Code / mono ---------- */
|
||||
code, kbd, samp, pre, .mono {
|
||||
font-family: var(--ff-mono);
|
||||
font-size: 0.92em;
|
||||
letter-spacing: var(--tr-mono);
|
||||
}
|
||||
code {
|
||||
background: var(--bg-3);
|
||||
padding: 1px 6px;
|
||||
border-radius: var(--r-1);
|
||||
color: var(--ink-2);
|
||||
}
|
||||
pre {
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--border);
|
||||
padding: var(--sp-4);
|
||||
overflow-x: auto;
|
||||
border-radius: var(--r-2);
|
||||
font-size: var(--fs-sm);
|
||||
line-height: var(--lh-snug);
|
||||
}
|
||||
pre code { background: none; padding: 0; }
|
||||
|
||||
/* ---------- Editorial serif moments ---------- */
|
||||
.serif { font-family: var(--ff-serif); }
|
||||
.serif-quote {
|
||||
font: 400 italic var(--fs-xl)/1.4 var(--ff-serif);
|
||||
color: var(--fg-2);
|
||||
}
|
||||
|
||||
/* ---------- Links ---------- */
|
||||
a {
|
||||
color: var(--fg-1);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--border-strong);
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-thickness: 1px;
|
||||
transition: text-decoration-color 120ms ease, color 120ms ease;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration-color: var(--fg-1);
|
||||
}
|
||||
|
||||
/* ---------- HR ---------- */
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: var(--sp-5) 0;
|
||||
}
|
||||
|
||||
/* ---------- Highlighter (the one place yellow appears in body copy) ---------- */
|
||||
mark, .mark {
|
||||
background: var(--hi);
|
||||
color: var(--hi-ink);
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
/* ---------- Tables (used in templates) ---------- */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
th, td {
|
||||
text-align: left;
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
th {
|
||||
font-weight: 500;
|
||||
color: var(--fg-2);
|
||||
font-family: var(--ff-mono);
|
||||
font-size: var(--fs-xs);
|
||||
letter-spacing: var(--tr-label);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ---------- Selection ---------- */
|
||||
::selection { background: var(--hi); color: var(--hi-ink); }
|
||||
22
static/src/vendor/whynot-design/tokens/colors.json
vendored
Normal file
22
static/src/vendor/whynot-design/tokens/colors.json
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"$schema": "https://design-tokens.github.io/community-group/format/",
|
||||
"ink": { "value": "#0A0A0A", "type": "color", "comment": "Near-black. The only fill most of the time." },
|
||||
"ink-2": { "value": "#1F1F1F", "type": "color" },
|
||||
"ink-3": { "value": "#5C5C5C", "type": "color" },
|
||||
"ink-4": { "value": "#8A8A8A", "type": "color" },
|
||||
"ink-5": { "value": "#B5B5B3", "type": "color", "comment": "Placeholder text, wireframe labels." },
|
||||
"line": { "value": "#E5E5E2", "type": "color", "comment": "Default 1px wireframe rule." },
|
||||
"line-strong": { "value": "#C9C9C5", "type": "color" },
|
||||
"line-soft": { "value": "#F0F0EC", "type": "color" },
|
||||
"paper": { "value": "#FFFFFF", "type": "color" },
|
||||
"paper-2": { "value": "#FAFAF7", "type": "color" },
|
||||
"paper-3": { "value": "#F4F4EF", "type": "color" },
|
||||
"hi": { "value": "#FFE14A", "type": "color", "comment": "Annotation yellow. Highlighter only, never a button fill." },
|
||||
"hi-2": { "value": "#FFD400", "type": "color" },
|
||||
"hi-ink": { "value": "#1A1500", "type": "color", "comment": "Text on yellow." },
|
||||
"status-raw": { "value": "#B5B5B3", "type": "color", "comment": "S0 — no signal" },
|
||||
"status-weak": { "value": "#8A8A8A", "type": "color", "comment": "S1 — weak signal" },
|
||||
"status-medium": { "value": "#5C5C5C", "type": "color", "comment": "S2 — medium signal" },
|
||||
"status-strong": { "value": "#0A0A0A", "type": "color", "comment": "S3 — strong signal" },
|
||||
"status-commercial": { "value": "#FFD400", "type": "color", "comment": "S4 — commercial" }
|
||||
}
|
||||
6
static/src/vendor/whynot-design/tokens/index.json
vendored
Normal file
6
static/src/vendor/whynot-design/tokens/index.json
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"comment": "Manifest pointing at the three token files. Source-of-truth for any future Style Dictionary build.",
|
||||
"colors": "./colors.json",
|
||||
"type": "./type.json",
|
||||
"spacing": "./spacing.json"
|
||||
}
|
||||
28
static/src/vendor/whynot-design/tokens/spacing.json
vendored
Normal file
28
static/src/vendor/whynot-design/tokens/spacing.json
vendored
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"$schema": "https://design-tokens.github.io/community-group/format/",
|
||||
"spacing": {
|
||||
"1": { "value": "4px", "type": "dimension" },
|
||||
"2": { "value": "8px", "type": "dimension" },
|
||||
"3": { "value": "12px", "type": "dimension" },
|
||||
"4": { "value": "16px", "type": "dimension" },
|
||||
"5": { "value": "24px", "type": "dimension" },
|
||||
"6": { "value": "32px", "type": "dimension" },
|
||||
"7": { "value": "48px", "type": "dimension" },
|
||||
"8": { "value": "64px", "type": "dimension" },
|
||||
"9": { "value": "96px", "type": "dimension" },
|
||||
"10": { "value": "128px", "type": "dimension" }
|
||||
},
|
||||
"radius": {
|
||||
"0": { "value": "0px", "type": "dimension" },
|
||||
"1": { "value": "2px", "type": "dimension" },
|
||||
"2": { "value": "4px", "type": "dimension" },
|
||||
"3": { "value": "8px", "type": "dimension" },
|
||||
"pill": { "value": "999px", "type": "dimension" }
|
||||
},
|
||||
"shadow": {
|
||||
"0": { "value": "none", "type": "shadow" },
|
||||
"1": { "value": "0 1px 0 #E5E5E2", "type": "shadow" },
|
||||
"2": { "value": "0 1px 0 #C9C9C5", "type": "shadow" },
|
||||
"3": { "value": "0 4px 12px -6px rgba(10,10,10,0.10)", "type": "shadow", "comment": "Floating elements only." }
|
||||
}
|
||||
}
|
||||
33
static/src/vendor/whynot-design/tokens/type.json
vendored
Normal file
33
static/src/vendor/whynot-design/tokens/type.json
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"$schema": "https://design-tokens.github.io/community-group/format/",
|
||||
"family": {
|
||||
"sans": { "value": "\"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif", "type": "fontFamily" },
|
||||
"mono": { "value": "\"IBM Plex Mono\", ui-monospace, \"SF Mono\", Menlo, monospace", "type": "fontFamily" },
|
||||
"serif": { "value": "\"IBM Plex Serif\", \"Iowan Old Style\", Georgia, serif", "type": "fontFamily" }
|
||||
},
|
||||
"size": {
|
||||
"xs": { "value": "11px", "type": "dimension" },
|
||||
"sm": { "value": "13px", "type": "dimension" },
|
||||
"base": { "value": "15px", "type": "dimension" },
|
||||
"md": { "value": "17px", "type": "dimension" },
|
||||
"lg": { "value": "20px", "type": "dimension" },
|
||||
"xl": { "value": "24px", "type": "dimension" },
|
||||
"2xl": { "value": "32px", "type": "dimension" },
|
||||
"3xl": { "value": "44px", "type": "dimension" },
|
||||
"4xl": { "value": "64px", "type": "dimension" },
|
||||
"5xl": { "value": "96px", "type": "dimension" }
|
||||
},
|
||||
"lineHeight": {
|
||||
"tight": { "value": 1.05, "type": "number" },
|
||||
"snug": { "value": 1.25, "type": "number" },
|
||||
"base": { "value": 1.5, "type": "number" },
|
||||
"loose": { "value": 1.7, "type": "number" }
|
||||
},
|
||||
"tracking": {
|
||||
"tight": { "value": "-0.02em", "type": "dimension" },
|
||||
"snug": { "value": "-0.01em", "type": "dimension" },
|
||||
"base": { "value": "0em", "type": "dimension" },
|
||||
"mono": { "value": "0.02em", "type": "dimension" },
|
||||
"label": { "value": "0.08em", "type": "dimension", "comment": "Uppercase eyebrow labels." }
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user