vuetiwatch 0.2.0 → 0.2.2

package/src/themes/brutalist.ts

@@ -1,4 +1,4 @@
-import { bars, fields, icons } from '../util/defaults.js'
+import { bars, fields, icons, overlays, ripple } from '../util/defaults.js'
 import { defineTheme } from '../util/defineTheme.js'
 
 /**
@@ -78,10 +78,41 @@ export const brutalist = defineTheme({
       '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)',
+      /**
+       * Nothing eases and nothing tweens: a state change is the frame it
+       * happens in.
+       *
+       * A stepped curve was the first attempt at saying that, and it says
+       * the opposite. Two discrete jumps across 80ms read as a dropped
+       * frame rather than as a decision, and on anything that takes longer
+       * to arrive — a tooltip, a dialog the size of the screen — the hold
+       * between the steps looks like the page has hung. Zero is the only
+       * duration that is actually instant.
+       *
+       * `linear` is what is left for the two things here that are
+       * animations rather than transitions — the icon pop and the theme
+       * wipe — where a curve would be the theme describing a weight it
+       * does not have.
+       *
+       * The press is the theme's own slide into its shadow, so the shared
+       * squash stays out of its way.
+       */
+      'vw-motion-duration': '0ms',
+      'vw-motion-ease': 'linear',
+      /**
+       * The scrim cannot follow it, though, and this is the one place the
+       * theme's own rule is wrong. A panel appearing in a single frame is
+       * decisive; a whole screen going dark in a single frame is a flash,
+       * and the eye reads a flash as a fault rather than as a choice. So
+       * the panel keeps its zero and the dimming gets a beat of its own —
+       * still linear, still short enough that nothing is waited for.
+       *
+       * Left at Vuetify's own 300ms the mismatch was the other way round:
+       * the panel was there and the room was still darkening a third of a
+       * second later.
+       */
+      'vw-overlay-duration': '0ms',
+      'vw-scrim-duration': '120ms',
       'vw-press-scale': '1',
       'vw-pop-scale': '1.3',
       'vw-pop-duration': '100ms',
@@ -89,6 +120,26 @@ export const brutalist = defineTheme({
       'vw-focus-offset': '3px',
       'vw-theme-transition': '200ms',
 
+      // Hard states to match the hard edges: a pressed control is a
+      // different colour, not a slightly darker one.
+      'focus-opacity': 0.2,
+      'activated-opacity': 0.3,
+      'disabled-opacity': 0.5,
+      /**
+       * A tab is set at body size rather than shrunk to Vuetify's label
+       * size — nothing in this theme whispers.
+       */
+      'vw-tab-size': '1rem',
+
+      /**
+       * Lime is this theme's active colour — it already marks the table
+       * heads, the current page and the slider — so a selected run of text
+       * joins them. Solid rather than a tint: nothing here is translucent,
+       * and the ink on top is stated rather than left to the browser.
+       */
+      'vw-selection-fill': 'rgb(var(--v-theme-secondary))',
+      'vw-selection-color': 'rgb(var(--v-shadow-color))',
+
       // 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',
@@ -128,5 +179,14 @@ export const brutalist = defineTheme({
       sortDesc: 'mdi-menu-down',
       close: 'mdi-close-thick',
     }),
+    /**
+     * No transition at all, which is the only honest answer here. Every
+     * other theme animates a surface arriving from somewhere; this one has
+     * no depth for it to arrive through, so the panel is simply there —
+     * one frame without it, the next frame with it.
+     */
+    overlays({ dialog: false, menu: false, tooltip: false }),
+    // A ripple is a soft, round, spreading thing.
+    ripple(false),
   ],
 })

package/src/themes/calm.ts

@@ -1,4 +1,4 @@
-import { bars, controls, fields, icons, tables } from '../util/defaults.js'
+import { bars, controls, fields, icons, overlays, ripple, tables } from '../util/defaults.js'
 import { defineTheme } from '../util/defineTheme.js'
 
 /**
@@ -77,6 +77,18 @@ export const calm = defineTheme({
       'vw-pop-duration': '280ms',
       'vw-theme-transition': '560ms',
 
+      // Slow here too, so an overlay drifts in rather than appearing.
+      'vw-overlay-duration': '320ms',
+      'vw-overlay-exit': '240ms',
+      /**
+       * Every state is a shade quieter than Vuetify draws it. The theme
+       * spends colour only on what you can act on, and a wash under
+       * something already selected is not one of those things.
+       */
+      'focus-opacity': 0.1,
+      'activated-opacity': 0.06,
+      'disabled-opacity': 0.35,
+
       // Barely there, like everything else in this theme.
       'vw-timeline-line': 'rgba(var(--v-border-color), 0.5)',
       'vw-timeline-line-width': '1px',
@@ -107,5 +119,15 @@ export const calm = defineTheme({
       ratingEmpty: 'mdi-circle-outline',
       close: 'mdi-close',
     }),
+    // Nothing arrives from a direction, and nothing scales: the surface
+    // is simply there a moment later than you asked.
+    overlays({
+      dialog: 'fade-transition',
+      menu: 'fade-transition',
+      tooltip: 'fade-transition',
+    }),
+    // The discipline is subtractive, and a ripple is a fill spreading
+    // across the one part of the screen you are already looking at.
+    ripple(false),
   ],
 })

package/src/themes/candy.ts

@@ -1,4 +1,4 @@
-import { bars, controls, fields, icons } from '../util/defaults.js'
+import { bars, controls, fields, icons, overlays } from '../util/defaults.js'
 import { defineTheme } from '../util/defineTheme.js'
 
 /**
@@ -101,6 +101,20 @@ export const candy = defineTheme({
       'vw-focus-offset': '3px',
       'vw-theme-transition': '480ms',
 
+      /**
+       * The spring above rides along through `--v-vw-motion-ease`, so an
+       * overlay overshoots and settles like every other shape here. The
+       * exit skips the spring by being too short to overshoot in.
+       */
+      'vw-overlay-duration': '260ms',
+      'vw-overlay-exit': '160ms',
+      // Loud, like the rest of it: a pressed sweet goes visibly darker.
+      'focus-opacity': 0.2,
+      'activated-opacity': 0.18,
+      'disabled-opacity': 0.4,
+      // A big letter in a big circle.
+      'vw-avatar-ratio': '0.46',
+
       // A fat ribbon with rounded ends — see the stylesheet.
       'vw-timeline-line': 'rgba(var(--v-theme-primary), 0.3)',
       'vw-timeline-line-width': '6px',
@@ -140,5 +154,14 @@ export const candy = defineTheme({
       prev: 'mdi-chevron-left',
       breadcrumbDivider: '•',
     }),
+    /**
+     * The dialog comes up from the bottom, the way every app a child has
+     * used opens a sheet, and the small surfaces pop rather than fade.
+     */
+    overlays({
+      dialog: 'dialog-bottom-transition',
+      menu: 'scale-transition',
+      tooltip: 'scale-transition',
+    }),
   ],
 })

package/src/themes/clay.ts

@@ -1,4 +1,4 @@
-import { bars, fields, icons } from '../util/defaults.js'
+import { bars, fields, icons, overlays } from '../util/defaults.js'
 import { defineTheme } from '../util/defineTheme.js'
 
 /**
@@ -75,6 +75,13 @@ export const clay = defineTheme({
       'vw-pop-scale': '1.25',
       'vw-pop-duration': '280ms',
 
+      // Soft mass takes a moment to arrive, as it takes one to squash.
+      'vw-overlay-duration': '220ms',
+      'vw-overlay-exit': '160ms',
+      // The shapes are bright and the fills are generous; the states match.
+      'focus-opacity': 0.16,
+      'activated-opacity': 0.16,
+
       // 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',
@@ -100,5 +107,12 @@ export const clay = defineTheme({
       ratingEmpty: 'mdi-star-outline',
       close: 'mdi-close-circle',
     }),
+    // Inflated, so it inflates: every floating shape swells into place
+    // rather than sliding or fading.
+    overlays({
+      dialog: 'scale-transition',
+      menu: 'scale-transition',
+      tooltip: 'scale-transition',
+    }),
   ],
 })

package/src/themes/darkGlass.ts

@@ -1,4 +1,4 @@
-import { bars, fields, icons } from '../util/defaults.js'
+import { bars, fields, icons, overlays } from '../util/defaults.js'
 import { defineTheme } from '../util/defineTheme.js'
 
 /**
@@ -71,6 +71,13 @@ export const darkGlass = defineTheme({
       'vw-pop-scale': '1.18',
       'vw-pop-duration': '240ms',
 
+      // Glass slides, and it takes its time doing it.
+      'vw-overlay-duration': '260ms',
+      'vw-overlay-exit': '200ms',
+      // The ground is dark enough that a state has to be lit to register.
+      'focus-opacity': 0.16,
+      'activated-opacity': 0.14,
+
       // Violet through the glass.
       'vw-timeline-line': 'rgba(var(--v-theme-primary), 0.45)',
       'vw-timeline-line-width': '2px',
@@ -97,5 +104,11 @@ export const darkGlass = defineTheme({
       ratingFull: 'mdi-star',
       ratingEmpty: 'mdi-star-outline',
     }),
+    // Sheets slide; the tip, which is not a sheet, fades.
+    overlays({
+      dialog: 'slide-y-transition',
+      menu: 'slide-y-transition',
+      tooltip: 'fade-transition',
+    }),
   ],
 })

package/src/themes/graphite.ts

@@ -1,4 +1,4 @@
-import { bars, controls, fields, icons, tables } from '../util/defaults.js'
+import { bars, controls, fields, icons, overlays, ripple, tables } from '../util/defaults.js'
 import { defineTheme } from '../util/defineTheme.js'
 
 /**
@@ -95,6 +95,35 @@ export const graphite = defineTheme({
       'vw-focus-ring': '1px solid rgba(var(--v-theme-primary), 0.85)',
       'vw-theme-transition': '260ms',
 
+      // The overlays repaint at the same 90ms as everything else; the
+      // linear easing above reaches them through `--v-vw-motion-ease`.
+      'vw-overlay-duration': '90ms',
+      'vw-overlay-exit': '70ms',
+      /**
+       * `primary` here is a near-white, so a tonal fill drawn at Vuetify's
+       * 0.12 is a pale grey on a near-black ground — the one place this
+       * palette needs more of the accent rather than less.
+       */
+      'activated-opacity': 0.14,
+      'focus-opacity': 0.18,
+      'disabled-opacity': 0.4,
+      /**
+       * The theme ships a mono stack for exactly this, and a developer tool
+       * shows more code than prose. Both take the raised surface rather
+       * than Vuetify's stock grey.
+       */
+      'theme-code': '#16191D',
+      'theme-on-code': '#E6E9ED',
+      'theme-kbd': '#1B1E23',
+      'theme-on-kbd': '#E6E9ED',
+
+      /**
+       * `primary` is a near-white here, and a wash of it over near-black
+       * text is a grey haze. The indigo held in `secondary` is what every
+       * editor this theme is modelled on selects with.
+       */
+      'vw-selection-fill': 'rgba(var(--v-theme-secondary), 0.4)',
+
       // Hairline and squared off, like every other edge here.
       'vw-timeline-line': 'rgba(var(--v-border-color), 0.35)',
       'vw-timeline-line-width': '1px',
@@ -104,17 +133,15 @@ export const graphite = defineTheme({
   },
   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 },
+      // The ripple is off through `ripple(false)` below, which reaches the
+      // tick boxes this list used to miss.
+      VBtn: { variant: 'flat' },
       VCard: { variant: 'outlined' },
       VAlert: { variant: 'outlined', density: 'compact' },
-      VChip: { variant: 'outlined', size: 'small', ripple: false },
-      VListItem: { ripple: false },
-      VTab: { ripple: false },
+      VChip: { variant: 'outlined', size: 'small' },
       // Flush stacked rows rather than floating panels with gaps.
       VExpansionPanels: { variant: 'accordion' },
       VNavigationDrawer: { border: 'e' },
@@ -146,5 +173,15 @@ export const graphite = defineTheme({
       close: 'mdi-close',
       breadcrumbDivider: '/',
     }),
+    /**
+     * Nothing here has weight, so nothing arrives from anywhere: a panel is
+     * repainted rather than opened. Linear, at the same 90ms as the rest.
+     */
+    overlays({
+      dialog: 'fade-transition',
+      menu: 'fade-transition',
+      tooltip: 'fade-transition',
+    }),
+    ripple(false),
   ],
 })

package/src/themes/liquidGlass.ts

@@ -1,4 +1,4 @@
-import { bars, controls, fields, icons, tables } from '../util/defaults.js'
+import { bars, controls, fields, icons, overlays, tables } from '../util/defaults.js'
 import { defineTheme } from '../util/defineTheme.js'
 
 /**
@@ -48,10 +48,20 @@ export const liquidGlass = defineTheme({
       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',
+      /**
+       * 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 → 4.8:1.
+       *
+       * `info` is deliberately not in this list. It is the same `#0071ED`
+       * as `primary`, and forcing a label on one of them and not the other
+       * put two different inks on one colour in one theme. It is also the
+       * one hue here that sits almost exactly on the crossover: black and
+       * white both measure 4.58:1, so nothing is bought by stating either,
+       * while APCA separates them 79 to 33 in white's favour. Vuetify's own
+       * pick is white, which is what the platform this theme follows puts
+       * on system blue, so the theme says nothing and lets it.
+       */
       'on-error': '#1C1C1E',
       'on-success': '#06140A',
       'on-warning': '#1A1004',
@@ -100,6 +110,23 @@ export const liquidGlass = defineTheme({
       'vw-pop-duration': '300ms',
       'vw-theme-transition': '520ms',
 
+      /**
+       * The iOS curve above carries overlays too, through
+       * `--v-vw-motion-ease`: fast out of the gate, then a long settle.
+       */
+      'vw-overlay-duration': '320ms',
+      'vw-overlay-exit': '220ms',
+      /**
+       * The scrim, and with it the pane's own fade — the stylesheet reads
+       * this same number for the opacity leg of the entrance. Short, so the
+       * frost is alight while the pane is still arriving; see the note over
+       * the rule for why the two have to agree.
+       */
+      'vw-scrim-duration': '120ms',
+      // Through glass a state is a change of light, not a block of colour.
+      'focus-opacity': 0.12,
+      'activated-opacity': 0.12,
+
       // 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',
@@ -134,5 +161,15 @@ export const liquidGlass = defineTheme({
       sortAsc: 'mdi-chevron-up',
       sortDesc: 'mdi-chevron-down',
     }),
+    /**
+     * A sheet of glass scales up from the control that summoned it, which
+     * is what the platform this theme follows does. The tooltip fades:
+     * it is one word, and a word that grows is a word you re-read.
+     */
+    overlays({
+      dialog: 'scale-transition',
+      menu: 'scale-transition',
+      tooltip: 'fade-transition',
+    }),
   ],
 })

package/src/themes/lux.ts

@@ -1,4 +1,4 @@
-import { bars, controls, fields, icons, tables } from '../util/defaults.js'
+import { bars, controls, fields, icons, overlays, ripple, tables } from '../util/defaults.js'
 import { defineTheme } from '../util/defineTheme.js'
 
 /**
@@ -33,13 +33,24 @@ export const lux = defineTheme({
       error: '#96322A',
       info: '#3D5A73',
       success: '#4A6B4F',
-      warning: '#A8791E',
+      /**
+       * Deepened rather than re-inked. Vuetify picks the label colour by
+       * APCA and settles for about 3:1 on WCAG, which is the bar for large
+       * text rather than for a button label — so this theme states `on-*`
+       * wherever the automatic pick falls short.
+       *
+       * Warning is the case where doing that made things worse. The ochre
+       * sat where WCAG wanted black and APCA wanted white by a wide margin
+       * (73 to 37), and the forced dark label did not even clear 4.5:1
+       * (4.49:1). Taking 9 per cent of lightness out of the hue satisfies both:
+       * white now reads 4.56:1 on the filled button, APCA 79, and the colour
+       * as text on the surface goes from 3.88:1 — under the bar it was
+       * being held to elsewhere — to 4.56:1. The label is left to the
+       * automatic pick, which is white.
+       */
+      warning: '#996E1B',
       '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.
@@ -77,6 +88,31 @@ export const lux = defineTheme({
       'vw-focus-ring': '1px solid rgb(var(--v-theme-primary))',
       'vw-theme-transition': '520ms',
 
+      // The same unhurried curve the rest of the theme moves on.
+      'vw-overlay-duration': '240ms',
+      'vw-overlay-exit': '180ms',
+      // Restraint applies to states too: an outline and a hairline of
+      // wash, never a block of colour.
+      'focus-opacity': 0.12,
+      'activated-opacity': 0.08,
+      'disabled-opacity': 0.35,
+      /**
+       * A tab is a label in this theme, set at the same size as the caps on
+       * the buttons rather than at Vuetify's body-sized default — the wide
+       * tracking below needs the smaller size to stay a line and not a
+       * heading.
+       */
+      'vw-tab-size': '0.75rem',
+      /**
+       * Initials set small inside a generous circle: the air around a mark
+       * is the whole point of the register this theme is written in.
+       */
+      'vw-avatar-ratio': '0.34',
+
+      // Ink again in `primary`, so the highlight is the theme's gold —
+      // the one flourish it allows itself, spent where a reader drags.
+      'vw-selection-fill': 'rgba(var(--v-theme-secondary), 0.25)',
+
       // A gold hairline; the dot stays a circle.
       'vw-timeline-line': 'rgba(var(--v-theme-primary), 0.55)',
       'vw-timeline-line-width': '1px',
@@ -109,5 +145,13 @@ export const lux = defineTheme({
       // An em dash rather than a slash — the one flourish the theme allows.
       breadcrumbDivider: '—',
     }),
+    // Expensive things do not bounce. They fade, slowly, and stop.
+    overlays({
+      dialog: 'fade-transition',
+      menu: 'fade-transition',
+      tooltip: 'fade-transition',
+    }),
+    // Material's ink blot is the loudest thing this theme could do.
+    ripple(false),
   ],
 })

package/src/themes/morph.ts

@@ -1,4 +1,4 @@
-import { bars, fields, icons } from '../util/defaults.js'
+import { bars, fields, icons, overlays } from '../util/defaults.js'
 import { defineTheme } from '../util/defineTheme.js'
 
 /**
@@ -75,6 +75,17 @@ export const morph = defineTheme({
       'vw-pop-scale': '1.15',
       'vw-pop-duration': '220ms',
 
+      // Quiet, like the relief itself.
+      'vw-overlay-duration': '180ms',
+      'vw-overlay-exit': '140ms',
+      /**
+       * The relief carries the whole theme, and a wash of colour on top of
+       * it flattens the light it is built from — so the states stay under
+       * what Vuetify draws.
+       */
+      'focus-opacity': 0.12,
+      'activated-opacity': 0.1,
+
       // The same groove the fields are, turned on its side.
       'vw-timeline-line': 'rgb(var(--v-theme-background))',
       'vw-timeline-line-width': '8px',
@@ -100,5 +111,15 @@ export const morph = defineTheme({
       ratingFull: 'mdi-circle',
       ratingEmpty: 'mdi-circle-outline',
     }),
+    /**
+     * A dialog is pressed out of the ground like everything else, so it
+     * grows into place. Menus and tips fade instead: they are small enough
+     * that scaling them reads as a twitch rather than as relief.
+     */
+    overlays({
+      dialog: 'scale-transition',
+      menu: 'fade-transition',
+      tooltip: 'fade-transition',
+    }),
   ],
 })

package/src/themes/neon.ts

@@ -1,4 +1,4 @@
-import { bars, fields, icons, surfaces, tables } from '../util/defaults.js'
+import { bars, fields, icons, overlays, ripple, surfaces, tables } from '../util/defaults.js'
 import { defineTheme } from '../util/defineTheme.js'
 
 /**
@@ -82,6 +82,33 @@ export const neon = defineTheme({
       'vw-focus-ring': '2px solid rgb(var(--v-theme-secondary))',
       'vw-theme-transition': '180ms',
 
+      // A terminal repaints; the linear easing above comes along through
+      // `--v-vw-motion-ease`, so nothing here accelerates.
+      'vw-overlay-duration': '110ms',
+      'vw-overlay-exit': '80ms',
+      /**
+       * Phosphor, not ink: a lit state on this ground has to be visibly
+       * lit, and Vuetify's 0.12 disappears into the black.
+       */
+      'focus-opacity': 0.24,
+      'activated-opacity': 0.25,
+      // The one theme where a code block is the native register.
+      'theme-code': '#04121A',
+      'theme-on-code': '#00F0FF',
+      'theme-kbd': '#04121A',
+      'theme-on-kbd': '#00F0FF',
+      // A tab is a label on a terminal chrome, set with the same wide
+      // tracking the buttons use and a size that keeps it on one line.
+      'vw-tab-size': '0.8125rem',
+
+      /**
+       * A terminal selects with a solid block and inverts the glyphs under
+       * it, which is also the only way cyan text stays readable once a
+       * cyan tint is laid over it.
+       */
+      'vw-selection-fill': 'rgb(var(--v-theme-primary))',
+      'vw-selection-color': 'rgb(var(--v-theme-background))',
+
       // A lit filament; the glow is in the stylesheet.
       'vw-timeline-line': 'rgb(var(--v-theme-secondary))',
       'vw-timeline-line-width': '2px',
@@ -117,5 +144,14 @@ export const neon = defineTheme({
       sortDesc: 'mdi-chevron-down',
       close: 'mdi-close',
     }),
+    // A screen repaints: the panel lights up where it stands rather than
+    // travelling to get there.
+    overlays({
+      dialog: 'fade-transition',
+      menu: 'fade-transition',
+      tooltip: 'fade-transition',
+    }),
+    // Nothing in a terminal ripples.
+    ripple(false),
   ],
 })

package/src/themes/paper.ts

@@ -1,4 +1,4 @@
-import { bars, fields, icons, surfaces } from '../util/defaults.js'
+import { bars, fields, icons, overlays, ripple, surfaces } from '../util/defaults.js'
 import { defineTheme } from '../util/defineTheme.js'
 
 /**
@@ -70,6 +70,33 @@ export const paper = defineTheme({
       'vw-pop-scale': '1.1',
       'vw-pop-duration': '180ms',
 
+      /**
+       * Overlays keep the page's own speed. Vuetify's 300ms fade belongs to
+       * a theme with depth to travel through; nothing here has any, so a
+       * panel arrives the way a printed page is turned over — at once.
+       */
+      'vw-overlay-duration': '140ms',
+      'vw-overlay-exit': '110ms',
+      // Ink is either on the paper or it is not, so the states are set by
+      // how much ink rather than by how much glow.
+      'focus-opacity': 0.14,
+      'activated-opacity': 0.1,
+      'disabled-opacity': 0.4,
+      // Set in type rather than in a grey box: a code span takes the same
+      // tinted stock the panels do.
+      'theme-code': '#F1EEE4',
+      'theme-on-code': '#14110E',
+      'theme-kbd': '#F1EEE4',
+      'theme-on-kbd': '#14110E',
+
+      /**
+       * `primary` here is ink, and a quarter-strength black is a smudge
+       * rather than a highlight. The selection takes the theme's second
+       * colour instead — a marker drawn over the type, which is what
+       * highlighting on paper actually looks like.
+       */
+      'vw-selection-fill': 'rgba(var(--v-theme-secondary), 0.28)',
+
       // A line of ink dots, the way a printed rule breaks up.
       'vw-timeline-line': 'repeating-linear-gradient(to bottom, rgba(var(--v-border-color), 0.55) 0 2px, transparent 2px 6px)',
       'vw-timeline-line-width': '1px',
@@ -103,5 +130,17 @@ export const paper = defineTheme({
       sortDesc: 'mdi-arrow-down',
       close: 'mdi-close',
     }),
+    /**
+     * Flat, and quick about it. A sheet of paper does not scale up out of
+     * the page it was lying on — it is either shown or it is not.
+     */
+    overlays({
+      dialog: 'fade-transition',
+      menu: 'fade-transition',
+      tooltip: 'fade-transition',
+    }),
+    // A ripple is a Material animation about a surface with weight, and
+    // this theme prints rather than raises.
+    ripple(false),
   ],
 })

package/src/themes/sketchy.ts

@@ -1,4 +1,4 @@
-import { bars, fields, icons, surfaces } from '../util/defaults.js'
+import { bars, fields, icons, overlays, ripple, surfaces } from '../util/defaults.js'
 import { defineTheme } from '../util/defineTheme.js'
 
 /**
@@ -77,6 +77,26 @@ export const sketchy = defineTheme({
       'vw-pop-scale': '1.25',
       'vw-pop-duration': '200ms',
 
+      /**
+       * Overlays opt out of the stepped easing above.
+       *
+       * Two frames read as a drawn line on a control the size of a button;
+       * on a panel the size of the screen the hold between them reads as a
+       * dropped frame, which is the same thing that made `brutalist` look
+       * like it had hung. The steps stay where they are small enough to be
+       * charm — the press, the hover, the icon pop.
+       */
+      'vw-overlay-duration': '140ms',
+      'vw-overlay-exit': '100ms',
+      'vw-overlay-ease': 'ease-out',
+      // Marker on paper: a state is a scribble over the shape, not a tint.
+      'focus-opacity': 0.2,
+      'activated-opacity': 0.15,
+
+      // Pencil in `primary`, so the highlighter is the second colour and
+      // drawn heavier than elsewhere — a marker, not a tint.
+      'vw-selection-fill': 'rgba(var(--v-theme-secondary), 0.35)',
+
       // Dashes of uneven length, as if drawn in one pass.
       'vw-timeline-line': 'repeating-linear-gradient(to bottom, rgba(var(--v-border-color), 0.7) 0 7px, transparent 7px 11px, rgba(var(--v-border-color), 0.7) 11px 15px, transparent 15px 23px)',
       'vw-timeline-line-width': '2px',
@@ -104,5 +124,13 @@ export const sketchy = defineTheme({
       ratingEmpty: 'mdi-star-outline',
       close: 'mdi-close-thick',
     }),
+    // Two frames, like everything else here: the panel is drawn in.
+    overlays({
+      dialog: 'scale-transition',
+      menu: 'fade-transition',
+      tooltip: 'fade-transition',
+    }),
+    // Nothing in a pencil mock-up ripples.
+    ripple(false),
   ],
 })