vuetiwatch 0.2.0 → 0.2.2

package/dist/util/defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../src/util/defaults.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../src/util/defaults.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuetiwatch",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "description": "Free, plug-and-play themes for Vuetify 4 — a Bootswatch for Vuetify",
   "license": "MIT",
@@ -54,6 +54,7 @@
     "clean": "node --eval \"fs.rmSync('dist', { recursive: true, force: true })\"",
     "dev": "tsc --watch",
     "typecheck": "tsc --noEmit",
+    "audit": "npm run build:types && node scripts/audit-contrast.mjs",
     "prepack": "npm run build"
   },
   "peerDependencies": {

package/src/index.ts

@@ -27,12 +27,12 @@ export {
 } from './registry.js'
 export { createVuetiwatch, useVuetiwatch } from './plugin.js'
 export { defineTheme } from './util/defineTheme.js'
-export { bars, combine, controls, fields, icons, surfaces, tables } from './util/defaults.js'
+export { bars, combine, controls, fields, icons, overlays, ripple, surfaces, tables } from './util/defaults.js'
 
 export type { Vuetiwatch, VuetiwatchOptions } from './plugin.js'
 export type { VuetiwatchThemeName } from './registry.js'
 export type { DefineThemeOptions } from './util/defineTheme.js'
-export type { VuetiwatchIcons } from './util/defaults.js'
+export type { VuetiwatchIcons, VuetiwatchOverlays } from './util/defaults.js'
 export type {
   VuetiwatchAccent,
   VuetiwatchDefaults,

package/src/plugin.ts

@@ -1,4 +1,4 @@
-import { computed, inject, ref, watch } from 'vue'
+import { computed, inject, ref, toRaw, watch } from 'vue'
 import type { App, ComputedRef, Plugin, Ref } from 'vue'
 import type { VuetiwatchAccent, VuetiwatchDefaults, VuetiwatchTheme } from './types.js'
 import { combine } from './util/defaults.js'
@@ -198,8 +198,25 @@ export function createVuetiwatch (
       let applied: VuetiwatchDefaults | undefined
 
       const defaultsFor = (name: string) => {
-        if (applied && instance.defaults.value !== applied) {
-          userDefaults = instance.defaults.value ?? {}
+        /**
+         * The comparison goes through `toRaw`, because Vuetify holds
+         * `defaults` in a deep `ref` — "if an object is assigned as a ref's
+         * value, the object is made deeply reactive" — so reading it back
+         * hands out a proxy of what was written, never the object itself.
+         * Comparing the two directly can only ever say "not ours", which is
+         * the opposite of what the check asks: every theme change would fold
+         * the outgoing theme's defaults into the app's own, and they would
+         * never come back off. A theme with none of its own, `classic` above
+         * all, then keeps whatever was on screen before it.
+         *
+         * Only the comparison is unwrapped. Vue asks callers not to hold a
+         * persistent reference to a raw object, so what is kept is the proxy
+         * Vuetify handed out — `mergeDeep` only ever reads it.
+         */
+        const live = instance.defaults.value
+
+        if (applied && toRaw(live) !== applied) {
+          userDefaults = live ?? {}
         }
 
         const themeDefaults = defaultsByName.get(name)

package/src/styles/core.css

@@ -249,8 +249,6 @@
     .v-field:not([class*='rounded-']),
     .v-list-item:not([class*='rounded-']),
     .v-snackbar__wrapper,
-    .v-menu > .v-overlay__content,
-    .v-tooltip > .v-overlay__content,
     .v-overlay__content > :is(.v-list, .v-sheet)
   ) {
     border-radius: var(--v-vw-radius, 4px);
@@ -316,6 +314,34 @@
     background-color: rgb(var(--v-theme-surface));
   }
 
+  /**
+   * A tonal card tints its ground, not the things standing on it.
+   *
+   * Vuetify paints that tint with `.v-card__underlay`, positioned and left
+   * at `z-index: auto` — which puts it in the positioned layer, above every
+   * unpositioned child of the card. Its own `.v-card__content` wrapper is
+   * `position: relative` and so escapes, but a card is only given that
+   * wrapper for certain slots; content passed straight to the default slot
+   * gets none, and is painted over.
+   *
+   * What that costs is the whole point of the variant. A white field on a
+   * tonal card came out washed by `--v-activated-opacity` and read as
+   * disabled rather than as somewhere to type, and every label in the card
+   * lost the same fraction of its contrast — the stronger a theme sets that
+   * opacity, the more it loses.
+   *
+   * The card already establishes a stacking context of its own, so a
+   * negative index puts the tint under the content and no further: it stays
+   * inside the card and above the card's own background. Only the card is
+   * corrected here. The same shape appears on buttons, chips and avatars,
+   * where the tint is the entire visible surface rather than a ground —
+   * pushed back there, it disappears behind a transparent control and takes
+   * the variant with it.
+   */
+  & .v-card--variant-tonal > .v-card__underlay {
+    z-index: -1;
+  }
+
   /* --------------------------------------------------- nested surfaces */
 
   /**
@@ -406,12 +432,110 @@
    * theme built with `defineTheme()` gets the same knobs for free.
    */
 
-  /* Every floating surface, so a tooltip is not left behind by a menu. */
+  /**
+   * Every floating surface, so a tooltip is not left behind by a menu.
+   *
+   * Written twice because an overlay is not where it looks like it is.
+   * Vuetify teleports one to `.v-overlay-container`, which hangs off
+   * `<body>` rather than off the application root, and stamps the theme
+   * class onto the overlay itself — so the theme class and `.v-dialog` land
+   * on one element and a descendant combinator has nothing to descend from.
+   * The compound form is what matches a teleported surface; the descendant
+   * one still covers a menu rendered in place with `attach`.
+   */
+  &:is(.v-menu, .v-dialog, .v-tooltip) > .v-overlay__content,
   & :is(.v-menu, .v-dialog, .v-tooltip) > .v-overlay__content {
     border: var(--v-vw-overlay-border, none);
     box-shadow: var(--v-vw-overlay-shadow, revert-layer);
   }
 
+  /**
+   * And give it the shape it is being painted in.
+   *
+   * The treatment above lands on the content box, and so does a theme's own
+   * — the glass themes blur there, `brutalist` puts its offset block there.
+   * Vuetify leaves that box square while the card inside it is rounded, so
+   * every one of those decorations came out as a rectangle drawn around a
+   * rounded panel, most visibly wherever the corner radius is large.
+   *
+   * A menu and a tooltip are controls and take the control radius; a dialog
+   * is a card-sized surface and takes the panel one — the same expression
+   * the card itself resolves, so the two edges cannot drift apart. A
+   * fullscreen dialog is the exception: it has no corners because it has no
+   * edges.
+   */
+  &:is(.v-menu, .v-tooltip) > .v-overlay__content,
+  & :is(.v-menu, .v-tooltip) > .v-overlay__content {
+    border-radius: var(--v-vw-radius, 4px);
+  }
+
+  &.v-dialog:not(.v-dialog--fullscreen) > .v-overlay__content,
+  & .v-dialog:not(.v-dialog--fullscreen) > .v-overlay__content {
+    border-radius: var(--v-vw-radius-lg, var(--v-vw-radius, 4px));
+  }
+
+  /**
+   * And how fast it gets there.
+   *
+   * Which transition a surface uses is a prop — a theme names it through
+   * `overlays()` — but the timing of every one of them is baked into
+   * Vuetify's own stylesheet: a fade takes 300ms whether it belongs to a
+   * theme that settles slowly or to one that repaints instantly. Naming a
+   * transition without owning its clock only half moves it.
+   *
+   * The class is on the content element itself, whatever the transition is
+   * called, so one selector reaches all of them — and `revert-layer` hands
+   * the timing straight back to Vuetify for a theme that says nothing, so
+   * the two numbers stay opt-in.
+   *
+   * The scrim is timed from the same pair, because it is the other half of
+   * the same event and Vuetify gives no way to say so: it is hard-wired to
+   * a 300ms `fade-transition` with no prop to change it. Left alone, a
+   * theme that opens its panels in 90ms gets the panel and then, a third of
+   * a second later, the room going dark behind it — two things happening
+   * where the user did one.
+   *
+   * Leave falls through to enter, because a theme normally has one speed
+   * and stating it twice is how the two drift apart. A theme that wants the
+   * asymmetry Material describes — leave faster than enter — says so.
+   */
+  & :is(.v-overlay__content, .v-overlay__scrim):is(
+    [class*='-transition-enter-active'],
+    [class*='-transition-leave-active']
+  ) {
+    transition-timing-function: var(--v-vw-overlay-ease, var(--v-vw-motion-ease, revert-layer));
+  }
+
+  & .v-overlay__content[class*='-transition-enter-active'] {
+    transition-duration: var(--v-vw-overlay-duration, revert-layer);
+  }
+
+  & .v-overlay__content[class*='-transition-leave-active'] {
+    transition-duration: var(--v-vw-overlay-exit, var(--v-vw-overlay-duration, revert-layer));
+  }
+
+  /**
+   * The scrim follows the panel unless a theme separates them.
+   *
+   * Most of the time one number is right for both — they are two halves of
+   * one event, and a panel that arrives before the room darkens reads as
+   * two things happening. The exception is a theme whose panel does not
+   * travel at all: dimming the whole screen in a single frame is not
+   * decisive, it is a flash, and the eye reads it as a fault rather than as
+   * a choice. Such a theme gives the scrim a clock of its own and keeps its
+   * panel instant.
+   */
+  & .v-overlay__scrim[class*='-transition-enter-active'] {
+    transition-duration: var(--v-vw-scrim-duration, var(--v-vw-overlay-duration, revert-layer));
+  }
+
+  & .v-overlay__scrim[class*='-transition-leave-active'] {
+    transition-duration: var(
+      --v-vw-scrim-duration,
+      var(--v-vw-overlay-exit, var(--v-vw-overlay-duration, revert-layer))
+    );
+  }
+
   /**
    * A relief theme paints outside the shape it lifts, and a chip group is a
    * scroller: it clips to its content box, so the glow around the chips
@@ -750,6 +874,31 @@
     text-decoration: var(--v-vw-link-decoration, underline);
     text-underline-offset: 0.15em;
   }
+
+  /* ------------------------------------------------------------ selection */
+
+  /**
+   * Dragging across a paragraph is the one interaction every theme shares
+   * and none of them owned: the browser answers in its own blue, which
+   * belongs to no palette here and reads as a piece of the operating
+   * system showing through the page.
+   *
+   * The default is the theme's accent rather than a value each theme has
+   * to state, so it costs a theme nothing and follows the accent when
+   * `setAccent()` repaints one. `24%` is the strongest tint that still
+   * leaves body text at its own contrast on both light and dark grounds —
+   * a theme that wants a solid highlight sets the pair below and takes
+   * responsibility for the ink on top of it.
+   *
+   * `background-color` rather than the shorthand on purpose: `::selection`
+   * paints no image, so a theme whose surface is a gradient cannot express
+   * it here and would silently get nothing.
+   */
+  &::selection,
+  & ::selection {
+    background-color: var(--v-vw-selection-fill, rgba(var(--v-theme-primary), 0.24));
+    color: var(--v-vw-selection-color, inherit);
+  }
 }
 
 @keyframes vw-pop {

package/src/styles/themes/aurora.css

@@ -98,6 +98,7 @@
     box-shadow: 0 0 14px rgba(124, 92, 255, 0.5);
   }
 
+  &:is(.v-menu, .v-dialog) > .v-overlay__content,
   & :is(.v-menu, .v-dialog) > .v-overlay__content {
     box-shadow: 0 0 0 1px rgba(155, 140, 255, 0.16), 0 24px 64px rgba(0, 0, 0, 0.7);
   }

package/src/styles/themes/brutalist.css

@@ -26,6 +26,7 @@
     box-shadow: 5px 5px 0 rgb(var(--v-shadow-color));
   }
 
+  &:is(.v-menu, .v-dialog) > .v-overlay__content,
   & :is(.v-menu, .v-dialog) > .v-overlay__content {
     border: var(--v-vw-border-width) solid rgb(var(--v-shadow-color));
     box-shadow: 8px 8px 0 rgb(var(--v-shadow-color));

package/src/styles/themes/calm.css

@@ -7,6 +7,7 @@
     box-shadow: none;
   }
 
+  &:is(.v-menu, .v-dialog) > .v-overlay__content,
   & :is(.v-menu, .v-dialog) > .v-overlay__content {
     border: var(--v-vw-border-width) solid rgba(var(--v-border-color), 0.09);
     box-shadow: 0 16px 48px rgba(58, 58, 54, 0.06);

package/src/styles/themes/candy.css

@@ -70,13 +70,18 @@
    * Inputs are the one place the padding goes the other way: a dent pressed
    * into the cushion, shaded at the top where the surface falls in. Without
    * it `solo-filled` is the same white as the card it sits on.
+   *
+   * The tint goes on the field, not on `.v-field__overlay`, which is where
+   * it used to be and where it did nothing: Vuetify holds that overlay at
+   * `opacity: 0.04`, so a colour set there arrives at a twenty-fifth of its
+   * strength — the dent stayed white, and against a tonal card the field
+   * read as an inert slab rather than as somewhere to type. Leaving the
+   * overlay alone also leaves Vuetify's own hover and focus shading, which
+   * recomputes that opacity and would have fought a value forced into it.
    */
   & .v-field.v-field--variant-solo-filled {
-    box-shadow: inset 0 2px 5px rgba(var(--v-shadow-color), 0.16);
-  }
-
-  & .v-field.v-field--variant-solo-filled .v-field__overlay {
     background-color: rgb(var(--v-theme-surface-light));
+    box-shadow: inset 0 2px 5px rgba(var(--v-shadow-color), 0.16);
   }
 
   & :is(.v-switch__track, .v-slider-track__background) {

package/src/styles/themes/clay.css

@@ -63,6 +63,7 @@
       -2px -2px 6px rgba(255, 255, 255, 0.9);
   }
 
+  &:is(.v-menu, .v-dialog) > .v-overlay__content,
   & :is(.v-menu, .v-dialog) > .v-overlay__content {
     box-shadow: 12px 12px 40px rgba(var(--v-shadow-color), 0.24);
   }

package/src/styles/themes/darkGlass.css

@@ -28,6 +28,7 @@
       0 8px 32px rgba(var(--v-shadow-color), 0.45);
   }
 
+  &:is(.v-menu, .v-dialog) > .v-overlay__content,
   & :is(.v-menu, .v-dialog) > .v-overlay__content {
     backdrop-filter: blur(18px) saturate(160%);
     box-shadow: 0 16px 48px rgba(var(--v-shadow-color), 0.55);

package/src/styles/themes/liquidGlass.css

@@ -39,6 +39,7 @@
       0 10px 34px rgba(var(--v-shadow-color), 0.1);
   }
 
+  &:is(.v-menu, .v-dialog) > .v-overlay__content,
   & :is(.v-menu, .v-dialog) > .v-overlay__content {
     backdrop-filter: blur(30px) saturate(190%);
     box-shadow:
@@ -47,6 +48,46 @@
       0 18px 52px rgba(var(--v-shadow-color), 0.18);
   }
 
+  /**
+   * The pane arrives already frosted.
+   *
+   * Not a browser bug but the filter model working as specified: an element
+   * with `opacity` below 1 becomes a backdrop root, and a `backdrop-filter`
+   * inside one samples that root rather than the page. Every Vuetify
+   * transition fades, so for the length of the entrance the blur has
+   * nothing behind it to blur, and the frost only appears at the frame
+   * opacity reaches 1 — which reads as the effect loading late.
+   *
+   * So the entrance is split across two clocks rather than one. The scale
+   * keeps the theme's own length and carries the movement; opacity runs on
+   * `--vw-glass-lit`, short enough to end the backdrop root while the pane
+   * is still on its way in, so the frost is alight for almost all of the
+   * arrival.
+   *
+   * The scrim is put on that same short clock — that is what
+   * `--v-vw-scrim-duration` is, and core reads it — and this is the half
+   * that is easy to get wrong: cutting the pane's fade altogether was the first
+   * attempt, and it traded a late blur for something worse — a solid pane
+   * in frame one with the room still darkening behind it for another three
+   * hundred milliseconds, which reads as two events instead of one. What
+   * has to agree is when the pane is lit and when the room is dark. The
+   * scale finishing later is movement, and movement is allowed to settle.
+   *
+   * The start scale is gentler than the transition's own `scale(0)`, since
+   * a pane already visible at 120ms should not still be a dot. The exit
+   * keeps one clock: a blur going out early is not something anyone sees.
+   */
+  &:is(.v-menu, .v-dialog) > .v-overlay__content[class*='-transition-enter-from'],
+  & :is(.v-menu, .v-dialog) > .v-overlay__content[class*='-transition-enter-from'] {
+    transform: scale(0.92);
+  }
+
+  &:is(.v-menu, .v-dialog) > .v-overlay__content[class*='-transition-enter-active'],
+  & :is(.v-menu, .v-dialog) > .v-overlay__content[class*='-transition-enter-active'] {
+    transition-property: transform, opacity;
+    transition-duration: var(--v-vw-overlay-duration, 320ms), var(--v-vw-scrim-duration, 120ms);
+  }
+
   /**
    * A text field is a recess, not a raised pane — so it takes a fill rather
    * than glass, and gets no specular rim.

package/src/styles/themes/lux.css

@@ -20,6 +20,7 @@
     font-size: 0.75rem;
   }
 
+  &:is(.v-menu, .v-dialog) > .v-overlay__content,
   & :is(.v-menu, .v-dialog) > .v-overlay__content {
     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/neon.css

@@ -22,6 +22,7 @@
     box-shadow: 0 0 22px rgba(var(--v-theme-primary), 0.45);
   }
 
+  &:is(.v-menu, .v-dialog) > .v-overlay__content,
   & :is(.v-menu, .v-dialog) > .v-overlay__content {
     box-shadow:
       0 0 0 1px rgba(var(--v-theme-primary), 0.35),

package/src/styles/themes/slate.css

@@ -12,6 +12,7 @@
     font-weight: 600;
   }
 
+  &:is(.v-menu, .v-dialog) > .v-overlay__content,
   & :is(.v-menu, .v-dialog) > .v-overlay__content {
     box-shadow: 0 8px 24px rgba(var(--v-shadow-color), 0.16);
   }

package/src/styles/themes/soft.css

@@ -20,6 +20,7 @@
     box-shadow: 0 2px 8px rgba(var(--v-theme-primary), 0.24);
   }
 
+  &:is(.v-menu, .v-dialog) > .v-overlay__content,
   & :is(.v-menu, .v-dialog) > .v-overlay__content {
     box-shadow: 0 16px 48px rgba(var(--v-theme-primary), 0.18);
   }
@@ -28,9 +29,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.
+   *
+   * A cast shadow is not enough on its own, though, and the newsletter
+   * band is where that shows: on a tonal card the ground is already a
+   * tinted grey, a diffuse violet glow over it is invisible, and the field
+   * loses its only edge. What is left is a pale slab a few per cent from
+   * what surrounds it, which reads as disabled rather than as somewhere to
+   * type. The ring restores the boundary wherever the glow cannot — inset,
+   * so it costs no layout the way a real border would.
    */
   & .v-field.v-field--variant-solo-filled {
     box-shadow:
+      inset 0 0 0 1px rgba(var(--v-theme-primary), 0.3),
       0 1px 2px rgba(var(--v-theme-primary), 0.08),
       0 4px 12px rgba(var(--v-theme-primary), 0.06);
   }

package/src/themes/atlas.ts

@@ -1,5 +1,5 @@
 import type { VuetiwatchAccent, VuetiwatchDefaults } from '../types.js'
-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'
 
 /**
@@ -93,6 +93,42 @@ export const atlasVariables = {
   'vw-pop-scale': '1.08',
   'vw-pop-duration': '180ms',
   'vw-theme-transition': '320ms',
+  /**
+   * Overlays move at the same speed as everything else, which Vuetify's
+   * own 300ms fade does not. A menu opened two hundred times a day is the
+   * one surface where the difference between 140ms and 300ms stops being
+   * taste and becomes lag; the exit is quicker still, because a panel on
+   * its way out is already answered and only has to get off the screen.
+   */
+  'vw-overlay-duration': '140ms',
+  'vw-overlay-exit': '100ms',
+
+  /**
+   * Keyboard focus, four times the hover it has to be told apart from.
+   * Vuetify's 0.12 against a 0.04 hover is a difference you have to look
+   * for, and the person driving an admin panel from the keyboard is the
+   * one who cannot afford to.
+   */
+  'focus-opacity': 0.16,
+  /**
+   * The tonal fill under chips and alerts — this theme's whole status
+   * vocabulary, and it carries it at `size="small"` and `density="compact"`
+   * where Vuetify's 0.12 thins out to nearly nothing.
+   */
+  'activated-opacity': 0.14,
+  /**
+   * A form here disables half its fields depending on the other half, so
+   * "off" has to stay readable rather than dissolve. Vuetify's 0.38 puts a
+   * label under 3:1 on this ground; 0.45 keeps it legible and still
+   * unmistakably inactive.
+   */
+  'disabled-opacity': 0.45,
+  /**
+   * A table waiting on its data is an everyday sight here, not an edge
+   * case. Vuetify derives the block from `border-opacity`, which at 0.22
+   * draws a row of grey slabs heavier than the data they stand in for.
+   */
+  'vw-skeleton-opacity': '0.09',
 } as const
 
 /** Component defaults. Identical across the family. */
@@ -122,7 +158,36 @@ export const atlasDefaults: VuetiwatchDefaults[] = [
      * each button floating on its own elevation.
      */
     VBtnToggle: { variant: 'outlined', divided: true, density: 'compact' },
+    // Flush stacked rows rather than floating panels with gaps: a settings
+    // page is a list of settings, not a deck of cards.
+    VExpansionPanels: { variant: 'accordion' },
+    /**
+     * Half the controls on a console are icon-only, so a tooltip fires
+     * every time the cursor crosses the toolbar on its way somewhere else.
+     * A short wait means the tip appears when it was wanted and stays out
+     * of the way when it was not.
+     */
+    VTooltip: { openDelay: 400 },
   },
+  /**
+   * Nothing travels. A dropdown you open all day should not slide into
+   * place before it can be read, a dialog holds a form you start filling
+   * the moment it lands, and a tooltip that scales is a word changing size
+   * while you read it. Fading is the only motion here that does not ask to
+   * be waited out — and at 140ms it is barely motion at all.
+   */
+  overlays({
+    dialog: 'fade-transition',
+    menu: 'fade-transition',
+    tooltip: 'fade-transition',
+  }),
+  /**
+   * No ripple. It is an animation about the weight of a surface, and this
+   * theme draws none — but the real cost is that it puts 300ms of spreading
+   * ink between a click and the look of an answer, on the screen where that
+   * click gets repeated all day.
+   */
+  ripple(false),
   // 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' }),
@@ -204,6 +269,16 @@ export const atlas = defineTheme({
       '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)',
+      /**
+       * Ids, tokens and shortcuts are what an admin panel is full of, and
+       * Vuetify draws both on a grey that belongs to no theme. They take
+       * the same tinted band the table headers and filled rows use, so a
+       * key cap reads as part of the panel rather than pasted onto it.
+       */
+      'theme-code': '#F5F8FD',
+      'theme-on-code': '#0B101C',
+      'theme-kbd': '#F5F8FD',
+      'theme-on-kbd': '#0B101C',
       ...atlasVariables,
     },
   },

package/src/themes/atlasDark.ts

@@ -57,6 +57,11 @@ export const atlasDark = defineTheme({
       '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)',
+      // The same tinted band as the light variant, in this ground's register.
+      'theme-code': '#151E35',
+      'theme-on-code': '#EEF2F9',
+      'theme-kbd': '#151E35',
+      'theme-on-kbd': '#EEF2F9',
       ...atlasVariables,
     },
   },

package/src/themes/atlasSepia.ts

@@ -53,6 +53,11 @@ export const atlasSepia = defineTheme({
       '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)',
+      // The same tinted band as the light variant, in the warm register.
+      'theme-code': '#F4EEE3',
+      'theme-on-code': '#241E16',
+      'theme-kbd': '#F4EEE3',
+      'theme-on-kbd': '#241E16',
       ...atlasVariables,
     },
   },

package/src/themes/aurora.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'
 
 /**
@@ -86,6 +86,19 @@ export const aurora = defineTheme({
       'vw-pop-duration': '300ms',
       'vw-theme-transition': '560ms',
 
+      // The showcase theme, so the overlays show off too.
+      'vw-overlay-duration': '300ms',
+      'vw-overlay-exit': '200ms',
+      // Saturated ground, saturated states.
+      'focus-opacity': 0.18,
+      'activated-opacity': 0.16,
+      /**
+       * Vuetify tints a raised surface with plain white on a dark ground.
+       * Here the light in the room is violet, so the tint that stands for
+       * height is the theme's own hue rather than a neutral.
+       */
+      'elevation-overlay-color': '#7C5CFF',
+
       // The line is the theme's own gradient, top to bottom.
       'vw-timeline-line': 'var(--v-vw-gradient)',
       'vw-timeline-line-width': '2px',
@@ -110,5 +123,12 @@ export const aurora = defineTheme({
       ratingFull: 'mdi-star',
       ratingEmpty: 'mdi-star-outline',
     }),
+    // Everything swells into place, at the length the rest of the theme
+    // moves on.
+    overlays({
+      dialog: 'scale-transition',
+      menu: 'scale-transition',
+      tooltip: 'scale-transition',
+    }),
   ],
 })