# @super-assist/react/styles.css

> The panel's compiled stylesheet, its scoped reset, its class prefix, and the --super-assist-* tokens with their shadcn fallbacks.

## 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:

```css
: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`.