feat: add toggles to the demo page

apps/demo/src/App.css

@@ -35,6 +35,11 @@
 
 .card {
   padding: 2em;
+  display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 1em;
 }
 
 .read-the-docs {

apps/demo/src/App.tsx

@@ -1,18 +1,56 @@
 import './App.css'
 import { Button } from '@repo/ui'
+import "@repo/foundations/styles";
+import { useTheme } from './ThemeProvider';
+
+const LightModeIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
+)
+
+const DarkModeIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>)
+
+const DesktopIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-monitor-check"><path d="m9 10 2 2 4-4"/><rect width="20" height="14" x="2" y="3" rx="2"/><path d="M12 17v4"/><path d="M8 21h8"/></svg>)
+
+const MobileIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-tablet-smartphone"><rect width="10" height="14" x="3" y="8" rx="2"/><path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4"/><path d="M8 18h.01"/></svg>)
+
+const DefaultBrandIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-star"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>)
+
+const SecondaryBrandIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-star-off"><path d="M8.34 8.34 2 9.27l5 4.87L5.82 21 12 17.77 18.18 21l-.59-3.43"/><path d="M18.42 12.76 22 9.27l-6.91-1L12 2l-1.44 2.91"/><line x1="2" x2="22" y1="2" y2="22"/></svg>)
+
 
 function App() {
+  const { 
+    brand, 
+    mode, 
+    breakpoint, 
+    setBrand, 
+    setMode, 
+    setBreakpoint 
+  } = useTheme();
+
 
   return (
-    <>
+    <main>
       <div>
         Radius Token Tango demo
       </div>
+      <div></div>
       <h1>Kitchen Sink</h1>
-      <div className="card">
-        <Button label="Click me" />
+      <div className='control'>
+        <button title={mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'} onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}>
+          {mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
+        </button>
+        <button title={breakpoint === 'desktop' ? 'Switch to mobile view' : 'Switch to desktop view'} onClick={() => setBreakpoint(breakpoint === 'desktop' ? 'mobile' : 'desktop')}>
+          {breakpoint === 'desktop' ? <MobileIcon /> : <DesktopIcon />}
+        </button>
+        <button title={brand === 'brand-1' ? 'Switch to hot brand' : 'Switch to default brand'} onClick={() => setBrand(brand === 'brand-1' ? 'hot-brand' : 'brand-1')}>
+          {brand === 'brand-1' ? <SecondaryBrandIcon/> : <DefaultBrandIcon/>}
+        </button>
+      </div>
+      <div className='card'>
+        <Button label="Primary" variant='primary' />
+        <Button label="Secondary" variant='secondary' />
       </div>
-    </>
+    </main>
   )
 }
 

apps/demo/src/ThemeProvider.tsx

@@ -0,0 +1,59 @@
+import React, { createContext, useState, ReactNode, useEffect, useContext } from 'react';
+
+type Brand = 'brand-1' | 'hot-brand';
+type Mode = 'light' | 'dark';
+type Breakpoint = 'desktop' | 'mobile';
+type Density = 'default' | 'compact';
+
+interface ThemeContextType {
+  brand: Brand;
+  mode: Mode;
+  breakpoint: Breakpoint;
+  density: Density;
+  setBrand: (brand: Brand) => void;
+  setMode: (mode: Mode) => void;
+  setBreakpoint: (breakpoint: Breakpoint) => void;
+  setDensity: (density: Density) => void;
+  bodyClasses: string;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const ThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [brand, setBrand] = useState<Brand>('brand-1');
+  const [mode, setMode] = useState<Mode>('light');
+  const [breakpoint, setBreakpoint] = useState<Breakpoint>('desktop');
+  const [density, setDensity] = useState<Density>('default');
+
+  const bodyClasses = [brand, mode, density, breakpoint].join(" ");
+
+  useEffect(() => {
+    document.body.className = bodyClasses;
+  }, [bodyClasses]);
+
+  const contextValue: ThemeContextType = {
+    brand,
+    mode,
+    breakpoint,
+    density,
+    setBrand,
+    setMode,
+    setBreakpoint,
+    setDensity,
+    bodyClasses
+  };
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+    const context = useContext(ThemeContext);
+    if (context === undefined) {
+      throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+  };

apps/demo/src/index.css

@@ -28,11 +28,14 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  background-color: var(--semantic-static-background-color-default);
+    color: var(--semantic-static-text-color-default);
 }
 
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
+  color: var(--semantic-static-text-color-default);
 }
 
 button {
@@ -54,6 +57,11 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+.control {
+  display: flex;
+  justify-content: center;
+  gap: 0.5em;
+}
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

apps/demo/src/main.tsx

@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import { ThemeProvider } from './ThemeProvider.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </StrictMode>,
 )

packages/foundations/package.json

@@ -8,7 +8,9 @@
     "./styles": "./index.css"
   },
   "scripts": {
-    "build": "radius-toolkit generate tokens.json -o styles/index.css"
+    "build": "radius-toolkit generate tokens.json -o styles/index.css",
+    "build:custom": "radius-toolkit generate tokens.json -c myCustomTemplate -T ./templates -o styles/vector.json",
+    "build:tailwind": "radius-toolkit generate tokens.json -t tailwind"
   },
   "keywords": [],
   "author": "",