nordaaker/web
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

CSS / markup consistency pass: drop np-, default-style tables, semantic shell, codify rules #2

Merged
arne merged 13 commits from consistency/design-system-dedup into main 2026-05-01 22:24:01 +02:00
Conversation 0 Commits 13 Files changed 8 +266 -220
arne commented 2026-05-01 21:37:24 +02:00
Owner
Copy link

Eight focused commits. The branch was force-reset against main; the
earlier .ds-cell extraction is gone. Each commit is independently
reviewable.

What's in scope

A consistency / hygiene pass on the CSS and markup. No tokens get
new meanings, no components get new visuals, no Go code changes. The
goal is to make the codebase coherent before it grows.

Naming rules adopted (codified in components.css header)

  1. Default styling first — table/th/td/dl/dt/dd styled directly.
  2. Descendant selectors over compound classes — `.shell .brand`, not `.shell-brand`.
  3. Classes earn their place only when they add meaning the cascade can't.
  4. No prefix on production components; `ds-` for design-page-only.
  5. No BEM. Flat names.
  6. Single-dash for visual variants (`.btn-primary`); `.is-` for runtime state.

Commits (eight, in order)

  1. `refactor(css): drop np- prefix on card components` — the np- prefix was on a 5-class island; dropped. `.np-card--flush` BEM becomes `.card-flush`.
  2. `refactor(css): default-style tables, drop .np-table` — every table in the app uses one style; style `table/th/td` directly. `.is-clickable` → `.clickable` (fixed variant, not runtime state). `.records-table` deleted; column widths come from ``.
  3. `refactor(css): standardize state class to .is-active` — `.tab.active` and `.nav-item.active` join the project's `.is-active` convention.
  4. `refactor(css): is-naked → is-bare, editor-row.head → editor-row-head` — clearer English; .head was masquerading as state.
  5. `refactor(css): hoist editor composite to components.css` — `.editor-row`, `.editor-frame` (was `.ds-editor-frame`), `.editor-add` (was `.ds-editor-add`), `.row-actions`, `.pending-bar` move out of design.html so future pages can consume them.
  6. `refactor(design): context-drive demo cells` — drop `.logo-cell`, `.token-cell`. `.logo-grid > *` styles its children. Markup gets simpler. Drops dead `.ds-specimen-stage.dark`.
  7. `refactor(tokens): --fg-on-accent → --fg-inverse, --border-strong → --border-4` — semantic outliers in numeric scales.
  8. `refactor: replace console-shell BEM with semantic .shell` — the biggest single change. Production sidebar becomes `...` (because it IS a header — top bar on mobile, side rail on desktop). Five BEM classes (.console-shell + 4 `__` children) collapse to one `.shell` plus descendant selectors on semantic HTML. Grid in two places (outer columns, header rows). Codifies the six naming rules in the components.css header.

Test plan

  • `go build ./...`
  • `go test ./...` — clean after every commit
  • `gofmt -l .` and `go vet ./...` clean
  • Server boots against fixtures; /zones, /zones/{zone}, /design, /static/css/components.css, /static/css/tokens.css all 200
  • Rendered pages contain no `np-`, no `console-shell`, no `ds-editor-` class references
  • Eyeball /design + /zones + /zones/{zone}: layout intact, sidebar renders correctly (now `` element), tables look right, section 11 editor frame, section 12 rail demo, section 9 records table corners.

What's NOT in this branch

  • Mobile responsive — `.shell` is structured to support it (grid template can swap), but no @media queries added.
  • Component extraction beyond what was already there.
  • Behavioral changes.
Eight focused commits. The branch was force-reset against main; the earlier `.ds-cell` extraction is gone. Each commit is independently reviewable. ## What's in scope A consistency / hygiene pass on the CSS and markup. **No tokens get new meanings, no components get new visuals, no Go code changes.** The goal is to make the codebase coherent before it grows. ## Naming rules adopted (codified in components.css header) 1. Default styling first — table/th/td/dl/dt/dd styled directly. 2. Descendant selectors over compound classes — \`.shell .brand\`, not \`.shell-brand\`. 3. Classes earn their place only when they add meaning the cascade can't. 4. No prefix on production components; \`ds-\` for design-page-only. 5. No BEM. Flat names. 6. Single-dash for visual variants (\`.btn-primary\`); \`.is-\` for runtime state. ## Commits (eight, in order) 1. \`refactor(css): drop np- prefix on card components\` — the np- prefix was on a 5-class island; dropped. \`.np-card--flush\` BEM becomes \`.card-flush\`. 2. \`refactor(css): default-style tables, drop .np-table\` — every table in the app uses one style; style \`table/th/td\` directly. \`.is-clickable\` → \`.clickable\` (fixed variant, not runtime state). \`.records-table\` deleted; column widths come from \`<col class="c-*">\`. 3. \`refactor(css): standardize state class to .is-active\` — \`.tab.active\` and \`.nav-item.active\` join the project's \`.is-active\` convention. 4. \`refactor(css): is-naked → is-bare, editor-row.head → editor-row-head\` — clearer English; .head was masquerading as state. 5. \`refactor(css): hoist editor composite to components.css\` — \`.editor-row\`, \`.editor-frame\` (was \`.ds-editor-frame\`), \`.editor-add\` (was \`.ds-editor-add\`), \`.row-actions\`, \`.pending-bar\` move out of design.html so future pages can consume them. 6. \`refactor(design): context-drive demo cells\` — drop \`.logo-cell\`, \`.token-cell\`. \`.logo-grid > *\` styles its children. Markup gets simpler. Drops dead \`.ds-specimen-stage.dark\`. 7. \`refactor(tokens): --fg-on-accent → --fg-inverse, --border-strong → --border-4\` — semantic outliers in numeric scales. 8. \`refactor: replace console-shell BEM with semantic .shell\` — the biggest single change. Production sidebar becomes \`<body class="shell"><header>...\` (because it IS a header — top bar on mobile, side rail on desktop). Five BEM classes (.console-shell + 4 \`__\` children) collapse to one \`.shell\` plus descendant selectors on semantic HTML. Grid in two places (outer columns, header rows). Codifies the six naming rules in the components.css header. ## Test plan - [x] \`go build ./...\` - [x] \`go test ./...\` — clean after every commit - [x] \`gofmt -l .\` and \`go vet ./...\` clean - [x] Server boots against fixtures; /zones, /zones/{zone}, /design, /static/css/components.css, /static/css/tokens.css all 200 - [x] Rendered pages contain no \`np-\`, no \`console-shell\`, no \`ds-editor-\` class references - [ ] **Eyeball /design + /zones + /zones/{zone}**: layout intact, sidebar renders correctly (now \`<header>\` element), tables look right, section 11 editor frame, section 12 rail demo, section 9 records table corners. ## What's NOT in this branch - Mobile responsive — \`.shell\` is structured to support it (grid template can swap), but no @media queries added. - Component extraction beyond what was already there. - Behavioral changes.
The /design page was redefining production components in its own <style>
block and duplicating the same rounded-surface tokens across four
demo-cell classes. Two follow-ups from PR #1:

1. Move the DNS editor composite (editor-frame, editor-row[.head|.is-active|
   .input], editor-add, row-actions, pending-bar) from design.html into
   components.css. Drop the page-local ds- prefix on .ds-editor-frame and
   .ds-editor-add — the rest were already unprefixed. Future pages can now
   actually consume the composite that section 11 demonstrates.

2. Extract a single .ds-cell base for the rounded surface (bg-raised +
   border-1 + radius-md) shared by .ds-specimen-stage, .logo-cell,
   .token-cell, and .sidebar-demo. Layout (padding, flex, sizing) stays
   on the named class. Markup gains the .ds-cell base; .logo-cell.dark
   becomes .logo-cell.is-dark to match the project's is- modifier
   convention. Drop dead .ds-specimen-stage.dark — never used in markup.

Verified: go test ./..., gofmt -l ., go vet clean. /zones, /zones/{zone},
and /design return 200 against fixtures. No browser-level visual diff
performed — please eyeball the design page before merging.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
arne force-pushed consistency/design-system-dedup from f6b22b4a9e to 2e2a06abf2 2026-05-01 22:13:44 +02:00 Compare
arne changed title from Hoist editor composite, share .ds-cell across demo cells to CSS / markup consistency pass: drop np-, default-style tables, semantic shell, codify rules 2026-05-01 22:14:14 +02:00 
<div class="tab"> and <div class="nav-item"> were both wrong — these are
navigation. <nav class="tabs"> with <a> children, and <nav> inside the
sidebar specimen with <a> children, match the production .shell pattern
and let the cascade do the styling work (.tabs a, .sidebar-demo nav a).

The .tab class is gone; tabs styling now hangs off .tabs a. The
.nav-item class is gone; sidebar-demo nav uses .sidebar-demo nav a with
aria-current="page" for the active item — matching how production .shell
nav already marks the current page.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Tabs trigger in-page panel switches, not navigation — <button type="button">
is the honest element. Drop the <nav> wrapper too (the spec scopes <nav>
to "navigation links"; tabs aren't links).

CSS resets the browser-default button chrome (background, border, font)
inside .tabs, then applies the same underline-on-active treatment that
was on .tabs a.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Previous commit dropped <nav> on the assumption tabs aren't navigation.
That was over-restrictive — the HTML spec's <nav> content model is flow
content, so <button> children are valid, and tabs do navigate between
sections of content. <nav class="tabs"> with <button> children.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
<button> defaults to type=submit only inside a <form>; nothing in this
project sits inside one, so the attribute was defensive noise. Drop it
from the tabs (just added) and the theme toggles (carried over from the
initial commit).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
100vh on iOS Safari counts the area behind the dynamic URL bar, which
made the sticky sidebar overflow the visible viewport on iPad and
trigger page-level scroll. 100dvh tracks the visible height and
recalculates as chrome shows/hides, so the sidebar always fits.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
arne merged commit 6bb0f4e18a into main 2026-05-01 22:24:01 +02:00
arne deleted branch consistency/design-system-dedup 2026-05-01 22:24:01 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
nordaaker/web!2
No description provided.