/* elements.dev theme layer. Imported (before @elements/ui) by page.css and email.css. Written unlayered so it wins over the package's @layer tokens regardless of order. */ /* ─── Brand accent ────────────────────────────────────────────────── The exact logo blues. The shipped theme (themes/elements) generates its ramp in OKLCH at hue 235 and points --accent at the 600 step — which renders as a cyan (#0085BC) that clashes with the #49A9E7 favicon/mark (hue ~240). Pin the accent family to the brand hexes so the favicon, the mark, buttons, and accent text are one color. --accent fills: primary buttons, the mark, selection chrome --accent-deep hover / pressed / accent-colored text and links --accent-soft tinted accent backgrounds (callouts, focus wash) --accent-edge accent borders on tinted surfaces */ :root { /* --accent carries white text on a fill (every primary button) and doubles as a foreground on the page (accent text, links). Both readings are the same contrast ratio, so the logo blue cannot serve as --accent: white on #49A9E7 is 2.59:1, under the 4.5:1 WCAG AA needs. #1F6BA8 is 5.63:1 and #175A8F, the hover, is 7.25:1. The mark and the favicon stay #49A9E7; they are artwork, not text, and dark mode puts the logo blue back as the accent because there the text on it is dark. */ --accent: #1F6BA8; --accent-deep: #175A8F; --accent-soft: #EBF6FC; --accent-ink: #ffffff; --accent-edge: rgba(41, 126, 194, 0.30); /* Every link, whatever it is: the accent at rest, a step deeper on hover. Hover changes the color; nothing underlines. */ --link: var(--accent); --link-hover: var(--accent-deep); /* The brand ramp. The ui package's elements theme sets --accent from the logo blue but does not ship the ramp, and the mark, the footer and the kind chips read these steps by name. Brand exact at 500 and 900, the rest in OKLCH at hue 235. */ --elements-blue-50: oklch(0.97 0.015 235); --elements-blue-100: oklch(0.93 0.035 235); --elements-blue-200: oklch(0.87 0.060 235); --elements-blue-300: oklch(0.80 0.090 235); --elements-blue-400: oklch(0.73 0.115 235); --elements-blue-500: #49A9E7; --elements-blue-600: oklch(0.58 0.130 235); --elements-blue-700: oklch(0.48 0.120 235); --elements-blue-800: oklch(0.38 0.100 235); --elements-blue-900: #164C77; --elements-blue-950: oklch(0.18 0.060 235); } /* Dark-mode accent family. These MUST live here too: the block above is unlayered (so it beats the package's @layer tokens), which means the shipped dark overrides in themes/elements.css — being layered — can never win. Without this block --accent-soft stays #EBF6FC (near-white) in dark mode, so accent-tinted surfaces (e.g. the selected palette row) render as a white bar that hides its text. Values mirror the package's dark theme via the brand ramp; two-block pattern like the package (media query for "system", attribute for a pinned "dark"). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --link: #7FC4F0; --link-hover: #B5DDF7; /* The chrome hairline is an alpha over the page, so it has to flip with the page: 4% ink on white is a soft grey line, and the same value on near-black is nothing at all. The topbar had no bottom edge in dark mode anywhere on the site. */ --chrome-rule: rgba(255, 255, 255, 0.09); --accent: var(--elements-blue-500); --accent-deep: var(--elements-blue-400); --accent-soft: var(--elements-blue-950); --accent-ink: var(--elements-blue-950); --accent-edge: var(--elements-blue-800); /* The bug/feature kind tints are a deep red / navy tuned for light backgrounds; on near-black they're too dark to read. Lighten them for dark mode so the kind label stays legible. The content kinds are darkened in light mode to reach 4.5:1 on white; on near-black they take the lighter pastels back for the same reason. */ --kind-bug: #f27272; --kind-feature: #6aa5e0; --kind-question: #b794f4; --kind-welcome: #b794f4; --kind-discuss: #7BA89B; --kind-show: #D58475; --kind-ask: #7995B6; --kind-announce: #DBB05A; --kind-course: #D77F9E; --kind-lesson: #A07A96; --kind-guide: #A899C5; --kind-video: #DD9474; --kind-demo: #A996E6; } } :root[data-theme="dark"] { --link: #7FC4F0; --link-hover: #B5DDF7; --chrome-rule: rgba(255, 255, 255, 0.09); --accent: var(--elements-blue-500); --accent-deep: var(--elements-blue-400); --accent-soft: var(--elements-blue-950); --accent-ink: var(--elements-blue-950); --accent-edge: var(--elements-blue-800); --kind-bug: #f27272; --kind-feature: #6aa5e0; --kind-question: #b794f4; --kind-welcome: #b794f4; --kind-discuss: #7BA89B; --kind-show: #D58475; --kind-ask: #7995B6; --kind-announce: #DBB05A; --kind-course: #D77F9E; --kind-lesson: #A07A96; --kind-guide: #A899C5; --kind-video: #DD9474; --kind-demo: #A996E6; } /* Fonts — Inter for everything, JetBrains Mono for code. Stacks are @font-face'd in ./fonts.css; here we just point the semantic tokens at them. Type rule: --font-sans → Inter → titles, body, chrome, buttons, labels --font-mono → JetBrains Mono → fenced code, inline code, terminal, kbd */ :root { /* Softer than --rule on purpose: the chrome's edge should separate, not divide. See the dark overrides above. */ --chrome-rule: rgba(23, 23, 26, 0.04); --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Tighter "surgical" radius scale — a notch tighter than the defaults in @elements/ui. The defaults read a touch too rounded for our chrome; pulling each token down keeps the geometry present but less pillowy. */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 5px; --radius-xl: 7px; --radius-2xl: 9px; /* App-specific container for form-shaped pages (purchase, account settings). Narrower than the marketing width so multi-section forms read as a single column without inputs that stretch to the limits of marketing-page width. */ --container-form: 40rem; /* 640px */ /* Every short account form (sign up, sign in, password reset, the install page's first step) is this wide, so moving between them the fields never change size. */ --form-width: 40rem; /* 640px */ /* Video theater surface. A fixed "nice black" that stays the same in light and dark mode — a video player should always be black. The theater shell, its placeholder, the end overlay, and the dark navbar on a video page all use this so the chrome reads as one continuous black surface. (Was var(--bg-inverse), which went navy in light and flipped to near-white in dark.) NOTE: this is also the reference background color for RECORDING videos — record against pure black so footage blends seamlessly into the theater letterbox. Keep the two in sync. Was #0a0a0e, which read a shade lighter than the footage and drew a visible seam where the video met the surround. */ --theater-bg: #000000; /* Separation edge for the theater. In dark mode the page background is also near-black, so the black theater has no contrast against the content around it. This fixed faint-light hairline draws the edge without touching --theater-bg (which is locked to the recording color). Near-invisible on the light-mode white page; the divider in dark mode. */ --theater-edge: rgba(255, 255, 255, 0.12); /* Foreground on the theater / dark navbar. Pinned to the always-light --neutral-50 (a base palette value that does NOT remap per theme), so text stays light on the fixed-black surface in BOTH modes. Using --ink-inverse here breaks in dark mode: it flips to a dark neutral and the text (e.g. the "elements" wordmark) vanishes on the black. */ --theater-ink: var(--neutral-50); /* The site's default button is the package's large size, so a call to action is full size without a modifier. `.is-sm` stays available for dense controls. */ --button-height: var(--button-height-lg); --button-padding-x: var(--button-padding-x-lg); --button-font-size: var(--button-font-size-lg); /* ─── Kind chip palette ───────────────────────────────────────── Single source of truth for the chip color of every content kind. Mirrors `KindColor` in app/lib/enums.ts — change a hex here AND there together. Surfaces that render kind chips (feed row, palette, post byline, search results, profile rows, the feed-digest email's inline styles) all read these values. Tone: soft / pastel — lower saturation than Tailwind 600. Hue separation per kind is the dominant signal; the chips themselves don't shout. Light-only hexes; stays here until dark mode (deferred) tokenizes it. Locked rules (don't reshuffle without asking): - never red / green / brown for content kinds (status-coded) - hue per kind never collapses with another kind */ /* Post kinds — pigment-named editorial palette. Mirror of KindColor in app/lib/enums.ts. */ --kind-discuss: #4F7A6E; /* eucalyptus */ --kind-show: #A85C4E; /* coral */ --kind-ask: #597494; /* denim */ --kind-announce: #936B00; /* goldenrod */ /* Other content kinds (parallel set on the chip axis) */ --kind-course: #AA5776; /* rose */ --kind-lesson: #8C6782; /* plum */ --kind-guide: #796B94; /* lilac */ --kind-video: #A35F41; /* peach */ --kind-demo: #6A52B8; /* violet: the one hue the kinds did not use, clear of the blue badge and links */ /* Neutrals — content kinds that don't carry a strong semantic hue (comment / user are about the actor, not the content type; page is structural). */ --kind-comment: #94a3b8; /* slate */ --kind-user: #94a3b8; /* slate */ --kind-page: #9ca3af; /* gray */ /* Defensive fallback — the generic "post" chip should not normally render (post hits surface their actual postKind), but keep a value on hand for any caller that emits "post". */ --kind-post: var(--kind-discuss); /* Issue tracker kinds — bug + feature carry the status signal directly (red FOR bug is the entire point; navy reads as steady-progress for feature). The red/green/brown lockout that applies to every other content kind doesn't apply here. Mirror in app/lib/enums.ts (KindColor) when adjusting. */ --kind-bug: #9b1c1c; /* deep red */ --kind-feature: #1e4d8c; /* navy */ --kind-question: #7c3aed; /* violet */ --kind-welcome: #7c3aed; }