📦 feat: Move Shared Components to @librechat/client (#8685)

* feat: init @librechat/client * feat: Add common types and interfaces for accessibility, agents, artifacts, assistants, and tools * feat: Add jotai as a peer dependency * fix build client package * feat: cleanup unused types from common/index.ts - Remove 104 unused type exports from packages/client/src/common/index.ts - Keep only 7 actually used exports (93% reduction) - Add cleanup script with enhanced import pattern detection - Support both named imports and namespace imports (* as t) - Create automatic backups and comprehensive documentation - Maintain type safety with build verification - No breaking changes to existing code Kept exports: - TShowToast, Option, OptionWithIcon, DropdownValueSetter - MentionOption, NotificationSeverity, MenuItemProps Scripts: cleanup-common-types-safe.js, README-CLEANUP.md * fix: cleanup * fix: package; refactor: tsconfig * feat: add back `recoil` * fix: move dependencies to peerDependencies in client package * feat: add @librechat/client as a dependency in package.json and package-lock.json * feat: update client package configuration and dependencies - Added new dependencies for Rollup plugins and updated existing ones in package.json and package-lock.json. - Introduced a new Rollup configuration file for building the client package. - Refactored build scripts to include a dedicated build command for the client. - Updated TypeScript configuration for improved module resolution and type declaration output. - Integrated a Toast component from the client package into the main App component. * feat: enhance Rollup configuration for client package - Updated terser plugin settings to preserve directives like 'use client'. - Added custom warning handler to ignore "use client" directive warnings during the build process. * chore: rename package/client build script command * feat: update client package dependencies and Rollup configuration - Added rollup-plugin-postcss to package.json and updated package-lock.json. - Enhanced Rollup configuration to include postcss plugin for CSS handling. - Updated index.ts to export all components from the components directory for better modularity. * feat: add client package directory to update configuration - Included the 'client' package directory in the update.js configuration to ensure it is recognized during updates. * feat: export Toast component in client package - Added export for the Toast component in index.ts to enhance modularity and accessibility of components. * feat: /client transition to @librechat/client * chore: fixed formatting issues * fix: update peer dependencies in @librechat/client to prevent bundling them * fix: correct useSprings implementation in SplitText component * fix: circular dependencies in DataTable * fix: add remaining peer dependencies and match actual versions previously used in `client/package.json` * fix: correct frontend:ci script to include client package build * chore: enhance unused package detection for @librechat/client and improve dependency extraction * fix: add missing peer dependency for @radix-ui/react-collapsible * chore: include "packages/client" in unused i18next keys detection * test: update AgentFooter tests to use document.querySelector for spinner checks test: mock window.matchMedia in setupTests.js for consistent test environment * feat: add react-hook-form dependency and update FormInput component to use its types * chore: linting * refactor: remove unused defaultSelectedValues prop from MCPSelect and MultiSelect components * chore: linting * feat: update GitHub Actions workflow to publish @librechat/client * chore: update GitHub Actions workflow to install and build data-provider and client dependencies * chore: add missing @testing-library/react dependency to client package * chore: update tsconfig.json to exclude additional test files * chore: fix build issues, resolve latest LC changes * chore: move MCP components outside of `~/components/ui` * feat: implement dynamic theme system with environment variable support and Tailwind CSS integration * chore: remove unnecessary logging of sttExternal and ttsExternal in Speech component * chore: squashed cleanup commits chore: move @tanstack/react-virtual to dependencies and remove recoil from package.json chore: move dependencies to peerDependencies in package.json feat: update package.json and rollup.config.js to include jotai and enhance bundling configuration feat: update package.json and rollup.config.js to include jotai and enhance bundling configuration refactor: reorganize exports in index.ts for improved clarity refactor: remove unused types and interfaces from common files refactor: update peer dependencies and improve component typings - Removed duplicate peer dependencies from package.json and organized them. - Updated rollup.config.js to disable TypeScript checking during the build process. - Modified AnimatedTabs component to use React.ReactNode for label and content types, and added TypeScript workarounds for compatibility. - Enhanced Label and Separator components to accept an optional className prop and improved prop spreading. - Updated Slider component to include an optional className prop and refined prop handling for better type safety. refactor: clean up client workflow and update package dependencies refactor: update package dependencies and improve PostCSS and Rollup configurations chore: bump version to 0.1.2 in package.json chore: bump client version to 0.1.2 in package-lock.json chore: bump client version to 0.1.3 and update dependencies chore: bump client version to 0.1.4 and update @react-spring dependencies chore: update package version to 0.1.5 and adjust peer dependencies - Bump version in package.json from 0.1.4 to 0.1.5. - Update peer dependency for @tanstack/react-query to allow version 5.0.0. - Add @tanstack/react-table and @tanstack/react-virtual as dependencies. - Update various dependencies to their latest compatible versions. - Simplify postcss.config.js by removing unnecessary options. - Clean up rollup.config.js by removing ignored PostCSS warnings. - Update CheckboxButton component to cast icon as React JSX element. - Adjust Combobox component's class names for better styling. - Change DropdownPopup component to use React's namespace import. - Modify InputOTP component to use 'any' type for OTPInputContext. - Ensure displayLabel and value in ModelParameters are converted to strings. - Update MultiSearch component's placeholder to ensure it's a string. - Cast selectIcon in MultiSelect as React JSX element for consistency. - Update OGDialogTemplate to cast selectText as React JSX element. - Initialize animationRef in PixelCard with undefined for clarity. - Add TypeScript ignore comments in Select and SelectDropDown components for Radix UI type conflicts. - Ensure title in SelectDropDown is a string and adjust rendering of options. - Update useLocalize hook to cast options as any for compatibility. refactor: code structure; chore: translations cleanup chore: remove unused imports and clean up code in NewChat component refactor: enhance Menu component to support custom render functions for menu items style: update itemClassName in ToolsDropdown for improved UI consistency fix: merge conflicts chore: update @radix-ui/react-accordion to version 1.2.11 * refactor: remove unnecessary TypeScript type assertions in AnimatedTabs, Label, Separator, and Slider components * feat: enhance theme system with localStorage persistence and new theme atoms * chore: bump version of @librechat/client to 0.1.7 * chore: fix ci/cd warnings/errors related to linting and unused localization keys * chore: update dependencies for class-variance-authority, clsx, and match-sorter * chore: bump @librechat/client to v0.1.8 * feat: add utility colors for theme customization and remove unused tailwindConfig * v0.1.9 --------- Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>
2026-01-19 16:56:12 +01:00 · 2025-07-27 12:19:01 -04:00 · 2025-07-27 12:19:01 -04:00 · 79197454f8
commit 79197454f8
parent 97e1cdd224
569 changed files with 7010 additions and 1848 deletions
--- a/packages/client/src/theme/README.md
+++ b/packages/client/src/theme/README.md
@ -0,0 +1,473 @@
+# Dynamic Theme System for @librechat/client
+
+This theme system allows you to dynamically change colors in your React application using CSS variables and Tailwind CSS. It combines dark/light mode switching with dynamic color theming capabilities.
+
+## Table of Contents
+- [Overview](#overview)
+- [How It Works](#how-it-works)
+- [Basic Usage](#basic-usage)
+- [Available Theme Colors](#available-theme-colors)
+- [Creating Custom Themes](#creating-custom-themes)
+- [Environment Variable Themes](#environment-variable-themes)
+- [Dark/Light Mode](#darklight-mode)
+- [Migration Guide](#migration-guide)
+- [Implementation Details](#implementation-details)
+- [Troubleshooting](#troubleshooting)
+
+## Overview
+
+The theme system provides:
+1. **Dark/Light Mode Switching** - Automatic theme switching based on user preference
+2. **Dynamic Color Theming** - Change colors at runtime without recompiling CSS
+3. **CSS Variable Based** - Uses CSS custom properties for performance
+4. **Tailwind Integration** - Works seamlessly with Tailwind CSS utilities
+5. **TypeScript Support** - Full type safety for theme definitions
+
+## How It Works
+
+The theme system operates in three layers:
+
+1. **CSS Variables Layer**: Default colors defined in your app's CSS
+2. **ThemeProvider Layer**: React context that manages theme state and applies CSS variables
+3. **Tailwind Layer**: Maps CSS variables to Tailwind utility classes
+
+### Default Behavior (No Custom Theme)
+- CSS variables cascade from your app's `style.css` definitions
+- Light mode uses variables under `html` selector
+- Dark mode uses variables under `.dark` selector
+- No JavaScript intervention in color values
+
+### Custom Theme Behavior
+- Only applies when `themeRGB` prop is provided
+- Overrides CSS variables with `rgb()` formatted values
+- Maintains compatibility with existing CSS
+
+## Basic Usage
+
+### 1. Install the Component Library
+
+```bash
+npm install @librechat/client
+```
+
+### 2. Wrap Your App with ThemeProvider
+
+```tsx
+import { ThemeProvider } from '@librechat/client';
+
+function App() {
+  return (
+    <ThemeProvider initialTheme="system">
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+### 3. Set Up Your Base CSS
+
+Ensure your app has CSS variables defined as fallbacks:
+
+```css
+/* style.css */
+:root {
+  --white: #fff;
+  --gray-800: #212121;
+  --gray-100: #ececec;
+  /* ... other color definitions */
+}
+
+html {
+  --text-primary: var(--gray-800);
+  --surface-primary: var(--white);
+  /* ... other theme variables */
+}
+
+.dark {
+  --text-primary: var(--gray-100);
+  --surface-primary: var(--gray-900);
+  /* ... other dark theme variables */
+}
+```
+
+### 4. Configure Tailwind
+
+Update your `tailwind.config.js`:
+
+```js
+module.exports = {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    // Include component library files
+    './node_modules/@librechat/client/dist/**/*.js',
+  ],
+  darkMode: ['class'],
+  theme: {
+    extend: {
+      colors: {
+        // Map CSS variables to Tailwind colors
+        'text-primary': 'var(--text-primary)',
+        'surface-primary': 'var(--surface-primary)',
+        'brand-purple': 'var(--brand-purple)',
+        // ... other colors
+      },
+    },
+  },
+};
+```
+
+### 5. Use Theme Colors in Components
+
+```tsx
+function MyComponent() {
+  return (
+    <div className="bg-surface-primary text-text-primary border border-border-light">
+      <h1 className="text-text-secondary">Hello World</h1>
+      <button className="bg-surface-submit hover:bg-surface-submit-hover text-white">
+        Submit
+      </button>
+    </div>
+  );
+}
+```
+
+## Available Theme Colors
+
+### Text Colors
+- `text-text-primary` - Primary text color
+- `text-text-secondary` - Secondary text color
+- `text-text-secondary-alt` - Alternative secondary text
+- `text-text-tertiary` - Tertiary text color
+- `text-text-warning` - Warning text color
+
+### Surface Colors
+- `bg-surface-primary` - Primary background
+- `bg-surface-secondary` - Secondary background
+- `bg-surface-tertiary` - Tertiary background
+- `bg-surface-submit` - Submit button background
+- `bg-surface-destructive` - Destructive action background
+- `bg-surface-dialog` - Dialog/modal background
+- `bg-surface-chat` - Chat interface background
+
+### Border Colors
+- `border-border-light` - Light border
+- `border-border-medium` - Medium border
+- `border-border-heavy` - Heavy border
+- `border-border-xheavy` - Extra heavy border
+
+### Other Colors
+- `bg-brand-purple` - Brand purple color
+- `bg-presentation` - Presentation background
+- `ring-ring-primary` - Focus ring color
+
+## Creating Custom Themes
+
+### 1. Define Your Theme
+
+```tsx
+import { IThemeRGB } from '@librechat/client';
+
+export const customTheme: IThemeRGB = {
+  'rgb-text-primary': '0 0 0',        // Black
+  'rgb-text-secondary': '100 100 100', // Gray
+  'rgb-surface-primary': '255 255 255', // White
+  'rgb-surface-submit': '0 128 0',     // Green
+  'rgb-brand-purple': '138 43 226',    // Blue Violet
+  // ... define other colors
+};
+```
+
+### 2. Use Your Custom Theme
+
+```tsx
+import { ThemeProvider } from '@librechat/client';
+import { customTheme } from './themes/custom';
+
+function App() {
+  return (
+    <ThemeProvider themeRGB={customTheme} themeName="custom">
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+## Environment Variable Themes
+
+Load theme colors from environment variables:
+
+### 1. Create Environment Variables
+
+```env
+# .env.local
+REACT_APP_THEME_BRAND_PURPLE=171 104 255
+REACT_APP_THEME_TEXT_PRIMARY=33 33 33
+REACT_APP_THEME_TEXT_SECONDARY=66 66 66
+REACT_APP_THEME_SURFACE_PRIMARY=255 255 255
+REACT_APP_THEME_SURFACE_SUBMIT=4 120 87
+```
+
+### 2. Create a Theme Loader
+
+```tsx
+function getThemeFromEnv(): IThemeRGB | undefined {
+  // Check if any theme environment variables are set
+  const hasThemeEnvVars = Object.keys(process.env).some(key => 
+    key.startsWith('REACT_APP_THEME_')
+  );
+
+  if (!hasThemeEnvVars) {
+    return undefined; // Use default themes
+  }
+
+  return {
+    'rgb-text-primary': process.env.REACT_APP_THEME_TEXT_PRIMARY || '33 33 33',
+    'rgb-brand-purple': process.env.REACT_APP_THEME_BRAND_PURPLE || '171 104 255',
+    // ... other colors
+  };
+}
+```
+
+### 3. Apply Environment Theme
+
+```tsx
+<ThemeProvider 
+  initialTheme="system"
+  themeRGB={getThemeFromEnv()}
+>
+  <App />
+</ThemeProvider>
+```
+
+## Dark/Light Mode
+
+The ThemeProvider handles dark/light mode automatically:
+
+### Using the Theme Hook
+
+```tsx
+import { useTheme } from '@librechat/client';
+
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  
+  return (
+    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+      Current theme: {theme}
+    </button>
+  );
+}
+```
+
+### Theme Options
+- `'light'` - Force light mode
+- `'dark'` - Force dark mode
+- `'system'` - Follow system preference
+
+## Migration Guide
+
+If you're migrating from an older theme system:
+
+### 1. Update Imports
+
+**Before:**
+```tsx
+import { ThemeContext, ThemeProvider } from '~/hooks/ThemeContext';
+```
+
+**After:**
+```tsx
+import { ThemeContext, ThemeProvider } from '@librechat/client';
+```
+
+### 2. Update ThemeProvider Usage
+
+The new ThemeProvider is backward compatible but adds new capabilities:
+
+```tsx
+<ThemeProvider 
+  initialTheme="system"  // Same as before
+  themeRGB={customTheme} // New: optional custom colors
+>
+  <App />
+</ThemeProvider>
+```
+
+### 3. Existing Components
+
+Components using ThemeContext continue to work without changes:
+
+```tsx
+// This still works!
+const { theme, setTheme } = useContext(ThemeContext);
+```
+
+## Implementation Details
+
+### File Structure
+```
+packages/client/src/theme/
+├── context/
+│   └── ThemeProvider.tsx    # Main theme provider
+├── types/
+│   └── index.ts            # TypeScript interfaces
+├── themes/
+│   ├── default.ts          # Light theme colors
+│   ├── dark.ts             # Dark theme colors
+│   └── index.ts            # Theme exports
+├── utils/
+│   ├── applyTheme.ts       # Apply CSS variables
+│   ├── tailwindConfig.ts   # Tailwind helpers
+│   └── createTailwindColors.js
+├── README.md               # This documentation
+└── index.ts               # Main exports
+```
+
+### CSS Variable Format
+
+The theme system uses RGB values in CSS variables:
+- CSS Variable: `--text-primary: rgb(33 33 33)`
+- Theme Definition: `'rgb-text-primary': '33 33 33'`
+- Tailwind Usage: `text-text-primary`
+
+### RGB Format Requirements
+
+All color values must be in space-separated RGB format:
+- ✅ Correct: `'255 255 255'`
+- ❌ Incorrect: `'#ffffff'` or `'rgb(255, 255, 255)'`
+
+This format allows Tailwind to apply opacity modifiers like `bg-surface-primary/50`.
+
+## Troubleshooting
+
+### Common Issues
+
+#### 1. Colors Not Applying
+- **Issue**: Custom theme colors aren't showing
+- **Solution**: Ensure you're passing the `themeRGB` prop to ThemeProvider
+- **Check**: CSS variables in DevTools should show `rgb(R G B)` format
+
+#### 2. Circular Reference Errors
+- **Issue**: `--brand-purple: var(--brand-purple)` creates infinite loop
+- **Solution**: Use direct color values: `--brand-purple: #ab68ff`
+
+#### 3. Dark Mode Not Working
+- **Issue**: Dark mode doesn't switch
+- **Solution**: Ensure `darkMode: ['class']` is in your Tailwind config
+- **Check**: The `<html>` element should have `class="dark"` in dark mode
+
+#### 4. TypeScript Errors
+- **Issue**: Type errors when defining themes
+- **Solution**: Import and use the `IThemeRGB` interface:
+```tsx
+import { IThemeRGB } from '@librechat/client';
+```
+
+### Debugging Tips
+
+1. **Check CSS Variables**: Use browser DevTools to inspect computed CSS variables
+2. **Verify Theme Application**: Look for inline styles on the root element
+3. **Console Errors**: Check for validation errors in the console
+4. **Test Isolation**: Try a minimal theme to isolate issues
+
+## Examples
+
+### Dynamic Theme Switching
+
+```tsx
+import { ThemeProvider, defaultTheme, darkTheme } from '@librechat/client';
+import { useState } from 'react';
+
+function App() {
+  const [isDark, setIsDark] = useState(false);
+  
+  return (
+    <ThemeProvider 
+      initialTheme={isDark ? 'dark' : 'light'}
+      themeRGB={isDark ? darkTheme : defaultTheme}
+      themeName={isDark ? 'dark' : 'default'}
+    >
+      <button onClick={() => setIsDark(!isDark)}>
+        Toggle Theme
+      </button>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+### Multi-Theme Selector
+
+```tsx
+const themes = {
+  default: undefined, // Use CSS defaults
+  ocean: {
+    'rgb-brand-purple': '0 119 190',
+    'rgb-surface-primary': '240 248 255',
+    // ... ocean theme colors
+  },
+  forest: {
+    'rgb-brand-purple': '34 139 34',
+    'rgb-surface-primary': '245 255 250',
+    // ... forest theme colors
+  },
+};
+
+function App() {
+  const [selectedTheme, setSelectedTheme] = useState('default');
+  
+  return (
+    <ThemeProvider 
+      themeRGB={themes[selectedTheme]}
+      themeName={selectedTheme}
+    >
+      <select onChange={(e) => setSelectedTheme(e.target.value)}>
+        {Object.keys(themes).map(name => (
+          <option key={name} value={name}>{name}</option>
+        ))}
+      </select>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+### Using with the Main Application
+
+When using the ThemeProvider in your main application with localStorage persistence:
+
+```tsx
+import { ThemeProvider } from '@librechat/client';
+import { getThemeFromEnv } from './utils';
+
+function App() {
+  const envTheme = getThemeFromEnv();
+  
+  return (
+    <ThemeProvider 
+      // Only pass props if you want to override stored values
+      // If you always pass props, they will override localStorage
+      initialTheme={envTheme ? "system" : undefined}
+      themeRGB={envTheme || undefined}
+    >
+      {/* Your app content */}
+    </ThemeProvider>
+  );
+}
+```
+
+**Important**: Props passed to ThemeProvider will override stored values on initial mount. Only pass props when you explicitly want to override the user's saved preferences.
+
+## Contributing
+
+When adding new theme colors:
+
+1. Add the type definition in `types/index.ts`
+2. Add the color to default and dark themes
+3. Update the applyTheme mapping
+4. Add to Tailwind configuration
+5. Document in this README
+
+## License
+
+This theme system is part of the @librechat/client package. 
--- a/packages/client/src/theme/atoms/themeAtoms.ts
+++ b/packages/client/src/theme/atoms/themeAtoms.ts
@ -0,0 +1,36 @@
+import { atomWithStorage } from 'jotai/utils';
+import { IThemeRGB } from '../types';
+
+/**
+ * Atom for storing the theme mode (light/dark/system) in localStorage
+ * Key: 'color-theme'
+ */
+export const themeModeAtom = atomWithStorage<string>('color-theme', 'system', undefined, {
+  getOnInit: true,
+});
+
+/**
+ * Atom for storing custom theme colors in localStorage
+ * Key: 'theme-colors'
+ */
+export const themeColorsAtom = atomWithStorage<IThemeRGB | undefined>(
+  'theme-colors',
+  undefined,
+  undefined,
+  {
+    getOnInit: true,
+  },
+);
+
+/**
+ * Atom for storing the theme name in localStorage
+ * Key: 'theme-name'
+ */
+export const themeNameAtom = atomWithStorage<string | undefined>(
+  'theme-name',
+  undefined,
+  undefined,
+  {
+    getOnInit: true,
+  },
+);
--- a/packages/client/src/theme/context/ThemeProvider.tsx
+++ b/packages/client/src/theme/context/ThemeProvider.tsx
@ -0,0 +1,165 @@
+import React, { createContext, useContext, useEffect, useMemo, useCallback, useRef } from 'react';
+import { useAtom } from 'jotai';
+import { IThemeRGB } from '../types';
+import applyTheme from '../utils/applyTheme';
+import { themeModeAtom, themeColorsAtom, themeNameAtom } from '../atoms/themeAtoms';
+
+type ThemeContextType = {
+  theme: string; // 'light' | 'dark' | 'system'
+  setTheme: (theme: string) => void;
+  themeRGB?: IThemeRGB;
+  setThemeRGB: (colors?: IThemeRGB) => void;
+  themeName?: string;
+  setThemeName: (name?: string) => void;
+  resetTheme: () => void;
+};
+
+// Export ThemeContext so it can be imported from hooks
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: 'system',
+  setTheme: () => undefined,
+  setThemeRGB: () => undefined,
+  setThemeName: () => undefined,
+  resetTheme: () => undefined,
+});
+
+export interface ThemeProviderProps {
+  children: React.ReactNode;
+  themeRGB?: IThemeRGB;
+  themeName?: string;
+  initialTheme?: string;
+}
+
+/**
+ * Check if theme is dark
+ */
+export const isDark = (theme: string): boolean => {
+  if (theme === 'system') {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+  return theme === 'dark';
+};
+
+/**
+ * ThemeProvider component that handles both dark/light mode switching
+ * and dynamic color themes via CSS variables with localStorage persistence
+ */
+export function ThemeProvider({
+  children,
+  themeRGB: propThemeRGB,
+  themeName: propThemeName,
+  initialTheme,
+}: ThemeProviderProps) {
+  // Use jotai atoms for persistent state
+  const [theme, setTheme] = useAtom(themeModeAtom);
+  const [storedThemeRGB, setStoredThemeRGB] = useAtom(themeColorsAtom);
+  const [storedThemeName, setStoredThemeName] = useAtom(themeNameAtom);
+
+  // Track if props have been initialized
+  const propsInitialized = useRef(false);
+
+  // Initialize from props only once on mount
+  useEffect(() => {
+    if (!propsInitialized.current) {
+      propsInitialized.current = true;
+
+      // Set initial theme if provided
+      if (initialTheme) {
+        setTheme(initialTheme);
+      }
+
+      // Set initial theme colors if provided
+      if (propThemeRGB) {
+        setStoredThemeRGB(propThemeRGB);
+      }
+
+      // Set initial theme name if provided
+      if (propThemeName) {
+        setStoredThemeName(propThemeName);
+      }
+    }
+  }, [initialTheme, propThemeRGB, propThemeName, setTheme, setStoredThemeRGB, setStoredThemeName]);
+
+  // Apply class-based dark mode
+  const applyThemeMode = useCallback((rawTheme: string) => {
+    const root = window.document.documentElement;
+    const darkMode = isDark(rawTheme);
+
+    root.classList.remove(darkMode ? 'light' : 'dark');
+    root.classList.add(darkMode ? 'dark' : 'light');
+  }, []);
+
+  // Handle system theme changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const changeThemeOnSystemChange = () => {
+      if (theme === 'system') {
+        applyThemeMode('system');
+      }
+    };
+
+    mediaQuery.addEventListener('change', changeThemeOnSystemChange);
+    return () => {
+      mediaQuery.removeEventListener('change', changeThemeOnSystemChange);
+    };
+  }, [theme, applyThemeMode]);
+
+  // Apply dark/light mode class
+  useEffect(() => {
+    applyThemeMode(theme);
+  }, [theme, applyThemeMode]);
+
+  // Apply dynamic color theme
+  useEffect(() => {
+    if (storedThemeRGB) {
+      applyTheme(storedThemeRGB);
+    }
+  }, [storedThemeRGB]);
+
+  // Reset theme function
+  const resetTheme = useCallback(() => {
+    setTheme('system');
+    setStoredThemeRGB(undefined);
+    setStoredThemeName(undefined);
+    // Remove any custom CSS variables
+    const root = document.documentElement;
+    const customProps = Array.from(root.style).filter((prop) => prop.startsWith('--'));
+    customProps.forEach((prop) => root.style.removeProperty(prop));
+  }, [setTheme, setStoredThemeRGB, setStoredThemeName]);
+
+  const value = useMemo(
+    () => ({
+      theme,
+      setTheme,
+      themeRGB: storedThemeRGB,
+      setThemeRGB: setStoredThemeRGB,
+      themeName: storedThemeName,
+      setThemeName: setStoredThemeName,
+      resetTheme,
+    }),
+    [
+      theme,
+      setTheme,
+      storedThemeRGB,
+      setStoredThemeRGB,
+      storedThemeName,
+      setStoredThemeName,
+      resetTheme,
+    ],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+/**
+ * Hook to access the current theme context
+ */
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+export default ThemeProvider;
--- a/packages/client/src/theme/index.ts
+++ b/packages/client/src/theme/index.ts
@ -0,0 +1,14 @@
+// Export types
+export * from './types';
+
+// Export ThemeProvider, ThemeContext, useTheme hook, and isDark
+export { ThemeProvider, ThemeContext, useTheme, isDark } from './context/ThemeProvider';
+
+// Export utility functions
+export { default as applyTheme } from './utils/applyTheme';
+
+// Export theme atoms for persistence
+export { themeModeAtom, themeColorsAtom, themeNameAtom } from './atoms/themeAtoms';
+
+// Export predefined themes
+export * from './themes';
--- a/packages/client/src/theme/themes/dark.ts
+++ b/packages/client/src/theme/themes/dark.ts
@ -0,0 +1,72 @@
+import { IThemeRGB } from '../types';
+
+/**
+ * Dark theme
+ * RGB values extracted from the existing dark mode CSS variables
+ */
+export const darkTheme: IThemeRGB = {
+  // Text colors
+  'rgb-text-primary': '236 236 236', // #ececec (gray-100)
+  'rgb-text-secondary': '205 205 205', // #cdcdcd (gray-300)
+  'rgb-text-secondary-alt': '153 150 150', // #999696 (gray-400)
+  'rgb-text-tertiary': '89 89 89', // #595959 (gray-500)
+  'rgb-text-warning': '245 158 11', // #f59e0b (amber-500)
+
+  // Ring colors (not defined in dark mode, using default)
+  'rgb-ring-primary': '89 89 89', // #595959 (gray-500)
+
+  // Header colors
+  'rgb-header-primary': '47 47 47', // #2f2f2f (gray-700)
+  'rgb-header-hover': '66 66 66', // #424242 (gray-600)
+  'rgb-header-button-hover': '47 47 47', // #2f2f2f (gray-700)
+
+  // Surface colors
+  'rgb-surface-active': '89 89 89', // #595959 (gray-500)
+  'rgb-surface-active-alt': '47 47 47', // #2f2f2f (gray-700)
+  'rgb-surface-hover': '66 66 66', // #424242 (gray-600)
+  'rgb-surface-hover-alt': '66 66 66', // #424242 (gray-600)
+  'rgb-surface-primary': '13 13 13', // #0d0d0d (gray-900)
+  'rgb-surface-primary-alt': '23 23 23', // #171717 (gray-850)
+  'rgb-surface-primary-contrast': '23 23 23', // #171717 (gray-850)
+  'rgb-surface-secondary': '33 33 33', // #212121 (gray-800)
+  'rgb-surface-secondary-alt': '33 33 33', // #212121 (gray-800)
+  'rgb-surface-tertiary': '47 47 47', // #2f2f2f (gray-700)
+  'rgb-surface-tertiary-alt': '47 47 47', // #2f2f2f (gray-700)
+  'rgb-surface-dialog': '23 23 23', // #171717 (gray-850)
+  'rgb-surface-submit': '4 120 87', // #047857 (green-700)
+  'rgb-surface-submit-hover': '6 95 70', // #065f46 (green-800)
+  'rgb-surface-destructive': '153 27 27', // #991b1b (red-800)
+  'rgb-surface-destructive-hover': '127 29 29', // #7f1d1d (red-900)
+  'rgb-surface-chat': '47 47 47', // #2f2f2f (gray-700)
+
+  // Border colors
+  'rgb-border-light': '47 47 47', // #2f2f2f (gray-700)
+  'rgb-border-medium': '66 66 66', // #424242 (gray-600)
+  'rgb-border-medium-alt': '66 66 66', // #424242 (gray-600)
+  'rgb-border-heavy': '89 89 89', // #595959 (gray-500)
+  'rgb-border-xheavy': '153 150 150', // #999696 (gray-400)
+
+  // Brand colors
+  'rgb-brand-purple': '171 104 255', // #ab68ff
+
+  // Presentation
+  'rgb-presentation': '33 33 33', // #212121 (gray-800)
+
+  // Utility colors (mapped to existing colors for backwards compatibility)
+  'rgb-background': '33 33 33', // Same as surface-primary
+  'rgb-foreground': '255 255 255', // Same as text-primary
+  'rgb-primary': '66 66 66', // Same as surface-active
+  'rgb-primary-foreground': '255 255 255', // Same as surface-primary-contrast
+  'rgb-secondary': '42 42 42', // Same as surface-secondary
+  'rgb-secondary-foreground': '193 193 193', // Same as text-secondary
+  'rgb-muted': '56 56 56', // Same as surface-tertiary
+  'rgb-muted-foreground': '140 140 140', // Same as text-tertiary
+  'rgb-accent': '82 82 82', // Same as surface-active-alt
+  'rgb-accent-foreground': '255 255 255', // Same as text-primary
+  'rgb-destructive-foreground': '255 255 255', // Same as text-primary
+  'rgb-border': '82 82 82', // Same as border-medium
+  'rgb-input': '66 66 66', // Same as border-light
+  'rgb-ring': '255 255 255', // Same as ring-primary
+  'rgb-card': '42 42 42', // Same as surface-secondary
+  'rgb-card-foreground': '255 255 255', // Same as text-primary
+};
--- a/packages/client/src/theme/themes/default.ts
+++ b/packages/client/src/theme/themes/default.ts
@ -0,0 +1,72 @@
+import { IThemeRGB } from '../types';
+
+/**
+ * Default light theme
+ * RGB values extracted from the existing CSS variables
+ */
+export const defaultTheme: IThemeRGB = {
+  // Text colors
+  'rgb-text-primary': '33 33 33', // #212121 (gray-800)
+  'rgb-text-secondary': '66 66 66', // #424242 (gray-600)
+  'rgb-text-secondary-alt': '89 89 89', // #595959 (gray-500)
+  'rgb-text-tertiary': '89 89 89', // #595959 (gray-500)
+  'rgb-text-warning': '245 158 11', // #f59e0b (amber-500)
+
+  // Ring colors
+  'rgb-ring-primary': '89 89 89', // #595959 (gray-500)
+
+  // Header colors
+  'rgb-header-primary': '255 255 255', // #fff (white)
+  'rgb-header-hover': '247 247 248', // #f7f7f8 (gray-50)
+  'rgb-header-button-hover': '247 247 248', // #f7f7f8 (gray-50)
+
+  // Surface colors
+  'rgb-surface-active': '236 236 236', // #ececec (gray-100)
+  'rgb-surface-active-alt': '227 227 227', // #e3e3e3 (gray-200)
+  'rgb-surface-hover': '227 227 227', // #e3e3e3 (gray-200)
+  'rgb-surface-hover-alt': '205 205 205', // #cdcdcd (gray-300)
+  'rgb-surface-primary': '255 255 255', // #fff (white)
+  'rgb-surface-primary-alt': '247 247 248', // #f7f7f8 (gray-50)
+  'rgb-surface-primary-contrast': '236 236 236', // #ececec (gray-100)
+  'rgb-surface-secondary': '247 247 248', // #f7f7f8 (gray-50)
+  'rgb-surface-secondary-alt': '227 227 227', // #e3e3e3 (gray-200)
+  'rgb-surface-tertiary': '236 236 236', // #ececec (gray-100)
+  'rgb-surface-tertiary-alt': '255 255 255', // #fff (white)
+  'rgb-surface-dialog': '255 255 255', // #fff (white)
+  'rgb-surface-submit': '4 120 87', // #047857 (green-700)
+  'rgb-surface-submit-hover': '6 95 70', // #065f46 (green-800)
+  'rgb-surface-destructive': '185 28 28', // #b91c1c (red-700)
+  'rgb-surface-destructive-hover': '153 27 27', // #991b1b (red-800)
+  'rgb-surface-chat': '255 255 255', // #fff (white)
+
+  // Border colors
+  'rgb-border-light': '227 227 227', // #e3e3e3 (gray-200)
+  'rgb-border-medium': '205 205 205', // #cdcdcd (gray-300)
+  'rgb-border-medium-alt': '205 205 205', // #cdcdcd (gray-300)
+  'rgb-border-heavy': '153 150 150', // #999696 (gray-400)
+  'rgb-border-xheavy': '89 89 89', // #595959 (gray-500)
+
+  // Brand colors
+  'rgb-brand-purple': '171 104 255', // #ab68ff
+
+  // Presentation
+  'rgb-presentation': '255 255 255', // #fff (white)
+
+  // Utility colors (mapped to existing colors for backwards compatibility)
+  'rgb-background': '255 255 255', // Same as surface-primary
+  'rgb-foreground': '17 17 17', // Same as text-primary
+  'rgb-primary': '235 235 235', // Same as surface-active
+  'rgb-primary-foreground': '0 0 0', // Same as surface-primary-contrast
+  'rgb-secondary': '247 247 248', // Same as surface-secondary
+  'rgb-secondary-foreground': '66 66 66', // Same as text-secondary
+  'rgb-muted': '250 250 250', // Same as surface-tertiary
+  'rgb-muted-foreground': '120 120 120', // Same as text-tertiary
+  'rgb-accent': '245 245 245', // Same as surface-active-alt
+  'rgb-accent-foreground': '17 17 17', // Same as text-primary
+  'rgb-destructive-foreground': '17 17 17', // Same as text-primary
+  'rgb-border': '215 215 215', // Same as border-medium
+  'rgb-input': '230 230 230', // Same as border-light
+  'rgb-ring': '180 180 180', // Same as ring-primary
+  'rgb-card': '247 247 248', // Same as surface-secondary
+  'rgb-card-foreground': '17 17 17', // Same as text-primary
+};
--- a/packages/client/src/theme/themes/index.ts
+++ b/packages/client/src/theme/themes/index.ts
@ -0,0 +1,2 @@
+export { defaultTheme } from './default';
+export { darkTheme } from './dark';
--- a/packages/client/src/theme/types/index.ts
+++ b/packages/client/src/theme/types/index.ts
@ -0,0 +1,189 @@
+/**
+ * Defines the color channels. Passed to the context from each app.
+ * RGB values should be in format "255 255 255" (space-separated)
+ */
+export interface IThemeRGB {
+  // Text colors
+  'rgb-text-primary'?: string;
+  'rgb-text-secondary'?: string;
+  'rgb-text-secondary-alt'?: string;
+  'rgb-text-tertiary'?: string;
+  'rgb-text-warning'?: string;
+
+  // Ring colors
+  'rgb-ring-primary'?: string;
+
+  // Header colors
+  'rgb-header-primary'?: string;
+  'rgb-header-hover'?: string;
+  'rgb-header-button-hover'?: string;
+
+  // Surface colors
+  'rgb-surface-active'?: string;
+  'rgb-surface-active-alt'?: string;
+  'rgb-surface-hover'?: string;
+  'rgb-surface-hover-alt'?: string;
+  'rgb-surface-primary'?: string;
+  'rgb-surface-primary-alt'?: string;
+  'rgb-surface-primary-contrast'?: string;
+  'rgb-surface-secondary'?: string;
+  'rgb-surface-secondary-alt'?: string;
+  'rgb-surface-tertiary'?: string;
+  'rgb-surface-tertiary-alt'?: string;
+  'rgb-surface-dialog'?: string;
+  'rgb-surface-submit'?: string;
+  'rgb-surface-submit-hover'?: string;
+  'rgb-surface-destructive'?: string;
+  'rgb-surface-destructive-hover'?: string;
+  'rgb-surface-chat'?: string;
+
+  // Border colors
+  'rgb-border-light'?: string;
+  'rgb-border-medium'?: string;
+  'rgb-border-medium-alt'?: string;
+  'rgb-border-heavy'?: string;
+  'rgb-border-xheavy'?: string;
+
+  // Brand colors
+  'rgb-brand-purple'?: string;
+
+  // Presentation
+  'rgb-presentation'?: string;
+
+  // Utility colors
+  'rgb-background'?: string;
+  'rgb-foreground'?: string;
+  'rgb-primary'?: string;
+  'rgb-primary-foreground'?: string;
+  'rgb-secondary'?: string;
+  'rgb-secondary-foreground'?: string;
+  'rgb-muted'?: string;
+  'rgb-muted-foreground'?: string;
+  'rgb-accent'?: string;
+  'rgb-accent-foreground'?: string;
+  'rgb-destructive-foreground'?: string;
+  'rgb-border'?: string;
+  'rgb-input'?: string;
+  'rgb-ring'?: string;
+  'rgb-card'?: string;
+  'rgb-card-foreground'?: string;
+}
+
+/**
+ * Name of the CSS variables used in tailwind.config
+ */
+export interface IThemeVariables {
+  '--text-primary': string;
+  '--text-secondary': string;
+  '--text-secondary-alt': string;
+  '--text-tertiary': string;
+  '--text-warning': string;
+  '--ring-primary': string;
+  '--header-primary': string;
+  '--header-hover': string;
+  '--header-button-hover': string;
+  '--surface-active': string;
+  '--surface-active-alt': string;
+  '--surface-hover': string;
+  '--surface-hover-alt': string;
+  '--surface-primary': string;
+  '--surface-primary-alt': string;
+  '--surface-primary-contrast': string;
+  '--surface-secondary': string;
+  '--surface-secondary-alt': string;
+  '--surface-tertiary': string;
+  '--surface-tertiary-alt': string;
+  '--surface-dialog': string;
+  '--surface-submit': string;
+  '--surface-submit-hover': string;
+  '--surface-destructive': string;
+  '--surface-destructive-hover': string;
+  '--surface-chat': string;
+  '--border-light': string;
+  '--border-medium': string;
+  '--border-medium-alt': string;
+  '--border-heavy': string;
+  '--border-xheavy': string;
+  '--brand-purple': string;
+  '--presentation': string;
+
+  // Utility variables
+  '--background': string;
+  '--foreground': string;
+  '--primary': string;
+  '--primary-foreground': string;
+  '--secondary': string;
+  '--secondary-foreground': string;
+  '--muted': string;
+  '--muted-foreground': string;
+  '--accent': string;
+  '--accent-foreground': string;
+  '--destructive-foreground': string;
+  '--border': string;
+  '--input': string;
+  '--ring': string;
+  '--card': string;
+  '--card-foreground': string;
+}
+
+/**
+ * Name of the defined colors in the Tailwind theme
+ */
+export interface IThemeColors {
+  'text-primary'?: string;
+  'text-secondary'?: string;
+  'text-secondary-alt'?: string;
+  'text-tertiary'?: string;
+  'text-warning'?: string;
+  'ring-primary'?: string;
+  'header-primary'?: string;
+  'header-hover'?: string;
+  'header-button-hover'?: string;
+  'surface-active'?: string;
+  'surface-active-alt'?: string;
+  'surface-hover'?: string;
+  'surface-hover-alt'?: string;
+  'surface-primary'?: string;
+  'surface-primary-alt'?: string;
+  'surface-primary-contrast'?: string;
+  'surface-secondary'?: string;
+  'surface-secondary-alt'?: string;
+  'surface-tertiary'?: string;
+  'surface-tertiary-alt'?: string;
+  'surface-dialog'?: string;
+  'surface-submit'?: string;
+  'surface-submit-hover'?: string;
+  'surface-destructive'?: string;
+  'surface-destructive-hover'?: string;
+  'surface-chat'?: string;
+  'border-light'?: string;
+  'border-medium'?: string;
+  'border-medium-alt'?: string;
+  'border-heavy'?: string;
+  'border-xheavy'?: string;
+  'brand-purple'?: string;
+  presentation?: string;
+
+  // Utility colors
+  background?: string;
+  foreground?: string;
+  primary?: string;
+  'primary-foreground'?: string;
+  secondary?: string;
+  'secondary-foreground'?: string;
+  muted?: string;
+  'muted-foreground'?: string;
+  accent?: string;
+  'accent-foreground'?: string;
+  'destructive-foreground'?: string;
+  border?: string;
+  input?: string;
+  ring?: string;
+  card?: string;
+  'card-foreground'?: string;
+}
+
+export interface Theme {
+  name: string;
+  colors: IThemeRGB;
+}
--- a/packages/client/src/theme/utils/applyTheme.ts
+++ b/packages/client/src/theme/utils/applyTheme.ts
@ -0,0 +1,115 @@
+import { IThemeRGB, IThemeVariables } from '../types';
+
+/**
+ * Validates RGB string format (e.g., "255 255 255")
+ */
+function validateRGB(rgb: string): boolean {
+  if (!rgb) return true;
+  const rgbRegex = /^(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})$/;
+  const match = rgb.match(rgbRegex);
+
+  if (!match) return false;
+
+  // Check that each value is between 0-255
+  const [, r, g, b] = match;
+  return [r, g, b].every((val) => {
+    const num = parseInt(val, 10);
+    return num >= 0 && num <= 255;
+  });
+}
+
+/**
+ * Maps theme RGB values to CSS variables
+ */
+function mapTheme(rgb: IThemeRGB): Partial<IThemeVariables> {
+  const variables: Partial<IThemeVariables> = {};
+
+  // Map each RGB value to its corresponding CSS variable
+  const mappings: Record<keyof IThemeRGB, keyof IThemeVariables> = {
+    'rgb-text-primary': '--text-primary',
+    'rgb-text-secondary': '--text-secondary',
+    'rgb-text-secondary-alt': '--text-secondary-alt',
+    'rgb-text-tertiary': '--text-tertiary',
+    'rgb-text-warning': '--text-warning',
+    'rgb-ring-primary': '--ring-primary',
+    'rgb-header-primary': '--header-primary',
+    'rgb-header-hover': '--header-hover',
+    'rgb-header-button-hover': '--header-button-hover',
+    'rgb-surface-active': '--surface-active',
+    'rgb-surface-active-alt': '--surface-active-alt',
+    'rgb-surface-hover': '--surface-hover',
+    'rgb-surface-hover-alt': '--surface-hover-alt',
+    'rgb-surface-primary': '--surface-primary',
+    'rgb-surface-primary-alt': '--surface-primary-alt',
+    'rgb-surface-primary-contrast': '--surface-primary-contrast',
+    'rgb-surface-secondary': '--surface-secondary',
+    'rgb-surface-secondary-alt': '--surface-secondary-alt',
+    'rgb-surface-tertiary': '--surface-tertiary',
+    'rgb-surface-tertiary-alt': '--surface-tertiary-alt',
+    'rgb-surface-dialog': '--surface-dialog',
+    'rgb-surface-submit': '--surface-submit',
+    'rgb-surface-submit-hover': '--surface-submit-hover',
+    'rgb-surface-destructive': '--surface-destructive',
+    'rgb-surface-destructive-hover': '--surface-destructive-hover',
+    'rgb-surface-chat': '--surface-chat',
+    'rgb-border-light': '--border-light',
+    'rgb-border-medium': '--border-medium',
+    'rgb-border-medium-alt': '--border-medium-alt',
+    'rgb-border-heavy': '--border-heavy',
+    'rgb-border-xheavy': '--border-xheavy',
+    'rgb-brand-purple': '--brand-purple',
+    'rgb-presentation': '--presentation',
+
+    // Utility colors
+    'rgb-background': '--background',
+    'rgb-foreground': '--foreground',
+    'rgb-primary': '--primary',
+    'rgb-primary-foreground': '--primary-foreground',
+    'rgb-secondary': '--secondary',
+    'rgb-secondary-foreground': '--secondary-foreground',
+    'rgb-muted': '--muted',
+    'rgb-muted-foreground': '--muted-foreground',
+    'rgb-accent': '--accent',
+    'rgb-accent-foreground': '--accent-foreground',
+    'rgb-destructive-foreground': '--destructive-foreground',
+    'rgb-border': '--border',
+    'rgb-input': '--input',
+    'rgb-ring': '--ring',
+    'rgb-card': '--card',
+    'rgb-card-foreground': '--card-foreground',
+  };
+
+  Object.entries(mappings).forEach(([rgbKey, cssVar]) => {
+    const value = rgb[rgbKey as keyof IThemeRGB];
+    if (value) {
+      variables[cssVar] = value;
+    }
+  });
+
+  return variables;
+}
+
+/**
+ * Applies theme to the document root
+ * Sets CSS variables as rgb() values for compatibility with existing CSS
+ */
+export default function applyTheme(themeRGB?: IThemeRGB) {
+  if (!themeRGB) return;
+
+  const themeObject = mapTheme(themeRGB);
+  const root = document.documentElement;
+
+  Object.entries(themeObject).forEach(([cssVar, value]) => {
+    if (!value) return;
+
+    const validation = validateRGB(value);
+    if (!validation) {
+      console.error(`Invalid RGB value for ${cssVar}: ${value}`);
+      return;
+    }
+
+    // Set the CSS variable as rgb() value for compatibility
+    // This ensures existing CSS that expects color values (not space-separated RGB) continues to work
+    root.style.setProperty(cssVar, `rgb(${value})`);
+  });
+}
--- a/packages/client/src/theme/utils/createTailwindColors.js
+++ b/packages/client/src/theme/utils/createTailwindColors.js
@ -0,0 +1,86 @@
+/**
+ * Helper function to create a color value that uses CSS variables with alpha support
+ * This is a CommonJS version for use in tailwind.config.js
+ */
+function withOpacity(variableName) {
+  return ({ opacityValue }) => {
+    if (opacityValue !== undefined) {
+      // The CSS variable already contains rgb() so we need to extract the values
+      return `rgba(var(${variableName}), ${opacityValue})`.replace('rgb(', '').replace(')', '');
+    }
+    return `var(${variableName})`;
+  };
+}
+
+/**
+ * Creates Tailwind color configuration that uses CSS variables
+ * This allows dynamic theme switching by changing CSS variable values
+ */
+function createTailwindColors() {
+  return {
+    'text-primary': withOpacity('--text-primary'),
+    'text-secondary': withOpacity('--text-secondary'),
+    'text-secondary-alt': withOpacity('--text-secondary-alt'),
+    'text-tertiary': withOpacity('--text-tertiary'),
+    'text-warning': withOpacity('--text-warning'),
+    'ring-primary': withOpacity('--ring-primary'),
+    'header-primary': withOpacity('--header-primary'),
+    'header-hover': withOpacity('--header-hover'),
+    'header-button-hover': withOpacity('--header-button-hover'),
+    'surface-active': withOpacity('--surface-active'),
+    'surface-active-alt': withOpacity('--surface-active-alt'),
+    'surface-hover': withOpacity('--surface-hover'),
+    'surface-hover-alt': withOpacity('--surface-hover-alt'),
+    'surface-primary': withOpacity('--surface-primary'),
+    'surface-primary-alt': withOpacity('--surface-primary-alt'),
+    'surface-primary-contrast': withOpacity('--surface-primary-contrast'),
+    'surface-secondary': withOpacity('--surface-secondary'),
+    'surface-secondary-alt': withOpacity('--surface-secondary-alt'),
+    'surface-tertiary': withOpacity('--surface-tertiary'),
+    'surface-tertiary-alt': withOpacity('--surface-tertiary-alt'),
+    'surface-dialog': withOpacity('--surface-dialog'),
+    'surface-submit': withOpacity('--surface-submit'),
+    'surface-submit-hover': withOpacity('--surface-submit-hover'),
+    'surface-destructive': withOpacity('--surface-destructive'),
+    'surface-destructive-hover': withOpacity('--surface-destructive-hover'),
+    'surface-chat': withOpacity('--surface-chat'),
+    'border-light': withOpacity('--border-light'),
+    'border-medium': withOpacity('--border-medium'),
+    'border-medium-alt': withOpacity('--border-medium-alt'),
+    'border-heavy': withOpacity('--border-heavy'),
+    'border-xheavy': withOpacity('--border-xheavy'),
+    'brand-purple': withOpacity('--brand-purple'),
+    presentation: withOpacity('--presentation'),
+    background: withOpacity('--background'),
+    foreground: withOpacity('--foreground'),
+    primary: {
+      DEFAULT: withOpacity('--primary'),
+      foreground: withOpacity('--primary-foreground'),
+    },
+    secondary: {
+      DEFAULT: withOpacity('--secondary'),
+      foreground: withOpacity('--secondary-foreground'),
+    },
+    muted: {
+      DEFAULT: withOpacity('--muted'),
+      foreground: withOpacity('--muted-foreground'),
+    },
+    accent: {
+      DEFAULT: withOpacity('--accent'),
+      foreground: withOpacity('--accent-foreground'),
+    },
+    destructive: {
+      DEFAULT: withOpacity('--surface-destructive'),
+      foreground: withOpacity('--destructive-foreground'),
+    },
+    border: withOpacity('--border'),
+    input: withOpacity('--input'),
+    ring: withOpacity('--ring'),
+    card: {
+      DEFAULT: withOpacity('--card'),
+      foreground: withOpacity('--card-foreground'),
+    },
+  };
+}
+
+module.exports = { createTailwindColors };