[dreamwasp]

Overview

Groundwork for moving gamut's components off runtime Emotion styles. It adds the pieces a component needs to ship its styles as compiled CSS, and nothing uses them yet. Nothing renders differently. Draft, stacked on #52, so it merges after #52. Plan and reasoning: gamut/color-tokens/static-styles-spike.md in Base Camp.

What's added (packages/gamut-styles/src/static/)

• defineRecipe: a component's styles as data (base, named variants, defaultVariants, compoundVariants), in Chakra's and Panda's recipe shape, written with the same style objects as css() and variant().
  • recipe.styles is the same recipe as an Emotion style function, so a component can move to a recipe while still on Emotion.
  • recipe.classNames(props) gives stable class names like gamut-chip gamut-chip--intent_danger.
  • recipe.splitProps separates variant props from the rest so they aren't forwarded to the DOM.
• compileRecipe: plain CSS for a recipe's class names, inside @layer recipes.
• checkRecipe: compiles the recipe for every brand theme and reports whether the output differs. A recipe that uses a per-brand value (for example fontFamily: 'accent') fails and names the brand.
• StaticStyles: puts compiled CSS on the page once, through the Emotion cache, so SSR, nonces and stylis plugins work as they do today.
• packages/gamut-styles/src/static/README.md has the steps for moving a component and the rules a recipe has to follow to compile.

What's not in this PR

• No component uses a recipe. Moving one is a later PR.
• states() has no recipe shape yet. Boolean variant keys (true/false) come in a later step, and false in a selection currently turns a group off, so that needs a decision first.
• No build step. compileRecipe runs once per module in the browser.
• Fonts, font weights and elevation are still per-brand literals, so most components will fail checkRecipe until they become CSS variables.

Small unrelated change: script/jest/base-setup.js skips window.scrollTo when there's no window, so @jest-environment node tests (server rendering) run.

PR Checklist

• Related to designs: no design change; no visual output changes
• Related to JIRA ticket: none yet. Step 7 of the static-styles plan has no ticket; GMT-1744 covers styled from gamut
• Changeset added (.changeset/static-styles-groundwork.md, minor)
• I have run this code to verify it works. Ran the static folder's tests only; not the full suite, and not in a consuming app
• This PR includes unit tests for the code change (__tests__/recipe.test.tsx, __tests__/StaticStyles.ssr.test.tsx)
• This PR includes testing instructions
• Package previews from this PR are passing end-to-end tests in all relevant consuming repositories. N/A: nothing consumes it yet

Testing Instructions

1. Check out this branch (it's stacked on feat(gamut-styles)!: brands, overrides and Original Codecademy on the color system #52, so the diff also shows feat(gamut-styles)!: brands, overrides and Original Codecademy on the color system #52's changes until feat(gamut-styles)!: brands, overrides and Original Codecademy on the color system #52 merges).
2. Run the static folder's tests:

   npx jest packages/gamut-styles/src/static
   

   Expect 2 suites and 14 tests to pass.
3. Read packages/gamut-styles/src/static/README.md, then look at the sample chip recipe in __tests__/recipe.test.tsx. It shows recipe.styles, classNames, compileRecipe, and a checkRecipe failure case.
4. Check that nothing changed for existing components: run the gamut-styles test suite. Existing components don't import anything from static/.

PR Links and Envs

Repository	PR Link
Stack	#52 (base), #50 (its base)
Consumers	None yet

Breaking changes: none. Additive only.

🤖 Generated with Claude Code