maverick-wave 4.13.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 +9 -0
- package/.claude/skills/maverick-wave/references/layout.md +10 -0
- package/.claude/skills/maverick-wave/references/theming.md +44 -43
- package/CHANGELOG.md +6 -0
- package/maverick-wave.min.css +3 -3
- package/package.json +2 -2
- package/src/partials/grid-container.html +68 -48
- package/src/partials/utilities-container.html +45 -26
- package/src/scss/abstracts/_mixins.scss +70 -0
- package/src/scss/abstracts/_variables.scss +7 -0
- package/src/scss/components/_accordions.scss +1 -1
- package/src/scss/components/_calendar.scss +1 -1
- package/src/scss/components/_cards.scss +1 -2
- package/src/scss/components/_kanban.scss +1 -1
- 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
|
|
@@ -230,6 +238,7 @@ feature frame) ·
|
|
|
230
238
|
`mw-text-currency` · `mw-text-truncate` / `mw-text-clamp-2..5` /
|
|
231
239
|
`mw-text-break` / `mw-text-nowrap` · `mw-text-balance` / `mw-text-pretty` /
|
|
232
240
|
`mw-text-eyebrow` / `mw-text-measure` · `mw-elevation-0..5` ·
|
|
241
|
+
`mw-corner-plain` ·
|
|
233
242
|
`mw-aspect-square|video|wide|portrait|photo` · `mw-d-{sm,md,lg,xl}-*` /
|
|
234
243
|
`mw-hide-mobile` / `mw-hide-desktop` · `mw-overflow-*` / `mw-snap-x` ·
|
|
235
244
|
spacing, flex, display, text
|
|
@@ -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,12 @@ 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
|
+
|
|
9
15
|
## [4.13.0] - 2026-08-27
|
|
10
16
|
|
|
11
17
|
### Added
|