@gv-tech/design-system 2.2.0 → 2.4.0

package/src/components/docs/Sidebar.tsx

@@ -25,6 +25,7 @@ export interface NavItem {
 interface SidebarProps {
   activeItem: string;
   onItemSelect: (id: string) => void;
+  className?: string;
 }
 
 const categoryConfig: Record<ComponentCategory, { label: string; icon: React.ReactNode }> = {
@@ -106,7 +107,7 @@ export const navItems: NavItem[] = [
   { id: 'theme-toggle', label: 'Theme Toggle', category: 'advanced' },
 ];
 
-export function Sidebar({ activeItem, onItemSelect }: SidebarProps) {
+export function Sidebar({ activeItem, onItemSelect, className }: SidebarProps) {
   const categories = Object.keys(categoryConfig) as ComponentCategory[];
   const [expandedCategories, setExpandedCategories] = React.useState<string[]>(['getting-started', 'forms']);
 
@@ -119,7 +120,7 @@ export function Sidebar({ activeItem, onItemSelect }: SidebarProps) {
   }, [activeItem, expandedCategories]);
 
   return (
-    <div className="w-64 border-r bg-muted/50 flex flex-col h-full">
+    <div className={cn('w-64 border-r bg-muted/50 flex flex-col h-full', className)}>
       <div className="p-4 border-b">
         <h2 className="font-semibold text-lg">GV Design System</h2>
         <p className="text-xs text-muted-foreground">v{version}</p>

package/src/components/ui/command.tsx

@@ -5,7 +5,7 @@ import { Command as CommandPrimitive } from 'cmdk';
 import { Search } from 'lucide-react';
 import * as React from 'react';
 
-import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog';
 import { cn } from '@/lib/utils';
 
 const Command = React.forwardRef<
@@ -27,6 +27,8 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
+        <DialogTitle className="sr-only">Search</DialogTitle>
+        <DialogDescription className="sr-only">Search for documentation and components.</DialogDescription>
         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>

package/src/components/ui/search.test.tsx

@@ -9,6 +9,8 @@ vi.mock('@/components/ui/dialog', () => ({
   DialogContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   DialogPortal: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   DialogOverlay: () => null,
+  DialogTitle: ({ children }: { children: React.ReactNode }) => <h2>{children}</h2>,
+  DialogDescription: ({ children }: { children: React.ReactNode }) => <p>{children}</p>,
 }));
 
 describe('Search', () => {

package/src/components/ui/search.tsx

@@ -70,8 +70,8 @@ export const SearchTrigger = React.forwardRef<HTMLButtonElement, SearchTriggerPr
         className={cn(
           'relative h-9 text-sm text-muted-foreground transition-all transition-colors',
           variant === 'default'
-            ? 'w-full justify-start sm:pr-12 md:w-40 lg:w-64'
-            : 'w-9 justify-center px-0 sm:w-24 sm:justify-start sm:px-3 sm:pr-12',
+            ? 'w-full justify-start pr-12'
+            : 'w-9 justify-center px-0 md:w-40 md:justify-start md:px-3 md:pr-12 lg:w-64',
           className,
         )}
         ref={ref}
@@ -79,7 +79,7 @@ export const SearchTrigger = React.forwardRef<HTMLButtonElement, SearchTriggerPr
       >
         <span className="inline-flex items-center gap-2">
           <SearchIcon className="h-4 w-4 shrink-0" />
-          {variant === 'default' && <span className="truncate">{placeholder}</span>}
+          <span className={cn('truncate', variant === 'compact' && 'hidden md:inline')}>{placeholder}</span>
         </span>
         <kbd className="pointer-events-none absolute right-1.5 top-1.5 hidden h-6 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
           <span className="text-xs">⌘</span>K

package/src/components/ui/theme-provider.test.tsx

@@ -0,0 +1,47 @@
+import { ThemeProvider } from '@/components/ui/theme-provider';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+describe('ThemeProvider', () => {
+  it('renders children correctly', () => {
+    render(
+      <ThemeProvider>
+        <div data-testid="child">Hello</div>
+      </ThemeProvider>,
+    );
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+    expect(screen.getByTestId('child')).toHaveTextContent('Hello');
+  });
+
+  it('applies class attribute to html element by default', () => {
+    render(
+      <ThemeProvider>
+        <div>Content</div>
+      </ThemeProvider>,
+    );
+    // next-themes applies the attribute to the html element;
+    // in jsdom the attribute should be set to 'class' by default
+    const html = document.documentElement;
+    // The attribute prop controls how the theme class is toggled.
+    // We verify the provider renders without error, which confirms the defaults are valid.
+    expect(html).toBeDefined();
+  });
+
+  it('allows overriding default props', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" enableSystem={false}>
+        <div data-testid="child">Dark Mode</div>
+      </ThemeProvider>,
+    );
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+
+  it('passes additional next-themes props through', () => {
+    render(
+      <ThemeProvider storageKey="my-app-theme" themes={['light', 'dark', 'ocean']}>
+        <div data-testid="child">Custom themes</div>
+      </ThemeProvider>,
+    );
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+});

package/src/components/ui/theme-provider.tsx

@@ -0,0 +1,12 @@
+import type { ThemeProviderProps as NextThemesProviderProps } from 'next-themes';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+
+export type ThemeProviderProps = NextThemesProviderProps;
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return (
+    <NextThemesProvider attribute="class" defaultTheme="system" enableSystem {...props}>
+      {children}
+    </NextThemesProvider>
+  );
+}

package/src/globals.css

@@ -33,6 +33,7 @@
 }
 
 @layer base {
+  /* @tokens-start */
   :root {
     --background: 0 0% 96%;
     --foreground: 222 47% 11%;
@@ -59,6 +60,25 @@
     --brand-blue: 225 73% 57%;
     --brand-green: 151 66% 27%;
     --brand-floral-white: 40 100% 97%;
+    --neutral-white: 0 0% 100%;
+    --neutral-black: 0 0% 0%;
+    --neutral-gray50: 0 0% 96%;
+    --neutral-gray100: 0 0% 92%;
+    --neutral-gray200: 0 0% 89%;
+    --neutral-gray300: 0 0% 88%;
+    --neutral-gray400: 0 0% 70%;
+    --neutral-gray500: 215 16% 47%;
+    --neutral-gray600: 222 47% 11%;
+    --neutral-gray700: 0 0% 18%;
+    --neutral-gray800: 0 0% 15%;
+    --neutral-gray900: 0 0% 14%;
+    --neutral-gray950: 0 0% 11%;
+    --neutral-gray975: 0 0% 9%;
+    --neutral-gray990: 0 0% 6%;
+    --semantic-success: 93 28% 54%;
+    --semantic-success-dark: 96 44% 61%;
+    --semantic-destructive: 0 84.2% 60.2%;
+    --semantic-destructive-dark: 0 62.8% 30.6%;
   }
 
   .dark {
@@ -81,7 +101,9 @@
     --border: 0 0% 18%;
     --input: 0 0% 18%;
     --ring: 0 0% 90%;
+    --radius: 0.5rem;
   }
+  /* @tokens-end */
 }
 
 @layer base {

package/src/index.ts

@@ -45,6 +45,7 @@ export * from './components/ui/switch';
 export * from './components/ui/table';
 export * from './components/ui/tabs';
 export * from './components/ui/textarea';
+export * from './components/ui/theme-provider';
 export * from './components/ui/theme-toggle';
 export * from './components/ui/toast';
 export { Toaster as ToasterToast } from './components/ui/toaster';

package/src/pages/ColorTokensDocs.tsx

@@ -7,8 +7,8 @@ export function ColorTokensDocs() {
   return (
     <div className="space-y-12">
       <div className="space-y-4">
-        <h1 className="text-4xl font-extrabold tracking-tight">Color Tokens</h1>
-        <p className="text-xl text-muted-foreground max-w-2xl">
+        <h1 className="text-3xl md:text-4xl font-extrabold tracking-tight">Color Tokens</h1>
+        <p className="text-lg md:text-xl text-muted-foreground max-w-2xl">
           The Garcia Ventures design system is built on a robust token architecture that ensures consistency,
           accessibility, and easy maintenance across all digital products.
         </p>
@@ -167,8 +167,8 @@ const MyComponent = () => {
 
       <section className="space-y-6">
         <h2 className="text-3xl font-bold tracking-tight">Semantic Tokens Reference</h2>
-        <div className="rounded-xl border shadow-sm overflow-hidden">
-          <Table>
+        <div className="rounded-xl border shadow-sm overflow-x-auto">
+          <Table className="min-w-[600px] md:min-w-full">
             <TableHeader>
               <TableRow className="bg-muted/50 hover:bg-muted/50">
                 <TableHead className="w-[200px]">Token</TableHead>

package/src/pages/GettingStarted.tsx

@@ -6,8 +6,10 @@ export function GettingStartedPage() {
   return (
     <div className="space-y-8">
       <div className="space-y-2">
-        <h1 className="text-4xl font-bold tracking-tight">GV Tech Design System</h1>
-        <p className="text-xl text-muted-foreground">
+        <h1 className="text-3xl md:text-4xl font-bold tracking-tight text-center md:text-left">
+          GV Tech Design System
+        </h1>
+        <p className="text-lg md:text-xl text-muted-foreground text-center md:text-left">
           A comprehensive React component library built with shadcn/ui and Tailwind CSS.
         </p>
       </div>
@@ -100,8 +102,8 @@ export function InstallationPage() {
   return (
     <div className="space-y-8">
       <div className="space-y-2">
-        <h1 className="text-3xl font-bold tracking-tight">Installation</h1>
-        <p className="text-lg text-muted-foreground">
+        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">Installation</h1>
+        <p className="text-base md:text-lg text-muted-foreground">
           Get started with the GV Tech Design System in your React project.
         </p>
       </div>
@@ -133,10 +135,34 @@ export function InstallationPage() {
         <CodeBlock
           code={`{
   "react": "^18 || ^19",
-  "react-dom": "^18 || ^19"
+  "react-dom": "^18 || ^19",
+  "next-themes": "^0.4.0"
 }`}
           language="json"
         />
+        <p className="text-sm text-muted-foreground">
+          <code className="text-sm bg-muted px-1.5 py-0.5 rounded">next-themes</code> is required for the design
+          system's <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeProvider</code>,{' '}
+          <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeToggle</code>, and{' '}
+          <code className="text-sm bg-muted px-1.5 py-0.5 rounded">useTheme</code> to work. Install it alongside the
+          design system:
+        </p>
+        <Tabs defaultValue="npm" className="w-full">
+          <TabsList>
+            <TabsTrigger value="npm">npm</TabsTrigger>
+            <TabsTrigger value="yarn">yarn</TabsTrigger>
+            <TabsTrigger value="pnpm">pnpm</TabsTrigger>
+          </TabsList>
+          <TabsContent value="npm" className="mt-4">
+            <CodeBlock code="npm install next-themes" language="bash" />
+          </TabsContent>
+          <TabsContent value="yarn" className="mt-4">
+            <CodeBlock code="yarn add next-themes" language="bash" />
+          </TabsContent>
+          <TabsContent value="pnpm" className="mt-4">
+            <CodeBlock code="pnpm add next-themes" language="bash" />
+          </TabsContent>
+        </Tabs>
       </section>
 
       <section className="space-y-4">
@@ -253,15 +279,22 @@ module.exports = {
 
       <section className="space-y-4">
         <h2 className="text-2xl font-semibold tracking-tight">Start Using Components</h2>
-        <p className="text-muted-foreground">Now you can import and use components from the design system:</p>
+        <p className="text-muted-foreground">
+          Wrap your app with <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeProvider</code> and start
+          importing components:
+        </p>
         <CodeBlock
-          code={`import { Button } from '@gv-tech/design-system';
+          code={`import { ThemeProvider, ThemeToggle, Button } from '@gv-tech/design-system';
+import '@gv-tech/design-system/style.css';
 
 export default function App() {
   return (
-    <Button variant="default">
-      Click me
-    </Button>
+    <ThemeProvider>
+      <div>
+        <ThemeToggle variant="ternary" />
+        <Button variant="default">Click me</Button>
+      </div>
+    </ThemeProvider>
   );
 }`}
         />

package/src/pages/components/ThemeToggleDocs.tsx

@@ -47,10 +47,107 @@ export function ThemeToggleDocs() {
         </div>
       </ComponentShowcase>
 
-      <div className="space-y-4">
+      {/* ThemeProvider Section */}
+      <div className="mt-12 space-y-6">
+        <div>
+          <h3 className="text-xl font-semibold">ThemeProvider</h3>
+          <p className="mt-2 text-muted-foreground">
+            The design system exports a pre-configured{' '}
+            <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeProvider</code> that wraps{' '}
+            <code className="text-sm bg-muted px-1.5 py-0.5 rounded">next-themes</code> with sensible defaults. Wrap
+            your application with it to enable theme switching for all design system components.
+          </p>
+        </div>
+
+        <div className="rounded-md border bg-muted p-4">
+          <pre className="text-xs">
+            <code>
+              {`import { ThemeProvider, ThemeToggle } from '@gv-tech/design-system';
+import '@gv-tech/design-system/style.css';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <ThemeToggle variant="ternary" />
+      {/* Your app content */}
+    </ThemeProvider>
+  );
+}`}
+            </code>
+          </pre>
+        </div>
+
+        <div className="space-y-4">
+          <h4 className="font-medium text-foreground">Defaults</h4>
+          <p className="text-sm text-muted-foreground">
+            Out of the box, <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeProvider</code> applies these
+            defaults. You can override any of them by passing the corresponding prop.
+          </p>
+          <div className="rounded-md border">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b bg-muted/50">
+                  <th className="p-3 text-left font-medium">Prop</th>
+                  <th className="p-3 text-left font-medium">Default</th>
+                  <th className="p-3 text-left font-medium">Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="border-b">
+                  <td className="p-3">
+                    <code className="text-xs bg-muted px-1 py-0.5 rounded">attribute</code>
+                  </td>
+                  <td className="p-3">
+                    <code className="text-xs bg-muted px-1 py-0.5 rounded">"class"</code>
+                  </td>
+                  <td className="p-3 text-muted-foreground">Applies the theme as a CSS class on the HTML element</td>
+                </tr>
+                <tr className="border-b">
+                  <td className="p-3">
+                    <code className="text-xs bg-muted px-1 py-0.5 rounded">defaultTheme</code>
+                  </td>
+                  <td className="p-3">
+                    <code className="text-xs bg-muted px-1 py-0.5 rounded">"system"</code>
+                  </td>
+                  <td className="p-3 text-muted-foreground">Respects the user's operating system preference</td>
+                </tr>
+                <tr>
+                  <td className="p-3">
+                    <code className="text-xs bg-muted px-1 py-0.5 rounded">enableSystem</code>
+                  </td>
+                  <td className="p-3">
+                    <code className="text-xs bg-muted px-1 py-0.5 rounded">true</code>
+                  </td>
+                  <td className="p-3 text-muted-foreground">Enables automatic detection of the OS color scheme</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div className="rounded-md border bg-muted p-4">
+          <p className="text-xs font-medium text-muted-foreground mb-2">Overriding defaults:</p>
+          <pre className="text-xs">
+            <code>
+              {`<ThemeProvider
+  defaultTheme="dark"
+  storageKey="my-app-theme"
+  themes={['light', 'dark', 'ocean']}
+>
+  <App />
+</ThemeProvider>`}
+            </code>
+          </pre>
+        </div>
+      </div>
+
+      {/* useTheme Section */}
+      <div className="mt-12 space-y-4">
         <h3 className="text-xl font-semibold">useTheme Hook</h3>
         <p className="text-sm text-muted-foreground">
-          The `useTheme` hook provides access to the current theme and the active design tokens.
+          The <code className="text-sm bg-muted px-1.5 py-0.5 rounded">useTheme</code> hook provides access to the
+          current theme, theme controls, and the active design tokens. It must be used within a{' '}
+          <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeProvider</code>.
         </p>
         <div className="rounded-md border bg-muted p-4">
           <pre className="text-xs">
@@ -58,11 +155,12 @@ export function ThemeToggleDocs() {
               {`import { useTheme } from '@gv-tech/design-system';
 
 export function MyComponent() {
-  const { theme, setTheme, tokens } = useTheme();
+  const { theme, setTheme, resolvedTheme, tokens } = useTheme();
 
   return (
     <div style={{ backgroundColor: tokens.background }}>
       <p>Current theme: {theme}</p>
+      <p>Resolved theme: {resolvedTheme}</p>
       <button onClick={() => setTheme('dark')}>Dark Mode</button>
     </div>
   );
@@ -70,8 +168,40 @@ export function MyComponent() {
             </code>
           </pre>
         </div>
+
+        <PropsTable
+          props={[
+            {
+              name: 'theme',
+              type: 'string',
+              required: false,
+              description: 'The current theme name ("light", "dark", or "system").',
+            },
+            {
+              name: 'setTheme',
+              type: '(theme: string) => void',
+              required: false,
+              description: 'Function to programmatically change the theme.',
+            },
+            {
+              name: 'resolvedTheme',
+              type: 'string',
+              required: false,
+              description:
+                'The resolved theme ("light" or "dark"). Useful when theme is "system" and you need the actual value.',
+            },
+            {
+              name: 'tokens',
+              type: 'ThemeTokens',
+              required: false,
+              description:
+                'The active color tokens for the current resolved theme (light or dark). Contains background, foreground, primary, and other design token values.',
+            },
+          ]}
+        />
       </div>
 
+      {/* ThemeToggle Props Section */}
       <div className="space-y-4">
         <h3 className="text-xl font-semibold">ThemeToggle Props</h3>
         <PropsTable
@@ -106,23 +236,29 @@ export function MyComponent() {
         />
       </div>
 
+      {/* Integration Section */}
       <div className="mt-12 space-y-6">
         <div>
           <h3 className="text-xl font-semibold">Integration</h3>
           <p className="mt-2 text-muted-foreground">
-            The `ThemeToggle` component is built to be flexible and works seamlessly with `next-themes` by default, but
-            it can also be used in a fully controlled manner with any theme provider or custom state.
+            The <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeToggle</code> component works seamlessly
+            with the design system's <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeProvider</code>. It
+            can also be used in a fully controlled manner with any theme provider or custom state.
           </p>
         </div>
 
         <div className="grid gap-6 md:grid-cols-2">
           <div className="rounded-lg border bg-muted/50 p-6">
-            <h4 className="font-medium text-foreground">With next-themes</h4>
+            <h4 className="font-medium text-foreground">With ThemeProvider (Recommended)</h4>
             <p className="mt-1 text-sm text-muted-foreground">
-              Simply drop the component anywhere. It will automatically detect the `ThemeProvider` and handle switching.
+              Wrap your app with the design system's{' '}
+              <code className="text-xs bg-muted px-1 py-0.5 rounded">ThemeProvider</code> and drop in the toggle.
+              Everything connects automatically.
             </p>
             <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-xs">
-              <code>{`<ThemeProvider attribute="class">
+              <code>{`import { ThemeProvider, ThemeToggle } from '@gv-tech/design-system';
+
+<ThemeProvider>
   <ThemeToggle />
 </ThemeProvider>`}</code>
             </pre>
@@ -143,6 +279,17 @@ export function MyComponent() {
             </pre>
           </div>
         </div>
+
+        <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 p-6">
+          <h4 className="font-medium text-amber-600 dark:text-amber-400">⚠️ Important: Shared Context</h4>
+          <p className="mt-1 text-sm text-muted-foreground">
+            The design system marks <code className="text-xs bg-muted px-1 py-0.5 rounded">next-themes</code> as a{' '}
+            <strong>peer dependency</strong>, meaning it uses the same instance as your project. This ensures that{' '}
+            <code className="text-xs bg-muted px-1 py-0.5 rounded">useTheme</code>,{' '}
+            <code className="text-xs bg-muted px-1 py-0.5 rounded">ThemeToggle</code>, and your own components all share
+            the same theme context — no duplicate providers needed.
+          </p>
+        </div>
       </div>
     </ComponentSection>
   );

package/src/theme/tokens.ts

@@ -9,51 +9,73 @@ export const palette = {
     green: 'hsl(151 66% 27%)', // #177245 (Stability)
     floralWhite: 'hsl(40 100% 97%)', // Light Neutral / Floral White
   },
-  // Additional primitives can be added here
+  neutral: {
+    white: 'hsl(0 0% 100%)',
+    black: 'hsl(0 0% 0%)', // Pure Black
+    gray50: 'hsl(0 0% 96%)', // White Smoke
+    gray100: 'hsl(0 0% 92%)', // Gainsboro
+    gray200: 'hsl(0 0% 89%)', // Light Gray
+    gray300: 'hsl(0 0% 88%)', // French Gray
+    gray400: 'hsl(0 0% 70%)', // Silver
+    gray500: 'hsl(215 16% 47%)', // Steel Blue
+    gray600: 'hsl(222 47% 11%)', // Oxford Blue
+    gray700: 'hsl(0 0% 18%)', // Raisin Black
+    gray800: 'hsl(0 0% 15%)', // Jet
+    gray900: 'hsl(0 0% 14%)', // Eerie Black
+    gray950: 'hsl(0 0% 11%)', // Night (alt)
+    gray975: 'hsl(0 0% 9%)', // Night
+    gray990: 'hsl(0 0% 6%)', // Black (almost)
+  },
+  semantic: {
+    success: 'hsl(93 28% 54%)', // Asparagus / Pistachio
+    successDark: 'hsl(96 44% 61%)',
+    destructive: 'hsl(0 84.2% 60.2%)', // Vivid Red
+    destructiveDark: 'hsl(0 62.8% 30.6%)', // Blood Red
+  },
 } as const;
 
 export const theme = {
   light: {
-    background: 'hsl(0 0% 96%)', // White Smoke
-    foreground: 'hsl(222 47% 11%)', // Oxford Blue
-    card: 'hsl(0 0% 100%)', // White
-    cardForeground: 'hsl(222 47% 11%)', // Oxford Blue
-    popover: 'hsl(0 0% 100%)', // White
-    popoverForeground: 'hsl(222 47% 11%)', // Oxford Blue
-    primary: palette.brand.blue, // Royal Blue (Intellect)
-    primaryForeground: 'hsl(0 0% 100%)', // White
-    secondary: 'hsl(93 28% 54%)', // Asparagus / Pistachio
-    secondaryForeground: 'hsl(0 0% 100%)', // White
-    muted: 'hsl(0 0% 92%)', // Gainsboro
-    mutedForeground: 'hsl(215 16% 47%)', // Steel Blue
-    accent: 'hsl(0 0% 88%)', // French Gray
-    accentForeground: 'hsl(222 47% 11%)', // Oxford Blue
-    destructive: 'hsl(0 84.2% 60.2%)', // Vivid Red
-    destructiveForeground: 'hsl(0 0% 100%)', // White
-    border: 'hsl(0 0% 89%)', // Light Gray
-    input: 'hsl(0 0% 89%)', // Light Gray
-    ring: 'hsl(222 47% 11%)', // Oxford Blue
+    background: palette.neutral.gray50,
+    foreground: palette.neutral.gray600,
+    card: palette.neutral.white,
+    cardForeground: palette.neutral.gray600,
+    popover: palette.neutral.white,
+    popoverForeground: palette.neutral.gray600,
+    primary: palette.brand.blue,
+    primaryForeground: palette.neutral.white,
+    secondary: palette.semantic.success,
+    secondaryForeground: palette.neutral.white,
+    muted: palette.neutral.gray100,
+    mutedForeground: palette.neutral.gray500,
+    accent: palette.neutral.gray300,
+    accentForeground: palette.neutral.gray600,
+    destructive: palette.semantic.destructive,
+    destructiveForeground: palette.neutral.white,
+    border: palette.neutral.gray200,
+    input: palette.neutral.gray200,
+    ring: palette.neutral.gray600,
     radius: '0.5rem',
   },
   dark: {
-    background: 'hsl(0 0% 9%)', // Night
-    foreground: 'hsl(0 0% 100%)', // White
-    card: 'hsl(0 0% 14%)', // Eerie Black
-    cardForeground: 'hsl(0 0% 100%)', // White
-    popover: 'hsl(0 0% 11%)', // Night (alt)
-    popoverForeground: 'hsl(0 0% 100%)', // White
-    primary: 'hsl(227 96% 71%)', // Baby Blue
-    primaryForeground: 'hsl(0 0% 9%)', // Night
-    secondary: 'hsl(96 44% 61%)', // Celadon
-    secondaryForeground: 'hsl(0 0% 9%)', // Night
-    muted: 'hsl(0 0% 6%)', // Black
-    mutedForeground: 'hsl(0 0% 70%)', // Silver
-    accent: 'hsl(0 0% 15%)', // Jet
-    accentForeground: 'hsl(0 0% 100%)', // White
-    destructive: 'hsl(0 62.8% 30.6%)', // Blood Red
-    destructiveForeground: 'hsl(0 0% 100%)', // White
-    border: 'hsl(0 0% 18%)', // Raisin Black
-    input: 'hsl(0 0% 18%)', // Raisin Black
+    background: palette.neutral.gray975,
+    foreground: palette.neutral.white,
+    card: palette.neutral.gray900,
+    cardForeground: palette.neutral.white,
+    popover: palette.neutral.gray950,
+    popoverForeground: palette.neutral.white,
+    primary: 'hsl(227 96% 71%)', // Keeping as specific HSL to match original
+    primaryForeground: palette.neutral.gray975,
+    secondary: palette.semantic.successDark,
+    secondaryForeground: palette.neutral.gray975,
+    muted: palette.neutral.gray990,
+    mutedForeground: palette.neutral.gray400,
+    accent: palette.neutral.gray800,
+    accentForeground: palette.neutral.white,
+    destructive: palette.semantic.destructiveDark,
+    destructiveForeground: palette.neutral.white,
+    border: palette.neutral.gray700,
+    input: palette.neutral.gray700,
     ring: 'hsl(0 0% 90%)', // Platinum
     radius: '0.5rem',
   },