initial

2026-07-27 10:55:23 -07:00
commit be12d33fde
2 changed files with 135 additions and 0 deletions
@@ -0,0 +1,81 @@
+# 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.