82 lines
3.6 KiB
Markdown
82 lines
3.6 KiB
Markdown
# Cybersteel for Brave
|
|
|
|
The Cybersteel design system as a Chromium browser theme. Colors only — a
|
|
single `manifest.json`, no images.
|
|
|
|
## Install
|
|
|
|
1. Put this folder somewhere permanent (not Downloads — Brave reads it from
|
|
disk every launch, so moving or deleting it breaks the theme).
|
|
2. Open `brave://extensions`
|
|
3. Turn on **Developer mode** (top right)
|
|
4. Click **Load unpacked** and select this folder
|
|
|
|
## Token mapping
|
|
|
|
Every value is lifted from `colors_and_type.css`, matched to the role the
|
|
token comments already describe.
|
|
|
|
| Chromium key | Token | Hex | Token's stated role |
|
|
| -------------------- | ---------------- | --------- | -------------------------------- |
|
|
| `frame` | `--bg-shell` | `#1d2021` | topbar, sidebar, **nav chrome** |
|
|
| `background_tab` | `--bg-shell` | `#1d2021` | unselected nav items sit on it |
|
|
| `toolbar` | `--bg-page` | `#313131` | default canvas, main content |
|
|
| `omnibox_background` | `--bg-surface` | `#3c3836` | **input fields**, panels, cards |
|
|
| `tab_text` | `--fg-heading` | `#fbf1c7` | headings — the focused thing |
|
|
| `tab_background_text`| `--fg-secondary` | `#e0d0a8` | labels, secondary descriptions |
|
|
| `toolbar_text` | `--fg-body` | `#f2e2ba` | primary readable content |
|
|
| `bookmark_text` | `--fg-secondary` | `#e0d0a8` | labels |
|
|
| `toolbar_button_icon`| `--gold-bright` | `#fabd2f` | **primary interactive**, focus |
|
|
| `ntp_link` | `--color-link` | `#83a598` | `--blue-bright` |
|
|
|
|
The toolbar's active-tab surface is `--bg-page`, so the browser reads as a
|
|
window frame (`--bg-shell`) wrapped around a canvas — the same shell/page
|
|
relationship the system uses on a web page.
|
|
|
|
## Contrast
|
|
|
|
Measured WCAG ratios, all AAA:
|
|
|
|
```
|
|
active tab text 11.47:1
|
|
inactive tab text 10.74:1
|
|
inactive tab, unfocused 8.90:1
|
|
toolbar text 10.14:1
|
|
toolbar icons 7.67:1
|
|
bookmark text 8.52:1
|
|
omnibox text 9.04:1
|
|
```
|
|
|
|
## Tweaks
|
|
|
|
**Quieter toolbar icons** — gold on every button is the loudest choice here.
|
|
For a neutral toolbar set `toolbar_button_icon` to `[242, 226, 186]`
|
|
(`--fg-body`); for something between, `[215, 153, 33]` (`--gold-dim`).
|
|
|
|
**Visible tab edges** — inactive tabs currently sit at `--bg-shell` so they
|
|
blend into the strip. Set the four `background_tab*` values to
|
|
`[60, 56, 54]` (`--bg-surface`) to give them a raised edge.
|
|
|
|
**Darker toolbar** — swap `toolbar` to `[60, 56, 54]` (`--bg-surface`) and
|
|
`omnibox_background` to `[80, 73, 69]` (`--bg-active`).
|
|
|
|
The `tints` are all `[-1, -1, -1]`, meaning "no HSL shift". That stops
|
|
Chromium auto-darkening the frame when the window loses focus, since the
|
|
inactive colors are set explicitly instead.
|
|
|
|
## What doesn't carry over
|
|
|
|
Roughly half of `colors_and_type.css` is the type system — IBM Plex
|
|
Sans/Mono, the 1.25 modular scale, the Art Deco tracking and uppercase
|
|
treatments. None of it can reach the browser: Chromium themes accept only
|
|
`images`, `colors`, `tints`, and `properties`. There is no font capability,
|
|
and no `userChrome.css` equivalent in Chromium.
|
|
|
|
The closest you can get is `brave://settings/fonts` — set the standard face
|
|
to IBM Plex Sans and the fixed-width face to IBM Plex Mono. That styles web
|
|
pages that don't specify their own fonts. It will not touch the tab strip,
|
|
toolbar, or menus, which follow the OS UI font.
|
|
|
|
Also note: Brave's New Tab page uses its own renderer, so the `ntp_*` values
|
|
mostly don't show. Set that wallpaper via the gear icon on the new tab page.
|