trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

asw-v01: drop OpenProps, native CSS tokens system

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

42
openspec/changes/asw-v01-release/specs/flexbox-layouts/spec.md Normal file
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`)

36
openspec/changes/asw-v01-release/specs/native-tokens/spec.md Normal file
View 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)

37
openspec/changes/asw-v01-release/specs/reference-templates/spec.md Normal file
View file

@ -0,0 +1,37 @@
## ADDED Requirements
### Requirement: Templates are standalone HTML files
Each template SHALL be a single `.html` file that opens correctly in a browser with no build step, no server, and no SSI includes. All CSS references SHALL be relative paths or absolute URLs.
#### Scenario: Template opens without errors
- **WHEN** any template HTML file is opened in a browser
- **THEN** it MUST display styled content with no JavaScript errors and no missing resource warnings
### Requirement: Templates use semantic HTML only
Templates SHALL use semantic HTML elements (`<nav>`, `<main>`, `<article>`, `<section>`, `<header>`, `<footer>`, `<aside>`) for structure. No `<div class="...">` wrapper pattern.
#### Scenario: Templates contain zero class attributes for layout
- **WHEN** any template is scanned for `class=` attributes
- **THEN** any class attributes found MUST only be for Prism.js syntax highlighting or other non-layout purposes
### Requirement: Templates demonstrate flexbox layouts
Each template SHALL use at least one `data-layout` flexbox attribute for its primary layout structure, demonstrating the flexbox layout system is functional.
#### Scenario: Each template uses data-layout for structure
- **WHEN** any template is inspected
- **THEN** it MUST contain at least one `data-layout` attribute on a structural element
### Requirement: Template set covers common page types
The 0.1 release SHALL include at minimum the following templates:
| Template | Description |
|---|---|
| `index.html` | Landing/hero page — full-width hero, feature cards, CTA |
| `docs.html` | Documentation layout — sidebar nav + main content area |
| `article.html` | Long-form prose — reading-optimized width, blockquotes, code |
| `dashboard.html` | Stats/dashboard — stats grid, data display, status indicators |
| `tasks.html` | Vault/tasks page — task list with data-task attributes |
#### Scenario: All five template files exist
- **WHEN** the `templates/` directory is listed
- **THEN** all five template files SHALL be present as `.html` files