React example

import react from "@vitejs/plugin-react";
import croff from "@croff/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react(), croff()],
});

import { defineConfig } from "@croff/core";

export default defineConfig({
  content: ["src/**/*.tsx"],
  theme: {
    colors: {
      // A custom token, used as bg(surface).
      surface: "#141414",
    },
  },
});

const variants = {
  brand: "bg(brand) color(dark) hover:bg(brand-dark)",
  ghost: "border(1,gray-700) color(light) hover:border-color(brand)",
};

function Button({ kind, children }: { kind: keyof typeof variants; children: React.ReactNode }) {
  return (
    <button
      className={`padding(2,4) radius(sm) text-weight(medium) transition(colors) ${variants[kind]}`}
    >
      {children}
    </button>
  );
}

pnpm install
pnpm build
pnpm --filter @croff/example-vite-react dev