@super-assist/react/styles.css

Entry

Field	Value
Import	import "@super-assist/react/styles.css";, once, anywhere in the app
Format	Plain compiled CSS. The host needs no Tailwind and no build step for it.
Layers	theme, base, components, utilities
Classes	Prefixed sa:, so they never meet the host’s own utility classes.
Dark	The panel’s dark styles apply under a .dark ancestor, as shadcn sets it.

Scope

Every panel root, the launcher, the trigger and the floating windows carry data-super-assist. The stylesheet’s reset applies under that attribute only, inside :where(), so any selector of the host’s beats it.

Under [data-super-assist]	Reset
The root	font-family from --super-assist-font-sans, line-height: 1.5, the foreground color, antialiasing.
Every element	box-sizing: border-box, no margin, no padding, a 0 border in the border color.
Headings	The surrounding size and weight.
Lists	No markers.
Media	display: block. Images and videos at most full width.
Form controls and buttons	The surrounding font and color, a transparent background, no radius.
Links	The surrounding color, no underline.

The host page outside the panel is untouched.

Tokens

Each color and the radius read a --super-assist-* variable first, then shadcn’s variable of the same name, then a zinc default. A shadcn app gets its own theme with nothing set. Set a --super-assist-* variable to give the panel a value of its own:

:root {
  --super-assist-primary: oklch(0.55 0.15 160);
  --super-assist-radius: 0.5rem;
}

Token	Falls back to	Default
--super-assist-background	--background	oklch(1 0 0)
--super-assist-foreground	--foreground	oklch(0.141 0.005 285.823)
--super-assist-card	--card	oklch(1 0 0)
--super-assist-card-foreground	--card-foreground	oklch(0.141 0.005 285.823)
--super-assist-popover	--popover	oklch(1 0 0)
--super-assist-popover-foreground	--popover-foreground	oklch(0.141 0.005 285.823)
--super-assist-primary	--primary	oklch(0.21 0.006 285.885)
--super-assist-primary-foreground	--primary-foreground	oklch(0.985 0 0)
--super-assist-secondary	--secondary	oklch(0.967 0.001 286.375)
--super-assist-secondary-foreground	--secondary-foreground	oklch(0.21 0.006 285.885)
--super-assist-muted	--muted	oklch(0.967 0.001 286.375)
--super-assist-muted-foreground	--muted-foreground	oklch(0.552 0.016 285.938)
--super-assist-accent	--accent	oklch(0.967 0.001 286.375)
--super-assist-accent-foreground	--accent-foreground	oklch(0.21 0.006 285.885)
--super-assist-destructive	--destructive	oklch(0.577 0.245 27.325)
--super-assist-border	--border	oklch(0.92 0.004 286.32)
--super-assist-input	--input	oklch(0.92 0.004 286.32)
--super-assist-ring	--ring	oklch(0.705 0.015 286.067)
--super-assist-radius	--radius	0.625rem
--super-assist-font-sans	--font-sans	ui-sans-serif, system-ui, sans-serif and the emoji fonts

The radius scale derives from --super-assist-radius: small is 4 px less, medium 2 px less, large equal, extra large 4 px more, 2xl 8 px more.

The defaults are light. In a dark theme without shadcn’s variables, set the --super-assist-* colors under .dark.