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.
123 lines
5.6 KiB
Markdown
123 lines
5.6 KiB
Markdown
# 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.
|
|
|
|
```css
|
|
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.
|
|
|
|
```css
|
|
: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` |
|