vuetiwatch 0.1.0 → 0.2.0

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';

package/src/styles/themes/_atlas.css

@@ -0,0 +1,194 @@
+/**
+ * Atlas — shared by the three variants, because they are one design with
+ * three grounds rather than three themes that resemble each other.
+ *
+ * The theme says most of what it has to say through variables; what is left
+ * are the two structures a panel needs and a `ThemeDefinition` cannot
+ * express: a header that separates from its rows, and a card whose title
+ * separates from its content. Both are hairlines. Nothing here casts a
+ * shadow — on a screen this quiet a shadow is the loudest thing on it.
+ */
+.v-theme--atlas,
+.v-theme--atlasDark,
+.v-theme--atlasSepia {
+  /**
+   * The frame reads as a frame: the navigation takes the muted band, the
+   * content keeps the white. It is the oldest console layout there is, and
+   * the reason a panel on a white page still looks like an application.
+   */
+  & .v-navigation-drawer {
+    background-color: rgb(var(--v-theme-surface-light));
+  }
+
+  /**
+   * A table header that keeps its own ground, so a sticky one does not have
+   * rows sliding through it, and a rule under it that reads as structure
+   * rather than as a border round the table.
+   */
+  & :is(.v-table thead th, .v-data-table__th) {
+    /* A shade off the rows rather than the same white: the header of a
+       console table is a band, and a band you cannot see is a caption. */
+    background-color: rgb(var(--v-theme-surface-light));
+    border-bottom: 1px solid rgba(var(--v-border-color), calc(var(--v-border-opacity) * 1.6));
+  }
+
+  /* The title block of a panel, ruled off from what it introduces. */
+  & .v-card--variant-outlined > .v-card-item:not(:last-child) {
+    border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+    padding-block-end: 12px;
+  }
+
+  /**
+   * Vuetify zeroes the top padding of a `v-card-text` that follows a
+   * `v-card-item`, which is right when nothing separates them and wrong the
+   * moment the rule above is drawn: the content ends up sitting on the line.
+   */
+  & .v-card--variant-outlined > .v-card-item + :is(.v-card-text, .v-card-actions) {
+    padding-top: 12px;
+  }
+
+  /**
+   * Data runs a size smaller than prose.
+   *
+   * Vuetify sets one body size for the whole application, which is right
+   * for a page someone reads and wrong for a grid someone scans: at 16px a
+   * table of twelve columns stops fitting, and every admin tool worth
+   * copying runs its rows at 13 or 14. The reduction is scoped to the
+   * places that hold records — tables and lists — so forms and prose keep
+   * the size they were designed at.
+   */
+  & :is(.v-table, .v-data-table) {
+    font-size: 0.875rem;
+  }
+
+  & :is(.v-list-item-title, .v-list-item-subtitle) {
+    font-size: 0.875rem;
+  }
+
+  /**
+   * A panel title is a label for what is under it, not a headline. Vuetify's
+   * 1.25rem belongs on a marketing card; a screen with nine panels on it
+   * needs them to sit down.
+   */
+  & .v-card-title {
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: 0;
+  }
+
+  /**
+   * The pickers, at a size that fits a form.
+   *
+   * Vuetify sizes them for a touch dialog: 328px wide with 44px day cells,
+   * which next to a compact field looks like a component from another
+   * application. 36px cells still clear the 24px minimum for a pointer
+   * target and take a third off the height.
+   */
+  & :is(.v-date-picker, .v-picker) {
+    /* 306, not 296: the month and year controls need that much, and a
+       picker narrower than its own header is a picker that wraps. */
+    width: 306px;
+  }
+
+  /* The time picker sets its own floor, and it is the same 328. */
+  & .v-time-picker {
+    min-width: 296px;
+  }
+
+  & .v-date-picker-month__day {
+    height: 32px;
+  }
+
+  /* The date grid is a table of numbers, so it takes the table's size. */
+  & :is(.v-date-picker-month, .v-date-picker-years, .v-date-picker-months) {
+    font-size: 0.8125rem;
+  }
+
+  /* The clock face is sized for a thumb on a phone: 256px next to a
+     compact field is a component from another application. */
+  & .v-time-picker-clock {
+    max-width: 208px;
+  }
+
+  & .v-date-picker-controls {
+    padding-block: 4px;
+  }
+
+  /**
+   * Two nested paddings around five boxes on a control that is one line —
+   * and boxes sized for a thumb on a phone. A code entered with a keyboard
+   * beside compact fields should match them.
+   */
+  & .v-otp-input {
+    padding-block: 0;
+  }
+
+  & .v-otp-input__content {
+    max-width: 240px;
+    padding: 0;
+  }
+
+  & .v-otp-input .v-field {
+    height: 40px;
+  }
+
+  /**
+   * A panel header is a row, and rows here are 40 to 44. Vuetify's 48
+   * growing to 64 on open makes the list jump as much as it discloses.
+   */
+  & .v-expansion-panel-title {
+    min-height: 44px;
+    /* The height comes from the padding, not the minimum: 16px above and
+       below a 24px line is 56 whatever the minimum says. */
+    padding-block: 10px;
+  }
+
+  & .v-expansion-panel-title--active {
+    min-height: 52px;
+  }
+
+  /**
+   * Vuetify's empty state fills its container, which is right for a
+   * full-page one and wrong for the panel-sized ones an admin screen is
+   * full of.
+   */
+  & .v-empty-state {
+    min-height: 0;
+    padding-block: 24px;
+  }
+
+  /**
+   * Vuetify sets an alert title at 24px with a 28px glyph beside it, which
+   * on a console page is a headline announcing a footnote. Ant Design runs
+   * its alerts at 16 and 14, and that is the register a notice belongs in
+   * when the screen behind it is full of data.
+   */
+  & .v-alert-title {
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+
+  & .v-alert .v-alert__content {
+    font-size: 0.875rem;
+  }
+
+  & .v-alert .v-alert__prepend .v-icon {
+    font-size: 20px;
+  }
+
+  /**
+   * A breadcrumb trail is orientation, not content: it sits above the page
+   * title saying where you are, and Vuetify runs it at body size, which
+   * puts it in the same voice as the text it introduces. Every console this
+   * theme is measured against sets it a step down.
+   */
+  & .v-breadcrumbs {
+    font-size: 0.875rem;
+  }
+
+  /* Dense screens read better when the rules between rows are lighter than
+     the ones around the panels that hold them. */
+  & :is(.v-table tbody td, .v-data-table__td) {
+    border-color: rgba(var(--v-border-color), calc(var(--v-border-opacity) * 0.7));
+  }
+}

package/src/styles/themes/atlas.css

@@ -0,0 +1,2 @@
+/* The family shares one stylesheet — see _atlas.css. */
+@import './_atlas.css';

package/src/styles/themes/atlasDark.css

@@ -0,0 +1,2 @@
+/* The family shares one stylesheet — see _atlas.css. */
+@import './_atlas.css';

package/src/styles/themes/atlasSepia.css

@@ -0,0 +1,2 @@
+/* The family shares one stylesheet — see _atlas.css. */
+@import './_atlas.css';

package/src/styles/themes/aurora.css

@@ -12,14 +12,38 @@
  * restyles the entire theme.
  */
 .v-theme--aurora {
-  /* The lit ground the glows sit on. */
+  /* The lit ground the glows sit on, now closed at the bottom by the third
+     colour of the gradient so the page is lit from every corner. */
   &.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%);
+      radial-gradient(50rem 35rem at 95% 5%, rgba(0, 212, 255, 0.12), transparent 60%),
+      radial-gradient(45rem 30rem at 50% 105%, rgba(255, 92, 170, 0.1), transparent 60%);
     background-attachment: fixed;
   }
 
+  /**
+   * The aurora itself: a second field of light that drifts behind the
+   * content for half a minute at a time.
+   *
+   * Only `transform` is animated, so the whole thing lives on the
+   * compositor — the page never repaints for it. It is `position: fixed`
+   * and behind the content, which on a theme this dark means it shows
+   * through every translucent surface rather than over any of them.
+   */
+  &.v-application::before {
+    content: '';
+    position: fixed;
+    inset: -20%;
+    z-index: 0;
+    pointer-events: none;
+    background-image:
+      radial-gradient(35rem 28rem at 25% 25%, rgba(124, 92, 255, 0.14), transparent 60%),
+      radial-gradient(30rem 24rem at 75% 40%, rgba(0, 212, 255, 0.1), transparent 60%),
+      radial-gradient(28rem 22rem at 55% 85%, rgba(255, 92, 170, 0.09), transparent 60%);
+    animation: vw-aurora-drift 34s ease-in-out infinite alternate;
+  }
+
   & .v-card.v-card--variant-elevated {
     background-image: radial-gradient(
       36rem 18rem at 0% 0%,
@@ -30,7 +54,7 @@
   }
 
   /* An iridescent rim, drawn in the border box only. */
-  & :is(.v-card, .v-alert)::after {
+  & :is(.v-card, .v-alert, :is(.v-list, .v-sheet, .v-banner):not(:is(.v-card, .v-overlay__content, .v-navigation-drawer, .v-expansion-panels, .v-list) *))::after {
     content: '';
     position: absolute;
     inset: 0;
@@ -45,9 +69,10 @@
     pointer-events: none;
   }
 
-  /* Filled buttons are the gradient itself. */
+  /* Filled buttons are the gradient itself — the deep one, since they
+     carry a label. */
   & .v-btn.v-btn--variant-flat.bg-primary {
-    background-image: var(--v-vw-gradient);
+    background-image: var(--v-vw-gradient-btn, var(--v-vw-gradient));
     box-shadow: 0 6px 24px rgba(124, 92, 255, 0.45);
   }
 
@@ -77,10 +102,129 @@
     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-'] {
+  /* Progress is the one element that is literally a moving gradient. */
+  & :is(.v-progress-linear__determinate, .v-progress-linear__indeterminate) {
+    background-image: var(--v-vw-gradient);
+  }
+
+  /**
+   * Tonal surfaces are a flat wash of one colour in stock Vuetify, which on
+   * this theme reads as the one place the palette gave up. The underlay is
+   * a separate element precisely so it can be repainted.
+   */
+  & :is(.v-alert__underlay, .v-chip__underlay) {
+    background-image: var(--v-vw-gradient);
+    opacity: 0.2;
+  }
+
+  /* The chrome is lit from the leading edge, like the ground under it. */
+  & :is(.v-app-bar, .v-toolbar, .v-navigation-drawer) {
+    background-image: linear-gradient(
+      100deg,
+      rgba(124, 92, 255, 0.16),
+      rgba(0, 212, 255, 0.06) 55%,
+      transparent
+    );
+  }
+
+  /**
+   * A rule that fades out at both ends rather than stopping dead.
+   *
+   * `border-image` rather than a background: `VDivider` is an `<hr>` pinned
+   * at `max-height: 0` and drawn entirely by its top border, so a
+   * background has no box to paint in. The image lands on the one edge
+   * that has a width, and a divider is straight, so the usual objection to
+   * `border-image` — that it cannot follow a rounded corner — does not
+   * apply here. The opacity is baked into the gradient because Vuetify
+   * fades the whole element by `--v-border-opacity`.
+   */
+  & .v-divider:not(.v-divider--vertical) {
+    opacity: 1;
+    border-image: linear-gradient(
+      90deg,
+      transparent,
+      rgba(155, 140, 255, 0.45) 25%,
+      rgba(0, 212, 255, 0.35) 75%,
+      transparent
+    ) 1;
+  }
+
+  /* Only the bottom border carries a width, so the image paints there
+     alone — and a table header is square, so the corner problem above
+     never comes up. */
+  & :is(.v-table thead th, .v-data-table__th) {
+    border-bottom: 1px solid transparent;
+    border-image: var(--v-vw-gradient) 1;
+  }
+
+  /* The active row is lit from its leading edge instead of barred. */
+  & .v-list-item.v-list-item--active {
+    background-image: linear-gradient(
+      90deg,
+      rgba(124, 92, 255, 0.22),
+      transparent 45%
+    );
+  }
+
+  /* A badge is a number on a gradient, so it takes the deep one too. */
+  & .v-badge__badge {
+    background-image: var(--v-vw-gradient-btn, var(--v-vw-gradient));
+  }
+
+  /* A focused field gets the same rim the cards wear. */
+  & .v-field.v-field--variant-solo-filled.v-field--focused::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: var(--v-vw-border-width);
+    background: var(--v-vw-gradient);
+    opacity: 0.7;
+    mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  /* The display and headline sizes carry the gradient; body text stays
+     legible, which is the whole reason the line is drawn here. */
+  & :is([class*='-display-'], [class*='-headline-large']) {
     background: var(--v-vw-gradient);
     background-clip: text;
     color: transparent;
   }
+
+  /* The dot is a bead of the same light the line carries. */
+  & .v-timeline-divider__dot {
+    background-image: var(--v-vw-gradient);
+    box-shadow: 0 0 16px rgba(124, 92, 255, 0.55);
+  }
+
+  /**
+   * The dot above is the gradient, so its inner disc has to be clear for
+   * that to show. Vuetify writes this one inline when `dot-color` is a
+   * plain colour, which is the single place in the package where nothing
+   * but `!important` reaches — and the `bg-` guard keeps it off a dot whose
+   * colour the author did name, since that one arrives as a class.
+   */
+  & .v-timeline-divider__inner-dot:not([class*='bg-']) {
+    background-color: transparent !important;
+  }
+}
+
+@keyframes vw-aurora-drift {
+  from {
+    transform: translate3d(-3%, -2%, 0) scale(1.06);
+  }
+
+  to {
+    transform: translate3d(3%, 2%, 0) scale(1.14);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .v-theme--aurora.v-application::before {
+    animation: none;
+  }
 }

package/src/styles/themes/brutalist.css

@@ -38,14 +38,16 @@
     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));
   }
 
-
+  /* The dot is a block on a beam. */
+  & .v-timeline-divider__dot {
+    border: var(--v-vw-border-width) solid rgb(var(--v-shadow-color));
+    box-shadow: var(--vw-brut-offset) var(--vw-brut-offset) 0 rgb(var(--v-shadow-color));
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/styles/themes/calm.css

@@ -7,23 +7,16 @@
     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/candy.css

@@ -0,0 +1,113 @@
+/**
+ * Candy — everything on screen is a stuffed cushion.
+ *
+ * Three layers separate cloth from plastic. A white highlight along the top
+ * inside edge, where light catches a padded surface. A shading along the
+ * bottom inside edge, where the padding rolls away from it. And a wide,
+ * low-contrast drop that spreads far more than it darkens, the way
+ * something soft resting on a table casts light rather than a hard edge.
+ *
+ * Pressing squashes: the shape sinks, gives up a little width, and its
+ * shadow shortens with it — plush deforms, it does not click.
+ *
+ * The padding is the ink colour at low alpha rather than a darker shade of
+ * each element: it has to sit under six theme colours at once, and the pink
+ * of `--v-shadow-color` reads as a halo under the teal and the green.
+ */
+.v-theme--candy {
+  --vw-candy-pad:
+    inset 0 2px 0 rgba(255, 255, 255, 0.55),
+    inset 0 -3px 0 rgba(var(--v-theme-on-surface), 0.08);
+  --vw-candy-rest:
+    0 3px 6px rgba(var(--v-shadow-color), 0.16),
+    0 10px 22px rgba(var(--v-shadow-color), 0.13);
+  --vw-candy-squash:
+    0 1px 3px rgba(var(--v-shadow-color), 0.2),
+    0 3px 9px rgba(var(--v-shadow-color), 0.12);
+  /* The soft drop reaches past the chip it lifts — see core.css. */
+  --v-vw-relief-inset: 4px;
+
+  & .v-btn.v-btn:is(.v-btn--variant-flat, .v-btn--variant-elevated):not(.v-btn--disabled) {
+    box-shadow: var(--vw-candy-pad), var(--vw-candy-rest);
+    transition: box-shadow var(--v-vw-motion-duration) var(--v-vw-motion-ease);
+  }
+
+  /* The squash itself is `vw-press-scale` and `vw-press-shift` in core; all
+     this has to do is take the shadow down with it. */
+  & .v-btn.v-btn:is(.v-btn--variant-flat, .v-btn--variant-elevated):not(.v-btn--disabled):active {
+    box-shadow: var(--vw-candy-pad), var(--vw-candy-squash);
+  }
+
+  /* Pills are small enough that the full pad closes up on them, so they
+     take the highlight and a short drop only. */
+  & .v-chip.v-chip:not(.v-chip--variant-text, .v-chip--variant-plain) {
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.5),
+      0 2px 5px rgba(var(--v-shadow-color), 0.14);
+  }
+
+  & :is(.v-card.v-card--variant-elevated, .v-alert.v-alert--variant-tonal) {
+    box-shadow:
+      inset 0 2px 0 rgba(255, 255, 255, 0.6),
+      0 6px 16px rgba(var(--v-shadow-color), 0.12),
+      0 20px 44px rgba(var(--v-shadow-color), 0.1);
+  }
+
+  & .v-card.v-card--variant-elevated {
+    transition: box-shadow var(--v-vw-motion-duration) var(--v-vw-motion-ease);
+  }
+
+  /* The lift is `vw-hover-lift`, on the theme's own overshooting easing —
+     something soft that is picked up bounces past where it settles. */
+  & .v-card.v-card--variant-elevated.v-card--link:hover {
+    box-shadow:
+      inset 0 2px 0 rgba(255, 255, 255, 0.6),
+      0 10px 22px rgba(var(--v-shadow-color), 0.14),
+      0 28px 60px rgba(var(--v-shadow-color), 0.12);
+  }
+
+  /**
+   * 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.
+   */
+  & .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));
+  }
+
+  & :is(.v-switch__track, .v-slider-track__background) {
+    box-shadow: inset 0 2px 4px rgba(var(--v-shadow-color), 0.22);
+  }
+
+  /* The thumbs are the plushest things on screen: a lit top, a soft body,
+     and a halo standing in for the fibres a real one would have. */
+  & :is(.v-switch__thumb, .v-slider-thumb__surface) {
+    box-shadow:
+      inset 0 2px 0 rgba(255, 255, 255, 0.65),
+      0 2px 5px rgba(var(--v-shadow-color), 0.32),
+      0 0 0 5px rgba(var(--v-theme-primary), 0.14);
+  }
+
+  /* `VTabs` runs inset here, so the pill behind the active tab is the
+     indicator, and it is padded like everything else. */
+  & .v-tabs--inset .v-tab__slider {
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.5),
+      0 4px 12px rgba(var(--v-theme-primary), 0.24);
+  }
+
+  /* The timeline is a ribbon, so it gets ends rather than corners. */
+  & :is(.v-timeline-divider__before, .v-timeline-divider__after) {
+    border-radius: 999px;
+  }
+
+  & .v-timeline-divider__dot {
+    box-shadow:
+      inset 0 2px 0 rgba(255, 255, 255, 0.6),
+      0 3px 8px rgba(var(--v-shadow-color), 0.22);
+  }
+}

package/src/styles/themes/clay.css

@@ -26,6 +26,19 @@
       -2px -2px 5px rgba(255, 255, 255, 0.6);
   }
 
+  /**
+   * The lift is composed against this theme's own ground: a white
+   * highlight top-left, a dark shadow bottom-right. Inside a surface that
+   * paints its own colour — `color=` on a card, a coloured bar, a filled
+   * alert — the highlight has nothing to blend into and reads as a halo
+   * around the control, so the relief is dropped there and the control
+   * keeps its flat fill. Vuetify only emits `bg-*` when an author asked
+   * for a colour, so untouched surfaces are unaffected.
+   */
+  & [class*='bg-'] :is(.v-btn.v-btn, .v-chip.v-chip) {
+    box-shadow: none;
+  }
+
   & .v-btn:active:not(.v-btn--disabled) {
     box-shadow:
       4px 4px 10px rgba(var(--v-shadow-color), 0.16),
@@ -57,4 +70,15 @@
   & .v-tab__slider {
     border-radius: 5px;
   }
+
+  /* The line is a channel pressed into the ground, not drawn on it. */
+  & :is(.v-timeline-divider__before, .v-timeline-divider__after) {
+    box-shadow:
+      inset 2px 2px 5px rgba(var(--v-shadow-color), 0.18),
+      inset -2px -2px 5px rgba(255, 255, 255, 0.8);
+  }
+
+  & .v-timeline-divider__dot {
+    box-shadow: var(--vw-clay-lift);
+  }
 }

package/src/styles/themes/graphite.css

@@ -0,0 +1,63 @@
+/**
+ * Graphite — the theme is one subtraction and one rule.
+ *
+ * The subtraction: nothing casts a shadow. On a near-black ground a drop
+ * shadow has nothing to fall on, so every elevation Vuetify draws reads as
+ * a grey smudge. Take them all away and depth has to come from the two
+ * things that survive at this contrast — a surface a few percent lighter,
+ * and a one-pixel line. Floating overlays are the exception and keep a
+ * shadow through `--v-vw-overlay-shadow`, because they have to separate
+ * from the page rather than sit on it.
+ *
+ * The second rule: anything the interface says about itself — a column
+ * name, a status, a path — is set in mono at a small size, and anything the
+ * user wrote is not. It is the oldest convention in developer tooling and it
+ * costs nothing but a font, while carrying the whole "built by engineers"
+ * reading that a colour cannot.
+ */
+.v-theme--graphite {
+  --vw-graphite-label: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
+
+  & :is(
+    .v-card.v-card,
+    .v-btn.v-btn,
+    .v-chip.v-chip,
+    .v-alert.v-alert,
+    .v-table.v-table,
+    .v-expansion-panels.v-expansion-panels,
+    .v-list.v-list,
+    .v-sheet.v-sheet
+  ) {
+    box-shadow: none;
+  }
+
+  /**
+   * An elevated card lost the only edge it had, so it draws the line the
+   * outlined variant would have. `border` rather than a ring shadow: the
+   * card owns its box here, and a hairline that rounds with the corner is
+   * the whole visual language of the theme.
+   */
+  & .v-card.v-card--variant-elevated {
+    border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+
+  /* Column names are labels the table gives itself: mono, small, spaced. */
+  & :is(.v-table thead th, .v-data-table__th) {
+    font-family: var(--vw-graphite-label);
+    font-size: 0.6875rem;
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    border-bottom: 1px solid rgba(var(--v-border-color), 0.2);
+  }
+
+  /* A status is a label too, and a breadcrumb trail is a path. */
+  & :is(.v-chip.v-chip--size-x-small, .v-chip.v-chip--size-small, .v-breadcrumbs-item) {
+    font-family: var(--vw-graphite-label);
+    font-size: 0.6875rem;
+    letter-spacing: 0.02em;
+  }
+
+  & .v-breadcrumbs-divider {
+    font-family: var(--vw-graphite-label);
+    opacity: 0.5;
+  }
+}

package/src/styles/themes/liquidGlass.css

@@ -115,7 +115,6 @@
       0 2px 8px rgba(var(--v-shadow-color), 0.28);
   }
 
-
   & [class*='-title-'] {
     letter-spacing: -0.01em;
   }
@@ -146,7 +145,6 @@
     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) {