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)
This commit is contained in:
parent
e47a9f4401
commit
a433b935fa
16 changed files with 6644 additions and 120 deletions
36
openspec/changes/asw-v01-release/specs/native-tokens/spec.md
Normal file
36
openspec/changes/asw-v01-release/specs/native-tokens/spec.md
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
## 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)
|
||||
Loading…
Add table
Add a link
Reference in a new issue