Ouro HX

Guides

Static CSS

Ouro HX's tokens also come as plain stylesheets, for a page with no build step and no Tailwind: a status page, a report or a prototype written in HTML.files They hold the tokens only. Components still install with shadcn.

Use them

Link ouro-base.css first, then one theme:

<link rel="stylesheet" href="css/ouro-base.css" />
<link rel="stylesheet" href="css/themes/chart.css" />

Then use the tokens in your own CSS:

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}

h1,
h2 {
  font-family: var(--font-heading);
}

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.status-done {
  color: var(--success);
}

.status-waiting {
  color: var(--warning);
}

@media (prefers-reduced-motion: no-preference) {
  .loading {
    animation: ouro-pulse 2s var(--ouro-ease-in-out) infinite;
  }
}

The files

They live in site/public/css/:

ouro-base.css
What it holds: The radius scale, the success and warning colors, motion durations and easings, the overlay layer and the ouro-* keyframes.base
ouro-theme.css
What it holds: Ouro HX's default theme: shadcn/ui's color tokens in light and dark.tokens
themes/<preset>.css
What it holds: One of the site's theme presets, with its fonts: sleek, abyss, brass, chart, coral or cookbook.fonts

ouro-base.css leaves out the press utility, which needs Tailwind; its header names what it leaves out.base A preset's fonts load from ../../fonts/, so keep css/ and fonts/ side by side when you copy them.fonts

Dark mode

Put class="dark" or class="light" on <html> to choose a mode. Without either class, the page follows the system's setting (prefers-color-scheme).dark The system rule has the specificity of :root, so a :root rule of yours that comes after these files still wins.dark

Where to get them

  • Copy site/public/css/ and site/public/fonts/ from a commit into your site, keeping the two folders side by side.
  • Or link the copies the site serves from its css/ folder, which change when the site does.
  • Or pin a commit through a CDN that mirrors GitHub, such as jsDelivr: https://cdn.jsdelivr.net/gh/ourostack/ouro-ui@<commit>/site/public/css/ouro-base.css.

Keep the MIT notice at the top of each file. The fonts carry the SIL Open Font License, in site/public/fonts/LICENSE.txt.licence

Changing them

Don't edit the files. Edit registry/ouro/theme/ouro-base.css, registry/ouro/theme/ouro-theme.css or site/src/themes/<preset>.css, then run pnpm site:static-css. site:build runs it with --check and fails when a file is stale.stale

Claim sources

Source on GitHubThis page as Markdown