maverick-wave 4.4.2 → 4.5.1
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 +8 -5
- package/.claude/skills/maverick-wave/references/components.md +24 -13
- package/.claude/skills/maverick-wave/references/theming.md +54 -34
- package/CHANGELOG.md +7 -0
- package/README.md +65 -5
- package/index.html +1 -1
- package/maverick-wave.min.css +2 -2
- package/package.json +2 -2
- package/src/partials/colors-container.html +55 -2
- package/src/partials/get-started-container.html +15 -1
- package/src/partials/item-lists-container.html +3 -3
- package/src/scss/abstracts/_variables.scss +59 -11
- package/src/scss/base/_reset.scss +1 -1
- package/src/scss/components/_accordions.scss +1 -1
- package/src/scss/components/_avatars.scss +1 -1
- package/src/scss/components/_blog-post.scss +1 -1
- package/src/scss/components/_button-bar.scss +5 -5
- package/src/scss/components/_buttons.scss +11 -11
- package/src/scss/components/_calendar.scss +2 -2
- package/src/scss/components/_cards.scss +4 -3
- package/src/scss/components/_coming-soon.scss +2 -2
- package/src/scss/components/_info.scss +1 -1
- package/src/scss/components/_kanban.scss +1 -1
- package/src/scss/components/_lists.scss +144 -135
- package/src/scss/components/_modals.scss +1 -1
- package/src/scss/components/_panels.scss +2 -2
- package/src/scss/components/_progress.scss +7 -1
- package/src/scss/components/_segmented.scss +2 -1
- package/src/scss/components/_stepper.scss +2 -2
- package/src/scss/components/_tables.scss +1 -1
- package/src/scss/components/_tabs.scss +1 -1
- package/src/scss/components/_theme-toggle.scss +1 -1
- package/src/scss/components/_timelines.scss +2 -2
- package/src/scss/form-elements/_toggle.scss +2 -0
- package/src/scss/layout/_footer.scss +1 -1
- package/src/scss/layout/_header.scss +6 -1
- package/src/scss/layout/_section.scss +1 -1
|
@@ -218,11 +218,14 @@ text
|
|
|
218
218
|
`mw-table-responsive-scroll` (height via `--mw-table-scroll-height`).
|
|
219
219
|
7. **`--mw-text-muted-color` on a coloured surface is always wrong.** It follows
|
|
220
220
|
the theme; buttons, table headers and badges do not. Use
|
|
221
|
-
`--mw
|
|
222
|
-
`--mw-accent-text-color` is the
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
221
|
+
`--mw-*-accent-text-color` there, and `opacity` for disabled states.
|
|
222
|
+
`--mw-accent-text-color` is the shared label for all six colours; each one
|
|
223
|
+
also has its own `--mw-primary-accent-text-color`,
|
|
224
|
+
`--mw-secondary-accent-text-color`, `--mw-success/warning/danger/info-accent-text-color`,
|
|
225
|
+
defaulting to the shared token. Override a single one when that colour needs
|
|
226
|
+
the opposite label - a neon primary on an otherwise dark palette. The fixed
|
|
227
|
+
grey surfaces - tooltip, `mw-btn-mini`, `mw-info-mini`, gallery arrows -
|
|
228
|
+
hardcode white and ignore all of them.
|
|
226
229
|
8. **`mw-card` already lifts on hover** and `mw-btn` already has `inline-flex`
|
|
227
230
|
plus a gap for icons. Neither has a modifier class for it - adding one from
|
|
228
231
|
memory produces markup that does nothing.
|
|
@@ -944,15 +944,19 @@ deprecated). Any card fits into the content wrapper.
|
|
|
944
944
|
|
|
945
945
|
Layout containers for arbitrary children - the children need no classes.
|
|
946
946
|
|
|
947
|
-
| Class | Look
|
|
948
|
-
| ------------------------- |
|
|
949
|
-
| `mw-item-list` | Plain flex column with gaps
|
|
950
|
-
| `mw-item-list-horizontal` | Row, wrapping; column below `sm`
|
|
951
|
-
| `mw-item-list-cards` | Wider gaps, for cards
|
|
952
|
-
| `mw-item-list-compact` | Bordered box, divided rows, hover indent (nests)
|
|
953
|
-
| `mw-item-list-menu` | Elevated menu card, pointer cursor, press feedback
|
|
954
|
-
| `mw-item-list-slide` | Cards with
|
|
955
|
-
| `mw-item-list-scroll` | Scroll box, 300px
|
|
947
|
+
| Class | Look |
|
|
948
|
+
| ------------------------- | ------------------------------------------------------------- |
|
|
949
|
+
| `mw-item-list` | Plain flex column with gaps |
|
|
950
|
+
| `mw-item-list-horizontal` | Row, wrapping; column below `sm` |
|
|
951
|
+
| `mw-item-list-cards` | Wider gaps, for cards |
|
|
952
|
+
| `mw-item-list-compact` | Bordered card-surface box, divided rows, hover indent (nests) |
|
|
953
|
+
| `mw-item-list-menu` | Elevated menu card, pointer cursor, press feedback |
|
|
954
|
+
| `mw-item-list-slide` | Cards sliding sideways with an accent border on hover |
|
|
955
|
+
| `mw-item-list-scroll` | Scroll box, 300px tall |
|
|
956
|
+
|
|
957
|
+
Modifiers are additive - keep the base class and add the modifier:
|
|
958
|
+
`mw-item-list-scroll` + `-sm` (200px), `-lg` (400px) or `-xl` (500px), and
|
|
959
|
+
`mw-item-list-slide` + `-secondary` for the secondary accent.
|
|
956
960
|
|
|
957
961
|
```html
|
|
958
962
|
<div class="mw-item-list-compact">
|
|
@@ -984,10 +988,17 @@ Layout containers for arbitrary children - the children need no classes.
|
|
|
984
988
|
</ul>
|
|
985
989
|
```
|
|
986
990
|
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
+
Add `mw-item-list-checkbox-compact`, `-large` or `-secondary` alongside the
|
|
992
|
+
base class; `mw-item-list-checkbox-scroll` is a standalone class that replaces
|
|
993
|
+
it. `mw-selected` on the `<li>` is the selected-row highlight - bind it to the
|
|
994
|
+
checkbox state yourself in a SPA. The `mw-checkbox-content` block is optional;
|
|
995
|
+
a bare `mw-checkbox-label` renders a single-line row.
|
|
996
|
+
|
|
997
|
+
The `mw-checkbox` inside is the ordinary form-element checkbox, so
|
|
998
|
+
`mw-checkbox-disabled` and the colour variants (`mw-checkbox-success` and the
|
|
999
|
+
rest, see `references/forms.md`) work here too. Row height is a list concern -
|
|
1000
|
+
use the list's own `-compact` / `-large` modifiers rather than
|
|
1001
|
+
`mw-checkbox-sm` / `-lg`, which sit on the wrong element to reach the box.
|
|
991
1002
|
|
|
992
1003
|
## HTML lists
|
|
993
1004
|
|
|
@@ -35,6 +35,9 @@ Safari 16.4+, Firefox 128+.
|
|
|
35
35
|
/* text on every solid coloured surface, and the one token that cannot be
|
|
36
36
|
derived: light brand colours need a dark label, dark ones a light label */
|
|
37
37
|
--mw-accent-text-color: #ffffff;
|
|
38
|
+
/* per colour override of that label, for a palette that does not sit on one
|
|
39
|
+
side of the lightness scale */
|
|
40
|
+
--mw-primary-accent-text-color: #0b0f0a;
|
|
38
41
|
|
|
39
42
|
--mw-font-family-base: 'Inter', sans-serif;
|
|
40
43
|
}
|
|
@@ -42,37 +45,40 @@ Safari 16.4+, Firefox 128+.
|
|
|
42
45
|
|
|
43
46
|
## Which token for what
|
|
44
47
|
|
|
45
|
-
| Token | Role
|
|
46
|
-
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
47
|
-
| `--mw-primary-color` | Brand colour as a **fill**: primary buttons, table headers, bars, badges - the label on top is `--mw-accent-text-color`
|
|
48
|
-
| `--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
|
|
49
|
-
| `--mw-primary-color-hover` | Solid hover surface (derived: base + `$hover-shift` black, in both themes)
|
|
50
|
-
| `--mw-primary-background` | 20% tint - focus halo, alert/badge/tag surface, scrollbar tracks
|
|
51
|
-
| `--mw-primary-background-hover` | 45% tint - row and list hover
|
|
52
|
-
| `--mw-primary-info-background` | Alias of `--mw-primary-background`, so a component can interpolate one name across all six colours
|
|
53
|
-
| `--mw-border-accent` | Translucent accent **line**: panel rules, dividers, tab underlines. Theme-aware (70% of `--mw-*-text-color`)
|
|
54
|
-
| `--mw-secondary-*` | Same set for the second brand colour
|
|
55
|
-
| `--mw-success/warning/danger/info-color` | Status colours, each with `-text-color`, `-color-hover`, `-info-background`, `-info-background-hover`
|
|
56
|
-
| `--mw-accent-text-color` | Text on any solid coloured surface (buttons, table/panel headers, badges, stepper dots)
|
|
57
|
-
| `--mw-
|
|
58
|
-
| `--mw-gray-
|
|
59
|
-
| `--mw-
|
|
60
|
-
| `--mw-
|
|
61
|
-
| `--mw-
|
|
62
|
-
| `--mw-
|
|
63
|
-
| `--mw-
|
|
64
|
-
| `--mw-
|
|
65
|
-
| `--mw-
|
|
66
|
-
| `--mw-
|
|
67
|
-
| `--mw-
|
|
68
|
-
| `--mw-card-
|
|
69
|
-
| `--mw-
|
|
70
|
-
| `--mw-
|
|
71
|
-
| `--mw-
|
|
72
|
-
| `--mw-
|
|
73
|
-
| `--mw-
|
|
74
|
-
| `--mw-
|
|
75
|
-
| `--mw-
|
|
48
|
+
| Token | Role |
|
|
49
|
+
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
50
|
+
| `--mw-primary-color` | Brand colour as a **fill**: primary buttons, table headers, bars, badges - the label on top is `--mw-primary-accent-text-color` |
|
|
51
|
+
| `--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 |
|
|
52
|
+
| `--mw-primary-color-hover` | Solid hover surface (derived: base + `$hover-shift` black, in both themes) |
|
|
53
|
+
| `--mw-primary-background` | 20% tint - focus halo, alert/badge/tag surface, scrollbar tracks |
|
|
54
|
+
| `--mw-primary-background-hover` | 45% tint - row and list hover |
|
|
55
|
+
| `--mw-primary-info-background` | Alias of `--mw-primary-background`, so a component can interpolate one name across all six colours |
|
|
56
|
+
| `--mw-border-accent` | Translucent accent **line**: panel rules, dividers, tab underlines. Theme-aware (70% of `--mw-*-text-color`) |
|
|
57
|
+
| `--mw-secondary-*` | Same set for the second brand colour |
|
|
58
|
+
| `--mw-success/warning/danger/info-color` | Status colours, each with `-text-color`, `-color-hover`, `-info-background`, `-info-background-hover` |
|
|
59
|
+
| `--mw-accent-text-color` | Text on any solid coloured surface (buttons, table/panel headers, badges, stepper dots) |
|
|
60
|
+
| `--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 |
|
|
61
|
+
| `--mw-gray-color` | Neutral foreground: muted icons, tooltips |
|
|
62
|
+
| `--mw-gray-background` | Subtle neutral surface (20% alpha): zebra rows, disabled fields, tracks, skeletons |
|
|
63
|
+
| `--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 |
|
|
64
|
+
| `--mw-overlay-background` | Heavy scrim (60%) behind modals and blocking spinners |
|
|
65
|
+
| `--mw-page-background`, `--mw-card-background`, `--mw-footer-background`, `--mw-border`, `--mw-shadow`, `--mw-text-color`, `--mw-text-muted-color`, `--mw-hero-overlay-background` | The **active theme** - aliases pointing at the `--mw-dark-*` or `--mw-light-*` set |
|
|
66
|
+
| `--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 |
|
|
67
|
+
| `--mw-form-elements-background`, `--mw-form-elements-color` | Form controls stay light in both themes and therefore have their own pair |
|
|
68
|
+
| `--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 |
|
|
69
|
+
| `--mw-hero-background` | Hero image (`url(...)`) |
|
|
70
|
+
| `--mw-transition` | Global transition (`all 0.3s ease`) |
|
|
71
|
+
| `--mw-card-img-height` | Per-card image height (default `210px`; `mw-card-lg`/`-xl` set it to 340px/480px) |
|
|
72
|
+
| `--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 |
|
|
73
|
+
| `--mw-card-addon-text-color` | Label on that badge/ribbon; the `mw-card-addon-*` classes point it at the matching `--mw-*-accent-text-color` |
|
|
74
|
+
| `--mw-progress-ink` | Label inside `mw-progress-inline-label`; the `mw-progress-*` colour classes point it at the matching `--mw-*-accent-text-color` |
|
|
75
|
+
| `--mw-table-scroll-height` | Per-table height cap for `mw-table-responsive-scroll` |
|
|
76
|
+
| `--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`) |
|
|
77
|
+
| `--mw-container-width`, `--mw-container-width-sm` | Content width of `mw-container` (`min(1200px, 89%)`, below 576px a 1rem gutter) |
|
|
78
|
+
| `--mw-section-padding-block` | Top/bottom rhythm of `mw-section` (1.75rem) |
|
|
79
|
+
| `--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 |
|
|
80
|
+
| `--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` |
|
|
81
|
+
| `--mw-internal-theme-mode` | Read-only: what `$mw-theme-mode` was compiled to |
|
|
76
82
|
|
|
77
83
|
`--mw-container-width`, `--mw-container-width-sm` and
|
|
78
84
|
`--mw-section-padding-block` are the knobs a good default cannot settle, because
|
|
@@ -91,8 +97,8 @@ Two rules that prevent most colour bugs:
|
|
|
91
97
|
background) - it follows the theme. It is a true gray with `$muted-tint`
|
|
92
98
|
(12%) of the primary mixed in, not a stepped-back text colour, so it stays
|
|
93
99
|
gray no matter how tinted the palette is. On a colour surface that stays the same
|
|
94
|
-
in both themes it is always wrong: use `--mw
|
|
95
|
-
for a disabled look.
|
|
100
|
+
in both themes it is always wrong: use `--mw-*-accent-text-color`, or
|
|
101
|
+
`opacity` for a disabled look.
|
|
96
102
|
|
|
97
103
|
## Light & dark
|
|
98
104
|
|
|
@@ -103,6 +109,15 @@ Two rules that prevent most colour bugs:
|
|
|
103
109
|
colour** - darker than the page in the dark theme, lighter in the light one.
|
|
104
110
|
A near-black `--mw-dark-page-background` leaves no headroom underneath and
|
|
105
111
|
cards collapse into it; keep it around OKLch lightness 0.24.
|
|
112
|
+
- The card and footer factors are `!default` SCSS knobs, so the distance
|
|
113
|
+
between a card and the page is one number per theme: `$card-surface-dark`
|
|
114
|
+
(0.85), `$card-surface-light` (1.05), `$footer-surface-dark` (0.75),
|
|
115
|
+
`$footer-surface-light` (0.95). Below 1 steps toward black, above 1 toward
|
|
116
|
+
white - read 0.85 as "the card sits at 85% of the page's lightness". Toward 1
|
|
117
|
+
is a flatter, borderless look; further apart makes cards read as raised
|
|
118
|
+
panels. Keep the footer further out than the card in the dark theme and on
|
|
119
|
+
the other side in the light one, or the footer stops reading as chrome. The
|
|
120
|
+
border factor is not configurable - it runs against the card by design.
|
|
106
121
|
- Header, footer chrome and form controls deliberately stay dark/light
|
|
107
122
|
respectively in both themes.
|
|
108
123
|
- Persisting the choice, the toggle UI and the initial class are the
|
|
@@ -135,11 +150,16 @@ effect, because the root colours are declared with `!default`.
|
|
|
135
150
|
$light-text-color: #172127,
|
|
136
151
|
$form-elements-background: #f5f9fa,
|
|
137
152
|
$accent-text-color: #f2fafa,
|
|
138
|
-
// the
|
|
153
|
+
// the derivation knobs, all optional
|
|
139
154
|
$hover-shift: 15%,
|
|
140
155
|
$ink-lightness-dark: 0.68,
|
|
141
156
|
$ink-lightness-light: 0.55,
|
|
142
157
|
$muted-tint: 12%,
|
|
158
|
+
// the surface stack - distance of card and footer from the page
|
|
159
|
+
$card-surface-dark: 0.85,
|
|
160
|
+
$card-surface-light: 1.05,
|
|
161
|
+
$footer-surface-dark: 0.75,
|
|
162
|
+
$footer-surface-light: 0.95,
|
|
143
163
|
$mw-hero-image: url('/assets/hero.jpg'),
|
|
144
164
|
$font-family-base: (
|
|
145
165
|
'Inter',
|
package/CHANGELOG.md
CHANGED
|
@@ -6,11 +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.6.0] - 2026-08-22
|
|
10
|
+
|
|
11
|
+
### Changed
|
|
12
|
+
|
|
13
|
+
- some color adjustments
|
|
14
|
+
|
|
9
15
|
## [4.5.0] - 2026-08-21
|
|
10
16
|
|
|
11
17
|
### Changed
|
|
12
18
|
|
|
13
19
|
- new color concept and new default color palette
|
|
20
|
+
- `mw-item-list-compact` sits on a card surface now
|
|
14
21
|
|
|
15
22
|
## [4.4.0] - 2026-08-20
|
|
16
23
|
|
package/README.md
CHANGED
|
@@ -93,6 +93,11 @@ backgrounds, borders, muted text - is derived from them at runtime with
|
|
|
93
93
|
label, a dark one a light label. Set it opposite your --mw-primary-color. */
|
|
94
94
|
--mw-accent-text-color: #f2fafa;
|
|
95
95
|
|
|
96
|
+
/* per color override of that label, for a palette that does not sit on one
|
|
97
|
+
side of the lightness scale. Same token for secondary, success, warning,
|
|
98
|
+
danger and info. */
|
|
99
|
+
--mw-primary-accent-text-color: #0b0f0a;
|
|
100
|
+
|
|
96
101
|
--mw-font-family-base: 'Your Font Name', sans-serif;
|
|
97
102
|
}
|
|
98
103
|
```
|
|
@@ -114,7 +119,8 @@ Every brand and status colour comes in two tokens, and picking the right one is
|
|
|
114
119
|
the whole trick:
|
|
115
120
|
|
|
116
121
|
- `--mw-primary-color` is the exact colour, for anything it **fills** - buttons,
|
|
117
|
-
badges, bars, progress. The label on top is
|
|
122
|
+
badges, bars, progress. The label on top is
|
|
123
|
+
`--mw-primary-accent-text-color`.
|
|
118
124
|
- `--mw-primary-text-color` is the same colour tuned to the active theme, for
|
|
119
125
|
anything drawn **on** a theme surface - text, icons, focus rings, accent
|
|
120
126
|
borders and dividers.
|
|
@@ -140,6 +146,36 @@ the dark page and only turns into a real green on the light one. The bounds are
|
|
|
140
146
|
`--mw-secondary-text-color` and `--mw-success/warning/danger/info-text-color`
|
|
141
147
|
are derived the same way.
|
|
142
148
|
|
|
149
|
+
### The label on a fill
|
|
150
|
+
|
|
151
|
+
`--mw-accent-text-color` is the text on every solid coloured surface, and one
|
|
152
|
+
value for the whole palette only holds while all six colours sit on the same
|
|
153
|
+
side of the lightness scale. A neon green primary next to a deep blue secondary
|
|
154
|
+
needs a dark label on the one and a light label on the other, so every colour
|
|
155
|
+
carries its own override:
|
|
156
|
+
|
|
157
|
+
```css
|
|
158
|
+
:root {
|
|
159
|
+
--mw-primary-color: #39ff14;
|
|
160
|
+
/* the shared label stays light for the rest of the palette ... */
|
|
161
|
+
--mw-accent-text-color: #f2f6fc;
|
|
162
|
+
/* ... only the neon primary gets a dark one */
|
|
163
|
+
--mw-primary-accent-text-color: #0b0f0a;
|
|
164
|
+
}
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
`--mw-secondary-accent-text-color` and
|
|
168
|
+
`--mw-success/warning/danger/info-accent-text-color` work the same way, and each
|
|
169
|
+
defaults to `--mw-accent-text-color`, so nothing changes until you set one.
|
|
170
|
+
|
|
171
|
+
Everything that fills a surface with one of the six colours reads the matching
|
|
172
|
+
token: buttons and mini buttons, the burger button, table and panel headers,
|
|
173
|
+
card badges and ribbons, segmented and tab items, stepper dots, calendar
|
|
174
|
+
selection, timeline dates, accordion headers and progress labels. The burger
|
|
175
|
+
button switches to `--mw-secondary-accent-text-color` while the drawer is open,
|
|
176
|
+
because its surface does the same - `--mw-header-burgerbutton-color` and
|
|
177
|
+
`--mw-header-burgerbutton-open-color` override the two states individually.
|
|
178
|
+
|
|
143
179
|
`--mw-text-muted-color` is built the other way round: a true gray at a fixed
|
|
144
180
|
lightness with `$muted-tint` (12%) of the primary colour mixed in, so the gray
|
|
145
181
|
belongs to the palette without carrying its saturation. Stepping the theme's
|
|
@@ -172,8 +208,26 @@ colour at a lower lightness.
|
|
|
172
208
|
The one thing to know when picking `--mw-dark-page-background`: it needs
|
|
173
209
|
headroom underneath. On a near-black page the surfaces below it have nowhere to
|
|
174
210
|
go and cards collapse into the background, leaving only the border to separate
|
|
175
|
-
them. The default sits at OKLch lightness 0.24 for that reason.
|
|
176
|
-
|
|
211
|
+
them. The default sits at OKLch lightness 0.24 for that reason.
|
|
212
|
+
|
|
213
|
+
Each factor is a `!default` SCSS knob, so how far a card sits from the page is
|
|
214
|
+
one number per theme:
|
|
215
|
+
|
|
216
|
+
| Knob | Default | Effect |
|
|
217
|
+
| ----------------------- | ------- | ------------------------------------------------------------------ |
|
|
218
|
+
| `$card-surface-dark` | `0.85` | Card in the dark theme - lower means a darker, more separated card |
|
|
219
|
+
| `$card-surface-light` | `1.05` | Card in the light theme - higher means a lighter card |
|
|
220
|
+
| `$footer-surface-dark` | `0.75` | Footer and header chrome, dark theme |
|
|
221
|
+
| `$footer-surface-light` | `0.95` | Footer and header chrome, light theme |
|
|
222
|
+
|
|
223
|
+
Below 1 steps toward black, above 1 toward white, so read `0.85` as "the card
|
|
224
|
+
sits at 85% of the page's lightness". Move both card knobs toward 1 for a flat,
|
|
225
|
+
borderless look; push them apart for cards that read as raised panels. The
|
|
226
|
+
footer knobs go further out than the card in the dark theme and the other way in
|
|
227
|
+
the light one, so the band under the page reads as chrome rather than as another
|
|
228
|
+
card - keep that ordering if you retune the card, or the footer stops looking
|
|
229
|
+
like a footer. The rule between the surfaces keeps its own fixed factor: it runs
|
|
230
|
+
against the card, or it disappears into what it separates.
|
|
177
231
|
|
|
178
232
|
### SCSS Source
|
|
179
233
|
|
|
@@ -192,10 +246,16 @@ For full control, clone the repository and integrate `src/scss/main.scss` into y
|
|
|
192
246
|
$dark-background: #172127,
|
|
193
247
|
$light-background: #f2f6f7,
|
|
194
248
|
|
|
195
|
-
// Optional: the
|
|
249
|
+
// Optional: the derivation knobs
|
|
196
250
|
$ink-lightness-dark: 0.68,
|
|
197
251
|
$ink-lightness-light: 0.55,
|
|
198
|
-
$muted-tint: 12
|
|
252
|
+
$muted-tint: 12%,
|
|
253
|
+
|
|
254
|
+
// Optional: how far card and footer sit from the page background
|
|
255
|
+
$card-surface-dark: 0.85,
|
|
256
|
+
$card-surface-light: 1.05,
|
|
257
|
+
$footer-surface-dark: 0.75,
|
|
258
|
+
$footer-surface-light: 0.95
|
|
199
259
|
);
|
|
200
260
|
```
|
|
201
261
|
|