/* ========================================================================== Turbo IT brand tokens -------------------------------------------------------------------------- Source of record: the Demo Builder (generate.turboit.uk), whose one shared stylesheet is turbo-it-generate/src/ui-css.js. Every value below is that file's value; the names are namespaced so a product can import them without colliding with its own theme. Where the builder's file carries a reason for a value (an AA measurement, a contrast trap), that reason is carried here too: those notes are the point of the file. The builder has NO dark mode. Section 4 is a documented extension for the products that need one (the hub); it is the only part of this file that is not the Demo Builder's own. Usage: or "dark" Rules: BRAND.md. Never hard-code a hex in a product; if a value is missing, add it here first, with its measured contrast. ========================================================================== */ :root { /* ---- 1. palette (ui-css.js, ":root") --------------------------------- */ --ti-background: #f6f3ed; /* page: warm off-white, "dirty" cream */ --ti-surface: #f2eee6; /* recessed surface, table heads, .dotted */ --ti-card: #fefcf8; /* cards, panels, topbar, rows */ --ti-input-bg: #ffffff; /* form fields are the one true white */ --ti-foreground: #231f19; --ti-muted: #eee9e0; /* hover fills, chips, skeletons */ --ti-muted-foreground: #605a52; --ti-border: #dfdad1; --ti-border-hover: #cfc8bb; /* field hover, from the input rule */ --ti-placeholder: #a39e95; --ti-primary: #1276ce; --ti-primary-hover: #0064b5; --ti-primary-foreground: #fcfcfc; --ti-ring: #1276ce; --ti-glow: #0083e32e; /* the primary button's 40px glow */ /* Fills AND 12px text on their own tint. Measured on the tint over --card: #e40014 4.14:1 and #15803d 4.40:1 as text (below AA); #f99c00 was far worse at 1.94:1. The values below deepen to 6.1-6.6:1 on the card and 4.9-5.7:1 on their tints, and keep a 6.4:1 white-on-red button. The tint backgrounds stay the bright rgba so the surfaces do not shift. */ --ti-destructive: #c1000f; --ti-success: #0f6a2e; --ti-warning: #8a5400; /* text colours for use ON a tinted background (the same hues at 5.3-6.7:1) */ --ti-info-fg: #0064b5; --ti-success-fg: #0f6a2e; --ti-destructive-fg: #c1000f; --ti-warning-fg: #8a5400; --ti-info-bg: rgba(18, 118, 206, 0.08); --ti-info-bd: rgba(18, 118, 206, 0.25); --ti-ok-bg: rgba(21, 128, 61, 0.08); --ti-ok-bd: rgba(21, 128, 61, 0.25); --ti-err-bg: rgba(228, 0, 20, 0.08); --ti-err-bd: rgba(228, 0, 20, 0.25); --ti-warn-bg: rgba(249, 156, 0, 0.10); --ti-warn-bd: rgba(249, 156, 0, 0.30); /* the gradient: accent line, logo, progress fill. Never behind text. */ --ti-grad: linear-gradient(100deg, #8a4af5 0%, #1276ce 46%, #0093cb 74%, #00b5bc 100%); /* ---- 2. type ---------------------------------------------------------- */ --ti-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ti-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ti-text-2xs: 11px; /* .ti-tiny, menu foot */ --ti-text-xs: 12px; /* .ti-small, chips, badges, table heads, .foot */ --ti-text-sm: 13px; /* .ti-sub, labels, table cells, alerts, toasts */ --ti-text-md: 14px; /* body, fields, buttons, tabs */ --ti-text-lg: 15px; /* .ti-h3, card heads, brand text, .btn-lg */ --ti-text-h2: 18px; /* h2 */ --ti-text-h1: 24px; /* .tile .v */ --ti-text-display: 22px; /* h1, .ti-h1 */ /* There is no 28px or 40px step in the builder. Do not add one for a product UI: the whole system is 11-24px, and a 40px headline in a dashboard reads as a marketing page. */ --ti-track-tight: -0.02em; /* h1, .ti-h1, .tile .v */ --ti-track-brand: -0.01em; /* .ti-brand .ti-b1, .ti-h2, login .bt */ /* ---- 3. shape, depth, motion (ui-css.js) ------------------------------ */ --ti-radius: 10px; /* the builder's --radius: segs, panels, dropzones */ --ti-radius-sm: 8px; /* buttons, fields, alerts */ --ti-radius-xs: 6px; /* kbd, skeletons, small thumbs */ --ti-radius-card: 12px; /* .card, .card-flat, .tile, .ti-menu */ --ti-radius-modal: 14px; /* .modal-card */ --ti-radius-pill: 999px; /* .pill, .chip, .badge, switch, avatar */ --ti-shadow-sm: 0 1px 2px rgba(40, 30, 15, 0.05); --ti-shadow-card: 0 1px 2px rgba(40, 30, 15, 0.05), 0 14px 34px -16px rgba(40, 30, 15, 0.16); --ti-glow-primary: 0 0 40px -8px var(--ti-glow); --ti-glow-primary-hover: 0 0 60px -5px var(--ti-glow); --ti-tt: 150ms ease; --ti-nav-h: 60px; /* the app shell's topbar */ /* ---- 4. metrics the components above are built from ------------------- */ --ti-control-h: 40px; /* .btn, inputs, .ti-userbtn */ --ti-control-h-sm: 32px; /* .btn-sm */ --ti-control-h-lg: 48px; /* .btn-lg */ --ti-control-h-touch: 44px; /* @media(pointer:coarse) lift */ --ti-icon-btn: 36px; /* .btn-icon */ --ti-row-h: 48px; /* .tbl td */ } /* ======================= DARK (documented extension) ====================== The Demo Builder has no dark mode, so there is nothing here to copy. This is derived so a product that ships dark (the hub) stays in the same family: the accents keep their relationships (electric is the fill, a lighter electric is the text on paper, and text ON an electric fill is dark, never white). Delete it if a product does not need it. */ [data-ti-theme="dark"] { --ti-background: #05070c; --ti-surface: #0a0e15; --ti-card: #0d131c; --ti-input-bg: #121a25; --ti-foreground: #eceff1; --ti-muted: #121a25; --ti-muted-foreground: #9aa4ae; --ti-border: rgba(255, 255, 255, 0.10); --ti-border-hover: rgba(255, 255, 255, 0.20); --ti-placeholder: #6f7883; --ti-primary: #0090ff; --ti-primary-hover: #31a6ff; --ti-primary-foreground: #04101c; /* white on electric is 3.26:1 here */ --ti-ring: #0090ff; --ti-glow: rgba(0, 144, 255, 0.20); --ti-destructive: #f87171; --ti-success: #4ade80; --ti-warning: #fbbf24; --ti-info-fg: #4db2ff; --ti-success-fg: #4ade80; --ti-destructive-fg: #f87171; --ti-warning-fg: #fbbf24; --ti-info-bg: rgba(0, 144, 255, 0.14); --ti-info-bd: rgba(0, 144, 255, 0.30); --ti-ok-bg: rgba(74, 222, 128, 0.12); --ti-ok-bd: rgba(74, 222, 128, 0.30); --ti-err-bg: rgba(248, 113, 113, 0.12); --ti-err-bd: rgba(248, 113, 113, 0.30); --ti-warn-bg: rgba(251, 191, 36, 0.12); --ti-warn-bd: rgba(251, 191, 36, 0.30); --ti-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --ti-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -20px rgba(0, 0, 0, 0.75); color-scheme: dark; }