B.A. Baracus
a433b935fa
- 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)
36 lines
1.8 KiB
Markdown
36 lines
1.8 KiB
Markdown
## 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)
|