vuetiwatch 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 j-tap
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,232 @@
+# Vuetiwatch
+
+🎨 Free, plug-and-play themes for **[Vuetify 4](https://vuetifyjs.com/)** — what [Bootswatch](https://bootswatch.com/)
+is to Bootstrap.
+
+**[See all fourteen themes →](https://j-tap.github.io/vuetiwatch/)**
+
+Vuetify ships one look. Vuetiwatch ships fourteen, and they differ in more
+than hue: radius, border weight, density, component variants, typography and
+icons all move together.
+
+```sh
+npm i vuetiwatch      # or: bun add / yarn add / pnpm add
+```
+
+## Themes
+
+| Name | Mode | Character |
+| --- | --- | --- |
+| `classic` | light | Stock Vuetify. Material Design, Roboto, familiar elevation |
+| `paper` | light | Flat editorial — warm paper, ink accents, hairline borders, serif headings |
+| `slate` | light | Dense dashboard — muted slate blue, compact density, outlined cards |
+| `calm` | light | Low contrast, desaturated naturals, no shadows, a lot of air |
+| `lux` | light | Editorial luxury — hairline rules, wide tracking, small caps, muted gold |
+| `soft` | light | Pastel and generous — large radii, diffuse tinted shadows, hearts for stars |
+| `clay` | light | Inflated pastel shapes with a triple shadow. Toy-like |
+| `morph` | light | Neumorphic — one continuous surface, shaped only by light and shadow |
+| `sketchy` | light | Hand-drawn wobble and pencil greys, for mockups and mirth |
+| `brutalist` | light | Thick black rules, acid lime, hard unblurred shadows |
+| `liquidGlass` | light | Capsule controls and refracting panes over a calm wash, after iOS 26 |
+| `darkGlass` | dark | Frosted translucent surfaces on a deep violet ground |
+| `aurora` | dark | Iridescent gradients on near-black — the showcase theme |
+| `neon` | dark | Terminal black, cyan and magenta glow, zero radius, monospace headings |
+
+## Setup
+
+**1. Register the themes.** They are plain Vuetify `ThemeDefinition`s.
+
+```ts
+// plugins/vuetify.ts
+import { createVuetify } from 'vuetify'
+import { vuetiwatchThemes } from 'vuetiwatch'
+
+import 'vuetify/styles'
+import 'vuetiwatch/styles.css'
+
+export const vuetify = createVuetify({
+  theme: { defaultTheme: 'paper', themes: vuetiwatchThemes },
+})
+```
+
+**2. Install the plugin, after Vuetify.**
+
+```ts
+// main.ts
+import { createVuetiwatch, themeList } from 'vuetiwatch'
+
+createApp(App)
+  .use(vuetify)
+  .use(createVuetiwatch(vuetify, { themes: themeList }))
+  .mount('#app')
+```
+
+That is the whole setup. Step 1 alone gives you colours and fonts; the
+stylesheet and the plugin add everything a `ThemeDefinition` cannot express —
+radius, border weight, component variants, icons and per-theme surface
+treatment.
+
+The plugin swaps Vuetify's **global component defaults** when the theme
+changes, since those are global rather than per-theme. Your own
+`createVuetify({ defaults })` is preserved; theme defaults layer on top.
+
+### Switching themes
+
+Standard Vuetify:
+
+```vue
+<script setup lang="ts">
+import { useTheme } from 'vuetify'
+import { themeList } from 'vuetiwatch'
+
+const theme = useTheme()
+</script>
+
+<template>
+  <button v-for="t in themeList" :key="t.name" @click="theme.change(t.name)">
+    {{ t.meta.title }}
+  </button>
+</template>
+```
+
+### Fonts
+
+Themes name the families they want but never load them — that stays your
+call. `meta.fonts` lists what each expects, and every family has a system
+fallback, so skipping this degrades gracefully rather than breaking.
+
+```html
+<link rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
+```
+
+### Shipping only a few themes
+
+Pass just those to the plugin and import their stylesheets instead of the
+combined one. A single-theme app drops from about 9.5 kB gzipped to 3.4 kB.
+
+```ts
+import { createVuetiwatch, paper } from 'vuetiwatch'
+import 'vuetiwatch/styles/core.css'
+import 'vuetiwatch/styles/paper.css'
+
+app.use(createVuetiwatch(vuetify, { themes: [paper] }))
+```
+
+`core.css` is always needed. A theme file exists only where a theme needs
+more than its `ThemeDefinition` can express, so `classic` has none. Every
+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 |
+| `vw-radius-btn` | `vw-radius` | Buttons only, for themes whose controls are capsules |
+| `vw-radius-lg` | `vw-radius` | Cards, tables, expansion panels |
+| `vw-radius-chip` | `9999px` | Chips |
+| `vw-radius-thumb` | `50%` | Slider thumb |
+| `vw-border-width` | `thin` | Outlined variants and field outlines |
+| `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-tab-slider-height` | `2px` | Active tab indicator |
+| `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 |
+
+An explicit `rounded` prop always wins over `vw-radius`.
+
+`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.
+
+### 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',
+)
+```
+
+## Requirements
+
+- **Vuetify 4.0+.** v3 is not supported: runtime font switching
+  (`--v-font-body`, `--v-font-heading`) and `shadow-color` exist only in v4,
+  and without them the themes lose most of what separates them.
+- **Vue 3.5+**
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { aurora, brutalist, calm, classic, clay, darkGlass, liquidGlass, lux, morph, neon, paper, sketchy, slate, soft, } from './themes/index.js';
+export { themeList, vuetiwatchDefaults, vuetiwatchMeta, vuetiwatchThemes, } from './registry.js';
+export { createVuetiwatch } from './plugin.js';
+export { defineTheme } from './util/defineTheme.js';
+export { bars, combine, controls, fields, icons, surfaces, tables } from './util/defaults.js';
+export type { VuetiwatchOptions } from './plugin.js';
+export type { VuetiwatchThemeName } from './registry.js';
+export type { DefineThemeOptions } from './util/defineTheme.js';
+export type { VuetiwatchIcons } from './util/defaults.js';
+export type { VuetiwatchDefaults, VuetiwatchMeta, VuetiwatchTheme, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,WAAW,EACX,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,IAAI,GACL,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,SAAS,EACT,kBAAkB,EAClB,cAAc,EACd,gBAAgB,GACjB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAE7F,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AACxD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACzD,YAAY,EACV,kBAAkB,EAClB,cAAc,EACd,eAAe,GAChB,MAAM,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,6 @@
+export { aurora, brutalist, calm, classic, clay, darkGlass, liquidGlass, lux, morph, neon, paper, sketchy, slate, soft, } from './themes/index.js';
+export { themeList, vuetiwatchDefaults, vuetiwatchMeta, vuetiwatchThemes, } from './registry.js';
+export { createVuetiwatch } from './plugin.js';
+export { defineTheme } from './util/defineTheme.js';
+export { bars, combine, controls, fields, icons, surfaces, tables } from './util/defaults.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,WAAW,EACX,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,IAAI,GACL,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,SAAS,EACT,kBAAkB,EAClB,cAAc,EACd,gBAAgB,GACjB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/plugin.d.ts

@@ -0,0 +1,41 @@
+import type { Plugin } from 'vue';
+import type { VuetiwatchTheme } from './types.js';
+export interface VuetiwatchOptions {
+    /**
+     * Themes to manage — normally the package's `themeList`, or just the ones
+     * an app ships.
+     *
+     * Required rather than defaulted, because a default would mean importing
+     * the registry here, and a static import cannot be shaken out: every app
+     * would carry all fourteen themes even after passing one.
+     */
+    themes: readonly VuetiwatchTheme[];
+    /**
+     * Apply each theme's component defaults on top of your own.
+     * @default true
+     */
+    defaults?: boolean;
+    /**
+     * Mirror the active theme name onto `<html data-vuetiwatch="...">`, so
+     * you can hang your own CSS off it.
+     * @default true
+     */
+    attribute?: boolean;
+}
+/**
+ * Keeps Vuetify's global component defaults in sync with the active theme.
+ *
+ * Vuetify's `defaults` are global rather than per-theme, so a theme that
+ * wants outlined cards or compact tables cannot express that through a
+ * `ThemeDefinition` alone. This plugin watches the active theme and swaps
+ * those defaults for you, merging them over whatever you passed to
+ * `createVuetify({ defaults })`.
+ *
+ * Install it after Vuetify:
+ *
+ * ```ts
+ * app.use(vuetify).use(createVuetiwatch(vuetify))
+ * ```
+ */
+export declare function createVuetiwatch(vuetify: unknown, options: VuetiwatchOptions): Plugin;
+//# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAO,MAAM,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,KAAK,EAAsB,eAAe,EAAE,MAAM,YAAY,CAAA;AAarE,MAAM,WAAW,iBAAiB;IAChC;;;;;;;OAOG;IACH,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,iBAAiB,GACzB,MAAM,CA2DR"}

package/dist/plugin.js

@@ -0,0 +1,58 @@
+import { watch } from 'vue';
+import { combine } from './util/defaults.js';
+/**
+ * Keeps Vuetify's global component defaults in sync with the active theme.
+ *
+ * Vuetify's `defaults` are global rather than per-theme, so a theme that
+ * wants outlined cards or compact tables cannot express that through a
+ * `ThemeDefinition` alone. This plugin watches the active theme and swaps
+ * those defaults for you, merging them over whatever you passed to
+ * `createVuetify({ defaults })`.
+ *
+ * Install it after Vuetify:
+ *
+ * ```ts
+ * app.use(vuetify).use(createVuetiwatch(vuetify))
+ * ```
+ */
+export function createVuetiwatch(vuetify, options) {
+    const { themes, defaults: applyDefaults = true, attribute = true, } = options;
+    // Only the defaults are ever read here, so the closure holds those rather
+    // than the whole theme objects — palettes and metadata for every theme
+    // would otherwise stay pinned for the life of the app.
+    const defaultsByName = new Map(themes.map(theme => [theme.name, theme.defaults]));
+    return {
+        install(_app) {
+            const instance = vuetify;
+            if (!instance?.theme?.global?.name) {
+                throw new Error('[vuetiwatch] createVuetiwatch() expects the object returned by createVuetify(). ' +
+                    'Install it after Vuetify: app.use(vuetify).use(createVuetiwatch(vuetify))');
+            }
+            // Whatever the app configured itself — theme defaults layer on top of it.
+            const userDefaults = instance.defaults.value ?? {};
+            // The merge is a pure function of the theme name, so it is computed at
+            // most once per theme however often the app switches.
+            const merged = new Map();
+            const defaultsFor = (name) => {
+                const themeDefaults = defaultsByName.get(name);
+                if (!themeDefaults)
+                    return userDefaults;
+                let result = merged.get(name);
+                if (!result) {
+                    result = combine(userDefaults, themeDefaults);
+                    merged.set(name, result);
+                }
+                return result;
+            };
+            watch(() => instance.theme.global.name.value, name => {
+                if (applyDefaults) {
+                    instance.defaults.value = defaultsFor(name);
+                }
+                if (attribute && typeof document !== 'undefined') {
+                    document.documentElement.setAttribute('data-vuetiwatch', name);
+                }
+            }, { immediate: true });
+        },
+    };
+}
+//# sourceMappingURL=plugin.js.map

package/dist/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAG3B,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAmC5C;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,gBAAgB,CAC9B,OAAgB,EAChB,OAA0B;IAE1B,MAAM,EACJ,MAAM,EACN,QAAQ,EAAE,aAAa,GAAG,IAAI,EAC9B,SAAS,GAAG,IAAI,GACjB,GAAG,OAAO,CAAA;IAEX,0EAA0E;IAC1E,uEAAuE;IACvE,uDAAuD;IACvD,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEjF,OAAO;QACL,OAAO,CAAE,IAAS;YAChB,MAAM,QAAQ,GAAG,OAAsB,CAAA;YAEvC,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;gBACnC,MAAM,IAAI,KAAK,CACb,kFAAkF;oBAClF,2EAA2E,CAC5E,CAAA;YACH,CAAC;YAED,0EAA0E;YAC1E,MAAM,YAAY,GAAG,QAAQ,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAA;YAElD,uEAAuE;YACvE,sDAAsD;YACtD,MAAM,MAAM,GAAG,IAAI,GAAG,EAA8B,CAAA;YACpD,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,EAAE;gBACnC,MAAM,aAAa,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;gBAE9C,IAAI,CAAC,aAAa;oBAAE,OAAO,YAAY,CAAA;gBAEvC,IAAI,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;gBAE7B,IAAI,CAAC,MAAM,EAAE,CAAC;oBACZ,MAAM,GAAG,OAAO,CAAC,YAAY,EAAE,aAAa,CAAC,CAAA;oBAC7C,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;gBAC1B,CAAC;gBAED,OAAO,MAAM,CAAA;YACf,CAAC,CAAA;YAED,KAAK,CACH,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EACtC,IAAI,CAAC,EAAE;gBACL,IAAI,aAAa,EAAE,CAAC;oBAClB,QAAQ,CAAC,QAAQ,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,CAAA;gBAC7C,CAAC;gBAED,IAAI,SAAS,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;oBACjD,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAA;gBAChE,CAAC;YACH,CAAC,EACD,EAAE,SAAS,EAAE,IAAI,EAAE,CACpB,CAAA;QACH,CAAC;KACF,CAAA;AACH,CAAC"}

package/dist/registry.d.ts

@@ -0,0 +1,17 @@
+import type { ThemeDefinition } from 'vuetify';
+import type { VuetiwatchDefaults, VuetiwatchMeta, VuetiwatchTheme } from './types.js';
+/**
+ * Every theme in the package, in the order a picker should show them:
+ * the everyday ones first, then the niche ones.
+ */
+export declare const themeList: readonly [VuetiwatchTheme<"classic">, VuetiwatchTheme<"paper">, VuetiwatchTheme<"slate">, VuetiwatchTheme<"calm">, VuetiwatchTheme<"lux">, VuetiwatchTheme<"soft">, VuetiwatchTheme<"clay">, VuetiwatchTheme<"morph">, VuetiwatchTheme<"sketchy">, VuetiwatchTheme<"brutalist">, VuetiwatchTheme<"liquidGlass">, VuetiwatchTheme<"darkGlass">, VuetiwatchTheme<"aurora">, VuetiwatchTheme<"neon">];
+export type VuetiwatchThemeName = (typeof themeList)[number]['name'];
+type ByName<T> = Record<VuetiwatchThemeName, T>;
+/** Ready for `createVuetify({ theme: { themes: vuetiwatchThemes } })`. */
+export declare const vuetiwatchThemes: ByName<ThemeDefinition>;
+/** Per-theme component defaults, applied for you by `createVuetiwatch()`. */
+export declare const vuetiwatchDefaults: ByName<VuetiwatchDefaults>;
+/** Titles, descriptions and preview swatches, for building a theme picker. */
+export declare const vuetiwatchMeta: ByName<VuetiwatchMeta>;
+export {};
+//# sourceMappingURL=registry.d.ts.map

package/dist/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAkBrF;;;GAGG;AACH,eAAO,MAAM,SAAS,oYAeyB,CAAA;AAE/C,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpE,KAAK,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAA;AAc/C,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,eAAe,CAAU,CAAA;AAE/D,6EAA6E;AAC7E,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,kBAAkB,CAAY,CAAA;AAEtE,8EAA8E;AAC9E,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,cAAc,CAAQ,CAAA"}

package/dist/registry.js

@@ -0,0 +1,37 @@
+import { aurora, brutalist, calm, classic, clay, darkGlass, liquidGlass, lux, morph, neon, paper, sketchy, slate, soft, } from './themes/index.js';
+/**
+ * Every theme in the package, in the order a picker should show them:
+ * the everyday ones first, then the niche ones.
+ */
+export const themeList = [
+    classic,
+    paper,
+    slate,
+    calm,
+    lux,
+    soft,
+    clay,
+    morph,
+    sketchy,
+    brutalist,
+    liquidGlass,
+    darkGlass,
+    aurora,
+    neon,
+];
+const themes = {};
+const defaults = {};
+const meta = {};
+for (const theme of themeList) {
+    const name = theme.name;
+    themes[name] = theme.theme;
+    defaults[name] = theme.defaults;
+    meta[name] = theme.meta;
+}
+/** Ready for `createVuetify({ theme: { themes: vuetiwatchThemes } })`. */
+export const vuetiwatchThemes = themes;
+/** Per-theme component defaults, applied for you by `createVuetiwatch()`. */
+export const vuetiwatchDefaults = defaults;
+/** Titles, descriptions and preview swatches, for building a theme picker. */
+export const vuetiwatchMeta = meta;
+//# sourceMappingURL=registry.js.map

package/dist/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,MAAM,EACN,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,WAAW,EACX,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,IAAI,GACL,MAAM,mBAAmB,CAAA;AAE1B;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,OAAO;IACP,KAAK;IACL,KAAK;IACL,IAAI;IACJ,GAAG;IACH,IAAI;IACJ,IAAI;IACJ,KAAK;IACL,OAAO;IACP,SAAS;IACT,WAAW;IACX,SAAS;IACT,MAAM;IACN,IAAI;CACyC,CAAA;AAM/C,MAAM,MAAM,GAAG,EAA6B,CAAA;AAC5C,MAAM,QAAQ,GAAG,EAAgC,CAAA;AACjD,MAAM,IAAI,GAAG,EAA4B,CAAA;AAEzC,KAAK,MAAM,KAAK,IAAI,SAAS,EAAE,CAAC;IAC9B,MAAM,IAAI,GAAG,KAAK,CAAC,IAA2B,CAAA;IAE9C,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,KAAK,CAAA;IAC1B,QAAQ,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAA;IAC/B,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAA;AACzB,CAAC;AAED,0EAA0E;AAC1E,MAAM,CAAC,MAAM,gBAAgB,GAA4B,MAAM,CAAA;AAE/D,6EAA6E;AAC7E,MAAM,CAAC,MAAM,kBAAkB,GAA+B,QAAQ,CAAA;AAEtE,8EAA8E;AAC9E,MAAM,CAAC,MAAM,cAAc,GAA2B,IAAI,CAAA"}

package/dist/styles/aurora.css

@@ -0,0 +1,74 @@
+.v-theme--aurora.v-application {
+  background-image: radial-gradient(60rem 40rem at 15% -10%, #7c5cff29, #0000 60%), radial-gradient(50rem 35rem at 95% 5%, #00d4ff1f, #0000 60%);
+  background-attachment: fixed;
+}
+
+.v-theme--aurora .v-card.v-card--variant-elevated {
+  background-image: radial-gradient(36rem 18rem at 0 0, #7c5cff24, #0000 70%);
+  box-shadow: 0 12px 40px #0000008c;
+}
+
+.v-theme--aurora :is(.v-card, .v-alert):after {
+  content: "";
+  border-radius: inherit;
+  padding: var(--v-vw-border-width);
+  background: var(--v-vw-gradient);
+  opacity: .45;
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  -webkit-mask-position: 0 0, 0 0;
+  mask-position: 0 0, 0 0;
+  -webkit-mask-size: auto, auto;
+  mask-size: auto, auto;
+  -webkit-mask-repeat: repeat, repeat;
+  mask-repeat: repeat, repeat;
+  -webkit-mask-clip: content-box, border-box;
+  mask-clip: content-box, border-box;
+  -webkit-mask-origin: content-box, border-box;
+  mask-origin: content-box, border-box;
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  -webkit-mask-source-type: auto, auto;
+  mask-mode: match-source, match-source;
+}
+
+.v-theme--aurora .v-btn.v-btn--variant-flat.bg-primary {
+  background-image: var(--v-vw-gradient);
+  box-shadow: 0 6px 24px #7c5cff73;
+}
+
+.v-theme--aurora .v-btn.v-btn--variant-flat.bg-primary .v-btn__overlay {
+  opacity: 0;
+}
+
+.v-theme--aurora .v-tab__slider {
+  background: var(--v-vw-gradient);
+  box-shadow: 0 0 16px #7c5cffcc;
+}
+
+.v-theme--aurora .v-slider-track__fill {
+  background: var(--v-vw-gradient);
+}
+
+.v-theme--aurora .v-slider-thumb__surface {
+  box-shadow: 0 0 0 6px #7c5cff2e, 0 0 16px #7c5cff99;
+}
+
+.v-theme--aurora .v-selection-control--dirty .v-switch__track {
+  background-image: var(--v-vw-gradient);
+  box-shadow: 0 0 14px #7c5cff80;
+}
+
+.v-theme--aurora :is(.v-menu, .v-dialog) > .v-overlay__content {
+  box-shadow: 0 0 0 1px #9b8cff29, 0 24px 64px #000000b3;
+}
+
+.v-theme--aurora [class*="-display-"] {
+  background: var(--v-vw-gradient);
+  color: #0000;
+  -webkit-background-clip: text;
+  background-clip: text;
+}

package/dist/styles/aurora.min.css

@@ -0,0 +1 @@
+.v-theme--aurora.v-application{background-image:radial-gradient(60rem 40rem at 15% -10%,#7c5cff29,#0000 60%),radial-gradient(50rem 35rem at 95% 5%,#00d4ff1f,#0000 60%);background-attachment:fixed}.v-theme--aurora .v-card.v-card--variant-elevated{background-image:radial-gradient(36rem 18rem at 0 0,#7c5cff24,#0000 70%);box-shadow:0 12px 40px #0000008c}.v-theme--aurora :is(.v-card,.v-alert):after{content:"";border-radius:inherit;padding:var(--v-vw-border-width);background:var(--v-vw-gradient);opacity:.45;pointer-events:none;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.v-theme--aurora .v-btn.v-btn--variant-flat.bg-primary{background-image:var(--v-vw-gradient);box-shadow:0 6px 24px #7c5cff73}.v-theme--aurora .v-btn.v-btn--variant-flat.bg-primary .v-btn__overlay{opacity:0}.v-theme--aurora .v-tab__slider{background:var(--v-vw-gradient);box-shadow:0 0 16px #7c5cffcc}.v-theme--aurora .v-slider-track__fill{background:var(--v-vw-gradient)}.v-theme--aurora .v-slider-thumb__surface{box-shadow:0 0 0 6px #7c5cff2e,0 0 16px #7c5cff99}.v-theme--aurora .v-selection-control--dirty .v-switch__track{background-image:var(--v-vw-gradient);box-shadow:0 0 14px #7c5cff80}.v-theme--aurora :is(.v-menu,.v-dialog)>.v-overlay__content{box-shadow:0 0 0 1px #9b8cff29,0 24px 64px #000000b3}.v-theme--aurora [class*=-display-]{background:var(--v-vw-gradient);color:#0000;-webkit-background-clip:text;background-clip:text}

package/dist/styles/brutalist.css

@@ -0,0 +1,48 @@
+.v-theme--brutalist {
+  --vw-brut-offset: 4px;
+}
+
+.v-theme--brutalist :is(.v-card, .v-btn, .v-alert, .v-chip, .v-table, .v-btn-group, .v-expansion-panels):not(.v-btn--variant-text, .v-btn--variant-plain, .v-card--variant-text, .v-card--variant-plain) {
+  box-shadow: var(--vw-brut-offset) var(--vw-brut-offset) 0 rgb(var(--v-shadow-color));
+}
+
+.v-theme--brutalist :is(.v-btn, .v-chip, .v-btn-group):not(.v-btn--variant-text, .v-btn--variant-plain):not(.v-btn--disabled, .v-btn-group *) {
+  border: var(--v-vw-border-width) solid rgb(var(--v-shadow-color));
+  transition: transform 80ms steps(2, end), box-shadow 80ms steps(2, end);
+}
+
+.v-theme--brutalist .v-btn:active:not(.v-btn--disabled) {
+  transform: translate(var(--vw-brut-offset), var(--vw-brut-offset));
+  box-shadow: 0 0 0 rgb(var(--v-shadow-color));
+}
+
+.v-theme--brutalist .v-btn:not(.v-btn--variant-text, .v-btn--variant-plain):hover:not(.v-btn--disabled, .v-btn-group *) {
+  box-shadow: 5px 5px 0 rgb(var(--v-shadow-color));
+  transform: translate(-1px, -1px);
+}
+
+.v-theme--brutalist :is(.v-menu, .v-dialog) > .v-overlay__content {
+  border: var(--v-vw-border-width) solid rgb(var(--v-shadow-color));
+  box-shadow: 8px 8px 0 rgb(var(--v-shadow-color));
+}
+
+.v-theme--brutalist :is(.v-table thead th, .v-data-table__th) {
+  background-color: rgb(var(--v-theme-secondary));
+  border-bottom: var(--v-vw-border-width) solid rgb(var(--v-shadow-color));
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+.v-theme--brutalist .v-expansion-panels {
+  border: var(--v-vw-border-width) solid rgb(var(--v-shadow-color));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .v-theme--brutalist .v-btn {
+    transition: none;
+  }
+
+  .v-theme--brutalist .v-btn:hover:not(.v-btn--disabled) {
+    transform: none;
+  }
+}

package/dist/styles/brutalist.min.css

@@ -0,0 +1 @@
+.v-theme--brutalist{--vw-brut-offset:4px}.v-theme--brutalist :is(.v-card,.v-btn,.v-alert,.v-chip,.v-table,.v-btn-group,.v-expansion-panels):not(.v-btn--variant-text,.v-btn--variant-plain,.v-card--variant-text,.v-card--variant-plain){box-shadow:var(--vw-brut-offset) var(--vw-brut-offset) 0 rgb(var(--v-shadow-color))}.v-theme--brutalist :is(.v-btn,.v-chip,.v-btn-group):not(.v-btn--variant-text,.v-btn--variant-plain):not(.v-btn--disabled,.v-btn-group *){border:var(--v-vw-border-width) solid rgb(var(--v-shadow-color));transition:transform 80ms steps(2,end),box-shadow 80ms steps(2,end)}.v-theme--brutalist .v-btn:active:not(.v-btn--disabled){transform:translate(var(--vw-brut-offset), var(--vw-brut-offset));box-shadow:0 0 0 rgb(var(--v-shadow-color))}.v-theme--brutalist .v-btn:not(.v-btn--variant-text,.v-btn--variant-plain):hover:not(.v-btn--disabled,.v-btn-group *){box-shadow:5px 5px 0 rgb(var(--v-shadow-color));transform:translate(-1px,-1px)}.v-theme--brutalist :is(.v-menu,.v-dialog)>.v-overlay__content{border:var(--v-vw-border-width) solid rgb(var(--v-shadow-color));box-shadow:8px 8px 0 rgb(var(--v-shadow-color))}.v-theme--brutalist :is(.v-table thead th,.v-data-table__th){background-color:rgb(var(--v-theme-secondary));border-bottom:var(--v-vw-border-width) solid rgb(var(--v-shadow-color));text-transform:uppercase;font-weight:700}.v-theme--brutalist .v-expansion-panels{border:var(--v-vw-border-width) solid rgb(var(--v-shadow-color))}@media (prefers-reduced-motion:reduce){.v-theme--brutalist .v-btn{transition:none}.v-theme--brutalist .v-btn:hover:not(.v-btn--disabled){transform:none}}

package/dist/styles/calm.css

@@ -0,0 +1,21 @@
+.v-theme--calm :is(.v-card, .v-sheet, .v-table, .v-list, .v-expansion-panels) {
+  box-shadow: none;
+}
+
+.v-theme--calm .v-card.v-card--variant-flat {
+  background-color: rgb(var(--v-theme-surface));
+}
+
+.v-theme--calm :is(.v-menu, .v-dialog) > .v-overlay__content {
+  border: var(--v-vw-border-width) solid rgba(var(--v-border-color), .09);
+  box-shadow: 0 16px 48px #3a3a360f;
+}
+
+.v-theme--calm :is(.v-table thead th, .v-data-table__th) {
+  border-bottom: var(--v-vw-border-width) solid rgba(var(--v-border-color), .09);
+  font-weight: 500;
+}
+
+.v-theme--calm .v-card-text {
+  line-height: 1.7;
+}

package/dist/styles/calm.min.css

@@ -0,0 +1 @@
+.v-theme--calm :is(.v-card,.v-sheet,.v-table,.v-list,.v-expansion-panels){box-shadow:none}.v-theme--calm .v-card.v-card--variant-flat{background-color:rgb(var(--v-theme-surface))}.v-theme--calm :is(.v-menu,.v-dialog)>.v-overlay__content{border:var(--v-vw-border-width) solid rgba(var(--v-border-color), .09);box-shadow:0 16px 48px #3a3a360f}.v-theme--calm :is(.v-table thead th,.v-data-table__th){border-bottom:var(--v-vw-border-width) solid rgba(var(--v-border-color), .09);font-weight:500}.v-theme--calm .v-card-text{line-height:1.7}

package/dist/styles/clay.css

@@ -0,0 +1,44 @@
+.v-theme--clay {
+  --vw-clay-lift: 8px 8px 20px rgba(var(--v-shadow-color), .18),
+    -6px -6px 16px #ffffffe6,
+    inset -4px -4px 12px rgba(var(--v-shadow-color), .06),
+    inset 4px 4px 10px #ffffffb3;
+}
+
+.v-theme--clay :is(.v-card, .v-btn, .v-alert, .v-btn-group, .v-expansion-panels):not(.v-btn--variant-text, .v-btn--variant-plain, .v-card--variant-text, .v-card--variant-plain, .v-btn--size-small, .v-btn--size-x-small) {
+  box-shadow: var(--vw-clay-lift);
+}
+
+.v-theme--clay :is(.v-chip, .v-btn--size-small, .v-btn--size-x-small):not(.v-btn--variant-text, .v-btn--variant-plain) {
+  box-shadow: 3px 3px 7px rgba(var(--v-shadow-color), .13),
+      -2px -2px 5px #fff9;
+}
+
+.v-theme--clay .v-btn:active:not(.v-btn--disabled) {
+  box-shadow: 4px 4px 10px rgba(var(--v-shadow-color), .16),
+      inset -3px -3px 10px rgba(var(--v-shadow-color), .1),
+      inset 3px 3px 8px #fff9;
+}
+
+.v-theme--clay .v-field.v-field--variant-solo {
+  background: rgb(var(--v-theme-surface));
+  box-shadow: inset 4px 4px 10px rgba(var(--v-shadow-color), .12),
+      inset -4px -4px 10px #ffffffe6;
+}
+
+.v-theme--clay :is(.v-switch__track, .v-slider-track) {
+  box-shadow: inset 2px 2px 6px rgba(var(--v-shadow-color), .18);
+}
+
+.v-theme--clay :is(.v-switch__thumb, .v-slider-thumb__surface) {
+  box-shadow: 3px 3px 8px rgba(var(--v-shadow-color), .24),
+      -2px -2px 6px #ffffffe6;
+}
+
+.v-theme--clay :is(.v-menu, .v-dialog) > .v-overlay__content {
+  box-shadow: 12px 12px 40px rgba(var(--v-shadow-color), .24);
+}
+
+.v-theme--clay .v-tab__slider {
+  border-radius: 5px;
+}