/** * FlowDrop Design Tokens * * A semantic-first token system with three tiers: * 1. Internal palette (--_*) - Raw color values, not documented for users * 2. Semantic tokens (--fd-*) - The public API for theming * 3. Component tokens - Built using semantic tokens * * Users customize FlowDrop by overriding --fd-* tokens. * * @example Quick theming * :root { * --fd-primary: #8b5cf6; * --fd-primary-hover: #7c3aed; * --fd-radius-md: 0.5rem; * } * * ============================================================================= * THEMING CONTRACT * ============================================================================= * * Tokens in this file are annotated with one of two stability markers: * * @public — Stable API. These tokens are safe to override in consumer * stylesheets. Breaking changes to public tokens are only made * in major (semver) releases and are announced in the changelog. * * @internal — Private implementation detail. These tokens may be renamed, * removed, or have their values changed in any release without * notice. Do NOT reference them in consumer stylesheets. * * Overriding tokens * ----------------- * Override @public tokens by targeting `:root` in your own stylesheet: * * :root { * --fd-primary: #7c3aed; * --fd-radius-md: 8px; * } * * Dark mode support * ----------------- * FlowDrop respects `data-theme="dark"` on the element. Override the * same @public tokens inside `[data-theme="dark"]` to customise dark mode: * * [data-theme="dark"] { * --fd-primary: #a78bfa; * } * * Token categories * ---------------- * @public tokens include: * - Semantic surface tokens: --fd-surface-*, --fd-background, --fd-foreground, * --fd-muted*, --fd-card*, --fd-header* * - Border tokens: --fd-border-*, --fd-ring * - Primary/brand tokens: --fd-primary-*, --fd-secondary-*, --fd-accent-* * - Status tokens: --fd-success-*, --fd-warning-*, --fd-error-*, * --fd-info-* * - Text/font-size tokens: --fd-text-* * - Spacing tokens: --fd-space-* * - Border-radius tokens: --fd-radius-* * - Shadow tokens: --fd-shadow-* * - Component tokens: --fd-node-*, --fd-edge-*, --fd-handle-* * * @internal tokens include: * - Raw palette values: --_gray-*, --_blue-*, --_green-*, --_red-*, * --_amber-*, --_violet-* * (Any token prefixed with --_ is internal by convention.) * ============================================================================= */ :root { /* ========================================================================= INTERNAL PALETTE (Private - not documented for users) Prefix: --_ indicates internal/private tokens @internal — Do NOT override these in consumer stylesheets. ========================================================================= */ /* Grays - Tinted scale with subtle blue undertone for modern feel, 9 steps */ --_gray-1: #fafafc; /* @internal */ --_gray-2: #f5f5f8; /* @internal */ --_gray-3: #eaeaef; /* @internal */ --_gray-4: #dcdce4; /* @internal */ --_gray-5: #a3a3ad; /* @internal */ --_gray-6: #71717b; /* @internal */ --_gray-7: #52525c; /* @internal */ --_gray-8: #27272b; /* @internal */ --_gray-9: #18181c; /* @internal */ /* Blue - Primary/interactive color */ --_blue-1: #eff6ff; /* @internal */ --_blue-2: #3b82f6; /* @internal */ --_blue-3: #1d4ed8; /* @internal */ /* Green - Success states */ --_green-1: #f0fdf4; /* @internal */ --_green-2: #22c55e; /* @internal */ --_green-3: #15803d; /* @internal */ /* Red - Error/destructive states */ --_red-1: #fef2f2; /* @internal */ --_red-2: #ef4444; /* @internal */ --_red-3: #b91c1c; /* @internal */ /* Amber - Warning states */ --_amber-1: #fffbeb; /* @internal */ --_amber-2: #f59e0b; /* @internal */ --_amber-3: #b45309; /* @internal */ /* Violet - Selection/accent */ --_violet-1: #f5f3ff; /* @internal */ --_violet-2: #8b5cf6; /* @internal */ --_violet-3: #6d28d9; /* @internal */ /* ========================================================================= SEMANTIC TOKENS (Public API) These are the tokens users override for theming. @public — All tokens in this section are safe to override. ========================================================================= */ /* ----- SURFACES (Backgrounds) ----- */ --fd-background: #ffffff; /* @public */ --fd-foreground: var(--_gray-9); /* @public */ --fd-muted: #f8f8fb; /* @public */ --fd-muted-foreground: var(--_gray-6); /* @public */ --fd-subtle: #f0f0f5; /* @public */ --fd-card: #ffffff; /* @public */ --fd-card-foreground: var(--_gray-9); /* @public */ /* ----- HEADER (Distinct header styling) ----- */ --fd-header: #f5f7fa; /* @public */ --fd-header-foreground: var(--_gray-8); /* @public */ --fd-header-gradient: linear-gradient(180deg, #f8f9fc 0%, #f4f5f8 100%); /* @public */ /* ----- SURFACE TINT (Subtle accent for surfaces) ----- */ --fd-surface-tint: rgba(99, 102, 241, 0.02); /* @public */ /* ----- BORDERS ----- */ --fd-border: var(--_gray-4); /* @public */ --fd-border-muted: var(--_gray-3); /* @public */ --fd-border-strong: var(--_gray-5); /* @public */ --fd-ring: var(--_blue-2); /* @public */ /* ----- NODE BORDERS (Higher contrast for visibility when zoomed out) ----- */ --fd-node-border: var(--_gray-5); /* @public */ --fd-node-border-hover: var(--_gray-6); /* @public */ /* ----- PRIMARY (Interactive/Brand) ----- */ --fd-primary: var(--_blue-2); /* @public */ --fd-primary-hover: var(--_blue-3); /* @public */ --fd-primary-foreground: #ffffff; /* @public */ --fd-primary-muted: var(--_blue-1); /* @public */ /* ----- SECONDARY ----- */ --fd-secondary: var(--_gray-2); /* @public */ --fd-secondary-hover: var(--_gray-3); /* @public */ --fd-secondary-foreground: var(--_gray-9); /* @public */ /* ----- ACCENT ----- */ --fd-accent: var(--_violet-2); /* @public */ --fd-accent-hover: var(--_violet-3); /* @public */ --fd-accent-foreground: #ffffff; /* @public */ --fd-accent-muted: var(--_violet-1); /* @public */ /* ----- STATUS: SUCCESS ----- */ --fd-success: var(--_green-2); /* @public */ --fd-success-hover: var(--_green-3); /* @public */ --fd-success-foreground: #ffffff; /* @public */ --fd-success-muted: var(--_green-1); /* @public */ /* ----- STATUS: WARNING ----- */ --fd-warning: var(--_amber-2); /* @public */ --fd-warning-hover: var(--_amber-3); /* @public */ --fd-warning-foreground: var(--_gray-9); /* @public */ --fd-warning-muted: var(--_amber-1); /* @public */ /* ----- STATUS: ERROR/DESTRUCTIVE ----- */ --fd-error: var(--_red-2); /* @public */ --fd-error-hover: var(--_red-3); /* @public */ --fd-error-foreground: #ffffff; /* @public */ --fd-error-muted: var(--_red-1); /* @public */ /* ----- STATUS: INFO ----- */ --fd-info: var(--_blue-2); /* @public */ --fd-info-hover: var(--_blue-3); /* @public */ --fd-info-foreground: #ffffff; /* @public */ --fd-info-muted: var(--_blue-1); /* @public */ /* ----- SPACING SCALE (Named sizes) ----- */ --fd-space-0: 0; /* @public */ --fd-space-3xs: 0.25rem; /* @public 4px */ --fd-space-2xs: 0.375rem; /* @public 6px */ --fd-space-xs: 0.5rem; /* @public 8px */ --fd-space-sm: 0.625rem; /* @public 10px */ --fd-space-md: 0.75rem; /* @public 12px */ --fd-space-lg: 0.875rem; /* @public 14px */ --fd-space-xl: 1rem; /* @public 16px */ --fd-space-2xl: 1.25rem; /* @public 20px */ --fd-space-3xl: 1.5rem; /* @public 24px */ --fd-space-4xl: 2rem; /* @public 32px */ --fd-space-5xl: 2.5rem; /* @public 40px */ --fd-space-6xl: 3rem; /* @public 48px */ --fd-space-7xl: 4rem; /* @public 64px */ /* ----- BORDER RADIUS ----- */ --fd-radius-none: 0; /* @public */ --fd-radius-sm: 0.25rem; /* @public 4px */ --fd-radius-md: 0.375rem; /* @public 6px */ --fd-radius-lg: 0.5rem; /* @public 8px */ --fd-radius-xl: 0.75rem; /* @public 12px */ --fd-radius-2xl: 1rem; /* @public 16px */ --fd-radius-full: 9999px; /* @public */ /* ----- SHADOWS (Refined layered shadows for modern depth) ----- */ --fd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06); /* @public */ --fd-shadow-md: 0 4px 8px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04); /* @public */ --fd-shadow-lg: 0 10px 20px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.04); /* @public */ --fd-shadow-xl: 0 20px 30px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.06); /* @public */ /* ----- FONT SIZES ----- */ --fd-text-2xs: 0.6875rem; /* @public 11px */ --fd-text-xs: 0.75rem; /* @public 12px */ --fd-text-xsm: 0.8125rem; /* @public 13px */ --fd-text-sm: 0.875rem; /* @public 14px */ --fd-text-md: 0.9375rem; /* @public 15px */ --fd-text-base: 1rem; /* @public 16px */ --fd-text-lg: 1.125rem; /* @public 18px */ --fd-text-xl: 1.25rem; /* @public 20px */ --fd-text-2xl: 1.5rem; /* @public 24px */ /* ----- LINE HEIGHTS ----- */ --fd-leading-tight: 1.4; /* @public */ --fd-leading-normal: 1.5; /* @public */ --fd-leading-relaxed: 1.6; /* @public */ /* ----- FONT FAMILIES ----- */ --fd-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* @public */ /* ----- COMPONENT SIZES ----- */ --fd-size-icon-btn: 1.75rem; /* @internal 28px — may change with component redesigns */ --fd-size-btn-min: 2.5rem; /* @internal 40px — may change with component redesigns */ --fd-size-avatar: 2.25rem; /* @internal 36px — may change with component redesigns */ --fd-size-spinner: 1rem; /* @internal 16px — may change with component redesigns */ /* ----- TRANSITIONS ----- */ --fd-transition-fast: 150ms ease; /* @public */ --fd-transition-normal: 200ms ease; /* @public */ --fd-transition-slow: 300ms ease; /* @public */ /* ========================================================================= COMPONENT TOKENS These provide fine-grained control while defaulting to semantic tokens. @public tokens in this section are safe to override. @internal tokens may change without notice. ========================================================================= */ /* ----- LAYOUT ----- */ --fd-sidebar-width: 320px; /* @internal — controlled programmatically */ --fd-navbar-height: 60px; /* @internal — controlled programmatically */ --fd-toolbar-height: 40px; /* @internal — controlled programmatically */ /* ----- NODE COLORS (for workflow editor) ----- */ --fd-node-emerald: #10b981; /* @public */ --fd-node-blue: #2563eb; /* @public */ --fd-node-amber: #f59e0b; /* @public */ --fd-node-orange: #f97316; /* @public */ --fd-node-red: #ef4444; /* @public */ --fd-node-pink: #ec4899; /* @public */ --fd-node-indigo: #6366f1; /* @public */ --fd-node-teal: #14b8a6; /* @public */ --fd-node-cyan: #06b6d4; /* @public */ --fd-node-lime: #84cc16; /* @public */ --fd-node-slate: #64748b; /* @public */ --fd-node-purple: #9333ea; /* @public */ /** Icon on node squircle: dark in light theme, white in dark theme */ --fd-node-icon: var(--_gray-9); /* @public */ /** Opacity of the icon squircle background (color-mix percentage). Light mode: 15% / 22% hover; dark mode uses higher values. */ --fd-node-icon-bg-opacity: 20%; /* @public */ --fd-node-icon-bg-opacity-hover: 50%; /* @public */ /* ----- EDGE TOKENS ----- */ --fd-edge-trigger: var(--_gray-9); /* @public */ --fd-edge-trigger-hover: var(--_gray-9); /* @public */ --fd-edge-trigger-selected: var(--_violet-2); /* @public */ --fd-edge-trigger-width: 2px; /* @public */ --fd-edge-trigger-width-hover: 3px; /* @public */ --fd-edge-tool: var(--_amber-2); /* @public */ --fd-edge-tool-hover: var(--_amber-3); /* @public */ --fd-edge-tool-selected: var(--_violet-2); /* @public */ --fd-edge-data: var(--_gray-5); /* @public */ --fd-edge-data-hover: var(--_gray-6); /* @public */ --fd-edge-data-selected: var(--_violet-2); /* @public */ --fd-edge-loopback: var(--_gray-6); /* @public */ --fd-edge-loopback-hover: var(--_gray-7); /* @public */ --fd-edge-loopback-selected: var(--_violet-2); /* @public */ --fd-edge-loopback-width: 1.5px; /* @public */ --fd-edge-loopback-width-hover: 2.5px; /* @public */ --fd-edge-loopback-dasharray: 5 5; /* @public */ --fd-edge-loopback-opacity: 0.85; /* @public */ /* ----- SCROLLBAR COLORS ----- */ --fd-scrollbar-thumb: var(--_gray-4); /* @internal */ --fd-scrollbar-thumb-hover: var(--_gray-5); /* @internal */ --fd-scrollbar-track: var(--_gray-2); /* @internal */ /* ----- BACKDROP/OVERLAY ----- */ --fd-backdrop: rgba(255, 255, 255, 0.8); /* @internal */ --fd-backdrop-blur: blur(8px); /* @internal */ /* ----- HANDLE (Node connection points) ----- */ /* White ring around handles for contrast against node backgrounds */ --fd-handle-border: #ffffff; /* @public */ /* Outer size = connection/hit area (px); visual = visible circle (px) */ --fd-handle-size: 20px; /* @public */ --fd-handle-visual-size: 12px; /* @public */ --fd-handle-offset: calc( -1 * var(--fd-handle-size) / 2 ); /* @internal — half handle size for edge positioning */ /* ----- NODE LAYOUT (Dimensions and port alignment; multiples of 10 for grid) ----- */ --fd-node-grid-step: 10; /* @internal — layout algorithm detail */ --fd-node-default-width: 290px; /* @public */ --fd-node-header-height: 60px; /* @public */ --fd-node-header-title-height: 40px; /* @internal */ --fd-node-header-desc-line: 20px; /* @internal */ --fd-node-header-gap: 10px; /* @internal */ --fd-node-port-row-height: 20px; /* @internal */ --fd-node-terminal-size: 80px; /* @public */ --fd-node-square-size: 80px; /* @public */ --fd-node-simple-height: 80px; /* @public */ --fd-node-tool-min-height: 80px; /* @public */ /* ----- LAYOUT BACKGROUND (Main content area gradient) ----- */ --fd-layout-background: linear-gradient( 135deg, #f9fafb 0%, #e0e7ff 50%, #c7d2fe 100% ); /* @public */ /* ----- SKIN DISPLAY CONTROL TOKENS ----- */ /* @public — override these in a skin's tokens dict to toggle visual variants */ --fd-node-icon-display: flex; /* @public show squircle icon wrapper */ --fd-node-circle-display: none; /* @public hide circle dot */ --fd-sidebar-search-display: flex; /* @public show sidebar search input */ --fd-sidebar-header-display: flex; /* @public show sidebar "Components" header */ --fd-sidebar-card-display: block; /* @public show accordion card node list */ --fd-sidebar-flat-display: none; /* @public hide flat dot-name node list */ --fd-sidebar-category-color: var(--fd-muted-foreground); /* @public category header text color */ --fd-sidebar-flat-item-color: var(--fd-foreground); /* @public flat list item text color */ --fd-navbar-split-display: none; /* @public show all actions as separate buttons */ --fd-navbar-dropdown-display: flex; /* @public show primary-action + dropdown chevron */ } /* ========================================================================= DARK MODE Users enable with: Designed for softer contrast and reduced eye strain ========================================================================= */ [data-theme='dark'] { /* ----- SURFACES (Backgrounds) - Softer contrast ----- */ --fd-background: #1a1a1e; --fd-foreground: var(--_gray-2); --fd-muted: #242428; --fd-muted-foreground: var(--_gray-4); --fd-subtle: #2a2a30; --fd-card: #222226; --fd-card-foreground: var(--_gray-2); /* ----- HEADER (Distinct header styling for dark mode) ----- */ --fd-header: #1f1f24; --fd-header-foreground: var(--_gray-3); --fd-header-gradient: linear-gradient(180deg, #222228 0%, #1e1e24 100%); /* ----- SURFACE TINT (Subtle accent for surfaces) ----- */ --fd-surface-tint: rgba(99, 102, 241, 0.03); /* ----- HANDLE (Node connection points) ----- */ /* White ring around handles provides contrast on dark node backgrounds */ --fd-handle-border: rgba(255, 255, 255, 0.9); /* ----- BORDERS - Subtle in dark mode for softer contrast ----- */ --fd-border: #3a3a40; --fd-border-muted: #2e2e33; --fd-border-strong: #4a4a52; --fd-ring: #60a5fa; /* ----- NODE BORDERS (Higher contrast for visibility when zoomed out) ----- */ --fd-node-border: #4a4a52; --fd-node-border-hover: #5a5a62; /* ----- NODE COLORS (port type labels/badges - lighter for readability on dark surfaces) ----- */ --fd-node-emerald: #34d399; --fd-node-blue: #60a5fa; --fd-node-amber: #fbbf24; --fd-node-orange: #fb923c; --fd-node-red: #f87171; --fd-node-pink: #f472b6; --fd-node-indigo: #818cf8; --fd-node-teal: #2dd4bf; --fd-node-cyan: #22d3ee; --fd-node-lime: #a3e635; --fd-node-slate: #94a3b8; --fd-node-purple: #c084fc; /** Icon on node squircle: white in dark theme */ --fd-node-icon: #ffffff; /** Icon squircle background opacity: higher in dark mode for visibility on dark surfaces */ --fd-node-icon-bg-opacity: 50%; --fd-node-icon-bg-opacity-hover: 80%; /* ----- PRIMARY (Interactive/Brand) ----- */ --fd-primary: #60a5fa; --fd-primary-hover: #93c5fd; --fd-primary-foreground: var(--_gray-9); --fd-primary-muted: rgba(59, 130, 246, 0.12); /* ----- SECONDARY ----- */ --fd-secondary: #2d2d32; --fd-secondary-hover: #3a3a3f; --fd-secondary-foreground: var(--_gray-2); /* ----- ACCENT ----- */ --fd-accent: #a78bfa; --fd-accent-hover: #c4b5fd; --fd-accent-foreground: var(--_gray-9); --fd-accent-muted: rgba(139, 92, 246, 0.12); /* ----- STATUS: SUCCESS ----- */ --fd-success: #4ade80; --fd-success-hover: #86efac; --fd-success-foreground: var(--_gray-9); --fd-success-muted: rgba(34, 197, 94, 0.12); /* ----- STATUS: WARNING ----- */ --fd-warning: #fbbf24; --fd-warning-hover: #fcd34d; --fd-warning-foreground: var(--_gray-9); --fd-warning-muted: rgba(245, 158, 11, 0.12); /* ----- STATUS: ERROR/DESTRUCTIVE ----- */ --fd-error: #f87171; --fd-error-hover: #fca5a5; --fd-error-foreground: var(--_gray-9); --fd-error-muted: rgba(239, 68, 68, 0.12); /* ----- STATUS: INFO ----- */ --fd-info: #60a5fa; --fd-info-hover: #93c5fd; --fd-info-foreground: var(--_gray-9); --fd-info-muted: rgba(59, 130, 246, 0.12); /* ----- SHADOWS (softer for dark mode) ----- */ --fd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.2); --fd-shadow-md: 0 4px 6px rgb(0 0 0 / 0.25); --fd-shadow-lg: 0 10px 15px rgb(0 0 0 / 0.3); --fd-shadow-xl: 0 20px 25px rgb(0 0 0 / 0.4); /* ----- SCROLLBAR COLORS ----- */ --fd-scrollbar-thumb: var(--_gray-5); --fd-scrollbar-thumb-hover: var(--_gray-4); --fd-scrollbar-track: #242428; /* ----- BACKDROP/OVERLAY ----- */ --fd-backdrop: rgba(26, 26, 30, 0.85); /* ----- EDGE TOKENS (adjusted for dark mode visibility) ----- */ --fd-edge-trigger: var(--_gray-3); --fd-edge-trigger-hover: var(--_gray-2); --fd-edge-trigger-selected: #a78bfa; --fd-edge-data: var(--_gray-5); --fd-edge-data-hover: var(--_gray-4); --fd-edge-data-selected: #a78bfa; --fd-edge-tool-hover: #fbbf24; --fd-edge-tool-selected: #a78bfa; --fd-edge-loopback: var(--_gray-5); --fd-edge-loopback-hover: var(--_gray-4); --fd-edge-loopback-selected: #a78bfa; /* ----- LAYOUT BACKGROUND (darker gradient for dark mode) ----- */ --fd-layout-background: linear-gradient(135deg, #141418 0%, #1a1a2e 50%, #16162a 100%); }