@domicile-desktop/component-library 0.0.0-alpha-86d2d09c8a70 → 0.0.0-alpha-258d9aabe264

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-86d2d09c8a70",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-86d2d09c8a70",
+    "@domicile-desktop/sdk": "0.0.0-alpha-258d9aabe264",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-258d9aabe264",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -78,6 +78,8 @@
     "./FilePicker": "./src/FilePicker/FilePicker.tsx",
     "./file-request": "./src/FilePicker/file-request.ts",
     "./folders": "./src/FilePicker/folders.ts",
+    "./font": "./src/fonts/font.ts",
+    "./fonts/inter.css": "./src/fonts/inter.css",
     "./IconButton": "./src/IconButton/IconButton.tsx",
     "./Input": "./src/Input/Input.tsx",
     "./Kbd": "./src/Kbd/Kbd.tsx",
@@ -157,5 +159,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-86d2d09c8a70"
+  "version": "0.0.0-alpha-258d9aabe264"
 }

package/src/Autocomplete/Autocomplete.tsx

@@ -36,6 +36,11 @@ type CommonProps<V> = Partial<ControlVariant> & {
   disabled?: boolean | undefined;
   /** Shown in place of the list when `suggestions` is empty. */
   emptyMessage?: ReactNode | undefined;
+  /**
+   * A tinted field with no edge until hovered or focused, as in an address
+   * bar, which sits on a toolbar rather than on a page.
+   */
+  filled?: boolean | undefined;
   onSuggestionTaken?: ((value: V) => void) | undefined;
   onValueChange?: ((value: string) => void) | undefined;
   rounded?: boolean | undefined;
@@ -74,6 +79,7 @@ export const Autocomplete = <V,>({
   autoHighlight = false,
   disabled,
   emptyMessage,
+  filled = false,
   onSuggestionTaken,
   onValueChange,
   prefixButtons,
@@ -107,7 +113,7 @@ export const Autocomplete = <V,>({
         className={cx(
           control({ size }),
           wrapperBase,
-          wrapperStyles({ rounded, size }),
+          wrapperStyles({ filled, rounded, size }),
         )}
         onMouseDown={focusControlOnMouseDown}
         ref={attach}
@@ -211,6 +217,15 @@ const wrapperStyles = cva({
     { css: { paddingInline: 11.5 }, rounded: true, size: "4xl" },
   ],
   variants: {
+    // `wrapperBase` still draws the hover and focus edges.
+    filled: {
+      false: {},
+      true: {
+        backgroundColor: "card",
+        borderColor: "transparent",
+        borderRadius: "lg",
+      },
+    },
     rounded: {
       true: { borderRadius: "full" },
     },

package/src/FilePicker/FilePicker.tsx

@@ -820,13 +820,16 @@ const sidebarStyles = flex({
 
 const placesStyles = flex({
   "& > button": {
+    // 13px, the desktop's text size, as the folder's rows.
+    fontSize: "0.8125rem",
     gap: 2.5,
     inlineSize: "100%",
     justifyContent: "flex-start",
   },
   "& > button[aria-current=location]": {
-    backgroundColor: "color-mix(in oklab, {colors.accent} 16%, transparent)",
-    color: "accent",
+    backgroundColor:
+      "color-mix(in oklab, {colors.foreground} 10%, transparent)",
+    color: "foreground",
     fontWeight: "semibold",
   },
   direction: "column",
@@ -883,7 +886,11 @@ const crumbSeparatorStyles = css({
 });
 
 const resultsStyles = css({
-  backgroundColor: "color-mix(in oklab, {colors.background} 30%, transparent)",
+  // White in light mode, as a document is.
+  backgroundColor: {
+    _light: "color-mix(in oklab, {colors.white} 80%, transparent)",
+    base: "color-mix(in oklab, {colors.background} 30%, transparent)",
+  },
   border: "1px solid {colors.border}",
   borderRadius: "lg",
   flex: "1 1 auto",
@@ -902,7 +909,8 @@ const columnsStyles = grid({
   backgroundColor: "color-mix(in oklab, {colors.card} 70%, transparent)",
   color: "textTertiary",
   columnGap: 3,
-  fontSize: "2xs",
+  // 11px, which has no scale token.
+  fontSize: "0.6875rem",
   fontWeight: "semibold",
   gridTemplateColumns: "minmax(0, 1fr) {spacing.32}",
   insetBlockStart: 0,
@@ -927,21 +935,14 @@ const rowStyles = grid({
   _hoverEnabled: {
     backgroundColor: "color-mix(in oklab, {colors.foreground} 5%, transparent)",
   },
-  // The tile color shows the file kind. Tones that blend two hues mix in
-  // OKLCH, since OKLab mixing passes through gray.
-  "& [data-row-tile]": {
-    backgroundColor: "color-mix(in oklab, var(--tone) 16%, transparent)",
-    borderColor: "color-mix(in oklab, var(--tone) 26%, transparent)",
-    color: "var(--tone)",
-  },
+  "--tone": "{colors.muted}",
+  // A plain glyph, teal for a folder and gray for anything else, so folders
+  // stand out without a tile behind every row.
+  "& [data-row-tile]": { color: "var(--tone)" },
+  // A neutral wash: color is kept for focus and the main action.
   "&[data-highlighted]": {
-    backgroundImage:
-      "linear-gradient(to right, color-mix(in oklab, {colors.accent} 30%, transparent), color-mix(in oklab, {colors.accent} 8%, transparent))",
-  },
-  "&[data-highlighted] [data-row-tile]": {
-    backgroundColor: "color-mix(in oklab, {colors.accent} 28%, transparent)",
-    borderColor: "color-mix(in oklab, {colors.accent} 45%, transparent)",
-    color: "accent",
+    backgroundColor:
+      "color-mix(in oklab, {colors.foreground} 10%, transparent)",
   },
   "&[data-marked] [data-row-tile]": {
     backgroundColor: "accent",
@@ -952,24 +953,8 @@ const rowStyles = grid({
   "&[data-replaced]": {
     backgroundColor: "color-mix(in oklab, {colors.warning} 14%, transparent)",
   },
-  "&[data-tone=archive]": { "--tone": "{colors.warning}" },
-  "&[data-tone=audio]": {
-    "--tone": "color-mix(in oklch, {colors.warning} 50%, {colors.danger})",
-  },
-  "&[data-tone=code]": { "--tone": "{colors.success}" },
-  "&[data-tone=document]": {
-    "--tone": "color-mix(in oklab, {colors.accent} 45%, {colors.foreground})",
-  },
   "&[data-tone=folder]": { "--tone": "{colors.accent}" },
-  "&[data-tone=image]": {
-    "--tone": "color-mix(in oklch, {colors.danger} 55%, {colors.accent})",
-  },
-  "&[data-tone=other]": { "--tone": "{colors.muted}" },
-  "&[data-tone=parent]": { "--tone": "{colors.muted}", color: "muted" },
-  "&[data-tone=pdf]": { "--tone": "{colors.danger}" },
-  "&[data-tone=video]": {
-    "--tone": "color-mix(in oklch, {colors.danger} 80%, {colors.warning})",
-  },
+  "&[data-tone=parent]": { color: "muted" },
   alignItems: "center",
   borderRadius: "md",
   color: "foreground",
@@ -994,7 +979,8 @@ const rowTileStyles = css({
 });
 
 const rowNameStyles = css({
-  fontSize: "sm",
+  // 13px, the desktop's text size, between the scale's 12px and 14px.
+  fontSize: "0.8125rem",
   fontWeight: "medium",
   overflow: "hidden",
   textOverflow: "ellipsis",

package/src/Input/Input.tsx

@@ -17,6 +17,11 @@ export { SIZES, type Size } from "../control-sizes";
 
 type CommonProps = Partial<ControlVariant> & {
   clearable?: boolean | undefined;
+  /**
+   * No box: just the text and its icons, for a field that heads a panel. It
+   * draws no edge, fill or focus ring.
+   */
+  flush?: boolean | undefined;
   prefixIcon?: ReactNode | undefined;
   // Narrower than base-ui's `Ref<HTMLElement>` since this always renders an
   // `<input>`. Ref objects are invariant, so the wider type would need a cast.
@@ -36,6 +41,7 @@ type Props = ExtendProps<
 
 export const Input = ({
   clearable = false,
+  flush = false,
   prefixIcon,
   rounded = false,
   size = "md",
@@ -74,8 +80,9 @@ export const Input = ({
       className={cx(
         control({ size }),
         wrapperBase,
-        wrapperStyles({ rounded, size }),
+        wrapperStyles({ flush, rounded, size }),
       )}
+      data-flush={flush ? "" : undefined}
       onMouseDown={focusControlOnMouseDown}
       style={controlSizingStyle({ width })}
     >
@@ -133,6 +140,20 @@ const wrapperStyles = cva({
     { css: { paddingInline: 11.5 }, rounded: true, size: "4xl" },
   ],
   variants: {
+    // `wrapperBase` and glass surfaces skip their edges and fills for
+    // `[data-flush]`.
+    // Under `[data-flush]`, to outrank `wrapperBase`'s own fill and edge.
+    flush: {
+      false: {},
+      true: {
+        "&[data-flush]": {
+          backgroundColor: "transparent",
+          borderColor: "transparent",
+          borderRadius: 0,
+          outlineStyle: "none",
+        },
+      },
+    },
     rounded: {
       true: { borderRadius: "full" },
     },

package/src/ModalDialog/ModalDialog.tsx

@@ -31,8 +31,8 @@ export const SURFACES = ["card", "glass"] as const;
 export type Surface = (typeof SURFACES)[number];
 
 /**
- * The popup's width. `lg` fits rows with several columns; `xl` fits a list
- * beside a preview.
+ * The popup's width. `lg` fits rows with several columns, or a compact list
+ * beside a preview; `xl` fits a roomy list beside a preview.
  */
 export const SIZES = ["md", "lg", "xl"] as const;
 export type Size = (typeof SIZES)[number];
@@ -68,6 +68,11 @@ type Props = ExtendProps<
     size?: Size | undefined;
     surface?: Surface | undefined;
     title?: ReactNode | undefined;
+    /**
+     * Whether `title` is for screen readers only, as when the popup's first
+     * control already says what it is for.
+     */
+    titleHidden?: boolean | undefined;
     trigger?: ReactElement | undefined;
   }
 >;
@@ -83,6 +88,7 @@ const ModalDialogComponent = ({
   size = "md",
   surface = "card",
   title,
+  titleHidden = false,
   trigger,
   ...rootProps
 }: Props) => {
@@ -119,7 +125,12 @@ const ModalDialogComponent = ({
               finalFocus={returnFocus}
               onKeyDown={moveFooterFocus}
             >
-              {title !== undefined && (
+              {title !== undefined && titleHidden && (
+                <BaseDialog.Title className={hiddenTitleStyles}>
+                  {title}
+                </BaseDialog.Title>
+              )}
+              {title !== undefined && !titleHidden && (
                 <header
                   className={headerStyles({ hasCloseButton: closeButton })}
                 >
@@ -143,7 +154,7 @@ const ModalDialogComponent = ({
                 className={bodyStyles({
                   hasCloseButton: closeButton,
                   hasFooter: footer !== undefined,
-                  hasTitle: title !== undefined,
+                  hasTitle: title !== undefined && !titleHidden,
                 })}
               >
                 {children}
@@ -225,7 +236,7 @@ const popupStyles = flex({
     marginBlockStart: "8cqh",
   },
   "&[data-size=lg]": {
-    inlineSize: "min({spacing.180}, 92cqw)",
+    inlineSize: "min({spacing.220}, 92cqw)",
   },
   "&[data-size=xl]": {
     inlineSize: "min({spacing.320}, 92cqw)",
@@ -241,14 +252,18 @@ const popupStyles = flex({
       position: "absolute",
     },
     backdropFilter: "blur({spacing.5}) saturate(180%)",
-    backgroundColor: "color-mix(in oklab, {colors.card} 62%, transparent)",
+    // Near white in light mode: the light card through blur reads as gray.
+    backgroundColor: {
+      _light: "color-mix(in oklab, {colors.white} 86%, transparent)",
+      base: "color-mix(in oklab, {colors.card} 62%, transparent)",
+    },
     borderColor: "color-mix(in oklab, {colors.foreground} 16%, transparent)",
   },
   // Makes form controls translucent on glass. Controls mark their element
   // with `data-control`, so its parent is the wrapper that paints the
   // background. The descendant selector outranks the wrapper's own class
   // regardless of order (see `_control/wrapperBase.ts`).
-  "&[data-surface=glass] :has(> [data-control])": {
+  "&[data-surface=glass] :has(> [data-control]):not([data-flush])": {
     backgroundColor:
       "color-mix(in oklab, {colors.background} 45%, transparent)",
   },
@@ -293,6 +308,8 @@ const titleStyles = css({
   margin: 0,
 });
 
+const hiddenTitleStyles = css({ srOnly: true });
+
 const closeStyles = css({
   insetBlockStart: 3,
   insetInlineEnd: 3,

package/src/_control/wrapperBase.ts

@@ -7,7 +7,8 @@ import { css } from "../../styled-system/css";
  * it, marked `data-control`. Selectors always target `[data-control]` so
  * suffix buttons can't affect the wrapper; a disabled Send button must not
  * gray out the textarea. Precedence is disabled, invalid, focused, hovered,
- * enforced by the `:not(...)` chains.
+ * enforced by the `:not(...)` chains. A `[data-flush]` wrapper (a flush
+ * `Input`) draws no hover or focus edge.
  *
  * The wrapper looks focused when the control has `:focus`,
  * `[data-popup-open]` (a Select popup holds focus), or `[data-active]`
@@ -31,7 +32,7 @@ export const wrapperBase = css({
   "&:has([data-control]:is(:focus, [data-popup-open], [data-active]))": {
     color: "foreground",
   },
-  "&:has([data-control]:is(:focus, [data-popup-open], [data-active])):not(:has([data-control][data-invalid]))":
+  "&:has([data-control]:is(:focus, [data-popup-open], [data-active])):not(:has([data-control][data-invalid])):not([data-flush])":
     {
       borderColor: "accent",
       outlineColor: "accent",
@@ -65,7 +66,7 @@ export const wrapperBase = css({
   "&:has([data-control][data-resizing]) [data-resize-handle]": {
     color: "muted",
   },
-  "&:is(:hover, :has([data-control][data-resizing])):not(:has([data-control]:disabled)):not(:has([data-control]:is(:focus, [data-popup-open], [data-active]))):not(:has([data-control][data-invalid]))":
+  "&:is(:hover, :has([data-control][data-resizing])):not(:has([data-control]:disabled)):not(:has([data-control]:is(:focus, [data-popup-open], [data-active]))):not(:has([data-control][data-invalid])):not([data-flush])":
     {
       borderColor: "muted",
     },

package/src/fonts/LICENSE-Inter.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/fonts/font.ts

@@ -0,0 +1,22 @@
+/** The custom property the preset's `fonts.body` token reads first. */
+const DESKTOP_FONT = "--desktop-font";
+
+/**
+ * Draws the desktop's text in `family`, a face installed on the computer or
+ * Inter, which `inter.css` ships. A blank name draws Inter.
+ */
+export const applyFont = (
+  family: string,
+  root: HTMLElement = document.documentElement,
+): void => {
+  const name = family.trim();
+  if (name === "") {
+    root.style.removeProperty(DESKTOP_FONT);
+  } else {
+    root.style.setProperty(DESKTOP_FONT, quoted(name));
+  }
+};
+
+/** `name` as a CSS string, so any name is one family. */
+const quoted = (name: string): string =>
+  `"${name.replaceAll("\\", "\\\\").replaceAll('"', '\\"')}"`;

package/src/fonts/inter.css

@@ -0,0 +1,73 @@
+/*
+ * Inter, the desktop's default face: variable weight, upright, every script
+ * Inter covers. Named `Inter`, so a desktop's `font` option of "Inter" draws
+ * these files, not an installed copy. From @fontsource-variable/inter 5.3.0;
+ * SIL Open Font License, see LICENSE-Inter.txt.
+ */
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-display: block;
+  font-weight: 100 900;
+  src: url(./inter-cyrillic-ext-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-display: block;
+  font-weight: 100 900;
+  src: url(./inter-cyrillic-wght-normal.woff2) format("woff2-variations");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-display: block;
+  font-weight: 100 900;
+  src: url(./inter-greek-ext-wght-normal.woff2) format("woff2-variations");
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-display: block;
+  font-weight: 100 900;
+  src: url(./inter-greek-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-display: block;
+  font-weight: 100 900;
+  src: url(./inter-vietnamese-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-display: block;
+  font-weight: 100 900;
+  src: url(./inter-latin-ext-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    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;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-display: block;
+  font-weight: 100 900;
+  src: url(./inter-latin-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    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;
+}

package/src/pandacss-preset.ts

@@ -206,6 +206,7 @@ export const domicilePreset = definePreset({
       backgroundColor: "background",
       color: "foreground",
       colorScheme: "dark",
+      fontFamily: "body",
     },
   },
   name: "domicile",
@@ -567,6 +568,13 @@ export const domicilePreset = definePreset({
           outQuart: { value: "cubic-bezier(0.25, 1, 0.5, 1)" },
         },
         fonts: {
+          // The desktop's face: `--desktop-font`, which a shell sets from its
+          // options (see `applyFont`), then Inter, which `fonts/inter.css`
+          // ships, so text looks the same on every computer.
+          body: {
+            value:
+              "var(--desktop-font, Inter), Inter, ui-sans-serif, system-ui, sans-serif",
+          },
           mono: {
             value:
               "ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Monaco, Consolas, monospace",

package/src/vite-shell.ts

@@ -77,6 +77,11 @@ export const shellBuild = ({
   options,
 }: ShellBuild) => ({
   build: {
+    // Fonts go in the module with the CSS that names them: a relative URL in
+    // that CSS would resolve against the document, not the asset. Other
+    // assets keep vite's size rule.
+    assetsInlineLimit: (file: string, _content: Buffer): true | undefined =>
+      file.endsWith(".woff2") ? true : undefined,
     // No content hash, so configs and packages can name the module path.
     //
     // Keep the entry's exports. Vite's app default drops them, which removes

package/styled-system/tokens/index.mjs

@@ -1371,6 +1371,10 @@ const tokens = {
     "value": "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif",
     "variable": "var(--guQdxN)"
   },
+  "fonts.body": {
+    "value": "var(--desktop-font, Inter), Inter, ui-sans-serif, system-ui, sans-serif",
+    "variable": "var(--EkLlm)"
+  },
   "fonts.mono": {
     "value": "ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Monaco, Consolas, monospace",
     "variable": "var(--gxQaAd)"

package/styled-system/tokens/tokens.d.ts

@@ -31,7 +31,7 @@ export type DurationToken = "fastest" | "faster" | "fast" | "normal" | "slow" |
 
 export type EasingToken = "default" | "linear" | "in" | "out" | "in-out" | "emphasized" | "outBack" | "outQuart"
 
-export type FontToken = "sans" | "serif" | "mono"
+export type FontToken = "sans" | "serif" | "body" | "mono"
 
 export type GradientToken = "scrimOverPhoto"