Theming

Every color, radius, and surface in the package is a CSS variable. Override a handful and the entire DS adapts.

Brand-rebrand in 6 lines

Drop this anywhere in your CSS after the package import. The DS reads --primary, --ring, and --radius at runtime — every component picks up the new color on the next render.

@import "tailwindcss";
@import "@kactostecnologia/benix-ds/styles.css";

@layer base {
  :root {
    --primary: #16a34a;          /* Arimateia green */
    --primary-hover: #15803d;
    --primary-foreground: #ffffff;
    --ring: #16a34a;
    --radius: 0.5rem;
  }
}

Override cascade

CSS variables resolve last-in-wins. From weakest to strongest:

DS defaults — the values shipped in @kactostecnologia/benix-ds/styles.css.
Your :root override — the snippet above. This is where you brand.
Your .dark override — same variable names inside .dark selector. The ThemeProvider toggles .dark on <html>.
Per-component inline style — last resort: <Button style={{ '--primary': '#000' }} /> to override one button without touching CSS.

ThemeProvider

The DS ships a framework-agnostic ThemeProvider that mirrors next-themes: persists to localStorage, optionally follows the OS preference, and toggles a class on <html>. No Next.js dependency — works in Vite, Remix, Astro.

import { ThemeProvider, useTheme } from '@kactostecnologia/benix-ds/theme';

// Wrap once
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
  <App />
</ThemeProvider>

// Toggle anywhere
function DarkModeButton() {
  const { theme, setTheme } = useTheme();
  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      {theme === 'dark' ? '☀' : '🌙'}
    </button>
  );
}

Props: attribute ('class' | 'data-theme'), defaultTheme ('light' | 'dark' | 'system'), enableSystem (follow prefers-color-scheme), storageKey (default 'benix-theme').

Token reference

Every variable below is set inside :root by the package and again inside .dark for the dark mode. Override the ones you care about — undefined ones keep the DS defaults.

Surface

--background
--foreground
--card
--card-foreground
--popover
--popover-foreground

Brand

--primary
--primary-hover
--primary-foreground
--ring

Secondary

--secondary
--secondary-foreground
--accent
--accent-foreground
--muted
--muted-foreground

State

--destructive
--destructive-foreground
--success
--warning
--info

Inputs / borders

--border
--input

Shape

--radius

Live preview

Try it without writing CSS

Click the floating Playground button on any page of this site. Color picker + radius + dark toggle, with a copy-pasteable CSS snippet that matches the cascade above.