vuetiwatch 0.1.0

package/src/styles/themes/aurora.css

@@ -0,0 +1,86 @@
+/**
+ * Aurora — the showcase theme, so this file is deliberately the busiest in
+ * the package.
+ *
+ * Two techniques carry it. Gradient rims come from a `border` painted with
+ * two backgrounds and `mask-composite: exclude`, which draws a gradient in
+ * the border box only — a gradient `border-image` cannot follow a rounded
+ * corner. Depth comes from `radial-gradient` glows rather than shadows,
+ * because on a near-black ground a shadow is invisible and light is not.
+ *
+ * Everything reads `--v-vw-gradient`, so overriding that one variable
+ * restyles the entire theme.
+ */
+.v-theme--aurora {
+  /* The lit ground the glows sit on. */
+  &.v-application {
+    background-image:
+      radial-gradient(60rem 40rem at 15% -10%, rgba(124, 92, 255, 0.16), transparent 60%),
+      radial-gradient(50rem 35rem at 95% 5%, rgba(0, 212, 255, 0.12), transparent 60%);
+    background-attachment: fixed;
+  }
+
+  & .v-card.v-card--variant-elevated {
+    background-image: radial-gradient(
+      36rem 18rem at 0% 0%,
+      rgba(124, 92, 255, 0.14),
+      transparent 70%
+    );
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
+  }
+
+  /* An iridescent rim, drawn in the border box only. */
+  & :is(.v-card, .v-alert)::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: var(--v-vw-border-width);
+    background: var(--v-vw-gradient);
+    opacity: 0.45;
+    mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  /* Filled buttons are the gradient itself. */
+  & .v-btn.v-btn--variant-flat.bg-primary {
+    background-image: var(--v-vw-gradient);
+    box-shadow: 0 6px 24px rgba(124, 92, 255, 0.45);
+  }
+
+  & .v-btn.v-btn--variant-flat.bg-primary .v-btn__overlay {
+    opacity: 0;
+  }
+
+  & .v-tab__slider {
+    background: var(--v-vw-gradient);
+    box-shadow: 0 0 16px rgba(124, 92, 255, 0.8);
+  }
+
+  & .v-slider-track__fill {
+    background: var(--v-vw-gradient);
+  }
+
+  & .v-slider-thumb__surface {
+    box-shadow: 0 0 0 6px rgba(124, 92, 255, 0.18), 0 0 16px rgba(124, 92, 255, 0.6);
+  }
+
+  & .v-selection-control--dirty .v-switch__track {
+    background-image: var(--v-vw-gradient);
+    box-shadow: 0 0 14px rgba(124, 92, 255, 0.5);
+  }
+
+  & :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);
+  }
+
+  /* The display sizes carry the gradient; body text stays legible. */
+  & [class*='-display-'] {
+    background: var(--v-vw-gradient);
+    background-clip: text;
+    color: transparent;
+  }
+}

package/src/styles/themes/brutalist.css

@@ -0,0 +1,59 @@
+/**
+ * Brutalist — the shadow has no blur, so it is a second shape rather than a
+ * light effect. Hover slides the element into its own shadow, which is the
+ * whole interaction language of the style.
+ */
+.v-theme--brutalist {
+  --vw-brut-offset: 4px;
+
+  & :is(.v-card, .v-btn, .v-alert, .v-chip, .v-table, .v-btn-group, .v-expansion-panels):not(.v-btn--variant-text, .v-btn--variant-plain, .v-card--variant-text, .v-card--variant-plain) {
+    box-shadow: var(--vw-brut-offset) var(--vw-brut-offset) 0 rgb(var(--v-shadow-color));
+  }
+
+  & :is(.v-btn, .v-chip, .v-btn-group):not(.v-btn--variant-text, .v-btn--variant-plain):not(.v-btn--disabled, .v-btn-group *) {
+    border: var(--v-vw-border-width) solid rgb(var(--v-shadow-color));
+    transition: transform 0.08s steps(2, end), box-shadow 0.08s steps(2, end);
+  }
+
+  /* Pressed elements travel the full offset and land flat. */
+  & .v-btn:active:not(.v-btn--disabled) {
+    transform: translate(var(--vw-brut-offset), var(--vw-brut-offset));
+    box-shadow: 0 0 0 rgb(var(--v-shadow-color));
+  }
+
+  & .v-btn:not(.v-btn--variant-text, .v-btn--variant-plain):hover:not(.v-btn--disabled, .v-btn-group *) {
+    transform: translate(-1px, -1px);
+    box-shadow: 5px 5px 0 rgb(var(--v-shadow-color));
+  }
+
+  & :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));
+  }
+
+  & :is(.v-table thead th, .v-data-table__th) {
+    background-color: rgb(var(--v-theme-secondary));
+    border-bottom: var(--v-vw-border-width) solid rgb(var(--v-shadow-color));
+    text-transform: uppercase;
+    font-weight: 700;
+  }
+
+
+
+  /* Panels are cards here, so they wear the same rule as one. */
+  & .v-expansion-panels {
+    border: var(--v-vw-border-width) solid rgb(var(--v-shadow-color));
+  }
+
+
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .v-theme--brutalist .v-btn {
+    transition: none;
+  }
+
+  .v-theme--brutalist .v-btn:hover:not(.v-btn--disabled) {
+    transform: none;
+  }
+}

package/src/styles/themes/calm.css

@@ -0,0 +1,31 @@
+/**
+ * Calm — this file is mostly subtraction. Everything that would raise,
+ * fill or outline a surface is taken away, leaving space to do the work.
+ */
+.v-theme--calm {
+  & :is(.v-card, .v-sheet, .v-table, .v-list, .v-expansion-panels) {
+    box-shadow: none;
+  }
+
+  /* Surfaces separate by tone alone, at the smallest step that still reads. */
+  & .v-card.v-card--variant-flat {
+    background-color: rgb(var(--v-theme-surface));
+  }
+
+  & :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);
+  }
+
+
+  & :is(.v-table thead th, .v-data-table__th) {
+    font-weight: 500;
+    border-bottom: var(--v-vw-border-width) solid rgba(var(--v-border-color), 0.09);
+  }
+
+
+  /* Room to breathe is the theme's only real ornament. */
+  & .v-card-text {
+    line-height: 1.7;
+  }
+}

package/src/styles/themes/clay.css

@@ -0,0 +1,60 @@
+/**
+ * Clay — three shadows make a shape look inflated rather than cut out: a
+ * soft drop below, a white rim above, and an inner one that rounds the
+ * body away from its own edge.
+ */
+.v-theme--clay {
+  --vw-clay-lift:
+    8px 8px 20px rgba(var(--v-shadow-color), 0.18),
+    -6px -6px 16px rgba(255, 255, 255, 0.9),
+    inset -4px -4px 12px rgba(var(--v-shadow-color), 0.06),
+    inset 4px 4px 10px rgba(255, 255, 255, 0.7);
+
+  & :is(.v-card, .v-btn, .v-alert, .v-btn-group, .v-expansion-panels):not(.v-btn--variant-text, .v-btn--variant-plain, .v-card--variant-text, .v-card--variant-plain, .v-btn--size-small, .v-btn--size-x-small) {
+    box-shadow: var(--vw-clay-lift);
+  }
+
+  /**
+   * The full lift is built for card-sized surfaces. On a pill the inner
+   * highlight fills most of the shape, and the white glow of a row of them
+   * pools into a pale band with visible edges — so small controls get a
+   * scaled-down version with no inset at all.
+   */
+  & :is(.v-chip, .v-btn--size-small, .v-btn--size-x-small):not(.v-btn--variant-text, .v-btn--variant-plain) {
+    box-shadow:
+      3px 3px 7px rgba(var(--v-shadow-color), 0.13),
+      -2px -2px 5px rgba(255, 255, 255, 0.6);
+  }
+
+  & .v-btn:active:not(.v-btn--disabled) {
+    box-shadow:
+      4px 4px 10px rgba(var(--v-shadow-color), 0.16),
+      inset -3px -3px 10px rgba(var(--v-shadow-color), 0.1),
+      inset 3px 3px 8px rgba(255, 255, 255, 0.6);
+  }
+
+  & .v-field.v-field--variant-solo {
+    background: rgb(var(--v-theme-surface));
+    box-shadow:
+      inset 4px 4px 10px rgba(var(--v-shadow-color), 0.12),
+      inset -4px -4px 10px rgba(255, 255, 255, 0.9);
+  }
+
+  & :is(.v-switch__track, .v-slider-track) {
+    box-shadow: inset 2px 2px 6px rgba(var(--v-shadow-color), 0.18);
+  }
+
+  & :is(.v-switch__thumb, .v-slider-thumb__surface) {
+    box-shadow:
+      3px 3px 8px rgba(var(--v-shadow-color), 0.24),
+      -2px -2px 6px rgba(255, 255, 255, 0.9);
+  }
+
+  & :is(.v-menu, .v-dialog) > .v-overlay__content {
+    box-shadow: 12px 12px 40px rgba(var(--v-shadow-color), 0.24);
+  }
+
+  & .v-tab__slider {
+    border-radius: 5px;
+  }
+}

package/src/styles/themes/darkGlass.css

@@ -0,0 +1,69 @@
+/**
+ * Dark Glass — translucent surfaces with a backdrop blur and an inset top
+ * highlight, so stacked panels read as sheets of glass.
+ *
+ * `backdrop-filter` only shows through to what is actually behind the
+ * element, so give `v-app` a gradient or image for the effect to register.
+ */
+.v-theme--darkGlass {
+  /**
+   * Only frost surfaces that have no colour of their own: `[class*='bg-']`
+   * means the author passed `color=""`, and the text/plain card variants are
+   * meant to be transparent.
+   */
+  & :is(.v-card, .v-app-bar, .v-navigation-drawer, .v-toolbar):not(
+    [class*='bg-'],
+    .v-card--variant-text,
+    .v-card--variant-plain
+  ) {
+    background-color: rgba(var(--v-theme-surface), 0.62);
+    backdrop-filter: blur(18px) saturate(160%);
+    border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+
+  /* Outer depth plus the inset highlight that sells the glass reading. */
+  & .v-card.v-card--variant-elevated {
+    box-shadow:
+      inset 0 1px 0 rgba(var(--v-theme-primary), 0.28),
+      0 8px 32px rgba(var(--v-shadow-color), 0.45);
+  }
+
+  & :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);
+  }
+
+  & .v-field.v-field--variant-solo-filled .v-field__overlay {
+    background-color: rgba(var(--v-theme-surface-bright), 0.45);
+  }
+
+  & .v-btn.v-btn--variant-flat:not(.v-btn--disabled) {
+    box-shadow: 0 4px 20px rgba(var(--v-theme-primary), 0.35);
+  }
+
+  /* The active tab glows rather than underlines. */
+  & .v-tab__slider {
+    box-shadow: 0 0 12px rgba(var(--v-theme-primary), 0.8);
+  }
+
+  /* A halo around the thumb, the same idea as the frosted panels. */
+  & .v-slider-thumb__surface {
+    box-shadow: 0 0 0 6px rgba(var(--v-theme-primary), 0.16);
+  }
+
+  & .v-switch__track {
+    backdrop-filter: blur(6px);
+    border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .v-theme--darkGlass :is(.v-card, .v-app-bar, .v-navigation-drawer, .v-toolbar):not(
+    [class*='bg-'],
+    .v-card--variant-text,
+    .v-card--variant-plain
+  ) {
+    background-color: rgb(var(--v-theme-surface));
+    backdrop-filter: none;
+  }
+}

package/src/styles/themes/liquidGlass.css

@@ -0,0 +1,172 @@
+/**
+ * Liquid Glass — thickness, not just blur.
+ *
+ * A pane reads as glass when three things happen at once: the backdrop is
+ * over-saturated so colour bends through it, a bright specular rim runs
+ * along the top edge with a darker one along the bottom, and there is
+ * something behind it worth refracting. Remove any one and it collapses
+ * into ordinary frosting.
+ */
+.v-theme--liquidGlass {
+  /* Two adjacent hues only — blue into indigo, the way iOS washes a
+     wallpaper. A third hue from across the wheel turns it into a smear. */
+  &.v-application {
+    background-image:
+      radial-gradient(65rem 45rem at 8% -8%, rgba(0, 122, 255, 0.3), transparent 62%),
+      radial-gradient(55rem 42rem at 92% 12%, rgba(88, 86, 214, 0.24), transparent 62%),
+      linear-gradient(165deg, rgba(0, 122, 255, 0) 45%, rgba(0, 122, 255, 0.12) 100%);
+    background-attachment: fixed;
+  }
+
+  & :is(
+    .v-card,
+    .v-app-bar,
+    .v-toolbar,
+    .v-navigation-drawer,
+    .v-table,
+    .v-expansion-panels
+  ):not(
+    [class*='bg-'],
+    .v-card--variant-text,
+    .v-card--variant-plain
+  ) {
+    background-color: rgba(var(--v-theme-surface), 0.6);
+    backdrop-filter: blur(30px) saturate(190%);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.9),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.35),
+      inset 0 -1px 0 rgba(var(--v-shadow-color), 0.08),
+      0 10px 34px rgba(var(--v-shadow-color), 0.1);
+  }
+
+  & :is(.v-menu, .v-dialog) > .v-overlay__content {
+    backdrop-filter: blur(30px) saturate(190%);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.9),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.35),
+      0 18px 52px rgba(var(--v-shadow-color), 0.18);
+  }
+
+  /**
+   * A text field is a recess, not a raised pane — so it takes a fill rather
+   * than glass, and gets no specular rim.
+   *
+   * These are UIKit's own values. The point of a grey translucent fill
+   * darker than its surroundings is that it stays legible on any backdrop;
+   * a white pane over a light ground, which is what this was, disappears.
+   */
+  & .v-field.v-field--variant-solo-filled {
+    /* tertiarySystemFill */
+    background-color: rgba(118, 118, 128, 0.12);
+    backdrop-filter: blur(20px) saturate(170%);
+    box-shadow: none;
+  }
+
+  /* Vuetify's own 4% tint would stack on top of the fill above. */
+  & .v-field--variant-solo-filled .v-field__overlay {
+    opacity: 0;
+  }
+
+  & .v-field.v-field--variant-solo-filled:hover,
+  & .v-field.v-field--variant-solo-filled.v-field--focused {
+    /* secondarySystemFill */
+    background-color: rgba(120, 120, 128, 0.16);
+  }
+
+  & .v-btn.v-btn--variant-flat:not(.v-btn--disabled) {
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.4),
+      0 4px 14px rgba(var(--v-shadow-color), 0.22);
+  }
+
+  /**
+   * A segmented control is a filled track with the selection riding on it
+   * as a white pill — not a row of white buttons.
+   */
+  & .v-btn-group.v-btn-toggle {
+    background-color: rgba(118, 118, 128, 0.12);
+    padding: 2px;
+  }
+
+  & .v-btn-group.v-btn-toggle > .v-btn {
+    background-color: transparent;
+    border-radius: calc(var(--v-vw-radius) - 2px);
+  }
+
+  /**
+   * The selected label goes back to the normal text colour: Vuetify pairs
+   * the active button's `color` with its `on-` counterpart, which is white
+   * here — and this pill is white too. Its state overlay is dropped for the
+   * same reason, so nothing tints the pill grey.
+   */
+  & .v-btn-group.v-btn-toggle > .v-btn--active {
+    background-color: rgb(var(--v-theme-surface));
+    color: rgb(var(--v-theme-on-surface));
+    box-shadow: 0 2px 6px rgba(var(--v-shadow-color), 0.16);
+  }
+
+  & .v-btn-group.v-btn-toggle > .v-btn--active > .v-btn__overlay {
+    opacity: 0;
+  }
+
+  & .v-slider-thumb__surface {
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.85),
+      0 2px 8px rgba(var(--v-shadow-color), 0.28);
+  }
+
+
+  & [class*='-title-'] {
+    letter-spacing: -0.01em;
+  }
+
+  /* Hairline separators, not borders. */
+  & :is(.v-divider, .v-table tbody td, .v-data-table__td) {
+    border-color: rgba(var(--v-border-color), 0.14);
+  }
+
+  & .v-divider {
+    opacity: 1;
+  }
+
+  /**
+   * A grouped list, not a data grid: the header is a quiet label above the
+   * rows rather than a bold band, and the table itself is transparent so
+   * the pane behind it shows through.
+   */
+  & :is(.v-table, .v-table__wrapper, .v-table > .v-table__wrapper > table) {
+    background: transparent;
+  }
+
+  & :is(.v-table thead th, .v-data-table__th) {
+    background: transparent;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    letter-spacing: 0;
+    color: rgba(var(--v-theme-on-surface), 0.5);
+    border-bottom: 1px solid rgba(var(--v-border-color), 0.14);
+  }
+
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .v-theme--liquidGlass.v-application {
+    background-image: none;
+  }
+
+  .v-theme--liquidGlass :is(
+    .v-card,
+    .v-app-bar,
+    .v-toolbar,
+    .v-navigation-drawer,
+    .v-table,
+    .v-expansion-panels
+  ):not(
+    [class*='bg-'],
+    .v-card--variant-text,
+    .v-card--variant-plain
+  ) {
+    background-color: rgb(var(--v-theme-surface));
+    backdrop-filter: none;
+  }
+}

package/src/styles/themes/lux.css

@@ -0,0 +1,31 @@
+/**
+ * Lux — everything here is typography and negative space. The only marks
+ * on the page are hairlines, so the few that exist have to be precise.
+ */
+.v-theme--lux {
+  & :is(.v-card, .v-sheet, .v-table, .v-list, .v-expansion-panels) {
+    box-shadow: none;
+  }
+
+
+  & :is(.v-toolbar-title, .v-card-title, .v-list-subheader) {
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    font-weight: 400;
+  }
+
+  & :is(.v-table thead th, .v-data-table__th) {
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    font-weight: 400;
+    font-size: 0.75rem;
+  }
+
+  & :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/morph.css

@@ -0,0 +1,53 @@
+/**
+ * Morph — the entire theme is two shadows. Raised surfaces get a dark one
+ * bottom-right and a light one top-left; anything the user types into or
+ * presses gets the same pair inverted, so it reads as pushed in.
+ *
+ * `--v-shadow-color` carries the dark half so a derived theme can retune
+ * the whole relief by changing one value.
+ */
+.v-theme--morph {
+  --vw-morph-raised:
+    6px 6px 12px rgba(var(--v-shadow-color), 0.5),
+    -6px -6px 12px rgba(255, 255, 255, 0.85);
+  --vw-morph-pressed:
+    inset 3px 3px 7px rgba(var(--v-shadow-color), 0.55),
+    inset -3px -3px 7px rgba(255, 255, 255, 0.9);
+
+  & :is(.v-card, .v-btn, .v-alert, .v-btn-group, .v-expansion-panels, .v-sheet--variant-flat):not(.v-btn--variant-text, .v-btn--variant-plain, .v-card--variant-text, .v-card--variant-plain, .v-btn--size-small, .v-btn--size-x-small) {
+    box-shadow: var(--vw-morph-raised);
+  }
+
+  /* Relief scaled to the element: a pill is too small to carry the full
+     pair, and a row of them merges into one pale band. */
+  & :is(.v-chip, .v-btn--size-small, .v-btn--size-x-small):not(.v-btn--variant-text, .v-btn--variant-plain) {
+    box-shadow:
+      3px 3px 7px rgba(var(--v-shadow-color), 0.38),
+      -3px -3px 6px rgba(255, 255, 255, 0.6);
+  }
+
+  /* Inputs are recesses, not tiles. */
+  & :is(.v-field--variant-solo, .v-switch__track, .v-slider-track) {
+    background: rgb(var(--v-theme-background));
+    box-shadow: var(--vw-morph-pressed);
+  }
+
+  & .v-btn:active:not(.v-btn--disabled),
+  & .v-btn--active {
+    box-shadow: var(--vw-morph-pressed);
+  }
+
+  & .v-slider-thumb__surface {
+    box-shadow: var(--vw-morph-raised);
+  }
+
+  /* A divider would be a seam in something meant to be one sheet. */
+  & :is(.v-divider, .v-table tbody td) {
+    border-color: transparent;
+  }
+
+  & .v-tab__slider {
+    border-radius: 4px;
+    box-shadow: var(--vw-morph-raised);
+  }
+}

package/src/styles/themes/neon.css

@@ -0,0 +1,56 @@
+/**
+ * Neon — glow replaces elevation. Shadows are coloured by the theme's own
+ * primary, so a derived theme that swaps the accent gets a matching glow
+ * for free.
+ */
+.v-theme--neon {
+  & :is(.v-card, .v-sheet, .v-list, .v-table, .v-expansion-panels) {
+    box-shadow: none;
+  }
+
+  & .v-card.v-card--variant-outlined {
+    box-shadow: 0 0 0 1px rgba(var(--v-theme-primary), 0.12);
+  }
+
+  & .v-btn.v-btn--variant-outlined:not(.v-btn--disabled):hover {
+    box-shadow:
+      0 0 0 1px rgba(var(--v-theme-primary), 0.6),
+      0 0 18px rgba(var(--v-theme-primary), 0.35);
+  }
+
+  & .v-btn.v-btn--variant-flat:not(.v-btn--disabled) {
+    box-shadow: 0 0 22px rgba(var(--v-theme-primary), 0.45);
+  }
+
+  & :is(.v-menu, .v-dialog) > .v-overlay__content {
+    box-shadow:
+      0 0 0 1px rgba(var(--v-theme-primary), 0.35),
+      0 12px 48px rgba(0, 0, 0, 0.75);
+  }
+
+  /* Monospace headings want to read as labels, not prose. */
+
+  & .v-app-bar {
+    box-shadow: inset 0 -1px 0 rgba(var(--v-theme-primary), 0.3);
+  }
+
+  & .v-slider-thumb__surface {
+    box-shadow: 0 0 12px rgba(var(--v-theme-primary), 0.6);
+  }
+
+  & .v-tab__slider {
+    box-shadow: 0 0 14px rgba(var(--v-theme-primary), 0.9);
+  }
+
+  & .v-selection-control--dirty .v-switch__track {
+    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);
+  }
+
+}

package/src/styles/themes/paper.css

@@ -0,0 +1,32 @@
+/**
+ * Paper — flat by construction. Elevation is replaced with hairline rules,
+ * and headings get the tighter tracking a serif face wants.
+ *
+ * Vuetify emits its theme colors as bare `r, g, b` triples, so every color
+ * here goes through `rgba(var(--v-theme-*), a)`.
+ */
+.v-theme--paper {
+  & :is(.v-card, .v-sheet, .v-list, .v-table, .v-expansion-panels) {
+    box-shadow: none;
+  }
+
+  & .v-card.v-card--variant-elevated {
+    border: var(--v-vw-border-width, 1px) solid
+      rgba(var(--v-border-color), var(--v-border-opacity));
+    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. */
+  & .v-switch__track {
+    border: var(--v-vw-border-width, 1px) solid rgba(var(--v-border-color), 0.3);
+  }
+
+  /* A double rule under the table head, the way print sets one. */
+  & :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

@@ -0,0 +1,34 @@
+/**
+ * Sketchy — the wobble comes from `--v-vw-radius` in the theme itself, so
+ * this file only adds what a pen stroke does that a border cannot: an
+ * uneven weight, and a redrawn line on hover.
+ */
+.v-theme--sketchy {
+  & :is(.v-card, .v-sheet, .v-table, .v-list, .v-expansion-panels) {
+    box-shadow: none;
+  }
+
+  /* Ink is never perfectly even — the bottom of a stroke sits heavier. */
+  & :is(.v-btn--variant-outlined, .v-card--variant-outlined, .v-alert--variant-outlined) {
+    border-bottom-width: calc(var(--v-vw-border-width) + 1px);
+  }
+
+  /* Hover redraws the box with the wobble mirrored. */
+  & .v-btn.v-btn--variant-outlined:hover {
+    border-radius: 5px 22px 6px 20px / 20px 6px 22px 5px;
+  }
+
+  & :is(.v-table thead th, .v-data-table__th) {
+    border-bottom: var(--v-vw-border-width) solid rgba(var(--v-border-color), 0.7);
+  }
+
+  & .v-tab__slider {
+    border-radius: 8px 3px 8px 3px / 3px 8px 3px 8px;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .v-theme--sketchy .v-btn {
+    transition: border-radius 0.12s steps(2, end);
+  }
+}