Theme designer

Copy this theme wrapper into your application. Component-level props can still override these defaults.

tsximport {
  OpusThemeProvider,
  createAccentStyle,
  createBaseStyle,
  createTileAccentStyle,
} from "opus-react";

const themeStyle = {
  ...createAccentStyle("#8f6cff", "#0284c7", "#0ea5e9"),
  ...createTileAccentStyle("#ec4899", "#0ea5e9"),
  ...createBaseStyle("#64748b"),
};

const themeDefaults = {
  appearance: "standard",
  radius: "standard",
  transparency: "standard",
  gradient: false,
};

export function App({ children }) {
  return (
    <OpusThemeProvider
      theme="dark"
      fontFamily="Space Grotesk"
      style={themeStyle}
      defaults={themeDefaults}
    >
      {children}
    </OpusThemeProvider>
  );
}