@gv-tech/design-system 2.1.0 → 2.2.0

package/src/pages/ColorTokensDocs.tsx

@@ -1,177 +1,214 @@
 import { CodeBlock } from '@/components/docs/CodeBlock';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { tokens } from '@/lib/tokens';
+import { tokens } from '@/theme/tokens';
 
 export function ColorTokensDocs() {
   return (
-    <div className="space-y-8">
-      <div className="space-y-2">
-        <h1 className="text-3xl font-bold tracking-tight">Color Tokens</h1>
-        <p className="text-lg text-muted-foreground">
-          A comprehensive token library for consistent branding across Garcia Ventures applications.
+    <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">
+          The Garcia Ventures design system is built on a robust token architecture that ensures consistency,
+          accessibility, and easy maintenance across all digital products.
         </p>
       </div>
 
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">The Color Theme</h2>
+      <section className="space-y-6">
+        <h2 className="text-3xl font-bold tracking-tight">Design Philosophy</h2>
+        <div className="grid gap-6 md:grid-cols-3">
+          <Card className="bg-primary/5 border-primary/20">
+            <CardHeader>
+              <CardTitle className="text-lg">Intellect</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">
+                Represented by Royal Blue, signaling depth, trust, and professional expertise.
+              </p>
+            </CardContent>
+          </Card>
+          <Card className="bg-secondary/5 border-secondary/20">
+            <CardHeader>
+              <CardTitle className="text-lg">Stability</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">
+                Rooted in Brand Green, reflecting growth, balance, and environmental consciousness.
+              </p>
+            </CardContent>
+          </Card>
+          <Card className="bg-accent/5 border-accent/20">
+            <CardHeader>
+              <CardTitle className="text-lg">Transparency</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">
+                Expressed through Floral White, prioritizing clarity and a clean user experience.
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      <section className="space-y-6">
+        <h2 className="text-3xl font-bold tracking-tight">Adoption Guide</h2>
         <p className="text-muted-foreground">
-          Our theme is designed to signal stability, intellect, and transparency. It follows a consistent hierarchy
-          across light and dark modes to ensure accessibility and professional aesthetics.
+          There are three primary ways to consume these tokens depending on your project's technology stack.
         </p>
 
-        <div className="grid gap-6 md:grid-cols-2">
+        <div className="space-y-8">
+          <div className="space-y-4">
+            <h3 className="text-xl font-semibold">1. Tailwind CSS (Recommended)</h3>
+            <p className="text-sm text-muted-foreground">
+              Most projects should use standard Tailwind utility classes. These are automatically mapped to our tokens
+              via CSS variables.
+            </p>
+            <CodeBlock
+              language="tsx"
+              code={`// Use standard semantic classes
+<button className="bg-primary text-primary-foreground hover:bg-primary/90">
+  Primary Action
+</button>
+
+<div className="border-border bg-card text-card-foreground">
+  Card Content
+</div>`}
+            />
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="text-xl font-semibold">2. TypeScript / React</h3>
+            <p className="text-sm text-muted-foreground">
+              For logic-heavy styling or CSS-in-JS solutions, import the \`tokens\` object directly.
+            </p>
+            <CodeBlock
+              language="tsx"
+              code={`import { tokens } from '@gv-tech/design-system';
+
+const MyComponent = () => {
+  return (
+    <div style={{ color: tokens.palette.brand.blue }}>
+      Using Royal Blue directly
+    </div>
+  );
+};`}
+            />
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="text-xl font-semibold">3. Vanilla CSS</h3>
+            <p className="text-sm text-muted-foreground">
+              Directly access the CSS variables in your style tags or external stylesheets.
+            </p>
+            <CodeBlock
+              language="css"
+              code={`.custom-element {
+  background-color: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  border: 1px solid hsl(var(--border));
+}`}
+            />
+          </div>
+        </div>
+      </section>
+
+      <section className="space-y-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-3xl font-bold tracking-tight">Core Palette</h2>
+        </div>
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
           <Card>
-            <CardHeader>
-              <CardTitle className="text-sm font-medium">Core Palette</CardTitle>
-            </CardHeader>
-            <CardContent className="grid gap-4">
-              <div className="flex items-center gap-4">
-                <div className="h-10 w-10 rounded-md border" style={{ backgroundColor: 'hsl(225 73% 57%)' }} />
-                <div>
-                  <p className="text-sm font-medium">Primary (Blue)</p>
-                  <p className="text-xs text-muted-foreground">Royal Blue / Cornflower</p>
-                </div>
-              </div>
-              <div className="flex items-center gap-4">
-                <div className="h-10 w-10 rounded-md border" style={{ backgroundColor: 'hsl(93 28% 54%)' }} />
+            <CardContent className="pt-6 space-y-4">
+              <div
+                className="h-24 w-full rounded-lg border shadow-inner"
+                style={{ backgroundColor: tokens.palette.brand.blue }}
+              />
+              <div className="flex justify-between items-start">
                 <div>
-                  <p className="text-sm font-medium">Secondary (Green)</p>
-                  <p className="text-xs text-muted-foreground">Asparagus / Pistachio</p>
-                </div>
-              </div>
-              <div className="flex items-center gap-4">
-                <div className="h-10 w-10 rounded-md border" style={{ backgroundColor: 'hsl(210 29% 98%)' }} />
-                <div>
-                  <p className="text-sm font-medium">Neutral (Off-White)</p>
-                  <p className="text-xs text-muted-foreground">Light Neutral / Floral White</p>
+                  <h4 className="font-bold">Royal Blue</h4>
+                  <p className="text-xs text-muted-foreground">Intellect & Trust</p>
                 </div>
+                <code className="text-xs bg-muted px-1.5 py-0.5 rounded">{tokens.palette.brand.blue}</code>
               </div>
             </CardContent>
           </Card>
-
           <Card>
-            <CardHeader>
-              <CardTitle className="text-sm font-medium">Brand Specifics</CardTitle>
-            </CardHeader>
-            <CardContent className="grid gap-4">
-              <div className="flex items-center gap-4">
-                <div className="h-10 w-10 rounded-md border" style={{ backgroundColor: 'hsl(151 66% 27%)' }} />
+            <CardContent className="pt-6 space-y-4">
+              <div
+                className="h-24 w-full rounded-lg border shadow-inner"
+                style={{ backgroundColor: tokens.palette.brand.green }}
+              />
+              <div className="flex justify-between items-start">
                 <div>
-                  <p className="text-sm font-medium">Brand Green</p>
-                  <p className="text-xs text-muted-foreground">#177245 (Stability)</p>
+                  <h4 className="font-bold">Stability Green</h4>
+                  <p className="text-xs text-muted-foreground">Growth & Balance</p>
                 </div>
+                <code className="text-xs bg-muted px-1.5 py-0.5 rounded">{tokens.palette.brand.green}</code>
               </div>
-              <div className="flex items-center gap-4">
-                <div className="h-10 w-10 rounded-md border" style={{ backgroundColor: 'hsl(225 73% 57%)' }} />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="pt-6 space-y-4">
+              <div
+                className="h-24 w-full rounded-lg border shadow-inner"
+                style={{ backgroundColor: tokens.palette.brand.floralWhite }}
+              />
+              <div className="flex justify-between items-start">
                 <div>
-                  <p className="text-sm font-medium">Brand Blue</p>
-                  <p className="text-xs text-muted-foreground">#4169e1 (Intellect)</p>
+                  <h4 className="font-bold">Floral White</h4>
+                  <p className="text-xs text-muted-foreground">Transparency & Clarity</p>
                 </div>
+                <code className="text-xs bg-muted px-1.5 py-0.5 rounded">{tokens.palette.brand.floralWhite}</code>
               </div>
             </CardContent>
           </Card>
         </div>
       </section>
 
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">Usage: Tailwind CSS</h2>
-        <p className="text-muted-foreground">
-          All color tokens are mapped to standard Tailwind colors via CSS variables in our design system.
-        </p>
-        <CodeBlock
-          language="tsx"
-          code={`<div className="bg-primary text-primary-foreground">
-  Primary Content
-</div>
-<div className="text-secondary">
-  Secondary Accent
-</div>
-<div className="border-border bg-muted/30">
-  Muted Container
-</div>`}
-        />
-      </section>
-
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">Usage: TypeScript Tokens</h2>
-        <p className="text-muted-foreground">
-          For programmatic usage or non-Tailwind applications, you can import the raw token values.
-        </p>
-        <CodeBlock
-          language="tsx"
-          code={`import { tokens } from '@gv-tech/design-system';
-
-// Accessing HSL values
-const primary = tokens.colors.light.primary;
-const brandGreen = tokens.colors.brand.green;`}
-        />
-      </section>
-
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">CSS Variables Reference</h2>
-        <p className="text-muted-foreground">
-          Below is a complete reference of all semantic color tokens available in the design system.
-        </p>
-        <div className="rounded-md border overflow-hidden">
+      <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>
             <TableHeader>
               <TableRow className="bg-muted/50 hover:bg-muted/50">
-                <TableHead>Variable</TableHead>
+                <TableHead className="w-[200px]">Token</TableHead>
+                <TableHead>Variable Name</TableHead>
                 <TableHead>Light Mode</TableHead>
                 <TableHead>Dark Mode</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              {(Object.keys(tokens.colors.light) as Array<keyof typeof tokens.colors.light>).map((key) => (
-                <TableRow key={key}>
-                  <TableCell className="font-mono text-xs">
-                    --{key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-2">
-                      <div
-                        className="h-4 w-4 rounded-sm border"
-                        style={{ backgroundColor: tokens.colors.light[key] }}
-                      />
-                      <span className="text-muted-foreground">{tokens.colors.light[key]}</span>
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-2">
-                      <div className="h-4 w-4 rounded-sm border" style={{ backgroundColor: tokens.colors.dark[key] }} />
-                      <span className="text-muted-foreground">{tokens.colors.dark[key]}</span>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      </section>
-
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">Brand Colors</h2>
-        <div className="rounded-md border overflow-hidden">
-          <Table>
-            <TableHeader>
-              <TableRow className="bg-muted/50 hover:bg-muted/50">
-                <TableHead>Token</TableHead>
-                <TableHead>Value</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {Object.entries(tokens.colors.brand).map(([key, value]) => (
-                <TableRow key={key}>
-                  <TableCell className="font-mono text-xs">tokens.colors.brand.{key}</TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-2">
-                      <div className="h-4 w-4 rounded-sm border" style={{ backgroundColor: value }} />
-                      <span className="text-muted-foreground">{value}</span>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
+              {(Object.keys(tokens.theme.light) as Array<keyof typeof tokens.theme.light>).map((key) => {
+                if (key === 'radius') return null;
+                return (
+                  <TableRow key={key} className="group">
+                    <TableCell className="font-medium group-hover:text-primary transition-colors">
+                      {key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1')}
+                    </TableCell>
+                    <TableCell className="font-mono text-xs text-muted-foreground">
+                      --{key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase())}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-3">
+                        <div
+                          className="h-6 w-6 rounded-md border shadow-sm"
+                          style={{ backgroundColor: tokens.theme.light[key] as string }}
+                        />
+                        <span className="text-xs font-mono">{tokens.theme.light[key]}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-3">
+                        <div
+                          className="h-6 w-6 rounded-md border shadow-sm"
+                          style={{ backgroundColor: tokens.theme.dark[key] as string }}
+                        />
+                        <span className="text-xs font-mono">{tokens.theme.dark[key]}</span>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
             </TableBody>
           </Table>
         </div>

package/src/pages/components/ThemeToggleDocs.tsx

@@ -30,23 +30,48 @@ export function ThemeToggleDocs() {
       </ComponentShowcase>
 
       <ComponentShowcase
-        title="Custom State Integration"
-        description="You can control the theme externally by passing customTheme and onThemeChange props."
+        title="Controlled Mode"
+        description="You can control the theme externally by passing customTheme and onThemeChange props. This is useful for testing or when using a different theme provider."
         code={`const [theme, setTheme] = useState('light');
 
 <ThemeToggle
   customTheme={theme}
-  onThemeChange={(newTheme) => setTheme(newTheme)}
+  onThemeChange={setTheme}
 />
 
 <p>Current Theme: {theme}</p>`}
       >
         <div className="flex flex-col items-center gap-4">
-          <ThemeToggle customTheme={customTheme} onThemeChange={(newTheme) => setCustomTheme(newTheme)} />
+          <ThemeToggle customTheme={customTheme} onThemeChange={setCustomTheme} />
           <p className="text-sm font-medium">Current Selection: {customTheme}</p>
         </div>
       </ComponentShowcase>
 
+      <div className="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.
+        </p>
+        <div className="rounded-md border bg-muted p-4">
+          <pre className="text-xs">
+            <code>
+              {`import { useTheme } from '@gv-tech/design-system';
+
+export function MyComponent() {
+  const { theme, setTheme, tokens } = useTheme();
+
+  return (
+    <div style={{ backgroundColor: tokens.background }}>
+      <p>Current theme: {theme}</p>
+      <button onClick={() => setTheme('dark')}>Dark Mode</button>
+    </div>
+  );
+}`}
+            </code>
+          </pre>
+        </div>
+      </div>
+
       <div className="space-y-4">
         <h3 className="text-xl font-semibold">ThemeToggle Props</h3>
         <PropsTable
@@ -104,14 +129,16 @@ export function ThemeToggleDocs() {
           </div>
 
           <div className="rounded-lg border bg-muted/50 p-6">
-            <h4 className="font-medium text-foreground">Custom Provider</h4>
+            <h4 className="font-medium text-foreground">Controlled / Custom State</h4>
             <p className="mt-1 text-sm text-muted-foreground">
               Pass your own theme state and change handler to integrate with custom logic or external storage.
             </p>
             <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-xs">
-              <code>{`<ThemeToggle 
-  customTheme={myTheme} 
-  onThemeChange={(t) => updateMyTheme(t)} 
+              <code>{`const [theme, setTheme] = useState("light")
+
+<ThemeToggle 
+  customTheme={theme} 
+  onThemeChange={setTheme} 
 />`}</code>
             </pre>
           </div>

package/src/theme/tokens.ts

@@ -0,0 +1,68 @@
+/**
+ * Design system tokens for Garcia Ventures.
+ * This file defines the core palette and semantic tokens for the theme system.
+ */
+
+export const palette = {
+  brand: {
+    blue: 'hsl(225 73% 57%)', // Royal Blue (Intellect)
+    green: 'hsl(151 66% 27%)', // #177245 (Stability)
+    floralWhite: 'hsl(40 100% 97%)', // Light Neutral / Floral White
+  },
+  // Additional primitives can be added here
+} 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
+    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
+    ring: 'hsl(0 0% 90%)', // Platinum
+    radius: '0.5rem',
+  },
+} as const;
+
+export const tokens = {
+  palette,
+  theme,
+} as const;
+
+export type ThemeTokens = typeof theme.light;
+export type PaletteTokens = typeof palette;

package/.nvmrc

@@ -1 +0,0 @@
-24

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
-};

package/dist/lib/tokens.d.ts

@@ -1,54 +0,0 @@
-/** Design system color tokens for Garcia Ventures. */
-export declare const tokens: {
-    readonly colors: {
-        readonly light: {
-            readonly background: "hsl(0 0% 96%)";
-            readonly foreground: "hsl(222 47% 11%)";
-            readonly card: "hsl(0 0% 100%)";
-            readonly cardForeground: "hsl(222 47% 11%)";
-            readonly popover: "hsl(0 0% 100%)";
-            readonly popoverForeground: "hsl(222 47% 11%)";
-            readonly primary: "hsl(225 73% 57%)";
-            readonly primaryForeground: "hsl(0 0% 100%)";
-            readonly secondary: "hsl(93 28% 54%)";
-            readonly secondaryForeground: "hsl(0 0% 100%)";
-            readonly muted: "hsl(0 0% 92%)";
-            readonly mutedForeground: "hsl(215 16% 47%)";
-            readonly accent: "hsl(0 0% 88%)";
-            readonly accentForeground: "hsl(222 47% 11%)";
-            readonly destructive: "hsl(0 84.2% 60.2%)";
-            readonly destructiveForeground: "hsl(0 0% 100%)";
-            readonly border: "hsl(0 0% 89%)";
-            readonly input: "hsl(0 0% 89%)";
-            readonly ring: "hsl(222 47% 11%)";
-        };
-        readonly dark: {
-            readonly background: "hsl(0 0% 9%)";
-            readonly foreground: "hsl(0 0% 100%)";
-            readonly card: "hsl(0 0% 14%)";
-            readonly cardForeground: "hsl(0 0% 100%)";
-            readonly popover: "hsl(0 0% 11%)";
-            readonly popoverForeground: "hsl(0 0% 100%)";
-            readonly primary: "hsl(227 96% 71%)";
-            readonly primaryForeground: "hsl(0 0% 9%)";
-            readonly secondary: "hsl(96 44% 61%)";
-            readonly secondaryForeground: "hsl(0 0% 9%)";
-            readonly muted: "hsl(0 0% 6%)";
-            readonly mutedForeground: "hsl(0 0% 70%)";
-            readonly accent: "hsl(0 0% 15%)";
-            readonly accentForeground: "hsl(0 0% 100%)";
-            readonly destructive: "hsl(0 62.8% 30.6%)";
-            readonly destructiveForeground: "hsl(0 0% 100%)";
-            readonly border: "hsl(0 0% 18%)";
-            readonly input: "hsl(0 0% 18%)";
-            readonly ring: "hsl(0 0% 90%)";
-        };
-        readonly brand: {
-            readonly green: "hsl(151 66% 27%)";
-            readonly blue: "hsl(225 73% 57%)";
-        };
-    };
-};
-export type ThemeTokens = typeof tokens.colors.light;
-export type BrandTokens = typeof tokens.colors.brand;
-//# sourceMappingURL=tokens.d.ts.map

package/dist/lib/tokens.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/lib/tokens.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDT,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC"}

package/netlify.toml

@@ -1,6 +0,0 @@
-[build]
-command = "yarn install --immutable && yarn build-storybook"
-publish = "storybook-static"
-
-[build.environment]
-NODE_VERSION = "24"

package/serve.json

@@ -1,4 +0,0 @@
-{
-  "cleanUrls": false,
-  "trailingSlash": false
-}

package/src/lib/tokens.ts

@@ -1,54 +0,0 @@
-/** Design system color tokens for Garcia Ventures. */
-export const tokens = {
-  colors: {
-    light: {
-      background: 'hsl(0 0% 96%)',
-      foreground: 'hsl(222 47% 11%)',
-      card: 'hsl(0 0% 100%)',
-      cardForeground: 'hsl(222 47% 11%)',
-      popover: 'hsl(0 0% 100%)',
-      popoverForeground: 'hsl(222 47% 11%)',
-      primary: 'hsl(225 73% 57%)',
-      primaryForeground: 'hsl(0 0% 100%)',
-      secondary: 'hsl(93 28% 54%)',
-      secondaryForeground: 'hsl(0 0% 100%)',
-      muted: 'hsl(0 0% 92%)',
-      mutedForeground: 'hsl(215 16% 47%)',
-      accent: 'hsl(0 0% 88%)',
-      accentForeground: 'hsl(222 47% 11%)',
-      destructive: 'hsl(0 84.2% 60.2%)',
-      destructiveForeground: 'hsl(0 0% 100%)',
-      border: 'hsl(0 0% 89%)',
-      input: 'hsl(0 0% 89%)',
-      ring: 'hsl(222 47% 11%)',
-    },
-    dark: {
-      background: 'hsl(0 0% 9%)',
-      foreground: 'hsl(0 0% 100%)',
-      card: 'hsl(0 0% 14%)',
-      cardForeground: 'hsl(0 0% 100%)',
-      popover: 'hsl(0 0% 11%)',
-      popoverForeground: 'hsl(0 0% 100%)',
-      primary: 'hsl(227 96% 71%)',
-      primaryForeground: 'hsl(0 0% 9%)',
-      secondary: 'hsl(96 44% 61%)',
-      secondaryForeground: 'hsl(0 0% 9%)',
-      muted: 'hsl(0 0% 6%)',
-      mutedForeground: 'hsl(0 0% 70%)',
-      accent: 'hsl(0 0% 15%)',
-      accentForeground: 'hsl(0 0% 100%)',
-      destructive: 'hsl(0 62.8% 30.6%)',
-      destructiveForeground: 'hsl(0 0% 100%)',
-      border: 'hsl(0 0% 18%)',
-      input: 'hsl(0 0% 18%)',
-      ring: 'hsl(0 0% 90%)',
-    },
-    brand: {
-      green: 'hsl(151 66% 27%)',
-      blue: 'hsl(225 73% 57%)',
-    },
-  },
-} as const;
-
-export type ThemeTokens = typeof tokens.colors.light;
-export type BrandTokens = typeof tokens.colors.brand;