How to use this builder

Use the drawer controls to build a reusable guide component with content, layout, surface, typography, media, buttons, container hover, and optional deco layers. The preview uses Master classes and builder-generated CSS, so copied output should stay aligned with the guide system.

1. Choose a preset or manually adjust the element controls.
2. Use the builder page background only to test contrast against different page colors.
3. Use surface, border, text, button, and deco controls for styles that should become part of the reusable component.
4. Click a preview element to jump to its related edit panel. Click the active drawer icon again or use Close to hide the drawer.
5. Copy the HTML for the content template, the CSS for the generated theme/deco rules, and the preset object when the option should be saved back into the builder.

Builder panels

Each drawer icon opens a focused group of controls. Presets load saved examples. Master Theme controls token-based theme values. Component, Layout, Surface, Typography, Media, Buttons, Deco, and Container Hover control the rendered component. Output shows the copy-ready HTML, CSS, and preset object.

Keep page-only testing controls separate from reusable theme controls. The builder page background is for preview contrast only and should not be treated as part of the copied theme.

Generated CSS theme

The copied CSS is parent-scoped. Apply the generated theme class to a parent wrapper when the whole card should inherit the theme, or apply it to a child when one element needs to override a parent theme.

<article class="card theme-example-name">...</article>

Generated CSS should use Master tokens such as --color-uvu-green, --color-black, --surface-1, and existing guide classes. Do not add raw hex colors to builder presets.

Deco layers

Deco is optional and starts off by default. Use it when a component needs background decoration without changing the content structure. Deco output uses reusable deco-* classes plus generated CSS values for each shape.

1. Behind card sits behind the component and can offset outside the card frame.
2. Inside card sits above the card background and behind the content. Each inside shape can be masked/clipped to the card or allowed to overflow.
3. Front overlay sits above the content as a subtle decorative layer and stays non-interactive.

Use token colors, opacity, size, position, rotation, and pattern settings to tune the shape. Keep decoration subtle enough that text, buttons, and focus states remain clear.

Theme update process

To update a theme or component preset, start from the closest preset, adjust the controls, then copy the CSS and preset object. Paste the CSS into the added theme/deco CSS file and paste the preset into DEFAULT_PRESETS inside builder.js.

The copied preset should be paste-ready with the next preset key, such as p14 or p15. Keep formatting consistent with the existing preset list so the builder remains easy to maintain.

Adding a theme preset

Font/theme presets that appear inside the Master Theme preset selector live in THEME_GROUPS. Component presets that appear as preset buttons live in DEFAULT_PRESETS. Use THEME_GROUPS for reusable token themes and DEFAULT_PRESETS for full component examples.

p15: {
  label: "New Component Preset",
  type: "card",
  variant: "card-lifted",
  surfaceBg: "bg-white"
}