vuetiwatch 0.1.0

package/src/styles/themes/slate.css

@@ -0,0 +1,26 @@
+/**
+ * Slate — dashboard chrome. Cards are outlined rather than raised, table
+ * headers get a tinted band, and the only real shadow left is on overlays.
+ */
+.v-theme--slate {
+  & .v-card.v-card--variant-outlined {
+    box-shadow: 0 1px 2px rgba(var(--v-shadow-color), 0.05);
+  }
+
+  & :is(.v-table thead th, .v-data-table__th) {
+    background-color: rgb(var(--v-theme-surface-light));
+    font-weight: 600;
+  }
+
+  & :is(.v-menu, .v-dialog) > .v-overlay__content {
+    box-shadow: 0 8px 24px rgba(var(--v-shadow-color), 0.16);
+  }
+
+  & .v-app-bar {
+    box-shadow: none;
+  }
+
+
+
+
+}

package/src/styles/themes/soft.css

@@ -0,0 +1,63 @@
+/**
+ * Soft — diffuse, tinted shadows instead of Material's grey elevation, and
+ * a lift on hover so cards feel physical rather than printed.
+ */
+.v-theme--soft {
+  & .v-card.v-card--variant-elevated {
+    box-shadow:
+      0 2px 4px rgba(var(--v-theme-primary), 0.06),
+      0 12px 28px rgba(var(--v-theme-primary), 0.1);
+    transition: box-shadow 0.25s ease, transform 0.25s ease;
+  }
+
+  & .v-card.v-card--variant-elevated.v-card--link:hover {
+    box-shadow:
+      0 4px 8px rgba(var(--v-theme-primary), 0.08),
+      0 20px 40px rgba(var(--v-theme-primary), 0.14);
+    transform: translateY(-2px);
+  }
+
+  & .v-btn.v-btn--variant-flat:not(.v-btn--disabled) {
+    box-shadow: 0 2px 8px rgba(var(--v-theme-primary), 0.24);
+  }
+
+  & :is(.v-menu, .v-dialog) > .v-overlay__content {
+    box-shadow: 0 16px 48px rgba(var(--v-theme-primary), 0.18);
+  }
+
+  /**
+   * `solo-filled` paints itself `surface`, which sits a couple of percent
+   * from this theme's `background`. Without the shadow the field has no
+   * edge at all, so it keeps one — in the theme's own tint.
+   */
+  & .v-field.v-field--variant-solo-filled {
+    box-shadow:
+      0 1px 2px rgba(var(--v-theme-primary), 0.08),
+      0 4px 12px rgba(var(--v-theme-primary), 0.06);
+  }
+
+  /* Controls get the same tinted lift as the cards. */
+  & .v-slider-thumb__surface {
+    box-shadow: 0 2px 8px rgba(var(--v-theme-primary), 0.35);
+  }
+
+  & .v-switch__thumb {
+    box-shadow: 0 2px 6px rgba(var(--v-theme-primary), 0.3);
+  }
+
+  /* `VTabs` runs inset here, so the pill behind the active tab is the
+     indicator — the underline would be a second one. */
+  & .v-tabs--inset .v-tab__slider {
+    box-shadow: 0 2px 10px rgba(var(--v-theme-primary), 0.2);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .v-theme--soft .v-card.v-card--variant-elevated {
+    transition: none;
+  }
+
+  .v-theme--soft .v-card.v-card--variant-elevated.v-card--link:hover {
+    transform: none;
+  }
+}

package/src/themes/aurora.ts

@@ -0,0 +1,86 @@
+import { bars, fields, icons } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * The showcase theme: the visual language current AI products landed on —
+ * near-black ground, iridescent gradients, light instead of shadow.
+ *
+ * It is deliberately the loudest theme in the set. Where `neon` is flat and
+ * shouting, this one is layered and lit: gradients rather than solid
+ * accents, rims rather than borders, glow rather than elevation.
+ */
+export const aurora = defineTheme({
+  name: 'aurora',
+  meta: {
+    title: 'Aurora',
+    description: 'Iridescent gradients on near-black. Built to be looked at — the showcase theme.',
+    dark: true,
+    iconStyle: 'filled',
+    swatch: ['#08080C', '#101018', '#7C5CFF', '#00D4FF'],
+    fonts: ['Inter'],
+  },
+  theme: {
+    dark: true,
+    colors: {
+      background: '#08080C',
+      surface: '#101018',
+      'surface-bright': '#1B1B28',
+      'surface-light': '#16161F',
+      'surface-variant': '#C9C6E0',
+      'on-surface-variant': '#08080C',
+      primary: '#7C5CFF',
+      'primary-darken-1': '#5F3FE0',
+      secondary: '#00D4FF',
+      'secondary-darken-1': '#00A8CC',
+      error: '#FF5C7A',
+      info: '#00D4FF',
+      success: '#3DDC97',
+      warning: '#FFB86B',
+      'on-surface': '#E8E6F5',
+      'on-background': '#F0EEFA',
+      'on-secondary': '#04121A',
+      'on-success': '#04140D',
+      'on-warning': '#1A1004',
+    },
+    variables: {
+      'border-color': '#9B8CFF',
+      'border-opacity': 0.14,
+      'shadow-color': '#000000',
+      'high-emphasis-opacity': 0.96,
+      'medium-emphasis-opacity': 0.68,
+      'hover-opacity': 0.08,
+      'font-body': "'Inter', system-ui, sans-serif",
+      'vw-radius': '12px',
+      'vw-radius-lg': '18px',
+      'vw-radius-chip': '999px',
+      'vw-border-width': '1px',
+      'vw-btn-transform': 'none',
+      'vw-btn-tracking': '0.01em',
+      'vw-btn-weight': '600',
+      'vw-tab-slider-height': '3px',
+      // Shared by every gradient below, so a derived theme restyles the
+      // whole surface language by overriding one value.
+      'vw-gradient': 'linear-gradient(135deg, #7C5CFF 0%, #00D4FF 55%, #FF5CAA 100%)',
+    },
+  },
+  defaults: [
+    {
+      VBtn: { variant: 'flat' },
+      VCard: { variant: 'elevated', elevation: 0 },
+      VAlert: { variant: 'tonal' },
+      VChip: { variant: 'tonal' },
+      VSwitch: { inset: true },
+      VSlider: { thumbSize: 18, trackSize: 4 },
+    },
+    fields({ variant: 'solo-filled', flat: true }),
+    bars({ flat: true }),
+    icons({
+      dropdown: 'mdi-chevron-down',
+      collapse: 'mdi-chevron-up',
+      checkboxOn: 'mdi-check-circle',
+      checkboxOff: 'mdi-circle-outline',
+      ratingFull: 'mdi-star',
+      ratingEmpty: 'mdi-star-outline',
+    }),
+  ],
+})

package/src/themes/brutalist.ts

@@ -0,0 +1,103 @@
+import { bars, fields, icons } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * Neobrutalism: thick black rules, an acid accent, and a hard offset shadow
+ * with no blur at all — the shadow is a second shape, not a light effect.
+ * Nothing is rounded and nothing is subtle.
+ *
+ * Not to be confused with `paper`, which is also flat and bordered but
+ * hairline-thin and quiet; this one is the same idea shouted.
+ */
+export const brutalist = defineTheme({
+  name: 'brutalist',
+  meta: {
+    title: 'Brutalist',
+    description: 'Thick black rules, acid lime and hard unblurred shadows. Loud on purpose.',
+    dark: false,
+    iconStyle: 'filled',
+    swatch: ['#FFFDF0', '#FFFFFF', '#0A0A0A', '#C4F82A'],
+    fonts: ['Space Grotesk'],
+  },
+  theme: {
+    dark: false,
+    colors: {
+      background: '#FFFDF0',
+      surface: '#FFFFFF',
+      'surface-bright': '#FFFFFF',
+      'surface-light': '#F3EFDC',
+      'surface-variant': '#0A0A0A',
+      'on-surface-variant': '#FFFDF0',
+      primary: '#0A0A0A',
+      'primary-darken-1': '#000000',
+      secondary: '#C4F82A',
+      'secondary-darken-1': '#A5D617',
+      error: '#FF4D3D',
+      info: '#3D7BFF',
+      success: '#00C853',
+      warning: '#FFB300',
+      'on-surface': '#0A0A0A',
+      'on-background': '#0A0A0A',
+      'on-secondary': '#0A0A0A',
+      'on-warning': '#0A0A0A',
+      'on-success': '#0A0A0A',
+    },
+    variables: {
+      'border-color': '#0A0A0A',
+      'border-opacity': 1,
+      'shadow-color': '#0A0A0A',
+      'high-emphasis-opacity': 1,
+      'medium-emphasis-opacity': 0.75,
+      'hover-opacity': 0.08,
+      'font-body': "'Space Grotesk', 'Arial Black', system-ui, sans-serif",
+      'vw-radius': '0px',
+      'vw-radius-lg': '0px',
+      'vw-radius-thumb': '0px',
+      'vw-radius-chip': '0px',
+      'vw-border-width': '3px',
+      'vw-btn-transform': 'uppercase',
+      'vw-btn-tracking': '0.04em',
+      'vw-btn-weight': '700',
+      // Lime marks the current page: darkening it would sink the number
+      // into its own highlight.
+      'vw-pagination-active-color': 'rgb(var(--v-theme-secondary))',
+      'vw-pagination-active-opacity': '1',
+      'vw-heading-weight': '700',
+      'vw-heading-tracking': '-0.02em',
+      'vw-tab-slider-height': '4px',
+    },
+  },
+  defaults: [
+    {
+      VBtn: { variant: 'flat' },
+      VCard: { variant: 'outlined' },
+      VAlert: { variant: 'outlined' },
+      VChip: { variant: 'outlined' },
+      VSheet: { border: true },
+      VNavigationDrawer: { border: 'e' },
+      VSwitch: { inset: 'square' },
+      // Lime is this theme's "active" colour — it already marks the table
+      // heads and the current page, so the slider joins them.
+      VSlider: { thumbSize: 18, trackSize: 6, color: 'secondary' },
+      VRangeSlider: { color: 'secondary' },
+    },
+    fields({ variant: 'outlined' }),
+    bars({ flat: true, border: 'b' }),
+    icons({
+      // Solid and blunt: filled boxes, bold arrows, a thick cross.
+      dropdown: 'mdi-menu-down',
+      collapse: 'mdi-menu-up',
+      next: 'mdi-arrow-right-bold',
+      prev: 'mdi-arrow-left-bold',
+      first: 'mdi-page-first',
+      last: 'mdi-page-last',
+      checkboxOn: 'mdi-checkbox-marked',
+      checkboxOff: 'mdi-checkbox-blank-outline',
+      ratingFull: 'mdi-star',
+      ratingEmpty: 'mdi-star-outline',
+      sortAsc: 'mdi-menu-up',
+      sortDesc: 'mdi-menu-down',
+      close: 'mdi-close-thick',
+    }),
+  ],
+})

package/src/themes/calm.ts

@@ -0,0 +1,88 @@
+import { bars, controls, fields, icons, tables } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * The counter-trend: an interface that does not compete for attention.
+ * Desaturated naturals, contrast held deliberately low, no shadows and no
+ * fills — separation comes from space, and colour is spent only on things
+ * you can act on.
+ *
+ * The discipline is subtractive, so resist adding accents here; every one
+ * of them costs the theme its point.
+ */
+export const calm = defineTheme({
+  name: 'calm',
+  meta: {
+    title: 'Calm',
+    description: 'Low contrast, desaturated naturals and a lot of air. Nothing competes for attention.',
+    dark: false,
+    iconStyle: 'outline',
+    swatch: ['#FAFAF7', '#FFFFFF', '#6B7A6B', '#A89684'],
+    fonts: ['Inter'],
+  },
+  theme: {
+    dark: false,
+    colors: {
+      background: '#FAFAF7',
+      surface: '#FFFFFF',
+      'surface-bright': '#FFFFFF',
+      'surface-light': '#F2F1EC',
+      'surface-variant': '#4A4A44',
+      'on-surface-variant': '#FAFAF7',
+      primary: '#6B7A6B',
+      'primary-darken-1': '#556355',
+      secondary: '#A89684',
+      'secondary-darken-1': '#8B7A69',
+      error: '#A86B63',
+      info: '#6B7A8A',
+      success: '#6B8A6B',
+      warning: '#A89464',
+      'on-surface': '#3A3A36',
+      'on-background': '#3A3A36',
+    },
+    variables: {
+      'border-color': '#3A3A36',
+      'border-opacity': 0.09,
+      'high-emphasis-opacity': 0.78,
+      'medium-emphasis-opacity': 0.5,
+      'hover-opacity': 0.03,
+      'font-body': "'Inter', system-ui, sans-serif",
+      'vw-radius': '8px',
+      'vw-radius-lg': '12px',
+      'vw-radius-chip': '8px',
+      'vw-border-width': '1px',
+      'vw-btn-transform': 'none',
+      'vw-btn-tracking': '0.01em',
+      'vw-btn-weight': '500',
+      'vw-heading-weight': '500',
+      'vw-heading-tracking': '-0.01em',
+      'vw-tab-slider-height': '2px',
+    },
+  },
+  defaults: [
+    {
+      VBtn: { variant: 'text' },
+      VCard: { variant: 'flat' },
+      VAlert: { variant: 'text' },
+      VChip: { variant: 'text' },
+      VNavigationDrawer: { border: 'e' },
+      VSwitch: { inset: true },
+      VSlider: { thumbSize: 14, trackSize: 2 },
+    },
+    fields({ variant: 'underlined' }),
+    controls({ density: 'comfortable' }),
+    tables('comfortable'),
+    bars({ flat: true }),
+    icons({
+      // Hollow throughout, and the rating is dots rather than stars: a row
+      // of filled stars is the loudest thing a quiet page could carry.
+      dropdown: 'mdi-chevron-down',
+      collapse: 'mdi-chevron-up',
+      checkboxOn: 'mdi-check-circle-outline',
+      checkboxOff: 'mdi-circle-outline',
+      ratingFull: 'mdi-circle',
+      ratingEmpty: 'mdi-circle-outline',
+      close: 'mdi-close',
+    }),
+  ],
+})

package/src/themes/classic.ts

@@ -0,0 +1,23 @@
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * Stock Vuetify, untouched. The reference point every other theme is a
+ * departure from — and the safe choice when you want Material Design.
+ */
+export const classic = defineTheme({
+  name: 'classic',
+  meta: {
+    title: 'Classic',
+    description: 'Vuetify as it ships. Material Design, Roboto, familiar elevation.',
+    dark: false,
+    iconStyle: 'filled',
+    swatch: ['#FFFFFF', '#EEEEEE', '#1867C0', '#48A9A6'],
+    fonts: ['Roboto'],
+  },
+  theme: {
+    dark: false,
+    variables: {
+      'font-body': "'Roboto', system-ui, sans-serif",
+    },
+  },
+})

package/src/themes/clay.ts

@@ -0,0 +1,80 @@
+import { bars, fields, icons } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * Claymorphism — neumorphism's louder descendant. Where `morph` hides its
+ * surfaces in the background, this one lifts bright white shapes off a
+ * saturated ground and gives them three shadows: an outer drop, a light
+ * rim, and an inner one that makes them look inflated rather than cut out.
+ */
+export const clay = defineTheme({
+  name: 'clay',
+  meta: {
+    title: 'Clay',
+    description: 'Inflated pastel shapes with a triple shadow. Tactile and toy-like.',
+    dark: false,
+    iconStyle: 'filled',
+    swatch: ['#EDE7FF', '#FFFFFF', '#6C5CE7', '#FF7BA9'],
+    fonts: ['Quicksand'],
+  },
+  theme: {
+    dark: false,
+    colors: {
+      background: '#EDE7FF',
+      surface: '#FFFFFF',
+      'surface-bright': '#FFFFFF',
+      'surface-light': '#E1D8FF',
+      'surface-variant': '#3D3355',
+      'on-surface-variant': '#EDE7FF',
+      primary: '#6C5CE7',
+      'primary-darken-1': '#5546C4',
+      secondary: '#FF7BA9',
+      'secondary-darken-1': '#E05A8A',
+      error: '#FF6B6B',
+      info: '#4EC5F1',
+      success: '#2ECC71',
+      warning: '#FDCB6E',
+      'on-surface': '#3D3355',
+      'on-background': '#3D3355',
+      'on-warning': '#3D2E00',
+    },
+    variables: {
+      'border-color': '#6C5CE7',
+      'border-opacity': 0.001,
+      'shadow-color': '#5A46B0',
+      'high-emphasis-opacity': 0.9,
+      'medium-emphasis-opacity': 0.62,
+      'hover-opacity': 0.05,
+      'font-body': "'Quicksand', 'Nunito', system-ui, sans-serif",
+      'vw-radius': '20px',
+      'vw-radius-lg': '28px',
+      'vw-radius-chip': '999px',
+      'vw-border-width': '0px',
+      'vw-btn-transform': 'none',
+      'vw-btn-tracking': '0',
+      'vw-btn-weight': '700',
+      'vw-tab-slider-height': '5px',
+    },
+  },
+  defaults: [
+    {
+      VBtn: { variant: 'flat', size: 'large' },
+      VCard: { variant: 'flat' },
+      VAlert: { variant: 'flat' },
+      VChip: { variant: 'flat' },
+      VSwitch: { inset: true },
+      VSlider: { thumbSize: 24, trackSize: 10 },
+    },
+    fields({ variant: 'solo', flat: true }),
+    bars({ flat: true }),
+    icons({
+      dropdown: 'mdi-chevron-down',
+      collapse: 'mdi-chevron-up',
+      checkboxOn: 'mdi-check-circle',
+      checkboxOff: 'mdi-circle-outline',
+      ratingFull: 'mdi-star',
+      ratingEmpty: 'mdi-star-outline',
+      close: 'mdi-close-circle',
+    }),
+  ],
+})

package/src/themes/darkGlass.ts

@@ -0,0 +1,77 @@
+import { bars, fields, icons } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * Translucent dark surfaces over a deep violet ground, with backdrop blur
+ * and a hairline top highlight. Needs a busy background behind `v-app`
+ * to really sing.
+ */
+export const darkGlass = defineTheme({
+  name: 'darkGlass',
+  meta: {
+    title: 'Dark Glass',
+    description: 'Frosted translucent surfaces on a deep violet ground.',
+    dark: true,
+    iconStyle: 'filled',
+    swatch: ['#0E0B18', '#191428', '#7C4DFF', '#4FC3F7'],
+    fonts: ['Inter'],
+  },
+  theme: {
+    dark: true,
+    colors: {
+      background: '#0E0B18',
+      surface: '#191428',
+      'surface-bright': '#2A2340',
+      'surface-light': '#241D38',
+      'surface-variant': '#C6BEDE',
+      'on-surface-variant': '#14101F',
+      primary: '#7C4DFF',
+      'primary-darken-1': '#5E35D6',
+      secondary: '#4FC3F7',
+      'secondary-darken-1': '#2FA3D8',
+      error: '#FF5370',
+      info: '#4FC3F7',
+      success: '#00E676',
+      warning: '#FFB74D',
+      'on-surface': '#ECE8F5',
+      'on-background': '#F3F0FA',
+    },
+    variables: {
+      'border-color': '#B9A9FF',
+      'border-opacity': 0.16,
+      'shadow-color': '#000000',
+      'high-emphasis-opacity': 0.95,
+      'medium-emphasis-opacity': 0.72,
+      'hover-opacity': 0.08,
+      'font-body': "'Inter', system-ui, sans-serif",
+      'vw-radius': '12px',
+      'vw-radius-lg': '18px',
+      'vw-radius-chip': '999px',
+      'vw-btn-transform': 'none',
+      'vw-btn-tracking': '0.01em',
+      'vw-btn-weight': '600',
+    },
+  },
+  defaults: [
+    {
+      VBtn: { variant: 'flat' },
+      VCard: { variant: 'elevated', elevation: 0 },
+      VAlert: { variant: 'tonal' },
+      VChip: { variant: 'tonal' },
+    },
+    fields({ variant: 'solo-filled', flat: true }),
+    bars({ flat: true }),
+    {
+      VSwitch: { inset: true },
+      VSlider: { thumbSize: 18, trackSize: 4 },
+    },
+    icons({
+      dropdown: 'mdi-chevron-down',
+      collapse: 'mdi-chevron-up',
+      checkboxOn: 'mdi-check-circle',
+      checkboxOff: 'mdi-circle-outline',
+      ratingFull: 'mdi-star',
+      ratingEmpty: 'mdi-star-outline',
+    }),
+  ],
+})

package/src/themes/index.ts

@@ -0,0 +1,14 @@
+export { aurora } from './aurora.js'
+export { brutalist } from './brutalist.js'
+export { calm } from './calm.js'
+export { classic } from './classic.js'
+export { clay } from './clay.js'
+export { darkGlass } from './darkGlass.js'
+export { liquidGlass } from './liquidGlass.js'
+export { lux } from './lux.js'
+export { morph } from './morph.js'
+export { neon } from './neon.js'
+export { paper } from './paper.js'
+export { sketchy } from './sketchy.js'
+export { slate } from './slate.js'
+export { soft } from './soft.js'

package/src/themes/liquidGlass.ts

@@ -0,0 +1,111 @@
+import { bars, controls, fields, icons, tables } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * Glass that refracts rather than merely blurs, after Apple's iOS 26
+ * language.
+ *
+ * Four things carry it, and dropping any one is what makes an imitation
+ * read as generic frosting:
+ *
+ *   - Capsules. Every control is fully rounded; it is the shape cue people
+ *     recognise before they register anything else.
+ *   - SF. `-apple-system` comes first in the stack, so the theme renders in
+ *     the real typeface on Apple hardware and falls back to Inter elsewhere.
+ *   - Light-mode system colours. `#007AFF` and friends — the `#0A84FF` set
+ *     belongs to dark mode and reads far too electric on a light ground.
+ *   - A calm ground. The stylesheet washes `v-app` in two adjacent hues,
+ *     because translucency over nothing is just grey, and translucency over
+ *     a rainbow is a mess.
+ */
+export const liquidGlass = defineTheme({
+  name: 'liquidGlass',
+  meta: {
+    title: 'Liquid Glass',
+    description: 'Capsule controls and refracting panes over a calm wash, after iOS 26.',
+    dark: false,
+    iconStyle: 'outline',
+    swatch: ['#F2F2F7', '#FFFFFF', '#007AFF', '#5856D6'],
+    fonts: ['Inter'],
+  },
+  theme: {
+    dark: false,
+    colors: {
+      // systemGroupedBackground over systemBackground, as iOS pairs them.
+      background: '#F2F2F7',
+      surface: '#FFFFFF',
+      'surface-bright': '#FFFFFF',
+      'surface-light': '#F7F7FA',
+      'surface-variant': '#3A3A3C',
+      'on-surface-variant': '#F2F2F7',
+      primary: '#007AFF',
+      'primary-darken-1': '#0062CC',
+      secondary: '#5856D6',
+      'secondary-darken-1': '#4341B5',
+      error: '#FF3B30',
+      info: '#007AFF',
+      success: '#34C759',
+      warning: '#FF9500',
+      'on-surface': '#1C1C1E',
+      'on-background': '#1C1C1E',
+      'on-success': '#06140A',
+      'on-warning': '#1A1004',
+    },
+    variables: {
+      'border-color': '#3A3A3C',
+      // iOS separators are hairlines, not borders.
+      'border-opacity': 0.1,
+      'shadow-color': '#1B3A6B',
+      'high-emphasis-opacity': 0.92,
+      'medium-emphasis-opacity': 0.6,
+      'hover-opacity': 0.04,
+      'font-body': "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif",
+      'font-heading': "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif",
+      'vw-radius': '12px',
+      // Capsule controls, but through the variable rather than the
+      // `rounded` prop — that would leak into button groups and split a
+      // segmented control back into separate pills.
+      'vw-radius-btn': '999px',
+      'vw-radius-lg': '22px',
+      'vw-radius-chip': '999px',
+      'vw-border-width': '1px',
+      'vw-btn-transform': 'none',
+      'vw-btn-tracking': '0',
+      'vw-btn-weight': '590',
+      // Apple leaves links in the accent colour, unlined.
+      'vw-link-decoration': 'none',
+      'vw-heading-weight': '700',
+      'vw-heading-tracking': '-0.022em',
+    },
+  },
+  defaults: [
+    {
+      VBtn: { variant: 'flat' },
+      VCard: { variant: 'elevated', elevation: 0 },
+      VAlert: { variant: 'tonal' },
+      VChip: { variant: 'tonal' },
+      VSwitch: { inset: true },
+      VSlider: { thumbSize: 22, trackSize: 6 },
+    },
+    fields({ variant: 'solo-filled', flat: true }),
+    controls({ density: 'comfortable' }),
+    tables('comfortable'),
+    bars({ flat: true }),
+    icons({
+      // Chevrons everywhere, as SF does, and the clear affordance is the
+      // filled circle iOS puts inside a field.
+      dropdown: 'mdi-chevron-down',
+      collapse: 'mdi-chevron-up',
+      next: 'mdi-chevron-right',
+      prev: 'mdi-chevron-left',
+      checkboxOn: 'mdi-check-circle',
+      checkboxOff: 'mdi-circle-outline',
+      ratingFull: 'mdi-star',
+      ratingEmpty: 'mdi-star-outline',
+      clear: 'mdi-close-circle',
+      close: 'mdi-close-circle',
+      sortAsc: 'mdi-chevron-up',
+      sortDesc: 'mdi-chevron-down',
+    }),
+  ],
+})