Kollektiv | Your private LLM knowledgebase

/** * Kollektiv COLOR SYSTEM * * This file defines the color system for the Query MCP UI. * * === COLOR SYSTEM RULES === * * 1. VISUAL HIERARCHY * - Background (--gray-1): Main app canvas, darkest layer * - Surface (--gray-2): Cards, panels, containers on top of background * - Surface-light (--gray-4): Hover states, active items, lightest layer * * 2. HOVER STATE RULES * - Hover uses --surface-hover (same as surface-light) * - Primary buttons: Hover uses --primary-hover (darker than primary) * - Alpha/ghost elements: Hover uses more opaque version * * 3. BUTTON VARIANT USAGE * - On Background: * * Primary: Main actions * * Secondary: Less important actions * * Outline/Ghost: Tertiary actions * - On Surface (cards, panels): * * Primary: Main actions * * Outline: Secondary actions (avoid secondary variant) * * Ghost: Tertiary actions * * 4. COLOR RELATIONSHIPS * - Primary colors have 3 states: default, hover (darker), active (darkest) * - Alpha variants follow same pattern with increasing opacity * - Border colors are typically 2-3 steps lighter than fill colors * * === COLOR DEFINITIONS === */ @import "./colors/gray.css"; @import "./colors/accent.css"; @import "./colors/blue.css"; @import "./colors/green.css"; @import "./colors/red.css"; @import "./colors/orange.css"; @import "./colors/purple.css"; @import "./colors/pink.css"; @import "./colors/teal.css"; @import "@radix-ui/colors/black-alpha.css"; :root { /** * CORE SEMANTIC COLORS * These are the foundational colors that define our dark theme * In Radix UI's dark theme, gray-1 is the darkest and gray-12 is the lightest * * Understanding the Radix Color Scale: * - Steps 1-2: App and subtle backgrounds * - Steps 3-5: Component backgrounds (normal, hover, active) * - Steps 6-8: Borders (subtle, interactive, focus) * - Steps 9-10: Solid backgrounds (normal, hover) * - Steps 11-12: Text (low-contrast, high-contrast) */ /* === BASE COLORS === */ /** * STRUCTURAL COLORS * These define the visual hierarchy of the application * Follow the pattern: background → surface → surface-light */ --color-background: var(--gray-1); /* Darkest background (main canvas) */ --color-foreground: var(--gray-12); /* Lightest text color */ --color-overlay: var(--black-a8); /* Overlay for modals, dialogs */ --color-surface: var(--gray-2); /* Cards, secondary buttons, panels */ --color-surface-translucent: var(--gray-a2); /* Semi-transparent panels */ --color-surface-light: var(--gray-4); /* Active state for items on surfaces */ --color-surface-hover: var(--gray-4); /* Hover states, same as surface light */ --color-surface-old: rgba(0, 0, 0, 0.25); /* DEPRECATED: Form inputs, interactive elements */ --color-interactive: var(--color-surface-old); /* DEPRECATED: Interactive element backgrounds */ --color-surface-hover-old: rgba(0, 0, 0, 0.15); /* DEPRECATED: Hovered UI element backgrounds */ --color-border-hover: var(--gray-8); /* Hovered UI element borders (step 8) */ /* === Shadcn/UI Mapping === */ /** * SHADCN BACKGROUND COLORS * These map our structural colors to Shadcn's naming convention */ --background: var(--color-background); /* Main app background */ --foreground: var(--color-foreground); /* Main text color */ /* Card - Background color for card components */ --card: var(--color-surface); /* Surface color for cards */ --card-foreground: var(--foreground); /* Same as main text for consistency */ /* Popover - Background color for popover components */ --popover: var(--card); /* Same as card for consistency */ --popover-foreground: var(--card-foreground); /* Same as card foreground */ /** * INTERACTIVE COLORS * These colors are used for interactive elements like buttons and links * Each has default, hover, and active states where appropriate * * Usage Examples: * - Primary: Main action buttons, active navigation items * - Secondary: Less prominent actions, alternative buttons * - Muted: Background of form controls, subtle UI elements * - Accent: Highlights, focus indicators, selected states */ /* Primary - Main action color (accent color) */ --primary: var(--accent-9); /* Bright accent color for primary actions */ --primary-hover: var(--accent-10); /* Darker accent color for hover states */ --primary-active: var(--accent-11); /* Darkest accent color for active states */ --primary-foreground: var(--gray-1); /* Dark background color for contrast */ --primary-alpha: var(--accent-a2); /* Alpha transparent color for primary actions */ --primary-alpha-hover: var(--accent-a3); /* Alpha transparent color for hover states */ --primary-alpha-foreground: var(--accent-a11); /* Light accent text for contrast */ --primary-border: var(--accent-6); /* Border color for primary actions */ /* Secondary - Used for secondary actions */ --secondary: var(--color-surface); /* Uses surface color for secondary buttons */ --secondary-foreground: var(--gray-12); /* Light text for contrast */ /* Muted - Used for less prominent UI elements */ --muted: var(--gray-3); /* Slightly darker than secondary */ --muted-foreground: var(--gray-10); /* Slightly dimmer than main text */ /* Accent - Used for highlighting elements */ --accent: var(--primary-alpha); /* Same as primary-alpha for consistency */ --accent-border: var(--accent-6); /* Used for border colors */ --accent-foreground: var(--primary-alpha-foreground); /* Light text for contrast */ /** * SEMANTIC COLORS * These colors convey specific meanings * * Usage Examples: * - Destructive: Delete buttons, error messages, critical alerts * - Warning: Caution messages, pending states, attention-required notifications * - Success: Confirmation messages, completed actions, positive feedback * - Info: Informational messages, help text, neutral notifications */ /* Destructive - Used for destructive actions (Radix equivalent: red-9) */ --destructive: var(--red-9); /* Red color for destructive actions */ --destructive-accent: var(--red-a2); /* Alpha transparent color for destructive actions */ --destructive-foreground: var(--gray-12); /* Standard white text */ /* Warning - Used for warning messages and alerts */ --warning: var(--orange-9); --warning-accent: var(--orange-a2); --warning-foreground: var(--gray-12); /* Success - Used for success messages and confirmations */ --success: var(--green-9); --success-accent: var(--green-a2); --success-foreground: var(--gray-12); /* Info - Used for informational messages and UI elements */ --info: var(--blue-9); --info-accent: var(--blue-a2); --info-foreground: var(--gray-12); /** * UI ELEMENT COLORS * These colors are used for specific UI elements * * Usage Examples: * - Border: Table cells, input fields, cards, dividers * - Input: Form control backgrounds, text inputs, textareas * - Ring: Focus indicators, selection highlights */ /* Border - Used for borders (Radix equivalent: gray-6) */ --border: var(--gray-6); /* Dark gray for borders */ --accent-border: var(--accent-6); /* Primary color border to additional accent) */ /* Input - Used for form input backgrounds (Radix equivalent: gray-3) */ --input: var(--color-interactive); /* Remapped to interactive surface */ /* Ring - Used for focus rings (Radix equivalent: accent-7) */ --ring-primary: var(--accent-6); --ring: var(--accent-6); /* Medium gray for focus rings */ /** * CHART COLORS * These colors are used for data visualizations * * Usage Examples: * - Line charts, bar charts, pie charts * - Data points, series colors, legends * - Dashboard visualizations */ --chart-1: var(--purple-9); /* Purple */ --chart-2: var(--teal-9); /* Teal */ --chart-3: var(--green-9); /* Green */ --chart-4: var(--pink-9); /* Pink */ --chart-5: var(--orange-9); /* Orange */ /** * SIDEBAR COLORS * These colors are specific to the sidebar component * * Usage Examples: * - Navigation sidebar backgrounds * - Sidebar item hover and active states * - Sidebar section dividers */ --sidebar: var(--color-surface); /* Slightly darker than main background */ --sidebar-foreground: var(--color-foreground); /* Same as main foreground */ --sidebar-primary: var(--primary); /* Primary color for sidebar */ --sidebar-primary-foreground: var(--primary-foreground); /* Dark text on sidebar primary */ --sidebar-accent: var(--color-accent); /* Same as main accent */ --sidebar-accent-foreground: var(--color-accent-foreground); /* Same as main accent foreground */ --sidebar-border: var(--gray-6); /* Same as main border */ --sidebar-ring: var(--gray-8); /* Slightly lighter than main ring */ /** * CUSTOM COLORS * These colors are specifically exported */ } /** * TAILWIND MAPPING * This maps our shadcn variables to Tailwind CSS variables for use in components * The shadcn components use these color variables in their styling */ @theme inline { /* Custom colors */ --color-overlay: var(--color-overlay); --color-accent: var(--color-accent); --color-accent-border: var(--primary-border); --color-accent-foreground: var(--color-accent-foreground); /* For interactive surfaces such inputs, buttons */ --color-surface: var(--color-surface); --color-surface-hover: var(--color-surface-hover); --color-surface-hover-light: var(--color-surface-hover-light); --color-surface-old: var(--color-surface-old); --color-surface-hover-old: var(--color-surface-hover-old); --color-border-hover: var(--color-border-hover); /* Custom colors */ /* Semantic colors */ --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-success-accent: var(--success-accent); --color-info: var(--info); --color-info-foreground: var(--info-foreground); --color-info-accent: var(--info-accent); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-warning-accent: var(--warning-accent); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-destructive-accent: var(--destructive-accent); /* Shadcn to Tailwind mapping */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-primary-hover: var(--primary-hover); --color-primary-active: var(--primary-active); --color-primary-border: var(--primary-border); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); /* Chart colors */ --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); /* Sidebar colors */ --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); }