vuetiwatch 0.1.0 → 0.2.0

package/src/styles/themes/lux.css

@@ -7,7 +7,6 @@
     box-shadow: none;
   }
 
-
   & :is(.v-toolbar-title, .v-card-title, .v-list-subheader) {
     letter-spacing: 0.16em;
     text-transform: uppercase;
@@ -25,7 +24,4 @@
     border: var(--v-vw-border-width) solid rgba(var(--v-border-color), 0.14);
     box-shadow: 0 24px 64px rgba(0, 0, 0, 0.08);
   }
-
-
-
 }

package/src/styles/themes/morph.css

@@ -26,6 +26,19 @@
       -3px -3px 6px rgba(255, 255, 255, 0.6);
   }
 
+  /**
+   * The relief is composed against this theme's own ground: a white
+   * highlight top-left, a dark shadow bottom-right. Inside a surface that
+   * paints its own colour — `color=` on a card, a coloured bar, a filled
+   * alert — the highlight has nothing to blend into and reads as a halo
+   * around the control, so the relief is dropped there and the control
+   * keeps its flat fill. Vuetify only emits `bg-*` when an author asked
+   * for a colour, so untouched surfaces are unaffected.
+   */
+  & [class*='bg-'] :is(.v-btn.v-btn, .v-chip.v-chip) {
+    box-shadow: none;
+  }
+
   /* Inputs are recesses, not tiles. */
   & :is(.v-field--variant-solo, .v-switch__track, .v-slider-track) {
     background: rgb(var(--v-theme-background));
@@ -50,4 +63,13 @@
     border-radius: 4px;
     box-shadow: var(--vw-morph-raised);
   }
+
+  /* The timeline is the same groove as the inputs, stood on end. */
+  & :is(.v-timeline-divider__before, .v-timeline-divider__after) {
+    box-shadow: var(--vw-morph-pressed);
+  }
+
+  & .v-timeline-divider__dot {
+    box-shadow: var(--vw-morph-raised);
+  }
 }

package/src/styles/themes/neon.css

@@ -46,11 +46,16 @@
     box-shadow: 0 0 14px rgba(var(--v-theme-primary), 0.55);
   }
 
-
-
-
   & .v-expansion-panels {
     box-shadow: 0 0 0 1px rgba(var(--v-theme-primary), 0.12);
   }
 
+  /* The line is lit filament, and the dot is the lamp. */
+  & :is(.v-timeline-divider__before, .v-timeline-divider__after) {
+    box-shadow: 0 0 8px rgb(var(--v-theme-secondary));
+  }
+
+  & .v-timeline-divider__dot {
+    box-shadow: 0 0 12px rgba(var(--v-theme-primary), 0.9);
+  }
 }

package/src/styles/themes/paper.css

@@ -16,7 +16,6 @@
     box-shadow: none;
   }
 
-
   /* A printed rule under the active tab, not a Material underline. */
 
   /* The switch gets an outline for the same reason cards do. */
@@ -28,5 +27,4 @@
   & :is(.v-table thead th, .v-data-table__th) {
     border-bottom: 3px double rgba(var(--v-border-color), 0.45);
   }
-
 }

package/src/styles/themes/sketchy.css

@@ -25,6 +25,15 @@
   & .v-tab__slider {
     border-radius: 8px 3px 8px 3px / 3px 8px 3px 8px;
   }
+
+  /**
+   * The one thing the panel token cannot carry: ink is never even, so
+   * the bottom of the stroke sits heavier. A shorthand sets all four
+   * sides, and this is a single longhand on top of it.
+   */
+  & :is(.v-list, .v-sheet, .v-banner, .v-table):not(:is(.v-card, .v-overlay__content, .v-navigation-drawer, .v-expansion-panels, .v-list) *) {
+    border-bottom-width: calc(var(--v-vw-border-width) + 1px);
+  }
 }
 
 @media (prefers-reduced-motion: no-preference) {

package/src/styles/themes/slate.css

@@ -19,8 +19,4 @@
   & .v-app-bar {
     box-shadow: none;
   }
-
-
-
-
 }

package/src/styles/themes/soft.css

@@ -7,14 +7,13 @@
     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;
+    transition: box-shadow var(--v-vw-motion-duration) var(--v-vw-motion-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) {
@@ -51,13 +50,3 @@
     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/atlas.ts

@@ -0,0 +1,211 @@
+import type { VuetiwatchAccent, VuetiwatchDefaults } from '../types.js'
+import { bars, controls, fields, icons, tables } from '../util/defaults.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * The admin theme, and the first one here that comes as a family: `atlas`,
+ * `atlasDark` and `atlasSepia` share every measurement and differ only in
+ * ground, so an app can offer all three and change nothing but the name.
+ *
+ * It is built for the screen a person keeps open all day. Where `slate`
+ * packs a dashboard tight and `graphite` states a product's opinion, this
+ * one gets out of the way: comfortable density rather than compact, one
+ * low-chroma accent, hairlines instead of shadows, and no capitals, glow or
+ * texture anywhere. Nothing on the screen competes with the data on it.
+ *
+ * Exported alongside the theme are the parts the other two variants reuse —
+ * they are the family, not three lookalikes maintained in parallel.
+ */
+
+/**
+ * The accents the family offers, one row per preset and one column per
+ * ground. A light ground needs a deep accent to carry a white label; a dark
+ * one needs a light accent and a dark label — the Material 3 pairing — so
+ * the same preset is a different hex in each variant, and the id is what
+ * ties them together when someone switches.
+ *
+ * Every value here is measured: filled controls clear 4.5:1 in all three.
+ */
+const ACCENTS = [
+  { id: 'cobalt', title: 'Cobalt', light: ['#0059FF', '#0047CC'], dark: ['#3382FF', '#2A6BD6'], sepia: ['#1150E0', '#0E41B4'] },
+  { id: 'indigo', title: 'Indigo', light: ['#3F4E8C', '#323E70'], dark: ['#93A4E8', '#7688D1'], sepia: ['#46508A', '#37406E'] },
+  { id: 'eucalyptus', title: 'Eucalyptus', light: ['#2F6B5B', '#245448'], dark: ['#6FB39B', '#57957F'], sepia: ['#3F6B57', '#325544'] },
+  { id: 'plum', title: 'Plum', light: ['#6B3F63', '#55324F'], dark: ['#C596BC', '#A87A9F'], sepia: ['#6B4560', '#56374D'] },
+  { id: 'clay', title: 'Clay', light: ['#8A5B2B', '#6E4822'], dark: ['#D9A272', '#BC855A'], sepia: ['#8A5B34', '#6E4829'] },
+] as const
+
+/** The accent list for one ground, in the shape `meta.accents` expects. */
+export const atlasAccents = (tone: 'light' | 'dark' | 'sepia'): VuetiwatchAccent[] =>
+  ACCENTS.map(accent => {
+    const [primary, darken] = accent[tone]
+
+    return {
+      id: accent.id,
+      title: accent.title,
+      colors: {
+        primary,
+        'primary-darken-1': darken,
+        // On a dark ground the accent is the light thing on screen, so its
+        // label is the ground itself rather than white.
+        ...(tone === 'dark' ? { 'on-primary': '#15191B' } : {}),
+      },
+    }
+  })
+
+/** Geometry, type and motion. Identical across the family. */
+export const atlasVariables = {
+  'high-emphasis-opacity': 0.88,
+  'medium-emphasis-opacity': 0.6,
+  'hover-opacity': 0.04,
+  'font-body': "'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",
+  // Eight and ten, which is where the admin frameworks people actually
+  // like have settled: tight enough to read as a tool, round enough not to
+  // look like a spreadsheet.
+  'vw-radius': '8px',
+  'vw-radius-lg': '10px',
+  'vw-radius-chip': '6px',
+  'vw-radius-thumb': '50%',
+  'vw-border-width': '1px',
+  // A field's outline is how you find the field: 0.5 puts it just past 3:1
+  // on all three grounds, where Vuetify's 0.38 leaves it at about 2.3.
+  'vw-field-border-opacity': '0.5',
+  'vw-btn-transform': 'none',
+  'vw-btn-tracking': '0',
+  'vw-btn-weight': '500',
+  'vw-heading-weight': '600',
+  'vw-heading-tracking': '-0.025em',
+  // Column headers are labels, not announcements: weight and a little
+  // tracking, no capitals. Three themes here already shout in their tables.
+  'vw-th-weight': '500',
+  'vw-th-tracking': '0.03em',
+  // An admin screen is mostly figures, and figures only line up in a column
+  // when every digit is the same width.
+  'vw-numeric': 'tabular-nums',
+  'vw-tab-slider-height': '2px',
+  'vw-list-bar': '2px',
+  'vw-list-bar-color': 'rgb(var(--v-theme-primary))',
+  // Quiet, quick, and no overshoot — the motion of something you look at
+  // for eight hours rather than something you show off.
+  'vw-motion-duration': '160ms',
+  'vw-motion-ease': 'cubic-bezier(0.2, 0, 0.2, 1)',
+  'vw-press-scale': '0.99',
+  'vw-hover-lift': '1px',
+  'vw-pop-scale': '1.08',
+  'vw-pop-duration': '180ms',
+  'vw-theme-transition': '320ms',
+} as const
+
+/** Component defaults. Identical across the family. */
+export const atlasDefaults: VuetiwatchDefaults[] = [
+  {
+    VBtn: { variant: 'flat' },
+    VCard: { variant: 'outlined' },
+    VAlert: { variant: 'tonal', density: 'compact' },
+    VChip: { variant: 'tonal', size: 'small' },
+    VNavigationDrawer: { border: 'e' },
+    // A row that lights under the cursor is the cheapest way to keep a
+    // place in a table of a hundred lines.
+    VDataTable: { hover: true },
+    /**
+     * The picker's 70px header repeats the date it is already showing —
+     * it exists for the full-screen dialog on a phone. In a form beside a
+     * labelled field it is a third of the control's height saying nothing.
+     */
+    VDatePicker: { hideHeader: true },
+    VTimePicker: { hideHeader: true },
+    // Vuetify draws the empty-state glyph at 96px, which is a poster on a
+    // panel this size. Enough to read as an illustration, not as a banner.
+    VEmptyState: { size: 56 },
+    /**
+     * A segmented control is one object, not a row of raised buttons: a
+     * hairline box with the chosen segment filled. Vuetify's default leaves
+     * each button floating on its own elevation.
+     */
+    VBtnToggle: { variant: 'outlined', divided: true, density: 'compact' },
+  },
+  // Compact throughout: an admin screen is a working surface, and a field
+  // at Vuetify's default height is a third taller than the row it sits in.
+  fields({ variant: 'outlined', density: 'compact' }),
+  controls({ density: 'compact' }),
+  tables('compact'),
+  bars({ flat: true, border: 'b', height: 56 }),
+  {
+    // Not inset: the pill is 52×32 where the plain switch is 36×14, and on
+    // a row of settings that difference is the whole line height.
+    VSwitch: { inset: false },
+    VSlider: { thumbSize: 14, trackSize: 3 },
+  },
+  icons({
+    dropdown: 'mdi-chevron-down',
+    collapse: 'mdi-chevron-up',
+    checkboxOn: 'mdi-checkbox-marked-outline',
+    checkboxOff: 'mdi-checkbox-blank-outline',
+    sortAsc: 'mdi-arrow-up',
+    sortDesc: 'mdi-arrow-down',
+    next: 'mdi-chevron-right',
+    prev: 'mdi-chevron-left',
+    first: 'mdi-page-first',
+    last: 'mdi-page-last',
+    clear: 'mdi-close',
+    close: 'mdi-close',
+  }),
+]
+
+export const atlas = defineTheme({
+  name: 'atlas',
+  meta: {
+    title: 'Atlas',
+    description: 'Console light — a white page, hairline panels and one blue that means "do it".',
+    dark: false,
+    iconStyle: 'outline',
+    family: 'atlas',
+    variant: 'Light',
+    accents: atlasAccents('light'),
+    swatch: ['#FDFDFF', '#FFFFFF', '#0059FF', '#57647B'],
+    fonts: ['Inter'],
+  },
+  theme: {
+    dark: false,
+    colors: {
+      /**
+       * The ground is white, not grey. Consoles built this decade separate
+       * a panel from the page with a line, not with a tint — the tint is
+       * saved for the bands inside a panel, which is what `surface-light`
+       * is here: table headers, filled rows, the sidebar.
+       */
+      background: '#FDFDFF',
+      surface: '#FFFFFF',
+      'surface-bright': '#FFFFFF',
+      // The reference uses this tint at a third of its strength — `bg-muted/30`
+      // — so the bands read as a change of paper, not as a coloured stripe.
+      'surface-light': '#F5F8FD',
+      'surface-variant': '#0B101C',
+      'on-surface-variant': '#FDFDFF',
+      primary: '#0059FF',
+      'primary-darken-1': '#0047CC',
+      secondary: '#57647B',
+      'secondary-darken-1': '#45505F',
+      error: '#D91326',
+      info: '#0369A1',
+      success: '#15803D',
+      warning: '#B45309',
+      'on-surface': '#0B101C',
+      'on-background': '#0B101C',
+    },
+    variables: {
+      /**
+       * A cool grey line rather than ink at low alpha: ink fades to a
+       * neutral grey, and every line here should carry the same blue cast
+       * as the surfaces it separates. At 0.22 it lands on #DFE3EB, a shade
+       * off the panel it edges.
+       */
+      'border-color': '#6E82A6',
+      'border-opacity': 0.22,
+      'shadow-color': '#0B101C',
+      'vw-overlay-border': '1px solid rgba(var(--v-border-color), 0.1)',
+      'vw-overlay-shadow': '0 8px 28px rgba(var(--v-shadow-color), 0.1)',
+      ...atlasVariables,
+    },
+  },
+  defaults: atlasDefaults,
+})

package/src/themes/atlasDark.ts

@@ -0,0 +1,64 @@
+import { atlasAccents, atlasDefaults, atlasVariables } from './atlas.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * `atlas` after dark: the same measurements, the same accent hue lifted to
+ * where it reads on a dark ground, and a background that is grey rather
+ * than black — a panel someone stares at all evening should not be a hole
+ * with text floating in it.
+ */
+export const atlasDark = defineTheme({
+  name: 'atlasDark',
+  meta: {
+    title: 'Atlas Dark',
+    description: 'The same console after dark — deep navy, a lit blue, lines you can find.',
+    dark: true,
+    iconStyle: 'outline',
+    family: 'atlas',
+    variant: 'Dark',
+    accents: atlasAccents('dark'),
+    swatch: ['#040817', '#070E21', '#3382FF', '#838FA8'],
+    fonts: ['Inter'],
+  },
+  theme: {
+    dark: true,
+    colors: {
+      background: '#040817',
+      surface: '#070E21',
+      'surface-bright': '#101830',
+      'surface-light': '#151E35',
+      'surface-variant': '#CBD5E1',
+      'on-surface-variant': '#040817',
+      primary: '#3382FF',
+      'primary-darken-1': '#2A6BD6',
+      secondary: '#838FA8',
+      'secondary-darken-1': '#6B778F',
+      error: '#F94144',
+      info: '#7DD3FC',
+      success: '#4ADE80',
+      warning: '#FBBF24',
+      'on-surface': '#EEF2F9',
+      'on-background': '#EEF2F9',
+      /**
+       * A dark theme's accents are the light thing on the screen, so their
+       * labels are the ground colour rather than white — the Material 3
+       * convention, and the only option that clears 4.5:1 here. Vuetify's
+       * automatic pick lands on white at about 2.5:1.
+       */
+      'on-primary': '#040817',
+      'on-secondary': '#040817',
+      'on-error': '#040817',
+    },
+    variables: {
+      // Lands on #1F283E over the panel — the line is visible without
+      // becoming a grid.
+      'border-color': '#8FA0C4',
+      'border-opacity': 0.18,
+      'shadow-color': '#000000',
+      'vw-overlay-border': '1px solid rgba(var(--v-border-color), 0.16)',
+      'vw-overlay-shadow': '0 12px 32px rgba(0, 0, 0, 0.5)',
+      ...atlasVariables,
+    },
+  },
+  defaults: atlasDefaults,
+})

package/src/themes/atlasSepia.ts

@@ -0,0 +1,60 @@
+import { atlasAccents, atlasDefaults, atlasVariables } from './atlas.js'
+import { defineTheme } from '../util/defineTheme.js'
+
+/**
+ * The third ground: warm paper rather than white or grey.
+ *
+ * Neither light nor dark mode helps the person who finds a white panel too
+ * bright and a dark one too flat. Dropping the blue out of the ground and
+ * the ink lowers the glare without lowering the contrast — the text still
+ * carries better than 12:1 — and the accent turns a shade warmer to sit on
+ * it. It is the same panel, lit by a lamp instead of a window.
+ */
+export const atlasSepia = defineTheme({
+  name: 'atlasSepia',
+  meta: {
+    title: 'Atlas Sepia',
+    description: 'Warm paper and brown ink — the same panel, easier on tired eyes.',
+    dark: false,
+    iconStyle: 'outline',
+    family: 'atlas',
+    variant: 'Sepia',
+    accents: atlasAccents('sepia'),
+    swatch: ['#F7F3EC', '#FFFDF9', '#1150E0', '#7A6A52'],
+    fonts: ['Inter'],
+  },
+  theme: {
+    dark: false,
+    colors: {
+      background: '#F7F3EC',
+      surface: '#FFFDF9',
+      'surface-bright': '#FFFFFC',
+      'surface-light': '#F4EEE3',
+      'surface-variant': '#241E16',
+      'on-surface-variant': '#F7F3EC',
+      // Ink-blue on warm paper: the family's accent, in the register the
+      // ground is written in.
+      primary: '#1150E0',
+      'primary-darken-1': '#0E41B4',
+      secondary: '#7A6A52',
+      'secondary-darken-1': '#615341',
+      error: '#A83A2C',
+      info: '#356B86',
+      success: '#3B6B4A',
+      warning: '#8A6118',
+      'on-surface': '#241E16',
+      'on-background': '#241E16',
+    },
+    variables: {
+      // The same idea as the light variant, in the warm register: the line
+      // lands on #E0D7C8 rather than on a grey.
+      'border-color': '#8A7A63',
+      'border-opacity': 0.28,
+      'shadow-color': '#3B332A',
+      'vw-overlay-border': '1px solid rgba(var(--v-border-color), 0.12)',
+      'vw-overlay-shadow': '0 8px 28px rgba(var(--v-shadow-color), 0.14)',
+      ...atlasVariables,
+    },
+  },
+  defaults: atlasDefaults,
+})

package/src/themes/aurora.ts

@@ -16,7 +16,7 @@ export const aurora = defineTheme({
     description: 'Iridescent gradients on near-black. Built to be looked at — the showcase theme.',
     dark: true,
     iconStyle: 'filled',
-    swatch: ['#08080C', '#101018', '#7C5CFF', '#00D4FF'],
+    swatch: ['#08080C', '#101018', '#7857FF', '#00D4FF'],
     fonts: ['Inter'],
   },
   theme: {
@@ -28,7 +28,7 @@ export const aurora = defineTheme({
       'surface-light': '#16161F',
       'surface-variant': '#C9C6E0',
       'on-surface-variant': '#08080C',
-      primary: '#7C5CFF',
+      primary: '#7857FF',
       'primary-darken-1': '#5F3FE0',
       secondary: '#00D4FF',
       'secondary-darken-1': '#00A8CC',
@@ -38,11 +38,20 @@ export const aurora = defineTheme({
       warning: '#FFB86B',
       'on-surface': '#E8E6F5',
       'on-background': '#F0EEFA',
+      // 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 → 7.1:1.
+      'on-error': '#000000',
       'on-secondary': '#04121A',
       'on-success': '#04140D',
       '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-image':
+        'radial-gradient(36rem 18rem at 0% 0%, rgba(124, 92, 255, 0.14), transparent 70%)',
+      'vw-panel-shadow': '0 12px 40px rgba(0, 0, 0, 0.55)',
       'border-color': '#9B8CFF',
       'border-opacity': 0.14,
       'shadow-color': '#000000',
@@ -61,6 +70,25 @@ export const aurora = defineTheme({
       // 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%)',
+      /**
+       * The same three hues at a depth that carries a white label: the
+       * showcase gradient runs through a cyan where white text reads at
+       * 1.8:1, which is fine behind a tab slider and unusable behind a
+       * word. Anything with text on it takes this one instead.
+       */
+      'vw-gradient-btn': 'linear-gradient(135deg, #6F4CFF 0%, #007891 55%, #DA0069 100%)',
+
+      // The showcase theme, so the motion shows off too.
+      'vw-motion-duration': '300ms',
+      'vw-press-scale': '0.97',
+      'vw-hover-lift': '3px',
+      'vw-pop-scale': '1.28',
+      'vw-pop-duration': '300ms',
+      'vw-theme-transition': '560ms',
+
+      // The line is the theme's own gradient, top to bottom.
+      'vw-timeline-line': 'var(--v-vw-gradient)',
+      'vw-timeline-line-width': '2px',
     },
   },
   defaults: [

package/src/themes/brutalist.ts

@@ -38,11 +38,21 @@ export const brutalist = defineTheme({
       warning: '#FFB300',
       'on-surface': '#0A0A0A',
       'on-background': '#0A0A0A',
+      // 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 3.8:1 → 5.2:1, error 3.3:1 → 6:1.
+      'on-info': '#0A0A0A',
+      'on-error': '#0A0A0A',
       'on-secondary': '#0A0A0A',
       'on-warning': '#0A0A0A',
       'on-success': '#0A0A0A',
     },
     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 rgb(var(--v-shadow-color))',
+      'vw-panel-shadow':
+        'var(--vw-brut-offset) var(--vw-brut-offset) 0 rgb(var(--v-shadow-color))',
       'border-color': '#0A0A0A',
       'border-opacity': 1,
       'shadow-color': '#0A0A0A',
@@ -54,6 +64,8 @@ export const brutalist = defineTheme({
       'vw-radius-lg': '0px',
       'vw-radius-thumb': '0px',
       'vw-radius-chip': '0px',
+      // Nothing here is round, the icon buttons included.
+      'vw-radius-icon-btn': '0px',
       'vw-border-width': '3px',
       'vw-btn-transform': 'uppercase',
       'vw-btn-tracking': '0.04em',
@@ -65,6 +77,23 @@ export const brutalist = defineTheme({
       'vw-heading-weight': '700',
       'vw-heading-tracking': '-0.02em',
       'vw-tab-slider-height': '4px',
+
+      // Two frames, no curve. The press is the theme's own slide into its
+      // shadow, so the shared squash stays out of its way.
+      'vw-motion-duration': '80ms',
+      'vw-motion-ease': 'steps(2, end)',
+      'vw-press-scale': '1',
+      'vw-pop-scale': '1.3',
+      'vw-pop-duration': '100ms',
+      'vw-focus-ring': '3px solid rgb(var(--v-shadow-color))',
+      'vw-focus-offset': '3px',
+      'vw-theme-transition': '200ms',
+
+      // A structural beam, and the dot is a square like everything else.
+      'vw-timeline-line': 'rgb(var(--v-shadow-color))',
+      'vw-timeline-line-width': '4px',
+      'vw-radius-dot': '0px',
+      'vw-radius-avatar': '0px',
     },
   },
   defaults: [

package/src/themes/calm.ts

@@ -17,7 +17,7 @@ export const calm = defineTheme({
     description: 'Low contrast, desaturated naturals and a lot of air. Nothing competes for attention.',
     dark: false,
     iconStyle: 'outline',
-    swatch: ['#FAFAF7', '#FFFFFF', '#6B7A6B', '#A89684'],
+    swatch: ['#FAFAF7', '#FFFFFF', '#6B7A6B', '#86725F'],
     fonts: ['Inter'],
   },
   theme: {
@@ -31,7 +31,7 @@ export const calm = defineTheme({
       'on-surface-variant': '#FAFAF7',
       primary: '#6B7A6B',
       'primary-darken-1': '#556355',
-      secondary: '#A89684',
+      secondary: '#86725F',
       'secondary-darken-1': '#8B7A69',
       error: '#A86B63',
       info: '#6B7A8A',
@@ -39,8 +39,19 @@ export const calm = defineTheme({
       warning: '#A89464',
       'on-surface': '#3A3A36',
       'on-background': '#3A3A36',
+      // 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.8:1 → 5.5:1, info 4.4:1 → 4.8:1, warning 3:1 → 7.1:1, error 4.2:1 → 4.9:1.
+      'on-success': '#000000',
+      'on-info': '#000000',
+      'on-warning': '#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':
+        'var(--v-vw-border-width) solid rgba(var(--v-border-color), var(--v-border-opacity))',
       'border-color': '#3A3A36',
       'border-opacity': 0.09,
       'high-emphasis-opacity': 0.78,
@@ -57,6 +68,18 @@ export const calm = defineTheme({
       'vw-heading-weight': '500',
       'vw-heading-tracking': '-0.01em',
       'vw-tab-slider-height': '2px',
+
+      // Slow enough that nothing ever catches the eye.
+      'vw-motion-duration': '320ms',
+      'vw-press-scale': '0.99',
+      'vw-hover-lift': '2px',
+      'vw-pop-scale': '1.08',
+      'vw-pop-duration': '280ms',
+      'vw-theme-transition': '560ms',
+
+      // Barely there, like everything else in this theme.
+      'vw-timeline-line': 'rgba(var(--v-border-color), 0.5)',
+      'vw-timeline-line-width': '1px',
     },
   },
   defaults: [