@bsuite/theme 0.1.1 → 0.2.0

package/dist/react/BrandingProvider.d.ts

@@ -0,0 +1,63 @@
+/**
+ * BrandingProvider — runtime enterprise white-labelling
+ *
+ * On mount:
+ *  1. Calls supabase.rpc('branding_json_for_tenant') using the user's authed session.
+ *  2. Applies each key as a CSS custom property on document.documentElement.
+ *  3. Caches the result in localStorage under BRANDING_STORAGE_KEY for FOUC prevention.
+ *  4. Subscribes to tenant row changes via Supabase Realtime so branding updates
+ *     propagate without a page reload (within ~1 second).
+ *
+ * Environment flags:
+ *  - VITE_ENABLE_BRANDING_OVERRIDE (default: 'true') — set to 'false' to disable
+ *    entirely without code changes (emergency kill switch).
+ *
+ * Usage:
+ *  Wrap BrandingProvider inside ThemeProvider so branding CSS vars override theme defaults:
+ *
+ *    <ThemeProvider>
+ *      <BrandingProvider supabaseClient={supabase}>
+ *        {children}
+ *      </BrandingProvider>
+ *    </ThemeProvider>
+ */
+import type { ReactNode } from 'react';
+import type { SupabaseClient } from '@supabase/supabase-js';
+export declare const BRANDING_STORAGE_KEY = "bsuite_tenant_branding";
+export declare const BRANDING_OVERRIDE_FLAG = "VITE_ENABLE_BRANDING_OVERRIDE";
+/** Shape returned by the branding_json_for_tenant RPC */
+export interface TenantBranding {
+    /** Primary action colour as an OKLCH string, e.g. "oklch(0.55 0.22 265)" */
+    primary?: string;
+    /** Accent / secondary colour as an OKLCH string */
+    accent?: string;
+    /** Full logo URL (SVG or raster) */
+    logo_url?: string;
+    /** Mark / icon logo URL */
+    mark_url?: string;
+    /** Optional CSS font-family stack string */
+    font_stack?: string | null;
+}
+export interface BrandingContextValue {
+    /** Current resolved branding, or null if no tenant override */
+    branding: TenantBranding | null;
+    /** True while the initial RPC call is in flight */
+    isLoading: boolean;
+    /** Any error from the RPC call */
+    error: Error | null;
+    /** Manually trigger a branding refresh */
+    refresh: () => Promise<void>;
+}
+export declare const BrandingContext: import("react").Context<BrandingContextValue | undefined>;
+export interface BrandingProviderProps {
+    children: ReactNode;
+    /** Authenticated Supabase client from the consuming app */
+    supabaseClient: SupabaseClient;
+    /**
+     * If true, apply persisted branding immediately on mount (before the RPC
+     * resolves) to prevent FOUC. Default: true.
+     */
+    applyPersistedOnMount?: boolean;
+}
+export declare function BrandingProvider({ children, supabaseClient, applyPersistedOnMount, }: BrandingProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BrandingProvider.d.ts.map

package/dist/react/BrandingProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandingProvider.d.ts","sourceRoot":"","sources":["../../src/react/BrandingProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAUH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAE3D,eAAO,MAAM,oBAAoB,2BAA2B,CAAA;AAC5D,eAAO,MAAM,sBAAsB,kCAAkC,CAAA;AAErE,yDAAyD;AACzD,MAAM,WAAW,cAAc;IAC7B,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,oBAAoB;IACnC,+DAA+D;IAC/D,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAA;IAC/B,mDAAmD;IACnD,SAAS,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,0CAA0C;IAC1C,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC7B;AAED,eAAO,MAAM,eAAe,2DAA6D,CAAA;AAqFzF,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAA;IACnB,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAA;IAC9B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,qBAA4B,GAC7B,EAAE,qBAAqB,2CAyFvB"}

package/dist/react/BrandingProvider.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * BrandingProvider — runtime enterprise white-labelling
+ *
+ * On mount:
+ *  1. Calls supabase.rpc('branding_json_for_tenant') using the user's authed session.
+ *  2. Applies each key as a CSS custom property on document.documentElement.
+ *  3. Caches the result in localStorage under BRANDING_STORAGE_KEY for FOUC prevention.
+ *  4. Subscribes to tenant row changes via Supabase Realtime so branding updates
+ *     propagate without a page reload (within ~1 second).
+ *
+ * Environment flags:
+ *  - VITE_ENABLE_BRANDING_OVERRIDE (default: 'true') — set to 'false' to disable
+ *    entirely without code changes (emergency kill switch).
+ *
+ * Usage:
+ *  Wrap BrandingProvider inside ThemeProvider so branding CSS vars override theme defaults:
+ *
+ *    <ThemeProvider>
+ *      <BrandingProvider supabaseClient={supabase}>
+ *        {children}
+ *      </BrandingProvider>
+ *    </ThemeProvider>
+ */
+import { createContext, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+export const BRANDING_STORAGE_KEY = 'bsuite_tenant_branding';
+export const BRANDING_OVERRIDE_FLAG = 'VITE_ENABLE_BRANDING_OVERRIDE';
+export const BrandingContext = createContext(undefined);
+const BRANDING_CSS_MAP = {
+    primary: '--primary',
+    accent: '--accent',
+    logo_url: '--logo-url',
+    mark_url: '--mark-url',
+    font_stack: '--font-stack',
+};
+function applyBrandingToRoot(branding) {
+    if (typeof document === 'undefined')
+        return;
+    const root = document.documentElement;
+    if (!branding) {
+        // Remove any previously applied overrides
+        Object.values(BRANDING_CSS_MAP).forEach((cssVar) => {
+            if (cssVar)
+                root.style.removeProperty(cssVar);
+        });
+        // Also remove aliased vars
+        root.style.removeProperty('--accent-primary');
+        root.style.removeProperty('--app-primary');
+        root.style.removeProperty('--app-accent');
+        root.removeAttribute('data-branding-loaded');
+        return;
+    }
+    if (branding.primary) {
+        root.style.setProperty('--primary', branding.primary);
+        root.style.setProperty('--accent-primary', branding.primary);
+        root.style.setProperty('--app-primary', branding.primary);
+        root.style.setProperty('--ring', branding.primary);
+    }
+    if (branding.accent) {
+        root.style.setProperty('--accent', branding.accent);
+        root.style.setProperty('--accent-secondary', branding.accent);
+        root.style.setProperty('--app-accent', branding.accent);
+    }
+    if (branding.logo_url) {
+        root.style.setProperty('--logo-url', `url(${branding.logo_url})`);
+    }
+    if (branding.mark_url) {
+        root.style.setProperty('--mark-url', `url(${branding.mark_url})`);
+    }
+    if (branding.font_stack) {
+        root.style.setProperty('--font-stack', branding.font_stack);
+    }
+    root.setAttribute('data-branding-loaded', 'true');
+}
+function persistBranding(branding) {
+    try {
+        if (branding) {
+            localStorage.setItem(BRANDING_STORAGE_KEY, JSON.stringify(branding));
+        }
+        else {
+            localStorage.removeItem(BRANDING_STORAGE_KEY);
+        }
+    }
+    catch {
+        // localStorage not available — silently ignore
+    }
+}
+function loadPersistedBranding() {
+    try {
+        const raw = localStorage.getItem(BRANDING_STORAGE_KEY);
+        if (!raw)
+            return null;
+        return JSON.parse(raw);
+    }
+    catch {
+        return null;
+    }
+}
+function isBrandingEnabled() {
+    try {
+        // Vite env var — only present in client bundles that set it
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const flag = import.meta.env;
+        const value = flag?.VITE_ENABLE_BRANDING_OVERRIDE ?? flag?.['VITE_ENABLE_BRANDING_OVERRIDE'];
+        if (value === 'false' || value === '0')
+            return false;
+    }
+    catch {
+        // Not in a Vite context — default to enabled
+    }
+    return true;
+}
+export function BrandingProvider({ children, supabaseClient, applyPersistedOnMount = true, }) {
+    const [branding, setBranding] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const channelRef = useRef(null);
+    const fetchBranding = useCallback(async () => {
+        if (!isBrandingEnabled()) {
+            setIsLoading(false);
+            return;
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            const { data, error: rpcError } = await supabaseClient.rpc('branding_json_for_tenant');
+            if (rpcError) {
+                throw new Error(rpcError.message);
+            }
+            const resolved = data ?? null;
+            setBranding(resolved);
+            applyBrandingToRoot(resolved);
+            persistBranding(resolved);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error(String(err)));
+            // On error keep any persisted branding applied (already done at mount)
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [supabaseClient]);
+    // Apply persisted branding immediately to prevent FOUC
+    useEffect(() => {
+        if (applyPersistedOnMount && isBrandingEnabled()) {
+            const persisted = loadPersistedBranding();
+            if (persisted) {
+                applyBrandingToRoot(persisted);
+                setBranding(persisted);
+            }
+        }
+    }, [applyPersistedOnMount]);
+    // Fetch fresh branding on mount
+    useEffect(() => {
+        void fetchBranding();
+    }, [fetchBranding]);
+    // Subscribe to Realtime tenant row changes so branding propagates without reload
+    useEffect(() => {
+        if (!isBrandingEnabled())
+            return;
+        const channel = supabaseClient
+            .channel('tenant-branding-updates')
+            .on('postgres_changes', {
+            event: 'UPDATE',
+            schema: 'public',
+            table: 'tenants',
+            // filter is applied server-side via RLS — only own tenant rows are received
+        }, (_payload) => {
+            // Re-fetch to get the full branding_json_for_tenant RPC result
+            void fetchBranding();
+        })
+            .subscribe();
+        channelRef.current = channel;
+        return () => {
+            if (channelRef.current) {
+                void supabaseClient.removeChannel(channelRef.current);
+                channelRef.current = null;
+            }
+        };
+    }, [supabaseClient, fetchBranding]);
+    const value = useMemo(() => ({ branding, isLoading, error, refresh: fetchBranding }), [branding, isLoading, error, fetchBranding]);
+    return _jsx(BrandingContext.Provider, { value: value, children: children });
+}

package/dist/react/index.d.ts

@@ -3,4 +3,6 @@ export type { ThemeProviderProps } from './ThemeProvider';
 export { useTheme } from './useTheme';
 export type { ThemeContextValue, ThemeMode, ResolvedTheme } from '../index';
 export { THEME_STORAGE_KEY } from '../index';
+export { BrandingProvider, BrandingContext, BRANDING_STORAGE_KEY, BRANDING_OVERRIDE_FLAG } from './BrandingProvider';
+export type { TenantBranding, BrandingContextValue } from './BrandingProvider';
 //# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACpH,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/react/index.js

@@ -1,3 +1,4 @@
 export { ThemeProvider } from './ThemeProvider';
 export { useTheme } from './useTheme';
 export { THEME_STORAGE_KEY } from '../index';
+export { BrandingProvider, BrandingContext, BRANDING_STORAGE_KEY, BRANDING_OVERRIDE_FLAG } from './BrandingProvider';

package/dist/react/useBranding.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Access the current tenant branding values and loading state.
+ *
+ * Must be used inside a <BrandingProvider>.
+ *
+ * @example
+ *   const { branding, isLoading } = useBranding()
+ *   const logoUrl = branding?.logo_url ?? '/logos/default-logo.svg'
+ */
+export declare function useBranding(): import("./BrandingProvider").BrandingContextValue;
+//# sourceMappingURL=useBranding.d.ts.map

package/dist/react/useBranding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBranding.d.ts","sourceRoot":"","sources":["../../src/react/useBranding.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,wBAAgB,WAAW,sDAM1B"}

package/dist/react/useBranding.js

@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+import { BrandingContext } from './BrandingProvider';
+/**
+ * Access the current tenant branding values and loading state.
+ *
+ * Must be used inside a <BrandingProvider>.
+ *
+ * @example
+ *   const { branding, isLoading } = useBranding()
+ *   const logoUrl = branding?.logo_url ?? '/logos/default-logo.svg'
+ */
+export function useBranding() {
+    const ctx = useContext(BrandingContext);
+    if (!ctx) {
+        throw new Error('useBranding must be used within a <BrandingProvider>');
+    }
+    return ctx;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/theme",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -46,18 +46,24 @@
     "prepublishOnly": "pnpm build"
   },
   "peerDependencies": {
+    "@supabase/supabase-js": ">=2.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "tailwindcss": ">=3.4.0"
   },
   "peerDependenciesMeta": {
+    "@supabase/supabase-js": {
+      "optional": true
+    },
     "tailwindcss": {
       "optional": true
     }
   },
   "devDependencies": {
+    "@supabase/supabase-js": "^2.49.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@types/node": "^20.0.0",
     "@types/react": "^18.3.28",
     "@vitejs/plugin-react": "^5.2.0",
     "jsdom": "^28.1.0",

package/src/css/utilities.css

@@ -5,37 +5,37 @@
  * consumer regardless of their Tailwind version (v3 or v4).
  */
 
-/* ===== Glow effects (use box-shadow with alpha scaled by glow-strength) ===== */
+/* ===== Glow effects (oklch with alpha scaled by glow-strength) ===== */
 .glow-electric-blue {
-  box-shadow: 0 0 20px rgb(var(--neon-electric-blue-rgb) / var(--glow-strength));
+  box-shadow: 0 0 20px oklch(0.546 0.215 262.9 / var(--glow-strength));
 }
 .glow-electric-cyan {
-  box-shadow: 0 0 20px rgb(var(--neon-electric-cyan-rgb) / var(--glow-strength));
+  box-shadow: 0 0 20px oklch(0.769 0.132 191.7 / var(--glow-strength));
 }
 .glow-electric-indigo {
-  box-shadow: 0 0 20px rgb(var(--neon-electric-indigo-rgb) / var(--glow-strength));
+  box-shadow: 0 0 20px oklch(0.511 0.23 277 / var(--glow-strength));
 }
 .glow-electric-purple {
-  box-shadow: 0 0 20px rgb(var(--neon-electric-purple-rgb) / var(--glow-strength));
+  box-shadow: 0 0 20px oklch(0.568 0.202 283.1 / var(--glow-strength));
 }
 .glow-electric-pink {
-  box-shadow: 0 0 20px rgb(var(--neon-electric-pink-rgb) / var(--glow-strength));
+  box-shadow: 0 0 20px oklch(0.656 0.212 354.3 / var(--glow-strength));
 }
 .glow-electric-coral {
-  box-shadow: 0 0 20px rgb(var(--neon-electric-coral-rgb) / var(--glow-strength));
+  box-shadow: 0 0 20px oklch(0.669 0.219 20.9 / var(--glow-strength));
 }
 .glow-electric-magenta {
-  box-shadow: 0 0 20px rgb(var(--neon-electric-magenta-rgb) / var(--glow-strength));
+  box-shadow: 0 0 20px oklch(0.742 0.167 359.5 / var(--glow-strength));
 }
 
 /* ===== Neon text shadows ===== */
 .neon-text-cyan {
-  text-shadow: 0 0 10px rgb(var(--neon-electric-cyan-rgb) / 0.5),
-               0 0 20px rgb(var(--neon-electric-cyan-rgb) / 0.3);
+  text-shadow: 0 0 10px oklch(0.769 0.132 191.7 / 0.5),
+               0 0 20px oklch(0.769 0.132 191.7 / 0.3);
 }
 .neon-text-electric {
-  text-shadow: 0 0 10px rgb(var(--neon-electric-blue-rgb) / 0.5),
-               0 0 20px rgb(var(--neon-electric-blue-rgb) / 0.3);
+  text-shadow: 0 0 10px oklch(0.546 0.215 262.9 / 0.5),
+               0 0 20px oklch(0.546 0.215 262.9 / 0.3);
 }
 
 /* ===== Smooth theme transition ===== */

package/src/css/vars.css

@@ -1,84 +1,71 @@
 /*
  * @bsuite/theme — CSS custom properties (:root + .dark)
  *
- * Canonical D2C Neon Electric palette. Both hex values and RGB triplets are
- * exported so consumers can use either pattern:
+ * Canonical D2C Neon Electric palette in oklch. Tailwind v4 supports
+ * native alpha modifiers on oklch values, so RGB triplets are no longer
+ * needed:
  *
  *   color: var(--neon-electric-blue);
- *   background: rgb(var(--neon-electric-blue-rgb) / 0.4);
+ *   background: oklch(from var(--neon-electric-blue) l c h / 0.4);
  *
- * The RGB-triplet form is what the Tailwind preset uses under the hood so
- * `<alpha-value>` modifiers in Tailwind classes (e.g. bg-neon-electric-blue/40)
- * resolve correctly.
+ * In Tailwind v4 @theme blocks, oklch values automatically support
+ * alpha modifiers: bg-neon-electric-blue/40 works natively.
  */
 
 :root {
   /* ===== Neon Electric (11 colours — FROZEN per D2C spec v1.00A) ===== */
-  --neon-electric-blue: #2563eb;
-  --neon-electric-cyan: #00cec9;
-  --neon-electric-indigo: #4f46e5;
-  --neon-electric-purple: #6c5ce7;
-  --neon-electric-magenta: #fd79a8;
-  --neon-electric-pink: #ec4899;
-  --neon-electric-coral: #ff4757;
-  --neon-electric-orange: #ff7675;
-  --neon-electric-yellow: #fdcb6e;
-  --neon-electric-green: #22c55e;
-  --neon-electric-lavender: #a29bfe;
-
-  /* RGB triplets for rgba() use and Tailwind alpha-value substitution */
-  --neon-electric-blue-rgb: 37 99 235;
-  --neon-electric-cyan-rgb: 0 206 201;
-  --neon-electric-indigo-rgb: 79 70 229;
-  --neon-electric-purple-rgb: 108 92 231;
-  --neon-electric-magenta-rgb: 253 121 168;
-  --neon-electric-pink-rgb: 236 72 153;
-  --neon-electric-coral-rgb: 255 71 87;
-  --neon-electric-orange-rgb: 255 118 117;
-  --neon-electric-yellow-rgb: 253 203 110;
-  --neon-electric-green-rgb: 34 197 94;
-  --neon-electric-lavender-rgb: 162 155 254;
+  --neon-electric-blue: oklch(0.546 0.215 262.9);
+  --neon-electric-cyan: oklch(0.769 0.132 191.7);
+  --neon-electric-indigo: oklch(0.511 0.23 277);
+  --neon-electric-purple: oklch(0.568 0.202 283.1);
+  --neon-electric-magenta: oklch(0.742 0.167 359.5);
+  --neon-electric-pink: oklch(0.656 0.212 354.3);
+  --neon-electric-coral: oklch(0.669 0.219 20.9);
+  --neon-electric-orange: oklch(0.728 0.168 22.5);
+  --neon-electric-yellow: oklch(0.868 0.125 81.4);
+  --neon-electric-green: oklch(0.723 0.192 149.6);
+  --neon-electric-lavender: oklch(0.736 0.141 285.6);
 
   /* ===== Light theme surfaces ===== */
-  --light-bg-primary: #f2f2f2;
-  --light-bg-secondary: #f8f9fa;
-  --light-bg-tertiary: #f1f3f4;
-  --light-bg-accent: #ffffff;
-  --light-text-primary: #2d3436;
-  --light-text-secondary: #636e72;
-  --light-text-tertiary: #74b9ff;
-  --light-text-quaternary: #a4afb7;
-  --light-border: #e9ecef;
-  --light-hover: #f1f3f4;
+  --light-bg-primary: oklch(0.961 0 0.5);
+  --light-bg-secondary: oklch(0.982 0.002 248);
+  --light-bg-tertiary: oklch(0.963 0.003 228.9);
+  --light-bg-accent: oklch(1 0 0.5);
+  --light-text-primary: oklch(0.319 0.01 216.8);
+  --light-text-secondary: oklch(0.53 0.015 221.6);
+  --light-text-tertiary: oklch(0.768 0.123 250);
+  --light-text-quaternary: oklch(0.748 0.017 239.2);
+  --light-border: oklch(0.942 0.005 247.9);
+  --light-hover: oklch(0.963 0.003 228.9);
 
   /* ===== Dark theme surfaces ===== */
-  --dark-bg-primary: #0a0e1a;
-  --dark-bg-secondary: #1a1f2e;
-  --dark-bg-tertiary: #2c3447;
-  --dark-bg-quaternary: #3c4558;
-  --dark-bg-accent: #252b3d;
-  --dark-text-primary: #f8f9fa;
-  --dark-text-secondary: #adb5bd;
-  --dark-text-tertiary: #6c757d;
-  --dark-text-quaternary: #495057;
-  --dark-border: #495057;
-  --dark-hover: #3c4558;
+  --dark-bg-primary: oklch(0.166 0.026 269.4);
+  --dark-bg-secondary: oklch(0.242 0.03 269.9);
+  --dark-bg-tertiary: oklch(0.326 0.036 266.7);
+  --dark-bg-quaternary: oklch(0.39 0.035 265);
+  --dark-bg-accent: oklch(0.292 0.034 270);
+  --dark-text-primary: oklch(0.982 0.002 248);
+  --dark-text-secondary: oklch(0.769 0.015 248);
+  --dark-text-tertiary: oklch(0.558 0.016 244.9);
+  --dark-text-quaternary: oklch(0.428 0.015 248.2);
+  --dark-border: oklch(0.428 0.015 248.2);
+  --dark-hover: oklch(0.39 0.035 265);
 
   /* ===== Semantic status colours ===== */
-  --status-success: #00b894;
-  --status-warning: #fdcb6e;
-  --status-error: #ff4757;
-  --status-info: #00cec9;
+  --status-success: oklch(0.697 0.135 172.1);
+  --status-warning: oklch(0.868 0.125 81.4);
+  --status-error: oklch(0.669 0.219 20.9);
+  --status-info: oklch(0.769 0.132 191.7);
 
   /* ===== WCAG AA compliant text pairs =====
    *
-   * Raw neon cyan #00cec9 on light #f2f2f2 is 1.76:1 — fails WCAG AA 4.5:1.
+   * Raw neon cyan on light bg is 1.76:1 — fails WCAG AA 4.5:1.
    * These tokens are the accessible text equivalents for the same visual
    * identity. Use these for any text, border, or icon that needs to pass
    * contrast checks; use raw --neon-electric-cyan for backgrounds and
    * decorative elements only. */
-  --color-accent-text: #006e6b;   /* Dark cyan — passes AA on light bg */
-  --color-primary-text: #0a47e5;  /* Saturated blue — passes AA on light bg */
+  --color-accent-text: oklch(0.486 0.084 191.5);   /* Dark cyan — passes AA on light bg */
+  --color-primary-text: oklch(0.485 0.243 263.6);  /* Saturated blue — passes AA on light bg */
 
   /* ===== Glow + shadow strength multipliers ===== */
   --glow-strength: 0.4;
@@ -86,14 +73,14 @@
 }
 
 .dark {
-  /* Neon palette is identical in dark mode — same raw colours, same RGB
-   * triplets. What changes is the intensity of glow/shadow effects, which
+  /* Neon palette is identical in dark mode — same oklch values.
+   * What changes is the intensity of glow/shadow effects, which
    * we scale down to suit dark surfaces. */
   --glow-strength: 0.6;
   --shadow-strength: 0.8;
 
   /* Accent/primary text tokens flip to the raw neons in dark mode because
-   * contrast on #0a0e1a navy is already ≥ 9:1 for those values. */
-  --color-accent-text: #00cec9;
-  --color-primary-text: #3b82f6;
+   * contrast on navy bg is already ≥ 9:1 for those values. */
+  --color-accent-text: oklch(0.769 0.132 191.7);
+  --color-primary-text: oklch(0.623 0.188 259.8);
 }

package/src/preset-v4.css

@@ -20,39 +20,39 @@
 
 @theme {
   /* ===== Neon Electric palette (11 colours, canonical D2C) ===== */
-  --color-neon-electric-blue: #2563eb;
-  --color-neon-electric-cyan: #00cec9;
-  --color-neon-electric-indigo: #4f46e5;
-  --color-neon-electric-purple: #6c5ce7;
-  --color-neon-electric-magenta: #fd79a8;
-  --color-neon-electric-pink: #ec4899;
-  --color-neon-electric-coral: #ff4757;
-  --color-neon-electric-orange: #ff7675;
-  --color-neon-electric-yellow: #fdcb6e;
-  --color-neon-electric-green: #22c55e;
-  --color-neon-electric-lavender: #a29bfe;
+  --color-neon-electric-blue: oklch(0.546 0.215 262.9);
+  --color-neon-electric-cyan: oklch(0.769 0.132 191.7);
+  --color-neon-electric-indigo: oklch(0.511 0.23 277);
+  --color-neon-electric-purple: oklch(0.568 0.202 283.1);
+  --color-neon-electric-magenta: oklch(0.742 0.167 359.5);
+  --color-neon-electric-pink: oklch(0.656 0.212 354.3);
+  --color-neon-electric-coral: oklch(0.669 0.219 20.9);
+  --color-neon-electric-orange: oklch(0.728 0.168 22.5);
+  --color-neon-electric-yellow: oklch(0.868 0.125 81.4);
+  --color-neon-electric-green: oklch(0.723 0.192 149.6);
+  --color-neon-electric-lavender: oklch(0.736 0.141 285.6);
 
   /* ===== Light surface tokens ===== */
-  --color-light-bg-primary: #f2f2f2;
-  --color-light-bg-secondary: #f8f9fa;
-  --color-light-bg-tertiary: #f1f3f4;
-  --color-light-bg-accent: #ffffff;
-  --color-light-text-primary: #2d3436;
-  --color-light-text-secondary: #636e72;
+  --color-light-bg-primary: oklch(0.961 0 0.5);
+  --color-light-bg-secondary: oklch(0.982 0.002 248);
+  --color-light-bg-tertiary: oklch(0.963 0.003 228.9);
+  --color-light-bg-accent: oklch(1 0 0.5);
+  --color-light-text-primary: oklch(0.319 0.01 216.8);
+  --color-light-text-secondary: oklch(0.53 0.015 221.6);
 
   /* ===== Dark surface tokens ===== */
-  --color-dark-bg-primary: #0a0e1a;
-  --color-dark-bg-secondary: #1a1f2e;
-  --color-dark-bg-tertiary: #2c3447;
-  --color-dark-bg-accent: #252b3d;
-  --color-dark-text-primary: #f8f9fa;
-  --color-dark-text-secondary: #adb5bd;
+  --color-dark-bg-primary: oklch(0.166 0.026 269.4);
+  --color-dark-bg-secondary: oklch(0.242 0.03 269.9);
+  --color-dark-bg-tertiary: oklch(0.326 0.036 266.7);
+  --color-dark-bg-accent: oklch(0.292 0.034 270);
+  --color-dark-text-primary: oklch(0.982 0.002 248);
+  --color-dark-text-secondary: oklch(0.769 0.015 248);
 
   /* ===== Semantic status ===== */
-  --color-status-success: #00b894;
-  --color-status-warning: #fdcb6e;
-  --color-status-error: #ff4757;
-  --color-status-info: #00cec9;
+  --color-status-success: oklch(0.697 0.135 172.1);
+  --color-status-warning: oklch(0.868 0.125 81.4);
+  --color-status-error: oklch(0.669 0.219 20.9);
+  --color-status-info: oklch(0.769 0.132 191.7);
 
   /* ===== Animations (Tailwind v4 exposes via --animate-*) ===== */
   --animate-pulse-soft: pulse-soft 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;

package/src/tailwind-preset.js

@@ -1,5 +1,5 @@
 /**
- * @bsuite/theme — Tailwind v3 preset
+ * @bsuite/theme — Tailwind v3 preset (oklch edition)
  *
  * Consume via:
  *   // tailwind.config.js (CommonJS)
@@ -12,9 +12,15 @@
  * surface tokens, semantic status colours, gradients, glow shadows, and
  * the six canonical animations. Does not override Tailwind's default scale.
  *
- * The `rgb(var(--*-rgb) / <alpha-value>)` pattern makes Tailwind alpha-value
- * modifiers work (e.g. `bg-neon-electric-blue/40`). Requires the companion
- * CSS vars to be loaded via `@import '@bsuite/theme/css'`.
+ * Colour values are inline oklch so the preset is self-contained — no
+ * dependency on any `--*-rgb` CSS custom property. Tailwind v3 injects
+ * `<alpha-value>` into any valid CSS colour function, and `oklch(L C H / A)`
+ * is valid CSS Color 4 syntax (supported in all evergreen browsers:
+ * Chrome ≥111, Safari ≥15.4, Firefox ≥113). Keeps bg-neon-electric-blue/40
+ * and friends working without the RGB-triplet variable indirection.
+ *
+ * Values are kept in sync with `preset-v4.css` — editing one without the
+ * other will cause v3 and v4 consumers to diverge. See README.
  *
  * NOTE: Tailwind v4 apps should import `@bsuite/theme/preset-v4.css` instead.
  * v4 removed the preset system — presets exist only for v3.
@@ -27,17 +33,17 @@ module.exports = {
     extend: {
       colors: {
         neon: {
-          'electric-blue': 'rgb(var(--neon-electric-blue-rgb) / <alpha-value>)',
-          'electric-cyan': 'rgb(var(--neon-electric-cyan-rgb) / <alpha-value>)',
-          'electric-indigo': 'rgb(var(--neon-electric-indigo-rgb) / <alpha-value>)',
-          'electric-purple': 'rgb(var(--neon-electric-purple-rgb) / <alpha-value>)',
-          'electric-magenta': 'rgb(var(--neon-electric-magenta-rgb) / <alpha-value>)',
-          'electric-pink': 'rgb(var(--neon-electric-pink-rgb) / <alpha-value>)',
-          'electric-coral': 'rgb(var(--neon-electric-coral-rgb) / <alpha-value>)',
-          'electric-orange': 'rgb(var(--neon-electric-orange-rgb) / <alpha-value>)',
-          'electric-yellow': 'rgb(var(--neon-electric-yellow-rgb) / <alpha-value>)',
-          'electric-green': 'rgb(var(--neon-electric-green-rgb) / <alpha-value>)',
-          'electric-lavender': 'rgb(var(--neon-electric-lavender-rgb) / <alpha-value>)',
+          'electric-blue': 'oklch(0.546 0.215 262.9 / <alpha-value>)',
+          'electric-cyan': 'oklch(0.769 0.132 191.7 / <alpha-value>)',
+          'electric-indigo': 'oklch(0.511 0.23 277 / <alpha-value>)',
+          'electric-purple': 'oklch(0.568 0.202 283.1 / <alpha-value>)',
+          'electric-magenta': 'oklch(0.742 0.167 359.5 / <alpha-value>)',
+          'electric-pink': 'oklch(0.656 0.212 354.3 / <alpha-value>)',
+          'electric-coral': 'oklch(0.669 0.219 20.9 / <alpha-value>)',
+          'electric-orange': 'oklch(0.728 0.168 22.5 / <alpha-value>)',
+          'electric-yellow': 'oklch(0.868 0.125 81.4 / <alpha-value>)',
+          'electric-green': 'oklch(0.726 0.197 145.5 / <alpha-value>)',
+          'electric-lavender': 'oklch(0.749 0.115 288.4 / <alpha-value>)',
         },
         light: {
           bg: {
@@ -82,26 +88,26 @@ module.exports = {
 
       backgroundImage: {
         'gradient-brand':
-          'linear-gradient(135deg, #ff4757 0%, #ff7675 25%, #fdcb6e 50%, #00cec9 75%, #a29bfe 100%)',
+          'linear-gradient(135deg, oklch(0.669 0.219 20.9) 0%, oklch(0.728 0.168 22.5) 25%, oklch(0.868 0.125 81.4) 50%, oklch(0.769 0.132 191.7) 75%, oklch(0.749 0.115 288.4) 100%)',
         'gradient-electric':
-          'linear-gradient(135deg, #2563eb 0%, #00cec9 50%, #ec4899 100%)',
+          'linear-gradient(135deg, oklch(0.546 0.215 262.9) 0%, oklch(0.769 0.132 191.7) 50%, oklch(0.656 0.212 354.3) 100%)',
         'gradient-neon':
-          'linear-gradient(90deg, #00cec9 0%, #6c5ce7 50%, #ff4757 100%)',
+          'linear-gradient(90deg, oklch(0.769 0.132 191.7) 0%, oklch(0.568 0.202 283.1) 50%, oklch(0.669 0.219 20.9) 100%)',
         'gradient-chat-user':
-          'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          'linear-gradient(135deg, oklch(0.636 0.153 271.3) 0%, oklch(0.466 0.168 296.3) 100%)',
         'gradient-chat-agent':
-          'linear-gradient(135deg, #2563eb 0%, #ec4899 100%)',
+          'linear-gradient(135deg, oklch(0.546 0.215 262.9) 0%, oklch(0.656 0.212 354.3) 100%)',
         'gradient-neural':
-          'radial-gradient(circle at center, rgba(0, 206, 201, 0.1) 0%, transparent 50%)',
+          'radial-gradient(circle at center, oklch(0.769 0.132 191.7 / 0.1) 0%, transparent 50%)',
       },
 
       boxShadow: {
-        'glow-electric-blue': '0 0 20px rgb(var(--neon-electric-blue-rgb) / var(--glow-strength))',
-        'glow-electric-cyan': '0 0 20px rgb(var(--neon-electric-cyan-rgb) / var(--glow-strength))',
-        'glow-electric-purple': '0 0 20px rgb(var(--neon-electric-purple-rgb) / var(--glow-strength))',
-        'glow-electric-pink': '0 0 20px rgb(var(--neon-electric-pink-rgb) / var(--glow-strength))',
-        'glow-electric-coral': '0 0 20px rgb(var(--neon-electric-coral-rgb) / var(--glow-strength))',
-        'glow-electric-magenta': '0 0 20px rgb(var(--neon-electric-magenta-rgb) / var(--glow-strength))',
+        'glow-electric-blue': '0 0 20px oklch(0.546 0.215 262.9 / var(--glow-strength))',
+        'glow-electric-cyan': '0 0 20px oklch(0.769 0.132 191.7 / var(--glow-strength))',
+        'glow-electric-purple': '0 0 20px oklch(0.568 0.202 283.1 / var(--glow-strength))',
+        'glow-electric-pink': '0 0 20px oklch(0.656 0.212 354.3 / var(--glow-strength))',
+        'glow-electric-coral': '0 0 20px oklch(0.669 0.219 20.9 / var(--glow-strength))',
+        'glow-electric-magenta': '0 0 20px oklch(0.742 0.167 359.5 / var(--glow-strength))',
       },
 
       animation: {
@@ -119,8 +125,8 @@ module.exports = {
           '50%': { opacity: '0.7' },
         },
         glow: {
-          '0%': { boxShadow: '0 0 5px rgba(0, 206, 201, 0.2)' },
-          '100%': { boxShadow: '0 0 20px rgba(0, 206, 201, 0.6)' },
+          '0%': { boxShadow: '0 0 5px oklch(0.769 0.132 191.7 / 0.2)' },
+          '100%': { boxShadow: '0 0 20px oklch(0.769 0.132 191.7 / 0.6)' },
         },
         typing: {
           '0%, 60%': { opacity: '1' },
@@ -135,8 +141,8 @@ module.exports = {
           '50%': { transform: 'translateY(-10px)' },
         },
         'neon-pulse': {
-          '0%, 100%': { textShadow: '0 0 10px rgba(0, 206, 201, 0.3)' },
-          '50%': { textShadow: '0 0 20px rgba(0, 206, 201, 0.8)' },
+          '0%, 100%': { textShadow: '0 0 10px oklch(0.769 0.132 191.7 / 0.3)' },
+          '50%': { textShadow: '0 0 20px oklch(0.769 0.132 191.7 / 0.8)' },
         },
       },
     },