initial
This commit is contained in:
Zachary Levy
@@ -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.
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user