vuetiwatch 0.2.1 → 0.2.2
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/README.md +25 -272
- package/dist/themes/soft.d.ts.map +1 -1
- package/dist/themes/soft.js +2 -1
- package/dist/themes/soft.js.map +1 -1
- package/package.json +1 -1
- package/src/themes/soft.ts +2 -1
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
🎨 Free, plug-and-play themes for **[Vuetify 4](https://vuetifyjs.com/)** — what [Bootswatch](https://bootswatch.com/)
|
|
8
8
|
is to Bootstrap.
|
|
9
9
|
|
|
10
|
-
[](https://j-tap.github.io/vuetiwatch/)
|
|
11
11
|
|
|
12
12
|
**[See all nineteen themes →](https://j-tap.github.io/vuetiwatch/)**
|
|
13
13
|
|
|
@@ -149,16 +149,9 @@ const { accents, accent, setAccent } = useVuetiwatch()
|
|
|
149
149
|
</template>
|
|
150
150
|
```
|
|
151
151
|
|
|
152
|
-
Presets rather than a colour picker
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
The id is shared across the family, so the choice survives a light/dark
|
|
156
|
-
switch: each variant carries its own tone of the same accent.
|
|
157
|
-
|
|
158
|
-
`atlas`, `atlasDark` and `atlasSepia` are one family today. Vuetify's
|
|
159
|
-
`ThemeDefinition` is a single mode by definition, so a registered pair is
|
|
160
|
-
how a light/dark switch is built — the design lives in one place and only
|
|
161
|
-
the ground changes.
|
|
152
|
+
Presets rather than a colour picker: every one is measured against the
|
|
153
|
+
theme's ground, and the id is shared across the family, so the choice
|
|
154
|
+
survives a light/dark switch.
|
|
162
155
|
|
|
163
156
|
Pass the event and the new theme opens as a circle from the control that was
|
|
164
157
|
pressed, through the View Transitions API — Baseline since October 2025.
|
|
@@ -211,267 +204,27 @@ file also ships as `*.min.css`.
|
|
|
211
204
|
|
|
212
205
|
## Writing your own theme
|
|
213
206
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
'vw-radius': '8px',
|
|
236
|
-
},
|
|
237
|
-
},
|
|
238
|
-
defaults: { VCard: { variant: 'outlined' } },
|
|
239
|
-
})
|
|
240
|
-
```
|
|
241
|
-
|
|
242
|
-
Register it alongside the rest:
|
|
243
|
-
|
|
244
|
-
```ts
|
|
245
|
-
createVuetify({ theme: { themes: { ...vuetiwatchThemes, midnight: midnight.theme } } })
|
|
246
|
-
app.use(createVuetiwatch(vuetify, { themes: [...themeList, midnight] }))
|
|
247
|
-
```
|
|
248
|
-
|
|
249
|
-
### Theme variables
|
|
250
|
-
|
|
251
|
-
Vuetify re-emits everything under `variables` as a CSS custom property when
|
|
252
|
-
the theme changes, which is how the stylesheet stays generic. Alongside
|
|
253
|
-
Vuetify's own, it reads:
|
|
254
|
-
|
|
255
|
-
| Variable | Default | Effect |
|
|
256
|
-
| --- | --- | --- |
|
|
257
|
-
| `vw-radius` | `4px` | Fields, alerts, lists, menus, snackbars, slider track, progress bars |
|
|
258
|
-
| `vw-radius-btn` | `vw-radius` | Buttons and button groups, for themes whose controls are capsules |
|
|
259
|
-
| `vw-radius-lg` | `vw-radius` | Cards, tables, expansion panels |
|
|
260
|
-
| `vw-radius-chip` | `9999px` | Chips and badges |
|
|
261
|
-
| `vw-radius-thumb` | `50%` | Slider thumb |
|
|
262
|
-
| `vw-radius-icon-btn` | `50%` | Icon buttons, for themes with no curve anywhere |
|
|
263
|
-
| `vw-radius-avatar` / `-dot` | `50%` | Avatars, and the dot on a timeline |
|
|
264
|
-
| `vw-border-width` | `thin` | Outlined variants and field outlines |
|
|
265
|
-
| `vw-outlined-fill` | `surface` | What an outlined card paints — `transparent` for themes whose surface is the ground |
|
|
266
|
-
| `vw-panel-border` / `-shadow` / `-fill` | Vuetify's | A panel standing on its own: a bare list, sheet, banner or table |
|
|
267
|
-
| `vw-panel-image` / `-filter` | none | The same panel's gradient and backdrop filter, for the gradient and glass themes |
|
|
268
|
-
| `vw-outline-opacity` | `border-opacity` | The line around an outlined card, which Vuetify draws in the ink of its own text |
|
|
269
|
-
| `vw-skeleton-opacity` | clamped | The bones of a loading placeholder, which Vuetify ties to `border-opacity` |
|
|
270
|
-
| `vw-field-border-opacity` | `0.38` | The resting outline of a field — Vuetify's default reads about 2.3:1 |
|
|
271
|
-
| `vw-btn-weight` / `-tracking` / `-transform` | Vuetify's | Button typography |
|
|
272
|
-
| `vw-heading-weight` / `-tracking` / `-transform` | Vuetify's | Headings and the display / headline / title-large scale |
|
|
273
|
-
| `vw-th-weight` / `-tracking` / `-transform` | Vuetify's | Table headers |
|
|
274
|
-
| `vw-numeric` | `normal` | Figures in tables and pagination — `tabular-nums` lines columns up |
|
|
275
|
-
| `vw-tab-slider-height` | `2px` | Active tab indicator |
|
|
276
|
-
| `vw-tab-size` | `0.875rem` | Tab labels, which Vuetify builds out of buttons and sizes like body text |
|
|
277
|
-
| `vw-avatar-ratio` | `0.4` | Initials inside an avatar, as a share of its height |
|
|
278
|
-
| `vw-timeline-line` / `-width` | hairline | The timeline connector — any background, so a repeating gradient makes it dashed |
|
|
279
|
-
| `vw-timeline-line-opacity` | `border-opacity` | The connector's fade, when `vw-timeline-line` is left alone |
|
|
280
|
-
| `vw-relief-inset` | `0` | Padding inside chip groups, room for controls that lift |
|
|
281
|
-
| `vw-overlay-shadow` / `-border` | Vuetify's | Menus, dialogs and tooltips |
|
|
282
|
-
| `vw-list-bar` / `-color` | `0` | Accent bar on the active list item, leading edge |
|
|
283
|
-
| `vw-pagination-active-color` / `-opacity` | Vuetify's | The current page |
|
|
284
|
-
| `vw-link-decoration` | `underline` | Bare `<a>` elements |
|
|
285
|
-
| `font-body` / `font-heading` | Roboto | Native to Vuetify 4 |
|
|
286
|
-
| `vw-gradient` / `-btn` | none | A theme's gradient, and the deeper one used where text sits on it |
|
|
287
|
-
| `vw-motion-duration` / `-ease` | `160ms` / standard | Press, hover lift, tab slider |
|
|
288
|
-
| `vw-press-scale` / `-shift` | `0.98` / `0` | How far a control squashes and sinks under a press |
|
|
289
|
-
| `vw-hover-lift` | `0` | How far a linked card rises on hover |
|
|
290
|
-
| `vw-pop-scale` / `-duration` | `1.18` / `220ms` | The overshoot when a checkbox, toggle or star turns on |
|
|
291
|
-
| `vw-focus-ring` / `-offset` | `2px solid primary` / `2px` | `:focus-visible` on buttons, tabs, chips, list items |
|
|
292
|
-
| `vw-theme-transition` | `420ms` | The wipe when `change()` switches theme |
|
|
293
|
-
|
|
294
|
-
`font-heading` reaches `text-display-*`, `text-headline-*`, `text-title-large`
|
|
295
|
-
and bare `<h1>`–`<h6>`; the rest of the scale takes `font-body`. Vuetify 4
|
|
296
|
-
uses the Material 3 names — `text-h1`…`text-h6`, `text-body-1`, `text-caption`
|
|
297
|
-
and `text-overline` no longer exist.
|
|
298
|
-
|
|
299
|
-
### What wins
|
|
300
|
-
|
|
301
|
-
These variables set the *default* a component draws with — the same job
|
|
302
|
-
Vuetify's SASS variables do at build time, moved to runtime so the look can
|
|
303
|
-
be swapped without recompiling. Vuetify draws the same line itself: it ships
|
|
304
|
-
`$button-border-radius` for the default and `$button-rounded-border-radius`
|
|
305
|
-
for what the `rounded` prop asks for.
|
|
306
|
-
|
|
307
|
-
Four levels, loudest first:
|
|
308
|
-
|
|
309
|
-
| | Set by | Example |
|
|
310
|
-
| --- | --- | --- |
|
|
311
|
-
| **1. A prop or utility class** | the component's author | `<v-card rounded="xl">`, `class="rounded-0"` |
|
|
312
|
-
| **2. The theme's component defaults** | the theme | `candy` making every `VBtn` `size="large"` |
|
|
313
|
-
| **3. Your `createVuetify({ defaults })`** | you, once | `VDataTable: { hover: true }` |
|
|
314
|
-
| **4. Vuetify** | the framework | the 4px corner every component ships with |
|
|
315
|
-
|
|
316
|
-
Level 1 is why every rule in the core layer carries `:not([class*='rounded-'])`:
|
|
317
|
-
a component whose author asked for a corner keeps it whatever the theme says.
|
|
318
|
-
Level 2 sits above level 3 on purpose — a theme that could not change a
|
|
319
|
-
variant would not be a theme — and `createVuetiwatch(vuetify, { defaults:
|
|
320
|
-
'under' })` swaps the two when the app owns a decision the theme also has an
|
|
321
|
-
opinion on, an admin panel with its own density switch being the usual case.
|
|
322
|
-
It overrides only the keys it actually
|
|
323
|
-
sets, so the rest of your configuration survives every switch, including
|
|
324
|
-
defaults you assign at runtime. Level 4 holds because every declaration
|
|
325
|
-
falls back to Vuetify's own value, which is why importing the stylesheet
|
|
326
|
-
cannot change an app that is not running a Vuetiwatch theme.
|
|
327
|
-
|
|
328
|
-
A fifth level sits underneath, in CSS rather than in props: your own
|
|
329
|
-
stylesheet. Vuetify ships every rule inside `@layer vuetify-*`, and an
|
|
330
|
-
unlayered rule outranks a layered one whatever its specificity, so the core
|
|
331
|
-
layer needs no weight of its own to beat it — and takes none. Its scope is a
|
|
332
|
-
`:where()`, which leaves each rule weighing the component selector and its
|
|
333
|
-
guard, two classes at most. Anything with a second selector of its own clears
|
|
334
|
-
it:
|
|
335
|
-
|
|
336
|
-
```css
|
|
337
|
-
/* wins over the theme */
|
|
338
|
-
.v-application .v-btn { border-radius: 0 }
|
|
339
|
-
```
|
|
340
|
-
|
|
341
|
-
A theme file, which carries its own theme class, clears it the same way —
|
|
342
|
-
which is what makes a theme an opinion over the defaults rather than a peer
|
|
343
|
-
of them. The one exception is marked as such in the stylesheet: a short block
|
|
344
|
-
of corrections that has to outrank a theme, because a theme's own rule does
|
|
345
|
-
damage in a context it never considered — a per-button shadow drawing a seam
|
|
346
|
-
down every join of a button group.
|
|
347
|
-
|
|
348
|
-
The practical version: if a component looks wrong under a theme, look for a
|
|
349
|
-
`rounded`, `variant`, `elevation` or `density` prop on it first. That prop is
|
|
350
|
-
doing exactly what it is meant to do, and the theme is standing aside.
|
|
351
|
-
|
|
352
|
-
### Contrast
|
|
353
|
-
|
|
354
|
-
Vuetify picks the label colour for a filled control automatically, by
|
|
355
|
-
whichever of black or white scores higher on [APCA](https://github.com/Myndex/apca-w3) —
|
|
356
|
-
the WCAG 3 draft algorithm. It optimises, but it does not clear a bar: on
|
|
357
|
-
Vuetify's own light theme the filled `warning` button lands at 2.4:1 against
|
|
358
|
-
WCAG 2's 4.5:1 for label text.
|
|
359
|
-
|
|
360
|
-
Every theme here is measured against both, and states `on-*` explicitly
|
|
361
|
-
wherever the automatic pick falls short — which is the documented way to
|
|
362
|
-
control it. Where the two models disagreed the colour was deepened a few
|
|
363
|
-
points of lightness instead of flipping the label, so the hue survives and
|
|
364
|
-
both models pass; `aurora` keeps its bright gradient for decoration and
|
|
365
|
-
carries a deeper one behind anything with text on it.
|
|
366
|
-
|
|
367
|
-
The result: in seventeen of the eighteen non-stock themes every filled control
|
|
368
|
-
clears 4.5:1. `classic` does not, and that is the point of it — it is stock
|
|
369
|
-
Vuetify, including this.
|
|
370
|
-
|
|
371
|
-
`npm run audit` measures all of it and fails on anything unexplained, so the
|
|
372
|
-
next palette change cannot quietly walk this back. Exceptions live in that
|
|
373
|
-
script with their reason attached, which is the only way a later reader can
|
|
374
|
-
tell a decision from an oversight.
|
|
375
|
-
|
|
376
|
-
`soft` is the one stated exception. Its filled controls carry white labels on
|
|
377
|
-
pastel grounds, which measures between 1.77:1 and 2.84:1 — under the bar, by
|
|
378
|
-
both models. Nothing about that is accidental: white is what the palette wants,
|
|
379
|
-
and the only way to earn it is to take the hues down by a third, at which point
|
|
380
|
-
the theme is no longer pastel and no longer itself. If a screen has to be legible
|
|
381
|
-
to everyone, pick a theme that measures — `atlas` and `graphite` are built for
|
|
382
|
-
exactly that. `soft` is for the places where the palette is the point.
|
|
383
|
-
|
|
384
|
-
### Motion
|
|
385
|
-
|
|
386
|
-
Which transition a floating surface uses is an ordinary prop too, so a theme
|
|
387
|
-
owns how its overlays arrive as well as how they look. `overlays()` states it
|
|
388
|
-
once for the dialog, the menu, the tooltip and the snackbar — `menu` reaches
|
|
389
|
-
the select, the autocomplete and the combobox with it.
|
|
390
|
-
|
|
391
|
-
```ts
|
|
392
|
-
import { overlays, ripple } from 'vuetiwatch'
|
|
393
|
-
|
|
394
|
-
defineTheme({
|
|
395
|
-
// …
|
|
396
|
-
defaults: [
|
|
397
|
-
overlays({
|
|
398
|
-
dialog: 'fade-transition',
|
|
399
|
-
menu: 'slide-y-transition',
|
|
400
|
-
tooltip: 'fade-transition',
|
|
401
|
-
}),
|
|
402
|
-
ripple(false),
|
|
403
|
-
],
|
|
404
|
-
})
|
|
405
|
-
```
|
|
406
|
-
|
|
407
|
-
`false` means no animation at all, which is the honest answer for a theme
|
|
408
|
-
that draws no depth for a surface to arrive through — `brutalist` uses it.
|
|
409
|
-
|
|
410
|
-
Vuetify bakes the *timing* of each named transition into its own stylesheet,
|
|
411
|
-
so naming one only half moves it: a fade takes 300ms whether it belongs to a
|
|
412
|
-
theme that settles slowly or to one that repaints instantly. Two variables
|
|
413
|
-
take that back, and default to Vuetify's own numbers so a theme that says
|
|
414
|
-
nothing changes nothing:
|
|
415
|
-
|
|
416
|
-
| Variable | What it sets |
|
|
417
|
-
| --- | --- |
|
|
418
|
-
| `--v-vw-overlay-duration` | How long a surface takes to arrive |
|
|
419
|
-
| `--v-vw-overlay-exit` | How long it takes to leave; falls through to the above |
|
|
420
|
-
|
|
421
|
-
The easing follows `--v-vw-motion-ease`, so a theme that already stated its
|
|
422
|
-
curve gets its overlays eased the same way for free.
|
|
423
|
-
|
|
424
|
-
`ripple(false)` turns off the Material ripple everywhere one is drawn — the
|
|
425
|
-
tab, the app-bar nav icon and every tick box included, each of which is its
|
|
426
|
-
own defaults key and would otherwise be missed.
|
|
427
|
-
|
|
428
|
-
### Selection
|
|
429
|
-
|
|
430
|
-
Dragging across text is answered in the browser's own blue, which belongs to
|
|
431
|
-
no palette. Every non-stock theme replaces it with its accent at 24%, which
|
|
432
|
-
costs a theme nothing and follows `setAccent()` when one repaints. A theme
|
|
433
|
-
that wants a solid highlight states both halves and takes responsibility for
|
|
434
|
-
the ink on top:
|
|
435
|
-
|
|
436
|
-
| Variable | What it sets |
|
|
437
|
-
| --- | --- |
|
|
438
|
-
| `--v-vw-selection-fill` | The highlight behind selected text |
|
|
439
|
-
| `--v-vw-selection-color` | The text on it; defaults to the text's own colour |
|
|
440
|
-
|
|
441
|
-
### Icons
|
|
442
|
-
|
|
443
|
-
Vuetify's icon *set* is global and cannot vary per theme, but which glyph a
|
|
444
|
-
component draws is an ordinary prop. `icons()` spreads one semantic set across
|
|
445
|
-
every component that draws it — `dropdown` reaches selects, expansion panels
|
|
446
|
-
and list groups at once.
|
|
447
|
-
|
|
448
|
-
```ts
|
|
449
|
-
import { icons } from 'vuetiwatch'
|
|
450
|
-
|
|
451
|
-
defineTheme({
|
|
452
|
-
// …
|
|
453
|
-
defaults: [
|
|
454
|
-
icons({
|
|
455
|
-
dropdown: 'mdi-chevron-down',
|
|
456
|
-
checkboxOn: 'mdi-check-circle',
|
|
457
|
-
checkboxOff: 'mdi-circle-outline',
|
|
458
|
-
}),
|
|
459
|
-
],
|
|
460
|
-
})
|
|
461
|
-
```
|
|
462
|
-
|
|
463
|
-
Every key is optional; names must exist in the set the app installed, since a
|
|
464
|
-
missing one renders blank.
|
|
465
|
-
|
|
466
|
-
This covers only the glyphs Vuetify draws for its own controls. An icon the
|
|
467
|
-
app passes itself — a mailbox, a dashboard — is content, so a theme declares a
|
|
468
|
-
preference through `meta.iconStyle` instead and the app may follow it:
|
|
469
|
-
|
|
470
|
-
```ts
|
|
471
|
-
const outlined = computed(
|
|
472
|
-
() => vuetiwatchMeta[theme.global.name.value]?.iconStyle === 'outline',
|
|
473
|
-
)
|
|
474
|
-
```
|
|
207
|
+
`defineTheme()` takes a name, the meta a picker needs, a Vuetify
|
|
208
|
+
`ThemeDefinition` and the component defaults that go with it; everything left
|
|
209
|
+
out is inherited from Vuetify's own `light` or `dark`. Register it alongside
|
|
210
|
+
the rest, and it behaves like a theme that shipped with the package —
|
|
211
|
+
including the switch animation and the light/dark family.
|
|
212
|
+
|
|
213
|
+
## Documentation
|
|
214
|
+
|
|
215
|
+
- **[Writing your own theme][authoring]** — `defineTheme`, overlay transitions,
|
|
216
|
+
text selection, per-theme icons
|
|
217
|
+
- **[Theme variables][variables]** — every `vw-*` custom property the
|
|
218
|
+
stylesheet reads, and what it moves
|
|
219
|
+
- **[What wins][cascade]** — props, theme defaults, your defaults, Vuetify,
|
|
220
|
+
and where your own CSS lands
|
|
221
|
+
- **[Contrast][contrast]** — how the palettes are measured against WCAG 2 and
|
|
222
|
+
APCA, and the one stated exception
|
|
223
|
+
|
|
224
|
+
[authoring]: https://github.com/j-tap/vuetiwatch/blob/main/docs/authoring.md
|
|
225
|
+
[variables]: https://github.com/j-tap/vuetiwatch/blob/main/docs/theme-variables.md
|
|
226
|
+
[cascade]: https://github.com/j-tap/vuetiwatch/blob/main/docs/cascade.md
|
|
227
|
+
[contrast]: https://github.com/j-tap/vuetiwatch/blob/main/docs/contrast.md
|
|
475
228
|
|
|
476
229
|
## Requirements
|
|
477
230
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"soft.d.ts","sourceRoot":"","sources":["../../src/themes/soft.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,IAAI,+
|
|
1
|
+
{"version":3,"file":"soft.d.ts","sourceRoot":"","sources":["../../src/themes/soft.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,IAAI,+CA2If,CAAA"}
|
package/dist/themes/soft.js
CHANGED
|
@@ -52,7 +52,8 @@ export const soft = defineTheme({
|
|
|
52
52
|
* A screen that has to be read by everyone should reach for a theme
|
|
53
53
|
* that measures; `atlas` and `graphite` exist for that, and `soft` is
|
|
54
54
|
* for the onboarding flow and the marketing page where the palette is
|
|
55
|
-
* the point.
|
|
55
|
+
* the point. `docs/contrast.md` says as much next to the claim it
|
|
56
|
+
* qualifies.
|
|
56
57
|
*
|
|
57
58
|
* `primary` is not listed because it needs no help: at #705EEF white
|
|
58
59
|
* already reads 4.63:1 and is the automatic pick.
|
package/dist/themes/soft.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"soft.js","sourceRoot":"","sources":["../../src/themes/soft.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEpD;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,WAAW,CAAC;IAC9B,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,WAAW,EAAE,0EAA0E;QACvF,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,QAAQ;QACnB,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;QACpD,KAAK,EAAE,CAAC,QAAQ,CAAC;KAClB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,KAAK;QACX,MAAM,EAAE;YACN,UAAU,EAAE,SAAS;YACrB,OAAO,EAAE,SAAS;YAClB,gBAAgB,EAAE,SAAS;YAC3B,eAAe,EAAE,SAAS;YAC1B,iBAAiB,EAAE,SAAS;YAC5B,oBAAoB,EAAE,SAAS;YAC/B,OAAO,EAAE,SAAS;YAClB,kBAAkB,EAAE,SAAS;YAC7B,SAAS,EAAE,SAAS;YACpB,oBAAoB,EAAE,SAAS;YAC/B,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,SAAS;YACvB,eAAe,EAAE,SAAS;YAC1B
|
|
1
|
+
{"version":3,"file":"soft.js","sourceRoot":"","sources":["../../src/themes/soft.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/themes/soft.ts
CHANGED
|
@@ -53,7 +53,8 @@ export const soft = defineTheme({
|
|
|
53
53
|
* A screen that has to be read by everyone should reach for a theme
|
|
54
54
|
* that measures; `atlas` and `graphite` exist for that, and `soft` is
|
|
55
55
|
* for the onboarding flow and the marketing page where the palette is
|
|
56
|
-
* the point.
|
|
56
|
+
* the point. `docs/contrast.md` says as much next to the claim it
|
|
57
|
+
* qualifies.
|
|
57
58
|
*
|
|
58
59
|
* `primary` is not listed because it needs no help: at #705EEF white
|
|
59
60
|
* already reads 4.63:1 and is the automatic pick.
|