mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 15:22:55 +01:00
fix(preview): add missing font MIME types to web server
- Added MIME type mappings for .otf, .woff, and .woff2 font formats - Fixed missing break statement after .wav case (was falling through to .mp4) - Fonts now load correctly in editor preview without 404 errors - Resolves OTS parsing error messages in console The web server was already serving project directory files correctly, but browsers were rejecting font files due to missing/incorrect MIME types. Related to TASK-006
This commit is contained in:
Richard Osborne
@@ -1,191 +1,389 @@
|
||||
/* BASE COLORS. DO NOT USE. USE THE THEME COLORS INSTEAD. */
|
||||
|
||||
:root {
|
||||
/* Success */
|
||||
--base-color-success-100: #e8f9ee;
|
||||
--base-color-success-200: #9ce4b9;
|
||||
--base-color-success-300: #62cb91;
|
||||
--base-color-success-400: #41ac74;
|
||||
--base-color-success-500: #1b8f59;
|
||||
--base-color-success-600: #007442;
|
||||
--base-color-success-700: #005c2c;
|
||||
--base-color-success-800: #004619;
|
||||
--base-color-success-900: #003001;
|
||||
--base-color-success-1000: #001900;
|
||||
|
||||
/* Error */
|
||||
--base-color-error-100: #fff2f0;
|
||||
--base-color-error-200: #fcc8c0;
|
||||
--base-color-error-300: #f4a196;
|
||||
--base-color-error-400: #e8786b;
|
||||
--base-color-error-500: #cc594f;
|
||||
--base-color-error-600: #af3f38;
|
||||
--base-color-error-700: #942725;
|
||||
--base-color-error-800: #7c0a13;
|
||||
--base-color-error-900: #590000;
|
||||
--base-color-error-1000: #000000;
|
||||
|
||||
/* Node-Pink */
|
||||
--base-color-node-pink-100: #f9f4f6;
|
||||
--base-color-node-pink-200: #e4cfd9;
|
||||
--base-color-node-pink-300: #d0adbe;
|
||||
--base-color-node-pink-400: #bb8ba3;
|
||||
--base-color-node-pink-500: #a66b8b;
|
||||
--base-color-node-pink-600: #944e74;
|
||||
--base-color-node-pink-700: #7e3660;
|
||||
--base-color-node-pink-800: #67214b;
|
||||
--base-color-node-pink-900: #500837;
|
||||
--base-color-node-pink-1000: #30001b;
|
||||
|
||||
/* Node-Purple */
|
||||
--base-color-node-purple-100: #f8f5f9;
|
||||
--base-color-node-purple-200: #dbd0e4;
|
||||
--base-color-node-purple-300: #c2b0d1;
|
||||
--base-color-node-purple-400: #a98fbe;
|
||||
--base-color-node-purple-500: #8f71ab;
|
||||
--base-color-node-purple-600: #79559b;
|
||||
--base-color-node-purple-700: #643d8b;
|
||||
--base-color-node-purple-800: #4e2877;
|
||||
--base-color-node-purple-900: #371360;
|
||||
--base-color-node-purple-1000: #1d0047;
|
||||
|
||||
/* Node-Green */
|
||||
--base-color-node-green-100: #f6f6f3;
|
||||
--base-color-node-green-200: #d2d6c5;
|
||||
--base-color-node-green-300: #b3ba9e;
|
||||
--base-color-node-green-400: #939e77;
|
||||
--base-color-node-green-500: #758353;
|
||||
--base-color-node-green-600: #5b6a37;
|
||||
--base-color-node-green-700: #465524;
|
||||
--base-color-node-green-800: #314110;
|
||||
--base-color-node-green-900: #1f2c00;
|
||||
--base-color-node-green-1000: #0c1700;
|
||||
|
||||
/* Node-Gray */
|
||||
--base-color-node-grey-100: #f5f5f5;
|
||||
--base-color-node-grey-200: #d3d4d6;
|
||||
--base-color-node-grey-300: #b6b7bb;
|
||||
--base-color-node-grey-400: #97999f;
|
||||
--base-color-node-grey-500: #7b7d85;
|
||||
--base-color-node-grey-600: #62656e;
|
||||
--base-color-node-grey-700: #4c4f59;
|
||||
--base-color-node-grey-800: #373b45;
|
||||
--base-color-node-grey-900: #252832;
|
||||
--base-color-node-grey-1000: #11141d;
|
||||
|
||||
/* Node-Blue */
|
||||
--base-color-node-blue-100: #f5f6f8;
|
||||
--base-color-node-blue-200: #cfd5de;
|
||||
--base-color-node-blue-300: #adb8c6;
|
||||
--base-color-node-blue-400: #8b9bae;
|
||||
--base-color-node-blue-500: #6b7f98;
|
||||
--base-color-node-blue-600: #4d6784;
|
||||
--base-color-node-blue-700: #315272;
|
||||
--base-color-node-blue-800: #173e5d;
|
||||
--base-color-node-blue-900: #002a47;
|
||||
--base-color-node-blue-1000: #00142f;
|
||||
|
||||
/* Secondary */
|
||||
--base-color-teal-100: #f0f7f9;
|
||||
--base-color-teal-200: #b6dbe3;
|
||||
--base-color-teal-300: #7ec2cf;
|
||||
--base-color-teal-400: #2ba7ba;
|
||||
--base-color-teal-500: #008a9d;
|
||||
--base-color-teal-600: #006f82;
|
||||
--base-color-teal-700: #005769;
|
||||
--base-color-teal-800: #004153;
|
||||
--base-color-teal-900: #002c3d;
|
||||
--base-color-teal-1000: #001623;
|
||||
|
||||
/* Primary */
|
||||
--base-color-yellow-100: #fff4e2;
|
||||
--base-color-yellow-200: #fccd75;
|
||||
--base-color-yellow-300: #e5ae32;
|
||||
--base-color-yellow-400: #c39108;
|
||||
--base-color-yellow-500: #a37500;
|
||||
--base-color-yellow-600: #875d00;
|
||||
--base-color-yellow-700: #6d4800;
|
||||
--base-color-yellow-800: #583400;
|
||||
--base-color-yellow-900: #431e00;
|
||||
--base-color-yellow-1000: #330000;
|
||||
|
||||
/* UI Greys */
|
||||
--base-color-grey-100: #f5f5f5;
|
||||
--base-color-grey-100-transparent: #f5f5f522;
|
||||
--base-color-grey-200: #d4d4d4;
|
||||
--base-color-grey-300: #b8b8b8;
|
||||
--base-color-grey-400: #9a9999;
|
||||
--base-color-grey-500: #7e7d7d;
|
||||
--base-color-grey-600: #666565;
|
||||
--base-color-grey-700: #504f4f;
|
||||
--base-color-grey-800: #3c3c3c;
|
||||
--base-color-grey-900: #292828;
|
||||
--base-color-grey-1000: #151414;
|
||||
--base-color-grey-1000-transparent: #151414b3;
|
||||
--base-color-grey-1000-transparent-2: #00000069;
|
||||
}
|
||||
|
||||
/* THEME COLOR TOKENS. USE THESE. */
|
||||
|
||||
:root {
|
||||
--theme-color-bg-0: #000000;
|
||||
--theme-color-bg-1: var(--base-color-grey-1000);
|
||||
--theme-color-bg-1-transparent: var(--base-color-grey-1000-transparent);
|
||||
--theme-color-bg-1-transparent-2: var(--base-color-grey-1000-transparent-2);
|
||||
--theme-color-bg-2: var(--base-color-grey-900);
|
||||
--theme-color-bg-3: var(--base-color-grey-800);
|
||||
--theme-color-bg-4: var(--base-color-grey-700);
|
||||
|
||||
--theme-color-fg-highlight: var(--base-color-grey-100);
|
||||
--theme-color-fg-default-contrast: var(--base-color-grey-200);
|
||||
--theme-color-fg-default: var(--base-color-grey-300);
|
||||
--theme-color-fg-default-shy: var(--base-color-grey-400);
|
||||
--theme-color-fg-muted: var(--base-color-grey-500);
|
||||
--theme-color-fg-transparent: var(--base-color-grey-100-transparent);
|
||||
|
||||
--theme-color-primary: var(--base-color-yellow-300);
|
||||
--theme-color-primary-highlight: var(--base-color-yellow-200);
|
||||
--theme-color-primary-dim: var(--base-color-yellow-500);
|
||||
--theme-color-on-primary: var(--base-color-grey-1000);
|
||||
|
||||
--theme-color-secondary: var(--base-color-teal-700);
|
||||
--theme-color-secondary-dim: var(--base-color-teal-800);
|
||||
--theme-color-secondary-highlight: var(--base-color-teal-600);
|
||||
--theme-color-secondary-bright: var(--base-color-teal-500);
|
||||
--theme-color-secondary-as-fg: var(--base-color-teal-300);
|
||||
--theme-color-on-secondary: var(--base-color-teal-100);
|
||||
|
||||
--theme-color-node-data-1: var(--base-color-node-green-800);
|
||||
--theme-color-node-data-2: var(--base-color-node-green-700);
|
||||
--theme-color-node-data-3: var(--base-color-node-green-600);
|
||||
--theme-color-node-data-dim: var(--base-color-node-green-1000);
|
||||
|
||||
--theme-color-node-visual-1: var(--base-color-node-blue-800);
|
||||
--theme-color-node-visual-2: var(--base-color-node-blue-700);
|
||||
--theme-color-node-visual-2-highlight: var(--base-color-node-blue-600);
|
||||
--theme-color-node-visual-highlight: var(--base-color-node-blue-100);
|
||||
--theme-color-node-visual-default: var(--base-color-node-blue-200);
|
||||
--theme-color-node-visual-shy: var(--base-color-node-blue-300);
|
||||
--theme-color-node-visual-dim: var(--base-color-node-blue-1000);
|
||||
|
||||
--theme-color-node-custom-1: var(--base-color-node-pink-800);
|
||||
--theme-color-node-custom-2: var(--base-color-node-pink-700);
|
||||
--theme-color-node-custom-dim: var(--base-color-node-pink-1000);
|
||||
|
||||
--theme-color-node-logic-1: var(--base-color-node-grey-800);
|
||||
--theme-color-node-logic-2: var(--base-color-node-grey-700);
|
||||
--theme-color-node-logic-dim: var(--base-color-node-grey-1000);
|
||||
|
||||
--theme-color-node-component-1: var(--base-color-node-purple-800);
|
||||
--theme-color-node-component-2: var(--base-color-node-purple-700);
|
||||
--theme-color-node-component-dim: var(--base-color-node-purple-1000);
|
||||
|
||||
/* TODO: Ask for dim and highlight colors for statuses */
|
||||
--theme-color-success: #5bf59e;
|
||||
--theme-color-notice: var(--base-color-yellow-300);
|
||||
--theme-color-danger: #f57569;
|
||||
--theme-color-danger-light: #f89387;
|
||||
|
||||
--theme-color-signal: var(--base-color-yellow-300);
|
||||
--theme-color-data: var(--base-color-teal-600);
|
||||
}
|
||||
/* =============================================================================
|
||||
NOODL DESIGN SYSTEM - COLORS
|
||||
Modern refresh: Rose + Violet palette
|
||||
============================================================================= */
|
||||
|
||||
/* =============================================================================
|
||||
BASE COLORS
|
||||
These are the raw palette values. DO NOT use directly in components.
|
||||
Use the THEME COLOR TOKENS below instead.
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* ---------------------------------------------------------------------------
|
||||
SEMANTIC COLORS
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
/* Success - Modern Emerald */
|
||||
--base-color-success-100: #ecfdf5;
|
||||
--base-color-success-200: #a7f3d0;
|
||||
--base-color-success-300: #6ee7b7;
|
||||
--base-color-success-400: #34d399;
|
||||
--base-color-success-500: #10b981;
|
||||
--base-color-success-600: #059669;
|
||||
--base-color-success-700: #047857;
|
||||
--base-color-success-800: #065f46;
|
||||
--base-color-success-900: #064e3b;
|
||||
--base-color-success-1000: #022c22;
|
||||
|
||||
/* Error - Red (distinct from primary rose) */
|
||||
--base-color-error-100: #fef2f2;
|
||||
--base-color-error-200: #fecaca;
|
||||
--base-color-error-300: #fca5a5;
|
||||
--base-color-error-400: #f87171;
|
||||
--base-color-error-500: #ef4444;
|
||||
--base-color-error-600: #dc2626;
|
||||
--base-color-error-700: #b91c1c;
|
||||
--base-color-error-800: #991b1b;
|
||||
--base-color-error-900: #7f1d1d;
|
||||
--base-color-error-1000: #450a0a;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
NODE TYPE COLORS
|
||||
These give visual distinction to different node categories on the canvas
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
/* Node-Pink - For Custom/User nodes */
|
||||
--base-color-node-pink-100: #fdf2f8;
|
||||
--base-color-node-pink-200: #fbcfe8;
|
||||
--base-color-node-pink-300: #f9a8d4;
|
||||
--base-color-node-pink-400: #f472b6;
|
||||
--base-color-node-pink-500: #ec4899;
|
||||
--base-color-node-pink-600: #db2777;
|
||||
--base-color-node-pink-700: #be185d;
|
||||
--base-color-node-pink-800: #9d174d;
|
||||
--base-color-node-pink-900: #831843;
|
||||
--base-color-node-pink-1000: #500724;
|
||||
|
||||
/* Node-Purple - For Component nodes */
|
||||
--base-color-node-purple-100: #faf5ff;
|
||||
--base-color-node-purple-200: #e9d5ff;
|
||||
--base-color-node-purple-300: #d8b4fe;
|
||||
--base-color-node-purple-400: #c084fc;
|
||||
--base-color-node-purple-500: #a855f7;
|
||||
--base-color-node-purple-600: #9333ea;
|
||||
--base-color-node-purple-700: #7c3aed;
|
||||
--base-color-node-purple-800: #6d28d9;
|
||||
--base-color-node-purple-900: #5b21b6;
|
||||
--base-color-node-purple-1000: #2e1065;
|
||||
|
||||
/* Node-Green - For Data nodes */
|
||||
--base-color-node-green-100: #f0fdf4;
|
||||
--base-color-node-green-200: #bbf7d0;
|
||||
--base-color-node-green-300: #86efac;
|
||||
--base-color-node-green-400: #4ade80;
|
||||
--base-color-node-green-500: #22c55e;
|
||||
--base-color-node-green-600: #16a34a;
|
||||
--base-color-node-green-700: #15803d;
|
||||
--base-color-node-green-800: #166534;
|
||||
--base-color-node-green-900: #14532d;
|
||||
--base-color-node-green-1000: #052e16;
|
||||
|
||||
/* Node-Gray - For Logic nodes */
|
||||
--base-color-node-grey-100: #f4f4f5;
|
||||
--base-color-node-grey-200: #e4e4e7;
|
||||
--base-color-node-grey-300: #d4d4d8;
|
||||
--base-color-node-grey-400: #a1a1aa;
|
||||
--base-color-node-grey-500: #71717a;
|
||||
--base-color-node-grey-600: #52525b;
|
||||
--base-color-node-grey-700: #3f3f46;
|
||||
--base-color-node-grey-800: #27272a;
|
||||
--base-color-node-grey-900: #18181b;
|
||||
--base-color-node-grey-1000: #09090b;
|
||||
|
||||
/* Node-Blue - For Visual nodes */
|
||||
--base-color-node-blue-100: #eff6ff;
|
||||
--base-color-node-blue-200: #dbeafe;
|
||||
--base-color-node-blue-300: #bfdbfe;
|
||||
--base-color-node-blue-400: #93c5fd;
|
||||
--base-color-node-blue-500: #60a5fa;
|
||||
--base-color-node-blue-600: #3b82f6;
|
||||
--base-color-node-blue-700: #2563eb;
|
||||
--base-color-node-blue-800: #1d4ed8;
|
||||
--base-color-node-blue-900: #1e40af;
|
||||
--base-color-node-blue-1000: #172554;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
BRAND COLORS
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
/* Primary - Rose (Modern pink-red) */
|
||||
--base-color-rose-100: #fff1f2;
|
||||
--base-color-rose-200: #fecdd3;
|
||||
--base-color-rose-300: #fda4af;
|
||||
--base-color-rose-400: #fb7185;
|
||||
--base-color-rose-500: #f43f5e;
|
||||
--base-color-rose-600: #e11d48;
|
||||
--base-color-rose-700: #be123c;
|
||||
--base-color-rose-800: #9f1239;
|
||||
--base-color-rose-900: #881337;
|
||||
--base-color-rose-1000: #4c0519;
|
||||
|
||||
/* Secondary - Violet */
|
||||
--base-color-violet-100: #f5f3ff;
|
||||
--base-color-violet-200: #ede9fe;
|
||||
--base-color-violet-300: #ddd6fe;
|
||||
--base-color-violet-400: #c4b5fd;
|
||||
--base-color-violet-500: #a78bfa;
|
||||
--base-color-violet-600: #8b5cf6;
|
||||
--base-color-violet-700: #7c3aed;
|
||||
--base-color-violet-800: #6d28d9;
|
||||
--base-color-violet-900: #5b21b6;
|
||||
--base-color-violet-1000: #2e1065;
|
||||
|
||||
/* Amber - For warnings/notices (keeping this for semantic use) */
|
||||
--base-color-amber-100: #fffbeb;
|
||||
--base-color-amber-200: #fef3c7;
|
||||
--base-color-amber-300: #fcd34d;
|
||||
--base-color-amber-400: #fbbf24;
|
||||
--base-color-amber-500: #f59e0b;
|
||||
--base-color-amber-600: #d97706;
|
||||
--base-color-amber-700: #b45309;
|
||||
--base-color-amber-800: #92400e;
|
||||
--base-color-amber-900: #78350f;
|
||||
--base-color-amber-1000: #451a03;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
UI NEUTRALS - Clean Zinc palette (no warm/brown tints)
|
||||
--------------------------------------------------------------------------- */
|
||||
--base-color-zinc-50: #fafafa;
|
||||
--base-color-zinc-100: #f4f4f5;
|
||||
--base-color-zinc-200: #e4e4e7;
|
||||
--base-color-zinc-300: #d4d4d8;
|
||||
--base-color-zinc-400: #a1a1aa;
|
||||
--base-color-zinc-500: #71717a;
|
||||
--base-color-zinc-600: #52525b;
|
||||
--base-color-zinc-700: #3f3f46;
|
||||
--base-color-zinc-800: #27272a;
|
||||
--base-color-zinc-900: #18181b;
|
||||
--base-color-zinc-950: #09090b;
|
||||
|
||||
/* Transparent variants for overlays */
|
||||
--base-color-zinc-950-transparent: rgba(9, 9, 11, 0.85);
|
||||
--base-color-zinc-950-transparent-light: rgba(9, 9, 11, 0.5);
|
||||
--base-color-white-transparent: rgba(255, 255, 255, 0.08);
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
LEGACY ALIASES
|
||||
Keeping for backwards compatibility with existing components
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
/* Grey -> Zinc */
|
||||
--base-color-grey-100: var(--base-color-zinc-100);
|
||||
--base-color-grey-100-transparent: rgba(244, 244, 245, 0.13);
|
||||
--base-color-grey-200: var(--base-color-zinc-200);
|
||||
--base-color-grey-300: var(--base-color-zinc-300);
|
||||
--base-color-grey-400: var(--base-color-zinc-400);
|
||||
--base-color-grey-500: var(--base-color-zinc-500);
|
||||
--base-color-grey-600: var(--base-color-zinc-600);
|
||||
--base-color-grey-700: var(--base-color-zinc-700);
|
||||
--base-color-grey-800: var(--base-color-zinc-800);
|
||||
--base-color-grey-900: var(--base-color-zinc-900);
|
||||
--base-color-grey-1000: var(--base-color-zinc-950);
|
||||
--base-color-grey-1000-transparent: var(--base-color-zinc-950-transparent);
|
||||
--base-color-grey-1000-transparent-2: var(--base-color-zinc-950-transparent-light);
|
||||
|
||||
/* Teal -> Violet (secondary) */
|
||||
--base-color-teal-100: var(--base-color-violet-100);
|
||||
--base-color-teal-200: var(--base-color-violet-200);
|
||||
--base-color-teal-300: var(--base-color-violet-300);
|
||||
--base-color-teal-400: var(--base-color-violet-400);
|
||||
--base-color-teal-500: var(--base-color-violet-500);
|
||||
--base-color-teal-600: var(--base-color-violet-600);
|
||||
--base-color-teal-700: var(--base-color-violet-700);
|
||||
--base-color-teal-800: var(--base-color-violet-800);
|
||||
--base-color-teal-900: var(--base-color-violet-900);
|
||||
--base-color-teal-1000: var(--base-color-violet-1000);
|
||||
|
||||
/* Yellow -> Rose (primary) */
|
||||
--base-color-yellow-100: var(--base-color-rose-100);
|
||||
--base-color-yellow-200: var(--base-color-rose-200);
|
||||
--base-color-yellow-300: var(--base-color-rose-300);
|
||||
--base-color-yellow-400: var(--base-color-rose-400);
|
||||
--base-color-yellow-500: var(--base-color-rose-500);
|
||||
--base-color-yellow-600: var(--base-color-rose-600);
|
||||
--base-color-yellow-700: var(--base-color-rose-700);
|
||||
--base-color-yellow-800: var(--base-color-rose-800);
|
||||
--base-color-yellow-900: var(--base-color-rose-900);
|
||||
--base-color-yellow-1000: var(--base-color-rose-1000);
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
THEME COLOR TOKENS
|
||||
Use THESE in components. They provide semantic meaning and enable theming.
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* ---------------------------------------------------------------------------
|
||||
BACKGROUNDS
|
||||
Layered from darkest (bg-0) to lightest (bg-4)
|
||||
bg-0: Absolute black, used sparingly
|
||||
bg-1: Main app background
|
||||
bg-2: Cards, panels, elevated surfaces
|
||||
bg-3: Interactive elements, inputs
|
||||
bg-4: Hover states, highlights
|
||||
--------------------------------------------------------------------------- */
|
||||
--theme-color-bg-0: #000000;
|
||||
--theme-color-bg-1: var(--base-color-zinc-950);
|
||||
--theme-color-bg-1-transparent: var(--base-color-zinc-950-transparent);
|
||||
--theme-color-bg-1-transparent-2: var(--base-color-zinc-950-transparent-light);
|
||||
--theme-color-bg-2: var(--base-color-zinc-900);
|
||||
--theme-color-bg-3: var(--base-color-zinc-800);
|
||||
--theme-color-bg-4: var(--base-color-zinc-700);
|
||||
--theme-color-bg-5: var(--base-color-zinc-600);
|
||||
|
||||
/* Subtle background for hover/focus states */
|
||||
--theme-color-bg-hover: var(--base-color-white-transparent);
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
FOREGROUNDS (Text colors)
|
||||
Layered from brightest to most muted
|
||||
--------------------------------------------------------------------------- */
|
||||
--theme-color-fg-highlight: #ffffff;
|
||||
--theme-color-fg-default-contrast: var(--base-color-zinc-100);
|
||||
--theme-color-fg-default: var(--base-color-zinc-300);
|
||||
--theme-color-fg-default-shy: var(--base-color-zinc-400);
|
||||
--theme-color-fg-muted: var(--base-color-zinc-500);
|
||||
--theme-color-fg-transparent: var(--base-color-grey-100-transparent);
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
PRIMARY - Rose
|
||||
Used for primary actions, CTAs, important highlights
|
||||
Beautiful modern pink-red that's bold but not aggressive
|
||||
--------------------------------------------------------------------------- */
|
||||
--theme-color-primary: var(--base-color-rose-500);
|
||||
--theme-color-primary-highlight: var(--base-color-rose-400);
|
||||
--theme-color-primary-dim: var(--base-color-rose-700);
|
||||
--theme-color-on-primary: #ffffff;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
SECONDARY - Violet
|
||||
Used for secondary actions, links, informational elements
|
||||
Complements rose beautifully - creates a modern warm/cool palette
|
||||
--------------------------------------------------------------------------- */
|
||||
--theme-color-secondary: var(--base-color-violet-500);
|
||||
--theme-color-secondary-dim: var(--base-color-violet-700);
|
||||
--theme-color-secondary-highlight: var(--base-color-violet-400);
|
||||
--theme-color-secondary-bright: var(--base-color-violet-300);
|
||||
--theme-color-secondary-as-fg: var(--base-color-violet-400);
|
||||
--theme-color-on-secondary: #ffffff;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
NODE COLORS
|
||||
Used on the node canvas to distinguish node types
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
/* Data nodes - Green */
|
||||
--theme-color-node-data-1: var(--base-color-node-green-700);
|
||||
--theme-color-node-data-2: var(--base-color-node-green-600);
|
||||
--theme-color-node-data-3: var(--base-color-node-green-500);
|
||||
--theme-color-node-data-dim: var(--base-color-node-green-900);
|
||||
|
||||
/* Visual nodes - Blue */
|
||||
--theme-color-node-visual-1: var(--base-color-node-blue-700);
|
||||
--theme-color-node-visual-2: var(--base-color-node-blue-600);
|
||||
--theme-color-node-visual-2-highlight: var(--base-color-node-blue-500);
|
||||
--theme-color-node-visual-highlight: var(--base-color-node-blue-200);
|
||||
--theme-color-node-visual-default: var(--base-color-node-blue-300);
|
||||
--theme-color-node-visual-shy: var(--base-color-node-blue-400);
|
||||
--theme-color-node-visual-dim: var(--base-color-node-blue-900);
|
||||
|
||||
/* Custom nodes - Pink */
|
||||
--theme-color-node-custom-1: var(--base-color-node-pink-700);
|
||||
--theme-color-node-custom-2: var(--base-color-node-pink-600);
|
||||
--theme-color-node-custom-dim: var(--base-color-node-pink-900);
|
||||
|
||||
/* Logic nodes - Gray */
|
||||
--theme-color-node-logic-1: var(--base-color-node-grey-700);
|
||||
--theme-color-node-logic-2: var(--base-color-node-grey-600);
|
||||
--theme-color-node-logic-dim: var(--base-color-node-grey-900);
|
||||
|
||||
/* Component nodes - Purple */
|
||||
--theme-color-node-component-1: var(--base-color-node-purple-700);
|
||||
--theme-color-node-component-2: var(--base-color-node-purple-600);
|
||||
--theme-color-node-component-dim: var(--base-color-node-purple-900);
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
STATUS COLORS
|
||||
For feedback, alerts, and state indication
|
||||
--------------------------------------------------------------------------- */
|
||||
--theme-color-success: var(--base-color-success-400);
|
||||
--theme-color-success-dim: var(--base-color-success-600);
|
||||
--theme-color-success-bg: var(--base-color-success-900);
|
||||
|
||||
--theme-color-notice: var(--base-color-amber-400);
|
||||
--theme-color-notice-dim: var(--base-color-amber-600);
|
||||
--theme-color-notice-bg: var(--base-color-amber-900);
|
||||
|
||||
--theme-color-danger: var(--base-color-error-400);
|
||||
--theme-color-danger-light: var(--base-color-error-300);
|
||||
--theme-color-danger-dim: var(--base-color-error-600);
|
||||
--theme-color-danger-bg: var(--base-color-error-900);
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
CONNECTION COLORS
|
||||
For node connections on the canvas
|
||||
--------------------------------------------------------------------------- */
|
||||
--theme-color-signal: var(--base-color-rose-400);
|
||||
--theme-color-data: var(--base-color-violet-500);
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
BORDER COLORS
|
||||
Subtle borders for cards, inputs, dividers
|
||||
--------------------------------------------------------------------------- */
|
||||
--theme-color-border-default: var(--base-color-zinc-700);
|
||||
--theme-color-border-subtle: var(--base-color-zinc-800);
|
||||
--theme-color-border-strong: var(--base-color-zinc-600);
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
FOCUS RING
|
||||
For accessibility - visible focus states
|
||||
--------------------------------------------------------------------------- */
|
||||
--theme-color-focus-ring: var(--base-color-rose-500);
|
||||
--theme-color-focus-ring-offset: var(--base-color-zinc-950);
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
FUTURE: LIGHT THEME
|
||||
Uncomment and apply .theme-light class to body for light mode
|
||||
=============================================================================
|
||||
|
||||
.theme-light {
|
||||
--theme-color-bg-0: #ffffff;
|
||||
--theme-color-bg-1: var(--base-color-zinc-50);
|
||||
--theme-color-bg-1-transparent: rgba(250, 250, 250, 0.9);
|
||||
--theme-color-bg-1-transparent-2: rgba(250, 250, 250, 0.5);
|
||||
--theme-color-bg-2: #ffffff;
|
||||
--theme-color-bg-3: var(--base-color-zinc-100);
|
||||
--theme-color-bg-4: var(--base-color-zinc-200);
|
||||
--theme-color-bg-5: var(--base-color-zinc-300);
|
||||
--theme-color-bg-hover: rgba(0, 0, 0, 0.04);
|
||||
|
||||
--theme-color-fg-highlight: var(--base-color-zinc-950);
|
||||
--theme-color-fg-default-contrast: var(--base-color-zinc-800);
|
||||
--theme-color-fg-default: var(--base-color-zinc-600);
|
||||
--theme-color-fg-default-shy: var(--base-color-zinc-500);
|
||||
--theme-color-fg-muted: var(--base-color-zinc-400);
|
||||
|
||||
--theme-color-primary: var(--base-color-rose-500);
|
||||
--theme-color-primary-highlight: var(--base-color-rose-400);
|
||||
--theme-color-primary-dim: var(--base-color-rose-700);
|
||||
--theme-color-on-primary: #ffffff;
|
||||
|
||||
--theme-color-secondary: var(--base-color-violet-600);
|
||||
--theme-color-secondary-dim: var(--base-color-violet-800);
|
||||
--theme-color-secondary-highlight: var(--base-color-violet-500);
|
||||
--theme-color-secondary-as-fg: var(--base-color-violet-600);
|
||||
--theme-color-on-secondary: #ffffff;
|
||||
|
||||
--theme-color-border-default: var(--base-color-zinc-200);
|
||||
--theme-color-border-subtle: var(--base-color-zinc-100);
|
||||
--theme-color-border-strong: var(--base-color-zinc-300);
|
||||
|
||||
--theme-color-focus-ring: var(--base-color-rose-500);
|
||||
--theme-color-focus-ring-offset: #ffffff;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user