vuetiwatch 0.1.0 → 0.2.0

package/src/themes/candy.ts

@@ -0,0 +1,144 @@
+import { bars, controls, fields, icons } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * The plush theme: a warm cream ground and padded, pillowy shapes that
+ * squash under a press rather than click.
+ *
+ * The palette follows what the research on children's interfaces actually
+ * finds, which is not the pastel wash the phrase "for kids" suggests.
+ * Children are drawn to high brightness, and the apps they stay in
+ * (Duolingo, Khan Academy Kids) run saturated accents rather than pastels.
+ * But a screen where everything shouts hides which parts are tappable, so
+ * the loud colours are spent only on controls: a light neutral ground, one
+ * dominant hue, a small accent — roughly the 60/30/10 the guides recommend.
+ * Warm hues test slightly ahead of cool ones, hence raspberry over blue,
+ * with mint holding the secondary so the status colours stay apart from it.
+ *
+ * Body text is a deep plum-brown rather than the palette's own pink: the
+ * one thing parents notice is whether they can read the screen, and this
+ * carries about 12:1 on the cream.
+ */
+export const candy = defineTheme({
+  name: 'candy',
+  meta: {
+    title: 'Candy',
+    description: 'Plush and pillowy — warm cream, padded shapes, controls that squash.',
+    dark: false,
+    iconStyle: 'filled',
+    swatch: ['#FFF3EC', '#FFFCFA', '#DC2B6B', '#10837C'],
+    fonts: ['Baloo 2', 'Varela Round'],
+  },
+  theme: {
+    dark: false,
+    colors: {
+      background: '#FFF3EC',
+      // Off-white rather than white: cloth catches light, gloss reflects it.
+      surface: '#FFFCFA',
+      'surface-bright': '#FFFFFF',
+      'surface-light': '#FFE6EE',
+      'surface-variant': '#5A3340',
+      'on-surface-variant': '#FFF6F0',
+      primary: '#DC2B6B',
+      'primary-darken-1': '#C43668',
+      secondary: '#10837C',
+      'secondary-darken-1': '#0C7C75',
+      error: '#E5484D',
+      info: '#3B8FE5',
+      success: '#2FA96B',
+      warning: '#F2A32C',
+      'on-surface': '#46262F',
+      'on-background': '#46262F',
+      // Vuetify picks the label colour by luminance and settles for
+      // about 3:1, which is the bar for large text rather than for a
+      // button label. Measured on the filled buttons: success 3:1 → 7:1, info 3.4:1 → 6.2:1, error 3.9:1 → 5.4:1.
+      'on-success': '#000000',
+      'on-info': '#000000',
+      'on-error': '#000000',
+      'on-warning': '#3B2600',
+    },
+    variables: {
+      /* A panel standing on its own — a bare list, sheet, banner or table.
+         Core owns the selector; this is what it draws with. */
+      'vw-panel-shadow': 'var(--vw-candy-pad), var(--vw-candy-rest)',
+      'border-color': '#DC2B6B',
+      'border-opacity': 0.12,
+      'shadow-color': '#C2537E',
+      'high-emphasis-opacity': 0.92,
+      'medium-emphasis-opacity': 0.66,
+      'hover-opacity': 0.07,
+      'font-body': "'Varela Round', 'Nunito', system-ui, sans-serif",
+      'font-heading': "'Baloo 2', 'Varela Round', system-ui, sans-serif",
+      'vw-radius': '20px',
+      'vw-radius-lg': '30px',
+      // Buttons and chips are lozenges; everything else is generously round.
+      'vw-radius-btn': '999px',
+      'vw-radius-chip': '999px',
+      'vw-radius-thumb': '50%',
+      // Outlined variants draw a crayon-thick line rather than a hairline.
+      'vw-border-width': '2px',
+      'vw-btn-transform': 'none',
+      'vw-btn-tracking': '0',
+      'vw-btn-weight': '700',
+      'vw-heading-weight': '700',
+      'vw-heading-tracking': '0',
+      'vw-tab-slider-height': '4px',
+      'vw-list-bar': '4px',
+      'vw-list-bar-color': 'rgb(var(--v-theme-primary))',
+      // A wobbly underline reads as drawn by hand rather than by a browser.
+      'vw-link-decoration': 'underline wavy',
+      'vw-overlay-shadow': '0 18px 44px rgba(var(--v-shadow-color), 0.22)',
+
+      // A spring that overshoots: the press squashes, the pop lands loud.
+      'vw-motion-duration': '220ms',
+      'vw-motion-ease': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+      'vw-press-scale': '0.98',
+      'vw-press-shift': '2px',
+      'vw-hover-lift': '4px',
+      'vw-pop-scale': '1.35',
+      'vw-pop-duration': '320ms',
+      'vw-focus-ring': '3px solid rgb(var(--v-theme-primary))',
+      'vw-focus-offset': '3px',
+      'vw-theme-transition': '480ms',
+
+      // A fat ribbon with rounded ends — see the stylesheet.
+      'vw-timeline-line': 'rgba(var(--v-theme-primary), 0.3)',
+      'vw-timeline-line-width': '6px',
+    },
+  },
+  defaults: [
+    {
+      // Large by default: the hit area is the accessibility story of a
+      // children's app, and a pill that small fingers miss is not cute.
+      VBtn: { variant: 'flat', size: 'large' },
+      VCard: { variant: 'elevated', elevation: 0 },
+      VAlert: { variant: 'tonal' },
+      VChip: { variant: 'tonal' },
+    },
+    fields({ variant: 'solo-filled', flat: true, density: 'comfortable' }),
+    controls({ density: 'comfortable' }),
+    bars({ flat: true }),
+    {
+      VSwitch: { inset: true },
+      VSlider: { thumbSize: 26, trackSize: 12 },
+      // A pill behind the active tab, matching the buttons.
+      VTabs: { inset: true, insetRadius: 999 },
+    },
+    icons({
+      // Round, filled and unmistakable — no square boxes anywhere.
+      dropdown: 'mdi-chevron-down',
+      collapse: 'mdi-chevron-up',
+      checkboxOn: 'mdi-checkbox-marked-circle',
+      checkboxOff: 'mdi-circle-outline',
+      radioOn: 'mdi-circle-slice-8',
+      radioOff: 'mdi-circle-outline',
+      ratingFull: 'mdi-star',
+      ratingEmpty: 'mdi-star-outline',
+      clear: 'mdi-close-circle',
+      close: 'mdi-close-circle',
+      next: 'mdi-chevron-right',
+      prev: 'mdi-chevron-left',
+      breadcrumbDivider: '•',
+    }),
+  ],
+})

package/src/themes/classic.ts

@@ -11,6 +11,8 @@ export const classic = defineTheme({
     description: 'Vuetify as it ships. Material Design, Roboto, familiar elevation.',
     dark: false,
     iconStyle: 'filled',
+    // The control theme: the core layer skips it entirely — see `stock`.
+    stock: true,
     swatch: ['#FFFFFF', '#EEEEEE', '#1867C0', '#48A9A6'],
     fonts: ['Roboto'],
   },
@@ -18,6 +20,7 @@ export const classic = defineTheme({
     dark: false,
     variables: {
       'font-body': "'Roboto', system-ui, sans-serif",
+
     },
   },
 })

package/src/themes/clay.ts

@@ -36,12 +36,26 @@ export const clay = defineTheme({
       warning: '#FDCB6E',
       'on-surface': '#3D3355',
       'on-background': '#3D3355',
+      // Vuetify's automatic pick lands on white here, which is worse by
+      // both models — this reads w8.7/a59 against w2.4/a52.
+      'on-secondary': '#000000',
+      // Vuetify picks the label colour by luminance and settles for
+      // about 3:1, which is the bar for large text rather than for a
+      // button label. Measured on the filled buttons: error 2.8:1 → 7.6:1.
+      'on-error': '#000000',
       'on-warning': '#3D2E00',
     },
     variables: {
+      /* A panel standing on its own — a bare list, sheet, banner or table.
+         Core owns the selector; this is what it draws with. */
+      'vw-panel-shadow': 'var(--vw-clay-lift)',
       'border-color': '#6C5CE7',
       'border-opacity': 0.001,
+      // The relief reaches past the shape it lifts — see core.css.
+      'vw-relief-inset': '7px',
       'shadow-color': '#5A46B0',
+      // Shapes are lifted out of the ground here, not laid on top of it.
+      'vw-outlined-fill': 'transparent',
       'high-emphasis-opacity': 0.9,
       'medium-emphasis-opacity': 0.62,
       'hover-opacity': 0.05,
@@ -54,6 +68,16 @@ export const clay = defineTheme({
       'vw-btn-tracking': '0',
       'vw-btn-weight': '700',
       'vw-tab-slider-height': '5px',
+
+      // Soft mass: it takes a moment to squash and a moment to come back.
+      'vw-motion-duration': '200ms',
+      'vw-press-scale': '0.97',
+      'vw-pop-scale': '1.25',
+      'vw-pop-duration': '280ms',
+
+      // A channel pressed into the ground rather than a line on it.
+      'vw-timeline-line': 'rgb(var(--v-theme-background))',
+      'vw-timeline-line-width': '8px',
     },
   },
   defaults: [

package/src/themes/darkGlass.ts

@@ -35,11 +35,24 @@ export const darkGlass = defineTheme({
       warning: '#FFB74D',
       'on-surface': '#ECE8F5',
       'on-background': '#F3F0FA',
+      // Vuetify picks the label colour by luminance and settles for
+      // about 3:1, which is the bar for large text rather than for a
+      // button label. Measured on the filled buttons: error 3.1:1 → 6.7:1.
+      'on-error': '#000000',
     },
     variables: {
+      /* A panel standing on its own — a bare list, sheet, banner or table.
+         Core owns the selector; this is what it draws with. */
+      'vw-panel-fill': 'rgba(var(--v-theme-surface), 0.62)',
+      'vw-panel-filter': 'blur(18px) saturate(160%)',
+      'vw-panel-border':
+        '1px solid rgba(var(--v-border-color), var(--v-border-opacity))',
       'border-color': '#B9A9FF',
       'border-opacity': 0.16,
       'shadow-color': '#000000',
+      // The frost rule below owns the colour; core's default would paint
+      // an opaque surface under it and the sheet would stop being glass.
+      'vw-outlined-fill': 'rgba(var(--v-theme-surface), 0.62)',
       'high-emphasis-opacity': 0.95,
       'medium-emphasis-opacity': 0.72,
       'hover-opacity': 0.08,
@@ -50,6 +63,17 @@ export const darkGlass = defineTheme({
       'vw-btn-transform': 'none',
       'vw-btn-tracking': '0.01em',
       'vw-btn-weight': '600',
+
+      // Sheets of glass slide rather than snap.
+      'vw-motion-duration': '260ms',
+      'vw-press-scale': '0.97',
+      'vw-hover-lift': '2px',
+      'vw-pop-scale': '1.18',
+      'vw-pop-duration': '240ms',
+
+      // Violet through the glass.
+      'vw-timeline-line': 'rgba(var(--v-theme-primary), 0.45)',
+      'vw-timeline-line-width': '2px',
     },
   },
   defaults: [

package/src/themes/graphite.ts

@@ -0,0 +1,150 @@
+import { bars, controls, fields, icons, tables } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * The product-dark theme every developer tool converged on: near-black,
+ * hairline edges, tight radii, and no shadow anywhere. Depth comes from a
+ * lighter surface and a one-pixel line, which is why it stays legible on a
+ * dense screen where a stack of drop shadows would turn to mud.
+ *
+ * The accent is the restraint: `primary` is a near-white, so the one filled
+ * button on a screen is the brightest thing on it, and indigo sits in
+ * `secondary` for the places that want a hue. The status colours stay
+ * saturated — they are the only signal that has to survive a glance.
+ */
+export const graphite = defineTheme({
+  name: 'graphite',
+  meta: {
+    title: 'Graphite',
+    description: 'Product dark — near-black, hairline edges, no shadows, mono labels.',
+    dark: true,
+    iconStyle: 'outline',
+    swatch: ['#0A0B0D', '#121417', '#EDEFF2', '#4D64FF'],
+    fonts: ['Inter', 'JetBrains Mono'],
+  },
+  theme: {
+    dark: true,
+    colors: {
+      background: '#0A0B0D',
+      surface: '#121417',
+      'surface-bright': '#1B1E23',
+      'surface-light': '#16191D',
+      'surface-variant': '#C3C9D4',
+      'on-surface-variant': '#0F1114',
+      primary: '#EDEFF2',
+      'primary-darken-1': '#C9CDD4',
+      secondary: '#4D64FF',
+      'secondary-darken-1': '#5D6FE8',
+      error: '#F2555A',
+      info: '#5AA9F0',
+      success: '#3FCF8E',
+      warning: '#E8B03D',
+      'on-surface': '#E6E9ED',
+      'on-background': '#E6E9ED',
+      // Vuetify picks the label colour by luminance and settles for
+      // about 3:1, which is the bar for large text rather than for a
+      // button label. Measured on the filled buttons: info 2.5:1 → 8.4:1, error 3.4:1 → 6.2:1.
+      'on-info': '#000000',
+      'on-error': '#000000',
+    },
+    variables: {
+      /* A panel standing on its own — a bare list, sheet, banner or table.
+         Core owns the selector; this is what it draws with. */
+      'vw-panel-border':
+        '1px solid rgba(var(--v-border-color), var(--v-border-opacity))',
+      'border-color': '#9AA4B5',
+      'border-opacity': 0.12,
+      'shadow-color': '#000000',
+      'high-emphasis-opacity': 0.95,
+      'medium-emphasis-opacity': 0.6,
+      'hover-opacity': 0.045,
+      'font-body': "'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",
+      // Four pixels is the smallest corner that still reads as intentional
+      // rather than as an unstyled input.
+      'vw-radius': '4px',
+      'vw-radius-lg': '8px',
+      'vw-radius-chip': '4px',
+      'vw-radius-thumb': '2px',
+      'vw-border-width': '1px',
+      'vw-btn-transform': 'none',
+      'vw-btn-tracking': '0',
+      'vw-btn-weight': '500',
+      // Display sizes set tight, the way a landing page sets them.
+      'vw-heading-weight': '600',
+      'vw-heading-tracking': '-0.025em',
+      // Table headers as labels, not as titles.
+      'vw-th-weight': '500',
+      'vw-th-tracking': '0.09em',
+      'vw-th-transform': 'uppercase',
+      // A table of ids, dates and counts is most of what this theme is for.
+      'vw-numeric': 'tabular-nums',
+      'vw-tab-slider-height': '2px',
+      // Floating surfaces are the one place a shadow survives, and only to
+      // separate them from the page — the hairline does the describing.
+      'vw-overlay-border': '1px solid rgba(var(--v-border-color), 0.18)',
+      'vw-overlay-shadow': '0 16px 40px rgba(0, 0, 0, 0.6)',
+      // Product UIs colour their links rather than underlining them.
+      'vw-link-decoration': 'none',
+
+      // Instant and linear. Easing describes weight, and nothing here has any.
+      'vw-motion-duration': '90ms',
+      'vw-motion-ease': 'linear',
+      'vw-press-scale': '1',
+      'vw-pop-scale': '1.1',
+      'vw-pop-duration': '140ms',
+      'vw-focus-ring': '1px solid rgba(var(--v-theme-primary), 0.85)',
+      'vw-theme-transition': '260ms',
+
+      // Hairline and squared off, like every other edge here.
+      'vw-timeline-line': 'rgba(var(--v-border-color), 0.35)',
+      'vw-timeline-line-width': '1px',
+      'vw-radius-dot': '2px',
+      'vw-radius-avatar': '4px',
+    },
+  },
+  defaults: [
+    {
+      // No ripple anywhere: it is a Material animation about the weight of
+      // a surface, and nothing in this theme has any.
+      // No `density` here on purpose: Vuetify subtracts it from the size
+      // height, and a compact `x-small` button ends up shorter than its
+      // own label. The tight geometry comes from the radius instead.
+      VBtn: { variant: 'flat', ripple: false },
+      VCard: { variant: 'outlined' },
+      VAlert: { variant: 'outlined', density: 'compact' },
+      VChip: { variant: 'outlined', size: 'small', ripple: false },
+      VListItem: { ripple: false },
+      VTab: { ripple: false },
+      // Flush stacked rows rather than floating panels with gaps.
+      VExpansionPanels: { variant: 'accordion' },
+      VNavigationDrawer: { border: 'e' },
+    },
+    fields({ variant: 'outlined', density: 'compact' }),
+    controls({ density: 'compact' }),
+    tables('compact'),
+    bars({ flat: true, border: 'b' }),
+    {
+      // Controls sized down to the text they sit beside, and squared off
+      // to the same 4px the fields and buttons use.
+      VSwitch: { inset: 'square' },
+      VSlider: { thumbSize: 12, trackSize: 3 },
+    },
+    icons({
+      // One weight of line icon throughout; arrows where a direction is
+      // meant, chevrons where a disclosure is.
+      dropdown: 'mdi-chevron-down',
+      collapse: 'mdi-chevron-up',
+      checkboxOn: 'mdi-checkbox-marked',
+      checkboxOff: 'mdi-checkbox-blank-outline',
+      sortAsc: 'mdi-arrow-up',
+      sortDesc: 'mdi-arrow-down',
+      next: 'mdi-chevron-right',
+      prev: 'mdi-chevron-left',
+      first: 'mdi-chevron-double-left',
+      last: 'mdi-chevron-double-right',
+      clear: 'mdi-close',
+      close: 'mdi-close',
+      breadcrumbDivider: '/',
+    }),
+  ],
+})

package/src/themes/index.ts

@@ -1,9 +1,14 @@
+export { atlas } from './atlas.js'
+export { atlasDark } from './atlasDark.js'
+export { atlasSepia } from './atlasSepia.js'
 export { aurora } from './aurora.js'
 export { brutalist } from './brutalist.js'
 export { calm } from './calm.js'
+export { candy } from './candy.js'
 export { classic } from './classic.js'
 export { clay } from './clay.js'
 export { darkGlass } from './darkGlass.js'
+export { graphite } from './graphite.js'
 export { liquidGlass } from './liquidGlass.js'
 export { lux } from './lux.js'
 export { morph } from './morph.js'

package/src/themes/liquidGlass.ts

@@ -25,7 +25,7 @@ export const liquidGlass = defineTheme({
     description: 'Capsule controls and refracting panes over a calm wash, after iOS 26.',
     dark: false,
     iconStyle: 'outline',
-    swatch: ['#F2F2F7', '#FFFFFF', '#007AFF', '#5856D6'],
+    swatch: ['#F2F2F7', '#FFFFFF', '#0071ED', '#5856D6'],
     fonts: ['Inter'],
   },
   theme: {
@@ -38,24 +38,38 @@ export const liquidGlass = defineTheme({
       'surface-light': '#F7F7FA',
       'surface-variant': '#3A3A3C',
       'on-surface-variant': '#F2F2F7',
-      primary: '#007AFF',
+      primary: '#0071ED',
       'primary-darken-1': '#0062CC',
       secondary: '#5856D6',
       'secondary-darken-1': '#4341B5',
       error: '#FF3B30',
-      info: '#007AFF',
+      info: '#0071ED',
       success: '#34C759',
       warning: '#FF9500',
       'on-surface': '#1C1C1E',
       'on-background': '#1C1C1E',
+      // Vuetify picks the label colour by luminance and settles for
+      // about 3:1, which is the bar for large text rather than for a
+      // button label. Measured on the filled buttons: info 4:1 → 5.2:1, error 3.5:1 → 4.8:1.
+      'on-info': '#000000',
+      'on-error': '#1C1C1E',
       'on-success': '#06140A',
       'on-warning': '#1A1004',
     },
     variables: {
+      /* A panel standing on its own — a bare list, sheet, banner or table.
+         Core owns the selector; this is what it draws with. */
+      'vw-panel-fill': 'rgba(var(--v-theme-surface), 0.6)',
+      'vw-panel-filter': 'blur(30px) saturate(190%)',
+      'vw-panel-shadow':
+        'inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 10px 34px rgba(var(--v-shadow-color), 0.1)',
       'border-color': '#3A3A3C',
       // iOS separators are hairlines, not borders.
       'border-opacity': 0.1,
       'shadow-color': '#1B3A6B',
+      // The frost rule below owns the colour; core's default would paint
+      // an opaque surface under it and the pane would stop being glass.
+      'vw-outlined-fill': 'rgba(var(--v-theme-surface), 0.6)',
       'high-emphasis-opacity': 0.92,
       'medium-emphasis-opacity': 0.6,
       'hover-opacity': 0.04,
@@ -76,6 +90,19 @@ export const liquidGlass = defineTheme({
       'vw-link-decoration': 'none',
       'vw-heading-weight': '700',
       'vw-heading-tracking': '-0.022em',
+
+      // The iOS curve: fast out, long settle.
+      'vw-motion-duration': '320ms',
+      'vw-motion-ease': 'cubic-bezier(0.32, 0.72, 0, 1)',
+      'vw-press-scale': '0.96',
+      'vw-hover-lift': '2px',
+      'vw-pop-scale': '1.2',
+      'vw-pop-duration': '300ms',
+      'vw-theme-transition': '520ms',
+
+      // Frosted, so the line is a highlight rather than a rule.
+      'vw-timeline-line': 'rgba(var(--v-theme-on-surface), 0.18)',
+      'vw-timeline-line-width': '2px',
     },
   },
   defaults: [

package/src/themes/lux.ts

@@ -14,7 +14,7 @@ export const lux = defineTheme({
     description: 'Editorial luxury — hairline rules, wide tracking, small caps and muted gold.',
     dark: false,
     iconStyle: 'outline',
-    swatch: ['#FFFFFF', '#FAFAFA', '#1A1A1A', '#B39A5B'],
+    swatch: ['#FFFFFF', '#FAFAFA', '#1A1A1A', '#88733F'],
     fonts: ['Jost'],
   },
   theme: {
@@ -28,7 +28,7 @@ export const lux = defineTheme({
       'on-surface-variant': '#FFFFFF',
       primary: '#1A1A1A',
       'primary-darken-1': '#000000',
-      secondary: '#B39A5B',
+      secondary: '#88733F',
       'secondary-darken-1': '#8F7A45',
       error: '#96322A',
       info: '#3D5A73',
@@ -36,8 +36,16 @@ export const lux = defineTheme({
       warning: '#A8791E',
       'on-surface': '#1A1A1A',
       'on-background': '#1A1A1A',
+      // Vuetify picks the label colour by luminance and settles for
+      // about 3:1, which is the bar for large text rather than for a
+      // button label. Measured on the filled buttons: warning 3.9:1 → 4.5:1.
+      'on-warning': '#1A1A1A',
     },
     variables: {
+      /* A panel standing on its own — a bare list, sheet, banner or table.
+         Core owns the selector; this is what it draws with. */
+      'vw-panel-border':
+        'var(--v-vw-border-width) solid rgba(var(--v-border-color), var(--v-border-opacity))',
       'border-color': '#1A1A1A',
       'border-opacity': 0.14,
       'high-emphasis-opacity': 0.88,
@@ -58,6 +66,20 @@ export const lux = defineTheme({
       'vw-list-bar': '2px',
       'vw-list-bar-color': 'rgb(var(--v-theme-secondary))',
       'vw-tab-slider-height': '1px',
+
+      // Expensive things move slowly and stop exactly where they meant to.
+      'vw-motion-duration': '240ms',
+      'vw-motion-ease': 'cubic-bezier(0.2, 0, 0, 1)',
+      'vw-press-scale': '0.995',
+      'vw-hover-lift': '2px',
+      'vw-pop-scale': '1.08',
+      'vw-pop-duration': '220ms',
+      'vw-focus-ring': '1px solid rgb(var(--v-theme-primary))',
+      'vw-theme-transition': '520ms',
+
+      // A gold hairline; the dot stays a circle.
+      'vw-timeline-line': 'rgba(var(--v-theme-primary), 0.55)',
+      'vw-timeline-line-width': '1px',
     },
   },
   defaults: [

package/src/themes/morph.ts

@@ -16,7 +16,7 @@ export const morph = defineTheme({
     description: 'Neumorphic — one continuous surface, shaped only by light and shadow.',
     dark: false,
     iconStyle: 'filled',
-    swatch: ['#E4EBF5', '#E4EBF5', '#5A7DE0', '#8894AA'],
+    swatch: ['#E4EBF5', '#E4EBF5', '#496FDD', '#677690'],
     fonts: ['Nunito'],
   },
   theme: {
@@ -28,9 +28,9 @@ export const morph = defineTheme({
       'surface-light': '#DAE2EE',
       'surface-variant': '#4A5568',
       'on-surface-variant': '#E4EBF5',
-      primary: '#5A7DE0',
+      primary: '#496FDD',
       'primary-darken-1': '#4763BC',
-      secondary: '#8894AA',
+      secondary: '#677690',
       'secondary-darken-1': '#6D798F',
       error: '#E06C75',
       info: '#5A9FE0',
@@ -38,11 +38,23 @@ export const morph = defineTheme({
       warning: '#E0A85A',
       'on-surface': '#4A5568',
       'on-background': '#4A5568',
+      // Vuetify picks the label colour by luminance and settles for
+      // about 3:1, which is the bar for large text rather than for a
+      // button label. Measured on the filled buttons: info 2.8:1 → 7.5:1, error 3.2:1 → 6.6:1.
+      'on-info': '#000000',
+      'on-error': '#000000',
     },
     variables: {
+      /* A panel standing on its own — a bare list, sheet, banner or table.
+         Core owns the selector; this is what it draws with. */
+      'vw-panel-shadow': 'var(--vw-morph-raised)',
       'border-color': '#9AA7BC',
       'border-opacity': 0.001,
+      // The relief reaches past the shape it lifts — see core.css.
+      'vw-relief-inset': '7px',
       'shadow-color': '#A3B1C6',
+      // The relief is one continuous sheet: a panel that paints itself is a patch on it.
+      'vw-outlined-fill': 'transparent',
       'high-emphasis-opacity': 0.85,
       'medium-emphasis-opacity': 0.6,
       'hover-opacity': 0.03,
@@ -56,6 +68,16 @@ export const morph = defineTheme({
       'vw-btn-tracking': '0.01em',
       'vw-btn-weight': '700',
       'vw-tab-slider-height': '4px',
+
+      // The relief does the talking; the movement only has to not contradict it.
+      'vw-motion-duration': '160ms',
+      'vw-press-scale': '0.985',
+      'vw-pop-scale': '1.15',
+      'vw-pop-duration': '220ms',
+
+      // The same groove the fields are, turned on its side.
+      'vw-timeline-line': 'rgb(var(--v-theme-background))',
+      'vw-timeline-line-width': '8px',
     },
   },
   defaults: [

package/src/themes/neon.ts

@@ -35,12 +35,20 @@ export const neon = defineTheme({
       warning: '#FFD23F',
       'on-surface': '#D7E3F4',
       'on-background': '#D7E3F4',
+      // Vuetify picks the label colour by luminance and settles for
+      // about 3:1, which is the bar for large text rather than for a
+      // button label. Measured on the filled buttons: error 3.5:1 → 6:1.
+      'on-error': '#000000',
       'on-primary': '#05060A',
       'on-secondary': '#05060A',
       'on-success': '#05060A',
       'on-warning': '#05060A',
     },
     variables: {
+      /* A panel standing on its own — a bare list, sheet, banner or table.
+         Core owns the selector; this is what it draws with. */
+      'vw-panel-border':
+        'var(--v-vw-border-width) solid rgba(var(--v-theme-primary), 0.35)',
       'border-color': '#00F0FF',
       'border-opacity': 0.28,
       'shadow-color': '#00F0FF',
@@ -53,6 +61,8 @@ export const neon = defineTheme({
       'vw-radius-lg': '0px',
       'vw-radius-thumb': '0px',
       'vw-radius-chip': '0px',
+      // A terminal has no round corners, not even on an icon button.
+      'vw-radius-icon-btn': '0px',
       'vw-border-width': '1px',
       'vw-btn-transform': 'uppercase',
       'vw-btn-tracking': '0.12em',
@@ -62,6 +72,21 @@ export const neon = defineTheme({
       'vw-list-bar': '2px',
       'vw-list-bar-color': 'rgb(var(--v-theme-primary))',
       'vw-tab-slider-height': '3px',
+
+      // A terminal repaints; it does not ease.
+      'vw-motion-duration': '110ms',
+      'vw-motion-ease': 'linear',
+      'vw-press-scale': '0.98',
+      'vw-pop-scale': '1.2',
+      'vw-pop-duration': '150ms',
+      'vw-focus-ring': '2px solid rgb(var(--v-theme-secondary))',
+      'vw-theme-transition': '180ms',
+
+      // A lit filament; the glow is in the stylesheet.
+      'vw-timeline-line': 'rgb(var(--v-theme-secondary))',
+      'vw-timeline-line-width': '2px',
+      'vw-radius-dot': '0px',
+      'vw-radius-avatar': '0px',
     },
   },
   defaults: [