trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
asw/openspec/changes/asw-v01-release/specs/native-tokens/spec.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

1.8 KiB
Raw Blame History

ADDED Requirements

Requirement: Token system imports no external CSS

The token file SHALL NOT use @import to pull in any external CSS library. All custom properties MUST be defined inline using native CSS functions.

Scenario: Zero external imports

  • WHEN the token CSS file is inspected
  • THEN it MUST contain zero @import statements

Requirement: Color tokens use oklch color space

All color custom properties SHALL use the oklch() color function. No hex, no rgb(), no hsl().

Scenario: All colors are oklch

  • WHEN any --*-color or --*-bg or --*-surface custom property is inspected
  • THEN its value MUST be a valid oklch() function

Requirement: Token set covers all ASW layer references

The token system MUST define every custom property referenced by CSS layers 02 through 12. No layer file SHALL reference an undefined custom property.

Scenario: Layer files compile without warnings

  • WHEN PostCSS compiles src/main.css
  • THEN the build MUST succeed with no warnings about undefined variables

Requirement: Token values are semantically named

Token names SHALL describe the semantic role, not the presentation value. E.g., --surface-page not --gray-3. --text-body not --font-size-1.

Scenario: No OpenProps primitive names in layer files

  • WHEN any CSS layer file (02-12) is searched for OpenProps-style names (e.g., --size-, --gray-, --red-, --ease-)
  • THEN no matches SHALL be found outside of the token file

Requirement: Reduced baseline CSS size

The token system SHALL produce a CSS output smaller than the current OpenProps baseline (currently ~25KB for OpenProps imports + ASW layers).

Scenario: Output size under 10KB minified

  • WHEN dist/asw.min.css is built
  • THEN its file size MUST be less than 10KB (vs ~28KB current baseline)