Configure a Panda theme

Configure the semantic tokens, breakpoints, global rules, and generated utility surface of Brix's managed Panda CSS integration.

React applications are a separate browser-only project kind and do not use this managed Panda surface. See React applications for their supported styling boundary.

Use generated utilities

Import application-generated modules through #brix/panda/*:

import { css } from "#brix/panda/css";

export function BookingCard() {
  return (
    <article
      class={css({
        display: "grid",
        gap: "4",
        padding: "6",
        borderRadius: "md",
      })}
    >
      Booking details
    </article>
  );
}

The generated and ignored .brix/panda/ directory exposes:

• #brix/panda/css: css, cx, local cva, and local slot-based sva.
• #brix/panda/recipes: typed recipes and slot recipes registered by the theme.
• #brix/panda/patterns: function forms of built-in layouts such as stack.
• #brix/panda/jsx: Preact styled and generated pattern components with JSX style props.

Keep the generated package.json import mapping for #brix/panda/*. If output or types are missing, run brix dev, brix build, or brix doctor; do not edit .brix/panda.

Define the semantic theme

Add optional src/theme.ts with exactly one named runtime export, theme. Type-only exports are allowed. Token leaves require { value }, and semantic tokens should express product meaning rather than copying palette names into components:

import { defineBrixTheme } from "brix/panda";

export const theme = defineBrixTheme({
  tokens: {
    colors: {
      brand: { value: "#0057b8" },
      canvas: { value: "#ffffff" },
      ink: { value: "#172033" },
    },
  },
  semanticTokens: {
    colors: {
      surface: { value: { base: "{colors.canvas}", _dark: "{colors.ink}" } },
      text: { value: { base: "{colors.ink}", _dark: "{colors.canvas}" } },
    },
  },
  breakpoints: { sm: "640px", md: "768px", lg: "1024px" },
  globalCss: {
    "html, body": { margin: "0", backgroundColor: "surface", color: "text" },
  },
});

Semantic references use braces. Keep breakpoint units consistent. Theme definitions may import token modules; Brix watches those dependencies even when they are outside src/.

Responsive values use the generated breakpoint keys:

const layout = css({
  display: { base: "block", md: "grid" },
  gridTemplateColumns: { md: "repeat(2, minmax(0, 1fr))" },
  gap: { base: "2", lg: "6" },
});

Continue with style components with managed panda.