@bbki.ng/ui 0.1.1

package/src/styles.css

@@ -0,0 +1,151 @@
+@import 'tailwindcss';
+
+/* Token CSS 变量 - 由 build-tokens 脚本生成 */
+@import './tokens/css/light.css';
+
+/* 深色主题 - 通过类名切换 */
+.dark {
+  @import './tokens/css/dark.css';
+}
+
+/* 系统偏好 */
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    @import './tokens/css/dark.css';
+  }
+}
+
+@theme inline {
+  /* Colors - 映射到生成的 CSS 变量 */
+  --color-background: var(--color-background);
+  --color-foreground: var(--color-foreground);
+  --color-muted: var(--color-muted);
+  --color-muted-foreground: var(--color-muted-foreground);
+  --color-border: var(--color-border);
+  --color-primary: var(--color-primary);
+  --color-primary-foreground: var(--color-primary-foreground);
+  --color-secondary: var(--color-secondary);
+  --color-secondary-foreground: var(--color-secondary-foreground);
+  --color-accent: var(--color-accent);
+  --color-accent-foreground: var(--color-accent-foreground);
+  --color-destructive: var(--color-destructive);
+  --color-destructive-foreground: var(--color-destructive-foreground);
+  --color-content-primary: var(--color-content-primary);
+  --color-content-secondary: var(--color-content-secondary);
+  --color-content-disabled: var(--color-content-disabled);
+  --color-content-action: var(--color-content-action);
+  --color-content-danger: var(--color-content-danger);
+  --color-content-special: var(--color-content-special);
+  --color-special: var(--color-special);
+  --color-logo: var(--color-logo);
+  --color-status-error: var(--color-status-error);
+  --color-status-warning: var(--color-status-warning);
+  --color-status-success: var(--color-status-success);
+  --color-status-info: var(--color-status-info);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+
+  /* Spacing - required for p-*, m-* utilities */
+  --spacing: var(--spacing-4);
+  --spacing-0: var(--spacing-0);
+  --spacing-1: var(--spacing-1);
+  --spacing-2: var(--spacing-2);
+  --spacing-3: var(--spacing-3);
+  --spacing-4: var(--spacing-4);
+  --spacing-5: var(--spacing-5);
+  --spacing-6: var(--spacing-6);
+  --spacing-8: var(--spacing-8);
+  --spacing-10: var(--spacing-10);
+  --spacing-12: var(--spacing-12);
+  --spacing-16: var(--spacing-16);
+  --spacing-20: var(--spacing-20);
+  --spacing-24: var(--spacing-24);
+  --spacing-32: var(--spacing-32);
+  --spacing-40: var(--spacing-40);
+  --spacing-48: var(--spacing-48);
+  --spacing-64: var(--spacing-64);
+}
+
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
+  }
+}
+
+/* Custom animations */
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 0;
+  }
+}
+
+@utility animate-ping-fast {
+  animation: blink 0.1s infinite;
+}
+
+@utility no-scrollbar {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+@utility blur-cover {
+  background-color: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(7px);
+}
+
+@utility gradient-blur-cover {
+  backdrop-filter: blur(7px);
+  background-image: linear-gradient(#ffffff, #ffffff80);
+}
+
+@utility lqip-blur {
+  backdrop-filter: blur(20px);
+}
+
+@utility animate-ping-fast {
+  animation: blink 0.1s infinite;
+}
+
+@layer utilities {
+  .prose {
+    a,
+    &:where(a):not(:where([class~='not-prose'] *)) {
+      color: rgb(37, 99, 235);
+      text-decoration: none;
+      padding: 4px;
+      border-radius: 0.25rem;
+      word-break: break-all;
+      &:hover {
+        background-color: rgb(219, 234, 254);
+      }
+
+      &:active {
+        line-height: 1;
+        display: inline-block;
+        transform: scale(0.97);
+      }
+    }
+  }
+}
+
+@utility text-blur {
+  backdrop-filter: blur(8px);
+}
+
+@utility text-blur-tiny {
+  backdrop-filter: blur(2px);
+}

package/src/theme/ThemeContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+
+export type Theme = 'light' | 'dark' | 'system';
+
+export interface ThemeContextValue {
+  theme: Theme;
+  resolvedTheme: 'light' | 'dark';
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+}
+
+export const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+export const useTheme = (): ThemeContextValue => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+  return context;
+};

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import { ThemeContext, Theme } from './ThemeContext';
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+  enableSystem?: boolean;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  defaultTheme = 'light',
+  storageKey = 'bb-ui-theme',
+  enableSystem = true,
+}) => {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem(storageKey) as Theme | null;
+      if (stored) return stored;
+    }
+    return defaultTheme;
+  });
+
+  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light');
+
+  const getSystemTheme = useCallback((): 'light' | 'dark' => {
+    if (typeof window === 'undefined') return 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }, []);
+
+  const resolveTheme = useCallback(
+    (t: Theme): 'light' | 'dark' => {
+      if (t === 'system' && enableSystem) {
+        return getSystemTheme();
+      }
+      return t === 'dark' ? 'dark' : 'light';
+    },
+    [enableSystem, getSystemTheme]
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    const resolved = resolveTheme(theme);
+
+    root.classList.remove('light', 'dark');
+    root.classList.add(resolved);
+    setResolvedTheme(resolved);
+
+    localStorage.setItem(storageKey, theme);
+  }, [theme, resolveTheme, storageKey]);
+
+  useEffect(() => {
+    if (!enableSystem) return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = () => {
+      if (theme === 'system') {
+        const resolved = getSystemTheme();
+        const root = window.document.documentElement;
+        root.classList.remove('light', 'dark');
+        root.classList.add(resolved);
+        setResolvedTheme(resolved);
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [theme, enableSystem, getSystemTheme]);
+
+  const setTheme = useCallback((newTheme: Theme) => {
+    setThemeState(newTheme);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setThemeState(prev => {
+      const resolved = resolveTheme(prev);
+      return resolved === 'light' ? 'dark' : 'light';
+    });
+  }, [resolveTheme]);
+
+  const value = useMemo(
+    () => ({
+      theme,
+      resolvedTheme,
+      setTheme,
+      toggleTheme,
+    }),
+    [theme, resolvedTheme, setTheme, toggleTheme]
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};

package/src/theme/index.ts

@@ -0,0 +1,3 @@
+export { ThemeProvider } from './ThemeProvider';
+export { useTheme, ThemeContext } from './ThemeContext';
+export type { Theme, ThemeContextValue } from './ThemeContext';

package/src/tokens/css/dark.css

@@ -0,0 +1,111 @@
+:root {
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-150: #9ca3af;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+  --color-pink-50: #fdf4f4;
+  --color-pink-100: #fbd1d2;
+  --color-pink-150: #f8babc;
+  --color-xwy-50: #fdf4f4;
+  --color-xwy-100: #fbd1d2;
+  --color-xwy-150: #f8babc;
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-background: #030712;
+  --color-foreground: #f9fafb;
+  --color-muted: #1f2937;
+  --color-muted-foreground: #9ca3af;
+  --color-border: #1f2937;
+  --color-primary: #3b82f6;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #1f2937;
+  --color-secondary-foreground: #f9fafb;
+  --color-accent: #f8babc;
+  --color-accent-foreground: #030712;
+  --color-destructive: #ef4444;
+  --color-logo: #9ca3af;
+  --color-destructive-foreground: #ffffff;
+  --color-special: #fdf4f4;
+  --color-special-foreground: #f8babc;
+  --color-content-primary: #f9fafb;
+  --color-content-secondary: #9ca3af;
+  --color-content-disabled: #6b7280;
+  --color-content-action: #000000;
+  --color-content-special: #f8babc;
+  --color-content-danger: #f87171;
+  --color-status-error: #ef4444;
+  --color-status-warning: #f87171;
+  --color-status-success: #4ade80;
+  --color-status-info: #3b82f6;
+  --shadow-none: none;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-button: 0px 15px 15px rgba(0, 0, 0, 0.1), 0px 5px 5px -2px rgba(0, 0, 0, 0.04);
+  --shadow-button-hover:
+    0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 5px 5px -2px rgba(0, 0, 0, 0.04);
+  --shadow-input:
+    inset 0px 10px 25px -15px rgba(0, 0, 0, 0.25), inset 0px 5px 10px -5px rgba(17, 24, 39, 0.2);
+  --shadow-panel: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --spacing-0: 0;
+  --spacing-1: 0.125rem;
+  --spacing-2: 0.25rem;
+  --spacing-3: 0.375rem;
+  --spacing-4: 0.5rem;
+  --spacing-5: 0.625rem;
+  --spacing-6: 0.75rem;
+  --spacing-8: 1rem;
+  --spacing-10: 1.25rem;
+  --spacing-12: 1.5rem;
+  --spacing-16: 2rem;
+  --spacing-20: 2.5rem;
+  --spacing-24: 3rem;
+  --spacing-32: 4rem;
+  --spacing-40: 5rem;
+  --spacing-48: 6rem;
+  --spacing-64: 8rem;
+  --font-sans:
+    'PT Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+}

package/src/tokens/css/light.css

@@ -0,0 +1,111 @@
+:root {
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-150: #9ca3af;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+  --color-pink-50: #fdf4f4;
+  --color-pink-100: #fbd1d2;
+  --color-pink-150: #f8babc;
+  --color-xwy-50: #fdf4f4;
+  --color-xwy-100: #fbd1d2;
+  --color-xwy-150: #f8babc;
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-background: #ffffff;
+  --color-foreground: #111827;
+  --color-muted: #f3f4f6;
+  --color-muted-foreground: #6b7280;
+  --color-border: #e5e7eb;
+  --color-primary: #2563eb;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #f3f4f6;
+  --color-secondary-foreground: #111827;
+  --color-accent: #fbd1d2;
+  --color-accent-foreground: #111827;
+  --color-destructive: #dc2626;
+  --color-destructive-foreground: #ffffff;
+  --color-special: #fdf4f4;
+  --color-logo: #9ca3af;
+  --color-special-foreground: #111827;
+  --color-content-primary: #111827;
+  --color-content-special: #f8babc;
+  --color-content-secondary: #4b5563;
+  --color-content-disabled: #9ca3af;
+  --color-content-action: #000000;
+  --color-content-danger: #ef4444;
+  --color-status-error: #dc2626;
+  --color-status-warning: #ef4444;
+  --color-status-success: #22c55e;
+  --color-status-info: #2563eb;
+  --shadow-none: none;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-button: 0px 15px 15px rgba(0, 0, 0, 0.1), 0px 5px 5px -2px rgba(0, 0, 0, 0.04);
+  --shadow-button-hover:
+    0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 5px 5px -2px rgba(0, 0, 0, 0.04);
+  --shadow-input:
+    inset 0px 10px 25px -15px rgba(0, 0, 0, 0.25), inset 0px 5px 10px -5px rgba(17, 24, 39, 0.2);
+  --shadow-panel: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --spacing-0: 0;
+  --spacing-1: 0.125rem;
+  --spacing-2: 0.25rem;
+  --spacing-3: 0.375rem;
+  --spacing-4: 0.5rem;
+  --spacing-5: 0.625rem;
+  --spacing-6: 0.75rem;
+  --spacing-8: 1rem;
+  --spacing-10: 1.25rem;
+  --spacing-12: 1.5rem;
+  --spacing-16: 2rem;
+  --spacing-20: 2.5rem;
+  --spacing-24: 3rem;
+  --spacing-32: 4rem;
+  --spacing-40: 5rem;
+  --spacing-48: 6rem;
+  --spacing-64: 8rem;
+  --font-sans:
+    'PT Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+}

package/src/tokens/index.ts

@@ -0,0 +1,127 @@
+/**
+ * Auto-generated from design tokens
+ * Do not edit manually
+ */
+export const tokens = {
+  colors: {},
+  base: {
+    color: {
+      'gray-50': 'var(--color-gray-50)',
+      'gray-100': 'var(--color-gray-100)',
+      'gray-150': 'var(--color-gray-150)',
+      'gray-200': 'var(--color-gray-200)',
+      'gray-300': 'var(--color-gray-300)',
+      'gray-400': 'var(--color-gray-400)',
+      'gray-500': 'var(--color-gray-500)',
+      'gray-600': 'var(--color-gray-600)',
+      'gray-700': 'var(--color-gray-700)',
+      'gray-800': 'var(--color-gray-800)',
+      'gray-900': 'var(--color-gray-900)',
+      'gray-950': 'var(--color-gray-950)',
+      'pink-50': 'var(--color-pink-50)',
+      'pink-100': 'var(--color-pink-100)',
+      'pink-150': 'var(--color-pink-150)',
+      'xwy-50': 'var(--color-xwy-50)',
+      'xwy-100': 'var(--color-xwy-100)',
+      'xwy-150': 'var(--color-xwy-150)',
+      'red-50': 'var(--color-red-50)',
+      'red-100': 'var(--color-red-100)',
+      'red-200': 'var(--color-red-200)',
+      'red-300': 'var(--color-red-300)',
+      'red-400': 'var(--color-red-400)',
+      'red-500': 'var(--color-red-500)',
+      'red-600': 'var(--color-red-600)',
+      'blue-50': 'var(--color-blue-50)',
+      'blue-100': 'var(--color-blue-100)',
+      'blue-500': 'var(--color-blue-500)',
+      'blue-600': 'var(--color-blue-600)',
+      white: 'var(--color-white)',
+      black: 'var(--color-black)',
+      background: 'var(--color-background)',
+      foreground: 'var(--color-foreground)',
+      muted: 'var(--color-muted)',
+      mutedForeground: 'var(--color-muted-foreground)',
+      border: 'var(--color-border)',
+      primary: 'var(--color-primary)',
+      primaryForeground: 'var(--color-primary-foreground)',
+      secondary: 'var(--color-secondary)',
+      secondaryForeground: 'var(--color-secondary-foreground)',
+      accent: 'var(--color-accent)',
+      accentForeground: 'var(--color-accent-foreground)',
+      destructive: 'var(--color-destructive)',
+      destructiveForeground: 'var(--color-destructive-foreground)',
+      special: 'var(--color-special)',
+      logo: 'var(--color-logo)',
+      specialForeground: 'var(--color-special-foreground)',
+      'content-primary': 'var(--color-content-primary)',
+      'content-special': 'var(--color-content-special)',
+      'content-secondary': 'var(--color-content-secondary)',
+      'content-disabled': 'var(--color-content-disabled)',
+      'content-action': 'var(--color-content-action)',
+      'content-danger': 'var(--color-content-danger)',
+      'status-error': 'var(--color-status-error)',
+      'status-warning': 'var(--color-status-warning)',
+      'status-success': 'var(--color-status-success)',
+      'status-info': 'var(--color-status-info)',
+    },
+    shadow: {
+      none: 'var(--shadow-none)',
+      sm: 'var(--shadow-sm)',
+      md: 'var(--shadow-md)',
+      lg: 'var(--shadow-lg)',
+      xl: 'var(--shadow-xl)',
+      button: 'var(--shadow-button)',
+      buttonHover: 'var(--shadow-button-hover)',
+      input: 'var(--shadow-input)',
+      panel: 'var(--shadow-panel)',
+    },
+    spacing: {
+      '0': 'var(--spacing-0)',
+      '1': 'var(--spacing-1)',
+      '2': 'var(--spacing-2)',
+      '3': 'var(--spacing-3)',
+      '4': 'var(--spacing-4)',
+      '5': 'var(--spacing-5)',
+      '6': 'var(--spacing-6)',
+      '8': 'var(--spacing-8)',
+      '10': 'var(--spacing-10)',
+      '12': 'var(--spacing-12)',
+      '16': 'var(--spacing-16)',
+      '20': 'var(--spacing-20)',
+      '24': 'var(--spacing-24)',
+      '32': 'var(--spacing-32)',
+      '40': 'var(--spacing-40)',
+      '48': 'var(--spacing-48)',
+      '64': 'var(--spacing-64)',
+    },
+    font: {
+      sans: 'var(--font-sans)',
+      mono: 'var(--font-mono)',
+    },
+    fontSize: {
+      xs: 'var(--font-size-xs)',
+      sm: 'var(--font-size-sm)',
+      base: 'var(--font-size-base)',
+      lg: 'var(--font-size-lg)',
+      xl: 'var(--font-size-xl)',
+      '2xl': 'var(--font-size-2xl)',
+      '3xl': 'var(--font-size-3xl)',
+      '4xl': 'var(--font-size-4xl)',
+    },
+    lineHeight: {
+      none: 'var(--line-height-none)',
+      tight: 'var(--line-height-tight)',
+      snug: 'var(--line-height-snug)',
+      normal: 'var(--line-height-normal)',
+      relaxed: 'var(--line-height-relaxed)',
+    },
+    fontWeight: {
+      normal: 'var(--font-weight-normal)',
+      medium: 'var(--font-weight-medium)',
+      semibold: 'var(--font-weight-semibold)',
+      bold: 'var(--font-weight-bold)',
+    },
+  },
+} as const;
+
+export type ThemeTokens = typeof tokens;

package/tokens/base/colors.json

@@ -0,0 +1,54 @@
+{
+  "color": {
+    "gray": {
+      "50": { "value": "#f9fafb", "type": "color" },
+      "100": { "value": "#f3f4f6", "type": "color" },
+      "150": { "value": "#9ca3af", "type": "color" },
+      "200": { "value": "#e5e7eb", "type": "color" },
+      "300": { "value": "#d1d5db", "type": "color" },
+      "400": { "value": "#9ca3af", "type": "color" },
+      "500": { "value": "#6b7280", "type": "color" },
+      "600": { "value": "#4b5563", "type": "color" },
+      "700": { "value": "#374151", "type": "color" },
+      "800": { "value": "#1f2937", "type": "color" },
+      "900": { "value": "#111827", "type": "color" },
+      "950": { "value": "#030712", "type": "color" }
+    },
+    "pink": {
+      "50": { "value": "#fdf4f4", "type": "color" },
+      "100": { "value": "#fbd1d2", "type": "color" },
+      "150": { "value": "#f8babc", "type": "color" }
+    },
+    "xwy": {
+      "50": {
+        "value": "#fdf4f4",
+        "type": "color"
+      },
+      "100": {
+        "value": "#fbd1d2",
+        "type": "color"
+      },
+      "150": {
+        "value": "#f8babc",
+        "type": "color"
+      }
+    },
+    "red": {
+      "50": { "value": "#fef2f2", "type": "color" },
+      "100": { "value": "#fee2e2", "type": "color" },
+      "200": { "value": "#fecaca", "type": "color" },
+      "300": { "value": "#fca5a5", "type": "color" },
+      "400": { "value": "#f87171", "type": "color" },
+      "500": { "value": "#ef4444", "type": "color" },
+      "600": { "value": "#dc2626", "type": "color" }
+    },
+    "blue": {
+      "50": { "value": "#eff6ff", "type": "color" },
+      "100": { "value": "#dbeafe", "type": "color" },
+      "500": { "value": "#3b82f6", "type": "color" },
+      "600": { "value": "#2563eb", "type": "color" }
+    },
+    "white": { "value": "#ffffff", "type": "color" },
+    "black": { "value": "#000000", "type": "color" }
+  }
+}