vuetiwatch 0.1.1 → 0.2.0

package/src/styles/core.css

@@ -10,19 +10,31 @@
  * The scope is either a Vuetiwatch theme class or the `data-vuetiwatch`
  * attribute `createVuetiwatch()` sets on `<html>` — the latter is what
  * extends this layer to themes you build yourself with `defineTheme()`.
- * `VUETIWATCH_THEMES` is a placeholder: the build expands it into one class
- * per registered theme, so this list can never drift from the registry.
+ * `VUETIWATCH_THEMES` and `VUETIWATCH_STOCK` are placeholders: the build
+ * expands the first into one class per registered theme and the second into
+ * the attribute value of every theme that declared `meta.stock`, so neither
+ * list can drift from the registry. A stock theme is excluded twice over —
+ * by class and by attribute — which is what makes `classic` a control
+ * rather than another theme.
  * Importing this file therefore cannot affect an app that is not running a
  * Vuetiwatch theme, and every value falls back to the stock Vuetify one, so
  * a theme only pays for what it overrides.
  *
- * Component classes are doubled to out-specify Vuetify's own rules without
- * relying on an ancestor, which keeps teleported overlays covered.
+ * Weight is deliberate, and it runs one way: every rule here has to beat
+ * Vuetify and lose to everything else. It beats Vuetify for free — all but
+ * six of its rules ship inside `@layer vuetify-*`, and an unlayered author
+ * rule outranks a layered one whatever its specificity — so the scope below
+ * sits in `:where()` and costs nothing. What is left is the component
+ * selector alone, which a theme file (a theme class plus the same selector)
+ * and an app's own stylesheet both clear without a fight. Vuetify's utility
+ * classes are the exception in the other direction: they carry `!important`,
+ * which no specificity reaches, so the rules here step around them with
+ * `:not([class*='bg-'])` and its siblings instead.
  *
  * Authored with CSS nesting; the published file is flattened at build time.
  */
 
-:is([data-vuetiwatch], .v-theme--VUETIWATCH_THEMES) {
+:where([data-vuetiwatch]:not(VUETIWATCH_STOCK), .v-theme--VUETIWATCH_THEMES) {
   /* -------------------------------------------------------------- radius */
 
   /**
@@ -35,7 +47,11 @@
    * those children individually turns a joined group into separate pills
    * and a full-height toolbar button into a rounded slab.
    */
-  & .v-btn.v-btn:not(
+  & .v-btn--icon:not([class*='rounded-'], .v-btn-group *, .v-pagination *) {
+    border-radius: var(--v-vw-radius-icon-btn, 50%);
+  }
+
+  & .v-btn:not(
     .v-btn--icon,
     .v-btn--rounded,
     [class*='rounded-'],
@@ -46,6 +62,104 @@
     border-radius: var(--v-vw-radius-btn, var(--v-vw-radius, 4px));
   }
 
+  /**
+   * A list standing on its own is a panel and takes the panel corner. One
+   * inside a card, a drawer, a menu or another list is not: that surface
+   * owns the corner already, and rounding the inner box would clip its own
+   * rows for nothing. Vuetify ships `.v-list` at radius 0 with no edge at
+   * all, which is why a bare list was the one surface that stayed stock
+   * whatever theme was running.
+   */
+  & :is(.v-list, .v-sheet, .v-banner, .v-table, .v-skeleton-loader):not(:is(.v-card, .v-overlay__content, .v-navigation-drawer, .v-expansion-panels, .v-list) *) {
+    border-radius: var(--v-vw-radius-lg, var(--v-vw-radius, 4px));
+  }
+
+  /**
+   * And what that panel is drawn with. Fifteen themes had written this
+   * selector out in full — the same four components, the same five
+   * containers that own their children's edges — and each carried its own
+   * copy of a list that has had to grow twice. The selector belongs in one
+   * place; the treatment is a value, so it travels as one.
+   *
+   * Every fallback is `revert-layer`, which hands the property back to
+   * Vuetify's own layer, so a theme that says nothing here changes nothing.
+   * The radius is above rather than in this block because it comes from the
+   * shape scale every other surface uses, and a skeleton loader takes the
+   * corner without taking the edge.
+   */
+  & :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: var(--v-vw-panel-border, revert-layer);
+    box-shadow: var(--v-vw-panel-shadow, revert-layer);
+    background-color: var(--v-vw-panel-fill, revert-layer);
+    background-image: var(--v-vw-panel-image, revert-layer);
+    backdrop-filter: var(--v-vw-panel-filter, none);
+  }
+
+  /**
+   * `border` on a list or a sheet is the author asking for an edge, and the
+   * shorthand above would answer with Vuetify's hairline. The width stays
+   * the theme's — which is how a theme that draws no borders at all keeps
+   * its zero, and how `brutalist` keeps its three pixels.
+   */
+  & :is(.v-list--border, .v-sheet--border):not(:is(.v-card, .v-overlay__content, .v-navigation-drawer, .v-expansion-panels, .v-list) *) {
+    border-width: var(--v-vw-border-width, thin);
+  }
+
+  /**
+   * `.v-sheet` is Vuetify's surface primitive, so this one selector reaches
+   * the stepper and the pickers as well — components with enough layout of
+   * their own that no theme had thought to name them.
+   */
+
+  /**
+   * A button group is one control, so the corner belongs to the group and
+   * not to the buttons inside it — which is why the rule above steps over
+   * `.v-btn-group *`. Without this the group kept Vuetify's 8px while every
+   * button in the theme was square.
+   */
+  & :is(.v-btn-group, .v-btn-toggle):not([class*='rounded-']) {
+    border-radius: var(--v-vw-radius-btn, var(--v-vw-radius, 4px));
+  }
+
+  /**
+   * Vuetify's outlined card is transparent, so it shows the page through
+   * itself and so does everything nested in it — a list, a table, a tree.
+   * On the stock theme that is invisible, because its background and its
+   * surface are both white; on a theme with a tinted ground it means half
+   * the panels on a screen are panels and half are holes.
+   *
+   * Material 3 gives an outlined card the surface colour, and so does this:
+   * a card is a container, and a container that is not there cannot hold
+   * anything. The relief and glass themes, whose whole idea is that a
+   * surface is the ground, set the knob back to `transparent`.
+   */
+  & .v-card--variant-outlined:not([class*='bg-']) {
+    background-color: var(--v-vw-outlined-fill, rgb(var(--v-theme-surface)));
+  }
+
+  /* A badge is a very small chip and rounds like one. */
+  & .v-badge__badge {
+    border-radius: var(--v-vw-radius-chip, 9999px);
+  }
+
+  /**
+   * Avatars and timeline dots are circles in Material and stay circles by
+   * default. They get their own knobs because a theme with no curve
+   * anywhere — `brutalist`, `neon` — was still drawing two of them.
+   */
+  & .v-avatar:not([class*='rounded-']) {
+    border-radius: var(--v-vw-radius-avatar, 50%);
+  }
+
+  & :is(.v-timeline-divider__dot, .v-timeline-divider__inner-dot) {
+    border-radius: var(--v-vw-radius-dot, 50%);
+  }
+
+  /* The `rounded` prop is the pill; everything else follows the theme. */
+  & .v-progress-linear:not(.v-progress-linear--rounded, [class*='rounded-']) {
+    border-radius: var(--v-vw-radius, 0);
+  }
+
   /**
    * Vuetify's square-inset switch hardcodes 6px and 4px, so a theme with no
    * corners at all still got a rounded toggle. Only this variant follows the
@@ -98,33 +212,24 @@
   }
 
   /* The group keeps the corners its children gave up. */
-  & .v-btn-group.v-btn-group:not([class*='rounded-']) {
+  & .v-btn-group:not([class*='rounded-']) {
     border-radius: var(--v-vw-radius, 4px);
   }
 
   /**
-   * Pagination items are `icon` buttons so the rule above leaves them
-   * round, but they read as a row of tiles rather than icons — they follow
-   * the button radius instead.
+   * Pagination items are `icon` buttons, but they read as a row of tiles
+   * rather than icons, so they follow the button radius. The rule above
+   * excludes them by name for that reason: two rules of equal weight
+   * claiming the same element would leave the outcome to source order,
+   * which is not something a stylesheet should have an opinion about.
    */
-  & .v-pagination .v-btn.v-btn {
+  & .v-pagination .v-btn {
     border-radius: var(--v-vw-radius-btn, var(--v-vw-radius, 4px));
   }
 
-  /**
-   * The same containers join their buttons into one shape, so a per-button
-   * shadow draws a seam down every join. Decoration belongs on the
-   * container — this out-specifies the theme layers that give `.v-btn` a
-   * relief, and a theme that wants a decorated group styles
-   * `.v-btn-group` itself.
-   */
-  & :is(.v-btn-group, .v-toolbar-items) .v-btn.v-btn {
-    box-shadow: none;
-  }
-
   & :is(
-    .v-card.v-card:not([class*='rounded-']),
-    .v-table.v-table
+    .v-card:not([class*='rounded-']),
+    .v-table
   ) {
     border-radius: var(--v-vw-radius-lg, var(--v-vw-radius, 4px));
   }
@@ -135,14 +240,14 @@
    * to unlayered ones at any specificity, so styling `.v-expansion-panel`
    * here would flatten that logic and round every panel in the stack.
    */
-  & .v-expansion-panels.v-expansion-panels {
+  & .v-expansion-panels {
     border-radius: var(--v-vw-radius-lg, var(--v-vw-radius, 4px));
   }
 
   & :is(
-    .v-alert.v-alert:not([class*='rounded-']),
-    .v-field.v-field:not([class*='rounded-']),
-    .v-list-item.v-list-item:not([class*='rounded-']),
+    .v-alert:not([class*='rounded-']),
+    .v-field:not([class*='rounded-']),
+    .v-list-item:not([class*='rounded-']),
     .v-snackbar__wrapper,
     .v-menu > .v-overlay__content,
     .v-tooltip > .v-overlay__content,
@@ -152,11 +257,11 @@
   }
 
   /* Filled and underlined fields only round their top corners. */
-  & .v-field.v-field:is(.v-field--variant-filled, .v-field--variant-underlined):not([class*='rounded-']) {
+  & .v-field:is(.v-field--variant-filled, .v-field--variant-underlined):not([class*='rounded-']) {
     border-radius: var(--v-vw-radius, 4px) var(--v-vw-radius, 4px) 0 0;
   }
 
-  & .v-chip.v-chip:not([class*='rounded-']) {
+  & .v-chip:not([class*='rounded-']) {
     border-radius: var(--v-vw-radius-chip, 9999px);
   }
 
@@ -166,7 +271,7 @@
    * most themes even when nothing else is — only the square-cornered ones
    * set it.
    */
-  & .v-slider-track.v-slider-track {
+  & .v-slider-track {
     border-radius: var(--v-vw-radius, 4px);
   }
 
@@ -234,11 +339,31 @@
     .v-btn--variant-outlined,
     .v-card--variant-outlined,
     .v-alert--variant-outlined,
-    .v-chip--variant-outlined
+    .v-chip--variant-outlined,
+    .v-list--border,
+    .v-sheet--border
   ) {
     border-width: var(--v-vw-border-width, thin);
   }
 
+  /**
+   * Vuetify draws an outlined card with `border: thin solid currentColor`,
+   * so the line around a panel is the ink of the text inside it — near
+   * black at high emphasis, measured. Every system this package is held
+   * against draws that line far lighter: Ant Design separates containers
+   * with #f0f0f0 and saves #d9d9d9 for controls.
+   *
+   * The line becomes the theme's own border colour instead. A theme that
+   * means its outline to be heavy — `brutalist` and its 3px rule — says so
+   * through the token rather than inheriting it by accident.
+   */
+  & .v-card--variant-outlined:not([class*='border-']) {
+    border-color: rgba(
+      var(--v-border-color),
+      var(--v-vw-outline-opacity, var(--v-border-opacity))
+    );
+  }
+
   /**
    * Vuetify already funnels every outline segment through one property, so
    * the field only needs that one set. Specificity matters here: this must
@@ -247,14 +372,29 @@
    */
   & .v-field__outline {
     --v-field-border-width: var(--v-vw-border-width, 1px);
+    /**
+     * Vuetify draws a resting field outline at 0.38 of the ink, which on a
+     * white ground reads around 2.3:1 — under the 3:1 WCAG asks for the
+     * boundary of a control you are meant to find and click. The value is
+     * declared on this element rather than inherited, so a theme cannot
+     * reach it through `variables` alone; the knob is here instead, and it
+     * defaults to Vuetify's own number so nothing moves unasked.
+     */
+    --v-field-border-opacity: var(--v-vw-field-border-opacity, 0.38);
   }
 
   /* ---------------------------------------------------- button typography */
 
-  & .v-btn.v-btn {
+  /**
+   * The fallbacks are Vuetify 4's own values, not Material's older ones: v4
+   * dropped the uppercase button and the wide tracking that came with it,
+   * and a fallback that reintroduced them would be this file changing a
+   * theme that never asked it to.
+   */
+  & .v-btn {
     font-weight: var(--v-vw-btn-weight, 500);
-    letter-spacing: var(--v-vw-btn-tracking, 0.0892857143em);
-    text-transform: var(--v-vw-btn-transform, uppercase);
+    letter-spacing: var(--v-vw-btn-tracking, 0.0071428571em);
+    text-transform: var(--v-vw-btn-transform, none);
   }
 
   /* ------------------------------------------------- shared theme surfaces */
@@ -292,17 +432,211 @@
    * with it; they raise this one instead and get the line back without a
    * single border returning.
    */
-  & :is(.v-timeline-divider__before, .v-timeline-divider__after) {
+  /**
+   * Vuetify paints a skeleton's bones with `--v-border-opacity`, which ties
+   * "how visible is a loading placeholder" to "how heavy are this theme's
+   * borders". A theme that draws no borders at all — `clay` and `morph` hold
+   * the value at 0.001 so no stray outline can appear — loses its loading
+   * state entirely — while a theme whose borders are solid black paints the
+   * bones solid black, which is a filled box rather than a placeholder.
+   * Clamping both ends keeps the loading state legible in either direction
+   * without touching a single border, and a theme can still overrule it.
+   *
+   * The list is Vuetify's own: `__bone` is the layout class every piece
+   * carries, containers included, so painting that one fills the whole
+   * block instead of drawing bars on it.
+   */
+  & :is(
+    .v-skeleton-loader__avatar,
+    .v-skeleton-loader__button,
+    .v-skeleton-loader__chip,
+    .v-skeleton-loader__divider,
+    .v-skeleton-loader__heading,
+    .v-skeleton-loader__image,
+    .v-skeleton-loader__ossein,
+    .v-skeleton-loader__text
+  ) {
     background: rgba(
-      var(--v-border-color),
-      var(--v-vw-timeline-line-opacity, var(--v-border-opacity))
+      var(--v-theme-on-surface),
+      var(--v-vw-skeleton-opacity, clamp(0.08, var(--v-border-opacity), 0.2))
     );
   }
 
+  /**
+   * The pieces carry hardcoded pill corners — 12px on a heading, 16 on a
+   * chip, 6 on a line of text — so a theme with square corners loads
+   * rounded bars and a theme with generous ones loads tight bars. A
+   * placeholder should be the shape of the thing it stands in for.
+   */
+  & :is(
+    .v-skeleton-loader__button,
+    .v-skeleton-loader__chip,
+    .v-skeleton-loader__heading,
+    .v-skeleton-loader__image,
+    .v-skeleton-loader__ossein,
+    .v-skeleton-loader__text
+  ) {
+    border-radius: var(--v-vw-radius, 4px);
+  }
+
+  & .v-skeleton-loader__avatar {
+    border-radius: var(--v-vw-radius-avatar, 50%);
+  }
+
+  /**
+   * The month and year controls are a fixed-width row inside a fixed-width
+   * card, so a theme that widens its buttons — wide tracking, a larger
+   * size — or narrows the picker pushes them past the edge. Wrapping is the
+   * one outcome that neither clips them nor forces a scrollbar.
+   */
+  /**
+   * The month and year buttons are navigation chrome inside a fixed-width
+   * card, not the theme's own buttons: a theme that sets wide tracking or
+   * capitals for its buttons — `lux` runs 0.16em — pushes them onto a
+   * second row, and a picker with two rows of navigation reads as broken.
+   * The type here follows the picker, not the theme's button voice.
+   */
+  & .v-date-picker-controls .v-btn {
+    letter-spacing: normal;
+    text-transform: none;
+    /* And not the theme's button size either: `candy` ships `size="large"`,
+       whose padding and minimum width push the pair past the card just as
+       tracking does. The row is chrome, so it keeps the picker's own size. */
+    font-size: 0.875rem;
+    min-width: 0;
+    padding-inline: 8px;
+    --v-btn-height: 32px;
+  }
+
+  & .v-date-picker-controls {
+    flex-wrap: wrap;
+    row-gap: 4px;
+    /* Vuetify pins the row at 56px, so a wrapped second line lands on the
+       weekday letters underneath. The height has to follow the content the
+       moment wrapping is allowed at all. */
+    height: auto;
+    min-height: var(--v-date-picker-controls-height, 56px);
+    padding-inline: 8px;
+  }
+
+  & :is(.v-timeline-divider__before, .v-timeline-divider__after) {
+    background: var(
+      --v-vw-timeline-line,
+      rgba(var(--v-border-color), var(--v-vw-timeline-line-opacity, var(--v-border-opacity)))
+    );
+  }
+
+  /**
+   * The whole background is a knob, not just its opacity, because a line is
+   * the one place a theme can say something with almost nothing: a
+   * repeating gradient makes it dashed, `--v-vw-gradient` makes it
+   * iridescent, a flat colour makes it a rule.
+   *
+   * The thickness is set on the segment rather than through Vuetify's
+   * `--v-timeline-line-thickness`, which the component writes inline from
+   * its own prop and would win.
+   */
+  &.v-application .v-timeline--vertical :is(.v-timeline-divider__before, .v-timeline-divider__after) {
+    width: var(--v-vw-timeline-line-width, var(--v-timeline-line-thickness));
+  }
+
+  &.v-application .v-timeline--horizontal :is(.v-timeline-divider__before, .v-timeline-divider__after) {
+    height: var(--v-vw-timeline-line-width, var(--v-timeline-line-thickness));
+  }
+
   & .v-tab__slider {
     height: var(--v-vw-tab-slider-height, 2px);
   }
 
+  /**
+   * A tab is a label, not a button. Vuetify builds one out of the other, so
+   * a tab inherits whatever the button type is — which in this build is the
+   * body size, since the reset layer's `font-size: inherit` on `button`
+   * outranks the size class that meant to set 0.875rem. The label ends up a
+   * step larger than the text it introduces.
+   *
+   * Material's tab label is 0.875rem and so is the button size Vuetify
+   * intends, so the value is the same either way and the tab no longer
+   * depends on which order the two layers happened to load in.
+   */
+  & .v-tab {
+    font-size: var(--v-vw-tab-size, 0.875rem);
+  }
+
+  /* -------------------------------------------------------- avatar type */
+
+  /**
+   * Vuetify sizes the circle and leaves the letters inside it at whatever
+   * the surrounding text was: `RM` in a 28px avatar next to a button label
+   * comes out 16px, more than half the diameter. Material's own ratio is
+   * 0.4 — 16px inside the 40px default — so this changes nothing at the
+   * default size and only corrects the ones a size prop moved.
+   *
+   * Only the keyword sizes publish their height as a variable; a numeric
+   * `size` is an inline style no rule can read, and the guard on the class
+   * keeps the declaration from resolving against a missing variable there.
+   * Images and icons carry their own dimensions and are left alone.
+   */
+  & .v-avatar[class*='--size-']:not(:has(img, .v-img, .v-icon)) {
+    font-size: calc(var(--v-avatar-height) * var(--v-vw-avatar-ratio, 0.4));
+  }
+
+  /* ------------------------------------------------------------ stepper */
+
+  /**
+   * The stepper is a panel, and Vuetify raises it twice: an elevation on
+   * the sheet, and a second one under the header band. That is Material's
+   * way of separating a scrolling window from its chrome, and no theme here
+   * separates anything that way — the flat ones had already dropped the
+   * sheet's shadow through their `.v-sheet` rule and were left with a band
+   * floating inside a panel that casts nothing.
+   *
+   * So the panel takes the theme's own edge and the header separates with
+   * the theme's own hairline — through the panel tokens above, so a theme
+   * that decorates its panels decorates its stepper by saying nothing
+   * twice: brutalist's second shape and clay's relief arrive here on their
+   * own. What is left is the fallback for a theme with no opinion, which is
+   * a hairline and no shadow.
+   */
+  & .v-stepper.v-sheet:not(.v-stepper--flat, [class*='elevation-']) {
+    box-shadow: var(--v-vw-panel-shadow, none);
+    border: var(--v-vw-panel-border, var(--v-vw-border-width, thin) solid
+      rgba(var(--v-border-color), var(--v-vw-outline-opacity, var(--v-border-opacity))));
+  }
+
+  & .v-stepper .v-stepper-header {
+    box-shadow: none;
+    border-block-end: var(--v-vw-border-width, thin) solid
+      rgba(var(--v-border-color), var(--v-vw-outline-opacity, var(--v-border-opacity)));
+  }
+
+  /**
+   * And the steps themselves come down a size. Vuetify pads each one by
+   * 1.5rem on every side, which makes a three-word progress bar 72px tall —
+   * taller than the app bar above it — and margins the window by as much
+   * again. This is the one component where the stock metrics are set for a
+   * full-page wizard and every other use is a form inside a panel.
+   */
+  & :where(.v-stepper-item) {
+    padding: 1rem 1.25rem;
+  }
+
+  & :where(.v-stepper-window) {
+    margin: 1.25rem;
+  }
+
+  & :where(.v-stepper .v-stepper-actions) {
+    padding: 0 1.25rem 1rem;
+  }
+
+  /**
+   * Figures line up in a column only when every digit is the same width,
+   * which matters on any screen that is mostly numbers and nowhere else.
+   */
+  & :is(.v-table, .v-data-table, .v-pagination) {
+    font-variant-numeric: var(--v-vw-numeric, normal);
+  }
+
   & :is(.v-table thead th, .v-data-table__th) {
     font-weight: var(--v-vw-th-weight, revert-layer);
     letter-spacing: var(--v-vw-th-tracking, revert-layer);
@@ -318,6 +652,70 @@
     border-inline-start: var(--v-vw-list-bar, 0) solid var(--v-vw-list-bar-color, currentColor);
   }
 
+  /* -------------------------------------------------------------- motion */
+
+  /**
+   * Movement is the fourth axis a theme travels on, after colour, shape and
+   * type — `brutalist` snapping in two steps and `lux` easing over a
+   * quarter-second are as different as their palettes, and until now every
+   * theme moved like stock Vuetify unless it hand-rolled a rule.
+   *
+   * Themes state a character in four values and core spends them on the
+   * same interactions everywhere. Every selector here is wrapped in
+   * `:where()`, so its specificity is the theme class alone and any theme
+   * that wants its own move — brutalist sliding into its shadow, candy
+   * squashing — overrides this without a fight.
+   *
+   * Only `transform` is animated: it runs on the compositor, so none of
+   * this can cost a layout pass however deep the tree.
+   */
+  & :where(.v-btn, .v-chip, .v-list-item, .v-card, .v-tab) {
+    transition: transform var(--v-vw-motion-duration, 160ms) var(--v-vw-motion-ease, cubic-bezier(0.2, 0, 0.2, 1));
+  }
+
+  & :where(.v-btn, .v-chip--link, .v-list-item--link):not(.v-btn--disabled):active {
+    transform:
+      translateY(var(--v-vw-press-shift, 0px))
+      scale(var(--v-vw-press-scale, 0.98));
+  }
+
+  & :where(.v-card--link):hover {
+    transform: translateY(calc(-1 * var(--v-vw-hover-lift, 0px)));
+  }
+
+  /**
+   * The pop: a control that has just been switched on overshoots its own
+   * size and settles back, which is the whole reason a like button feels
+   * like anything at all.
+   *
+   * It rides on the state classes Vuetify already toggles, so it costs no
+   * script and no markup. The tradeoff is that a control rendered already
+   * checked pops once on mount — a form arriving with its defaults ticking
+   * in, which reads as intent rather than as a glitch. A theme that would
+   * rather not can set `vw-pop-duration: 0ms`.
+   */
+  & :where(
+    .v-selection-control--dirty .v-selection-control__input > .v-icon,
+    .v-btn--active > .v-btn__content > .v-icon,
+    .v-rating__item--full .v-icon
+  ) {
+    animation: vw-pop var(--v-vw-pop-duration, 220ms) var(--v-vw-motion-ease, cubic-bezier(0.2, 0, 0.2, 1));
+  }
+
+  /* --------------------------------------------------------------- focus */
+
+  /**
+   * Vuetify marks focus with a wash of `primary` at low opacity, which
+   * disappears on a dark surface and on any element already carrying a
+   * colour. A ring does not: it is drawn outside the shape, so it survives
+   * every background, and it is the one piece of the interface that has to
+   * work for someone who never touches a mouse.
+   */
+  & :where(.v-btn, .v-tab, .v-chip, .v-list-item, .v-selection-control__input):focus-visible {
+    outline: var(--v-vw-focus-ring, 2px solid rgb(var(--v-theme-primary)));
+    outline-offset: var(--v-vw-focus-offset, 2px);
+  }
+
   /* ------------------------------------------------------------ headings */
 
   /**
@@ -353,3 +751,89 @@
     text-underline-offset: 0.15em;
   }
 }
+
+@keyframes vw-pop {
+  0% {
+    transform: scale(1);
+  }
+
+  45% {
+    transform: scale(var(--v-vw-pop-scale, 1.18));
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+/**
+ * Corrections, and the one place weight runs the other way.
+ *
+ * Everything above is a default a theme is free to overrule. The rules
+ * below are the opposite: they exist because a theme's own rule does damage
+ * in a context it never considered, so they keep the scope's weight and
+ * outrank it deliberately. Anything added here needs that justification —
+ * otherwise it belongs in the weightless block above.
+ */
+:is([data-vuetiwatch]:not(VUETIWATCH_STOCK), .v-theme--VUETIWATCH_THEMES) {
+  /**
+   * A button group and a toolbar join their buttons into one shape, so a
+   * per-button shadow draws a seam down every join — visible on any theme
+   * that gives `.v-btn` a relief or a glow. Decoration belongs on the
+   * container, and a theme that wants a decorated group styles
+   * `.v-btn-group` itself.
+   */
+  & :is(.v-btn-group, .v-toolbar-items) .v-btn.v-btn {
+    box-shadow: none;
+  }
+}
+
+/**
+ * One switch for every theme at once: the tokens themselves go to zero, so
+ * anything driven by them stops moving — including a theme built with
+ * `defineTheme()` that never wrote a media query of its own.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-vuetiwatch]:not(VUETIWATCH_STOCK), .v-theme--VUETIWATCH_THEMES) {
+    --v-vw-motion-duration: 1ms;
+    --v-vw-pop-duration: 1ms;
+    --v-vw-press-scale: 1;
+    --v-vw-press-shift: 0px;
+    --v-vw-hover-lift: 0px;
+    --v-vw-theme-transition: 0ms;
+  }
+}
+
+/**
+ * Theme switching, as a transition rather than a jump.
+ *
+ * `createVuetiwatch()` mirrors the active theme onto `<html>`, which is the
+ * same element the view-transition pseudo-elements hang off — so these
+ * rules reach exactly the documents running a Vuetiwatch theme and nothing
+ * else. The plugin writes the click coordinates into `--vw-origin-*` before
+ * it starts the transition, so the new theme opens from the switch the user
+ * actually pressed; with no event to read, it opens from the centre.
+ *
+ * The old snapshot is held still on purpose. Cross-fading both halves turns
+ * two legible screens into one muddy one, while wiping the new theme over a
+ * frozen old one keeps every edge crisp for the whole animation.
+ */
+@keyframes vw-theme-wipe {
+  from {
+    clip-path: circle(0% at var(--vw-origin-x, 50%) var(--vw-origin-y, 50%));
+  }
+
+  to {
+    clip-path: circle(150% at var(--vw-origin-x, 50%) var(--vw-origin-y, 50%));
+  }
+}
+
+html[data-vuetiwatch]::view-transition-old(root) {
+  animation: none;
+}
+
+html[data-vuetiwatch]::view-transition-new(root) {
+  animation: vw-theme-wipe
+    var(--v-vw-theme-transition, 420ms)
+    var(--v-vw-motion-ease, cubic-bezier(0.2, 0, 0.2, 1));
+}

package/src/styles/index.css

@@ -13,9 +13,13 @@
 /* Everyday */
 @import './themes/paper.css';
 @import './themes/slate.css';
+@import './themes/graphite.css';
+/* One stylesheet for the three Atlas variants. */
+@import './themes/_atlas.css';
 @import './themes/calm.css';
 @import './themes/lux.css';
 @import './themes/soft.css';
+@import './themes/candy.css';
 
 /* Tactile */
 @import './themes/clay.css';