/* ══════════════════════════════════════════════════ VodaTrace — Theme System Apply a theme by setting data-theme on ══════════════════════════════════════════════════ */ :root, [data-theme="dark"] { /* ── Background pattern ── */ --bg-pattern: none; /* ── Surfaces ── */ --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #1c2128; --bg-row-alt: rgba(255,255,255, 0.01); /* ── Borders ── */ --border-primary: #21262d; --border-secondary: #30363d; --border-subtle: #161b22; /* ── Text ── */ --text-primary: #e6edf3; --text-secondary: #c9d1d9; --text-tertiary: #8b949e; --text-muted: #484f58; --text-link: #58a6ff; /* ── Accent ── */ --accent: #58a6ff; /* ── Platform colors ── */ --color-bigcommerce: #38bdf8; --color-stripe: #a883ff; --color-sendgrid: #3fb950; --color-twilio: #f97316; --color-shipstation: #f472b6; --color-slack: #eab308; --color-segment: #06b6d4; /* ── Connector ── */ --connector-color: #58a6ff; --connector-opacity: 0.45; /* ── Dot ── */ --dot-stroke: #0d1117; /* ── Misc ── */ --shadow-tooltip: 0 8px 24px rgba(0,0,0,.4); --rail-opacity: 0.08; --rail-opacity-active: 0.15; --dim-opacity: 0.1; --glow-stddev: 3; } /* ── Proton ────────────────────────────────────── */ /* Deep purple-black with vivid purple/pink/teal */ /* No glow — solid dots, clean edges */ [data-theme="proton"] { /* Surfaces — near-black with purple undertone */ --bg-primary: #1b1730; --bg-secondary: #231e3a; --bg-tertiary: #2a2545; --bg-row-alt: rgba(160,140,255, 0.02); /* Borders — faint purple-grey */ --border-primary: #332d50; --border-secondary: #3d3660; --border-subtle: #231e3a; /* Text */ --text-primary: #eeedf5; --text-secondary: #c5c0d8; --text-tertiary: #8a84a5; --text-muted: #4e4868; --text-link: #a78bfa; /* Accent — electric purple */ --accent: #a78bfa; /* Platform colors — Proton palette */ --color-bigcommerce: #7c5cfc; /* deep purple */ --color-stripe: #c471ed; /* magenta/orchid */ --color-sendgrid: #50d890; /* vivid green */ --color-twilio: #f97066; /* coral red */ --color-shipstation: #f5a623; /* amber orange */ --color-slack: #56c2e6; /* sky cyan */ --color-segment: #e06eaa; /* hot pink */ /* Connector */ --connector-color: #a78bfa; --connector-opacity: 0.5; /* Dot */ --dot-stroke: #1b1730; /* Misc */ --shadow-tooltip: 0 8px 24px rgba(0,0,0,.5); --rail-opacity: 0.1; --rail-opacity-active: 0.22; --dim-opacity: 0.08; --glow-stddev: 0; } /* ── Frost ─────────────────────────────────────── */ /* Dark with lavender/mint pastels */ /* Palette: #000, #c2f4ff, #c6c0ff, #b1ffc2, #fff */ [data-theme="frost"] { /* Surfaces — deep charcoal, slightly warmer */ --bg-primary: #131520; --bg-secondary: #1a1d2e; --bg-tertiary: #212438; --bg-row-alt: rgba(194,244,255, 0.015); /* Borders */ --border-primary: #262940; --border-secondary: #2f3350; --border-subtle: #1a1d2e; /* Text */ --text-primary: #f0f0f5; --text-secondary: #c8c8d8; --text-tertiary: #8888a0; --text-muted: #4a4a60; --text-link: #c2f4ff; /* Accent — icy cyan */ --accent: #c2f4ff; /* Platform colors — lavender, mint, ice pastels */ --color-bigcommerce: #c2f4ff; /* ice blue */ --color-stripe: #c6c0ff; /* lavender */ --color-sendgrid: #b1ffc2; /* mint green */ --color-twilio: #ffc2e0; /* soft pink */ --color-shipstation: #ffd6a5; /* peach */ --color-slack: #e8e4b0; /* soft yellow */ --color-segment: #a5e8e0; /* teal mint */ /* Connector */ --connector-color: #c6c0ff; --connector-opacity: 0.4; /* Dot */ --dot-stroke: #131520; /* Misc */ --shadow-tooltip: 0 8px 24px rgba(0,0,0,.45); --rail-opacity: 0.1; --rail-opacity-active: 0.2; --dim-opacity: 0.1; --glow-stddev: 4; } /* ── Mono ──────────────────────────────────────── */ /* Same dark base, single accent hue (blue) with */ /* platforms distinguished only by brightness/sat */ [data-theme="mono"] { /* Surfaces — same dark base */ --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #1c2128; --bg-row-alt: rgba(255,255,255, 0.01); /* Borders */ --border-primary: #21262d; --border-secondary: #30363d; --border-subtle: #161b22; /* Text */ --text-primary: #e6edf3; --text-secondary: #c9d1d9; --text-tertiary: #8b949e; --text-muted: #484f58; --text-link: #79b8ff; /* Accent */ --accent: #79b8ff; /* Platform colors — single blue hue, varied lightness */ --color-bigcommerce: #79b8ff; /* bright blue */ --color-stripe: #a5d0ff; /* lighter blue */ --color-sendgrid: #4d94db; /* medium blue */ --color-twilio: #c0dbf7; /* pale blue */ --color-shipstation: #2d6eb5; /* deep blue */ --color-slack: #9ecbff; /* soft blue */ --color-segment: #3a7cc6; /* steel blue */ /* Connector */ --connector-color: #79b8ff; --connector-opacity: 0.45; /* Dot */ --dot-stroke: #0d1117; /* Misc */ --shadow-tooltip: 0 8px 24px rgba(0,0,0,.4); --rail-opacity: 0.1; --rail-opacity-active: 0.2; --dim-opacity: 0.1; --glow-stddev: 3; } /* ── Nord ──────────────────────────────────────── */ [data-theme="nord"] { /* Polar Night */ --bg-primary: #2e3440; --bg-secondary: #3b4252; --bg-tertiary: #434c5e; --bg-row-alt: rgba(216,222,233, 0.03); /* Borders */ --border-primary: #4c566a; --border-secondary: #4c566a; --border-subtle: #3b4252; /* Snow Storm */ --text-primary: #eceff4; --text-secondary: #e5e9f0; --text-tertiary: #d8dee9; --text-muted: #4c566a; --text-link: #88c0d0; /* Frost */ --accent: #88c0d0; /* Aurora-inspired platform colors */ --color-bigcommerce: #88c0d0; /* Frost */ --color-stripe: #b48ead; /* Aurora purple */ --color-sendgrid: #a3be8c; /* Aurora green */ --color-twilio: #d08770; /* Aurora orange */ --color-shipstation: #bf616a; /* Aurora red */ --color-slack: #ebcb8b; /* Aurora yellow */ --color-segment: #8fbcbb; /* Frost teal */ /* Connector */ --connector-color: #81a1c1; --connector-opacity: 0.5; /* Dot */ --dot-stroke: #2e3440; /* Misc */ --shadow-tooltip: 0 8px 24px rgba(0,0,0,.25); --rail-opacity: 0.12; --rail-opacity-active: 0.25; --dim-opacity: 0.08; --glow-stddev: 3; } /* ── Nord Light ────────────────────────────────── */ [data-theme="nord-light"] { --bg-primary: #eceff4; --bg-secondary: #e5e9f0; --bg-tertiary: #d8dee9; --bg-row-alt: rgba(46,52,64, 0.03); --border-primary: #d8dee9; --border-secondary: #d8dee9; --border-subtle: #e5e9f0; --text-primary: #2e3440; --text-secondary: #3b4252; --text-tertiary: #4c566a; --text-muted: #a0a8b6; --text-link: #5e81ac; --accent: #5e81ac; --color-bigcommerce: #5e81ac; --color-stripe: #b48ead; --color-sendgrid: #a3be8c; --color-twilio: #d08770; --color-shipstation: #bf616a; --color-slack: #d5a64a; --color-segment: #8fbcbb; --connector-color: #5e81ac; --connector-opacity: 0.45; --dot-stroke: #eceff4; --shadow-tooltip: 0 4px 16px rgba(46,52,64,.12); --rail-opacity: 0.15; --rail-opacity-active: 0.3; --dim-opacity: 0.1; --glow-stddev: 2; } /* ── Sand ──────────────────────────────────────── */ /* Warm, minimal — cream/beige with amber accent */ [data-theme="sand"] { /* Surfaces */ --bg-primary: #f0ebe3; --bg-secondary: #e8e2d9; --bg-tertiary: #ffffff; --bg-row-alt: rgba(45,40,35, 0.025); /* Borders */ --border-primary: #ddd7cd; --border-secondary: #d1c9be; --border-subtle: #e8e2d9; /* Text */ --text-primary: #1a1a1a; --text-secondary: #3d3832; --text-tertiary: #7a7168; --text-muted: #b5ada4; --text-link: #c8913a; /* Accent — warm amber */ --accent: #e9a825; /* Platform colors — earthy, muted tones */ --color-bigcommerce: #5b8a9a; /* slate blue */ --color-stripe: #9b7ab8; /* soft purple */ --color-sendgrid: #6a9e5c; /* olive green */ --color-twilio: #d08450; /* terracotta */ --color-shipstation: #c4606a; /* dusty rose */ --color-slack: #d4a032; /* amber gold */ --color-segment: #5a9e9e; /* teal */ /* Connector */ --connector-color: #c8913a; --connector-opacity: 0.4; /* Dot */ --dot-stroke: #f0ebe3; /* Misc */ --shadow-tooltip: 0 4px 16px rgba(45,40,35,.1); --rail-opacity: 0.18; --rail-opacity-active: 0.35; --dim-opacity: 0.1; --glow-stddev: 2; } /* ── Adyen Dark ───────────────────────────────── */ /* Deep navy, 3-color: green, navy, grey. No glow */ [data-theme="adyen"] { --bg-pattern: radial-gradient(circle, #1c3050 1px, transparent 1px); --bg-pattern-size: 28px 28px; --bg-primary: #0a1628; --bg-secondary: #0f1e35; --bg-tertiary: #152742; --bg-row-alt: rgba(10,191,83, 0.015); --border-primary: #1c3050; --border-secondary: #243a5c; --border-subtle: #0f1e35; --text-primary: #f0f2f5; --text-secondary: #c4cdd8; --text-tertiary: #7e8fa5; --text-muted: #3d506a; --text-link: #0abf53; --accent: #0abf53; /* 3-color palette: green / navy / grey */ --color-bigcommerce: #0abf53; --color-stripe: #0abf53; --color-sendgrid: #0abf53; --color-twilio: #0a1628; --color-shipstation: #0a1628; --color-slack: #7e8fa5; --color-segment: #7e8fa5; --connector-color: #0abf53; --connector-opacity: 0.5; --dot-stroke: #0a1628; --shadow-tooltip: 0 8px 24px rgba(0,0,0,.5); --rail-opacity: 0.12; --rail-opacity-active: 0.25; --dim-opacity: 0.08; --glow-stddev: 0; } /* ── Adyen Light ──────────────────────────────── */ /* Light grey, 3-color: green, navy, grey. No glow */ [data-theme="adyen-light"] { --bg-pattern: radial-gradient(circle, #0a1628 1px, transparent 1px); --bg-pattern-size: 28px 28px; --bg-primary: #f3f3f3; --bg-secondary: #eaeaea; --bg-tertiary: #ffffff; --bg-row-alt: rgba(10,22,40, 0.015); --border-primary: #dcdcdc; --border-secondary: #d0d0d0; --border-subtle: #eaeaea; --text-primary: #0a1628; --text-secondary: #2d3a4a; --text-tertiary: #5a6878; --text-muted: #a8b2bd; --text-link: #09a34a; --accent: #09a34a; /* 3-color palette: green / navy / grey */ --color-bigcommerce: #09a34a; --color-stripe: #09a34a; --color-sendgrid: #09a34a; --color-twilio: #0a1628; --color-shipstation: #0a1628; --color-slack: #5a6878; --color-segment: #5a6878; --connector-color: #0a1628; --connector-opacity: 0.35; --dot-stroke: #f3f3f3; --shadow-tooltip: 0 4px 16px rgba(10,22,40,.1); --rail-opacity: 0.18; --rail-opacity-active: 0.35; --dim-opacity: 0.1; --glow-stddev: 0; }