mcpsystem.design MCP Server

@import "tailwindcss"; /* Enable dark mode via class strategy */ @custom-variant dark (&:where(.dark, .dark *)); /* Ensure Tailwind scans component data files */ @source "../lib/design-system/components.ts"; /* Safelist classes used in component examples rendered via dangerouslySetInnerHTML */ /* Note: Custom semantic utilities (bg-surface, text-default, etc.) are defined in @layer utilities below */ @utility safelist { /* Raw Tailwind classes (for backward compatibility in component examples) */ @apply bg-black bg-white bg-gray-50 bg-gray-100 bg-gray-200 bg-gray-800 bg-gray-900; @apply bg-red-50 bg-red-500 bg-red-600 bg-blue-500 bg-blue-600 bg-green-500 bg-green-600; @apply bg-yellow-50 bg-yellow-500 bg-orange-500 bg-purple-500 bg-pink-500; @apply bg-emerald-500 bg-emerald-50 bg-amber-50 bg-amber-500; @apply text-white text-black text-gray-400 text-gray-500 text-gray-600 text-gray-700 text-gray-900; @apply text-red-500 text-red-600 text-red-800 text-blue-500 text-blue-600 text-green-500 text-green-600; @apply text-yellow-500 text-yellow-600 text-yellow-800 text-amber-600 text-emerald-600; @apply border-gray-200 border-gray-300 border-gray-400 border-red-200 border-red-500; @apply border-blue-200 border-blue-500 border-green-200 border-green-500 border-yellow-200; @apply hover:bg-gray-50 hover:bg-gray-100 hover:bg-gray-200 hover:bg-gray-800; @apply hover:bg-red-50 hover:bg-red-600 hover:bg-blue-600 hover:bg-green-600; @apply hover:border-gray-300 hover:border-gray-400 hover:text-gray-900; /* Layout and sizing */ @apply rounded-md rounded-lg rounded-xl rounded-full; @apply h-4 h-5 h-6 h-8 h-10 h-12 h-16 h-20 h-24 h-32 h-40 h-48 h-64; @apply w-4 w-5 w-6 w-8 w-10 w-12 w-16 w-20 w-24 w-32 w-40 w-48 w-64 w-full; @apply px-2 px-3 px-4 px-5 px-6 py-1 py-2 py-3 py-4; @apply gap-1 gap-2 gap-3 gap-4 gap-6 gap-8; /* Typography */ @apply text-xs text-sm text-base text-lg text-xl text-2xl text-3xl; @apply font-normal font-medium font-semibold font-bold; /* Effects and states */ @apply opacity-25 opacity-50 opacity-70 opacity-75; @apply cursor-not-allowed cursor-pointer; @apply animate-spin animate-pulse animate-bounce; @apply shadow-sm shadow shadow-md shadow-lg; @apply ring-1 ring-2 ring-gray-200 ring-blue-500 ring-offset-2; @apply divide-y divide-gray-200; @apply space-x-2 space-x-4 space-y-2 space-y-4; @apply truncate line-clamp-2 line-clamp-3; @apply aspect-square aspect-video; @apply object-cover object-contain; @apply overflow-hidden overflow-auto overflow-x-auto; @apply transition-colors transition-all transition-transform; @apply duration-150 duration-200 duration-300; @apply translate-y-0 translate-y-1 -translate-y-1; @apply scale-95 scale-100 scale-105; /* Dark mode fallback classes (for non-semantic usage) */ @apply dark:bg-gray-900 dark:bg-gray-800 dark:bg-gray-950; @apply dark:text-white dark:text-gray-100 dark:text-gray-300 dark:text-gray-400; @apply dark:border-gray-700 dark:border-gray-800; @apply dark:hover:bg-gray-800 dark:hover:bg-gray-700; } @theme { --font-sans: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Menlo", monospace; /* =================================== * COLOR TOKENS FROM DESIGN SYSTEM * Source: lib/design-system/style-guide.ts * These are generated from the documented design tokens * =================================== */ /* ----------------------------------- * SURFACE TOKENS * ----------------------------------- */ --color-surface-light: #ffffff; --color-surface-dark: #030712; --color-surface: var(--color-surface-light); --color-surface-raised-light: #ffffff; --color-surface-raised-dark: #111827; --color-surface-raised: var(--color-surface-raised-light); --color-surface-sunken-light: #f9fafb; --color-surface-sunken-dark: #030712; --color-surface-sunken: var(--color-surface-sunken-light); --color-surface-overlay-light: rgba(0, 0, 0, 0.5); --color-surface-overlay-dark: rgba(0, 0, 0, 0.7); --color-surface-overlay: var(--color-surface-overlay-light); --color-surface-hover-light: #f9fafb; --color-surface-hover-dark: #1f2937; --color-surface-hover: var(--color-surface-hover-light); /* ----------------------------------- * TEXT TOKENS * ----------------------------------- */ --color-text-light: #111827; --color-text-dark: #f9fafb; --color-text: var(--color-text-light); --color-text-muted-light: #6b7280; --color-text-muted-dark: #9ca3af; --color-text-muted: var(--color-text-muted-light); --color-text-subtle-light: #9ca3af; --color-text-subtle-dark: #6b7280; --color-text-subtle: var(--color-text-subtle-light); /* ----------------------------------- * BORDER TOKENS * ----------------------------------- */ --color-border-light: #e5e7eb; --color-border-dark: #1f2937; --color-border: var(--color-border-light); --color-border-muted-light: #f3f4f6; --color-border-muted-dark: #111827; --color-border-muted: var(--color-border-muted-light); --color-border-emphasis-light: #d1d5db; --color-border-emphasis-dark: #374151; --color-border-emphasis: var(--color-border-emphasis-light); /* ----------------------------------- * PRIMARY TOKENS * ----------------------------------- */ --color-primary-light: #000000; --color-primary-dark: #ffffff; --color-primary: var(--color-primary-light); --color-primary-hover-light: #1f2937; --color-primary-hover-dark: #e5e7eb; --color-primary-hover: var(--color-primary-hover-light); --color-primary-foreground-light: #ffffff; --color-primary-foreground-dark: #000000; --color-primary-foreground: var(--color-primary-foreground-light); /* ----------------------------------- * SUCCESS TOKENS * ----------------------------------- */ --color-success-light: #ecfdf5; --color-success-dark: rgba(16, 185, 129, 0.15); --color-success: var(--color-success-light); --color-success-emphasis-light: #10b981; --color-success-emphasis-dark: #10b981; --color-success-emphasis: var(--color-success-emphasis-light); --color-success-foreground-light: #065f46; --color-success-foreground-dark: #6ee7b7; --color-success-foreground: var(--color-success-foreground-light); --color-success-border-light: #a7f3d0; --color-success-border-dark: #065f46; --color-success-border: var(--color-success-border-light); /* ----------------------------------- * ERROR TOKENS * ----------------------------------- */ --color-error-light: #fef2f2; --color-error-dark: rgba(239, 68, 68, 0.15); --color-error: var(--color-error-light); --color-error-emphasis-light: #ef4444; --color-error-emphasis-dark: #ef4444; --color-error-emphasis: var(--color-error-emphasis-light); --color-error-foreground-light: #991b1b; --color-error-foreground-dark: #fca5a5; --color-error-foreground: var(--color-error-foreground-light); --color-error-border-light: #fecaca; --color-error-border-dark: #991b1b; --color-error-border: var(--color-error-border-light); /* ----------------------------------- * WARNING TOKENS * ----------------------------------- */ --color-warning-light: #fffbeb; --color-warning-dark: rgba(245, 158, 11, 0.15); --color-warning: var(--color-warning-light); --color-warning-emphasis-light: #f59e0b; --color-warning-emphasis-dark: #f59e0b; --color-warning-emphasis: var(--color-warning-emphasis-light); --color-warning-foreground-light: #92400e; --color-warning-foreground-dark: #fcd34d; --color-warning-foreground: var(--color-warning-foreground-light); --color-warning-border-light: #fde68a; --color-warning-border-dark: #92400e; --color-warning-border: var(--color-warning-border-light); /* ----------------------------------- * INFO TOKENS * ----------------------------------- */ --color-info-light: #eff6ff; --color-info-dark: rgba(59, 130, 246, 0.15); --color-info: var(--color-info-light); --color-info-emphasis-light: #3b82f6; --color-info-emphasis-dark: #3b82f6; --color-info-emphasis: var(--color-info-emphasis-light); --color-info-foreground-light: #1e40af; --color-info-foreground-dark: #93c5fd; --color-info-foreground: var(--color-info-foreground-light); --color-info-border-light: #bfdbfe; --color-info-border-dark: #1e40af; --color-info-border: var(--color-info-border-light); } /* Apply dark mode variables */ .dark { /* Surfaces */ --color-surface: var(--color-surface-dark); --color-surface-raised: var(--color-surface-raised-dark); --color-surface-sunken: var(--color-surface-sunken-dark); --color-surface-overlay: var(--color-surface-overlay-dark); --color-surface-hover: var(--color-surface-hover-dark); /* Text */ --color-text: var(--color-text-dark); --color-text-muted: var(--color-text-muted-dark); --color-text-subtle: var(--color-text-subtle-dark); /* Borders */ --color-border: var(--color-border-dark); --color-border-muted: var(--color-border-muted-dark); --color-border-emphasis: var(--color-border-emphasis-dark); /* Primary */ --color-primary: var(--color-primary-dark); --color-primary-hover: var(--color-primary-hover-dark); --color-primary-foreground: var(--color-primary-foreground-dark); /* Success */ --color-success: var(--color-success-dark); --color-success-foreground: var(--color-success-foreground-dark); --color-success-border: var(--color-success-border-dark); /* Error */ --color-error: var(--color-error-dark); --color-error-foreground: var(--color-error-foreground-dark); --color-error-border: var(--color-error-border-dark); /* Warning */ --color-warning: var(--color-warning-dark); --color-warning-foreground: var(--color-warning-foreground-dark); --color-warning-border: var(--color-warning-border-dark); /* Info */ --color-info: var(--color-info-dark); --color-info-foreground: var(--color-info-foreground-dark); --color-info-border: var(--color-info-border-dark); } /* Custom base styles */ @layer base { html { scroll-behavior: smooth; overflow-x: hidden; } body { @apply antialiased; overflow-x: hidden; } } /* Custom component styles */ @layer components { .nav-link { @apply px-3 py-2 text-sm transition-colors rounded-lg; color: var(--color-text-muted); } .nav-link:hover { color: var(--color-text); } .nav-link-active { @apply px-3 py-2 text-sm font-medium rounded-lg; color: var(--color-text); background-color: var(--color-surface-hover); } .sidebar-category { @apply px-3 py-2 text-xs font-semibold uppercase tracking-wider; color: var(--color-text-subtle); } /* Preview container - forces light mode for component examples */ .preview-container { /* Surfaces */ --color-surface: var(--color-surface-light); --color-surface-raised: var(--color-surface-raised-light); --color-surface-sunken: var(--color-surface-sunken-light); --color-surface-overlay: var(--color-surface-overlay-light); --color-surface-hover: var(--color-surface-hover-light); /* Text */ --color-text: var(--color-text-light); --color-text-muted: var(--color-text-muted-light); --color-text-subtle: var(--color-text-subtle-light); /* Borders */ --color-border: var(--color-border-light); --color-border-muted: var(--color-border-muted-light); --color-border-emphasis: var(--color-border-emphasis-light); /* Primary */ --color-primary: var(--color-primary-light); --color-primary-hover: var(--color-primary-hover-light); --color-primary-foreground: var(--color-primary-foreground-light); /* State colors */ --color-success: var(--color-success-light); --color-success-foreground: var(--color-success-foreground-light); --color-success-border: var(--color-success-border-light); --color-error: var(--color-error-light); --color-error-foreground: var(--color-error-foreground-light); --color-error-border: var(--color-error-border-light); --color-warning: var(--color-warning-light); --color-warning-foreground: var(--color-warning-foreground-light); --color-warning-border: var(--color-warning-border-light); --color-info: var(--color-info-light); --color-info-foreground: var(--color-info-foreground-light); --color-info-border: var(--color-info-border-light); color-scheme: light; } /* Dark preview container - forces dark mode for component examples */ .preview-container-dark { /* Surfaces */ --color-surface: var(--color-surface-dark); --color-surface-raised: var(--color-surface-raised-dark); --color-surface-sunken: var(--color-surface-sunken-dark); --color-surface-overlay: var(--color-surface-overlay-dark); --color-surface-hover: var(--color-surface-hover-dark); /* Text */ --color-text: var(--color-text-dark); --color-text-muted: var(--color-text-muted-dark); --color-text-subtle: var(--color-text-subtle-dark); /* Borders */ --color-border: var(--color-border-dark); --color-border-muted: var(--color-border-muted-dark); --color-border-emphasis: var(--color-border-emphasis-dark); /* Primary */ --color-primary: var(--color-primary-dark); --color-primary-hover: var(--color-primary-hover-dark); --color-primary-foreground: var(--color-primary-foreground-dark); /* State colors */ --color-success: var(--color-success-dark); --color-success-foreground: var(--color-success-foreground-dark); --color-success-border: var(--color-success-border-dark); --color-error: var(--color-error-dark); --color-error-foreground: var(--color-error-foreground-dark); --color-error-border: var(--color-error-border-dark); --color-warning: var(--color-warning-dark); --color-warning-foreground: var(--color-warning-foreground-dark); --color-warning-border: var(--color-warning-border-dark); --color-info: var(--color-info-dark); --color-info-foreground: var(--color-info-foreground-dark); --color-info-border: var(--color-info-border-dark); color-scheme: dark; } } /* Utility classes using semantic colors */ @layer utilities { /* ----------------------------------- * SURFACE UTILITIES * ----------------------------------- */ .bg-surface { background-color: var(--color-surface); } .bg-surface-raised { background-color: var(--color-surface-raised); } .bg-surface-sunken { background-color: var(--color-surface-sunken); } .bg-surface-overlay { background-color: var(--color-surface-overlay); } .bg-surface-hover { background-color: var(--color-surface-hover); } .hover\:bg-surface-hover:hover { background-color: var(--color-surface-hover); } /* ----------------------------------- * TEXT UTILITIES * ----------------------------------- */ .text-default { color: var(--color-text); } .text-muted { color: var(--color-text-muted); } .text-subtle { color: var(--color-text-subtle); } /* ----------------------------------- * BORDER UTILITIES * ----------------------------------- */ .border-default { border-color: var(--color-border); } .border-muted { border-color: var(--color-border-muted); } .border-emphasis { border-color: var(--color-border-emphasis); } /* ----------------------------------- * PRIMARY UTILITIES * ----------------------------------- */ .bg-primary { background-color: var(--color-primary); } .bg-primary-hover { background-color: var(--color-primary-hover); } .hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover); } .text-primary { color: var(--color-primary); } .text-primary-foreground { color: var(--color-primary-foreground); } /* ----------------------------------- * SUCCESS UTILITIES * ----------------------------------- */ .bg-success { background-color: var(--color-success); } .bg-success-emphasis { background-color: var(--color-success-emphasis); } .text-success { color: var(--color-success-emphasis); } .text-success-foreground { color: var(--color-success-foreground); } .border-success { border-color: var(--color-success-border); } /* ----------------------------------- * ERROR UTILITIES * ----------------------------------- */ .bg-error { background-color: var(--color-error); } .bg-error-emphasis { background-color: var(--color-error-emphasis); } .text-error { color: var(--color-error-emphasis); } .text-error-foreground { color: var(--color-error-foreground); } .border-error { border-color: var(--color-error-border); } /* ----------------------------------- * WARNING UTILITIES * ----------------------------------- */ .bg-warning { background-color: var(--color-warning); } .bg-warning-emphasis { background-color: var(--color-warning-emphasis); } .text-warning { color: var(--color-warning-emphasis); } .text-warning-foreground { color: var(--color-warning-foreground); } .border-warning { border-color: var(--color-warning-border); } /* ----------------------------------- * INFO UTILITIES * ----------------------------------- */ .bg-info { background-color: var(--color-info); } .bg-info-emphasis { background-color: var(--color-info-emphasis); } .text-info { color: var(--color-info-emphasis); } .text-info-foreground { color: var(--color-info-foreground); } .border-info { border-color: var(--color-info-border); } /* ----------------------------------- * COMPOUND ALERT UTILITIES * ----------------------------------- */ .alert-success { background-color: var(--color-success); color: var(--color-success-foreground); border-color: var(--color-success-border); } .alert-error { background-color: var(--color-error); color: var(--color-error-foreground); border-color: var(--color-error-border); } .alert-warning { background-color: var(--color-warning); color: var(--color-warning-foreground); border-color: var(--color-warning-border); } .alert-info { background-color: var(--color-info); color: var(--color-info-foreground); border-color: var(--color-info-border); } }