vuetiwatch 0.2.0 → 0.2.2

package/src/themes/slate.ts

@@ -1,4 +1,4 @@
-import { bars, controls, fields, icons, tables } from '../util/defaults.js'
+import { bars, controls, fields, icons, overlays, ripple, tables } from '../util/defaults.js'
 import { defineTheme } from '../util/defineTheme.js'
 
 /**
@@ -32,13 +32,24 @@ export const slate = defineTheme({
       error: '#C53030',
       info: '#2B6CB0',
       success: '#2F855A',
-      warning: '#B7791F',
+      /**
+       * Deepened rather than re-inked. Vuetify picks the label colour by
+       * APCA and settles for about 3:1 on WCAG, which is the bar for large
+       * text rather than for a button label — so this theme states `on-*`
+       * wherever the automatic pick falls short.
+       *
+       * Warning is the case where doing that made things worse. The ochre
+       * sat where WCAG wanted black and APCA wanted white by a wide margin
+       * (71 to 39), and the forced dark label did not even clear 4.5:1
+       * (4.48:1). Taking 12 per cent of lightness out of the hue satisfies both:
+       * white now reads 4.53:1 on the filled button, APCA 79, and the colour
+       * as text on the surface goes from 3.64:1 — under the bar it was
+       * being held to elsewhere — to 4.53:1. The label is left to the
+       * automatic pick, which is white.
+       */
+      warning: '#A16B1B',
       'on-surface': '#1A202C',
       'on-background': '#1A202C',
-      // Vuetify picks the label colour by luminance and settles for
-      // about 3:1, which is the bar for large text rather than for a
-      // button label. Measured on the filled buttons: warning 3.6:1 → 4.5:1.
-      'on-warning': '#1A202C',
     },
     variables: {
       /* A panel standing on its own — a bare list, sheet, banner or table.
@@ -72,6 +83,20 @@ export const slate = defineTheme({
       'vw-pop-duration': '160ms',
       'vw-focus-ring': '2px solid rgb(var(--v-theme-primary))',
 
+      // The dashboard's own tempo, applied to the panels that float over it.
+      'vw-overlay-duration': '120ms',
+      'vw-overlay-exit': '90ms',
+      // The focus ring above carries the keyboard; the wash only has to not
+      // fight it. The active row, though, has to be findable in a table of
+      // a hundred.
+      'focus-opacity': 0.12,
+      'activated-opacity': 0.12,
+      'disabled-opacity': 0.42,
+      'theme-code': '#EAEEF3',
+      'theme-on-code': '#1A202C',
+      'theme-kbd': '#EAEEF3',
+      'theme-on-kbd': '#1A202C',
+
       // Dense and structural: a 2px rule and a square dot.
       'vw-timeline-line': 'rgba(var(--v-theme-primary), 0.35)',
       'vw-timeline-line-width': '2px',
@@ -109,5 +134,17 @@ export const slate = defineTheme({
       sortAsc: 'mdi-menu-up',
       sortDesc: 'mdi-menu-down',
     }),
+    /**
+     * A dropdown drops. Everything else fades: a dialog over a dashboard is
+     * a change of subject, not an entrance, and the data behind it should
+     * not be dragged around while it arrives.
+     */
+    overlays({
+      dialog: 'fade-transition',
+      menu: 'slide-y-transition',
+      tooltip: 'fade-transition',
+    }),
+    // Dense rows and a spreading ink blot do not go together.
+    ripple(false),
   ],
 })

package/src/themes/soft.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'
 
 /**
@@ -35,13 +35,35 @@ export const soft = defineTheme({
       warning: '#F5B851',
       'on-surface': '#2E2A3B',
       'on-background': '#2E2A3B',
-      // Vuetify's automatic pick lands on white here, which is worse by
-      // both models — this reads w6.0/a56 against w2.3/a50.
-      'on-secondary': '#2E2A3B',
-      // Vuetify picks the label colour by luminance and settles for
-      // about 3:1, which is the bar for large text rather than for a
-      // button label. Measured on the filled buttons: error 2.8:1 → 4.9:1.
-      'on-error': '#2E2A3B',
+      /**
+       * The one stated exception in the package, and it is deliberate.
+       *
+       * White on these pastels does not clear WCAG's 4.5:1 for a button
+       * label: secondary 2.33:1, error 2.84:1, info 2.25:1, success 2.21:1,
+       * warning 1.77:1. The dark ink that white replaced carried 4.89:1 to
+       * 11.86:1, and APCA agrees with WCAG on every one of them — so this
+       * is not a case of the two models disagreeing and a hue needing a few
+       * points of lightness, which is how every other theme here resolves
+       * it. The only arrangement that gets white over the bar takes these
+       * hues down 23 to 39 per cent, and a pastel darkened by a third is
+       * not a pastel: it would be a different theme wearing this one's name.
+       *
+       * So the trade is made the other way round, once, in the theme whose
+       * whole proposition is softness — and it is a trade, not an oversight.
+       * A screen that has to be read by everyone should reach for a theme
+       * that measures; `atlas` and `graphite` exist for that, and `soft` is
+       * for the onboarding flow and the marketing page where the palette is
+       * the point. `docs/contrast.md` says as much next to the claim it
+       * qualifies.
+       *
+       * `primary` is not listed because it needs no help: at #705EEF white
+       * already reads 4.63:1 and is the automatic pick.
+       */
+      'on-secondary': '#FFFFFF',
+      'on-error': '#FFFFFF',
+      'on-info': '#FFFFFF',
+      'on-success': '#FFFFFF',
+      'on-warning': '#FFFFFF',
     },
     variables: {
       /* A panel standing on its own — a bare list, sheet, banner or table.
@@ -69,6 +91,16 @@ export const soft = defineTheme({
       'vw-pop-scale': '1.22',
       'vw-pop-duration': '260ms',
 
+      // Unhurried here as well, with the exit a touch quicker so a
+      // dismissed panel does not linger.
+      'vw-overlay-duration': '250ms',
+      'vw-overlay-exit': '180ms',
+      // Tonal fills are this theme's colour, so they are drawn to be seen.
+      'focus-opacity': 0.14,
+      'activated-opacity': 0.14,
+      // Bigger initials inside the circle, to match everything else here.
+      'vw-avatar-ratio': '0.44',
+
       // Thick and pastel, matching the radii.
       'vw-timeline-line': 'rgba(var(--v-theme-primary), 0.25)',
       'vw-timeline-line-width': '5px',
@@ -102,5 +134,15 @@ export const soft = defineTheme({
       ratingEmpty: 'mdi-heart-outline',
       close: 'mdi-close-circle',
     }),
+    /**
+     * Friendly rather than efficient: a dialog swells into place, a menu
+     * drops from the control that opened it. The ripple stays — this is one
+     * of the themes with a surface soft enough to justify it.
+     */
+    overlays({
+      dialog: 'scale-transition',
+      menu: 'slide-y-transition',
+      tooltip: 'scale-transition',
+    }),
   ],
 })

package/src/util/defaults.ts

@@ -38,6 +38,36 @@ const CONTROL_COMPONENTS = [
   'VSwitch',
 ] as const
 
+/**
+ * Everything that draws a Material ripple.
+ *
+ * Longer than it looks, because a defaults key is matched by component
+ * name and several of these only look like a `VBtn`. The tab, the app-bar
+ * nav icon and the fab each declare their own prop set and hand it to a
+ * `VBtn` themselves, so a `VBtn` default never reaches them; the checkbox,
+ * the radio and the switch all reach one `VSelectionControl` underneath
+ * but arrive there under three different names. A theme that turned the
+ * ripple off on buttons alone would still get one from the hamburger and
+ * from every tick box on the screen.
+ */
+const RIPPLE_COMPONENTS = [
+  'VBtn',
+  'VTab',
+  'VAppBarNavIcon',
+  'VFab',
+  'VChip',
+  'VCard',
+  'VListItem',
+  'VExpansionPanelTitle',
+  'VStepperItem',
+  'VRating',
+  'VCheckbox',
+  'VCheckboxBtn',
+  'VRadio',
+  'VRadioGroup',
+  'VSwitch',
+] as const
+
 /** Containers that share the `flat` / `border` props. */
 const BAR_COMPONENTS = [
   'VAppBar',
@@ -73,6 +103,60 @@ export const bars = (props: Props): VuetiwatchDefaults =>
 export const surfaces = (props: Props): VuetiwatchDefaults =>
   spread(SURFACE_COMPONENTS, props)
 
+/**
+ * Turns the Material ripple off — or back on — everywhere one is drawn.
+ *
+ * The ripple is an animation about the weight of a surface, so a theme
+ * with no weight to describe is better off without it: it delays the
+ * moment a control looks like it answered, which on a screen someone
+ * works in all day is the one thing motion must never do.
+ */
+export const ripple = (on: boolean): VuetiwatchDefaults =>
+  spread(RIPPLE_COMPONENTS, { ripple: on })
+
+/**
+ * How each floating surface arrives.
+ *
+ * Vuetify names its transitions and resolves them from a string, so this
+ * is an ordinary prop like any other — which is what lets a theme own its
+ * overlays as well as its colours. `false` means no animation at all: the
+ * surface is simply there, which is the honest answer for a theme that
+ * draws no depth to move through.
+ *
+ * `menu` reaches the select, the autocomplete and the combobox as well,
+ * but not by one route: autocomplete and combobox let the `VMenu` they
+ * render take the global default, while `VSelect` declares a `transition`
+ * prop of its own and hands it down, which shadows that default entirely.
+ * So the select is named here too, and a theme still states its menus once.
+ */
+export interface VuetiwatchOverlays {
+  /** A modal. Vuetify's own is `dialog-transition`. */
+  dialog?: string | false
+  /** A dropdown, a select's list, a context menu. */
+  menu?: string | false
+  /** A tooltip. Vuetify scales it in and fades it out. */
+  tooltip?: string | false
+  /** A snackbar. */
+  snackbar?: string | false
+}
+
+export function overlays (set: VuetiwatchOverlays): VuetiwatchDefaults {
+  const byComponent = {
+    VDialog: set.dialog,
+    VMenu: set.menu,
+    // Shadows the `VMenu` default above rather than inheriting it.
+    VSelect: set.menu,
+    VTooltip: set.tooltip,
+    VSnackbar: set.snackbar,
+  }
+
+  return Object.fromEntries(
+    Object.entries(byComponent)
+      .filter(([, transition]) => transition !== undefined)
+      .map(([name, transition]) => [name, { transition }]),
+  )
+}
+
 /** Applies the same `density` to lists and both table components. */
 export const tables = (density: 'default' | 'comfortable' | 'compact'): VuetiwatchDefaults => ({
   VList: { density },