CSS engine: Bootstrap 5

This item is the Bootstrap 5 edition of Orbix. Its styles are the Orbix design system compiled on a Bootstrap 5.3 base, and every page uses the same fd-* component markup.

The engine stylesheet is compiled from the SCSS sources of the bundled design system package (packages/foundry-ui) by npm run build, with your settings in src/scss/brand.scss (see Customize with SCSS), and imported by src/styles/engines/bootstrap.css, which index.html loads first (ORBIX_ENGINE=bootstrap in the build).
Template-specific styles live in src/styles/index.css and src/styles/orbix/ and use design tokens only (var(--fd-…)), so they follow the theme, the dark mode and the text direction automatically.
<html data-engine="bootstrap"> marks the engine in the built page.

Orbix is also available as a separate item built on Tailwind CSS, with the same pages and the same markup. The SCSS sources of both engines are included; Customize with SCSS explains how to compile the other one. Each item documents and supports its own engine.

Writing your own styles

Use the design tokens instead of fixed values, and logical properties instead of left/right, so your styles work in light and dark mode and in right-to-left languages:

/* src/styles/reports.css (import it from src/styles/index.css) */
.reports-summary {
  padding-block: var(--fd-space-4);
  padding-inline: var(--fd-space-5);
  border: var(--fd-border-width) solid var(--fd-border);
  border-radius: var(--fd-radius-surface);
  background: var(--fd-surface);
  color: var(--fd-text);
}

Then use the class in your component (<div class="reports-summary">). Inline style attributes and bindings are not used anywhere in the template, and the test suite checks it: keep styles in CSS files.

Useful tokens

Token	Use
`--fd-primary`, `--fd-on-primary`, `--fd-primary-subtle`	Brand color, its readable text color and a soft tint
`--fd-bg`, `--fd-surface`, `--fd-surface-raised`, `--fd-surface-sunken`	Backgrounds
`--fd-text`, `--fd-text-muted`, `--fd-text-subtle`	Text colors
`--fd-border`, `--fd-border-strong`, `--fd-border-width`	Borders and dividers
`--fd-success`, `--fd-warning`, `--fd-danger`, `--fd-info` (plus `-subtle` and `-text` variants)	Status colors
`--fd-space-1` … `--fd-space-32`, `--fd-stack-gap`	Spacing scale (follows the density setting)
`--fd-radius-control`, `--fd-radius-surface`, `--fd-radius-pill`	Corner radius (follows the radius setting)
`--fd-font-sans`, `--fd-font-mono`, `--fd-text-sm` … `--fd-text-3xl`	Typography
`--fd-chart-1` … `--fd-chart-6`	Chart palette derived from the brand color

The full list of tokens is in packages/foundry-ui/dist/tokens/orbix.css (and in packages/foundry-ui/scss/tokens/_orbix-properties.scss). To change them for the whole application, use $tokens in src/scss/brand.scss (Customize with SCSS).