89cd9c5e4d
README.md collects what's already active platform-wide (two backgrounds, the five-color palette with its resting/hover convention, the neutral dark-mode gray scale, light mode staying white/near-white) so future integrations reuse these values instead of picking new ones. Dex: primary CTAs (per-connector login buttons, the password form's Login submit, Grant Access/Cancel) get the palette-2/palette-1 resting/ hover pair, form-input focus rings match, and .theme-panel's blue-tinted dark background is replaced with the same neutral hsl(0 0% 18%) used for Forgejo's boxes and the launcher's own tiles. Unconditional across both of Dex's themes rather than wrapped in a selector, matching how the rest of the accent overrides already work -- the brand accent doesn't change with light/dark, only neutral surfaces do.
5.6 KiB
0ff.space design system
The shared visual identity applied across every service on this platform (own repos and third-party apps alike). Nothing here is invented fresh — every value below is copied from wherever it's already live; this file just collects them in one place so a new integration reuses the same values instead of picking new ones.
Backgrounds
0ff-space-background.css in this directory is the canonical source,
injected (verbatim or wrapped, see "Where this is used" below) into
every branded service.
html, body {
background-color: ghostwhite;
background-image: radial-gradient(circle, lightsteelblue 1px, ghostwhite 1px);
background-size: 15px 15px;
background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
html, body {
background-color: hsl(0 0% 10%);
background-image: radial-gradient(circle, hsl(0 0% 14%) 1px, hsl(0 0% 10%) 1px);
}
}
Services whose own theme switcher is independent of the OS preference
(LLDAP's darkmode.js, Forgejo's data-theme) need this reapplied
against their own dark/light class or attribute instead of relying on
the media query alone — see hosts/blunix/localServices/lldap.nix and
hosts/pinix/localServices/branding/forgejo-theme-override.css for the
pattern. Services with a fixed (non-OS-reactive) theme, like Dex, use
one variant unconditionally rather than the media-query version — see
"Fixed-theme services" below.
Palette
Defined once in launcher/style.css (:root), copied identically into
every other own repo and into each branded third-party service's
override.
:root {
--palette-1: #ff0026; /* red */
--palette-2: #d91e4d; /* strawberry */
--palette-3: #ff0094; /* pink */
--palette-4: #e000ff; /* violet */
--palette-5: #ff5a00; /* orange */
}
Resting/hover convention: where a service only has one primary
accent slot (a "brand color", not the launcher's five-way rotation),
use --palette-2 (strawberry) at rest and --palette-1 (red) for
hover/active/focus. This is the same pair the guide tile on 0ff.space
itself uses, and what LLDAP's buttons, Forgejo's --color-primary,
GoToSocial's --fg-accent/--button-bg, and Phanpy's --blue-color
all currently use.
Where a service has its own multi-color semantic system (Bulma's five
families in xmpp-web, for instance), the full five-color palette maps
onto it instead of collapsing to one accent — see
hosts/pinix/localServices/xmpp-web.nix's --replace-warn block for
that mapping.
Dark mode: neutral grays, not the launcher's palette
Box/card/panel surfaces in dark mode are not palette-colored —
they're neutral gray, matching the resting dark tile background used
across the launcher/tasks/dashboard grids
(hsla(0, 0%, 18%, 1), see .box in each repo's style.css). Several
third-party apps ship their own dark surface scale that isn't neutral
(Forgejo's --steel-* is blue-tinted, for example) — replace it with
this ramp at matching lightness steps instead of leaving the app's own
tint:
8% 10% 12% 15% 18% 21% 25% 30% 35% 41% 47% 54% 61% 68% 74% 81% 88%
(hsl(0 0% N%) for each.) 18% is the anchor — it's the exact tone of
the launcher's own dark tile, so a card/box at that step reads as the
same material as the rest of the platform. See
hosts/pinix/localServices/branding/forgejo-theme-override.css's
--steel-* override for the reference implementation (mapped 1:1 onto
Forgejo's existing steel scale, same step count, same relative
lightness spacing).
Light mode: white/near-white, no separate ramp
Light mode doesn't get an equivalent multi-step scale — surfaces are
just white (the resting box/card background already used everywhere
in light mode, e.g. .box { background: white; } in
launcher/tasks/dashboard), against the ghostwhite/lightsteelblue
background above. If a third-party app's light surface scale needs
overriding the way Forgejo's dark one did, reuse white/ghostwhite
rather than introducing a new near-white tone.
Fixed-theme services
Dex's frontend.theme is a static admin choice, not visitor-driven —
unlike everything else here, it doesn't react to the OS preference at
all (see hosts/blunix/localServices/dex.nix). Branding it uses the
same background/palette/gray values above, just applied unconditionally
per theme (whichever one frontend.theme is actually set to) instead of
wrapped in prefers-color-scheme/data-theme selectors.
Where this is used
| Service | Mechanism | File |
|---|---|---|
| launcher, tasks, dashboard, website, calendar-web | own repo, :root palette + .box/a rules |
each repo's style.css |
| LLDAP | injected stylesheet, html.dark/html.light + .btn-primary overrides |
hosts/blunix/localServices/lldap.nix |
| Forgejo | custom/templates/custom/header.tmpl + custom/public/assets/css/*.css, data-theme overrides |
hosts/pinix/localServices/forgejo.nix, branding/forgejo-theme-override.css |
| GoToSocial | admin-set custom_css (DB-stored, not declarative — no Nix file) |
pasted manually via Settings → Instance Settings |
| Phanpy | build-time postPatch, :root variable overrides |
hosts/pinix/localServices/phanpy/package.nix |
| xmpp-web (chat/plaza) | build-time postPatch, full five-color Bulma remap |
hosts/pinix/localServices/xmpp-web.nix |
| data/files (fileservers) | static-web-server source patch (compiled into the binary) |
hosts/blunix/localServices/fileserver-external.nix, hosts/pinix/localServices/fileserver-internal.nix |
| Dex | frontend.dir pointing at a copied+patched web asset tree, unconditional per theme |
hosts/blunix/localServices/dex.nix |