/* * BoxFlow — tokens.css * LAYER 1 — PRIMITIVE TOKENS * * ┌─────────────────────────────────────────────────────────────┐ * │ DESIGN FIRM: this is your file. │ * │ Replace values here. Nothing else needs to change. │ * │ DO NOT rename variables — names are referenced everywhere. │ * │ DO NOT add selectors or class rules — values only. │ * └─────────────────────────────────────────────────────────────┘ * * Values are exact hex conversions of the handoff oklch palette. * Conversion script: scripts/oklch-to-hex.py * Source: design_handoff_boxflow_redesign/tokens/tokens.css */ /* ── Font loading ────────────────────────────────────────────── */ @font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/IBMPlexSans-Regular.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/IBMPlexSans-Medium.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/IBMPlexSans-Bold.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/IBMPlexMono-Medium.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ═══════════════════════════════════════════════════════════ DARK PALETTE — default (no data-theme attribute) Exact hex from: oklch values in handoff tokens.css ═══════════════════════════════════════════════════════════ */ /* ── Surface scale — dark ────────────────────────────────── */ /* oklch(18% 0.01 260) | oklch(22% 0.01 260) | oklch(15% 0.01 260) */ --color-ink-900: #0F1216; /* page background */ --color-ink-700: #181B1F; /* cards, sidebar, topbar */ --color-ink-500: #22262C; /* hover state, avatar bg */ --color-ink-border: #25292F; /* borders — solid (oklch 28%) */ --color-ink-border-strong: #393D45; /* focus borders (oklch 36%) */ /* ── Accent — dark mode (bright for navy bg) ─────────────── */ /* oklch(70% 0.14 245) */ --color-blue-dark: #46A6EF; /* primary accent — dark mode */ --color-blue-dark-hover: #5BB9FF; /* hover — oklch(76% 0.14 245) */ --color-blue-dark-a08: rgba(70,166,239,0.08); --color-blue-dark-a14: rgba(70,166,239,0.14); --color-blue-dark-a20: rgba(70,166,239,0.20); --color-blue-dark-a32: rgba(70,166,239,0.32); /* ── Status — dark mode ──────────────────────────────────── */ /* oklch(72% 0.14 155) | oklch(78% 0.15 70) | oklch(70% 0.17 25) | oklch(72% 0.12 230) */ --color-green-dk: #4EBE7D; --color-amber-dk: #F4A437; --color-red-dk: #F66D67; --color-info-dk: #43B2E1; --color-green-dk-a14: rgba(78,190,125,0.14); --color-green-dk-a28: rgba(78,190,125,0.28); --color-amber-dk-a14: rgba(244,164,55,0.14); --color-amber-dk-a30: rgba(244,164,55,0.30); --color-red-dk-a14: rgba(246,109,103,0.14); --color-red-dk-a28: rgba(246,109,103,0.28); --color-info-dk-a14: rgba(67,178,225,0.14); --color-info-dk-a28: rgba(67,178,225,0.28); /* ── Text — dark mode ────────────────────────────────────── */ /* oklch(96% 0.005 85) | oklch(82% 0.006 85) | oklch(65% 0.008 85) | oklch(50% 0.008 85) */ --color-text-dk-1: #F3F2EE; /* primary — headings */ --color-text-dk-2: #C6C4C0; /* body text */ --color-text-dk-3: #918F8A; /* muted — labels, meta */ --color-text-dk-4: #65635E; /* placeholder */ /* ── Legacy gold — kept for backward-compat aliases ─────── */ --color-gold-500: #c8963e; --color-gold-300: #e8b86d; --color-gold-500-a04: rgba(200,150,62,0.04); --color-gold-500-a06: rgba(200,150,62,0.06); --color-gold-500-a08: rgba(200,150,62,0.08); --color-gold-500-a15: rgba(200,150,62,0.15); --color-gold-500-a20: rgba(200,150,62,0.20); --color-gold-500-a30: rgba(200,150,62,0.30); --color-gold-500-a40: rgba(200,150,62,0.40); /* ── Purple — samples module ─────────────────────────────── */ --color-purple-500: #b87fe8; --color-purple-500-a12: rgba(148,88,210,0.12); /* ── Cyan — dbviewer numeric display (dev tool only) ─────── */ --color-cyan-400: #7ec8e3; /* ═══════════════════════════════════════════════════════════ LIGHT PALETTE — warm paper Used by semantic tokens when [data-theme="light"] is set. All values: exact hex from handoff oklch conversion. ═══════════════════════════════════════════════════════════ */ /* ── Paper scale ─────────────────────────────────────────── */ /* oklch(98.5% 0.004 85) | oklch(100% 0.002 85) | oklch(96.8% 0.005 85) | oklch(97% 0.006 85) */ --color-paper-page: #FBFAF7; /* page bg */ --color-paper-card: #FFFFFF; /* cards, modals */ --color-paper-sunk: #F6F4F1; /* sidebar, table headers */ --color-paper-tint: #F7F5F1; /* row hover */ /* ── Paper borders ───────────────────────────────────────── */ /* oklch(90% 0.006 85) | oklch(82% 0.008 85) */ --color-paper-border: #E0DEDA; --color-paper-border-strong: #C6C4BE; /* ── Carbon text scale ───────────────────────────────────── */ /* oklch(22% 0.01 260) | oklch(40% 0.01 260) | oklch(55% 0.008 260) | oklch(68% 0.006 260) */ --color-carbon-900: #181B1F; /* primary text */ --color-carbon-700: #45484D; /* body text */ --color-carbon-500: #666A6E; /* muted — darkened from #6F7276 for WCAG AA (>=4.5:1) on the light sunk-grey sidebar */ --color-carbon-400: #96989C; /* placeholder */ /* ── Accent — light mode (deep blue on white) ────────────── */ /* oklch(52% 0.15 245) | oklch(46% 0.16 245) */ --color-blue-light: #006EB8; --color-blue-light-hover: #005BAA; --color-blue-light-a06: rgba(0,110,184,0.06); --color-blue-light-a08: rgba(0,110,184,0.08); --color-blue-light-a10: rgba(0,110,184,0.10); --color-blue-light-a22: rgba(0,110,184,0.22); /* ── Status — light mode ─────────────────────────────────── */ /* oklch(54% 0.13 155) | oklch(68% 0.15 70) | oklch(55% 0.18 25) | oklch(55% 0.11 230) */ --color-green-lt: #0D844C; --color-amber-lt: #A05F00; /* darkened from #D28500 for WCAG AA (>=4.5:1) warning TEXT on white; the -a12/-a30 bg tints below keep the brighter amber */ --color-red-lt: #C53637; --color-info-lt: #007CA5; --color-green-lt-a10: rgba(13,132,76,0.10); --color-green-lt-a25: rgba(13,132,76,0.25); --color-amber-lt-a12: rgba(210,133,0,0.12); --color-amber-lt-a30: rgba(210,133,0,0.30); --color-red-lt-a10: rgba(197,54,55,0.10); --color-red-lt-a25: rgba(197,54,55,0.25); --color-info-lt-a10: rgba(0,124,165,0.10); --color-info-lt-a25: rgba(0,124,165,0.25); /* Status TEXT shades (light theme): message text on its own status tint needs 4.5:1, which the plain colours above miss (4.0 to 4.6:1). */ --color-green-lt-text: #0B7241; --color-red-lt-text: #B53233; --color-amber-lt-text: #935700; --color-info-lt-text: #006B8E; --color-purple-lt-text: #7A3FB5; /* ── Role badges (Sales Manager, Purchase Manager, Store Manager, Supervisor, Owner) ────────────────────────────────────── Text colour and its own tint. Light: the hue and chroma of the dark-mode colour, lightness lowered in OKLCH until the text reaches 4.7:1 on its own 10% tint over white, the sunk grey and the page (WCAG AA is 4.5:1; the old values were 2.02 to 4.16). Dark: lightness raised only where the old colour was under 4.7:1 over the card, the page and the row hover (Sales, Purchase); Owner keeps its amber in the dark theme. Admin keeps the brand token. */ --color-role-sales-lt: #2761BA; --color-role-sales-lt-a10: rgba(39,97,186,0.10); --color-role-purchase-lt: #952AC8; --color-role-purchase-lt-a10: rgba(149,42,200,0.10); --color-role-store-lt: #067065; --color-role-store-lt-a10: rgba(6,112,101,0.10); --color-role-supervisor-lt: #027341; --color-role-supervisor-lt-a10: rgba(2,115,65,0.10); --color-role-owner-lt: #905503; --color-role-owner-lt-a10: rgba(144,85,3,0.10); --color-role-owner-dk: #F4A437; --color-role-owner-dk-a14: rgba(244,164,55,0.14); --color-role-sales-dk: #6BA4FE; --color-role-sales-dk-a14: rgba(107,164,254,0.14); --color-role-purchase-dk: #D081FF; --color-role-purchase-dk-a14: rgba(208,129,255,0.14); --color-role-store-dk: #2DBFAE; --color-role-store-dk-a14: rgba(45,191,174,0.14); --color-role-supervisor-dk: #4EBE7D; --color-role-supervisor-dk-a14: rgba(78,190,125,0.14); /* ── Typography ──────────────────────────────────────────── */ --font-sans: 'IBM Plex Sans', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --font-display: 'IBM Plex Sans', sans-serif; } /* ═══════════════════════════════════════════════════════════════ BACKWARD-COMPAT PRIMITIVES Referenced by class rules in components.css Part C. DO NOT use in new code — use semantic tokens or new names above. ═══════════════════════════════════════════════════════════════ */ :root { /* Old slate scale — used in badge/timeline class rules */ --color-slate-100: #F3F2EE; /* mapped to text-dk-1 value */ --color-slate-300: #C6C4C0; /* mapped to text-dk-2 value */ --color-slate-500: #918F8A; /* mapped to text-dk-3 value */ --color-slate-500-a08: rgba(145,143,138,0.08); --color-slate-500-a10: rgba(145,143,138,0.10); --color-slate-500-a12: rgba(145,143,138,0.12); --color-slate-500-a15: rgba(145,143,138,0.15); --color-slate-500-a20: rgba(145,143,138,0.20); --color-slate-500-a35: rgba(145,143,138,0.35); --color-slate-500-a40: rgba(145,143,138,0.40); --color-slate-500-a50: rgba(145,143,138,0.50); } /* ═══════════════════════════════════════════════════════════════════════ FRONT-DOOR PALETTE — primitives for zofbox's own pages (the central "Welcome to zofbox" page, /signup and the "we couldn't find that workspace" page). The same ink, warm paper and lime as the marketing site, so the click from www.zofbox.com lands in the same colours. Used only by the [data-surface="front"] block at the end of components.css; no other page reads these. Lime is decoration only (a small dot): on paper it measures 1.07:1, so it never carries text, a border or a focus ring. ═══════════════════════════════════════════════════════════════════════ */ :root { --color-front-paper-page: #F7F7F3; --color-front-paper-card: #FDFDFA; --color-front-paper-border: #DEDFD8; --color-front-paper-field: #8A8C85; /* input border: 3.2:1 on the page, as a control edge needs */ --color-front-ink: #111210; /* primary action and text on paper */ --color-front-ink-hover: #2C2D29; --color-front-ink-text-2: #3A3B37; --color-front-ink-text-3: #696B65; /* muted: 5.0:1 on the page */ --color-front-ink-a05: rgba(17,18,16,0.05); --color-front-ink-a10: rgba(17,18,16,0.10); --color-front-ink-a20: rgba(17,18,16,0.20); --color-front-ink-a04: rgba(17,18,16,0.04); --color-front-night-page: #1A1B17; --color-front-night-card: #252621; --color-front-night-border: #363731; --color-front-night-field: #7D7F78; --color-front-bone: #E8E6E0; /* primary action and text on night */ --color-front-bone-hover: #FFFFFF; --color-front-bone-text-2: #C9C7C1; --color-front-bone-text-3: #9A9C96; --color-front-bone-a06: rgba(232,230,224,0.06); --color-front-bone-a12: rgba(232,230,224,0.12); --color-front-bone-a22: rgba(232,230,224,0.22); --color-front-bone-a05: rgba(232,230,224,0.05); --color-front-signal: #D8FF3F; --color-front-signal-edge: rgba(100,120,20,0.35); --color-white-a25: rgba(255,255,255,0.25); /* the track of the busy ring on a primary button (sign-in, set password) */ --color-mark-green: #0E5D46; /* the brand mark's tile: colour-locked, the same in both themes (public/favicon.svg) */ --color-mark-paper: #FAF8F3; /* the brand mark's letters: colour-locked */ }