Consumer CSS tokens

Import the library once with <import library="io.bosca:bml-design" />. Its defaults load before application CSS and use :where(:root). Set variables on :root, a class, or a [data-theme] subtree. The library selects no theme attribute and sets no document background, layout, reset or color-scheme. Applications apply their own document typography and choose color-scheme: light or dark where native controls need it.

.product-theme {
  --bg-0: #f0f9ff;
  --bg-1: #fff;
  --bg-2: #e0f2fe;
  --bg-3: #bae6fd;
  --fg-0: #082f49;
  --fg-1: #0c4a6e;
  --fg-2: #075985;
  --fg-3: #0369a1;
  --fg-4: #0284c7;
  --line: #7dd3fc;
  --line-2: #38bdf8;
  --control-border: #0369a1;
  --accent: #0369a1;
  --ok: #15803d;
  --warn: #a16207;
  --err: #b91c1c;
  --info: #1d4ed8;
  --purple: #7c3aed;
  --shadow-color: #164e63;
  --backdrop-color: #164e63;
  color: var(--fg-0);
  color-scheme: light;
  font-family: var(--font-sans);
}

Two differently themed roots can coexist. Component states derive values at their point of use; changing a parent class updates mounted controls and open overlays. Optional control, overlay and editor overrides below are intentionally unset by default. In particular, --control-bg falls back to the local --bg-2, --control-border to each control's existing local --line-2 or --line, and --control-radius to the local --r-sm. Defining those aliases at the document root would resolve them there and hide a subtree's later base-token changes. Set an alias explicitly when that separate appearance is intended.

Palette defaults

Git and Studio retain --brand-1, --brand-2, --brand-accent, --brand-grad and --brand-grad-soft for application branding and ambient surfaces. Those gradients belong to the application. Exported controls use --accent; the mark uses its three face colors. This retains Git's separate accent and brand choices without imposing its document artwork on another consumer.

Status borders, badge fills, selected options and hover states mix the local palette with transparency or another local surface. Disabled controls retain those colors with reduced opacity; pending buttons retain their size and replace visible content with a spinner. There is no global text-selection rule: source and JSON editors expose selection hooks below, and applications own ordinary document selection.

Controls, typography and focus

Set --control-border separately when controls need clearer boundaries than surrounding dividers. The catalog keeps subtle surface borders and sets this override in each palette. Focus, expanded, primary, danger, ghost and disabled states retain their existing styling.

Focus color follows --accent, or --json-accent inside the structured editor. Tab rows, trees, scrolling regions and popup options retain their existing inset offsets to keep outlines visible inside clipped surfaces. One-pixel editor focus borders remain one pixel. Native checkbox/switch dimensions, text sizes and layout spacing are independent of the shared control heights.

Use documented component props and stable modifiers for other changes: button size, primary, danger, ghost, block and icon-only; input size/mono; page-shell fill/narrow; dialog size/triggerStyle; source-view compact/bare; select size and its native option content. Forward an application class through the documented attribute target when styling that control. Generated BML scope IDs and third-party editor classes are not consumer styling hooks.

Optional component overrides

The complete shadow/backdrop overrides accept ordinary CSS values, including none for shadows. Changing --shadow-color or --backdrop-color updates the defaults at the owning subtree without redeclaring each overlay. Tooltip, select and tab popups stay in that subtree and use the native top layer; the library does not copy theme colors to JavaScript or move them to the document body.

Source colors use the documented --source-* hooks, with palette-derived defaults for surface, foreground, gutter, selection, active lines, search and syntax roles. Structured editing uses the documented --json-* hooks. --json-accent controls its menu/link colors and derived hover, focus, editing and selection colors together. --json-selection can override the selection separately; --json-scheme defaults to light. These hooks apply on the editor root or an ancestor. The adapter owns the underlying editor variables and scoped styles.

Literal palette colors live in the shared defaults. The Bosca SVG paths remain the original artwork; its face colors are themeable. Caller-supplied badge color, heading iconColor, source content, images and other projected content can intentionally provide their own colors. Git authentication, ambient gradients, repository/diff/log composition and document resets remain in Git's CSS.

The compiled consumer's /themes page demonstrates base-token fallback, explicit control aliases, shared sizing/focus and live overlay colors in independent roots, including native controls with scripts disabled. Its other pages exercise forms, selection, tooltips, modal state, source and JSON editing through real BML rendering and actions in production and development.