@nurix/ui-component-library 1.1.2 → 1.1.3-stage.101

package/README.md

@@ -1 +1,96 @@
 # lego-land
+
+## Theming docs
+
+See `docs/THEMING.md`.
+
+## Using in a consumer app
+
+### 1) Ensure Tailwind keeps (and understands) the library classes
+
+Your app must:
+
+- include this package in Tailwind `content` so classnames are not purged
+- map semantic colors to CSS variables, like this repo’s `tailwind.config.ts`
+
+Example `tailwind.config.ts` in your consumer app:
+
+```ts
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/@nurix/ui-component-library/dist/**/*.{js,mjs}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+};
+
+export default config;
+```
+
+### 2) Wrap with the theme provider
+
+```tsx
+import {
+  NurixThemeProvider,
+  Button,
+  Input,
+  Switch,
+} from "@nurix/ui-component-library";
+
+export function Example() {
+  return (
+    <NurixThemeProvider defaultTheme="dark">
+      <div className="flex flex-col gap-4">
+        <Button variant="secondary">Click</Button>
+        <Input label="Title" placeholder="Email" supportingText="Help text" />
+        <Switch defaultChecked />
+      </div>
+    </NurixThemeProvider>
+  );
+}
+```