/* * The design tokens for eric-patton.dev and RequestDesk. * * One file, imported by both, so the site and the demo read as one product. Everything is * prefixed --ep- so it can drop into an application that already carries its own variables * (RequestDesk has Angular Material's) without colliding. * * ---- How theming works here ------------------------------------------------------------- * * Every colour is declared once, as a light-dark() pair. The browser resolves which half to use * from the element's `color-scheme`, so switching the entire product between themes is one * property on : * * follows the operating system * forced light * forced dark * * No duplicated palette blocks, no class toggling on every component, and no JavaScript needed * for the default case. light-dark() only accepts colours, so the handful of non-colour tokens * that differ by theme (shadow strength, artwork opacity) are set in the small blocks at the * bottom, and composite values like box-shadow are built from a colour token instead. * * ---- The three type voices ---------------------------------------------------------------- * display Bricolage Grotesque, headlines only, where the personality lives * sans Inter, every piece of working UI, legible at 13px in a dense table row * mono JetBrains Mono, technical detail: counts, stack names, labels, status codes */ :root { /* Both schemes are supported, so light-dark() has something to resolve against and the browser paints native controls and scrollbars to match. */ color-scheme: light dark; /* ---- Type families ------------------------------------------------------------------- */ --ep-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --ep-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ep-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---- Type scale ---------------------------------------------------------------------- */ /* Fluid between a 380px phone and a 1440px desktop. The display sizes carry the page so they move the most; body text barely moves, because reading size is reading size. */ --ep-text-display: clamp(2.9rem, 1.4rem + 6vw, 6.75rem); --ep-text-title: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); --ep-text-heading: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); --ep-text-subheading: 1.15rem; --ep-text-body: 1rem; --ep-text-small: 0.9rem; --ep-text-fine: 0.8125rem; --ep-text-label: 0.6875rem; --ep-leading-tight: 1.02; --ep-leading-snug: 1.22; --ep-leading-normal: 1.6; --ep-leading-relaxed: 1.72; --ep-tracking-display: -0.032em; --ep-tracking-tight: -0.015em; --ep-tracking-label: 0.14em; --ep-weight-regular: 400; --ep-weight-medium: 500; --ep-weight-semibold: 600; --ep-weight-bold: 700; --ep-weight-black: 800; /* ---- Colour: ground and surfaces ------------------------------------------------------ */ /* Dark is near-black with a slight blue cast rather than pure #000, so shadows still have somewhere to go. Light is a cool off-white ground with white surfaces above it, so the same "raised" gradients that give cards depth in the dark theme still read in the light one. */ --ep-bg: light-dark(#f4f5f8, #0a0b0f); --ep-bg-raised: light-dark(#fafbfc, #101219); --ep-surface: light-dark(#ffffff, #151824); --ep-surface-2: light-dark(#eef0f4, #1c2030); --ep-line: light-dark(#e2e5ea, #262b3b); --ep-line-strong: light-dark(#c9cfd9, #343a4e); /* ---- Colour: text --------------------------------------------------------------------- */ --ep-ink: light-dark(#14161c, #f2f3f7); --ep-ink-2: light-dark(#545b6b, #a3a9bd); --ep-ink-3: light-dark(#79808f, #6f7689); /* ---- Colour: accent ------------------------------------------------------------------- */ /* Amber rather than the default SaaS blue: warm against a cold ground, and the colour the cover art is lit with, so the page and the pictures agree. The light half is a much deeper amber. The dark theme's #ffa94d is nearly invisible on white, and an accent that fails as a link colour is not an accent, it is a decoration. */ --ep-accent: light-dark(#b45309, #ffa94d); --ep-accent-hot: light-dark(#c2410c, #ff8a3d); --ep-accent-deep: light-dark(#7c2d12, #c2410c); --ep-accent-soft: light-dark(rgba(180, 83, 9, 0.1), rgba(255, 169, 77, 0.12)); --ep-on-accent: light-dark(#fffaf5, #2a1405); /* The two supporting hues. Ice is the cool counterweight in the headline gradient and on informational chips; lime means live, healthy, passing. */ --ep-ice: light-dark(#2563eb, #8fb8ff); --ep-lime: light-dark(#3f7d20, #a6e34d); /* ---- Colour: feedback ----------------------------------------------------------------- */ --ep-positive: light-dark(#2f6b34, #a6e34d); --ep-positive-bg: light-dark(#e8f1e6, #1a2410); --ep-caution: light-dark(#8a6410, #ffa94d); --ep-caution-bg: light-dark(#f8f0da, #2c1e10); --ep-critical: light-dark(#b3261e, #ff7a6b); --ep-critical-bg: light-dark(#fbeae8, #2c1717); /* ---- Colour: RequestDesk status palette ----------------------------------------------- */ /* Seven states that have to stay readable at 11px inside a dense table row, in either theme. Both halves are a saturated ink on a tinted ground rather than white on a solid fill, which holds up at small sizes and stops the table turning into a bag of sweets. */ --ep-status-new-ink: light-dark(#1c3a5b, #8fb8ff); --ep-status-new-bg: light-dark(#e7eef6, #16203a); --ep-status-triaged-ink: light-dark(#4c3f86, #bcaaf7); --ep-status-triaged-bg: light-dark(#ece9f7, #221d3a); --ep-status-inprogress-ink: light-dark(#0f6152, #6fd3bb); --ep-status-inprogress-bg: light-dark(#e2f0ec, #10282a); --ep-status-blocked-ink: light-dark(#a4552b, #ffa94d); --ep-status-blocked-bg: light-dark(#f7ece4, #2c1e10); --ep-status-resolved-ink: light-dark(#2f6b34, #a6e34d); --ep-status-resolved-bg: light-dark(#e8f1e6, #1a2410); --ep-status-closed-ink: light-dark(#5f594f, #a3a9bd); --ep-status-closed-bg: light-dark(#eeeef1, #1c2030); --ep-status-cancelled-ink: light-dark(#8b8478, #6f7689); --ep-status-cancelled-bg: light-dark(#f3f3f5, #171a24); /* ---- Colour: RequestDesk priority ------------------------------------------------------ */ --ep-priority-low: light-dark(#79808f, #6f7689); --ep-priority-normal: light-dark(#545b6b, #a3a9bd); --ep-priority-high: light-dark(#b45309, #ffa94d); --ep-priority-urgent: light-dark(#b3261e, #ff7a6b); /* ---- Space ---------------------------------------------------------------------------- */ --ep-space-3xs: 0.25rem; --ep-space-2xs: 0.5rem; --ep-space-xs: 0.75rem; --ep-space-sm: 1rem; --ep-space-md: 1.5rem; --ep-space-lg: 2rem; --ep-space-xl: 3rem; --ep-space-2xl: 4.5rem; --ep-space-3xl: 7rem; --ep-space-section: clamp(4.5rem, 2rem + 9vw, 8rem); /* ---- Measure and layout ---------------------------------------------------------------- */ --ep-measure-prose: 64ch; --ep-measure-narrow: 46ch; --ep-page-max: 75rem; --ep-page-gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem); /* ---- Radius ---------------------------------------------------------------------------- */ --ep-radius-xs: 4px; --ep-radius-sm: 8px; --ep-radius-md: 14px; --ep-radius-lg: 22px; --ep-radius-pill: 999px; /* ---- Elevation -------------------------------------------------------------------------- */ /* box-shadow is a composite value, so it cannot go through light-dark() directly. The colour inside it can, which is the whole trick: one token flips and every shadow follows. A dark theme needs a much heavier shadow than a light one to read as depth at all. */ --ep-shadow-color: light-dark(rgba(20, 22, 28, 0.1), rgba(0, 0, 0, 0.55)); --ep-shadow-color-strong: light-dark(rgba(20, 22, 28, 0.16), rgba(0, 0, 0, 0.95)); --ep-shadow-sm: 0 1px 2px var(--ep-shadow-color); --ep-shadow-md: 0 18px 40px -20px var(--ep-shadow-color-strong); --ep-shadow-lg: 0 30px 60px -30px var(--ep-shadow-color-strong); --ep-shadow-xl: 0 40px 80px -32px var(--ep-shadow-color-strong), 0 0 0 1px var(--ep-shadow-color); --ep-glow-accent: 0 8px 26px -10px light-dark(rgba(180, 83, 9, 0.5), rgba(255, 138, 61, 0.9)); --ep-focus-ring: 0 0 0 2px var(--ep-bg), 0 0 0 4px var(--ep-accent); /* ---- Motion ----------------------------------------------------------------------------- */ --ep-ease: cubic-bezier(0.2, 0, 0.1, 1); --ep-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ep-duration-fast: 150ms; --ep-duration: 300ms; --ep-duration-slow: 700ms; /* ---- Theme-dependent values that are not colours ------------------------------------------ */ /* The hero and card artwork are dark photographs. Behind dark text on a pale ground they have to drop to a ghost of themselves or they fight the words; on the dark ground they can carry the page. Defaults here are the light values, overridden for dark below. */ --ep-art-opacity: 0.14; --ep-art-blend: multiply; } /* Dark, chosen by the operating system, unless the page has been forced light. */ @media (prefers-color-scheme: dark) { :root:not([data-ep-theme="light"]) { --ep-art-opacity: 0.5; --ep-art-blend: normal; } } /* An explicit choice always wins, in both directions. Setting color-scheme is what re-resolves every light-dark() token on the page, so these two rules are the entire theme switch. */ :root[data-ep-theme="light"] { color-scheme: light; --ep-art-opacity: 0.14; --ep-art-blend: multiply; } :root[data-ep-theme="dark"] { color-scheme: dark; --ep-art-opacity: 0.5; --ep-art-blend: normal; }