commit be12d33fde868e4fd208c862c50dd74fb3004fc7 Author: Zachary Levy Date: Mon Jul 27 10:55:23 2026 -0700 initial diff --git a/themes/chromium/README.md b/themes/chromium/README.md new file mode 100644 index 0000000..9ee4505 --- /dev/null +++ b/themes/chromium/README.md @@ -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. diff --git a/themes/chromium/manifest.json b/themes/chromium/manifest.json new file mode 100644 index 0000000..f1383cd --- /dev/null +++ b/themes/chromium/manifest.json @@ -0,0 +1,54 @@ +{ + "manifest_version": 3, + "version": "1.0", + "name": "Cybersteel", + "description": "Retrofuturist. Technical. Direct. Cybersteel design system palette for Brave.", + + "theme": { + "colors": { + "frame": [29, 32, 33], + "frame_inactive": [29, 32, 33], + "frame_incognito": [29, 32, 33], + "frame_incognito_inactive": [29, 32, 33], + + "background_tab": [29, 32, 33], + "background_tab_inactive": [29, 32, 33], + "background_tab_incognito": [29, 32, 33], + "background_tab_incognito_inactive": [29, 32, 33], + + "toolbar": [49, 49, 49], + "toolbar_text": [242, 226, 186], + "toolbar_button_icon": [250, 189, 47], + "button_background": [29, 32, 33], + + "tab_text": [251, 241, 199], + "tab_background_text": [224, 208, 168], + "tab_background_text_inactive": [206, 189, 158], + "tab_background_text_incognito": [224, 208, 168], + "tab_background_text_incognito_inactive": [206, 189, 158], + + "bookmark_text": [224, 208, 168], + + "omnibox_background": [60, 56, 54], + "omnibox_text": [242, 226, 186], + + "ntp_background": [49, 49, 49], + "ntp_header": [60, 56, 54], + "ntp_text": [242, 226, 186], + "ntp_link": [131, 165, 152] + }, + + "tints": { + "buttons": [-1, -1, -1], + "frame": [-1, -1, -1], + "frame_inactive": [-1, -1, -1], + "frame_incognito": [-1, -1, -1], + "frame_incognito_inactive": [-1, -1, -1], + "background_tab": [-1, -1, -1] + }, + + "properties": { + "ntp_logo_alternate": 1 + } + } +}