vuetiwatch 0.2.1 → 0.2.3

package/README.md

@@ -1,15 +1,15 @@
-# Vuetiwatch
+# Vuetiwatch — free Vuetify themes
 
 [![npm](https://img.shields.io/npm/v/vuetiwatch?color=%23c4f82a&label=npm)](https://www.npmjs.com/package/vuetiwatch)
 [![bundle](https://img.shields.io/bundlephobia/minzip/vuetiwatch?label=gzipped)](https://bundlephobia.com/package/vuetiwatch)
 [![license](https://img.shields.io/npm/l/vuetiwatch)](https://github.com/j-tap/vuetiwatch/blob/main/LICENSE)
 
-🎨 Free, plug-and-play themes for **[Vuetify 4](https://vuetifyjs.com/)** — what [Bootswatch](https://bootswatch.com/)
-is to Bootstrap.
+🎨 Nineteen free, plug-and-play **Vuetify themes** for **[Vuetify 4](https://vuetifyjs.com/)**
+and Vue 3 — what [Bootswatch](https://bootswatch.com/) is to Bootstrap.
 
-[![The same page in two Vuetify 4 themes — Lux and Morph](https://raw.githubusercontent.com/j-tap/vuetiwatch/main/docs/playground-themes.webp)](https://j-tap.github.io/vuetiwatch/)
+[![The same landing page in nine of the nineteen Vuetify themes](https://raw.githubusercontent.com/j-tap/vuetiwatch/main/docs/playground-themes.webp)](https://j-tap.github.io/vuetiwatch/)
 
-**[See all nineteen themes →](https://j-tap.github.io/vuetiwatch/)**
+**[Preview all nineteen Vuetify themes →](https://j-tap.github.io/vuetiwatch/)**
 
 Vuetify ships one look. Vuetiwatch ships nineteen, and they differ in more
 than hue: radius, border weight, density, component variants, typography,
@@ -149,16 +149,9 @@ const { accents, accent, setAccent } = useVuetiwatch()
 </template>
 ```
 
-Presets rather than a colour picker, because every one of them is measured
-against the theme's ground — the Atlas accents run 5.8:1 to 8.3:1 on filled
-controls across all three variants, which a dragged slider cannot promise.
-The id is shared across the family, so the choice survives a light/dark
-switch: each variant carries its own tone of the same accent.
-
-`atlas`, `atlasDark` and `atlasSepia` are one family today. Vuetify's
-`ThemeDefinition` is a single mode by definition, so a registered pair is
-how a light/dark switch is built — the design lives in one place and only
-the ground changes.
+Presets rather than a colour picker: every one is measured against the
+theme's ground, and the id is shared across the family, so the choice
+survives a light/dark switch.
 
 Pass the event and the new theme opens as a circle from the control that was
 pressed, through the View Transitions API — Baseline since October 2025.
@@ -211,267 +204,27 @@ file also ships as `*.min.css`.
 
 ## Writing your own theme
 
-A theme states only what it changes — Vuetify merges it over its own `light`
-or `dark` first, so anything you leave out is inherited.
-
-```ts
-import { defineTheme } from 'vuetiwatch'
-
-export const midnight = defineTheme({
-  name: 'midnight',
-  meta: {
-    title: 'Midnight',
-    description: 'Deep blue, quiet contrast.',
-    dark: true,
-    iconStyle: 'outline',
-    swatch: ['#070B18', '#101830', '#5B8DEF', '#8A7BF0'],
-    fonts: ['Inter'],
-  },
-  theme: {
-    dark: true,
-    colors: { background: '#070B18', surface: '#101830', primary: '#5B8DEF' },
-    variables: {
-      'font-body': "'Inter', system-ui, sans-serif",
-      'vw-radius': '8px',
-    },
-  },
-  defaults: { VCard: { variant: 'outlined' } },
-})
-```
-
-Register it alongside the rest:
-
-```ts
-createVuetify({ theme: { themes: { ...vuetiwatchThemes, midnight: midnight.theme } } })
-app.use(createVuetiwatch(vuetify, { themes: [...themeList, midnight] }))
-```
-
-### Theme variables
-
-Vuetify re-emits everything under `variables` as a CSS custom property when
-the theme changes, which is how the stylesheet stays generic. Alongside
-Vuetify's own, it reads:
-
-| Variable | Default | Effect |
-| --- | --- | --- |
-| `vw-radius` | `4px` | Fields, alerts, lists, menus, snackbars, slider track, progress bars |
-| `vw-radius-btn` | `vw-radius` | Buttons and button groups, for themes whose controls are capsules |
-| `vw-radius-lg` | `vw-radius` | Cards, tables, expansion panels |
-| `vw-radius-chip` | `9999px` | Chips and badges |
-| `vw-radius-thumb` | `50%` | Slider thumb |
-| `vw-radius-icon-btn` | `50%` | Icon buttons, for themes with no curve anywhere |
-| `vw-radius-avatar` / `-dot` | `50%` | Avatars, and the dot on a timeline |
-| `vw-border-width` | `thin` | Outlined variants and field outlines |
-| `vw-outlined-fill` | `surface` | What an outlined card paints — `transparent` for themes whose surface is the ground |
-| `vw-panel-border` / `-shadow` / `-fill` | Vuetify's | A panel standing on its own: a bare list, sheet, banner or table |
-| `vw-panel-image` / `-filter` | none | The same panel's gradient and backdrop filter, for the gradient and glass themes |
-| `vw-outline-opacity` | `border-opacity` | The line around an outlined card, which Vuetify draws in the ink of its own text |
-| `vw-skeleton-opacity` | clamped | The bones of a loading placeholder, which Vuetify ties to `border-opacity` |
-| `vw-field-border-opacity` | `0.38` | The resting outline of a field — Vuetify's default reads about 2.3:1 |
-| `vw-btn-weight` / `-tracking` / `-transform` | Vuetify's | Button typography |
-| `vw-heading-weight` / `-tracking` / `-transform` | Vuetify's | Headings and the display / headline / title-large scale |
-| `vw-th-weight` / `-tracking` / `-transform` | Vuetify's | Table headers |
-| `vw-numeric` | `normal` | Figures in tables and pagination — `tabular-nums` lines columns up |
-| `vw-tab-slider-height` | `2px` | Active tab indicator |
-| `vw-tab-size` | `0.875rem` | Tab labels, which Vuetify builds out of buttons and sizes like body text |
-| `vw-avatar-ratio` | `0.4` | Initials inside an avatar, as a share of its height |
-| `vw-timeline-line` / `-width` | hairline | The timeline connector — any background, so a repeating gradient makes it dashed |
-| `vw-timeline-line-opacity` | `border-opacity` | The connector's fade, when `vw-timeline-line` is left alone |
-| `vw-relief-inset` | `0` | Padding inside chip groups, room for controls that lift |
-| `vw-overlay-shadow` / `-border` | Vuetify's | Menus, dialogs and tooltips |
-| `vw-list-bar` / `-color` | `0` | Accent bar on the active list item, leading edge |
-| `vw-pagination-active-color` / `-opacity` | Vuetify's | The current page |
-| `vw-link-decoration` | `underline` | Bare `<a>` elements |
-| `font-body` / `font-heading` | Roboto | Native to Vuetify 4 |
-| `vw-gradient` / `-btn` | none | A theme's gradient, and the deeper one used where text sits on it |
-| `vw-motion-duration` / `-ease` | `160ms` / standard | Press, hover lift, tab slider |
-| `vw-press-scale` / `-shift` | `0.98` / `0` | How far a control squashes and sinks under a press |
-| `vw-hover-lift` | `0` | How far a linked card rises on hover |
-| `vw-pop-scale` / `-duration` | `1.18` / `220ms` | The overshoot when a checkbox, toggle or star turns on |
-| `vw-focus-ring` / `-offset` | `2px solid primary` / `2px` | `:focus-visible` on buttons, tabs, chips, list items |
-| `vw-theme-transition` | `420ms` | The wipe when `change()` switches theme |
-
-`font-heading` reaches `text-display-*`, `text-headline-*`, `text-title-large`
-and bare `<h1>`–`<h6>`; the rest of the scale takes `font-body`. Vuetify 4
-uses the Material 3 names — `text-h1`…`text-h6`, `text-body-1`, `text-caption`
-and `text-overline` no longer exist.
-
-### What wins
-
-These variables set the *default* a component draws with — the same job
-Vuetify's SASS variables do at build time, moved to runtime so the look can
-be swapped without recompiling. Vuetify draws the same line itself: it ships
-`$button-border-radius` for the default and `$button-rounded-border-radius`
-for what the `rounded` prop asks for.
-
-Four levels, loudest first:
-
-| | Set by | Example |
-| --- | --- | --- |
-| **1. A prop or utility class** | the component's author | `<v-card rounded="xl">`, `class="rounded-0"` |
-| **2. The theme's component defaults** | the theme | `candy` making every `VBtn` `size="large"` |
-| **3. Your `createVuetify({ defaults })`** | you, once | `VDataTable: { hover: true }` |
-| **4. Vuetify** | the framework | the 4px corner every component ships with |
-
-Level 1 is why every rule in the core layer carries `:not([class*='rounded-'])`:
-a component whose author asked for a corner keeps it whatever the theme says.
-Level 2 sits above level 3 on purpose — a theme that could not change a
-variant would not be a theme — and `createVuetiwatch(vuetify, { defaults:
-'under' })` swaps the two when the app owns a decision the theme also has an
-opinion on, an admin panel with its own density switch being the usual case.
-It overrides only the keys it actually
-sets, so the rest of your configuration survives every switch, including
-defaults you assign at runtime. Level 4 holds because every declaration
-falls back to Vuetify's own value, which is why importing the stylesheet
-cannot change an app that is not running a Vuetiwatch theme.
-
-A fifth level sits underneath, in CSS rather than in props: your own
-stylesheet. Vuetify ships every rule inside `@layer vuetify-*`, and an
-unlayered rule outranks a layered one whatever its specificity, so the core
-layer needs no weight of its own to beat it — and takes none. Its scope is a
-`:where()`, which leaves each rule weighing the component selector and its
-guard, two classes at most. Anything with a second selector of its own clears
-it:
-
-```css
-/* wins over the theme */
-.v-application .v-btn { border-radius: 0 }
-```
-
-A theme file, which carries its own theme class, clears it the same way —
-which is what makes a theme an opinion over the defaults rather than a peer
-of them. The one exception is marked as such in the stylesheet: a short block
-of corrections that has to outrank a theme, because a theme's own rule does
-damage in a context it never considered — a per-button shadow drawing a seam
-down every join of a button group.
-
-The practical version: if a component looks wrong under a theme, look for a
-`rounded`, `variant`, `elevation` or `density` prop on it first. That prop is
-doing exactly what it is meant to do, and the theme is standing aside.
-
-### Contrast
-
-Vuetify picks the label colour for a filled control automatically, by
-whichever of black or white scores higher on [APCA](https://github.com/Myndex/apca-w3) —
-the WCAG 3 draft algorithm. It optimises, but it does not clear a bar: on
-Vuetify's own light theme the filled `warning` button lands at 2.4:1 against
-WCAG 2's 4.5:1 for label text.
-
-Every theme here is measured against both, and states `on-*` explicitly
-wherever the automatic pick falls short — which is the documented way to
-control it. Where the two models disagreed the colour was deepened a few
-points of lightness instead of flipping the label, so the hue survives and
-both models pass; `aurora` keeps its bright gradient for decoration and
-carries a deeper one behind anything with text on it.
-
-The result: in seventeen of the eighteen non-stock themes every filled control
-clears 4.5:1. `classic` does not, and that is the point of it — it is stock
-Vuetify, including this.
-
-`npm run audit` measures all of it and fails on anything unexplained, so the
-next palette change cannot quietly walk this back. Exceptions live in that
-script with their reason attached, which is the only way a later reader can
-tell a decision from an oversight.
-
-`soft` is the one stated exception. Its filled controls carry white labels on
-pastel grounds, which measures between 1.77:1 and 2.84:1 — under the bar, by
-both models. Nothing about that is accidental: white is what the palette wants,
-and the only way to earn it is to take the hues down by a third, at which point
-the theme is no longer pastel and no longer itself. If a screen has to be legible
-to everyone, pick a theme that measures — `atlas` and `graphite` are built for
-exactly that. `soft` is for the places where the palette is the point.
-
-### Motion
-
-Which transition a floating surface uses is an ordinary prop too, so a theme
-owns how its overlays arrive as well as how they look. `overlays()` states it
-once for the dialog, the menu, the tooltip and the snackbar — `menu` reaches
-the select, the autocomplete and the combobox with it.
-
-```ts
-import { overlays, ripple } from 'vuetiwatch'
-
-defineTheme({
-  // …
-  defaults: [
-    overlays({
-      dialog: 'fade-transition',
-      menu: 'slide-y-transition',
-      tooltip: 'fade-transition',
-    }),
-    ripple(false),
-  ],
-})
-```
-
-`false` means no animation at all, which is the honest answer for a theme
-that draws no depth for a surface to arrive through — `brutalist` uses it.
-
-Vuetify bakes the *timing* of each named transition into its own stylesheet,
-so naming one only half moves it: a fade takes 300ms whether it belongs to a
-theme that settles slowly or to one that repaints instantly. Two variables
-take that back, and default to Vuetify's own numbers so a theme that says
-nothing changes nothing:
-
-| Variable | What it sets |
-| --- | --- |
-| `--v-vw-overlay-duration` | How long a surface takes to arrive |
-| `--v-vw-overlay-exit` | How long it takes to leave; falls through to the above |
-
-The easing follows `--v-vw-motion-ease`, so a theme that already stated its
-curve gets its overlays eased the same way for free.
-
-`ripple(false)` turns off the Material ripple everywhere one is drawn — the
-tab, the app-bar nav icon and every tick box included, each of which is its
-own defaults key and would otherwise be missed.
-
-### Selection
-
-Dragging across text is answered in the browser's own blue, which belongs to
-no palette. Every non-stock theme replaces it with its accent at 24%, which
-costs a theme nothing and follows `setAccent()` when one repaints. A theme
-that wants a solid highlight states both halves and takes responsibility for
-the ink on top:
-
-| Variable | What it sets |
-| --- | --- |
-| `--v-vw-selection-fill` | The highlight behind selected text |
-| `--v-vw-selection-color` | The text on it; defaults to the text's own colour |
-
-### Icons
-
-Vuetify's icon *set* is global and cannot vary per theme, but which glyph a
-component draws is an ordinary prop. `icons()` spreads one semantic set across
-every component that draws it — `dropdown` reaches selects, expansion panels
-and list groups at once.
-
-```ts
-import { icons } from 'vuetiwatch'
-
-defineTheme({
-  // …
-  defaults: [
-    icons({
-      dropdown: 'mdi-chevron-down',
-      checkboxOn: 'mdi-check-circle',
-      checkboxOff: 'mdi-circle-outline',
-    }),
-  ],
-})
-```
-
-Every key is optional; names must exist in the set the app installed, since a
-missing one renders blank.
-
-This covers only the glyphs Vuetify draws for its own controls. An icon the
-app passes itself — a mailbox, a dashboard — is content, so a theme declares a
-preference through `meta.iconStyle` instead and the app may follow it:
-
-```ts
-const outlined = computed(
-  () => vuetiwatchMeta[theme.global.name.value]?.iconStyle === 'outline',
-)
-```
+`defineTheme()` takes a name, the meta a picker needs, a Vuetify
+`ThemeDefinition` and the component defaults that go with it; everything left
+out is inherited from Vuetify's own `light` or `dark`. Register it alongside
+the rest, and it behaves like a theme that shipped with the package —
+including the switch animation and the light/dark family.
+
+## Documentation
+
+- **[Writing your own theme][authoring]** — `defineTheme`, overlay transitions,
+  text selection, per-theme icons
+- **[Theme variables][variables]** — every `vw-*` custom property the
+  stylesheet reads, and what it moves
+- **[What wins][cascade]** — props, theme defaults, your defaults, Vuetify,
+  and where your own CSS lands
+- **[Contrast][contrast]** — how the palettes are measured against WCAG 2 and
+  APCA, and the one stated exception
+
+[authoring]: https://github.com/j-tap/vuetiwatch/blob/main/docs/authoring.md
+[variables]: https://github.com/j-tap/vuetiwatch/blob/main/docs/theme-variables.md
+[cascade]: https://github.com/j-tap/vuetiwatch/blob/main/docs/cascade.md
+[contrast]: https://github.com/j-tap/vuetiwatch/blob/main/docs/contrast.md
 
 ## Requirements
 

package/dist/themes/soft.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"soft.d.ts","sourceRoot":"","sources":["../../src/themes/soft.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,IAAI,+CA0If,CAAA"}
+{"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

@@ -52,7 +52,8 @@ export const soft = defineTheme({
              * A screen that has to be read by everyone should reach for a theme
              * that measures; `atlas` and `graphite` exist for that, and `soft` is
              * for the onboarding flow and the marketing page where the palette is
-             * the point. The README says as much next to the claim it qualifies.
+             * the point. `docs/contrast.md` says as much next to the claim it
+             * qualifies.
              *
              * `primary` is not listed because it needs no help: at #705EEF white
              * already reads 4.63:1 and is the automatic pick.

package/dist/themes/soft.js.map

@@ -1 +1 @@
-{"version":3,"file":"soft.js","sourceRoot":"","sources":["../../src/themes/soft.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"soft.js","sourceRoot":"","sources":["../../src/themes/soft.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "vuetiwatch",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "type": "module",
-  "description": "Free, plug-and-play themes for Vuetify 4 — a Bootswatch for Vuetify",
+  "description": "Nineteen free, plug-and-play Vuetify themes for Vuetify 4 and Vue 3 — what Bootswatch is to Bootstrap",
   "license": "MIT",
   "author": "j-tap",
   "homepage": "https://j-tap.github.io/vuetiwatch/",
@@ -14,14 +14,19 @@
   },
   "keywords": [
     "vuetiwatch",
-    "vue",
-    "vue3",
     "vuetify",
     "vuetify4",
+    "vuetify-theme",
+    "vuetify-themes",
+    "vuetify-plugin",
+    "vue",
+    "vue3",
     "theme",
     "themes",
     "dark-mode",
-    "design-system"
+    "design-system",
+    "ui-themes",
+    "bootswatch"
   ],
   "sideEffects": [
     "*.css"

package/src/themes/soft.ts

@@ -53,7 +53,8 @@ export const soft = defineTheme({
        * A screen that has to be read by everyone should reach for a theme
        * that measures; `atlas` and `graphite` exist for that, and `soft` is
        * for the onboarding flow and the marketing page where the palette is
-       * the point. The README says as much next to the claim it qualifies.
+       * the point. `docs/contrast.md` says as much next to the claim it
+       * qualifies.
        *
        * `primary` is not listed because it needs no help: at #705EEF white
        * already reads 4.63:1 and is the automatic pick.