| 20 |
20 |
|
|
| 21 |
21 |
|
FOUNDATIONS
|
| 22 |
22 |
|
@font-face declarations (top of file)
|
| 23 |
|
- |
:root tokens color, type, space, radius, shadow
|
| 24 |
|
- |
Element base h1/h2/h3, p, a, button, input, table
|
|
23 |
+ |
:root tokens (color, type, space, radius, shadow)
|
|
24 |
+ |
Element base (h1/h2/h3, p, a, button, input, table)
|
| 25 |
25 |
|
|
| 26 |
26 |
|
UTILITIES
|
| 27 |
27 |
|
Spacing (.m-0, .mt-*, .mb-*, .ml-*, .my-*)
|
| 32 |
32 |
|
Shapes (.square-cover, .scroll-x)
|
| 33 |
33 |
|
|
| 34 |
34 |
|
LAYOUT PRIMITIVES (page-scaffolding shapes)
|
| 35 |
|
- |
.container width set by body class
|
| 36 |
|
- |
.stack-row + --bordered / --tight / --top toolbar / header bar
|
| 37 |
|
- |
.field-row + .form-group.is-grow inline form row
|
| 38 |
|
- |
.list-row + .list-row-title vertical item list
|
| 39 |
|
- |
.form-row 2-col grid form
|
| 40 |
|
- |
.cover-row + .cover-thumb + .cover-empty image picker
|
|
35 |
+ |
.container (width set by body class)
|
|
36 |
+ |
.stack-row + --bordered / --tight / --top (toolbar / header bar)
|
|
37 |
+ |
.field-row + .form-group.is-grow (inline form row)
|
|
38 |
+ |
.list-row + .list-row-title (vertical item list)
|
|
39 |
+ |
.form-row (2-col grid form)
|
|
40 |
+ |
.cover-row + .cover-thumb + .cover-empty (image picker)
|
| 41 |
41 |
|
|
| 42 |
42 |
|
COMPONENT PRIMITIVES (reusable UI blocks)
|
| 43 |
|
- |
.content-section light-bg page section box
|
|
43 |
+ |
.content-section (light-bg page section box)
|
| 44 |
44 |
|
.card / .card-muted / .card--bordered / .card--selectable
|
| 45 |
45 |
|
.form-group / .form-section / details.form-section
|
| 46 |
46 |
|
.section-header / .section-lead / .section-group-label
|
| 47 |
47 |
|
.badge + data-tone (success/warning/danger)
|
| 48 |
48 |
|
.callout + --danger / --warning / --solid-warning
|
| 49 |
|
- |
.banner + --info / --warning full-bleed page-top notice
|
| 50 |
|
- |
.alert + -note / -tip / -warning / -caution left-border inline notice
|
|
49 |
+ |
.banner + --info / --warning (full-bleed page-top notice)
|
|
50 |
+ |
.alert + -note / -tip / -warning / -caution (left-border inline notice)
|
| 51 |
51 |
|
.modal + .modal-overlay
|
| 52 |
52 |
|
.empty-state + --compact / --chart / --lg
|
| 53 |
53 |
|
.progress-bar-container + .progress-bar (--slim, --rounded, --highlight)
|
| 55 |
55 |
|
.field-status / .save-status + .success / .error / .saving
|
| 56 |
56 |
|
.toast + .toast--success / --error / --warning
|
| 57 |
57 |
|
.breadcrumb / .pagination
|
| 58 |
|
- |
.tabs + .tab.chosen (chosen is makeover's)
|
|
58 |
+ |
.tabs + .tab.chosen (chosen is makeover's)
|
| 59 |
59 |
|
|
| 60 |
60 |
|
CONTROL MODIFIERS (compose onto buttons/inputs)
|
| 61 |
|
- |
.small / .btn-compact / .btn-link / .btn-tiny button sizes
|
| 62 |
|
- |
.btn-danger / .saved button intents
|
| 63 |
|
- |
.input--xs / --sm / --mono / --upper / --numeric input sizes/shapes
|
|
61 |
+ |
.small / .btn-compact / .btn-link / .btn-tiny (button sizes)
|
|
62 |
+ |
.btn-danger / .saved (button intents)
|
|
63 |
+ |
.input--xs / --sm / --mono / --upper / --numeric (input sizes/shapes)
|
| 64 |
64 |
|
|
| 65 |
65 |
|
FEATURE SUBAPPS (their own CSS scope)
|
| 66 |
66 |
|
.git-* (git source browser at /source/*)
|
| 338 |
338 |
|
/* Heading classes (charter: docs/design-system.md, every h1/h2 in a
|
| 339 |
339 |
|
template must carry one of these so the role is explicit).
|
| 340 |
340 |
|
|
| 341 |
|
- |
.brand-h1 the "Makenot.work" wordmark on auth/wizard pages.
|
| 342 |
|
- |
.page-title page-level h1 (Young Serif, centered).
|
| 343 |
|
- |
.subtitle-h2 page subtitle h2 used under .brand-h1 in auth/wizards.
|
| 344 |
|
- |
.subsection-title, h2 inside dashboards, tabs, and prose partials
|
|
341 |
+ |
.brand-h1: the "Makenot.work" wordmark on auth/wizard pages.
|
|
342 |
+ |
.page-title: page-level h1 (Young Serif, centered).
|
|
343 |
+ |
.subtitle-h2: page subtitle h2 used under .brand-h1 in auth/wizards.
|
|
344 |
+ |
.subsection-title: h2 inside dashboards, tabs, and prose partials
|
| 345 |
345 |
|
(mono, no border, the default-h2 role made explicit).
|
| 346 |
|
- |
.section-header h2 prose sub-section heading with bottom border
|
|
346 |
+ |
.section-header: h2 prose sub-section heading with bottom border
|
| 347 |
347 |
|
(existing rule, see SECTIONS block). */
|
| 348 |
348 |
|
.brand-h1,
|
| 349 |
349 |
|
.page-title {
|
| 543 |
543 |
|
/* Button size + style modifiers (charter: docs/design-system.md).
|
| 544 |
544 |
|
Use these on top of .btn-primary / -secondary / -danger.
|
| 545 |
545 |
|
|
| 546 |
|
- |
.btn--large large CTA padding bump.
|
| 547 |
|
- |
.btn--icon square icon-only / micro button (small padding,
|
|
546 |
+ |
.btn--large: large CTA padding bump.
|
|
547 |
+ |
.btn--icon: square icon-only / micro button (small padding,
|
| 548 |
548 |
|
tight line-height).
|
| 549 |
|
- |
.btn--link visually a link, semantically a button (no bg/
|
|
549 |
+ |
.btn--link: visually a link, semantically a button (no bg/
|
| 550 |
550 |
|
border, opacity-fade hover, mono).
|
| 551 |
551 |
|
|
| 552 |
552 |
|
Some surfaces have tuned button variants that are NOT compositions
|
| 553 |
553 |
|
of these modifiers and keep their own classes:
|
| 554 |
|
- |
.big-button Young Serif 200×60 anchor on splash pages.
|
| 555 |
|
- |
.order-btn list reorder up/down (with active flash).
|
| 556 |
|
- |
.play-button circular media-player play control.
|
| 557 |
|
- |
.speed-button segment in media-player speed group.
|
| 558 |
|
- |
.shortcuts-help-btn, 1.5rem square help glyph in toolbars.
|
| 559 |
|
- |
.toast-retry-btn inline bordered button inside a toast,
|
|
554 |
+ |
.big-button: Young Serif 200×60 anchor on splash pages.
|
|
555 |
+ |
.order-btn: list reorder up/down (with active flash).
|
|
556 |
+ |
.play-button: circular media-player play control.
|
|
557 |
+ |
.speed-button: segment in media-player speed group.
|
|
558 |
+ |
.shortcuts-help-btn: 1.5rem square help glyph in toolbars.
|
|
559 |
+ |
.toast-retry-btn: inline bordered button inside a toast,
|
| 560 |
560 |
|
uses currentColor to inherit toast tone.
|
| 561 |
561 |
|
These are documented variants, not deprecation targets. */
|
| 562 |
562 |
|
.btn--large {
|
| 1145 |
1145 |
|
|
| 1146 |
1146 |
|
/* Canonical card primitive (charter: docs/design-system.md).
|
| 1147 |
1147 |
|
Variants:
|
| 1148 |
|
- |
.card filled, hover-step (default content card).
|
| 1149 |
|
- |
.card.card-muted surface-muted fill, no hover (dashboard stat / analytics blocks).
|
| 1150 |
|
- |
.card.card--bordered bordered, padded, no fill (marketing cards: feature/tier/use-case).
|
| 1151 |
|
- |
.card.card--selectable radio-card pattern; pair with .is-selected.
|
| 1152 |
|
- |
.card.card--grid grid-cell card (discover grid).
|
|
1148 |
+ |
.card: filled, hover-step (default content card).
|
|
1149 |
+ |
.card.card-muted: surface-muted fill, no hover (dashboard stat / analytics blocks).
|
|
1150 |
+ |
.card.card--bordered: bordered, padded, no fill (marketing cards: feature/tier/use-case).
|
|
1151 |
+ |
.card.card--selectable: radio-card pattern; pair with .is-selected.
|
|
1152 |
+ |
.card.card--grid: grid-cell card (discover grid).
|
| 1153 |
1153 |
|
No aliases. A template names the modifier it wants and adds its own
|
| 1154 |
1154 |
|
component class beside it; a recipe reached only through a per-page name is
|
| 1155 |
1155 |
|
a recipe nobody can find from the charter. */
|
| 1330 |
1330 |
|
|
| 1331 |
1331 |
|
/* Notification surface roles (charter: docs/design-system.md).
|
| 1332 |
1332 |
|
Five distinct components. Keep them distinct, don't merge:
|
| 1333 |
|
- |
.toast transient, JS-dismissible, bottom-right corner.
|
| 1334 |
|
- |
.banner full-bleed page-top notice (sandbox, restart,
|
|
1333 |
+ |
.toast: transient, JS-dismissible, bottom-right corner.
|
|
1334 |
+ |
.banner: full-bleed page-top notice (sandbox, restart,
|
| 1335 |
1335 |
|
founder pricing). One short sentence + optional link.
|
| 1336 |
|
- |
.alert inline directive callout with uppercase mono title
|
|
1336 |
+ |
.alert: inline directive callout with uppercase mono title
|
| 1337 |
1337 |
|
(NOTE / TIP / IMPORTANT / WARNING / CAUTION). Used in
|
| 1338 |
1338 |
|
docs and longer-form bodies.
|
| 1339 |
|
- |
.info-box informational headed block with h3 + bullet list
|
|
1339 |
+ |
.info-box: informational headed block with h3 + bullet list
|
| 1340 |
1340 |
|
inside forms / wizards (distinct register from .alert).
|
| 1341 |
|
- |
.warning-box loud yellow-on-yellow attention-grabber for
|
|
1341 |
+ |
.warning-box: loud yellow-on-yellow attention-grabber for
|
| 1342 |
1342 |
|
page-level warnings (delete confirms, account
|
| 1343 |
1343 |
|
warnings). Louder than .alert-warning intentionally.
|
| 1344 |
|
- |
.error-message inline form-field error; hidden by default, shown
|
|
1344 |
+ |
.error-message: inline form-field error; hidden by default, shown
|
| 1345 |
1345 |
|
with .is-active. Distinct from page-level .alert. */
|
| 1346 |
1346 |
|
.info-box {
|
| 1347 |
1347 |
|
background: var(--surface-sunken);
|