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:
B.A. Baracus 2026-06-07 10:43:34 +02:00
parent e47a9f4401
commit a433b935fa
Signed by: ba
GPG key ID: D52E9C8491872206
16 changed files with 6644 additions and 120 deletions

View file

@ -0,0 +1,42 @@
## ADDED Requirements
### Requirement: Layouts are invoked via `data-layout` attributes
All layout patterns SHALL be activated through `data-layout` attribute values on HTML elements. No CSS classes or inline styles SHALL be required to produce a layout.
#### Scenario: data-layout="row" creates horizontal flex container
- **WHEN** an element has `data-layout="row"` (e.g., `<nav data-layout="row">`)
- **THEN** the element MUST have `display: flex` and `flex-direction: row`
#### Scenario: data-layout="col" creates vertical flex container
- **WHEN** an element has `data-layout="col"`
- **THEN** the element MUST have `display: flex` and `flex-direction: column`
#### Scenario: data-layout="spread" distributes items across the main axis
- **WHEN** an element has `data-layout="spread"`
- **THEN** it MUST have `display: flex`, `justify-content: space-between`, and `align-items: center`
#### Scenario: data-layout="center" centers items on both axes
- **WHEN** an element has `data-layout="center"`
- **THEN** it MUST have `display: flex`, `align-items: center`, and `justify-content: center`
#### Scenario: data-layout="stack" creates a vertical column with gap
- **WHEN** an element has `data-layout="stack"`
- **THEN** it MUST have `display: flex`, `flex-direction: column`, and a `gap` value using the ASW spacing token
### Requirement: Existing grid layouts are preserved
The existing `data-layout="grid-2"` and `data-layout="grid-3"` patterns from the current framework SHALL continue to work unchanged.
#### Scenario: grid-2 creates 2-column CSS grid
- **WHEN** an element has `data-layout="grid-2"`
- **THEN** it MUST have `display: grid` and `grid-template-columns: repeat(2, 1fr)`
#### Scenario: grid-3 creates 3-column CSS grid
- **WHEN** an element has `data-layout="grid-3"`
- **THEN** it MUST have `display: grid` and `grid-template-columns: repeat(3, 1fr)`
### Requirement: Flexbox layouts are responsive by default
All flexbox layout patterns SHALL wrap on narrow viewports unless explicitly prevented.
#### Scenario: Row wraps on small screens
- **WHEN** `data-layout="row"` is displayed on a viewport narrower than 640px
- **THEN** its items MUST wrap to a new line (`flex-wrap: wrap`)