[shawnbot]

Sorry, this one is kinda big. 😬

Three major things here that I think qualify this as a major release ("breaking changes"):

1. We now have a "bundled" version of the Tailwind theme from sf.gov. My process for importing it was to copy the whole theme and tokens directories from the design-system package, convert everything to TypeScript, delete the stuff that we didn't use, then (with Claude's help) collapse it all into a single file, tailwind.theme.ts. When we publish the design system's Tailwind theme, we can just delete this file. 🎉

2. I've replaced most of the CSS rules with Tailwind @apply directives. This is awesome because it lets us leverage the tokens from the Tailwind theme without having to define any CSS variables. I used the extension and Claude to check my work: Before deleting the CSS rules, I commented them out and wrote the equivalent @apply below, toggled the CSS in the extension for visual confirmation, then asked Claude to compare the generated CSS before and after. The diff was too noisy because Tailwind's output can be verbose, but Claude cut through that and noted places where the diff was irrelevant because the effect was the same.

3. I've renamed the theme directory to src and created a separate typography.css for, well, typography rules. This is now where we set heading and label text styles, and nothing else.

Sans font

The biggest impact of the typography updates is that we're now using the --font-sans variable that Fillout provides, which is a stripped down version of Tailwind's default:

/* Fillout */
--font-sans: ui-sans-serif, system-ui, sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* Tailwind */
--font-sans: ui-sans-serif, system-ui,
  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
  "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

What it really boils down to, though, is that we're no longer trying to display Open Sans and failing because it's not a web-safe font and, as far as I can tell, not included in Fillout forms:

📦 Published canary version 1.0.0--canary.13.41146569271.0

https://unpkg.com/@sfgov/fillout@1.0.0--canary.13.41146569271.0/dist/theme-sfgov.css

Copy the URL above to test this release with the CSS extension.

[shawnbot]

Honestly, I don't know if these are the correct styles. @nlsfds have you specced how headings should be styled in forms somewhere? I couldn't find anything in Figma.

[shawnbot]

Following up here for posterity: It looks like I got these right!

[Copilot]

🟡 Changes recommended

Unresolved issues override inherited span typography, alter radio-control spacing, and misconfigure rebuild watching for theme files and package metadata.

2 open issues

• Quote watch globs and include JSON in the extension filter · New
• Exclude spans from the typography reset · New

What changed in this PR

This PR aligns the Fillout theme with SF.gov design tokens and centralizes typography, replacing the attempted Open Sans styling with Fillout’s system sans-serif stack.

Changes:

• Bundles design tokens and registers them as the Tailwind theme.
• Converts component styles to token-based @apply rules and extracts typography.
• Renames theme to src and updates build, watch, and editor configuration.

File	Description
tailwind.theme.ts	Bundles design tokens and Tailwind theme definitions.
tailwind.config.ts	Registers the bundled theme.
src/​typography.css	Centralizes body, heading, and label typography.
src/​sfgov.css	Imports typography and converts component styles to utilities.
README.md	Updates the source-directory link.
postcss.config.js	Resolves stylesheet imports from src.
package.json	Updates build paths and watch targets.
knip.config.ts	Updates entry paths for source analysis.
.vscode/​settings.json	Associates CSS files with Tailwind CSS tooling.

_{Review effort: Balanced}

[shawnbot]

While this is technically true, it doesn't seem to affect Fillout's markup. There are, however, a ton of <span>s in Fillout that need to be reset. 🤷

[jackieyoungsfgov]

🎉