Theming

Aur UI ships a single design-token layer, exposed by the package as @aur-ui/ui/styles/globals.css. It targets Tailwind CSS v4 and is built around an "Apple-light, borderless" console aesthetic.

Token groups

The palette is defined as CSS variables on :root and re-exposed as Tailwind utilities through @theme inline:

• Surfaces — --page-bg, --surface (bg-page-bg, bg-surface).
• Style config — --aur-primary, --aur-secondary are the runtime color inputs.
• Brand — --brand, --brand-hover, --brand-soft, --brand-soft-hover.
• Secondary brand — --brand-secondary, --brand-secondary-hover, --brand-secondary-soft, --brand-secondary-soft-hover.
• Ink — --ink-900 … --ink-400 for text (text-ink-900, text-ink-500, …).
• Status — --positive, --warning, --danger and their *-soft tints.
• Charts — --chart-1 … --chart-8.

These tokens are the library's only style vocabulary — a lint rule keeps legacy class names out, so every component reads from this one palette.

--brand*, focus rings, action shadows, selection color, and chart accents derive from --aur-primary and --aur-secondary, so changing those two inputs updates the component set without recompiling Tailwind. The second brand hue is exposed as bg-brand-secondary, text-brand-secondary, and bg-brand-secondary-soft.

import { applyAurStyleConfig } from "@aur-ui/ui/lib/theme-config";

const cleanup = applyAurStyleConfig({
  primary: "#0ea5e9",
  secondary: "#b06bf2",
});

Pass a target element as the second argument to scope the style change to a preview, tenant shell, or embedded surface. The returned cleanup removes only the variables touched by that call.

Both the tokens and applyAurStyleConfig come with the package — import the CSS in your global stylesheet and you're done:

@import "@aur-ui/ui/styles/globals.css";
@source "../node_modules/@aur-ui/ui/dist";