vuetiwatch 0.1.0

package/src/themes/lux.ts

@@ -0,0 +1,91 @@
+import { bars, controls, fields, icons, tables } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * Restraint as decoration: hairline rules, wide letter-spacing, small caps
+ * on anything interactive, and a single muted gold. The only theme here
+ * whose character is carried almost entirely by typography and spacing
+ * rather than colour or shape.
+ */
+export const lux = defineTheme({
+  name: 'lux',
+  meta: {
+    title: 'Lux',
+    description: 'Editorial luxury — hairline rules, wide tracking, small caps and muted gold.',
+    dark: false,
+    iconStyle: 'outline',
+    swatch: ['#FFFFFF', '#FAFAFA', '#1A1A1A', '#B39A5B'],
+    fonts: ['Jost'],
+  },
+  theme: {
+    dark: false,
+    colors: {
+      background: '#FFFFFF',
+      surface: '#FFFFFF',
+      'surface-bright': '#FFFFFF',
+      'surface-light': '#F7F7F5',
+      'surface-variant': '#1A1A1A',
+      'on-surface-variant': '#FFFFFF',
+      primary: '#1A1A1A',
+      'primary-darken-1': '#000000',
+      secondary: '#B39A5B',
+      'secondary-darken-1': '#8F7A45',
+      error: '#96322A',
+      info: '#3D5A73',
+      success: '#4A6B4F',
+      warning: '#A8791E',
+      'on-surface': '#1A1A1A',
+      'on-background': '#1A1A1A',
+    },
+    variables: {
+      'border-color': '#1A1A1A',
+      'border-opacity': 0.14,
+      'high-emphasis-opacity': 0.88,
+      'medium-emphasis-opacity': 0.55,
+      'hover-opacity': 0.03,
+      'font-body': "'Jost', 'Futura', system-ui, sans-serif",
+      'vw-radius': '0px',
+      'vw-radius-lg': '0px',
+      'vw-radius-thumb': '0px',
+      'vw-radius-chip': '0px',
+      'vw-border-width': '1px',
+      'vw-btn-transform': 'uppercase',
+      'vw-btn-tracking': '0.2em',
+      'vw-btn-weight': '400',
+      'vw-heading-weight': '300',
+      'vw-heading-tracking': '0.06em',
+      'vw-heading-transform': 'uppercase',
+      'vw-list-bar': '2px',
+      'vw-list-bar-color': 'rgb(var(--v-theme-secondary))',
+      'vw-tab-slider-height': '1px',
+    },
+  },
+  defaults: [
+    {
+      VBtn: { variant: 'outlined', size: 'large' },
+      VCard: { variant: 'outlined' },
+      VAlert: { variant: 'outlined' },
+      VChip: { variant: 'outlined' },
+      VNavigationDrawer: { border: 'e' },
+      VSwitch: { inset: 'square' },
+      VSlider: { thumbSize: 12, trackSize: 1 },
+    },
+    fields({ variant: 'underlined' }),
+    controls({ density: 'comfortable' }),
+    tables('comfortable'),
+    bars({ flat: true, border: 'b' }),
+    icons({
+      dropdown: 'mdi-chevron-down',
+      collapse: 'mdi-chevron-up',
+      checkboxOn: 'mdi-checkbox-marked-outline',
+      checkboxOff: 'mdi-checkbox-blank-outline',
+      ratingFull: 'mdi-star',
+      ratingEmpty: 'mdi-star-outline',
+      sortAsc: 'mdi-arrow-up',
+      sortDesc: 'mdi-arrow-down',
+      close: 'mdi-close',
+      // An em dash rather than a slash — the one flourish the theme allows.
+      breadcrumbDivider: '—',
+    }),
+  ],
+})

package/src/themes/morph.ts

@@ -0,0 +1,82 @@
+import { bars, fields, icons } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * Neumorphism: surfaces are the same colour as the page, and the only thing
+ * separating them is a pair of shadows — dark bottom-right, light top-left,
+ * as if the whole interface were pressed out of one sheet.
+ *
+ * `surface` deliberately equals `background`. Anything that reintroduces
+ * contrast between them breaks the illusion.
+ */
+export const morph = defineTheme({
+  name: 'morph',
+  meta: {
+    title: 'Morph',
+    description: 'Neumorphic — one continuous surface, shaped only by light and shadow.',
+    dark: false,
+    iconStyle: 'filled',
+    swatch: ['#E4EBF5', '#E4EBF5', '#5A7DE0', '#8894AA'],
+    fonts: ['Nunito'],
+  },
+  theme: {
+    dark: false,
+    colors: {
+      background: '#E4EBF5',
+      surface: '#E4EBF5',
+      'surface-bright': '#EEF3FA',
+      'surface-light': '#DAE2EE',
+      'surface-variant': '#4A5568',
+      'on-surface-variant': '#E4EBF5',
+      primary: '#5A7DE0',
+      'primary-darken-1': '#4763BC',
+      secondary: '#8894AA',
+      'secondary-darken-1': '#6D798F',
+      error: '#E06C75',
+      info: '#5A9FE0',
+      success: '#5AC08C',
+      warning: '#E0A85A',
+      'on-surface': '#4A5568',
+      'on-background': '#4A5568',
+    },
+    variables: {
+      'border-color': '#9AA7BC',
+      'border-opacity': 0.001,
+      'shadow-color': '#A3B1C6',
+      'high-emphasis-opacity': 0.85,
+      'medium-emphasis-opacity': 0.6,
+      'hover-opacity': 0.03,
+      'font-body': "'Nunito', system-ui, sans-serif",
+      'vw-radius': '12px',
+      'vw-radius-lg': '20px',
+      'vw-radius-chip': '999px',
+      // Borders would flatten the relief the shadows are building.
+      'vw-border-width': '0px',
+      'vw-btn-transform': 'none',
+      'vw-btn-tracking': '0.01em',
+      'vw-btn-weight': '700',
+      'vw-tab-slider-height': '4px',
+    },
+  },
+  defaults: [
+    {
+      VBtn: { variant: 'flat' },
+      VCard: { variant: 'flat' },
+      VAlert: { variant: 'flat' },
+      VChip: { variant: 'flat' },
+      VSwitch: { inset: true },
+      VSlider: { thumbSize: 20, trackSize: 6 },
+    },
+    fields({ variant: 'solo', flat: true }),
+    bars({ flat: true }),
+    icons({
+      // Everything round, to match surfaces that have no edges at all.
+      dropdown: 'mdi-chevron-down',
+      collapse: 'mdi-chevron-up',
+      checkboxOn: 'mdi-check-circle',
+      checkboxOff: 'mdi-circle-outline',
+      ratingFull: 'mdi-circle',
+      ratingEmpty: 'mdi-circle-outline',
+    }),
+  ],
+})

package/src/themes/neon.ts

@@ -0,0 +1,96 @@
+import { bars, fields, icons, surfaces, tables } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * Near-black ground, saturated cyan and magenta, zero radius, and glow
+ * instead of elevation. The loudest theme in the set and the deliberate
+ * opposite of `soft`.
+ */
+export const neon = defineTheme({
+  name: 'neon',
+  meta: {
+    title: 'Neon',
+    description: 'Terminal black with cyan and magenta glow. Sharp corners, monospace headings.',
+    dark: true,
+    iconStyle: 'outline',
+    swatch: ['#05060A', '#0B0E16', '#00F0FF', '#FF2FD0'],
+    fonts: ['JetBrains Mono', 'Inter'],
+  },
+  theme: {
+    dark: true,
+    colors: {
+      background: '#05060A',
+      surface: '#0B0E16',
+      'surface-bright': '#161B29',
+      'surface-light': '#11151F',
+      'surface-variant': '#C9D3E6',
+      'on-surface-variant': '#05060A',
+      primary: '#00F0FF',
+      'primary-darken-1': '#00BFCC',
+      secondary: '#FF2FD0',
+      'secondary-darken-1': '#CC1FA6',
+      error: '#FF3B5C',
+      info: '#00F0FF',
+      success: '#29FF9B',
+      warning: '#FFD23F',
+      'on-surface': '#D7E3F4',
+      'on-background': '#D7E3F4',
+      'on-primary': '#05060A',
+      'on-secondary': '#05060A',
+      'on-success': '#05060A',
+      'on-warning': '#05060A',
+    },
+    variables: {
+      'border-color': '#00F0FF',
+      'border-opacity': 0.28,
+      'shadow-color': '#00F0FF',
+      'high-emphasis-opacity': 0.94,
+      'medium-emphasis-opacity': 0.66,
+      'hover-opacity': 0.12,
+      'font-body': "'Inter', system-ui, sans-serif",
+      'font-heading': "'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace",
+      'vw-radius': '0px',
+      'vw-radius-lg': '0px',
+      'vw-radius-thumb': '0px',
+      'vw-radius-chip': '0px',
+      'vw-border-width': '1px',
+      'vw-btn-transform': 'uppercase',
+      'vw-btn-tracking': '0.12em',
+      'vw-btn-weight': '600',
+      'vw-heading-tracking': '0.04em',
+      'vw-heading-transform': 'uppercase',
+      'vw-list-bar': '2px',
+      'vw-list-bar-color': 'rgb(var(--v-theme-primary))',
+      'vw-tab-slider-height': '3px',
+    },
+  },
+  defaults: [
+    {
+      VBtn: { variant: 'outlined' },
+      VSheet: { border: true },
+      VNavigationDrawer: { border: 'e' },
+    },
+    surfaces({ variant: 'outlined' }),
+    fields({ variant: 'outlined', density: 'compact' }),
+    tables('compact'),
+    bars({ flat: true, border: 'b' }),
+    {
+      // Nothing filled and nothing round: a square switch, a square slider
+      // thumb, and a checkbox that stays hollow when checked.
+      VSwitch: { inset: 'square' },
+      VSlider: { thumbSize: 14, trackSize: 2 },
+    },
+    icons({
+      // Nothing is filled in this theme, glyphs included.
+      dropdown: 'mdi-menu-down',
+      collapse: 'mdi-menu-up',
+      checkboxOn: 'mdi-checkbox-marked-outline',
+      checkboxOff: 'mdi-checkbox-blank-outline',
+      ratingFull: 'mdi-star',
+      ratingEmpty: 'mdi-star-outline',
+      sortAsc: 'mdi-chevron-up',
+      sortDesc: 'mdi-chevron-down',
+      close: 'mdi-close',
+    }),
+  ],
+})

package/src/themes/paper.ts

@@ -0,0 +1,88 @@
+import { bars, fields, icons, surfaces } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * Editorial and flat: warm paper background, ink-black primary, hairline
+ * borders instead of shadows, serif headings. The furthest a light theme
+ * gets from Material without changing a single component.
+ */
+export const paper = defineTheme({
+  name: 'paper',
+  meta: {
+    title: 'Paper',
+    description: 'Flat editorial look — warm paper, ink accents, borders instead of elevation.',
+    dark: false,
+    iconStyle: 'outline',
+    swatch: ['#FAF8F2', '#FFFFFF', '#1A1A1A', '#8A6A3B'],
+    fonts: ['Source Serif 4'],
+  },
+  theme: {
+    dark: false,
+    colors: {
+      background: '#FAF8F2',
+      surface: '#FFFFFF',
+      'surface-bright': '#FFFFFF',
+      'surface-light': '#F1EEE4',
+      'surface-variant': '#2B2724',
+      'on-surface-variant': '#FAF8F2',
+      primary: '#1A1A1A',
+      'primary-darken-1': '#000000',
+      secondary: '#8A6A3B',
+      'secondary-darken-1': '#6B5029',
+      error: '#A32E2E',
+      info: '#2E5A8A',
+      success: '#3E7A4E',
+      warning: '#B07A1E',
+      'on-surface': '#14110E',
+      'on-background': '#14110E',
+    },
+    variables: {
+      'border-color': '#14110E',
+      'border-opacity': 0.2,
+      'high-emphasis-opacity': 0.92,
+      'medium-emphasis-opacity': 0.66,
+      'hover-opacity': 0.05,
+      'font-body': "system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif",
+      'font-heading': "'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif",
+      'vw-radius': '2px',
+      'vw-radius-lg': '2px',
+      'vw-radius-thumb': '2px',
+      'vw-radius-chip': '2px',
+      'vw-border-width': '1px',
+      'vw-btn-transform': 'none',
+      'vw-btn-tracking': '0',
+      'vw-btn-weight': '600',
+      'vw-heading-tracking': '-0.01em',
+      'vw-tab-slider-height': '3px',
+    },
+  },
+  defaults: [
+    {
+      VBtn: { variant: 'outlined' },
+      VSheet: { border: true },
+      VNavigationDrawer: { border: 'e' },
+    },
+    surfaces({ variant: 'outlined' }),
+    fields({ variant: 'outlined' }),
+    bars({ flat: true, border: 'b' }),
+    {
+      // Square hardware rather than Material pills — the switch and the
+      // slider should read as parts of a printed form.
+      VSwitch: { inset: 'square' },
+      VSlider: { thumbSize: 14, trackSize: 2 },
+    },
+    icons({
+      // Outlines throughout: this theme draws with hairlines, and a solid
+      // glyph would be the heaviest mark on the page.
+      dropdown: 'mdi-chevron-down',
+      collapse: 'mdi-chevron-up',
+      checkboxOn: 'mdi-checkbox-marked-outline',
+      checkboxOff: 'mdi-checkbox-blank-outline',
+      ratingFull: 'mdi-star',
+      ratingEmpty: 'mdi-star-outline',
+      sortAsc: 'mdi-arrow-up',
+      sortDesc: 'mdi-arrow-down',
+      close: 'mdi-close',
+    }),
+  ],
+})

package/src/themes/sketchy.ts

@@ -0,0 +1,88 @@
+import { bars, fields, icons, surfaces } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * A hand-drawn look for mockups and wireframes, after Bootswatch's Sketchy.
+ *
+ * The whole effect rests on one trick: an asymmetric `border-radius` with
+ * wildly different horizontal and vertical radii reads as a wobbly pen
+ * stroke. Vuetify passes `variables` through verbatim, so the full
+ * multi-value syntax rides in on the same `--v-vw-radius` every other theme
+ * uses — no new plumbing.
+ */
+export const sketchy = defineTheme({
+  name: 'sketchy',
+  meta: {
+    title: 'Sketchy',
+    description: 'Hand-drawn wobble and pencil greys — for mockups, wireframes and mirth.',
+    dark: false,
+    iconStyle: 'outline',
+    swatch: ['#FFFEF7', '#FFFFFF', '#333333', '#7A6A55'],
+    fonts: ['Neucha', 'Cabin Sketch'],
+  },
+  theme: {
+    dark: false,
+    colors: {
+      background: '#FFFEF7',
+      surface: '#FFFFFF',
+      'surface-bright': '#FFFFFF',
+      'surface-light': '#F5F2E8',
+      'surface-variant': '#333333',
+      'on-surface-variant': '#FFFEF7',
+      primary: '#333333',
+      'primary-darken-1': '#111111',
+      secondary: '#7A6A55',
+      'secondary-darken-1': '#5C4F3E',
+      error: '#C0392B',
+      info: '#2E6DA4',
+      success: '#3D8B54',
+      warning: '#C98A15',
+      'on-surface': '#2B2B2B',
+      'on-background': '#2B2B2B',
+    },
+    variables: {
+      'border-color': '#2B2B2B',
+      'border-opacity': 0.85,
+      'high-emphasis-opacity': 0.95,
+      'medium-emphasis-opacity': 0.7,
+      'hover-opacity': 0.06,
+      'font-body': "'Neucha', 'Comic Sans MS', cursive, sans-serif",
+      'font-heading': "'Cabin Sketch', 'Neucha', cursive",
+      // Two wobbles, each scaled to its element: a 255px radius on a 36px
+      // button gets clamped back into a pill, so buttons get a smaller one
+      // and only cards are big enough to carry the full stroke.
+      'vw-radius': '22px 5px 20px 6px / 6px 20px 5px 22px',
+      'vw-radius-lg': '255px 15px 225px 15px / 15px 225px 15px 255px',
+      'vw-radius-thumb': '7px 2px 6px 3px / 3px 6px 2px 7px',
+      'vw-radius-chip': '18px 42px 18px 42px / 42px 18px 42px 18px',
+      'vw-border-width': '2px',
+      'vw-btn-transform': 'none',
+      'vw-btn-tracking': '0.02em',
+      'vw-btn-weight': '400',
+      'vw-tab-slider-height': '3px',
+    },
+  },
+  defaults: [
+    {
+      VBtn: { variant: 'outlined' },
+      VSheet: { border: true },
+      VNavigationDrawer: { border: 'e' },
+      VSwitch: { inset: 'square' },
+      VSlider: { thumbSize: 18, trackSize: 4 },
+    },
+    surfaces({ variant: 'outlined' }),
+    fields({ variant: 'outlined' }),
+    bars({ flat: true, border: 'b' }),
+    icons({
+      // A drawn box with a marker tick scrawled over it, rather than the
+      // tidy printed checkbox.
+      dropdown: 'mdi-chevron-down',
+      collapse: 'mdi-chevron-up',
+      checkboxOn: 'mdi-check-bold',
+      checkboxOff: 'mdi-square-outline',
+      ratingFull: 'mdi-star',
+      ratingEmpty: 'mdi-star-outline',
+      close: 'mdi-close-thick',
+    }),
+  ],
+})

package/src/themes/slate.ts

@@ -0,0 +1,89 @@
+import { bars, controls, fields, icons, tables } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * The admin-panel theme: muted slate blues, tight radii, compact density
+ * everywhere, cards outlined rather than raised. Built for tables and
+ * forms that need to fit a lot on one screen.
+ */
+export const slate = defineTheme({
+  name: 'slate',
+  meta: {
+    title: 'Slate',
+    description: 'Dense corporate dashboard — muted slate blue, compact density, tight radii.',
+    dark: false,
+    iconStyle: 'filled',
+    swatch: ['#F4F6F8', '#FFFFFF', '#2C5282', '#4A6FA5'],
+    fonts: ['Inter'],
+  },
+  theme: {
+    dark: false,
+    colors: {
+      background: '#F4F6F8',
+      surface: '#FFFFFF',
+      'surface-bright': '#FFFFFF',
+      'surface-light': '#EAEEF3',
+      'surface-variant': '#33415C',
+      'on-surface-variant': '#EAEEF3',
+      primary: '#2C5282',
+      'primary-darken-1': '#1F3C63',
+      secondary: '#4A6FA5',
+      'secondary-darken-1': '#375684',
+      error: '#C53030',
+      info: '#2B6CB0',
+      success: '#2F855A',
+      warning: '#B7791F',
+      'on-surface': '#1A202C',
+      'on-background': '#1A202C',
+    },
+    variables: {
+      'border-color': '#1A202C',
+      'border-opacity': 0.14,
+      'shadow-color': '#1A202C',
+      'high-emphasis-opacity': 0.9,
+      'medium-emphasis-opacity': 0.62,
+      'hover-opacity': 0.05,
+      'font-body': "'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",
+      'vw-radius': '3px',
+      'vw-radius-lg': '4px',
+      'vw-radius-thumb': '3px',
+      'vw-radius-chip': '3px',
+      'vw-border-width': '1px',
+      'vw-btn-transform': 'none',
+      'vw-btn-tracking': '0.01em',
+      'vw-btn-weight': '600',
+      'vw-list-bar': '3px',
+      'vw-list-bar-color': 'rgb(var(--v-theme-primary))',
+      'vw-tab-slider-height': '3px',
+    },
+  },
+  defaults: [
+    {
+      VBtn: { variant: 'flat', density: 'comfortable' },
+      VCard: { variant: 'outlined' },
+      VAlert: { variant: 'tonal', density: 'compact' },
+      VChip: { variant: 'tonal', size: 'small' },
+      VNavigationDrawer: { border: 'e' },
+    },
+    fields({ variant: 'outlined', density: 'compact' }),
+    controls({ density: 'compact' }),
+    tables('compact'),
+    bars({ flat: true, border: 'b' }),
+    {
+      // Small, square and out of the way — controls should not outweigh the
+      // data they sit next to.
+      VSwitch: { inset: 'square' },
+      VSlider: { thumbSize: 14, trackSize: 2 },
+    },
+    icons({
+      // Solid triangles: they read at a glance and take less room than a
+      // chevron, which matters in a dense table.
+      dropdown: 'mdi-menu-down',
+      collapse: 'mdi-menu-up',
+      checkboxOn: 'mdi-checkbox-marked',
+      checkboxOff: 'mdi-checkbox-blank-outline',
+      sortAsc: 'mdi-menu-up',
+      sortDesc: 'mdi-menu-down',
+    }),
+  ],
+})

package/src/themes/soft.ts

@@ -0,0 +1,84 @@
+import { bars, fields, icons } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * Pastel and generous: large radii, diffuse coloured shadows, a rounded
+ * grotesque. Reads friendly rather than corporate — consumer apps,
+ * onboarding, anything that should not feel like a dashboard.
+ */
+export const soft = defineTheme({
+  name: 'soft',
+  meta: {
+    title: 'Soft',
+    description: 'Pastel palette, large radii and diffuse shadows. Friendly and unhurried.',
+    dark: false,
+    iconStyle: 'filled',
+    swatch: ['#F7F5FF', '#FFFFFF', '#7C6CF0', '#F08CA8'],
+    fonts: ['Nunito'],
+  },
+  theme: {
+    dark: false,
+    colors: {
+      background: '#F7F5FF',
+      surface: '#FFFFFF',
+      'surface-bright': '#FFFFFF',
+      'surface-light': '#EAE3FF',
+      'surface-variant': '#4A4458',
+      'on-surface-variant': '#F7F5FF',
+      primary: '#7C6CF0',
+      'primary-darken-1': '#5F4DE0',
+      secondary: '#F08CA8',
+      'secondary-darken-1': '#DB6C8B',
+      error: '#F0736E',
+      info: '#58B7E8',
+      success: '#4FC38A',
+      warning: '#F5B851',
+      'on-surface': '#2E2A3B',
+      'on-background': '#2E2A3B',
+    },
+    variables: {
+      'border-color': '#5F4DE0',
+      'border-opacity': 0.1,
+      'shadow-color': '#4A3F8C',
+      'high-emphasis-opacity': 0.88,
+      'medium-emphasis-opacity': 0.62,
+      'hover-opacity': 0.06,
+      'font-body': "'Nunito', 'Quicksand', system-ui, sans-serif",
+      'vw-radius': '14px',
+      'vw-radius-lg': '22px',
+      'vw-radius-chip': '999px',
+      'vw-btn-transform': 'none',
+      'vw-btn-tracking': '0',
+      'vw-btn-weight': '700',
+    },
+  },
+  defaults: [
+    {
+      VBtn: { variant: 'flat' },
+      VCard: { variant: 'elevated', elevation: 0 },
+      VAlert: { variant: 'tonal' },
+      VChip: { variant: 'tonal' },
+    },
+    fields({ variant: 'solo-filled' }),
+    bars({ flat: true }),
+    {
+      // Everything here rounds off: an inset pill switch, a fat slider, a
+      // pill behind the active tab instead of an underline, round tick boxes.
+      VSwitch: { inset: true },
+      VSlider: { thumbSize: 22, trackSize: 8 },
+      // `VTabs` owns its own inset radius, so the theme sets it here
+      // rather than through the shared `--v-vw-radius`.
+      VTabs: { inset: true, insetRadius: 12 },
+    },
+    icons({
+      // Round and filled, down to hearts instead of stars.
+      dropdown: 'mdi-chevron-down',
+      collapse: 'mdi-chevron-up',
+      checkboxOn: 'mdi-check-circle',
+      checkboxOff: 'mdi-circle-outline',
+      ratingFull: 'mdi-heart',
+      ratingEmpty: 'mdi-heart-outline',
+      close: 'mdi-close-circle',
+    }),
+  ],
+})

package/src/types.ts

@@ -0,0 +1,44 @@
+import type { createVuetify, ThemeDefinition } from 'vuetify'
+
+/** Global component defaults, same shape as `createVuetify({ defaults })`. */
+export type VuetiwatchDefaults = NonNullable<
+  NonNullable<Parameters<typeof createVuetify>[0]>['defaults']
+>
+
+export interface VuetiwatchMeta {
+  /** Human readable name, for theme pickers. */
+  title: string
+  /** One line pitch — what the theme feels like. */
+  description: string
+  /** `true` when the theme is a dark variant. */
+  dark: boolean
+  /** Preview swatch: background, surface, primary, secondary. */
+  swatch: [string, string, string, string]
+  /**
+   * How the theme would like *content* icons drawn — the ones an app passes
+   * itself, like a mailbox or a dashboard.
+   *
+   * Vuetify only lets a theme choose the glyphs of controls it renders
+   * (a checkbox tick, a sort arrow); anything an app passes as a literal
+   * name is its own content, and a theme has no business overriding it.
+   * So the theme states a preference here and an app may follow it — see
+   * the playground's navigation demo.
+   */
+  iconStyle: 'outline' | 'filled'
+  /**
+   * Web fonts the theme expects. The package never loads them for you —
+   * add them yourself (Google Fonts, Fontsource, self-hosted) for the full
+   * look, or skip it and fall back to the system stack.
+   */
+  fonts: string[]
+}
+
+export interface VuetiwatchTheme<Name extends string = string> {
+  /** Key used in `createVuetify({ theme: { themes } })`. */
+  name: Name
+  meta: VuetiwatchMeta
+  /** Colors and CSS variables, passed straight to Vuetify. */
+  theme: ThemeDefinition
+  /** Component defaults applied while this theme is active. */
+  defaults: VuetiwatchDefaults
+}