asw/openspec/changes/asw-v01-release/proposal.md at main

asw-v01: drop OpenProps, native CSS tokens system

- Replace OpenProps (~25KB) with native src/tokens.css (~40 tokens)
- Remove open-props, postcss-import from package.json + postcss.config
- Update main.css: remove @import open-props/*, import ./tokens.css
- Rewrite 01-tokens.css header to reference tokens.css
- All raw OpenProps values (font stacks, sizes, weights, colors,
  easings, durations, shadows, radii, animations, media queries)
  now defined natively in tokens.css
- Build uses cat concat + cssnano (no postcss-import needed)
- Build output: 78KB minified (saved ~24KB from OpenProps removal)

2026-06-07 10:43:34 +02:00

3.2 KiB

Raw Permalink Blame History

Why

ASW has been in experimental development — a working CSS framework buried inside a Hugo documentation site, with 7 engine packs, lab experiments, a PostCSS build pipeline, and SSI-based examples that don't work standalone. The framework itself is solid (semantic HTML + data-attributes), but it's not publishable as v0.1 because:

Bloat: It ships OpenProps (~25KB) while only using ~40 of 500+ tokens
No working templates: The examples directory uses SSI () — they don't open in a browser
Obscured core: The framework lives in 13 CSS layers, buried under Hugo templates, packs, and experiments
No clear dev path: A new developer lands and sees Hugo + PostCSS + packs and doesn't know what ASW is

0.1 is the "minimum viable framework" — just the CSS, a handful of working templates, and a clear README. Everything else stays in the repo for 0.2 (documentation site) and 0.3 (engine packs).

What Changes

Drop OpenProps dependency — replace with hand-authored native CSS token system using oklch() and relative color syntax. Removes open-props from package.json, removes postcss-import of OpenProps. Framework goes from ~25KB baseline to ~4KB.
Prune repo surface — move packs/, src/lab/, and site/ into archive/ directory. No deletion. Everything stays in git.
Simplify build — PostCSS stays for minification (cssnano), but no OpenProps import. postcss-import may become optional.
5-6 working standalone HTML templates — semantic HTML, flexbox via data-layout attributes. No SSI. No Hugo. Open in a browser and they work.
New README + CHANGELOG — "link this one CSS file" documentation. Roadmap forward.
Vendor the used OpenProps values — copy the ~40 tokens we actually use into our token file (MIT license, legally clean).

Capabilities

New Capabilities

native-tokens: The design token system — oklch-based colors, size scales, spacing, typography. Zero external dependencies. Powers all ASW styling.
flexbox-layouts: Layout system via data-layout attributes. Pure flexbox. data-layout="row", data-layout="col", data-layout="spread", data-layout="center", data-layout="stack", etc.
reference-templates: Standalone HTML files that demonstrate the framework — landing page, docs page, prose/article, stats/dashboard, vault/tasks page.

Modified Capabilities

(No existing spec-level requirements are changing — we're replacing the token foundation and adding new layout/template capabilities)

Impact

File / Directory	Action
`package.json`	Remove `open-props` dependency
`postcss.config.js`	Remove `postcss-import` (no longer needed)
`src/main.css`	Remove OpenProps `@import` lines, update layer imports
`src/layers/01-tokens.css`	Replace OpenProps primitives with native oklch values
`dist/asw.css`	Rebuild — drops from ~28KB to ~6KB
`packs/`	Move to `archive/packs/`
`src/lab/`	Move to `archive/lab/`
`site/`	Move to `archive/site/`
`examples/`	Replace SSI-based examples with standalone templates
`README.md`	Rewrite for 0.1 — "link this one file"
`CHANGELOG.md`	New file

3.2 KiB Raw Permalink Blame History

Why