@axiapps/axi-design 1.9.0 → 1.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +48 -10
  2. package/dist/axi.css +559 -30
  3. package/dist/themes/glass.css +11 -0
  4. package/docs/RULES.md +157 -17
  5. package/package.json +8 -4
  6. package/src/base.css +2 -0
  7. package/src/feedback.css +67 -0
  8. package/src/forms.css +89 -0
  9. package/src/primitives.css +162 -16
  10. package/src/prose.css +1 -1
  11. package/src/shells.css +209 -13
  12. package/src/tokens.css +25 -0
  13. package/docs/superpowers/plans/2026-09-23-axi-docs-site.md +0 -2376
  14. package/docs/superpowers/specs/2026-09-23-axi-docs-site-design.md +0 -333
package/README.md CHANGED
@@ -48,9 +48,35 @@ Either way, set your accent:
48
48
  :root { --axi-accent: #b06bff; }
49
49
  ```
50
50
 
51
- That is the whole theming surface. See [the pattern
52
- gallery](https://darkharasho.github.io/axi-design/) for every component, with a
53
- live accent switcher.
51
+ That is the whole theming surface. See [the documentation
52
+ site](https://darkharasho.github.io/axi-design/) for every component, with live
53
+ accent and theme switchers in the masthead. `/gallery/` still holds the
54
+ everything-at-once view.
55
+
56
+ ### A different look, without carrying one
57
+
58
+ If the flat dark ground is not what your app wants, import a theme beside the
59
+ stylesheet and set one attribute:
60
+
61
+ ```js
62
+ import '@axiapps/axi-design/axi.css'
63
+ import '@axiapps/axi-design/themes/glass.css'
64
+ ```
65
+
66
+ ```html
67
+ <html data-axi-theme="glass">
68
+ ```
69
+
70
+ `glass` keeps the outline, the hard block and every ink exactly as they are,
71
+ and repaints the surface layer: translucent panels over a colder ground, with
72
+ popovers, drawers and modals blurring what sits behind them. Remove the
73
+ attribute and you are back on the main theme with no other change — a theme
74
+ restates tokens and never adds a component, so nothing in your markup knows
75
+ which one is on. That is the point: the look is maintained here rather than
76
+ copied into your app as a custom theme that then has to be kept in step.
77
+
78
+ The main theme is the language and a theme is a repaint of it — [the
79
+ rules](docs/RULES.md#themes) say what a theme may and may not do.
54
80
 
55
81
  ## Per-instance knobs
56
82
 
@@ -61,11 +87,19 @@ meaningless for most of them, because they answer "how wide is *this* grid",
61
87
  not "what does the system look like". Everything else is
62
88
  [`docs/RULES.md`](docs/RULES.md) territory.
63
89
 
90
+ <!-- axi:knobs -->
64
91
  | Knob | Sets | Fallback | Example |
65
92
  |---|---|---|---|
66
93
  | `--axi-pill-fill` | the fill a pressed `.axi-pill` takes | `var(--axi-accent)` | `<button class="axi-pill" aria-pressed="true" style="--axi-pill-fill: var(--axi-danger)">` |
67
94
  | `--axi-switch-fill` | the fill an on `.axi-switch` takes | `var(--axi-accent)` | `<button class="axi-switch" aria-checked="true" style="--axi-switch-fill: var(--axi-danger)">` |
68
- | `--axi-switch-w` / `--axi-switch-h` / `--axi-switch-knob` | a `.axi-switch`'s track and slug size | `46px` / `26px` / `16px` | `<button class="axi-switch" style="--axi-switch-w: 32px; --axi-switch-h: 18px; --axi-switch-knob: 11px">` |
95
+ | `--axi-switch-w` | a `.axi-switch`'s track width | `46px` | `<button class="axi-switch" style="--axi-switch-w: 32px">` |
96
+ | `--axi-switch-h` | a `.axi-switch`'s track height | `26px` | `<button class="axi-switch" style="--axi-switch-h: 18px">` |
97
+ | `--axi-switch-knob` | a `.axi-switch`'s slug (knob) size | `16px` | `<button class="axi-switch" style="--axi-switch-knob: 11px">` |
98
+ | `--axi-check-size` | the size of an `.axi-check` or `.axi-radio` box | `22px` | `<input type="checkbox" class="axi-check" style="--axi-check-size: 16px">` |
99
+ | `--axi-check-fill` | the fill a checked `.axi-check` takes, and the colour of a checked `.axi-radio`'s diamond | `var(--axi-accent)` | `<input type="checkbox" class="axi-check" style="--axi-check-fill: var(--axi-danger)">` |
100
+ | `--axi-textarea-h` | the minimum height of a `<textarea class="axi-input">` | `90px` | `<textarea class="axi-input" style="--axi-textarea-h: 200px">` |
101
+ | `--axi-avatar-size` | the size of an `.axi-avatar` square | `40px` | `<span class="axi-avatar" style="--axi-avatar-size: 28px">MS</span>` |
102
+ | `--axi-modal-width` | the maximum width of an `.axi-modal`, before the viewport clamp | `560px` | `<dialog class="axi-modal" style="--axi-modal-width: 760px">` |
69
103
  | `--axi-card-strip` | the colour of `.axi-card--strip`'s top strip | `var(--axi-accent)` | `<a class="axi-card axi-card--strip" style="--axi-card-strip: var(--axi-ok)">` |
70
104
  | `--axi-grid-min` | minimum column width in `.axi-grid` | `300px` | `<div class="axi-grid" style="--axi-grid-min: 240px">` |
71
105
  | `--axi-row-gap` | gap between `.axi-row` children | `10px` | `<div class="axi-row" style="--axi-row-gap: 6px">` |
@@ -77,14 +111,18 @@ not "what does the system look like". Everything else is
77
111
  | `--axi-series` | the ink a meter fill, bar, plot line or `.axi-diamond--series` is drawn in | `var(--axi-accent)` | `<span class="axi-meter__fill" style="--axi-series: var(--axi-ok)">` |
78
112
  | `--axi-meter-v` | how full one `.axi-meter__fill` is | `0%` | `<span class="axi-meter__fill" style="--axi-meter-v: 62%">` |
79
113
  | `--axi-meter-h` | height of a `.axi-meter` | `12px` | `<div class="axi-meter" style="--axi-meter-h: 18px">` |
80
- | `--axi-meter-label` / `--axi-meter-value` | the outer column widths of `.axi-meter-list` | `132px` / `62px` | `<div class="axi-meter-list" style="--axi-meter-label: 180px">` |
114
+ | `--axi-meter-label` | the label column width of `.axi-meter-list` | `132px` | `<div class="axi-meter-list" style="--axi-meter-label: 180px">` |
115
+ | `--axi-meter-value` | the value column width of `.axi-meter-list` | `62px` | `<div class="axi-meter-list" style="--axi-meter-value: 80px">` |
81
116
  | `--axi-bar-v` | height of one `.axi-bars__col` | `0%` | `<div class="axi-bars__col" style="--axi-bar-v: 78%">` |
82
117
  | `--axi-bar-part` | height of one `.axi-bars__part` within its column | `0%` | `<span class="axi-bars__part" style="--axi-bar-part: 40%">` |
83
118
  | `--axi-bars-gap` | gap between columns in `.axi-bars` | `6px` | `<div class="axi-bars" style="--axi-bars-gap: 2px">` |
84
119
  | `--axi-plot-h` | height of a `.axi-plot` or `.axi-bars` | `180px` | `<div class="axi-plot" style="--axi-plot-h: 240px">` |
85
120
  | `--axi-plot-rows` | how many horizontal rules a `.axi-plot` draws | `4` | `<div class="axi-plot" style="--axi-plot-rows: 6">` |
86
- | `--axi-tick-w` / `--axi-tick-h` | size of one `.axi-ticks__tick` | `5px` / `15px` | `<div class="axi-ticks" style="--axi-tick-w: 7px">` |
87
- | `--axi-ticks-gap` | gap between marks in `.axi-ticks` | `3px` | `<div class="axi-ticks" style="--axi-ticks-gap: 2px">` |
121
+ | `--axi-tick-w` | the width of one `.axi-ticks__tick` | `5px` | `<div class="axi-ticks" style="--axi-tick-w: 7px">` |
122
+ | `--axi-tick-h` | the height of an `.axi-ticks` strip, and so of every mark in it | `15px` | `<div class="axi-ticks" style="--axi-tick-h: 22px">` |
123
+ | `--axi-ticks-gap` | the gap between marks in `.axi-ticks` | `3px` | `<div class="axi-ticks" style="--axi-ticks-gap: 2px">` |
124
+ | `--axi-spinner-size` | the size of an `.axi-spinner` | `20px` | `<span class="axi-spinner" style="--axi-spinner-size: 34px"></span>` |
125
+ <!-- /axi:knobs -->
88
126
 
89
127
  `--axi-page-pad: 0` is the one to know about: it is how a measure nested
90
128
  inside another measure avoids paying the gutter twice.
@@ -105,9 +143,9 @@ version I built against" — and a bundling app should always prefer the second.
105
143
 
106
144
  ```bash
107
145
  npm install
108
- npm run build # src/*.css -> dist/axi.css
109
- npx vitest run --pool=forks --poolOptions.forks.maxForks=2
110
- python3 -m http.server # then open the gallery at /
146
+ npm run build # src/*.css -> dist/axi.css
147
+ npm test
148
+ npm run serve # builds the docs site and serves it at http://localhost:4173
111
149
  ```
112
150
 
113
151
  `dist/axi.css` is committed, because the release workflow publishes that exact