/* No external font import. Roboto was previously fetched from Google Fonts (render-blocking + cross-region DNS dependency, especially fragile from RU networks). The system-ui stack below picks San Francisco on macOS, Segoe UI on Windows, Roboto on Android, Cantarell on Gnome — all modern neutral sans-serifs, visually within a hair of the previous Roboto fallback. If a future brand decision needs a specific typeface, self-host the woff2 instead of re-introducing a third-party @import. */ /* ============================================================ Tokens — Kinescope DS (Library: c1MOPbjTAT1GexX9BMt3Rs) Source of truth: figma.com/design/c1MOPbjTAT1GexX9BMt3Rs This prototype uses Dark mode of Kinescope tokens. Usage rules for feature-CSS (channels, messages, composer, etc): - Reference Layer E only: --surface*, --ink*, --accent*, --space-*, --radius-*, --shadow-*, --transition*, --avatar-*, --font-*, --glass*. - Do NOT reference Layer A (--color-blue-100), Layer B (--surface-button-*) or Layer C (--num-12) directly. They exist to compose Layer E only. - If a feature needs a new value, add an alias in Layer E here rather than hardcoding rgba(...) / 12px / 160ms in feature-CSS. ============================================================ */ :root { /* ---- Layer A: DS Primitives (Color/*) ---- */ --color-white-100: #ffffff; --color-white-64: rgba(255,255,255,0.64); --color-white-40: rgba(255,255,255,0.40); --color-white-32: rgba(255,255,255,0.32); --color-white-24: rgba(255,255,255,0.24); --color-white-16: rgba(255,255,255,0.16); --color-white-12: rgba(255,255,255,0.12); --color-white-8: rgba(255,255,255,0.08); --color-white-6: rgba(255,255,255,0.06); --color-white-4: rgba(255,255,255,0.04); --color-black-100: #111111; --color-black-64: rgba(17,17,17,0.64); --color-black-32: rgba(17,17,17,0.32); --color-black-16: rgba(17,17,17,0.16); --color-black-8: rgba(17,17,17,0.08); --color-black-absolute-0: #000000; --color-black-absolute-12: #1f1f1f; --color-black-absolute-16: #292929; --color-black-absolute-24: #3d3d3d; --color-blue-100: #6161fc; --color-blue-88: rgba(97,97,252,0.88); --color-blue-32: rgba(97,97,252,0.32); --color-blue-24: rgba(97,97,252,0.24); --color-blue-16: rgba(97,97,252,0.16); --color-blue-8: rgba(97,97,252,0.08); --color-red-100: #f54b48; --color-red-88: rgba(245,75,72,0.88); --color-red-32: rgba(245,75,72,0.32); --color-red-16: rgba(245,75,72,0.16); --color-red-8: rgba(245,75,72,0.08); --color-green-100: #00a466; --color-green-88: rgba(0,164,102,0.88); --color-green-16: rgba(0,164,102,0.16); --color-green-8: rgba(0,164,102,0.08); --color-yellow-100: #ff8e0c; --color-yellow-16: rgba(255,142,12,0.16); --color-yellow-8: rgba(255,142,12,0.08); /* DS Pastel — Speak room participant tiles */ --pastel-clay: #fe845b; --pastel-skin: #d6b487; --pastel-sand: #feba5b; --pastel-rose: #f6b9ce; --pastel-sea: #8ea6ee; --pastel-olive: #9fcfbe; --pastel-swamp: #8f9b7a; --pastel-indigo: #a682e0; /* ---- Layer B: DS Semantic Tokens (Dark mode) ---- */ /* DS path: Surface// — matches Figma `Library` → `Kinescope tokens` collection naming so any future React/styled- components import maps 1:1. */ --surface-neutral-default: var(--color-black-absolute-16); /* #292929 */ --surface-neutral-secondary: var(--color-white-16); --surface-accent-default: var(--color-blue-100); --surface-success-default: var(--color-green-100); --surface-warning-default: var(--color-yellow-100); --surface-alert-default: var(--color-red-100); --surface-button-neutral-default: var(--color-white-32); --surface-button-neutral-hovered: var(--color-white-16); --surface-button-accent-default: var(--color-blue-100); --surface-button-accent-hovered: var(--color-blue-88); --surface-button-alert-default: var(--color-red-100); --surface-button-alert-hovered: rgba(245,75,72,0.64); /* DS path: Surface/radio//. Mirror the button family so every checked/unchecked + hover/disabled combination has a token instead of a hand-tuned rgba. Composer / settings / context menu radios all converge here. */ --surface-radio-accent-default: var(--color-blue-100); --surface-radio-accent-hovered: var(--color-blue-88); --surface-radio-accent-disabled: var(--color-blue-32); --surface-radio-neutral-default: var(--color-white-32); --surface-radio-neutral-hovered: var(--color-white-16); --surface-radio-neutral-disabled: var(--color-white-8); /* DS path: Surface/checkbox//. Same shape — Hub doesn't render many checkboxes today but reserving the names keeps the surface map symmetrical with DS. */ --surface-checkbox-accent-default: var(--color-blue-100); --surface-checkbox-accent-hovered: var(--color-blue-88); --surface-checkbox-accent-disabled: var(--color-blue-32); --surface-checkbox-neutral-default: var(--color-white-32); --surface-checkbox-neutral-hovered: var(--color-white-16); --surface-checkbox-neutral-disabled: var(--color-white-8); /* DS path: Surface/toggle//. Used by .toggle, .privacy-switch, .notif-toggle. `-thumb` is the white pill knob that slides — extracted so light-mode can flip it without rewriting every toggle's `::after`. */ --surface-toggle-accent-default: var(--color-blue-100); --surface-toggle-accent-hovered: var(--color-blue-88); --surface-toggle-accent-disabled: var(--color-blue-32); --surface-toggle-neutral-default: var(--color-white-32); --surface-toggle-neutral-hovered: var(--color-white-16); --surface-toggle-neutral-disabled: var(--color-white-8); --surface-toggle-thumb: var(--color-white-100); /* DS path: Surface/loader//default. Used by .kc-spinner's border-top accent. `-track-default` is the dim ring underneath. */ --surface-loader-accent-default: var(--color-blue-100); --surface-loader-neutral-default: var(--color-white-32); --surface-loader-track-default: var(--color-white-8); /* DS path: Surface/label//default. Translucent tints used by status pills, role tags, badges. Differs from `Surface// default` (a solid colour) — labels are always rgba-soft so they sit on any background without colliding. */ --surface-label-accent-default: var(--color-blue-16); --surface-label-success-default: var(--color-green-16); --surface-label-warning-default: var(--color-yellow-16); --surface-label-alert-default: var(--color-red-16); --surface-label-neutral-default: var(--color-white-12); --surface-informer-accent-default: var(--color-blue-8); --surface-informer-success-default: var(--color-green-8); --surface-informer-warning-default: var(--color-yellow-8); --surface-informer-alert-default: var(--color-red-8); /* DS path: Text//. Names use "tertiary" rather than Hub's "muted" / "ghost" to match the DS path. */ --text-primary-default: var(--color-white-100); --text-secondary-default: var(--color-white-64); --text-tertiary-default: var(--color-white-32); /* Was white-24; raised to white-32 so any future caller picks up a contrast that meets WCAG AA (3:1 minimum on --surface). --ink-ghost (Layer-E alias used by feature CSS) is already at white-32 — keeping the two layers in sync. */ --text-tertiary-disabled: var(--color-white-32); --text-accent-default: var(--color-blue-100); --text-alert-default: var(--color-red-100); --icon-accent-default: var(--color-blue-100); --icon-success-default: var(--color-green-100); --icon-alert-default: var(--color-red-100); /* ---- Layer C: Number scale (DS Primitives → spacing & radius) ---- */ --num-4: 4px; --num-6: 6px; --num-8: 8px; --num-12: 12px; --num-16: 16px; --num-24: 24px; --num-32: 32px; --num-40: 40px; --num-64: 64px; --num-128: 128px; --num-256: 256px; --num-512: 512px; /* ---- Layer D: Effect tokens (Dark) — DS effect styles ---- */ --shadow-l: 0 16px 32px 0 rgba(0,0,0,0.48), 0 2px 12px 0 rgba(0,0,0,0.24); --shadow-m: 0 8px 16px 0 rgba(0,0,0,0.32), 0 2px 8px 0 rgba(0,0,0,0.24); --shadow-s: 0 6px 16px 0 rgba(0,0,0,0.24), 0 2px 4px 0 rgba(0,0,0,0.12); --shadow-xs: 0 2px 4px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.08); --shadow-overlay: 0 4px 16px 0 rgba(0,0,0,0.08), 0 2px 4px 0 rgba(0,0,0,0.02); --shadow-up: 0 -4px 16px 0 rgba(0,0,0,0.08), 0 -2px 4px 0 rgba(0,0,0,0.02); --blur-2: 2px; --blur-4: 4px; --blur-8: 8px; /* ============================================================ Layer E: Prototype-local aliases Discord-style chat surface needs deeper background ladder than DS provides — kept as custom black scale. Everything else routes through DS tokens above. ============================================================ */ /* Background depth ladder (custom — DS only defines one neutral surface) */ --void: #1a1a1a; /* deepest bg (server rail, channel rail) */ --deep: #212121; /* base bg */ --surface: var(--surface-neutral-default); /* DS #292929 — main chat surface */ --raised: #333333; /* elevated cards */ --elevated: var(--color-black-absolute-24); /* DS #3d3d3d — modals, popovers */ --float: #4a4a4a; /* hover on elevated */ --glow: #555555; /* highest layer */ /* Text — full DS mapping. ink-ghost raised from white-24 to white-32 to clear WCAG AA 3:1 minimum for UI text on --surface (#292929). */ --ink: var(--text-primary-default); --ink-secondary: var(--text-secondary-default); --ink-muted: var(--color-white-40); --ink-ghost: var(--color-white-32); /* Accent — DS Blue */ --accent: var(--surface-accent-default); --accent-hover: var(--surface-button-accent-hovered); --accent-soft: rgba(97,97,252,0.12); /* between DS Blue/8 and Blue/16 */ --accent-glow: var(--color-blue-24); /* Status — switched to DS values (was #4ade80, #fbbf24) */ --live: var(--surface-success-default); /* DS #00a466 (was #4ade80) */ --live-soft: var(--surface-informer-success-default); --coral: var(--surface-alert-default); /* DS #f54b48 */ --coral-soft: var(--surface-informer-alert-default); --amber: var(--surface-warning-default); /* DS #ff8e0c (was #fbbf24) */ --amber-soft: var(--surface-informer-warning-default); /* Semantic aliases — preferred names for new code. Old --live/--coral/--amber kept for back-compat but should be migrated. */ --danger: var(--coral); --danger-soft: var(--coral-soft); --success: var(--live); --success-soft: var(--live-soft); --warning: var(--amber); --warning-soft: var(--amber-soft); --info: var(--accent); /* Slack-стиль семантика composer'а: send = commit-action (зелёный), accent = focus / identity (фиолетовый). Не смешивать. Hover — чуть темнее основного, не transparent (transparent даёт «провал» на gradient backgrounds). */ --green-send: var(--color-green-100); /* #00a466 */ --green-send-hover: #008a55; --info-soft: var(--accent-soft); /* Presence dots — driven by `[data-status="…"]` on .sp-presence-dot / .status-dot in channels.css. Online uses our DS green; idle and dnd map to the existing semantic warning/danger so a future theme-tone tweak applies in one place. Invisible stays a neutral grey — DS doesn't have a strict equivalent yet, so the literal lives here in Layer E rather than scattered across feature CSS. */ --status-online: var(--success); --status-idle: var(--warning); --status-dnd: var(--danger); --status-invisible: #80848e; /* Mention pills — used by .msg-text .mention in channels.css. `default` is the @user pill (DS-blue tint), `self` is the @me / @here pill (DS doesn't ship a violet token yet, literal stays in Layer E). Hover states bump opacity / lighten foreground — keeping all four state pairs in one block makes the contrast intent reviewable at a glance. */ --mention-bg: var(--accent-glow); --mention-bg-hover: rgba(97, 97, 252, 0.36); --mention-fg: #aebbf0; --mention-fg-hover: #d2dafa; --mention-self-bg: rgba(168, 85, 247, 0.22); --mention-self-bg-hover: rgba(168, 85, 247, 0.34); --mention-self-fg: #d5b8fb; --mention-self-fg-hover: #e9d7ff; /* Borders */ --border: var(--color-white-6); --border-mid: var(--color-white-8); --border-accent: var(--color-blue-32); /* Glass / hover layers — DS White ladder */ --glass: var(--color-white-8); --glass-hover: var(--color-white-12); --glass-active: var(--color-white-16); /* Radius — DS Number scale. DS path: Radius/. Single-letter suffix matches the DS variable name verbatim. */ --radius-s: var(--num-8); --radius-m: var(--num-12); --radius-l: var(--num-16); --radius-xl: var(--num-24); /* DS has no 20; bumped to 24 */ --radius-full: 50%; --radius-pill: var(--num-512); /* Spacing — DS Number scale */ --space-xs: var(--num-4); --space-sm: var(--num-8); --space-md: var(--num-12); --space-lg: var(--num-16); --space-xl: var(--num-24); --space-2xl: var(--num-32); /* Avatar size scale — canonical 7-step ladder. Use --avatar-* + calc(... * 0.4) for font-size of initials. */ --avatar-2xs: 20px; /* mention picker, inline */ --avatar-xs: 24px; /* tpp-av, calendar mini */ --avatar-sm: 28px; /* member rows, friend rows, TFV */ --avatar-md: 32px; /* DM list, header chip, mfv */ --avatar-lg: 40px; /* message row, DM row */ --avatar-xl: 56px; /* DM intro, header detail */ --avatar-2xl: 96px; /* profile page, lightbox */ --avatar-3xl: 72px; /* profile-card hover popup — between xl+2xl */ /* Icon button size scale */ --size-icon-sm: 24px; /* inline close (reply, edit, attach) */ --size-icon-md: 28px; /* default icon button + canonical close */ --size-icon-lg: 32px; /* prominent icon button */ --size-icon-xl: 40px; /* lightbox close, header buttons */ /* Typography scale. Each step is multiplied by `--kc-font-scale` (default 1, set by Appearance → font-size: small/large to 0.92/ 1.08) so the user can downsize or upsize the whole UI without per-rule rewrites. Existing rules that still use hard-coded `px` aren't scaled — over time we migrate to these vars. */ --kc-font-scale: 1; --font-2xs: calc(11px * var(--kc-font-scale)); /* timestamps, meta */ --font-xs: calc(12px * var(--kc-font-scale)); /* secondary labels */ --font-sm: calc(13px * var(--kc-font-scale)); /* body small (DM list, sidebar) */ --font-md: calc(14px * var(--kc-font-scale)); /* body default */ --font-lg: calc(16px * var(--kc-font-scale)); /* titles */ --font-xl: calc(20px * var(--kc-font-scale)); /* page heading */ --font-2xl: calc(28px * var(--kc-font-scale)); /* display heading */ --line-height-tight: 1.2; --line-height-base: 1.4; --line-height-relaxed: 1.5; /* Motion (prototype-only — DS does not define) */ --transition: 160ms ease; --transition-slow: 280ms ease; --blur: 32px; /* ============================================================ Calendar event types Distinct from DS status colors (--live/--amber/--coral) so that audio/offline/busy events are visually separable from "warning" or "alert". Audio happens to overlap visually with success-green but semantically different (event kind vs RSVP state). ============================================================ */ --event-type-audio: #16a34a; /* tailwind green-600 — audio call */ --event-type-offline: #64748b; /* tailwind slate-500 — offline / IRL meet */ /* PR D1 — three new kinds. Notion/Calendar uses purple-leaning hue for Focus (deep work), warm orange for OOO (alert), and pink for Birthday (celebratory). Picked from tailwind so they sit on the same saturation/lightness as the existing two. */ --event-type-focus: #8b5cf6; /* tailwind violet-500 — focus time */ --event-type-ooo: #ea580c; /* tailwind orange-600 — out of office */ --event-type-birthday: #ec4899; /* tailwind pink-500 — birthday */ --event-busy-default: #888; /* fallback for --busy-color CSS var per overlay */ /* Calendar time-proposal status — proposal-accept/reject use darker shades than the DS --live/--coral so the badges stay readable on the lighter rgba(*, 0.15) translucent background. */ --proposal-accept: #2a8a44; --proposal-accept-soft: rgba(52,199,89,0.15); --proposal-reject: #c43b32; --proposal-reject-soft: rgba(255,59,48,0.12); /* Color for text on a coloured surface (accent / live / coral / amber buttons + calendar event blocks). Always pure white. */ --on-accent: #ffffff; /* O.1 — calendar event color palette (7-step, Notion parity). Each entry: solid (border/dot), soft (event-bar bg, ~15% alpha). Picked to be distinguishable on both light and dark; light theme overrides below keep the same hue but a touch deeper for contrast on white. */ /* `*-soft` is the event-chip fill. Bumped from ~0.2 to 0.6 so chips read as their actual hue (not washed-out grey) while light --ink text still clears AA — a 0.6 tint over the dark grid stays dark enough even for the lightest swatch (yellow ≈ 4.2:1). */ --cal-color-red: #e0524d; --cal-color-red-soft: rgba(224,82,77,0.6); --cal-color-orange: #e69139; --cal-color-orange-soft: rgba(230,145,57,0.6); --cal-color-yellow: #d9b53a; --cal-color-yellow-soft: rgba(217,181,58,0.6); --cal-color-green: #3fa66b; --cal-color-green-soft: rgba(63,166,107,0.6); /* Calendar blue == the brand accent (--color-blue-100 #6161fc) so the "blue" swatch, an explicit-blue event and the default (no-colour) event are all the same hue — no more two-blues mismatch. */ --cal-color-blue: var(--color-blue-100); --cal-color-blue-soft: rgba(97,97,252,0.6); --cal-color-purple: #9466d8; --cal-color-purple-soft: rgba(148,102,216,0.6); --cal-color-gray: #8e93a0; --cal-color-gray-soft: rgba(142,147,160,0.6); } /* ============================================================ Light theme — opt-in via ``. Overrides only the Layer-E aliases that drive surface / ink / border / glass — accent + status keep their hues so brand colours feel consistent across themes. RGB-with-alpha tokens that previously keyed off white-N flip to black-N so transparency layers read correctly on a light background. Set by settings-shell.js (Appearance section) and persisted to localStorage as `kcAppearance.theme`. ============================================================ */ :root[data-theme="light"] { /* Background depth ladder */ --void: #ebebeb; --deep: #f3f3f3; --surface: #ffffff; --raised: #f7f7f7; --elevated: #ffffff; --float: #ececec; --glow: #d8d8d8; /* Text */ --ink: #1a1a1a; --ink-secondary: rgba(0,0,0,0.72); --ink-muted: rgba(0,0,0,0.52); --ink-ghost: rgba(0,0,0,0.40); /* Borders + glass */ --border: rgba(0,0,0,0.08); --border-mid: rgba(0,0,0,0.12); --glass: rgba(0,0,0,0.04); --glass-hover: rgba(0,0,0,0.08); --glass-active: rgba(0,0,0,0.12); /* Accent stays the same hue, soft variant flipped from 0.12 white-overlay to a tinted glow against light bg. */ --accent-soft: rgba(97,97,252,0.16); /* Mention pills — readable foreground against light surface. */ --mention-bg: rgba(97,97,252,0.18); --mention-bg-hover: rgba(97,97,252,0.30); --mention-fg: #4747d6; --mention-fg-hover: #2929b8; --mention-self-bg: rgba(168,85,247,0.18); --mention-self-bg-hover: rgba(168,85,247,0.30); --mention-self-fg: #7926d4; --mention-self-fg-hover: #5e1dab; /* Shadow flip — dark-mode shadows are RGBa-black at 0.24-0.48 opacity; on a white surface those land as ink-black smudges around every popover. DS publishes a parallel `Shadow/Primary light/*` family — adopted here at the same ladder pattern but softened to the 0.04-0.12 range typical for light themes. */ --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.06), 0 1px 1px 0 rgba(0,0,0,0.04); --shadow-s: 0 2px 4px 0 rgba(0,0,0,0.06), 0 1px 2px 0 rgba(0,0,0,0.04); --shadow-m: 0 4px 8px 0 rgba(0,0,0,0.08), 0 2px 4px 0 rgba(0,0,0,0.06); --shadow-l: 0 12px 24px 0 rgba(0,0,0,0.10), 0 4px 12px 0 rgba(0,0,0,0.06); --shadow-overlay: 0 4px 16px 0 rgba(0,0,0,0.06), 0 2px 4px 0 rgba(0,0,0,0.04); --shadow-up: 0 -4px 16px 0 rgba(0,0,0,0.06), 0 -2px 4px 0 rgba(0,0,0,0.04); }