asw-v01: modern CSS reset, fix README token docs, add watch.py live rebuild
- Rewrite 00-reset.css with :where()-wrapped zero-specificity rules - Fix README token docs (--asw-* was incorrect, actual tokens use bare --*) - Add watch.py (pyinotify-based auto-rebuild of dist/asw.css on src/ changes)
This commit is contained in:
parent
9651dd5515
commit
9fd9096f0a
GPG key ID:
159D6AD58C8E55E9
5 changed files with 290 additions and 82 deletions
30
README.md
30
README.md
|
|
@ -142,25 +142,21 @@ Metadata selectors for machine-generated content.
|
|||
|
||||
### CSS custom properties
|
||||
|
||||
All visual tokens are exposed as `--asw-*` custom properties on `:root`:
|
||||
ASW defines a full set of semantic custom properties on `:root`. Key groups:
|
||||
|
||||
```css
|
||||
--asw-font-sans: 'Segoe UI', system-ui, sans-serif;
|
||||
--asw-font-mono: 'Fira Code', 'Cascadia Code', monospace;
|
||||
--asw-text-1: oklch(15% 0.01 260);
|
||||
--asw-text-2: oklch(35% 0.02 260);
|
||||
--asw-surface-1: oklch(98% 0.003 260);
|
||||
--asw-surface-2: oklch(95% 0.005 260);
|
||||
--asw-surface-3: oklch(90% 0.01 260);
|
||||
--asw-brand: oklch(55% 0.25 260);
|
||||
--asw-link: oklch(45% 0.20 260);
|
||||
--asw-success: oklch(55% 0.20 145);
|
||||
--asw-warning: oklch(65% 0.20 85);
|
||||
--asw-error: oklch(50% 0.25 25);
|
||||
--asw-radius: 6px;
|
||||
```
|
||||
| Group | Examples |
|
||||
|---|---|
|
||||
| Surfaces | `--surface`, `--surface-1`, `--surface-card`, `--surface-hover` |
|
||||
| Text | `--text`, `--text-2`, `--text-3`, `--text-dim` |
|
||||
| Accent | `--accent`, `--accent-hover`, `--on-accent` |
|
||||
| Links | `--link`, `--link-hover`, `--link-underline` |
|
||||
| Borders | `--border`, `--border-subtle` |
|
||||
| Spacing | `--space-1` through `--space-8` |
|
||||
| Typography | `--font-heading`, `--font-mono`, `--font-ui`, `--text-base` |
|
||||
| Layout | `--width-prose`, `--sidebar-min`, `--grid-gap` |
|
||||
| States | `--ok`, `--warn`, `--error`, `--info`, `--blocked` |
|
||||
|
||||
See `src/tokens.css` for the full token table.
|
||||
See `src/tokens.css` for the full table (~70 custom properties).
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
154
dist/asw.css
vendored
154
dist/asw.css
vendored
|
|
@ -606,26 +606,39 @@
|
|||
@media (--xl-n-above) { html { font-size: 106%; } }
|
||||
@media (--xxl-n-above) { html { font-size: 109%; } }
|
||||
/**
|
||||
* 00-reset.css
|
||||
* CSS reset and normalization
|
||||
* Ported from: Pico CSS v2.1.1
|
||||
* 00-reset.css — Modern CSS reset
|
||||
* Normalizes user-agent styles across browsers.
|
||||
*
|
||||
* Based on: Josh W. Comeau (2021-2025), David Bushell (2025),
|
||||
* Andy Bell / Piccalilli (2023), Elad Shechter (2021).
|
||||
*
|
||||
* All selectors wrapped in :where() to zero specificity —
|
||||
* any ASW layer file can override with a single element selector.
|
||||
*
|
||||
* Design-agnostic. No ASW tokens referenced.
|
||||
*/
|
||||
|
||||
/* Box-sizing reset */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
/* ── Box sizing ────────────────────────────────────────────────── */
|
||||
|
||||
:where(*, *::before, *::after) {
|
||||
box-sizing: border-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
::before,
|
||||
::after {
|
||||
text-decoration: inherit;
|
||||
vertical-align: inherit;
|
||||
/* ── Remove default margin (except dialog which uses margin: auto) ── */
|
||||
|
||||
:where(*:not(dialog)) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Document */
|
||||
/* ── Remove default list styling ────────────────────────────────── */
|
||||
|
||||
:where(ul, ol) {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ── Document root ──────────────────────────────────────────────── */
|
||||
|
||||
:where(:root) {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
|
|
@ -633,35 +646,112 @@
|
|||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
tab-size: 4;
|
||||
hanging-punctuation: first allow-end last;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Root font-size — 100% default, responsive scaling in 01-tokens.css */
|
||||
html {
|
||||
font-size: 100%;
|
||||
/* ── Body baseline ──────────────────────────────────────────────── */
|
||||
|
||||
:where(body) {
|
||||
min-block-size: 100svb;
|
||||
min-inline-size: 300px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: var(--text-base); /* 1rem — inherits html responsive scaling */
|
||||
font-family: var(--font-ui);
|
||||
background-color: var(--surface);
|
||||
color: var(--text);
|
||||
/* ── Animations and transitions ─────────────────────────────────── */
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:where(html) {
|
||||
interpolate-size: allow-keywords;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prose font — same neo-grotesque stack, consistent across all contexts */
|
||||
/* article and [data-layout="prose"] inherit body font — no override needed */
|
||||
/* ── Media elements ─────────────────────────────────────────────── */
|
||||
|
||||
/* Article as main content landmark */
|
||||
article[role="main"] {
|
||||
:where(img, picture, video, canvas, svg) {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Nested lists */
|
||||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
||||
margin: 0;
|
||||
/* ── Form controls ──────────────────────────────────────────────── */
|
||||
|
||||
:where(input, button, textarea, select) {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
:where(button) {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
:where(textarea) {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* ── Anchor reset ───────────────────────────────────────────────── */
|
||||
|
||||
:where(a) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ── Typography overflow ────────────────────────────────────────── */
|
||||
|
||||
:where(p, h1, h2, h3, h4, h5, h6, li, figcaption, blockquote) {
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
/* ── Line wrapping quality ──────────────────────────────────────── */
|
||||
|
||||
:where(p, li, figcaption, blockquote) {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
:where(h1, h2, h3, h4, h5, h6) {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* ── Horizontal rule ────────────────────────────────────────────── */
|
||||
|
||||
:where(hr) {
|
||||
border: none;
|
||||
border-top: 1px solid currentColor;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* ── Table ───────────────────────────────────────────────────────── */
|
||||
|
||||
:where(table) {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ── Code / pre ─────────────────────────────────────────────────── */
|
||||
|
||||
:where(pre) {
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
/* ── Focus visible ──────────────────────────────────────────────── */
|
||||
|
||||
:where(:focus-visible) {
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ── Remove default fieldset border ──────────────────────────────── */
|
||||
|
||||
:where(fieldset) {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
/**
|
||||
* 02-semantic.css
|
||||
|
|
|
|||
2
dist/asw.min.css
vendored
2
dist/asw.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,24 +1,37 @@
|
|||
/**
|
||||
* 00-reset.css
|
||||
* CSS reset and normalization
|
||||
* Ported from: Pico CSS v2.1.1
|
||||
* 00-reset.css — Modern CSS reset
|
||||
* Normalizes user-agent styles across browsers.
|
||||
*
|
||||
* Based on: Josh W. Comeau (2021-2025), David Bushell (2025),
|
||||
* Andy Bell / Piccalilli (2023), Elad Shechter (2021).
|
||||
*
|
||||
* All selectors wrapped in :where() to zero specificity —
|
||||
* any ASW layer file can override with a single element selector.
|
||||
*
|
||||
* Design-agnostic. No ASW tokens referenced.
|
||||
*/
|
||||
|
||||
/* Box-sizing reset */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
/* ── Box sizing ────────────────────────────────────────────────── */
|
||||
|
||||
:where(*, *::before, *::after) {
|
||||
box-sizing: border-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
::before,
|
||||
::after {
|
||||
text-decoration: inherit;
|
||||
vertical-align: inherit;
|
||||
/* ── Remove default margin (except dialog which uses margin: auto) ── */
|
||||
|
||||
:where(*:not(dialog)) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Document */
|
||||
/* ── Remove default list styling ────────────────────────────────── */
|
||||
|
||||
:where(ul, ol) {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ── Document root ──────────────────────────────────────────────── */
|
||||
|
||||
:where(:root) {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
|
|
@ -26,33 +39,110 @@
|
|||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
tab-size: 4;
|
||||
hanging-punctuation: first allow-end last;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Root font-size — 100% default, responsive scaling in 01-tokens.css */
|
||||
html {
|
||||
font-size: 100%;
|
||||
/* ── Body baseline ──────────────────────────────────────────────── */
|
||||
|
||||
:where(body) {
|
||||
min-block-size: 100svb;
|
||||
min-inline-size: 300px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: var(--text-base); /* 1rem — inherits html responsive scaling */
|
||||
font-family: var(--font-ui);
|
||||
background-color: var(--surface);
|
||||
color: var(--text);
|
||||
/* ── Animations and transitions ─────────────────────────────────── */
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:where(html) {
|
||||
interpolate-size: allow-keywords;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prose font — same neo-grotesque stack, consistent across all contexts */
|
||||
/* article and [data-layout="prose"] inherit body font — no override needed */
|
||||
/* ── Media elements ─────────────────────────────────────────────── */
|
||||
|
||||
/* Article as main content landmark */
|
||||
article[role="main"] {
|
||||
:where(img, picture, video, canvas, svg) {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Nested lists */
|
||||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
||||
margin: 0;
|
||||
/* ── Form controls ──────────────────────────────────────────────── */
|
||||
|
||||
:where(input, button, textarea, select) {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
:where(button) {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
:where(textarea) {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* ── Anchor reset ───────────────────────────────────────────────── */
|
||||
|
||||
:where(a) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ── Typography overflow ────────────────────────────────────────── */
|
||||
|
||||
:where(p, h1, h2, h3, h4, h5, h6, li, figcaption, blockquote) {
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
/* ── Line wrapping quality ──────────────────────────────────────── */
|
||||
|
||||
:where(p, li, figcaption, blockquote) {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
:where(h1, h2, h3, h4, h5, h6) {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* ── Horizontal rule ────────────────────────────────────────────── */
|
||||
|
||||
:where(hr) {
|
||||
border: none;
|
||||
border-top: 1px solid currentColor;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* ── Table ───────────────────────────────────────────────────────── */
|
||||
|
||||
:where(table) {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ── Code / pre ─────────────────────────────────────────────────── */
|
||||
|
||||
:where(pre) {
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
/* ── Focus visible ──────────────────────────────────────────────── */
|
||||
|
||||
:where(:focus-visible) {
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ── Remove default fieldset border ──────────────────────────────── */
|
||||
|
||||
:where(fieldset) {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
32
watch.py
Normal file
32
watch.py
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
#!/usr/bin/env python3
|
||||
"""Watch src/ for changes and rebuild dist/asw.css."""
|
||||
|
||||
import os
|
||||
import subprocess
|
||||
import pyinotify
|
||||
|
||||
WATCH_DIR = os.path.expanduser("~/projects/asw/src")
|
||||
BUILD_CMD = ["npm", "run", "build"]
|
||||
|
||||
class RebuildHandler(pyinotify.ProcessEvent):
|
||||
def process_default(self, event):
|
||||
if event.name and event.name.endswith(".css"):
|
||||
print(f"[watch] {event.name} changed → rebuilding...")
|
||||
result = subprocess.run(BUILD_CMD, cwd=os.path.dirname(WATCH_DIR),
|
||||
capture_output=True, text=True)
|
||||
if result.returncode == 0:
|
||||
print("[watch] Build OK")
|
||||
else:
|
||||
print(f"[watch] Build FAILED:\n{result.stderr}")
|
||||
|
||||
def main():
|
||||
wm = pyinotify.WatchManager()
|
||||
mask = pyinotify.IN_MODIFY | pyinotify.IN_CREATE | pyinotify.IN_DELETE
|
||||
handler = RebuildHandler()
|
||||
notifier = pyinotify.Notifier(wm, handler)
|
||||
wm.add_watch(WATCH_DIR, mask, rec=True)
|
||||
print(f"[watch] Watching {WATCH_DIR} for changes. Ctrl+C to stop.")
|
||||
notifier.loop()
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
Loading…
Add table
Add a link
Reference in a new issue