maverick-wave 4.12.0 → 4.14.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.
- package/.claude/skills/maverick-wave/SKILL.md +21 -1
- package/.claude/skills/maverick-wave/references/components.md +31 -3
- package/.claude/skills/maverick-wave/references/layout.md +10 -0
- package/.claude/skills/maverick-wave/references/theming.md +44 -43
- package/CHANGELOG.md +12 -0
- package/maverick-wave.min.css +3 -3
- package/package.json +2 -2
- package/src/partials/accordions-container.html +1 -1
- package/src/partials/buttons-container.html +24 -1
- package/src/partials/code-container.html +2 -8
- package/src/partials/footer-container.html +1 -7
- package/src/partials/grid-container.html +68 -48
- package/src/partials/tabs-container.html +1 -1
- package/src/partials/utilities-container.html +45 -26
- package/src/scss/abstracts/_mixins.scss +87 -0
- package/src/scss/abstracts/_variables.scss +7 -0
- package/src/scss/components/_accordions.scss +1 -1
- package/src/scss/components/_buttons.scss +6 -10
- package/src/scss/components/_calendar.scss +1 -1
- package/src/scss/components/_cards.scss +1 -2
- package/src/scss/components/_index.scss +1 -0
- package/src/scss/components/_kanban.scss +1 -1
- package/src/scss/components/_links.scss +35 -0
- package/src/scss/components/_modals.scss +1 -1
- package/src/scss/components/_pagination.scss +1 -1
- package/src/scss/components/_panels.scss +10 -1
- package/src/scss/components/_tiles.scss +1 -2
- package/src/scss/form-elements/_login.scss +1 -2
- package/src/scss/utilities/_corner.scss +8 -0
- package/src/scss/utilities/_index.scss +1 -0
|
@@ -155,6 +155,14 @@ keys at all (negative gap is invalid CSS and is not generated).
|
|
|
155
155
|
|
|
156
156
|
**Radius** (`mw-radius-none|xs|sm|md|lg|xl|2xl|full`): 0, 2, 5, 10, 15, 20, 30 px, 50%.
|
|
157
157
|
|
|
158
|
+
**The surface signature.** Every panel-like component - card, panel, modal,
|
|
159
|
+
accordion, tile, calendar, pagination, login box - shares one silhouette: sharp
|
|
160
|
+
5px corners on the top-left/bottom-right diagonal, round 20px ones on the other,
|
|
161
|
+
plus a 2px **corner accent** in the primary tone (`--mw-corner-accent`) sitting
|
|
162
|
+
on the two round corners. It is not a class and not opt-in; the components carry
|
|
163
|
+
it. `mw-corner-plain` drops the accent on a box too small to hold it - see
|
|
164
|
+
`references/layout.md`.
|
|
165
|
+
|
|
158
166
|
**Elevation** (`mw-elevation-0` … `-5`, and `var(--mw-elevation-N)` inside SCSS).
|
|
159
167
|
Two shadows per level - a tight contact layer plus a wide ambient one:
|
|
160
168
|
`1` resting (inputs, tags), `2` raised (cards, panels at rest), `3` floating
|
|
@@ -187,7 +195,8 @@ Everything below is documented in `references/components.md` unless marked other
|
|
|
187
195
|
|
|
188
196
|
**Actions** `mw-btn` (+ `primary`, `secondary`, `danger`, `success`, `outline`,
|
|
189
197
|
`ghost`, `ghost-danger`, `link`, `link-muted`, `plain`, `icon`, `block`, `sm`,
|
|
190
|
-
`lg`) · `mw-btn-mini` · `mw-
|
|
198
|
+
`lg`) · `mw-btn-mini` · `mw-link` / `mw-link-muted` (the link in running text) ·
|
|
199
|
+
`mw-button-bar`
|
|
191
200
|
(+ `left`, `right`, `center`, `between`) · `mw-segmented` · `mw-actions-note`
|
|
192
201
|
|
|
193
202
|
**Containers** `mw-card` (+ `simple`, `lg`, `xl`, `stack`, badge, ribbon,
|
|
@@ -229,6 +238,7 @@ feature frame) ·
|
|
|
229
238
|
`mw-text-currency` · `mw-text-truncate` / `mw-text-clamp-2..5` /
|
|
230
239
|
`mw-text-break` / `mw-text-nowrap` · `mw-text-balance` / `mw-text-pretty` /
|
|
231
240
|
`mw-text-eyebrow` / `mw-text-measure` · `mw-elevation-0..5` ·
|
|
241
|
+
`mw-corner-plain` ·
|
|
232
242
|
`mw-aspect-square|video|wide|portrait|photo` · `mw-d-{sm,md,lg,xl}-*` /
|
|
233
243
|
`mw-hide-mobile` / `mw-hide-desktop` · `mw-overflow-*` / `mw-snap-x` ·
|
|
234
244
|
spacing, flex, display, text
|
|
@@ -361,3 +371,13 @@ spacing, flex, display, text
|
|
|
361
371
|
whole markup. If you build your own clickable thing: the element decides
|
|
362
372
|
whether anyone without a mouse can use it, the class only decides how it
|
|
363
373
|
looks.
|
|
374
|
+
28. **A link in running text is `mw-link`, not `mw-btn mw-btn-link`.** Since
|
|
375
|
+
4.13.0 there is a class for exactly that. `mw-btn` is `inline-flex` with
|
|
376
|
+
`min-height: var(--mw-control-height)`, so a link written that way pulls its
|
|
377
|
+
own line up to 2.25rem while every line around it keeps the paragraph's
|
|
378
|
+
height - in a footer disclaimer at `font-size: sm` that is nearly double,
|
|
379
|
+
and it reads as a layout bug. `mw-p-0` is not the fix it looks like: the
|
|
380
|
+
height does it, not the padding. `mw-link` is the same look without the
|
|
381
|
+
control height and works on an `<a>` and a `<button>` alike.
|
|
382
|
+
`mw-btn mw-btn-link` stays right where the link really is one of several
|
|
383
|
+
buttons and has to line up with them - a card's actions, a button bar.
|
|
@@ -26,11 +26,38 @@ exhaustive: what is not named does not exist.
|
|
|
26
26
|
- Every variant dips 1px on `:active`, and the solid ones invert their top
|
|
27
27
|
highlight into an inner shadow. On touch that press is the only feedback there
|
|
28
28
|
is, so do not override it away
|
|
29
|
-
-
|
|
30
|
-
text
|
|
29
|
+
- **A link inside a sentence is `mw-link`, not `mw-btn mw-btn-link`.** The base
|
|
30
|
+
class carries a control height, so in running text it lifts that one line to
|
|
31
|
+
2.25rem while the lines around it stay where they are. `mw-p-0` does not help
|
|
32
|
+
- the height does it, not the padding. Keep `mw-btn` only where the link
|
|
33
|
+
really is a button in a row of buttons and has to line up with them
|
|
31
34
|
- On a coarse pointer or below 768px `mw-btn` grows to a 2.75rem minimum height
|
|
32
35
|
and `mw-btn-sm` to 2.5rem, on their own
|
|
33
36
|
|
|
37
|
+
```html
|
|
38
|
+
<!-- a button that happens to look like a link -->
|
|
39
|
+
<button type="button" class="mw-btn mw-btn-link">Read Article</button>
|
|
40
|
+
|
|
41
|
+
<!-- a link inside a sentence -->
|
|
42
|
+
<p>Built with <a href="https://astro.build" class="mw-link">Astro</a>.</p>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Text links
|
|
46
|
+
|
|
47
|
+
`mw-link` and `mw-link-muted` are the inline links, added in 4.13.0. Same look
|
|
48
|
+
as the two button variants - no box, underline on hover - but without
|
|
49
|
+
`inline-flex` and without the control height, which is what makes them sit on
|
|
50
|
+
the line instead of above it. `font` and the focus ring are set explicitly, so
|
|
51
|
+
a `<button>` in the middle of a paragraph works as well as an `<a>`.
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<p>
|
|
55
|
+
Built with <a href="https://astro.build" class="mw-link">Astro</a> and written
|
|
56
|
+
up in the
|
|
57
|
+
<a href="#get-started" class="mw-link-muted">Get Started</a> section.
|
|
58
|
+
</p>
|
|
59
|
+
```
|
|
60
|
+
|
|
34
61
|
### Three emphasis levels
|
|
35
62
|
|
|
36
63
|
`mw-btn-primary` (or any solid colour) **fills**, `mw-btn-outline` **draws a
|
|
@@ -79,7 +106,8 @@ and colour, and keeps exactly two things: the pointer and the focus ring. Used
|
|
|
79
106
|
on its own - `mw-btn` is neither needed nor wanted next to it.
|
|
80
107
|
|
|
81
108
|
Not the same as `mw-btn-link`, which is a button dressed as a link and brings
|
|
82
|
-
its own colour and
|
|
109
|
+
its own colour and control height, nor as `mw-link`, which is the link inside a
|
|
110
|
+
sentence.
|
|
83
111
|
|
|
84
112
|
**Destructive actions use `mw-btn-danger`.** `mw-btn-secondary` is a brand
|
|
85
113
|
colour, not a semantic one.
|
|
@@ -340,6 +340,16 @@ with it; `mw-text-capitalize` is the plain transform.
|
|
|
340
340
|
**Elevation** - `mw-elevation-0` through `-5`, the same ramp every component
|
|
341
341
|
uses. See the scale table in `SKILL.md`. Never hand-roll a `box-shadow`.
|
|
342
342
|
|
|
343
|
+
**Corner accent** - `mw-corner-plain` drops the accent arc that sits on the
|
|
344
|
+
two round corners of every card, panel, modal, tile, accordion, calendar,
|
|
345
|
+
pagination and login box. Everything else stays: the radii, the border, the
|
|
346
|
+
shadow, the hover. It is for a box too small to carry the mark - the arc reaches
|
|
347
|
+
about 34px in from its corner, so under roughly 90px the two of them take up
|
|
348
|
+
most of the outline and the pair reads as a frame instead of as a detail. A
|
|
349
|
+
chip-sized `mw-card-simple`, a swatch, a marker in a layout demo. A card with
|
|
350
|
+
content in it never needs this, and it is not the way to switch the signature
|
|
351
|
+
off across a project - restyle `--mw-corner-accent` for that.
|
|
352
|
+
|
|
343
353
|
**Aspect ratio** - `mw-aspect-square|video|wide|portrait|photo`. Reserves the
|
|
344
354
|
box before the image inside it has loaded, so the page does not reflow when the
|
|
345
355
|
picture arrives. The child fills the box and crops rather than stretching.
|
|
@@ -46,49 +46,50 @@ Safari 16.4+, Firefox 128+. The same range is declared as `browserslist` in
|
|
|
46
46
|
|
|
47
47
|
## Which token for what
|
|
48
48
|
|
|
49
|
-
| Token | Role
|
|
50
|
-
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
51
|
-
| `--mw-primary-color` | Brand colour as a **fill**: primary buttons, table headers, bars, badges - the label on top is `--mw-primary-accent-text-color`
|
|
52
|
-
| `--mw-primary-text-color` | Brand colour as **ink** on a theme surface: text, icons, focus rings, accent borders. Derived by clamping OKLch lightness (`max(l, .68)` on dark, `min(l, .55)` on light), so a colour already in range is used untouched
|
|
53
|
-
| `--mw-primary-color-hover` | Solid hover surface (derived: base + `$hover-shift` black, in both themes)
|
|
54
|
-
| `--mw-primary-background` | 20% tint - focus halo, alert/badge/tag surface, scrollbar tracks
|
|
55
|
-
| `--mw-primary-background-hover` | 45% tint - row and list hover
|
|
56
|
-
| `--mw-primary-info-background` | Alias of `--mw-primary-background`, so a component can interpolate one name across all six colours
|
|
57
|
-
| `--mw-border-accent` | Translucent accent **line**: panel rules, dividers, tab underlines. Theme-aware (70% of `--mw-*-text-color`)
|
|
58
|
-
| `--mw-secondary-*` | Same set for the second brand colour
|
|
59
|
-
| `--mw-success/warning/danger/info-color` | Status colours, each with `-text-color`, `-color-hover`, `-info-background`, `-info-background-hover`
|
|
60
|
-
| `--mw-accent-text-color` | Text on any solid coloured surface (buttons, table/panel headers, badges, stepper dots)
|
|
61
|
-
| `--mw-primary-accent-text-color` | Per colour override of that label. Same for `secondary`, `success`, `warning`, `danger`, `info`. Defaults to `--mw-accent-text-color`, so set one only when a colour needs the opposite label - a neon primary on a dark palette
|
|
62
|
-
| `--mw-gray-color` | Neutral foreground: muted icons, tooltips
|
|
63
|
-
| `--mw-gray-background` | Subtle neutral surface (20% alpha): zebra rows, disabled fields, tracks, skeletons
|
|
64
|
-
| `--mw-
|
|
65
|
-
| `--mw-
|
|
66
|
-
| `--mw-
|
|
67
|
-
| `--mw-
|
|
68
|
-
| `--mw-
|
|
69
|
-
| `--mw-
|
|
70
|
-
| `--mw-
|
|
71
|
-
| `--mw-
|
|
72
|
-
| `--mw-
|
|
73
|
-
| `--mw-card-
|
|
74
|
-
| `--mw-card-addon-
|
|
75
|
-
| `--mw-
|
|
76
|
-
| `--mw-
|
|
77
|
-
| `--mw-
|
|
78
|
-
| `--mw-
|
|
79
|
-
| `--mw-
|
|
80
|
-
| `--mw-
|
|
81
|
-
| `--mw-
|
|
82
|
-
| `--mw-
|
|
83
|
-
| `--mw-shadow-
|
|
84
|
-
| `--mw-
|
|
85
|
-
| `--mw-
|
|
86
|
-
| `--mw-duration-
|
|
87
|
-
| `--mw-
|
|
88
|
-
| `--mw-
|
|
89
|
-
| `--mw-
|
|
90
|
-
| `--mw-focus-
|
|
91
|
-
| `--mw-
|
|
49
|
+
| Token | Role |
|
|
50
|
+
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
51
|
+
| `--mw-primary-color` | Brand colour as a **fill**: primary buttons, table headers, bars, badges - the label on top is `--mw-primary-accent-text-color` |
|
|
52
|
+
| `--mw-primary-text-color` | Brand colour as **ink** on a theme surface: text, icons, focus rings, accent borders. Derived by clamping OKLch lightness (`max(l, .68)` on dark, `min(l, .55)` on light), so a colour already in range is used untouched |
|
|
53
|
+
| `--mw-primary-color-hover` | Solid hover surface (derived: base + `$hover-shift` black, in both themes) |
|
|
54
|
+
| `--mw-primary-background` | 20% tint - focus halo, alert/badge/tag surface, scrollbar tracks |
|
|
55
|
+
| `--mw-primary-background-hover` | 45% tint - row and list hover |
|
|
56
|
+
| `--mw-primary-info-background` | Alias of `--mw-primary-background`, so a component can interpolate one name across all six colours |
|
|
57
|
+
| `--mw-border-accent` | Translucent accent **line**: panel rules, dividers, tab underlines. Theme-aware (70% of `--mw-*-text-color`) |
|
|
58
|
+
| `--mw-secondary-*` | Same set for the second brand colour |
|
|
59
|
+
| `--mw-success/warning/danger/info-color` | Status colours, each with `-text-color`, `-color-hover`, `-info-background`, `-info-background-hover` |
|
|
60
|
+
| `--mw-accent-text-color` | Text on any solid coloured surface (buttons, table/panel headers, badges, stepper dots) |
|
|
61
|
+
| `--mw-primary-accent-text-color` | Per colour override of that label. Same for `secondary`, `success`, `warning`, `danger`, `info`. Defaults to `--mw-accent-text-color`, so set one only when a colour needs the opposite label - a neon primary on a dark palette |
|
|
62
|
+
| `--mw-gray-color` | Neutral foreground: muted icons, tooltips |
|
|
63
|
+
| `--mw-gray-background` | Subtle neutral surface (20% alpha): zebra rows, disabled fields, tracks, skeletons |
|
|
64
|
+
| `--mw-corner-accent` | The accent arc on the two round corners of every card, panel, modal and tile. Theme-aware: the full `--mw-*-text-color` tone in the dark theme, held to 80% in the light one, where the same blue carries far more contrast on a near-white card. Restyle it to recolour the signature, or `mw-corner-plain` on a single box to drop it |
|
|
65
|
+
| `--mw-surface-muted` | Alias of `--mw-gray-background` under the name you reach for: a slightly set-off area _inside_ a card - hint block, framed paragraph, form summary |
|
|
66
|
+
| `--mw-overlay-background` | Heavy scrim (60%) behind modals and blocking spinners |
|
|
67
|
+
| `--mw-page-background`, `--mw-card-background`, `--mw-footer-background`, `--mw-border`, `--mw-shadow`, `--mw-text-color`, `--mw-text-muted-color`, `--mw-hero-image-filter` | The **active theme** - aliases pointing at the `--mw-dark-*` or `--mw-light-*` set |
|
|
68
|
+
| `--mw-header-*` | Header chrome: `background`, `text-color`, `navbar-list-color`, `navbar-list-active-color`, `burgerbutton-color`, `burgerbutton-open-color`, `border` - dark in both themes. The two burger tokens default to the primary and secondary label ink, because the burger sits on those two surfaces |
|
|
69
|
+
| `--mw-form-elements-background`, `--mw-form-elements-color` | Form controls stay light in both themes and therefore have their own pair |
|
|
70
|
+
| `--mw-font-family-base`, `-heading`, `-mono` | Font stacks - system stacks by default (`-mono` leads with Fira Code); no font is bundled. Configurable in SCSS, see below |
|
|
71
|
+
| `--mw-hero-background`, `--mw-hero-text-color` | Hero image (`url(...)`) and the ink on it. Fixed across themes - the photo does not change with the theme, so its text must not either. Defaults to the light end of the palette |
|
|
72
|
+
| `--mw-transition` | Hover and focus states - an explicit paint-only property list at `--mw-duration-base`, never `all` |
|
|
73
|
+
| `--mw-card-img-height` | Per-card image height (default `210px`; `mw-card-lg`/`-xl` set it to 340px/480px, 260px/340px below `sm`) |
|
|
74
|
+
| `--mw-card-addon-color` | Background of `mw-card-badge` / `mw-card-ribbon`; the `mw-card-addon-*` classes set it, override it for a custom colour |
|
|
75
|
+
| `--mw-card-addon-text-color` | Label on that badge/ribbon; the `mw-card-addon-*` classes point it at the matching `--mw-*-accent-text-color` |
|
|
76
|
+
| `--mw-progress-ink` | Label inside `mw-progress-inline-label`; the `mw-progress-*` colour classes point it at the matching `--mw-*-accent-text-color` |
|
|
77
|
+
| `--mw-table-scroll-height` | Per-table height cap for `mw-table-responsive-scroll` |
|
|
78
|
+
| `--mw-kanban-background`, `--mw-kanban-lane-border`, `--mw-kanban-column-min-height` | Per-board surface, lane border and lane floor (120px, 90px on `mw-kanban-compact`) |
|
|
79
|
+
| `--mw-container-gutter`, `--mw-container-width` | Page gutter of `mw-container` (fluid `clamp(1rem, 4.2vw + 0.5rem, 4rem)`, never below the safe-area inset) and the width derived from it (`min(1200px, 100% - 2 * gutter)`) |
|
|
80
|
+
| `--mw-section-padding-block` | Top/bottom rhythm of `mw-section` (1.75rem) |
|
|
81
|
+
| `--mw-calendar-dot` | Colour of a single calendar dot - set it per dot or per cell; the `mw-calendar-dot-*` classes are presets for it |
|
|
82
|
+
| `--mw-scroll-hint-cover` | Colour the scroll hint on a tab bar fades into. Preset to the page, re-pointed to the card background inside `mw-card`, `mw-panel`, `mw-modal`, `mw-tile`, `mw-calendar` |
|
|
83
|
+
| `--mw-elevation-1` … `-5` | Every shadow in the framework. Two layers per level - contact plus ambient. Never write a `box-shadow` by hand: a hand-rolled one is the wrong colour in one of the two themes |
|
|
84
|
+
| `--mw-shadow-near`, `--mw-shadow-far` | The two tones the ramp above is mixed from, per theme |
|
|
85
|
+
| `--mw-transition-fast` | The same property list at `--mw-duration-fast` - for a state change that should feel instant under the pointer |
|
|
86
|
+
| `--mw-duration-instant\|fast\|base\|slow\|slower` | 110 / 180 / 300 / 520 / 900ms. Anything built on these is covered by `prefers-reduced-motion` for free |
|
|
87
|
+
| `--mw-duration-zoom` | 650ms, for a large surface actually travelling - an image scaling inside a card, a slider track |
|
|
88
|
+
| `--mw-ease-out`, `--mw-ease-in-out`, `--mw-ease-spring` | Things arriving (the default) / A to B and back / a pop |
|
|
89
|
+
| `--mw-control-height-sm\|·\|lg`, `--mw-control-font-sm\|·\|lg`, `--mw-control-line-height` | One size scale for input, select, textarea and button, so a field and the button beside it line up by construction |
|
|
90
|
+
| `--mw-focus-ring-width\|offset\|color` | The keyboard focus ring |
|
|
91
|
+
| `--mw-focus-halo-size\|opacity` | The soft ring a form field gets instead of a hard outline |
|
|
92
|
+
| `--mw-internal-theme-mode` | Read-only: what `$mw-theme-mode` was compiled to |
|
|
92
93
|
|
|
93
94
|
`--mw-container-gutter`, `--mw-container-width` and `--mw-section-padding-block`
|
|
94
95
|
are the knobs a good default cannot settle, because the right answer differs per
|
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,18 @@ Patch releases are only for test purposes - here I only document major and minor
|
|
|
6
6
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
7
7
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
8
8
|
|
|
9
|
+
## [4.14.0] - 2026-08-27
|
|
10
|
+
|
|
11
|
+
### Added
|
|
12
|
+
|
|
13
|
+
- unique maverick-wave corner colors in cards
|
|
14
|
+
|
|
15
|
+
## [4.13.0] - 2026-08-27
|
|
16
|
+
|
|
17
|
+
### Added
|
|
18
|
+
|
|
19
|
+
- `mw-link` / `mw-link-muted` - the link inside a sentence, same look as `mw-btn-link` without the control height
|
|
20
|
+
|
|
9
21
|
## [4.12.0] - 2026-08-27
|
|
10
22
|
|
|
11
23
|
### Fixed
|