trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
asw/openspec/changes/asw-v01-release/tasks.md
B.A. Baracus a433b935fa
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

2.7 KiB
Raw Blame History

1. Token System — Replace OpenProps with Native CSS

  • 1.1 Create src/tokens.css with all ~40 native oklch custom properties (colors, sizes, spacing, fonts, easings). Copy needed values from OpenProps under MIT license.
  • 1.2 Update src/main.css — remove @import "open-props/..." lines, add @import "./tokens.css" header.
  • 1.3 Audit all 13 layer files (02-12) — remove any remaining OpenProps primitive references (--size-N, --gray-N, --ease-N, etc.), replace with sem tokens from tokens.css.
  • 1.4 Remove "open-props" from package.json. Remove postcss-import from postcss.config.js and package.json.
  • 1.5 Build and verify: postcss src/main.css -o dist/asw.css succeeds, output under 10KB minified.

2. Archive Deferred Content

  • 2.1 Create archive/ directory. Move packs/ → archive/packs/.
  • 2.2 Move site/ → archive/site/.
  • 2.3 Move src/lab/ → archive/lab/.
  • 2.4 Move legacy examples (SSI-based) → archive/examples-legacy/. Ensure nothing is deleted from git.

3. Flexbox Layout System

  • 3.1 Add data-layout="row" CSS rule — flexbox horizontal with wrap.
  • 3.2 Add data-layout="col" and data-layout="stack" CSS rules — vertical flex with gap.
  • 3.3 Add data-layout="spread" and data-layout="center" CSS rules — justify-content/align-items patterns.
  • 3.4 Add responsive wrapping behavior for narrow viewports (breakpoint at 640px).

4. Build Working Templates

  • 4.1 Create templates/index.html — landing/hero page with data-layout="col stack spread center", semantic nav, feature cards.
  • 4.2 Create templates/docs.html — documentation layout with sidebar nav + main content area using flexbox.
  • 4.3 Create templates/article.html — long-form prose layout with code blocks, blockquotes, footnotes.
  • 4.4 Create templates/dashboard.html — stats grid with data-layout="row spread", status indicators, charts.
  • 4.5 Create templates/tasks.html — vault-style task tracking page with data-task attributes.
  • 4.6 Verify each template opens in browser with no errors and no SSI includes.

5. Release Prep

  • 5.1 Rewrite README.md for 0.1 — "link this one CSS file" instructions, quick start, vocabulary, roadmap.
  • 5.2 Create CHANGELOG.md with 0.1 entry — Breaking: dropped OpenProps, new token system, archive restructuring.
  • 5.3 Final build: npm run build && npm run build:min. Verify dist/asw.css and dist/asw.min.css exist and are under 10KB.
  • 5.4 Git commit all changes with message asw-v01: framework core, native tokens, templates, archive deferral.
  • 5.5 Tag v0.1: git tag -a v0.1 -m "ASW 0.1 — Framework core with native tokens and reference templates".