@jeremyckahn/farmhand 1.23.3 → 1.23.4

package/src/handlers/ui-events.tsx

@@ -541,8 +541,13 @@ export default {
     this: Farmhand,
     updateServiceWorker: (reloadPage?: boolean) => Promise<void>
   ) {
-    this.showNotification(UPDATE_AVAILABLE, 'success', () => {
-      updateServiceWorker(true)
-    })
+    this.showNotification(
+      UPDATE_AVAILABLE,
+      'success',
+      () => {
+        updateServiceWorker(true)
+      },
+      'Reload'
+    )
   },
 }

package/src/index.tsx

@@ -9,8 +9,6 @@ import { HashRouter as Router, Route } from 'react-router-dom'
 
 import Farmhand from './components/Farmhand/index.js'
 import { features } from './config.js'
-import '@fontsource/francois-one'
-import '@fontsource/public-sans'
 
 const FarmhandRoute = (props: any) => <Farmhand {...{ ...props, features }} />
 

package/src/mui-theme.ts

@@ -1,5 +1,18 @@
+import { darken, Theme } from '@mui/material/styles/index.js'
+import { createElement } from 'react'
 import createTheme from '@mui/material/styles/createTheme.js'
+import type { Shadows } from '@mui/material/styles/shadows.js'
 
+import {
+  ArrowDropDownIcon,
+  CheckBoxIcon,
+  CheckBoxOutlineBlankIcon,
+  ErrorIcon,
+  IndeterminateCheckBoxIcon,
+  InfoIcon,
+  SuccessIcon,
+  WarningIcon,
+} from './components/PixelIcon/index.js'
 import blueStripeBg from './img/ui/blue-stripe-bg.png'
 import lightBlueStripeBg from './img/ui/light-blue-stripe-bg.png'
 import {
@@ -7,7 +20,61 @@ import {
   cardStyleSx,
   spriteShadowSx,
 } from './styles/sx.js'
-import { breakpoints, colors, layout } from './styles/tokens.js'
+import { fontFaces } from './styles/fonts.js'
+import {
+  pixelBevel,
+  pixelBevelPressed,
+  pixelFrameSx,
+  pixelPressedSx,
+  pixelShadowColor,
+  px,
+} from './styles/pixel.js'
+import { breakpoints, colors, fonts, layout } from './styles/tokens.js'
+
+type PaletteColorName =
+  'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'
+
+const paletteColorNames = new Set<string>([
+  'primary',
+  'secondary',
+  'error',
+  'warning',
+  'info',
+  'success',
+])
+
+const isPaletteColorName = (color: unknown): color is PaletteColorName =>
+  typeof color === 'string' && paletteColorNames.has(color)
+
+// Pixel art outlines read best when they're a deep shade of the fill color
+// rather than a flat black.
+const outlineFor = (theme: Theme, color: unknown) =>
+  isPaletteColorName(color)
+    ? darken(theme.palette[color].main, 0.5)
+    : colors.neutralOutline
+
+// Every elevation gets the same hard, unblurred pixel art drop shadow rather
+// than MUI's soft Material Design shadows.
+const pixelShadow = `${px(1)} ${px(1)} 0 0 ${pixelShadowColor}`
+const shadows = [
+  'none',
+  ...Array<string>(24).fill(pixelShadow),
+] as unknown as Shadows
+
+// Shared by Button and Fab: a raised 9-slice frame that gets pushed into its
+// shadow when pressed.
+const raisedControlSx = (outline: string) =>
+  ({
+    ...pixelFrameSx({ outline, shadow: true }),
+    boxShadow: pixelBevel(),
+    '&:hover': { boxShadow: pixelBevel() },
+    '&.Mui-focusVisible': { boxShadow: pixelBevel() },
+    '&:active': pixelPressedSx(outline),
+    '&.Mui-disabled': {
+      ...pixelFrameSx({ outline: colors.disabledOutline, shadow: 'pressed' }),
+      boxShadow: 'none',
+    },
+  }) as const
 
 // These global styles used to live in Farmhand.sass, scoped by a `.Farmhand`
 // class applied to many DOM roots across the app (including MUI Dialogs,
@@ -15,7 +82,13 @@ import { breakpoints, colors, layout } from './styles/tokens.js'
 // MuiCssBaseline is a direct replacement that also sidesteps the reason
 // that class trick existed in the first place (styling portalled content).
 const globalStyleOverrides = {
-  body: { overscrollBehavior: 'contain' },
+  body: {
+    overscrollBehavior: 'contain',
+    // The pixel fonts only ship the weights they're designed for. Faux bold
+    // and italics smear their pixel grid, so don't let the browser
+    // synthesize them.
+    fontSynthesis: 'none',
+  },
   'ul, ol': { listStyle: 'none', margin: 0, padding: 0 },
   p: { margin: 0 },
   '.markdown': {
@@ -35,7 +108,7 @@ const globalStyleOverrides = {
     width: '1px',
   },
   'h4, h5, h6, p, p.MuiTypography-root': {
-    fontFamily: '"Public Sans", sans-serif',
+    fontFamily: fonts.body,
   },
   'h3, h4, h5, h6': { fontWeight: 'bold' },
   h2: { fontSize: '1.4em' },
@@ -51,7 +124,7 @@ const globalStyleOverrides = {
   th: { fontWeight: 'bold' },
   'h1, h2, h3, h4, h5, h6, legend, td, th, .MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3, .MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6, .MuiButtonBase-root':
     {
-      fontFamily: '"Francois One", sans-serif',
+      fontFamily: fonts.display,
     },
   '.danger-text': { color: colors.error },
   '.success-text': { color: colors.success },
@@ -77,42 +150,51 @@ export default createTheme({
   palette: {
     mode: 'light',
   },
-  shape: {},
+  // Pixel art has no anti-aliased curves. Corners are notched by the 9-slice
+  // frames instead.
+  shape: { borderRadius: 0 },
+  shadows,
   typography: {
-    fontFamily: '"Public Sans", sans-serif',
+    fontFamily: fonts.body,
     // Buttons and Tabs derive their default styles from this rather than
     // the `.MuiButtonBase-root` CssBaseline override below, which loses the
     // cascade to their own emotion-generated styles.
     button: {
-      fontFamily: '"Francois One", sans-serif',
+      fontFamily: fonts.display,
       textTransform: 'none',
     },
     // DialogTitle (used by every modal header, e.g. Farmer's Log, Price
     // Events) renders variant="h6". Same cascade issue as `button` above.
     h6: {
-      fontFamily: '"Francois One", sans-serif',
+      fontFamily: fonts.display,
       fontSize: '1.4em',
     },
     // CardHeader titles default to variant="h5" when no avatar is passed
     // (e.g. the peer name headers in the Active Players modal). Same
     // cascade issue as `button`/`h6` above.
     h5: {
-      fontFamily: '"Francois One", sans-serif',
+      fontFamily: fonts.display,
     },
   },
   components: {
     MuiCssBaseline: {
-      styleOverrides: globalStyleOverrides,
+      // Each @font-face rule needs its own style object: emotion collapses
+      // an array of them under a single '@font-face' key into one rule.
+      styleOverrides: () => [
+        ...fontFaces.map(fontFace => ({ '@font-face': fontFace })),
+        globalStyleOverrides,
+      ],
     },
     MuiTabs: {
       styleOverrides: {
-        root: ({ theme }) => ({
-          background: '#ffeec6',
-          borderColor: '#9b6d00',
-          borderWidth: 2,
-          borderStyle: 'solid',
-          borderRadius: `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0 0`,
-        }),
+        root: {
+          ...pixelFrameSx({ outline: colors.cardOutline }),
+          backgroundColor: '#ffeec6',
+          boxShadow: pixelBevel(),
+        },
+        indicator: {
+          height: px(1),
+        },
       },
     },
     MuiInput: {
@@ -128,7 +210,7 @@ export default createTheme({
           ...cardStyleSx(theme),
           '&.is-selected': cardStyleSelectedSx,
           '& .MuiCard-root': {
-            background: colors.cardBackgroundNested,
+            backgroundColor: colors.cardBackgroundNested,
           },
         }),
       },
@@ -163,7 +245,57 @@ export default createTheme({
     },
     MuiButtonBase: {
       styleOverrides: {
-        root: { textTransform: 'none' },
+        root: {
+          textTransform: 'none',
+          // Ripples and focus pulses are circular by default, which clashes
+          // with the square pixel art controls.
+          '& .MuiTouchRipple-root .MuiTouchRipple-child': { borderRadius: 0 },
+        },
+      },
+    },
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true,
+      },
+      styleOverrides: {
+        root: ({ ownerState, theme }) => {
+          const outline = outlineFor(theme, ownerState.color)
+
+          switch (ownerState.variant) {
+            case 'contained':
+              return raisedControlSx(outline)
+
+            case 'outlined':
+              return {
+                ...pixelFrameSx({ outline, shadow: true }),
+                '&:hover': pixelFrameSx({ outline, shadow: true }),
+                '&:active': {
+                  ...pixelPressedSx(outline),
+                  boxShadow: 'none',
+                },
+                '&.Mui-disabled': pixelFrameSx({
+                  outline: colors.disabledOutline,
+                  shadow: 'pressed',
+                }),
+              }
+
+            default:
+              // Text buttons get an invisible frame of the same size so
+              // they don't shift the layout when toggled to another variant
+              // (e.g. selected items in ItemList and Toolbelt).
+              return pixelFrameSx({ outline: 'transparent', shadow: 'pressed' })
+          }
+        },
+      },
+    },
+    MuiFab: {
+      styleOverrides: {
+        root: ({ ownerState, theme }) => ({
+          ...raisedControlSx(outlineFor(theme, ownerState.color)),
+          // Fabs are normally round. Keep them square (with notched
+          // corners) to match the rest of the pixel art UI.
+          borderRadius: 0,
+        }),
       },
     },
     MuiPaper: {
@@ -171,9 +303,76 @@ export default createTheme({
         rounded: { backgroundColor: '#fff7e7' },
       },
     },
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          ...pixelFrameSx({ outline: colors.cardOutline, shadow: true }),
+          boxShadow: pixelBevel(),
+        },
+      },
+    },
+    MuiAccordion: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          ...cardStyleSx(theme),
+          '&:before': { display: 'none' },
+          '&.Mui-expanded': { margin: `${px(2)} 0` },
+        }),
+      },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        notchedOutline: {
+          borderWidth: 2,
+        },
+      },
+    },
+    MuiSwitch: {
+      styleOverrides: {
+        thumb: {
+          borderRadius: 0,
+          boxShadow: `${pixelBevel()}, ${px(1)} ${px(1)} 0 0 ${pixelShadowColor}`,
+        },
+        track: {
+          borderRadius: 0,
+        },
+      },
+    },
+    MuiSlider: {
+      styleOverrides: {
+        thumb: {
+          borderRadius: 0,
+          boxShadow: pixelBevel(),
+          '&:hover, &.Mui-focusVisible, &.Mui-active': {
+            boxShadow: pixelBevelPressed,
+          },
+          '&:before': { boxShadow: 'none' },
+        },
+        rail: { borderRadius: 0 },
+        track: { borderRadius: 0 },
+      },
+    },
+    MuiSelect: {
+      defaultProps: {
+        IconComponent: ArrowDropDownIcon,
+      },
+    },
+    MuiCheckbox: {
+      defaultProps: {
+        icon: createElement(CheckBoxOutlineBlankIcon),
+        checkedIcon: createElement(CheckBoxIcon),
+        indeterminateIcon: createElement(IndeterminateCheckBoxIcon),
+      },
+    },
     MuiTooltip: {
       styleOverrides: {
         tooltip: {
+          ...pixelFrameSx({ outline: colors.neutralOutline }),
+          backgroundColor: 'rgba(60, 50, 40, 0.94)',
+          boxShadow: pixelBevel({
+            highlight: 'rgba(255, 255, 255, 0.15)',
+            lowlight: 'rgba(0, 0, 0, 0.25)',
+          }),
           '& p': { textAlign: 'center' },
         },
       },
@@ -181,7 +380,11 @@ export default createTheme({
     MuiDialog: {
       styleOverrides: {
         root: { display: 'block' },
-        paper: { backgroundImage: `url(${lightBlueStripeBg})` },
+        paper: {
+          ...pixelFrameSx({ outline: colors.dialogOutline, shadow: true }),
+          backgroundImage: `url(${lightBlueStripeBg})`,
+          boxShadow: pixelBevel(),
+        },
       },
     },
     MuiDivider: {
@@ -190,22 +393,39 @@ export default createTheme({
       },
     },
     MuiAlert: {
+      defaultProps: {
+        iconMapping: {
+          success: createElement(SuccessIcon, { fontSize: 'inherit' }),
+          info: createElement(InfoIcon, { fontSize: 'inherit' }),
+          warning: createElement(WarningIcon, { fontSize: 'inherit' }),
+          error: createElement(ErrorIcon, { fontSize: 'inherit' }),
+        },
+      },
       styleOverrides: {
-        root: {
-          marginBottom: '1em',
-          [`@media (min-width: 0px) and (orientation: landscape)`]: {
-            top: '3.5em',
-          },
-          [`@media (min-width: ${breakpoints.sm}px)`]: { top: '4.5em' },
-          '& p': {
-            margin: '1em 0',
-            '&:first-of-type': { marginTop: 0 },
-            '&:last-child': { marginBottom: 0 },
-          },
-          '& strong': { fontWeight: 'bold' },
-          '& li': { marginLeft: '1em' },
-          '& ul li': { listStyle: 'disc' },
-          '& ol li': { listStyle: 'decimal' },
+        // 24px keeps each of the 12x12 pixel icon's art pixels at a whole
+        // number of CSS pixels (MUI's default is 22px).
+        icon: { fontSize: 24 },
+        root: ({ ownerState, theme }) => {
+          const outline = outlineFor(theme, ownerState.severity ?? 'success')
+
+          return {
+            ...pixelFrameSx({ outline, shadow: true }),
+            boxShadow: pixelBevel(),
+            marginBottom: '1em',
+            [`@media (min-width: 0px) and (orientation: landscape)`]: {
+              top: '3.5em',
+            },
+            [`@media (min-width: ${breakpoints.sm}px)`]: { top: '4.5em' },
+            '& p': {
+              margin: '1em 0',
+              '&:first-of-type': { marginTop: 0 },
+              '&:last-child': { marginBottom: 0 },
+            },
+            '& strong': { fontWeight: 'bold' },
+            '& li': { marginLeft: '1em' },
+            '& ul li': { listStyle: 'disc' },
+            '& ol li': { listStyle: 'decimal' },
+          }
         },
       },
     },

package/src/setupTests.ts

@@ -1,6 +1,22 @@
-import '@testing-library/jest-dom'
 import 'jest-extended'
-import { cleanup } from '@testing-library/react'
+
+// Conditionally import DOM matchers and React cleanup only when running in a
+// browser/JSDOM environment. Keeping them out of Node-based test runners avoids
+// loading heavy React and DOM libraries into pure logic test workers.
+if (typeof window !== 'undefined') {
+  await import('@testing-library/jest-dom')
+  const { cleanup } = await import('@testing-library/react')
+
+  afterEach(() => {
+    cleanup()
+    // Farmhand mirrors navigation state (current view, tabbed screens' active
+    // tab) into the real window.location.hash (see src/utils/hashQueryParams.ts),
+    // which - unlike React/component state - isn't reset between tests on its
+    // own and would otherwise leak into whichever test runs next in the same
+    // file.
+    window.history.replaceState({}, '', window.location.pathname)
+  })
+}
 
 const localForageStore = new Map<string, any>()
 
@@ -49,13 +65,3 @@ beforeEach(() => {
   // on a specific month is not run in tests (unless getMonth is re-mocked).
   vitest.spyOn(Date.prototype, 'getMonth').mockReturnValue(-1)
 })
-
-afterEach(() => {
-  cleanup()
-  // Farmhand mirrors navigation state (current view, tabbed screens' active
-  // tab) into the real window.location.hash (see src/utils/hashQueryParams.ts),
-  // which - unlike React/component state - isn't reset between tests on its
-  // own and would otherwise leak into whichever test runs next in the same
-  // file.
-  window.history.replaceState({}, '', window.location.pathname)
-})

package/src/strings.ts

@@ -18,7 +18,7 @@ export const COW_SOLD_TOOLTIP_TEXT =
 export const DATA_DELETED = 'Your local game data has been deleted.'
 export const INVALID_DATA_PROVIDED = 'Invalid Farmhand data provided.'
 export const UPDATE_AVAILABLE =
-  "A game update is available! Click this message to reload and see what's new."
+  "A game update is available! Reload to see what's new."
 export const SERVER_ERROR =
   'There was an issue connecting to the server. Please try again in a moment.'
 export const CONNECTING_TO_SERVER = 'Connecting...'

package/src/styles/fonts.ts

@@ -0,0 +1,73 @@
+// Pixel font faces: Jersey 10 for headings and UI labels, Jersey 20 for body
+// text, and Jersey 25 (a heavier cut of the same design) as the body bold.
+//
+// The app refers to two families, "Farmhand Display" (headings, buttons and
+// other UI labels) and "Farmhand Body" (running text), so the typefaces
+// behind them can be swapped here without touching any components.
+//
+// These are declared here rather than by importing the @fontsource CSS so
+// that each face can set `size-adjust`. Pixel fonts have much smaller glyphs
+// per em than the fonts they replaced (Francois One and Public Sans), so
+// without it every heading and paragraph in the app would need its
+// font-size tweaked. The adjustments below match each face's cap height to
+// that of the font it replaced.
+
+import jersey10Latin from '@fontsource/jersey-10/files/jersey-10-latin-400-normal.woff2'
+import jersey10LatinExt from '@fontsource/jersey-10/files/jersey-10-latin-ext-400-normal.woff2'
+import jersey20Latin from '@fontsource/jersey-20/files/jersey-20-latin-400-normal.woff2'
+import jersey20LatinExt from '@fontsource/jersey-20/files/jersey-20-latin-ext-400-normal.woff2'
+import jersey25Latin from '@fontsource/jersey-25/files/jersey-25-latin-400-normal.woff2'
+import jersey25LatinExt from '@fontsource/jersey-25/files/jersey-25-latin-ext-400-normal.woff2'
+
+// Copied from the @fontsource CSS.
+const unicodeRanges = {
+  latin:
+    'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
+  latinExt:
+    'U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF',
+}
+
+const fontFace = (
+  family: string,
+  weight: number,
+  sizeAdjust: string,
+  url: string,
+  unicodeRange: string
+) => ({
+  // Quoted because unquoted family names can't contain a word that starts
+  // with a digit.
+  fontFamily: `"${family}"`,
+  fontStyle: 'normal',
+  fontDisplay: 'swap',
+  fontWeight: weight,
+  sizeAdjust,
+  src: `url("${url}") format('woff2')`,
+  unicodeRange,
+})
+
+export const fontFaces = [
+  fontFace('Farmhand Display', 400, '140%', jersey10Latin, unicodeRanges.latin),
+  fontFace(
+    'Farmhand Display',
+    400,
+    '140%',
+    jersey10LatinExt,
+    unicodeRanges.latinExt
+  ),
+  fontFace('Farmhand Body', 400, '124%', jersey20Latin, unicodeRanges.latin),
+  fontFace(
+    'Farmhand Body',
+    400,
+    '124%',
+    jersey20LatinExt,
+    unicodeRanges.latinExt
+  ),
+  fontFace('Farmhand Body', 700, '120%', jersey25Latin, unicodeRanges.latin),
+  fontFace(
+    'Farmhand Body',
+    700,
+    '120%',
+    jersey25LatinExt,
+    unicodeRanges.latinExt
+  ),
+]

package/src/styles/pixel.ts

@@ -0,0 +1,151 @@
+// Retro pixel art UI chrome built on CSS 9-slice scaling (`border-image`).
+//
+// Each frame is a tiny SVG "sprite" (a few pixels square) that the browser
+// slices into corners, edges and a center. Corners are drawn at a fixed
+// size and edges stretch, so a frame scales to any element size while every
+// art pixel stays exactly PIXEL_SIZE CSS pixels. Because the sprites are
+// generated as SVGs, their colors can be derived from the MUI palette at
+// runtime instead of needing a hand-drawn PNG per color.
+//
+// Only the outline, the notched corners and the hard drop shadow live in
+// the 9-slice image. The element's background is clipped to its padding box
+// so it fills the frame's interior, and the bevel highlight is drawn with
+// inset box-shadows. That keeps `backgroundColor` overrides (hover states,
+// selected cards, palette colors, etc.) working without regenerating any
+// images.
+
+/**
+ * The size, in CSS pixels, of one "art pixel" in the UI chrome.
+ */
+export const PIXEL_SIZE = 3
+
+/**
+ * Converts a number of art pixels into a CSS length.
+ */
+export const px = (units: number) => `${units * PIXEL_SIZE}px`
+
+/**
+ * Converts a pixel map into a CSS `url()` for an SVG data URI. Each string in
+ * `rows` is one row of pixels, and each character is a key of `palette`. A
+ * `.` is a transparent pixel.
+ */
+export const pixelArtUrl = (
+  rows: string[],
+  palette: Record<string, string>
+): string => {
+  const height = rows.length
+  const width = rows[0].length
+  let rects = ''
+
+  rows.forEach((row, y) => {
+    ;[...row].forEach((char, x) => {
+      const fill = palette[char]
+
+      if (char === '.' || !fill) return
+
+      rects += `<rect x="${x}" y="${y}" width="1" height="1" fill="${fill}"/>`
+    })
+  })
+
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" shape-rendering="crispEdges">${rects}</svg>`
+
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`
+}
+
+// O = outline, D = drop shadow
+//
+// A 1px notch in each corner gives the classic pixel art "rounded" box. The
+// center pixel is left transparent; the element's own background shows
+// through it.
+const FRAME = ['.O.', 'O.O', '.O.']
+const FRAME_SLICE = '1'
+const FRAME_WIDTH = px(1)
+
+// Same as FRAME, plus a hard drop shadow offset by one art pixel to the
+// bottom right. The right and bottom slices are two pixels wide to hold the
+// shadow.
+const SHADOWED_FRAME = ['.O..', 'O.OD', '.ODD', '.DD.']
+const SHADOWED_FRAME_SLICE = '1 2 2 1'
+const SHADOWED_FRAME_WIDTH = `${px(1)} ${px(2)} ${px(2)} ${px(1)}`
+
+export const pixelShadowColor = 'rgba(0, 0, 0, 0.3)'
+
+export interface PixelFrameOptions {
+  /**
+   * The outline color.
+   */
+  outline: string
+  /**
+   * Whether to render a hard drop shadow. When this is `'pressed'`, space
+   * for the shadow is preserved (so the element's size doesn't change) but
+   * the shadow itself is not drawn. Pair that with `pixelPressedSx`.
+   */
+  shadow?: boolean | 'pressed'
+}
+
+/**
+ * Returns sx styles that render a scalable 9-slice pixel art frame around an
+ * element.
+ */
+export const pixelFrameSx = ({
+  outline,
+  shadow = false,
+}: PixelFrameOptions) => {
+  const rows = shadow ? SHADOWED_FRAME : FRAME
+  const slice = shadow ? SHADOWED_FRAME_SLICE : FRAME_SLICE
+  const width = shadow ? SHADOWED_FRAME_WIDTH : FRAME_WIDTH
+  const image = pixelArtUrl(rows, {
+    O: outline,
+    D: shadow === true ? pixelShadowColor : 'transparent',
+  })
+
+  return {
+    borderStyle: 'solid',
+    borderColor: 'transparent',
+    borderWidth: width,
+    borderRadius: 0,
+    borderImageSource: image,
+    borderImageSlice: slice,
+    borderImageWidth: width,
+    borderImageRepeat: 'stretch',
+    // Keep the background inside the outline so the notched corners and the
+    // drop shadow stay transparent.
+    backgroundClip: 'padding-box',
+  } as const
+}
+
+/**
+ * Returns a `box-shadow` value that draws a one-art-pixel bevel inside an
+ * element: a light edge on the top and left, and a dark edge on the bottom
+ * and right.
+ */
+export const pixelBevel = ({
+  highlight = 'rgba(255, 255, 255, 0.45)',
+  lowlight = 'rgba(0, 0, 0, 0.12)',
+}: { highlight?: string; lowlight?: string } = {}) =>
+  `inset ${px(1)} ${px(1)} 0 ${highlight}, inset -${px(1)} -${px(1)} 0 ${lowlight}`
+
+/**
+ * Inverted bevel for pressed/active controls.
+ */
+export const pixelBevelPressed = pixelBevel({
+  highlight: 'rgba(0, 0, 0, 0.15)',
+  lowlight: 'rgba(255, 255, 255, 0.25)',
+})
+
+/**
+ * A crisp (unblurred) drop shadow for sprites and other arbitrarily shaped
+ * elements.
+ */
+export const pixelDropShadowFilter = `drop-shadow(${px(1)} ${px(1)} 0 rgba(0, 0, 0, 0.2))`
+
+/**
+ * Styles for the pressed state of a control framed with `shadow: true`. The
+ * control shifts into the space its shadow occupied, so it appears to be
+ * pushed down.
+ */
+export const pixelPressedSx = (outline: string) => ({
+  ...pixelFrameSx({ outline, shadow: 'pressed' }),
+  transform: `translate(${px(1)}, ${px(1)})`,
+  boxShadow: pixelBevelPressed,
+})