/* ============================================================ GoWork Chat — "Quiet Focus" theme for Zulip 12 Supersedes zulip-readable.css (which was typography only). Install (Zulip Desktop): Settings > General > Advanced > Add custom CSS Web app: load as a Stylus userstyle. Reload with Cmd-R / Ctrl-R. DESIGN INTENT Zulip's stock light theme isn't ugly, it's *flat*: #f0f0f0 chrome against white panels, separated by hard 1px mid-grey borders, with saturated channel colours filling whole bands. Everything competes. This theme pushes chrome back and pulls content forward: - layered neutrals instead of grey-on-grey - hairline dividers (6-10% black) instead of solid borders - channel colour as a small signal, not a filled surface - one restrained indigo accent replacing Zulip's lilac - tighter type so more conversation fits on screen BUILT ON ZULIP'S OWN TOKENS Zulip 12 ships ~1,527 CSS custom properties using light-dark(), so overriding tokens (rather than selectors) propagates everywhere AND keeps dark mode working. Every override below is written as light-dark(, ) for that reason. VERIFIED LIVE on chat.go-work.com (Zulip 12.0, feature level 498). Contrast measured in the running app with alpha composited against the real backdrop — not computed against an assumed white/black. AA for normal text is 4.5:1; every row below passes in BOTH themes. light dark message body 12.63 12.65 sender name 15.45 14.61 inline code 21.00 11.94 timestamp 6.66 9.85 sidebar row 5.56 7.64 message link 6.02 7.43 sidebar heading 5.38 6.87 Rendered face confirmed as Inter via CDP getPlatformFontsForNode (not merely the declared stack). Light mode is why this table exists: dark passed everywhere, and the light values had been *computed* rather than measured. Measuring them surfaced two real failures — links at 3.89 and sidebar headings at 2.94 — both fixed below. Arithmetic against an assumed backdrop would have shipped both. ============================================================ */ /* ---- Web font ---------------------------------------------- MUST stay above every rule below — @import is only valid at the top of a stylesheet. DM Sans is loaded deliberately. A font stack fetches nothing: listing a family only works if it is already installed locally, so without this line the name is decorative and each OS renders its own face (SF Pro / Segoe UI Variable / Roboto). For a company-wide theme, one consistent face beats a native one. WHY DM SANS. go-work.com already uses DM Serif Display for display type, so this extends a designed superfamily rather than importing an unrelated face. It is also warmer and more space-efficient than Inter — in a side-by-side specimen at 14px it fit a full clause more per line — and Inter now reads as the generic startup default. TRADE-OFF, eyes open: DM Sans is geometric, so I / l / 1 are near identical. That costs something here specifically, because these channels carry table names, cell refs and emails. IBM Plex Sans was the alternative — it has a tailed lowercase l that solves this natively — if the ambiguity ever bites, that is the swap to make. Google Fonts is already a vendor for go-work.com, so this adds none. Self-host the woff2 if that ever changes. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); /* ---- Typeface --------------------------------------------- Zulip declares its UI face once and cascades via 36 `inherit` rules, so :root/body reaches everything. [data-tippy-root] is the sole exception — it carries its own !important. DM Sans first; system faces behind it so a failed font load degrades to something decent rather than to Times. */ :root, body, html [data-tippy-root], html [data-tippy-root] * { font-family: "DM Sans", system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } /* code/pre declare "Source Code Pro" directly, so they are untouched. */ /* ---- Density ------------------------------------------------ NOTHING HERE ON PURPOSE. Zulip writes --base-font-size-px as an inline style on from each user Font size preference. This theme is tuned for 14px, and 14 is now the organization default, so the setting supplies it. An earlier revision forced `--base-font-size-px: 14px !important`. It worked, but because this stylesheet is injected server-side for EVERYONE, it turned Preferences > Font size into a dead switch company-wide - nobody could enlarge text for readability. Do not reintroduce it. To change the default, use Organization settings > Default user settings > Font size. */ /* ---- Surfaces, text, borders ------------------------------- */ :root { --color-background: light-dark(#f5f6f8, #15171c); --color-background-navbar: light-dark(#ffffff, #1b1e24); --color-background-white-box: light-dark(#ffffff, #1b1e24); --color-background-input: light-dark(#ffffff, #22262e); --color-background-search: light-dark(#eef0f3, #22262e); --color-text-default: light-dark(#1c1e21, #e6e8eb); --color-text-message-default: light-dark(#1c1e21, #e6e8eb); --color-text-message-header: light-dark(#0f1115, #f0f2f4); --color-text-full-name: light-dark(#0f1115, #f0f2f4); --color-text-sidebar-base: light-dark(#4a4f57, #b6bcc4); --color-text-sidebar-row: light-dark(#4a4f57, #b6bcc4); /* Both values are measured, not guessed. Dark was #7b828b (4.62:1 — AA by 0.12, no headroom) -> #99a1ab = 6.87:1. Light was #8b9199, which measured 2.94:1 on the #f5f6f8 sidebar and FAILED -> #5f666e = 5.38:1. Note #6b7280 was rejected: it lands at 4.47:1, just under the bar. */ --color-text-sidebar-heading: light-dark(#5f666e, #99a1ab); --color-border-sidebar: light-dark(rgba(0,0,0,.07), rgba(255,255,255,.08)); --color-border-sidebar-subheader: light-dark(rgba(0,0,0,.06), rgba(255,255,255,.07)); --color-border-compose-content: light-dark(rgba(0,0,0,.10), rgba(255,255,255,.10)); --color-border-legacy-input: light-dark(rgba(0,0,0,.12), rgba(255,255,255,.12)); --color-border-pill-container: light-dark(rgba(0,0,0,.10), rgba(255,255,255,.10)); } /* ---- Accent: GoWork brand ---------------------------------- Sampled live from go-work.com. The brand "blue" is really a deep TEAL — the primary CTA paints linear-gradient(90deg, #243033, #0d4759) (.bg-black-gradNormal) with a light-step family and a gold companion: #004d66 deep teal #0d4759 CTA gradient end #076b8c mid teal #248fb2 light teal #57b9d9 pale teal #bf8c15 GoWork gold #1d2426 near-black (nav + headings) Deep teal has the contrast for light mode but vanishes on the dark surface, so the pair steps up to #57b9d9 for dark. Both values are real brand colours, not tints invented to pass a checker. Measured: #076b8c on white 6.02:1 · #57b9d9 on #1b1e24 7.43:1 (live). Gold (#bf8c15) is deliberately NOT used as the UI accent — at link size on white it lands near 3:1 and fails AA for body text. Keep it for deliberate highlights, not links. */ :root { --color-icon-purple: light-dark(#076b8c, #57b9d9); --color-text-link: light-dark(#076b8c, #57b9d9); --color-text-generic-link: light-dark(#076b8c, #57b9d9); --color-selected-message-outline: light-dark(rgba(7,107,140,.35), rgba(87,185,217,.45)); /* Message-body links do NOT use the tokens above. The winning rule is .rendered_markdown a:not(.icon-button) { color: var(--color-markdown-link) } so overriding only --color-text-link leaves links on Zulip's stock hsl(200 100% 40%) (#0088cc) — which measures 3.89:1 on white and FAILS AA on its own, before this theme touches anything. All three must be set together. */ --color-markdown-link: light-dark(#076b8c, #57b9d9); --color-markdown-code-link: light-dark(#076b8c, #57b9d9); --color-text-url: light-dark(#076b8c, #57b9d9); } /* ---- Recipient bar ----------------------------------------- Zulip tints the whole topic bar with the CHANNEL's colour as an inline style (e.g. background:#eddff5 for a purple channel), which is the single most dated element in the stock UI. Neutralise the band and let the coloured # icon and channel name carry the identity instead. Inline style => !important is required. */ .message-header-contents { background: light-dark(#ffffff, #1b1e24) !important; border-bottom: 1px solid light-dark(rgba(0,0,0,.08), rgba(255,255,255,.09)) !important; } /* ---- Detail ------------------------------------------------- */ .rendered_markdown code { background: light-dark(rgba(0,0,0,.045), rgba(255,255,255,.08)); border: none; border-radius: 5px; padding: .12em .38em; font-size: .92em; } input[type="text"], textarea, .input-pill-container, #compose-content { border-radius: 9px; } /* ---- Editing later ------------------------------------------ Keep overrides narrow and prefer tokens over selectors. Icons use font-family:FontAwesome via ::before, so never set font-family on *. Anything Zulip renders from a per-channel or per-user colour arrives as an inline style and needs !important to override. ------------------------------------------------------------ */