Skip to content

Commit 5dc8d78

Browse files
author
Samuel Abramov
committed
datum-grammar demo
1 parent 1393a64 commit 5dc8d78

1 file changed

Lines changed: 217 additions & 0 deletions

File tree

‎datum-grammar.demo.html‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<!doctype html>
2+
<html lang="de" data-theme="light">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Datum-Grammatik — Vorher / Nachher</title>
7+
8+
<!-- real Construct system -->
9+
<link rel="stylesheet" href="/foundations.css">
10+
<link rel="stylesheet" href="/components/index.css">
11+
12+
<style>
13+
/* ============================================================================
14+
PROPOSED: "Datum Grammar" — promote the orange reference-line vocabulary
15+
(already living in .storybook/docs.css) INTO the component layer, and extend
16+
it with two engineered primitives the system doesn't have yet:
17+
· .ct-datum-scale — a measured reference line (ruler) with a marked origin
18+
· .ct-card--datum — a corner registration mark, like an engineering drawing
19+
a11y rule kept intact: orange-as-TEXT = accent-active (orange.700);
20+
orange-as-EDGE/RULE = accent (orange.500).
21+
============================================================================ */
22+
23+
/* — Eyebrow: lifted verbatim from docs.css, now unscoped (component-layer) — */
24+
.ct-eyebrow {
25+
display: inline-flex; align-items: center; gap: var(--space-4);
26+
font-family: var(--font-family-mono);
27+
font-size: 0.78rem; font-weight: 600;
28+
text-transform: uppercase; letter-spacing: 0.16em;
29+
color: var(--color-brand-accent-active);
30+
margin: 0 0 var(--space-5);
31+
}
32+
.ct-eyebrow::before {
33+
content: ''; width: 24px; height: 3px; border-radius: 2px;
34+
background: var(--color-brand-accent);
35+
}
36+
37+
/* — NEW: the measured datum line. A hairline baseline with hanging ruler ticks
38+
(minor every 12px, major every 60px) and an orange "origin" segment at 0. — */
39+
.ct-datum-scale {
40+
height: 9px; margin-top: var(--space-5);
41+
background:
42+
/* orange origin segment — marks the datum's zero */
43+
linear-gradient(var(--color-brand-accent), var(--color-brand-accent)) 0 0 / 48px 2px no-repeat,
44+
/* full-width baseline hairline */
45+
linear-gradient(var(--color-border-strong), var(--color-border-strong)) 0 0 / 100% 1px no-repeat,
46+
/* major ticks (taller) */
47+
repeating-linear-gradient(90deg, var(--color-border-strong) 0 1px, transparent 1px 60px) 0 0 / 100% 8px no-repeat,
48+
/* minor ticks */
49+
repeating-linear-gradient(90deg, var(--color-border-default) 0 1px, transparent 1px 12px) 0 0 / 100% 5px no-repeat;
50+
background-clip: padding-box;
51+
}
52+
53+
/* — Section header: eyebrow + title + measured datum line — */
54+
.ct-section { margin: 0 0 var(--space-9); }
55+
.ct-section h2 { margin: 0; }
56+
57+
/* — NEW: corner registration mark on a card — */
58+
.ct-card--datum { position: relative; }
59+
.ct-card--datum::before {
60+
content: ''; position: absolute; top: -1px; left: -1px;
61+
width: 18px; height: 18px;
62+
border-top: var(--border-medium) solid var(--color-brand-accent);
63+
border-left: var(--border-medium) solid var(--color-brand-accent);
64+
border-top-left-radius: var(--radius-card);
65+
}
66+
67+
/* — Active card: the SAME leading edge the sidebar/list active item already uses
68+
(inset 3px), now unified onto the card — */
69+
.ct-card--active {
70+
box-shadow: inset var(--border-thick) 0 0 0 var(--color-brand-accent), var(--shadow-card);
71+
}
72+
73+
/* — Spec datasheet: lifted from docs.css ct-specs, unscoped + a marked origin — */
74+
.ct-specs {
75+
display: grid; grid-template-columns: repeat(2, 1fr);
76+
gap: 1px; background: var(--color-border-subtle);
77+
border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg);
78+
overflow: hidden;
79+
}
80+
.ct-spec { background: var(--color-bg-elevated); padding: var(--space-7); position: relative; }
81+
.ct-spec--origin { box-shadow: inset 0 var(--border-thick) 0 0 var(--color-brand-accent); }
82+
.ct-spec__value {
83+
font-family: var(--font-family-brand); font-weight: 800;
84+
font-size: var(--font-size-4xl); line-height: 1; color: var(--color-text-primary);
85+
}
86+
.ct-spec__value small { font-size: var(--font-size-xl); font-weight: 700; }
87+
.ct-spec__label {
88+
display: block; margin-top: var(--space-4);
89+
font-family: var(--font-family-mono); font-size: 0.72rem; font-weight: 600;
90+
text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-secondary);
91+
}
92+
93+
/* ============================================================================
94+
Demo scaffolding only (not part of the proposal)
95+
============================================================================ */
96+
body { background: var(--color-bg-canvas); }
97+
.wrap { width: min(100%, 1180px); margin-inline: auto; padding: var(--space-12) var(--space-9) var(--space-13); }
98+
.page-eyebrow { margin-bottom: var(--space-6); }
99+
.page-title { font-size: var(--font-size-5xl); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 var(--space-6); }
100+
.page-lead { color: var(--color-text-secondary); max-width: 60ch; font-size: var(--font-size-lg); margin: 0 0 var(--space-12); }
101+
102+
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); margin-bottom: var(--space-12); align-items: start; }
103+
.col { min-width: 0; }
104+
.tag {
105+
display: inline-block; margin-bottom: var(--space-6);
106+
font-family: var(--font-family-mono); font-size: 0.7rem; font-weight: 600;
107+
letter-spacing: 0.12em; text-transform: uppercase;
108+
padding: var(--space-2) var(--space-5); border-radius: var(--radius-round);
109+
}
110+
.tag--before { color: var(--color-text-muted); background: var(--color-bg-muted); }
111+
.tag--after { color: var(--color-brand-on-accent); background: var(--color-brand-accent); }
112+
.pane { padding: var(--space-8); border: 1px dashed var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
113+
114+
.plain-stats { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-9); }
115+
.plain-stat .n { font-family: var(--font-family-brand); font-weight: 800; font-size: var(--font-size-4xl); line-height: 1; }
116+
.plain-stat .l { color: var(--color-text-muted); font-size: var(--font-size-sm); }
117+
.demo-h2 { font-size: var(--font-size-3xl); margin: 0; }
118+
.card-meta { color: var(--color-text-muted); font-size: var(--font-size-sm); margin: var(--space-2) 0 0; }
119+
.card-grid { display: grid; gap: var(--space-6); }
120+
.sectionmark { font-family: var(--font-family-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-5); }
121+
</style>
122+
</head>
123+
<body>
124+
<div class="wrap">
125+
126+
<p class="ct-eyebrow page-eyebrow">Vorschlag · Datum-Grammatik</p>
127+
<h1 class="page-title">Die Signatur wird zur Bauteil-Sprache.</h1>
128+
<p class="page-lead">Das Datum lebt heute fast nur im Fokusring und auf der Intro-Seite. Dieselbe orange Bezugslinie — als Eyebrow-Tick, gemessene Linie, Eck-Registermarke und Leading-Edge — macht aus den braven Bauteilen erkennbar <em>dasselbe</em> System. Links der Status quo, rechts die Grammatik.</p>
129+
130+
<!-- ============================ A · SECTION HEADER ===================== -->
131+
<p class="sectionmark">A — Abschnitts-Kopf</p>
132+
<div class="row">
133+
<div class="col">
134+
<span class="tag tag--before">Vorher</span>
135+
<div class="pane">
136+
<h2 class="demo-h2">Komponenten</h2>
137+
</div>
138+
</div>
139+
<div class="col">
140+
<span class="tag tag--after">Nachher</span>
141+
<div class="pane">
142+
<div class="ct-section">
143+
<p class="ct-eyebrow">40+ Bausteine · framework-agnostisch</p>
144+
<h2 class="demo-h2">Komponenten</h2>
145+
<div class="ct-datum-scale" role="presentation"></div>
146+
</div>
147+
</div>
148+
</div>
149+
</div>
150+
151+
<!-- ================================ B · CARD ========================== -->
152+
<p class="sectionmark">B — Card (inkl. aktivem Zustand)</p>
153+
<div class="row">
154+
<div class="col">
155+
<span class="tag tag--before">Vorher</span>
156+
<div class="pane">
157+
<div class="card-grid">
158+
<div class="ct-card">
159+
<h3 style="margin:0">Design Tokens</h3>
160+
<p class="card-meta">Eine Quelle der Wahrheit für jede visuelle Entscheidung.</p>
161+
</div>
162+
<div class="ct-card">
163+
<h3 style="margin:0">Theming</h3>
164+
<p class="card-meta">Light, Dark & High-Contrast — automatischer Fallback.</p>
165+
</div>
166+
</div>
167+
</div>
168+
</div>
169+
<div class="col">
170+
<span class="tag tag--after">Nachher</span>
171+
<div class="pane">
172+
<div class="card-grid">
173+
<div class="ct-card ct-card--datum">
174+
<p class="ct-eyebrow" style="margin-bottom:var(--space-4)">Foundations</p>
175+
<h3 style="margin:0">Design Tokens</h3>
176+
<p class="card-meta">Eine Quelle der Wahrheit für jede visuelle Entscheidung.</p>
177+
</div>
178+
<div class="ct-card ct-card--datum ct-card--active">
179+
<p class="ct-eyebrow" style="margin-bottom:var(--space-4)">Theming · aktiv</p>
180+
<h3 style="margin:0">Theming</h3>
181+
<p class="card-meta">Light, Dark & High-Contrast — automatischer Fallback.</p>
182+
</div>
183+
</div>
184+
</div>
185+
</div>
186+
</div>
187+
188+
<!-- ============================== C · STATS =========================== -->
189+
<p class="sectionmark">C — Kennzahlen / Spec-Strip</p>
190+
<div class="row">
191+
<div class="col">
192+
<span class="tag tag--before">Vorher</span>
193+
<div class="pane">
194+
<div class="plain-stats">
195+
<div class="plain-stat"><div class="n">40+</div><div class="l">Komponenten</div></div>
196+
<div class="plain-stat"><div class="n">3</div><div class="l">Themes</div></div>
197+
<div class="plain-stat"><div class="n">AA</div><div class="l">WCAG 2.1</div></div>
198+
<div class="plain-stat"><div class="n">0kb</div><div class="l">Runtime JS</div></div>
199+
</div>
200+
</div>
201+
</div>
202+
<div class="col">
203+
<span class="tag tag--after">Nachher</span>
204+
<div class="pane">
205+
<div class="ct-specs">
206+
<div class="ct-spec ct-spec--origin"><div class="ct-spec__value">40<small>+</small></div><span class="ct-spec__label">Komponenten</span></div>
207+
<div class="ct-spec"><div class="ct-spec__value">3</div><span class="ct-spec__label">Themes</span></div>
208+
<div class="ct-spec"><div class="ct-spec__value">AA</div><span class="ct-spec__label">WCAG 2.1</span></div>
209+
<div class="ct-spec"><div class="ct-spec__value">0<small>kb</small></div><span class="ct-spec__label">Runtime JS</span></div>
210+
</div>
211+
</div>
212+
</div>
213+
</div>
214+
215+
</div>
216+
</body>
217+
</html>

0 commit comments

Comments
 (0)