Theming

Theme ids

Themes live in @texuli/tokens. This site uses enterprise-neutral. Browse and apply others with texuli theme list / texuli theme apply <id> after texuli init.

import { compileThemeCss } from '@texuli/tokens';
import { loadLibraryTheme } from '@texuli/tokens/library';
import { noFlashScript } from '@texuli/tokens/no-flash';

const theme = await loadLibraryTheme('enterprise-neutral');
const css = compileThemeCss(theme);
const bootstrap = noFlashScript('my-app', 'system');

CSS layers

Component styles ship in @layer tx.components. Put app utilities after tx.base, tx.components so your classes override without fighting specificity.

/* Declare once, first — then import Texuli base + components.
   Use hyphenated host layer names (site-base, site-overrides). Dotted names
   nest in CSS (site.base is inside site), which would place overrides too early. */
@layer site-base, tx.base, tx.components, site-overrides;

@layer site-base {
  /* Element defaults / resets (before Texuli) */
  a { color: var(--tx-link); }
}

@layer site-overrides {
  /* App classes that must beat tx.components */
  .my-button { /* … */ }
}

Using Texuli with your own CSS

Put resets and element defaults (a, body, …) in a cascade layer declared before tx.base. Unlayered global element rules beat every layered Texuli rule by CSS design — that is how anchor Buttons once painted link ink on a primary fill. Declare @layer site-base, tx.base, tx.components, site-overrides once at the top of the host stylesheet (this site does that in styles/site-layers.css), then import @texuli/tokens/base.css. Prefer hyphenated host layer names: dotted names nest under a parent, so site.overrides would sit inside site and still lose to tx.components. Put app component classes in site-overrides (or unlayered classes) when they must override Texuli. Do not pin library colors with unlayered high-specificity a.tx-button rules in the package — consumers must still win.

Apply a theme

Set data-tx-theme on <html>, inline the compiled CSS, and keep the no-flash script first in <head>. Contrast gates are WCAG 2.x AA (APCA is out of scope).

Live tokens

Swatches read the CSS variables already on this page.