vibecarbon 0.1.0

package/carbon/src/client/lib/blog.ts

@@ -0,0 +1,35 @@
+import type { ComponentType } from 'react';
+
+export interface BlogPost {
+  slug: string;
+  frontmatter: {
+    title: string;
+    description: string;
+    date: string;
+    author?: string;
+  };
+  Component: ComponentType;
+}
+
+// Import all MDX files from content/blog/
+// These are loaded eagerly within this chunk, but since Blog.tsx is lazy-loaded
+// via React.lazy(), none of this code enters the main bundle.
+const modules = import.meta.glob<{
+  default: ComponentType;
+  frontmatter: BlogPost['frontmatter'];
+}>('/../../content/blog/*.mdx', { eager: true });
+
+export const posts: BlogPost[] = Object.entries(modules)
+  .map(([filepath, mod]) => {
+    const slug = (filepath.split('/').pop() ?? '').replace('.mdx', '');
+    return {
+      slug,
+      frontmatter: mod.frontmatter,
+      Component: mod.default,
+    };
+  })
+  .sort((a, b) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime());
+
+export function getPost(slug: string): BlogPost | undefined {
+  return posts.find((p) => p.slug === slug);
+}

package/carbon/src/client/lib/changelog.ts

@@ -0,0 +1,33 @@
+import type { ComponentType } from 'react';
+
+export interface ChangelogEntry {
+  slug: string;
+  frontmatter: {
+    title: string;
+    description: string;
+    date: string;
+    version?: string;
+  };
+  Component: ComponentType;
+}
+
+// Eagerly import all MDX files from content/changelog/
+const modules = import.meta.glob<{
+  default: ComponentType;
+  frontmatter: ChangelogEntry['frontmatter'];
+}>('/../../content/changelog/*.mdx', { eager: true });
+
+export const entries: ChangelogEntry[] = Object.entries(modules)
+  .map(([filepath, mod]) => {
+    const slug = (filepath.split('/').pop() ?? '').replace('.mdx', '');
+    return {
+      slug,
+      frontmatter: mod.frontmatter,
+      Component: mod.default,
+    };
+  })
+  .sort((a, b) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime());
+
+export function getEntry(slug: string): ChangelogEntry | undefined {
+  return entries.find((e) => e.slug === slug);
+}

package/carbon/src/client/lib/docs-search.ts

@@ -0,0 +1,101 @@
+import { pages } from './docs';
+
+export interface SearchResult {
+  slug: string;
+  title: string;
+  description: string;
+  snippet: string;
+  score: number;
+}
+
+/**
+ * Simple client-side full-text search over docs content.
+ * Uses pre-extracted text from MDX components rendered to plain text.
+ * No external dependencies (no Flexsearch/Fuse.js needed for this scale).
+ */
+
+interface DocIndex {
+  slug: string;
+  title: string;
+  description: string;
+  text: string; // full-text content
+}
+
+let index: DocIndex[] | null = null;
+
+/**
+ * Build the search index by extracting text from MDX components.
+ * Called lazily on first search.
+ */
+function buildIndex(): DocIndex[] {
+  if (index) return index;
+
+  index = pages.map((page) => {
+    // Extract text from the MDX component by rendering to a temporary element
+    const text = extractTextFromPage(page);
+    return {
+      slug: page.slug,
+      title: page.frontmatter.title,
+      description: page.frontmatter.description,
+      text: text.toLowerCase(),
+    };
+  });
+
+  return index;
+}
+
+/**
+ * Extract plain text from a doc page.
+ * Uses a temporary DOM element to render the MDX and extract textContent.
+ */
+function extractTextFromPage(page: (typeof pages)[0]): string {
+  // Use frontmatter as the primary search content.
+  // MDX components can't be easily rendered to text without React.
+  return `${page.frontmatter.title} ${page.frontmatter.description}`;
+}
+
+/**
+ * Search docs by query string.
+ * Returns results sorted by relevance score.
+ */
+export function searchDocs(query: string, maxResults = 10): SearchResult[] {
+  if (!query || query.length < 2) return [];
+
+  const docs = buildIndex();
+  const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
+  const results: SearchResult[] = [];
+
+  for (const doc of docs) {
+    let score = 0;
+
+    for (const term of terms) {
+      // Title match (highest weight)
+      if (doc.title.toLowerCase().includes(term)) {
+        score += 10;
+      }
+      // Description match
+      if (doc.description.toLowerCase().includes(term)) {
+        score += 5;
+      }
+      // Full text match
+      if (doc.text.includes(term)) {
+        score += 1;
+      }
+    }
+
+    if (score > 0) {
+      // Generate snippet from description (good enough for this scale)
+      const snippet = doc.description;
+
+      results.push({
+        slug: doc.slug,
+        title: doc.title,
+        description: doc.description,
+        snippet,
+        score,
+      });
+    }
+  }
+
+  return results.sort((a, b) => b.score - a.score).slice(0, maxResults);
+}

package/carbon/src/client/lib/docs.ts

@@ -0,0 +1,37 @@
+import type { ComponentType } from 'react';
+
+/** Props accepted by compiled MDX components (subset we use) */
+export type MdxProps = {
+  components?: Record<string, ComponentType<unknown>>;
+};
+
+export interface DocPage {
+  slug: string;
+  frontmatter: {
+    title: string;
+    description: string;
+    order?: number;
+  };
+  Component: ComponentType<MdxProps>;
+}
+
+// Eagerly import all MDX files from content/docs/
+const modules = import.meta.glob<{
+  default: ComponentType<MdxProps>;
+  frontmatter: DocPage['frontmatter'];
+}>('/../../content/docs/*.mdx', { eager: true });
+
+export const pages: DocPage[] = Object.entries(modules)
+  .map(([filepath, mod]) => {
+    const slug = (filepath.split('/').pop() ?? '').replace('.mdx', '');
+    return {
+      slug,
+      frontmatter: mod.frontmatter,
+      Component: mod.default,
+    };
+  })
+  .sort((a, b) => (a.frontmatter.order ?? 99) - (b.frontmatter.order ?? 99));
+
+export function getPage(slug: string): DocPage | undefined {
+  return pages.find((p) => p.slug === slug);
+}

package/carbon/src/client/lib/i18n.ts

@@ -0,0 +1,32 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+import de from '../locales/de.json';
+import en from '../locales/en.json';
+import es from '../locales/es.json';
+import fr from '../locales/fr.json';
+import pt from '../locales/pt.json';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: { translation: en },
+      es: { translation: es },
+      fr: { translation: fr },
+      de: { translation: de },
+      pt: { translation: pt },
+    },
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false, // React already escapes
+    },
+    detection: {
+      order: ['localStorage', 'navigator'],
+      caches: ['localStorage'],
+    },
+  });
+
+export default i18n;

package/carbon/src/client/lib/supabase.ts

@@ -0,0 +1,72 @@
+import { createClient } from '@supabase/supabase-js';
+import type { Database } from '../../shared/types';
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+if (!supabaseUrl || !supabaseAnonKey) {
+  throw new Error('Missing Supabase environment variables');
+}
+
+/**
+ * Cookie-based storage adapter for Supabase auth.
+ * Stores auth tokens in cookies so they're sent with requests to /admin/* routes,
+ * enabling ForwardAuth middleware to verify user authentication.
+ */
+
+// Get cookie domain for subdomain sharing (e.g., n8n.localhost, metabase.localhost)
+// This enables ForwardAuth to work across all *.localhost services in development
+// and across all subdomains in production.
+function getCookieDomain(): string | null {
+  const hostname = window.location.hostname;
+
+  // For *.localhost subdomains (app.localhost, n8n.localhost, etc.)
+  // Set domain to localhost for cross-subdomain cookie sharing
+  if (hostname.endsWith('.localhost')) {
+    return 'localhost';
+  }
+
+  // Plain localhost — set domain for subdomain sharing (grafana.localhost, n8n.localhost, etc.)
+  if (hostname === 'localhost') {
+    return 'localhost';
+  }
+
+  // For production domains like app.example.com, use .example.com
+  const parts = hostname.split('.');
+  if (parts.length >= 2) {
+    return `.${parts.slice(-2).join('.')}`;
+  }
+
+  return null;
+}
+
+const cookieDomain = getCookieDomain();
+
+const cookieStorage = {
+  getItem: (key: string): string | null => {
+    const match = document.cookie.match(new RegExp(`(^| )${key}=([^;]+)`));
+    return match ? decodeURIComponent(match[2]) : null;
+  },
+  setItem: (key: string, value: string): void => {
+    // Set cookie with SameSite=Lax for same-origin navigation
+    // Domain set for subdomain sharing (localhost subdomains + production)
+    // Max age 7 days (Supabase handles token refresh)
+    const domainAttr = cookieDomain ? `domain=${cookieDomain}; ` : '';
+    const secureAttr = window.location.protocol === 'https:' ? 'Secure; ' : '';
+    document.cookie = `${key}=${encodeURIComponent(value)}; path=/; ${domainAttr}${secureAttr}max-age=${60 * 60 * 24 * 7}; SameSite=Lax`;
+  },
+  removeItem: (key: string): void => {
+    const domainAttr = cookieDomain ? `domain=${cookieDomain}; ` : '';
+    document.cookie = `${key}=; path=/; ${domainAttr}expires=Thu, 01 Jan 1970 00:00:00 GMT`;
+  },
+};
+
+export const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey, {
+  auth: {
+    autoRefreshToken: true,
+    persistSession: true,
+    detectSessionInUrl: true,
+    storage: cookieStorage,
+    storageKey: 'sb-auth-token',
+  },
+});

package/carbon/src/client/lib/tailwind-colors.ts

@@ -0,0 +1,357 @@
+export type ColorShade = { shade: number; hex: string; name: string };
+export type ColorFamily = { name: string; shades: ColorShade[] };
+
+export const TAILWIND_COLORS: ColorFamily[] = [
+  {
+    name: 'slate',
+    shades: [
+      { shade: 50, hex: '#f8fafc', name: 'slate-50' },
+      { shade: 100, hex: '#f1f5f9', name: 'slate-100' },
+      { shade: 200, hex: '#e2e8f0', name: 'slate-200' },
+      { shade: 300, hex: '#cbd5e1', name: 'slate-300' },
+      { shade: 400, hex: '#94a3b8', name: 'slate-400' },
+      { shade: 500, hex: '#64748b', name: 'slate-500' },
+      { shade: 600, hex: '#475569', name: 'slate-600' },
+      { shade: 700, hex: '#334155', name: 'slate-700' },
+      { shade: 800, hex: '#1e293b', name: 'slate-800' },
+      { shade: 900, hex: '#0f172a', name: 'slate-900' },
+      { shade: 950, hex: '#020617', name: 'slate-950' },
+    ],
+  },
+  {
+    name: 'gray',
+    shades: [
+      { shade: 50, hex: '#f9fafb', name: 'gray-50' },
+      { shade: 100, hex: '#f3f4f6', name: 'gray-100' },
+      { shade: 200, hex: '#e5e7eb', name: 'gray-200' },
+      { shade: 300, hex: '#d1d5db', name: 'gray-300' },
+      { shade: 400, hex: '#9ca3af', name: 'gray-400' },
+      { shade: 500, hex: '#6b7280', name: 'gray-500' },
+      { shade: 600, hex: '#4b5563', name: 'gray-600' },
+      { shade: 700, hex: '#374151', name: 'gray-700' },
+      { shade: 800, hex: '#1f2937', name: 'gray-800' },
+      { shade: 900, hex: '#111827', name: 'gray-900' },
+      { shade: 950, hex: '#030712', name: 'gray-950' },
+    ],
+  },
+  {
+    name: 'zinc',
+    shades: [
+      { shade: 50, hex: '#fafafa', name: 'zinc-50' },
+      { shade: 100, hex: '#f4f4f5', name: 'zinc-100' },
+      { shade: 200, hex: '#e4e4e7', name: 'zinc-200' },
+      { shade: 300, hex: '#d4d4d8', name: 'zinc-300' },
+      { shade: 400, hex: '#a1a1aa', name: 'zinc-400' },
+      { shade: 500, hex: '#71717a', name: 'zinc-500' },
+      { shade: 600, hex: '#52525b', name: 'zinc-600' },
+      { shade: 700, hex: '#3f3f46', name: 'zinc-700' },
+      { shade: 800, hex: '#27272a', name: 'zinc-800' },
+      { shade: 900, hex: '#18181b', name: 'zinc-900' },
+      { shade: 950, hex: '#09090b', name: 'zinc-950' },
+    ],
+  },
+  {
+    name: 'neutral',
+    shades: [
+      { shade: 50, hex: '#fafafa', name: 'neutral-50' },
+      { shade: 100, hex: '#f5f5f5', name: 'neutral-100' },
+      { shade: 200, hex: '#e5e5e5', name: 'neutral-200' },
+      { shade: 300, hex: '#d4d4d4', name: 'neutral-300' },
+      { shade: 400, hex: '#a3a3a3', name: 'neutral-400' },
+      { shade: 500, hex: '#737373', name: 'neutral-500' },
+      { shade: 600, hex: '#525252', name: 'neutral-600' },
+      { shade: 700, hex: '#404040', name: 'neutral-700' },
+      { shade: 800, hex: '#262626', name: 'neutral-800' },
+      { shade: 900, hex: '#171717', name: 'neutral-900' },
+      { shade: 950, hex: '#0a0a0a', name: 'neutral-950' },
+    ],
+  },
+  {
+    name: 'stone',
+    shades: [
+      { shade: 50, hex: '#fafaf9', name: 'stone-50' },
+      { shade: 100, hex: '#f5f5f4', name: 'stone-100' },
+      { shade: 200, hex: '#e7e5e4', name: 'stone-200' },
+      { shade: 300, hex: '#d6d3d1', name: 'stone-300' },
+      { shade: 400, hex: '#a8a29e', name: 'stone-400' },
+      { shade: 500, hex: '#78716c', name: 'stone-500' },
+      { shade: 600, hex: '#57534e', name: 'stone-600' },
+      { shade: 700, hex: '#44403c', name: 'stone-700' },
+      { shade: 800, hex: '#292524', name: 'stone-800' },
+      { shade: 900, hex: '#1c1917', name: 'stone-900' },
+      { shade: 950, hex: '#0c0a09', name: 'stone-950' },
+    ],
+  },
+  {
+    name: 'red',
+    shades: [
+      { shade: 50, hex: '#fef2f2', name: 'red-50' },
+      { shade: 100, hex: '#fee2e2', name: 'red-100' },
+      { shade: 200, hex: '#fecaca', name: 'red-200' },
+      { shade: 300, hex: '#fca5a5', name: 'red-300' },
+      { shade: 400, hex: '#f87171', name: 'red-400' },
+      { shade: 500, hex: '#ef4444', name: 'red-500' },
+      { shade: 600, hex: '#dc2626', name: 'red-600' },
+      { shade: 700, hex: '#b91c1c', name: 'red-700' },
+      { shade: 800, hex: '#991b1b', name: 'red-800' },
+      { shade: 900, hex: '#7f1d1d', name: 'red-900' },
+      { shade: 950, hex: '#450a0a', name: 'red-950' },
+    ],
+  },
+  {
+    name: 'orange',
+    shades: [
+      { shade: 50, hex: '#fff7ed', name: 'orange-50' },
+      { shade: 100, hex: '#ffedd5', name: 'orange-100' },
+      { shade: 200, hex: '#fed7aa', name: 'orange-200' },
+      { shade: 300, hex: '#fdba74', name: 'orange-300' },
+      { shade: 400, hex: '#fb923c', name: 'orange-400' },
+      { shade: 500, hex: '#f97316', name: 'orange-500' },
+      { shade: 600, hex: '#ea580c', name: 'orange-600' },
+      { shade: 700, hex: '#c2410c', name: 'orange-700' },
+      { shade: 800, hex: '#9a3412', name: 'orange-800' },
+      { shade: 900, hex: '#7c2d12', name: 'orange-900' },
+      { shade: 950, hex: '#431407', name: 'orange-950' },
+    ],
+  },
+  {
+    name: 'amber',
+    shades: [
+      { shade: 50, hex: '#fffbeb', name: 'amber-50' },
+      { shade: 100, hex: '#fef3c7', name: 'amber-100' },
+      { shade: 200, hex: '#fde68a', name: 'amber-200' },
+      { shade: 300, hex: '#fcd34d', name: 'amber-300' },
+      { shade: 400, hex: '#fbbf24', name: 'amber-400' },
+      { shade: 500, hex: '#f59e0b', name: 'amber-500' },
+      { shade: 600, hex: '#d97706', name: 'amber-600' },
+      { shade: 700, hex: '#b45309', name: 'amber-700' },
+      { shade: 800, hex: '#92400e', name: 'amber-800' },
+      { shade: 900, hex: '#78350f', name: 'amber-900' },
+      { shade: 950, hex: '#451a03', name: 'amber-950' },
+    ],
+  },
+  {
+    name: 'yellow',
+    shades: [
+      { shade: 50, hex: '#fefce8', name: 'yellow-50' },
+      { shade: 100, hex: '#fef9c3', name: 'yellow-100' },
+      { shade: 200, hex: '#fef08a', name: 'yellow-200' },
+      { shade: 300, hex: '#fde047', name: 'yellow-300' },
+      { shade: 400, hex: '#facc15', name: 'yellow-400' },
+      { shade: 500, hex: '#eab308', name: 'yellow-500' },
+      { shade: 600, hex: '#ca8a04', name: 'yellow-600' },
+      { shade: 700, hex: '#a16207', name: 'yellow-700' },
+      { shade: 800, hex: '#854d0e', name: 'yellow-800' },
+      { shade: 900, hex: '#713f12', name: 'yellow-900' },
+      { shade: 950, hex: '#422006', name: 'yellow-950' },
+    ],
+  },
+  {
+    name: 'lime',
+    shades: [
+      { shade: 50, hex: '#f7fee7', name: 'lime-50' },
+      { shade: 100, hex: '#ecfccb', name: 'lime-100' },
+      { shade: 200, hex: '#d9f99d', name: 'lime-200' },
+      { shade: 300, hex: '#bef264', name: 'lime-300' },
+      { shade: 400, hex: '#a3e635', name: 'lime-400' },
+      { shade: 500, hex: '#84cc16', name: 'lime-500' },
+      { shade: 600, hex: '#65a30d', name: 'lime-600' },
+      { shade: 700, hex: '#4d7c0f', name: 'lime-700' },
+      { shade: 800, hex: '#3f6212', name: 'lime-800' },
+      { shade: 900, hex: '#365314', name: 'lime-900' },
+      { shade: 950, hex: '#1a2e05', name: 'lime-950' },
+    ],
+  },
+  {
+    name: 'green',
+    shades: [
+      { shade: 50, hex: '#f0fdf4', name: 'green-50' },
+      { shade: 100, hex: '#dcfce7', name: 'green-100' },
+      { shade: 200, hex: '#bbf7d0', name: 'green-200' },
+      { shade: 300, hex: '#86efac', name: 'green-300' },
+      { shade: 400, hex: '#4ade80', name: 'green-400' },
+      { shade: 500, hex: '#22c55e', name: 'green-500' },
+      { shade: 600, hex: '#16a34a', name: 'green-600' },
+      { shade: 700, hex: '#15803d', name: 'green-700' },
+      { shade: 800, hex: '#166534', name: 'green-800' },
+      { shade: 900, hex: '#14532d', name: 'green-900' },
+      { shade: 950, hex: '#052e16', name: 'green-950' },
+    ],
+  },
+  {
+    name: 'emerald',
+    shades: [
+      { shade: 50, hex: '#ecfdf5', name: 'emerald-50' },
+      { shade: 100, hex: '#d1fae5', name: 'emerald-100' },
+      { shade: 200, hex: '#a7f3d0', name: 'emerald-200' },
+      { shade: 300, hex: '#6ee7b7', name: 'emerald-300' },
+      { shade: 400, hex: '#34d399', name: 'emerald-400' },
+      { shade: 500, hex: '#10b981', name: 'emerald-500' },
+      { shade: 600, hex: '#059669', name: 'emerald-600' },
+      { shade: 700, hex: '#047857', name: 'emerald-700' },
+      { shade: 800, hex: '#065f46', name: 'emerald-800' },
+      { shade: 900, hex: '#064e3b', name: 'emerald-900' },
+      { shade: 950, hex: '#022c22', name: 'emerald-950' },
+    ],
+  },
+  {
+    name: 'teal',
+    shades: [
+      { shade: 50, hex: '#f0fdfa', name: 'teal-50' },
+      { shade: 100, hex: '#ccfbf1', name: 'teal-100' },
+      { shade: 200, hex: '#99f6e4', name: 'teal-200' },
+      { shade: 300, hex: '#5eead4', name: 'teal-300' },
+      { shade: 400, hex: '#2dd4bf', name: 'teal-400' },
+      { shade: 500, hex: '#14b8a6', name: 'teal-500' },
+      { shade: 600, hex: '#0d9488', name: 'teal-600' },
+      { shade: 700, hex: '#0f766e', name: 'teal-700' },
+      { shade: 800, hex: '#115e59', name: 'teal-800' },
+      { shade: 900, hex: '#134e4a', name: 'teal-900' },
+      { shade: 950, hex: '#042f2e', name: 'teal-950' },
+    ],
+  },
+  {
+    name: 'cyan',
+    shades: [
+      { shade: 50, hex: '#ecfeff', name: 'cyan-50' },
+      { shade: 100, hex: '#cffafe', name: 'cyan-100' },
+      { shade: 200, hex: '#a5f3fc', name: 'cyan-200' },
+      { shade: 300, hex: '#67e8f9', name: 'cyan-300' },
+      { shade: 400, hex: '#22d3ee', name: 'cyan-400' },
+      { shade: 500, hex: '#06b6d4', name: 'cyan-500' },
+      { shade: 600, hex: '#0891b2', name: 'cyan-600' },
+      { shade: 700, hex: '#0e7490', name: 'cyan-700' },
+      { shade: 800, hex: '#155e75', name: 'cyan-800' },
+      { shade: 900, hex: '#164e63', name: 'cyan-900' },
+      { shade: 950, hex: '#083344', name: 'cyan-950' },
+    ],
+  },
+  {
+    name: 'sky',
+    shades: [
+      { shade: 50, hex: '#f0f9ff', name: 'sky-50' },
+      { shade: 100, hex: '#e0f2fe', name: 'sky-100' },
+      { shade: 200, hex: '#bae6fd', name: 'sky-200' },
+      { shade: 300, hex: '#7dd3fc', name: 'sky-300' },
+      { shade: 400, hex: '#38bdf8', name: 'sky-400' },
+      { shade: 500, hex: '#0ea5e9', name: 'sky-500' },
+      { shade: 600, hex: '#0284c7', name: 'sky-600' },
+      { shade: 700, hex: '#0369a1', name: 'sky-700' },
+      { shade: 800, hex: '#075985', name: 'sky-800' },
+      { shade: 900, hex: '#0c4a6e', name: 'sky-900' },
+      { shade: 950, hex: '#082f49', name: 'sky-950' },
+    ],
+  },
+  {
+    name: 'blue',
+    shades: [
+      { shade: 50, hex: '#eff6ff', name: 'blue-50' },
+      { shade: 100, hex: '#dbeafe', name: 'blue-100' },
+      { shade: 200, hex: '#bfdbfe', name: 'blue-200' },
+      { shade: 300, hex: '#93c5fd', name: 'blue-300' },
+      { shade: 400, hex: '#60a5fa', name: 'blue-400' },
+      { shade: 500, hex: '#3b82f6', name: 'blue-500' },
+      { shade: 600, hex: '#2563eb', name: 'blue-600' },
+      { shade: 700, hex: '#1d4ed8', name: 'blue-700' },
+      { shade: 800, hex: '#1e40af', name: 'blue-800' },
+      { shade: 900, hex: '#1e3a8a', name: 'blue-900' },
+      { shade: 950, hex: '#172554', name: 'blue-950' },
+    ],
+  },
+  {
+    name: 'indigo',
+    shades: [
+      { shade: 50, hex: '#eef2ff', name: 'indigo-50' },
+      { shade: 100, hex: '#e0e7ff', name: 'indigo-100' },
+      { shade: 200, hex: '#c7d2fe', name: 'indigo-200' },
+      { shade: 300, hex: '#a5b4fc', name: 'indigo-300' },
+      { shade: 400, hex: '#818cf8', name: 'indigo-400' },
+      { shade: 500, hex: '#6366f1', name: 'indigo-500' },
+      { shade: 600, hex: '#4f46e5', name: 'indigo-600' },
+      { shade: 700, hex: '#4338ca', name: 'indigo-700' },
+      { shade: 800, hex: '#3730a3', name: 'indigo-800' },
+      { shade: 900, hex: '#312e81', name: 'indigo-900' },
+      { shade: 950, hex: '#1e1b4b', name: 'indigo-950' },
+    ],
+  },
+  {
+    name: 'violet',
+    shades: [
+      { shade: 50, hex: '#f5f3ff', name: 'violet-50' },
+      { shade: 100, hex: '#ede9fe', name: 'violet-100' },
+      { shade: 200, hex: '#ddd6fe', name: 'violet-200' },
+      { shade: 300, hex: '#c4b5fd', name: 'violet-300' },
+      { shade: 400, hex: '#a78bfa', name: 'violet-400' },
+      { shade: 500, hex: '#8b5cf6', name: 'violet-500' },
+      { shade: 600, hex: '#7c3aed', name: 'violet-600' },
+      { shade: 700, hex: '#6d28d9', name: 'violet-700' },
+      { shade: 800, hex: '#5b21b6', name: 'violet-800' },
+      { shade: 900, hex: '#4c1d95', name: 'violet-900' },
+      { shade: 950, hex: '#2e1065', name: 'violet-950' },
+    ],
+  },
+  {
+    name: 'purple',
+    shades: [
+      { shade: 50, hex: '#faf5ff', name: 'purple-50' },
+      { shade: 100, hex: '#f3e8ff', name: 'purple-100' },
+      { shade: 200, hex: '#e9d5ff', name: 'purple-200' },
+      { shade: 300, hex: '#d8b4fe', name: 'purple-300' },
+      { shade: 400, hex: '#c084fc', name: 'purple-400' },
+      { shade: 500, hex: '#a855f7', name: 'purple-500' },
+      { shade: 600, hex: '#9333ea', name: 'purple-600' },
+      { shade: 700, hex: '#7e22ce', name: 'purple-700' },
+      { shade: 800, hex: '#6b21a8', name: 'purple-800' },
+      { shade: 900, hex: '#581c87', name: 'purple-900' },
+      { shade: 950, hex: '#3b0764', name: 'purple-950' },
+    ],
+  },
+  {
+    name: 'fuchsia',
+    shades: [
+      { shade: 50, hex: '#fdf4ff', name: 'fuchsia-50' },
+      { shade: 100, hex: '#fae8ff', name: 'fuchsia-100' },
+      { shade: 200, hex: '#f5d0fe', name: 'fuchsia-200' },
+      { shade: 300, hex: '#f0abfc', name: 'fuchsia-300' },
+      { shade: 400, hex: '#e879f9', name: 'fuchsia-400' },
+      { shade: 500, hex: '#d946ef', name: 'fuchsia-500' },
+      { shade: 600, hex: '#c026d3', name: 'fuchsia-600' },
+      { shade: 700, hex: '#a21caf', name: 'fuchsia-700' },
+      { shade: 800, hex: '#86198f', name: 'fuchsia-800' },
+      { shade: 900, hex: '#701a75', name: 'fuchsia-900' },
+      { shade: 950, hex: '#4a044e', name: 'fuchsia-950' },
+    ],
+  },
+  {
+    name: 'pink',
+    shades: [
+      { shade: 50, hex: '#fdf2f8', name: 'pink-50' },
+      { shade: 100, hex: '#fce7f3', name: 'pink-100' },
+      { shade: 200, hex: '#fbcfe8', name: 'pink-200' },
+      { shade: 300, hex: '#f9a8d4', name: 'pink-300' },
+      { shade: 400, hex: '#f472b6', name: 'pink-400' },
+      { shade: 500, hex: '#ec4899', name: 'pink-500' },
+      { shade: 600, hex: '#db2777', name: 'pink-600' },
+      { shade: 700, hex: '#be185d', name: 'pink-700' },
+      { shade: 800, hex: '#9d174d', name: 'pink-800' },
+      { shade: 900, hex: '#831843', name: 'pink-900' },
+      { shade: 950, hex: '#500724', name: 'pink-950' },
+    ],
+  },
+  {
+    name: 'rose',
+    shades: [
+      { shade: 50, hex: '#fff1f2', name: 'rose-50' },
+      { shade: 100, hex: '#ffe4e6', name: 'rose-100' },
+      { shade: 200, hex: '#fecdd3', name: 'rose-200' },
+      { shade: 300, hex: '#fda4af', name: 'rose-300' },
+      { shade: 400, hex: '#fb7185', name: 'rose-400' },
+      { shade: 500, hex: '#f43f5e', name: 'rose-500' },
+      { shade: 600, hex: '#e11d48', name: 'rose-600' },
+      { shade: 700, hex: '#be123c', name: 'rose-700' },
+      { shade: 800, hex: '#9f1239', name: 'rose-800' },
+      { shade: 900, hex: '#881337', name: 'rose-900' },
+      { shade: 950, hex: '#4c0519', name: 'rose-950' },
+    ],
+  },
+];