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 (src/Orbix/packages/foundry-ui) by npm run build, with your settings in ClientApp/scss/brand.scss (see Customize with SCSS), and imported by ClientApp/css/engines/bootstrap.css.
Template-specific styles live in ClientApp/css/orbix.css and ClientApp/css/orbix/ and use design tokens only (var(--fd-…)), so they follow the theme, the dark mode and the text direction automatically.
appsettings.json declares the engine ("Engine": "bootstrap") and the <ox-vite> tag helper of the document head (Pages/Shared/Shell/_Head.cshtml) loads the files listed in wwwroot/build/bootstrap/manifest.json.

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:

/* ClientApp/css/orbix/pages/reports.css (import it from ClientApp/css/orbix/main.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 run npm run build (or keep npm run dev running). Inline style="" attributes 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 src/Orbix/packages/foundry-ui/dist/tokens/orbix.css (and in src/Orbix/packages/foundry-ui/scss/tokens/_orbix-properties.scss). To change them for the whole application, use $tokens in ClientApp/scss/brand.scss (Customize with SCSS).