Theming

Every color, radius, shadow, font, size and width the components draw with is a CSS variable in @arbol-ai/ui/theme.css: change one and every component, block and app that uses the library follows. Components never carry a color or size of their own, so a theme change never misses one.

Override a token

Set it after the import, for your app only:

@import 'tailwindcss';
@import '@arbol-ai/ui/theme.css';

:root {
  --app-shell-sidebar-width: 16rem;
  --table-row-height-compact: 2.75rem;
}

Tailwind exposes the tokens as utilities through @theme inline: bg-primary, text-muted-foreground, border-border, rounded-field, shadow-md, and the gray and status ramps (bg-gray-a2, bg-red-3 text-red-11 border-red-a3).

Dark mode and mono

• Dark mode is the dark class on <html>.
• The grayscale appearance is data-theme="mono" on <html>; brand, the default, is the surgical teal.

Set both before the first paint, with an inline script in index.html, to avoid a flash. Every component page has a switch for the appearance, and its examples follow this site’s dark mode.

Fonts

The theme names font families and never ships font files. Each stack tries the app’s own faces first (Arbol’s licensed ones), then the brand’s open faces, Schibsted Grotesk and Martian Mono (SIL Open Font License, from Fontsource or Google Fonts), then the system’s. Load your faces with @font-face, or override the stacks:

:root {
  --ui-font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ui-font-heading: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ui-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}