/* ========================================================================= Repla — shared design tokens ========================================================================= The same file in all three products: ReplaMail, ReplaChat, ReplaTicket. Copy it in whole and do not edit it, except for the ONE block marked "THIS PRODUCT" near the top. Everything else — the greys, the shapes, the shadows, the type — stays identical across the family. That is what makes them look like siblings rather than three unrelated apps. ONE RULE ABOUT THE ACCENT ------------------------- If words touch it, use --rp-accent-strong. If they do not, use --rp-accent. words touch it words do not -> --rp-accent-strong -> --rp-accent a link a progress bar a button with a label on it a focus ring an active tab a border or a dot text inside a badge the logo a selected-row tint Why: teal and amber are too light to carry text. At their normal weight they measure 3.7:1 and 3.2:1 against white, and the standard for normal text is 4.5:1. The -strong step passes in all three products. Indigo would pass either way, but one rule across three products beats a per-product exception that somebody will forget. ========================================================================= */ :root { /* ====================================================================== THIS PRODUCT — the only block that differs between the three. Uncomment one. Leave the rest of the file alone. ====================================================================== */ /* ReplaMail — indigo --rp-accent: #4f46e5; --rp-accent-strong: #4338ca; --rp-accent-deep: #3730a3; --rp-accent-soft: #eef2ff; --rp-accent-line: #c7d2fe; --rp-accent-on-dark: #818cf8; */ /* ReplaChat — teal */ --rp-accent: #0d9488; /* decoration only: never under words */ --rp-accent-strong: #0f766e; /* links, button backgrounds, badge text */ --rp-accent-deep: #115e59; /* a button being hovered */ --rp-accent-soft: #f0fdfa; /* tinted background */ --rp-accent-line: #99f6e4; /* border on a tinted background */ --rp-accent-on-dark: #2dd4bf; /* the accent on a dark surface */ /* ReplaTicket — amber --rp-accent: #d97706; --rp-accent-strong: #b45309; --rp-accent-deep: #92400e; --rp-accent-soft: #fffbeb; --rp-accent-line: #fde68a; --rp-accent-on-dark: #f0a024; */ /* ====================================================================== SHARED — identical in all three products ====================================================================== */ /* --- the family navy ------------------------------------------------- The sidebar, the headings, the dark half of the logo. This colour is the family, more than the accent is. */ --rp-navy: #14162b; --rp-navy-soft: #1d2040; --rp-navy-text: #a9b0d0; /* text on navy */ /* --- surfaces --------------------------------------------------------- */ --rp-bg: #f6f7fb; /* the page behind everything */ --rp-surface: #ffffff; /* cards, panels, tables */ --rp-surface-2: #fafbfd; /* table headers, quiet fills */ /* --- text ------------------------------------------------------------- The first two carry body text. The third is for small uppercase labels and timestamps only — it measures 3.2:1, which is fine for those and not fine for a sentence. */ --rp-text: #171a2b; /* body */ --rp-text-2: #5a6280; /* secondary, help text */ --rp-text-3: #8a90a8; /* labels and timestamps only */ /* --- lines ------------------------------------------------------------ */ --rp-border: #e5e8f0; /* between rows and cards */ --rp-border-2: #d3d8e6; /* around inputs */ /* --- saying what happened --------------------------------------------- Identical across the family, so green always means the same thing whichever product somebody is looking at. Each is a text colour and the tint it sits on. */ --rp-success: #059669; --rp-success-soft: #ecfdf5; --rp-warning: #b45309; /* darkened from #d97706 so it can carry text */ --rp-warning-soft: #fffbeb; --rp-danger: #dc2626; --rp-danger-soft: #fef2f2; --rp-info: #0284c7; --rp-info-soft: #f0f9ff; /* --- shape ------------------------------------------------------------- Rounded, but not bubbly. 12px is the family's corner. */ --rp-radius: 12px; --rp-radius-sm: 8px; --rp-radius-lg: 18px; /* --- depth ------------------------------------------------------------- Two levels only. A card, and a thing floating above a card. */ --rp-shadow: 0 1px 2px rgba(20, 22, 43, .05), 0 4px 14px rgba(20, 22, 43, .05); --rp-shadow-lg: 0 12px 40px rgba(20, 22, 43, .14); /* --- type -------------------------------------------------------------- Inter, with a real fallback stack so nothing shifts if it fails to load. Never use a second typeface for headings. */ --rp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --rp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* --- spacing ----------------------------------------------------------- Everything is a multiple of 4. It is not a rule anyone will notice, but the absence of it is. */ --rp-space-1: 4px; --rp-space-2: 8px; --rp-space-3: 12px; --rp-space-4: 16px; --rp-space-5: 24px; --rp-space-6: 32px; --rp-space-7: 48px; } /* ========================================================================= DARK MODE ========================================================================= Only ReplaTicket has a dark theme today. These values are here so that when the others add one, the three still match. The accent goes LIGHTER on a dark surface, not darker. --rp-accent-strong is the wrong way round in the dark: indigo #4338ca on the family navy measures 2.8:1, which is unreadable. Use --rp-accent-on-dark instead. ========================================================================= */ :root[data-theme="dark"], :root.dark { --rp-bg: #0f1120; --rp-surface: #181b2f; --rp-surface-2: #1f2338; --rp-text: #e8eaf4; --rp-text-2: #a9b0c9; --rp-text-3: #7a82a0; --rp-border: #2a2f4a; --rp-border-2: #363c5c; /* words touch it -> the lighter step */ --rp-accent-strong: var(--rp-accent-on-dark); --rp-accent-soft: #1e2145; --rp-accent-line: #343a6b; }