npm - vuetiwatch - Versions diffs - 0.1.0 - Mend

vuetiwatch 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (158) hide show

package/LICENSE +21 -0
package/README.md +232 -0
package/dist/index.d.ts +11 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +6 -0
package/dist/index.js.map +1 -0
package/dist/plugin.d.ts +41 -0
package/dist/plugin.d.ts.map +1 -0
package/dist/plugin.js +58 -0
package/dist/plugin.js.map +1 -0
package/dist/registry.d.ts +17 -0
package/dist/registry.d.ts.map +1 -0
package/dist/registry.js +37 -0
package/dist/registry.js.map +1 -0
package/dist/styles/aurora.css +74 -0
package/dist/styles/aurora.min.css +1 -0
package/dist/styles/brutalist.css +48 -0
package/dist/styles/brutalist.min.css +1 -0
package/dist/styles/calm.css +21 -0
package/dist/styles/calm.min.css +1 -0
package/dist/styles/clay.css +44 -0
package/dist/styles/clay.min.css +1 -0
package/dist/styles/core.css +140 -0
package/dist/styles/core.min.css +1 -0
package/dist/styles/darkGlass.css +43 -0
package/dist/styles/darkGlass.min.css +1 -0
package/dist/styles/liquidGlass.css +100 -0
package/dist/styles/liquidGlass.min.css +1 -0
package/dist/styles/lux.css +21 -0
package/dist/styles/lux.min.css +1 -0
package/dist/styles/morph.css +37 -0
package/dist/styles/morph.min.css +1 -0
package/dist/styles/neon.css +41 -0
package/dist/styles/neon.min.css +1 -0
package/dist/styles/paper.css +17 -0
package/dist/styles/paper.min.css +1 -0
package/dist/styles/sketchy.css +25 -0
package/dist/styles/sketchy.min.css +1 -0
package/dist/styles/slate.css +16 -0
package/dist/styles/slate.min.css +1 -0
package/dist/styles/soft.css +46 -0
package/dist/styles/soft.min.css +1 -0
package/dist/styles.css +686 -0
package/dist/styles.min.css +1 -0
package/dist/themes/aurora.d.ts +10 -0
package/dist/themes/aurora.d.ts.map +1 -0
package/dist/themes/aurora.js +86 -0
package/dist/themes/aurora.js.map +1 -0
package/dist/themes/brutalist.d.ts +10 -0
package/dist/themes/brutalist.d.ts.map +1 -0
package/dist/themes/brutalist.js +103 -0
package/dist/themes/brutalist.js.map +1 -0
package/dist/themes/calm.d.ts +11 -0
package/dist/themes/calm.d.ts.map +1 -0
package/dist/themes/calm.js +88 -0
package/dist/themes/calm.js.map +1 -0
package/dist/themes/classic.d.ts +6 -0
package/dist/themes/classic.d.ts.map +1 -0
package/dist/themes/classic.js +23 -0
package/dist/themes/classic.js.map +1 -0
package/dist/themes/clay.d.ts +8 -0
package/dist/themes/clay.d.ts.map +1 -0
package/dist/themes/clay.js +80 -0
package/dist/themes/clay.js.map +1 -0
package/dist/themes/darkGlass.d.ts +7 -0
package/dist/themes/darkGlass.d.ts.map +1 -0
package/dist/themes/darkGlass.js +77 -0
package/dist/themes/darkGlass.js.map +1 -0
package/dist/themes/index.d.ts +15 -0
package/dist/themes/index.d.ts.map +1 -0
package/dist/themes/index.js +15 -0
package/dist/themes/index.js.map +1 -0
package/dist/themes/liquidGlass.d.ts +19 -0
package/dist/themes/liquidGlass.d.ts.map +1 -0
package/dist/themes/liquidGlass.js +111 -0
package/dist/themes/liquidGlass.js.map +1 -0
package/dist/themes/lux.d.ts +8 -0
package/dist/themes/lux.d.ts.map +1 -0
package/dist/themes/lux.js +91 -0
package/dist/themes/lux.js.map +1 -0
package/dist/themes/morph.d.ts +10 -0
package/dist/themes/morph.d.ts.map +1 -0
package/dist/themes/morph.js +82 -0
package/dist/themes/morph.js.map +1 -0
package/dist/themes/neon.d.ts +7 -0
package/dist/themes/neon.d.ts.map +1 -0
package/dist/themes/neon.js +96 -0
package/dist/themes/neon.js.map +1 -0
package/dist/themes/paper.d.ts +7 -0
package/dist/themes/paper.d.ts.map +1 -0
package/dist/themes/paper.js +88 -0
package/dist/themes/paper.js.map +1 -0
package/dist/themes/sketchy.d.ts +11 -0
package/dist/themes/sketchy.d.ts.map +1 -0
package/dist/themes/sketchy.js +88 -0
package/dist/themes/sketchy.js.map +1 -0
package/dist/themes/slate.d.ts +7 -0
package/dist/themes/slate.d.ts.map +1 -0
package/dist/themes/slate.js +89 -0
package/dist/themes/slate.js.map +1 -0
package/dist/themes/soft.d.ts +7 -0
package/dist/themes/soft.d.ts.map +1 -0
package/dist/themes/soft.js +84 -0
package/dist/themes/soft.js.map +1 -0
package/dist/types.d.ts +40 -0
package/dist/types.d.ts.map +1 -0
package/dist/types.js +2 -0
package/dist/types.js.map +1 -0
package/dist/util/defaults.d.ts +62 -0
package/dist/util/defaults.d.ts.map +1 -0
package/dist/util/defaults.js +100 -0
package/dist/util/defaults.js.map +1 -0
package/dist/util/defineTheme.d.ts +21 -0
package/dist/util/defineTheme.d.ts.map +1 -0
package/dist/util/defineTheme.js +25 -0
package/dist/util/defineTheme.js.map +1 -0
package/dist/util/merge.d.ts +8 -0
package/dist/util/merge.d.ts.map +1 -0
package/dist/util/merge.js +17 -0
package/dist/util/merge.js.map +1 -0
package/package.json +75 -0
package/src/index.ts +35 -0
package/src/plugin.ts +116 -0
package/src/registry.ts +64 -0
package/src/styles/core.css +311 -0
package/src/styles/index.css +30 -0
package/src/styles/themes/aurora.css +86 -0
package/src/styles/themes/brutalist.css +59 -0
package/src/styles/themes/calm.css +31 -0
package/src/styles/themes/clay.css +60 -0
package/src/styles/themes/darkGlass.css +69 -0
package/src/styles/themes/liquidGlass.css +172 -0
package/src/styles/themes/lux.css +31 -0
package/src/styles/themes/morph.css +53 -0
package/src/styles/themes/neon.css +56 -0
package/src/styles/themes/paper.css +32 -0
package/src/styles/themes/sketchy.css +34 -0
package/src/styles/themes/slate.css +26 -0
package/src/styles/themes/soft.css +63 -0
package/src/themes/aurora.ts +86 -0
package/src/themes/brutalist.ts +103 -0
package/src/themes/calm.ts +88 -0
package/src/themes/classic.ts +23 -0
package/src/themes/clay.ts +80 -0
package/src/themes/darkGlass.ts +77 -0
package/src/themes/index.ts +14 -0
package/src/themes/liquidGlass.ts +111 -0
package/src/themes/lux.ts +91 -0
package/src/themes/morph.ts +82 -0
package/src/themes/neon.ts +96 -0
package/src/themes/paper.ts +88 -0
package/src/themes/sketchy.ts +88 -0
package/src/themes/slate.ts +89 -0
package/src/themes/soft.ts +84 -0
package/src/types.ts +44 -0
package/src/util/defaults.ts +164 -0
package/src/util/defineTheme.ts +49 -0
package/src/util/merge.ts +23 -0

package/package.json ADDED Viewed

@@ -0,0 +1,75 @@
+{
+  "name": "vuetiwatch",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Free, plug-and-play themes for Vuetify 4 \u2014 a Bootswatch for Vuetify",
+  "license": "MIT",
+  "author": "j-tap",
+  "homepage": "https://j-tap.github.io/vuetiwatch/",
+  "bugs": "https://github.com/j-tap/vuetiwatch/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/j-tap/vuetiwatch.git",
+    "directory": "packages/vuetiwatch"
+  },
+  "keywords": [
+    "vuetiwatch",
+    "vue",
+    "vue3",
+    "vuetify",
+    "vuetify4",
+    "theme",
+    "themes",
+    "dark-mode",
+    "design-system"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles": "./dist/styles.css",
+    "./styles.css": "./dist/styles.css",
+    "./styles.min.css": "./dist/styles.min.css",
+    "./styles/*": "./dist/styles/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "scripts": {
+    "build": "npm run clean && npm run build:types && npm run build:styles",
+    "build:types": "tsc",
+    "build:styles": "node scripts/build-styles.mjs",
+    "clean": "node --eval \"fs.rmSync('dist', { recursive: true, force: true })\"",
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit",
+    "prepack": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "vuetify": "^4.0.0"
+  },
+  "devDependencies": {
+    "browserslist": "^4.28.0",
+    "lightningcss": "^1.33.0",
+    "typescript": "^7.0.2",
+    "vue": "^3.5.41",
+    "vuetify": "^4.1.11"
+  },
+  "browserslist": [
+    ">0.5%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/src/index.ts ADDED Viewed

@@ -0,0 +1,35 @@
+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'

package/src/plugin.ts ADDED Viewed

@@ -0,0 +1,116 @@
+import { watch } from 'vue'
+import type { App, Plugin } from 'vue'
+import type { VuetiwatchDefaults, VuetiwatchTheme } from './types.js'
+import { combine } from './util/defaults.js'
+/**
+ * The `defaults` ref exposed by `createVuetify()`, plus the theme instance
+ * we need to follow. Typed structurally so the plugin does not depend on
+ * Vuetify's internal types.
+ */
+interface VuetifyLike {
+  defaults: { value: VuetiwatchDefaults }
+  theme: { global: { name: { value: string } } }
+}
+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 function createVuetiwatch (
+  vuetify: unknown,
+  options: VuetiwatchOptions,
+): Plugin {
+  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: App) {
+      const instance = vuetify as VuetifyLike
+      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<string, VuetiwatchDefaults>()
+      const defaultsFor = (name: string) => {
+        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 },
+      )
+    },
+  }
+}

package/src/registry.ts ADDED Viewed

@@ -0,0 +1,64 @@
+import type { ThemeDefinition } from 'vuetify'
+import type { VuetiwatchDefaults, VuetiwatchMeta, VuetiwatchTheme } from './types.js'
+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,
+] as const satisfies readonly VuetiwatchTheme[]
+export type VuetiwatchThemeName = (typeof themeList)[number]['name']
+type ByName<T> = Record<VuetiwatchThemeName, T>
+const themes = {} as ByName<ThemeDefinition>
+const defaults = {} as ByName<VuetiwatchDefaults>
+const meta = {} as ByName<VuetiwatchMeta>
+for (const theme of themeList) {
+  const name = theme.name as VuetiwatchThemeName
+  themes[name] = theme.theme
+  defaults[name] = theme.defaults
+  meta[name] = theme.meta
+}
+/** Ready for `createVuetify({ theme: { themes: vuetiwatchThemes } })`. */
+export const vuetiwatchThemes: ByName<ThemeDefinition> = themes
+/** Per-theme component defaults, applied for you by `createVuetiwatch()`. */
+export const vuetiwatchDefaults: ByName<VuetiwatchDefaults> = defaults
+/** Titles, descriptions and preview swatches, for building a theme picker. */
+export const vuetiwatchMeta: ByName<VuetiwatchMeta> = meta

package/src/styles/core.css ADDED Viewed

@@ -0,0 +1,311 @@
+/**
+ * Vuetiwatch core layer.
+ *
+ * Vuetify's radius, border width and button typography are SASS variables
+ * baked in at build time, so a `ThemeDefinition` cannot reach them. This
+ * file re-expresses them as custom properties that each theme sets through
+ * its `variables`, which Vuetify re-emits on `:root` whenever the active
+ * theme changes.
+ *
+ * The scope is either a Vuetiwatch theme class or the `data-vuetiwatch`
+ * attribute `createVuetiwatch()` sets on `<html>` — the latter is what
+ * extends this layer to themes you build yourself with `defineTheme()`.
+ * `VUETIWATCH_THEMES` is a placeholder: the build expands it into one class
+ * per registered theme, so this list can never drift from the registry.
+ * Importing this file therefore cannot affect an app that is not running a
+ * Vuetiwatch theme, and every value falls back to the stock Vuetify one, so
+ * a theme only pays for what it overrides.
+ *
+ * Component classes are doubled to out-specify Vuetify's own rules without
+ * relying on an ancestor, which keeps teleported overlays covered.
+ *
+ * Authored with CSS nesting; the published file is flattened at build time.
+ */
+:is([data-vuetiwatch], .v-theme--VUETIWATCH_THEMES) {
+  /* -------------------------------------------------------------- radius */
+  /**
+   * An explicit `rounded` prop always wins — hence the first three guards.
+   *
+   * The last three keep out of containers that own their children's
+   * corners: `v-btn-group` squares every child and hands the first and last
+   * an inherited radius, `v-toolbar-items` makes buttons full-bleed, and
+   * `v-tabs` drives its own radius from `--v-tabs-inset-radius`. Rounding
+   * those children individually turns a joined group into separate pills
+   * and a full-height toolbar button into a rounded slab.
+   */
+  & .v-btn.v-btn:not(
+    .v-btn--icon,
+    .v-btn--rounded,
+    [class*='rounded-'],
+    .v-btn-group *,
+    .v-toolbar-items *,
+    .v-tabs *
+  ) {
+    border-radius: var(--v-vw-radius-btn, var(--v-vw-radius, 4px));
+  }
+  /**
+   * Vuetify's square-inset switch hardcodes 6px and 4px, so a theme with no
+   * corners at all still got a rounded toggle. Only this variant follows the
+   * theme — the pill inset is meant to stay a pill.
+   */
+  & .v-switch--inset-square .v-switch__track {
+    border-radius: var(--v-vw-radius, 6px);
+  }
+  & .v-switch--inset-square .v-switch__thumb {
+    border-radius: var(--v-vw-radius, 4px);
+  }
+  /**
+   * A side utility squares one edge so two controls sit flush — a field and
+   * the button on its end. It says nothing about the other corners, which
+   * were left at Vuetify's stock 4px because the `rounded-` guard above
+   * treats any such class as the author taking over.
+   *
+   * So set only the corners the utility leaves alone. Vuetify's own rule
+   * keeps owning the squared edge, which means nothing here has to fight
+   * it, and the logical properties keep that edge leading in RTL.
+   */
+  & :is(.rounded-s-0, .rounded-e-0, .rounded-t-0, .rounded-b-0) {
+    --vw-attached: var(--v-vw-radius, 4px);
+  }
+  & .v-btn:is(.rounded-s-0, .rounded-e-0, .rounded-t-0, .rounded-b-0) {
+    --vw-attached: var(--v-vw-radius-btn, var(--v-vw-radius, 4px));
+  }
+  & .rounded-s-0 {
+    border-start-end-radius: var(--vw-attached);
+    border-end-end-radius: var(--vw-attached);
+  }
+  & .rounded-e-0 {
+    border-start-start-radius: var(--vw-attached);
+    border-end-start-radius: var(--vw-attached);
+  }
+  & .rounded-t-0 {
+    border-end-start-radius: var(--vw-attached);
+    border-end-end-radius: var(--vw-attached);
+  }
+  & .rounded-b-0 {
+    border-start-start-radius: var(--vw-attached);
+    border-start-end-radius: var(--vw-attached);
+  }
+  /* The group keeps the corners its children gave up. */
+  & .v-btn-group.v-btn-group:not([class*='rounded-']) {
+    border-radius: var(--v-vw-radius, 4px);
+  }
+  /**
+   * Pagination items are `icon` buttons so the rule above leaves them
+   * round, but they read as a row of tiles rather than icons — they follow
+   * the button radius instead.
+   */
+  & .v-pagination .v-btn.v-btn {
+    border-radius: var(--v-vw-radius-btn, var(--v-vw-radius, 4px));
+  }
+  /**
+   * The same containers join their buttons into one shape, so a per-button
+   * shadow draws a seam down every join. Decoration belongs on the
+   * container — this out-specifies the theme layers that give `.v-btn` a
+   * relief, and a theme that wants a decorated group styles
+   * `.v-btn-group` itself.
+   */
+  & :is(.v-btn-group, .v-toolbar-items) .v-btn.v-btn {
+    box-shadow: none;
+  }
+  & :is(
+    .v-card.v-card:not([class*='rounded-']),
+    .v-table.v-table
+  ) {
+    border-radius: var(--v-vw-radius-lg, var(--v-vw-radius, 4px));
+  }
+  /**
+   * Panels inherit their corners from the group, and Vuetify decides which
+   * of them are rounded from `@layer vuetify-overrides`. Layered rules lose
+   * to unlayered ones at any specificity, so styling `.v-expansion-panel`
+   * here would flatten that logic and round every panel in the stack.
+   */
+  & .v-expansion-panels.v-expansion-panels {
+    border-radius: var(--v-vw-radius-lg, var(--v-vw-radius, 4px));
+  }
+  & :is(
+    .v-alert.v-alert:not([class*='rounded-']),
+    .v-field.v-field:not([class*='rounded-']),
+    .v-list-item.v-list-item:not([class*='rounded-']),
+    .v-snackbar__wrapper,
+    .v-menu > .v-overlay__content,
+    .v-tooltip > .v-overlay__content,
+    .v-overlay__content > :is(.v-list, .v-sheet)
+  ) {
+    border-radius: var(--v-vw-radius, 4px);
+  }
+  /* Filled and underlined fields only round their top corners. */
+  & .v-field.v-field:is(.v-field--variant-filled, .v-field--variant-underlined):not([class*='rounded-']) {
+    border-radius: var(--v-vw-radius, 4px) var(--v-vw-radius, 4px) 0 0;
+  }
+  & .v-chip.v-chip:not([class*='rounded-']) {
+    border-radius: var(--v-vw-radius-chip, 9999px);
+  }
+  /**
+   * The slider track is a bar like any other, so it follows the theme
+   * radius. The thumb keeps its own variable because round is right for
+   * most themes even when nothing else is — only the square-cornered ones
+   * set it.
+   */
+  & .v-slider-track.v-slider-track {
+    border-radius: var(--v-vw-radius, 4px);
+  }
+  & .v-slider-thumb__surface {
+    border-radius: var(--v-vw-radius-thumb, 50%);
+  }
+  & .v-slider-thumb__label {
+    border-radius: var(--v-vw-radius, 4px);
+  }
+  /* --------------------------------------------------- active pagination */
+  /**
+   * Vuetify ties the active page's overlay to `--v-border-opacity`, which
+   * is not what that variable means: a theme with solid borders gets an
+   * opaque block over the page number, and a theme with invisible ones
+   * loses the active state entirely. `--v-activated-opacity` is the
+   * variable for an activated item, so use that instead.
+   */
+  & .v-pagination .v-pagination__item--is-active .v-btn__overlay {
+    background: var(--v-vw-pagination-active-color, currentColor);
+    opacity: var(--v-vw-pagination-active-opacity, var(--v-activated-opacity));
+  }
+  /* --------------------------------------------------- overlay surfaces */
+  /**
+   * A floating surface has to be opaque. Vuetify renders the outlined, text,
+   * plain and tonal card variants transparent, so a theme that defaults
+   * `VCard` to one of them leaves dialogs and menus showing the page through
+   * them. Elevated and flat cards already paint themselves — and `darkGlass`
+   * depends on that to stay translucent — so they are left alone, as is any
+   * card given an explicit `color`.
+   */
+  & .v-overlay__content > .v-card:is(
+    .v-card--variant-outlined,
+    .v-card--variant-text,
+    .v-card--variant-plain,
+    .v-card--variant-tonal
+  ):not([class*='bg-']) {
+    background-color: rgb(var(--v-theme-surface));
+  }
+  /* -------------------------------------------------------- border width */
+  & :is(
+    .v-btn--variant-outlined,
+    .v-card--variant-outlined,
+    .v-alert--variant-outlined,
+    .v-chip--variant-outlined
+  ) {
+    border-width: var(--v-vw-border-width, thin);
+  }
+  /**
+   * Vuetify already funnels every outline segment through one property, so
+   * the field only needs that one set. Specificity matters here: this must
+   * beat `.v-field__outline` (0,1,0) but lose to the focused rule (0,3,0)
+   * that thickens the outline to 2px.
+   */
+  & .v-field__outline {
+    --v-field-border-width: var(--v-vw-border-width, 1px);
+  }
+  /* ---------------------------------------------------- button typography */
+  & .v-btn.v-btn {
+    font-weight: var(--v-vw-btn-weight, 500);
+    letter-spacing: var(--v-vw-btn-tracking, 0.0892857143em);
+    text-transform: var(--v-vw-btn-transform, uppercase);
+  }
+  /* ------------------------------------------------- shared theme surfaces */
+  /**
+   * Five ideas below were written out in seven to ten theme stylesheets
+   * each, and several copies had already drifted apart. Core owns the
+   * selector once; a theme supplies a value from its `variables`, and a
+   * theme built with `defineTheme()` gets the same knobs for free.
+   */
+  /* Every floating surface, so a tooltip is not left behind by a menu. */
+  & :is(.v-menu, .v-dialog, .v-tooltip) > .v-overlay__content {
+    border: var(--v-vw-overlay-border, none);
+    box-shadow: var(--v-vw-overlay-shadow, revert-layer);
+  }
+  & .v-tab__slider {
+    height: var(--v-vw-tab-slider-height, 2px);
+  }
+  & :is(.v-table thead th, .v-data-table__th) {
+    font-weight: var(--v-vw-th-weight, revert-layer);
+    letter-spacing: var(--v-vw-th-tracking, revert-layer);
+    text-transform: var(--v-vw-th-transform, none);
+  }
+  /**
+   * A logical property, so the bar sits on the leading edge in both
+   * directions — the three themes that hand-rolled this each carried a
+   * manual RTL mirror that only won by accident of specificity.
+   */
+  & .v-list-item.v-list-item--active {
+    border-inline-start: var(--v-vw-list-bar, 0) solid var(--v-vw-list-bar-color, currentColor);
+  }
+  /* ------------------------------------------------------------ headings */
+  /**
+   * `--v-font-heading` is native to Vuetify 4 and already drives the
+   * `text-display-*` / `text-headline-*` utilities. Bare heading tags are not, so they
+   * pick it up here.
+   */
+  & :is(
+    h1, h2, h3, h4, h5, h6,
+    [class*='-display-'],
+    [class*='-headline-'],
+    [class*='-title-large']
+  ) {
+    font-family: var(--v-font-heading, var(--v-font-body, inherit));
+    font-weight: var(--v-vw-heading-weight, revert-layer);
+    letter-spacing: var(--v-vw-heading-tracking, revert-layer);
+    text-transform: var(--v-vw-heading-transform, none);
+  }
+  &.v-application {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  /**
+   * Vuetify styles anchors it renders itself, but never a bare `<a>` in
+   * content — which left every theme showing browser blue. Components keep
+   * their own colours because they all carry classes.
+   */
+  & a:not([class]) {
+    color: rgb(var(--v-theme-primary));
+    text-decoration: var(--v-vw-link-decoration, underline);
+    text-underline-offset: 0.15em;
+  }
+}

package/src/styles/index.css ADDED Viewed

@@ -0,0 +1,30 @@
+/**
+ * Every Vuetiwatch stylesheet in one import.
+ *
+ * The core layer is generic and variable-driven; each theme file adds only
+ * the surface treatment — shadows, blur, glow, relief — that a
+ * `ThemeDefinition` cannot express. Rules are scoped per theme, so
+ * importing the whole file costs nothing for themes you do not use.
+ *
+ * `classic` has no file: it is stock Vuetify by definition.
+ */
+@import './core.css';
+/* Everyday */
+@import './themes/paper.css';
+@import './themes/slate.css';
+@import './themes/calm.css';
+@import './themes/lux.css';
+@import './themes/soft.css';
+/* Tactile */
+@import './themes/clay.css';
+@import './themes/morph.css';
+/* Expressive */
+@import './themes/sketchy.css';
+@import './themes/brutalist.css';
+@import './themes/liquidGlass.css';
+@import './themes/darkGlass.css';
+@import './themes/aurora.css';
+@import './themes/neon.css';