/* ========================================================================== Exigo Elements — Color Tokens -------------------------------------------------------------------------- Two layers: 1. BRAND PALETTE — the Figma-mapped names used verbatim in the product (e.g. --Primary-Denim-300). Source of truth. Kept identical to the app so designs stay 1:1 with the real Elements editor. Every palette color that is applied to an SVG icon also ships a matching `*-SVG` filter token (icons are single-color black fills recolored via `filter`). 2. SEMANTIC ALIASES — friendly, role-based names (--color-primary, --surface, --text-body …) mapped onto the palette. Prefer these when authoring new work. Light is the default. `.darkmode` on (or :root) overrides. The app sniffs OS/browser preference in JS and toggles this class — it does NOT use prefers-color-scheme directly. ========================================================================== */ :root, html, :root.lightmode, html.lightmode { /* ---- Brand palette : Primary (Denim blue) --------------------------- */ --Primary-Denim-300: #126CB8; /* base / rollover */ --Primary-Denim-400: #0E4E99; /* pressed · icon & text on light */ --Primary-Denim-50: #d7e5fa; /* rollover / selected background */ --Primary-Denim-50-TableRowSelected: #d7e4f9; --Primary-Denim-400-50: #62a4f1; --Primary-Denim-300-SVG: brightness(0) saturate(100%) invert(30%) sepia(85%) saturate(1234%) hue-rotate(183deg) brightness(93%) contrast(90%); /* @kind other */ --Primary-Denim-400-SVG: brightness(0) saturate(100%) invert(19%) sepia(69%) saturate(2474%) hue-rotate(204deg) brightness(92%) contrast(94%); /* @kind other */ /* ---- Brand palette : Picton Blue (secondary accent) ----------------- */ --Primary-Picton-Blue-400: #159DC7; --Primary-Picton-Blue-300: #24BEE2; --Primary-Picton-Blue-400-SVG: brightness(0) saturate(100%) invert(56%) sepia(50%) saturate(5304%) hue-rotate(162deg) brightness(95%) contrast(84%); /* @kind other */ /* ---- Brand palette : Purples (Elements accents) --------------------- */ --Secondary-Amethyst-300: #A037C5; /* Elements subtitle */ --Secondary-Royal-Purple-500: #663CB9; /* component state */ --Secondary-Amethyst-300-SVG: brightness(0) saturate(100%) invert(23%) sepia(63%) saturate(2703%) hue-rotate(270deg) brightness(103%) contrast(89%); /* @kind other */ --Secondary-Royal-Purple-500-SVG: brightness(0) saturate(100%) invert(29%) sepia(23%) saturate(7140%) hue-rotate(270deg) brightness(86%) contrast(88%); /* @kind other */ /* ---- Brand palette : Ink (Limed Spruce) ----------------------------- */ --Type-Limed-Spruce-500: #1F2931; /* headers, emphasized, disabled search text */ --Type-Limed-Spruce-300: #2C3943; /* body copy */ --Type-Limed-Spruce-100: #46565F; /* secondary information */ --Type-Limed-Spruce-Placeholder: #8C959E; /* placeholder text */ --Type-Limed-Spruce-Avatar-Text: #535353; --Neutral-Limed-Spruce-600: #2C3943; /* the system "black" — left-menu icons */ --Neutral-Limed-Spruce-600-40: #2C394340; --Type-Limed-Spruce-Placeholder-SVG: brightness(0) saturate(100%) invert(62%) sepia(20%) saturate(156%) hue-rotate(169deg) brightness(90%) contrast(92%); /* @kind other */ --Neutral-Limed-Spruce-600-SVG: brightness(0) saturate(100%) invert(17%) sepia(15%) saturate(927%) hue-rotate(163deg) brightness(98%) contrast(86%); /* @kind other */ /* ---- Brand palette : Neutrals / surfaces ---------------------------- */ --Neutral-Black: #000; --Neutral-Nero-000: #FFFFFF; /* high-contrast surface */ --Neutral-Forced-White: #FFFFFF; /* stays white in dark mode */ --Neutral-Concrete-200: #F2F2F2; /* section / card background */ --Neutral-Athens-Gray-100: #F8F9FA; /* subtle control background */ --Neutral-Cool-Gray-450: #CBCBCF; /* form borders / outlines */ --Neutral-Alto-300: #E0E0E0; /* disabled background */ --Neutral-Pale-Sky-500: #6C757D; /* disabled text / grey chevrons */ --Neutral-Geyser-400: #DEE2E6; /* table row hover */ --Neutral-Black-SVG: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(59deg) brightness(97%) contrast(102%); /* @kind other */ --Neutral-Nero-000-SVG: brightness(0) saturate(100%) invert(99%) sepia(2%) saturate(2%) hue-rotate(186deg) brightness(116%) contrast(100%); /* @kind other */ --Neutral-Forced-White-SVG: invert(100%); /* @kind other */ --Neutral-Cool-Gray-450-SVG: brightness(0) saturate(100%) invert(92%) sepia(4%) saturate(12%) hue-rotate(202deg) brightness(94%) contrast(80%); /* @kind other */ --Neutral-Alto-300-SVG: brightness(0) saturate(100%) invert(92%) sepia(0%) saturate(3398%) hue-rotate(7deg) brightness(127%) contrast(76%); /* @kind other */ --Neutral-Pale-Sky-500-SVG: brightness(0) saturate(100%) invert(47%) sepia(8%) saturate(506%) hue-rotate(167deg) brightness(93%) contrast(89%); /* @kind other */ /* ---- Brand palette : Semantic ---------------------------------------- */ --Core-Urgent: #D70015; /* errors, destructive, validation */ --Core-Warning: #FF9800; --Core-Urgent-SVG: brightness(0) saturate(100%) invert(16%) sepia(89%) saturate(5201%) hue-rotate(347deg) brightness(80%) contrast(115%); /* @kind other */ --Core-Warning-SVG: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(7056%) hue-rotate(0deg) brightness(103%) contrast(107%); /* @kind other */ /* ---- Brand palette : Tags (background + type pairs) ------------------ */ --Tags-Type-Blue: #126CB8; --Tags-Background-Blue: #D0E8F2; --Tags-Type-Purple: #4A235A; --Tags-Background-Purple: #E8DAEF; --Tags-Type-Green: #2E7D32; --Tags-Background-Green: #D0F0C0; --Tags-Type-Yellow: #8C6D00; --Tags-Background-Yellow: #FFF9C4; --Tags-Type-Red: #B71C1C; --Tags-Background-Red: #FDE0E0; --Tags-Type-Orange: #E65100; --Tags-Background-Orange: #FFE5CC; --Tags-Type-Blue-SVG: brightness(0) saturate(100%) invert(23%) sepia(75%) saturate(5296%) hue-rotate(195deg) brightness(94%) contrast(86%); /* @kind other */ --Tags-Type-Green-SVG: brightness(0) saturate(100%) invert(40%) sepia(11%) saturate(2941%) hue-rotate(73deg) brightness(93%) contrast(84%); /* @kind other */ /* ---- Brand palette : AI-redesign gradient stops --------------------- */ --Gradient-Amethyst: #aF48D5; --Gradient-Cyan: #35CFF4; --Gradient-Denim: #82AFD5; --Gradient-AI: linear-gradient(90deg, var(--Gradient-Amethyst), var(--Gradient-Denim), var(--Gradient-Cyan)); /* @kind other */ --Scrollbar-Background: #FFFFFF; /* ==================================================================== SEMANTIC ALIASES — prefer these when authoring ==================================================================== */ --color-primary: var(--Primary-Denim-300); --color-primary-hover: var(--Primary-Denim-400); --color-primary-soft: var(--Primary-Denim-50); --color-accent: var(--Primary-Picton-Blue-400); --color-elements: var(--Secondary-Amethyst-300); /* the "Elements" brand purple */ --color-component: var(--Secondary-Royal-Purple-500); --text-body: var(--Type-Limed-Spruce-300); --text-strong: var(--Type-Limed-Spruce-500); --text-muted: var(--Type-Limed-Spruce-100); --text-placeholder: var(--Type-Limed-Spruce-Placeholder); --text-disabled: var(--Neutral-Pale-Sky-500); --text-on-primary: var(--Neutral-Forced-White); --text-link: var(--Primary-Denim-300); --surface-page: var(--Neutral-Concrete-200); /* app canvas */ --surface-card: var(--Neutral-Nero-000); /* cards, panels, modals */ --surface-subtle: var(--Neutral-Athens-Gray-100); /* inset controls */ --surface-selected: var(--Primary-Denim-50); --surface-row-hover: var(--Neutral-Geyser-400); --border-default: var(--Neutral-Cool-Gray-450); --border-strong: var(--Neutral-Limed-Spruce-600); --border-disabled: var(--Neutral-Alto-300); --color-danger: var(--Core-Urgent); --color-warning: var(--Core-Warning); --color-success: var(--Tags-Type-Green); /* icon filter aliases (apply to of a black SVG) */ --icon-strong: var(--Neutral-Limed-Spruce-600-SVG); --icon-primary: var(--Primary-Denim-400-SVG); --icon-muted: var(--Type-Limed-Spruce-Placeholder-SVG); --icon-disabled: var(--Neutral-Pale-Sky-500-SVG); --icon-on-primary: var(--Neutral-Nero-000-SVG); --icon-danger: var(--Core-Urgent-SVG); } /* ========================================================================== DARK MODE — html.darkmode / :root.darkmode Same token names, dark values. Semantic aliases inherit automatically. ========================================================================== */ :root.darkmode, html.darkmode { --Primary-Denim-300: #0F5C92; --Primary-Denim-400: #1472B7; --Primary-Denim-50: #3A6CB033; --Primary-Denim-50-TableRowSelected: #3A6CB0; --Primary-Denim-400-50: #1472B7; --Primary-Denim-300-SVG: brightness(0) saturate(100%) invert(20%) sepia(35%) saturate(6640%) hue-rotate(190deg) brightness(86%) contrast(88%); /* @kind other */ --Primary-Denim-400-SVG: brightness(0) saturate(100%) invert(40%) sepia(32%) saturate(1075%) hue-rotate(162deg) brightness(94%) contrast(114%); /* @kind other */ --Primary-Picton-Blue-400: #1AABBF; --Primary-Picton-Blue-300: #25BFE4; --Primary-Picton-Blue-400-SVG: brightness(0) saturate(100%) invert(54%) sepia(97%) saturate(375%) hue-rotate(139deg) brightness(85%) contrast(94%); /* @kind other */ --Secondary-Amethyst-300: #7E309A; --Secondary-Royal-Purple-500: #724BB0; --Secondary-Amethyst-300-SVG: brightness(0) saturate(100%) invert(22%) sepia(33%) saturate(4783%) hue-rotate(269deg) brightness(87%) contrast(87%); /* @kind other */ --Secondary-Royal-Purple-500-SVG: brightness(0) saturate(100%) invert(28%) sepia(83%) saturate(969%) hue-rotate(234deg) brightness(94%) contrast(83%); /* @kind other */ --Type-Limed-Spruce-500: #FFFFFF; --Type-Limed-Spruce-300: #FFFFFF; --Type-Limed-Spruce-100: #E6E6E6; --Type-Limed-Spruce-Placeholder: #D0D0D0; --Type-Limed-Spruce-Avatar-Text: #BABABA; --Neutral-Limed-Spruce-600: #F2F2F2; --Type-Limed-Spruce-Placeholder-SVG: brightness(0) saturate(100%) invert(75%) sepia(36%) saturate(1%) hue-rotate(314deg) brightness(99%) contrast(103%); /* @kind other */ --Neutral-Limed-Spruce-600-SVG: brightness(0) saturate(100%) invert(98%) sepia(13%) saturate(105%) hue-rotate(234deg) brightness(117%) contrast(90%); /* @kind other */ --Neutral-Black: #FFFFFF; --Neutral-Nero-000: #121212; --Neutral-Forced-White: #FFFFFF; --Neutral-Concrete-200: #1D1E20; --Neutral-Athens-Gray-100: #1A1B1D; --Neutral-Cool-Gray-450: #686A71; --Neutral-Alto-300: #2F3235; --Neutral-Pale-Sky-500: #7D7F82; --Neutral-Geyser-400: #454850; --Neutral-Black-SVG: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(135deg) brightness(106%) contrast(101%); /* @kind other */ --Neutral-Nero-000-SVG: brightness(0) saturate(100%) invert(0%) sepia(3%) saturate(1399%) hue-rotate(354deg) brightness(98%) contrast(86%); /* @kind other */ --Neutral-Cool-Gray-450-SVG: brightness(0) saturate(100%) invert(44%) sepia(6%) saturate(470%) hue-rotate(189deg) brightness(89%) contrast(81%); /* @kind other */ --Neutral-Alto-300-SVG: brightness(0) saturate(100%) invert(18%) sepia(23%) saturate(144%) hue-rotate(169deg) brightness(94%) contrast(95%); /* @kind other */ --Neutral-Pale-Sky-500-SVG: brightness(0) saturate(100%) invert(51%) sepia(7%) saturate(162%) hue-rotate(177deg) brightness(96%) contrast(88%); /* @kind other */ --Core-Urgent: #E41E2B; --Core-Warning: #FF8012; --Core-Urgent-SVG: brightness(0) saturate(100%) invert(16%) sepia(82%) saturate(6260%) hue-rotate(350deg) brightness(95%) contrast(88%); /* @kind other */ --Core-Warning-SVG: brightness(0) saturate(100%) invert(55%) sepia(75%) saturate(1934%) hue-rotate(350deg) brightness(100%) contrast(103%); /* @kind other */ --Tags-Type-Blue: #FFFFFF; --Tags-Background-Blue: #1D4661; --Tags-Type-Purple: #FFFFFF; --Tags-Background-Purple: #472A5A; --Tags-Type-Green: #FFFFFF; --Tags-Background-Green: #2D4D3A; --Tags-Type-Yellow: #FFFFFF; --Tags-Background-Yellow: #635E2E; --Tags-Type-Red: #FFFFFF; --Tags-Background-Red: #5D2D2D; --Tags-Type-Orange: #FFFFFF; --Tags-Background-Orange: #6D3E1E; --Tags-Type-Blue-SVG: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(0%) hue-rotate(315deg) brightness(112%) contrast(100%); /* @kind other */ --Tags-Type-Green-SVG: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(14%) hue-rotate(212deg) brightness(104%) contrast(104%); /* @kind other */ --Gradient-Amethyst: #9040B8; --Gradient-Cyan: #28B5D8; --Gradient-Denim: #5A8AB0; --Scrollbar-Background: #121212; }