Theming

The component’s styles live inside its shadow DOM: your page’s CSS can’t accidentally break the form, and the form’s CSS never leaks into your page. The supported styling surface is a set of CSS custom properties, which inherit through the shadow boundary — set them on the element or any ancestor:

forms-engine {
  --fe-color-primary: #0f766e;
  --fe-font-family: "Inter", system-ui, sans-serif;
  --fe-radius: 4px;
}

The tokens

Property	Default	Used for
--fe-font-family	system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif	All text
--fe-color-text	#1f2430	Body text
--fe-color-muted	#5f6672	Secondary text, hints
--fe-color-primary	#3f51b5	Buttons, focus rings, active steps/tabs, links
--fe-color-primary-contrast	#ffffff	Text on primary
--fe-color-surface	#ffffff	Cards, inputs
--fe-color-background	#f6f7f9	Page-level background areas
--fe-color-border	#d4d8df	Input and card borders
--fe-color-error	#c62828	Validation messages, error banner
--fe-radius	8px	Card corner radius (inputs use half of it)
--fe-spacing	16px	Base spacing unit
--fe-max-width	960px	The form’s maximum width

(A --fe-color-success token is declared for future use but nothing currently consumes it.)

What else you can style

The <forms-engine> element itself is an ordinary block-level element in your DOM — size it, position it, give it margins like any other element.

What you can’t do — deliberately — is reach inside: there are no exposed CSS parts and no stable internal class names to target. If a real theming need isn’t covered by the tokens, that’s a good issue to open rather than a thing to hack around, because internal markup may change freely.

Practicalities

• The component adapts to its container: below 640 px wide, the layout stacks to a single column and the tab rail becomes horizontal.
• Colors are used as given — if you theme toward a dark palette, set all the surface/background/text/border tokens together; there’s no automatic dark mode.
• Subtle derived colors (hover tints, the visited-step dot) are computed with CSS color-mix(), supported in all evergreen browsers.
• UI text is customized separately, via the labels override.