fabrica

hanna/fabrica

main
Switch branch
mainView all branches
Clone
HTTPS
SSH

feat(web): rebase the default themes on IBM Carbon

67aa19b · hanna committed on 2026-07-25

Replace the GitHub-derived dark/light palettes with IBM Carbon Gray 100 and
White. Structure-only base.css is untouched; only the --fb-* token values
change, so the re-brand is pure CSS.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed by hannaSSH key fingerprint: SHA256:4g9cWhkAAw8gwqhJUcVbSnGEvdGwklW+1Aa/fMUu59k
2 files changed · +58 −56UnifiedSplit
assets/themes/dark.css +30 −29
@@ -2,44 +2,45 @@
22 * License, v. 2.0. If a copy of the MPL was not distributed with this
33 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
44 *
5- * dark — the default theme. Defines every documented --fb-* token; base.css is
6- * structure-only and reads exclusively from these. See docs/theming.md. */
5+ * dark — the default theme, based on the IBM Carbon Gray 100 palette. Defines
6+ * every documented --fb-* token; base.css is structure-only and reads
7+ * exclusively from these. See docs/theming.md. */
78
89 :root {
910 --fb-color-scheme: dark;
1011
11- /* Surfaces & text */
12- --fb-bg: #0d1117;
13- --fb-bg-raised: #161b22;
14- --fb-bg-inset: #21262d;
15- --fb-border: #30363d;
16- --fb-fg: #e6edf3;
17- --fb-fg-muted: #8b949e;
12+ /* Surfaces & text (Carbon Gray 100 layers) */
13+ --fb-bg: #161616;
14+ --fb-bg-raised: #262626;
15+ --fb-bg-inset: #393939;
16+ --fb-border: #393939;
17+ --fb-fg: #f4f4f4;
18+ --fb-fg-muted: #a8a8a8;
1819
1920 /* Accents & status */
20- --fb-accent: #4493f8;
21+ --fb-accent: #4589ff;
2122 --fb-accent-fg: #ffffff;
22- --fb-success: #3fb950;
23- --fb-warning: #d29922;
24- --fb-danger: #f85149;
23+ --fb-success: #42be65;
24+ --fb-warning: #f1c21b;
25+ --fb-danger: #fa4d56;
2526
2627 /* Diff row backgrounds & gutters */
27- --fb-diff-add-bg: rgba(63, 185, 80, 0.15);
28- --fb-diff-del-bg: rgba(248, 81, 73, 0.15);
29- --fb-diff-add-fg: #3fb950;
30- --fb-diff-del-fg: #f85149;
28+ --fb-diff-add-bg: rgba(66, 190, 101, 0.15);
29+ --fb-diff-del-bg: rgba(250, 77, 86, 0.15);
30+ --fb-diff-add-fg: #42be65;
31+ --fb-diff-del-fg: #fa4d56;
3132
3233 /* Syntax highlighting */
33- --fb-hl-keyword: #ff7b72;
34- --fb-hl-function: #d2a8ff;
35- --fb-hl-type: #7ee787;
36- --fb-hl-string: #a5d6ff;
37- --fb-hl-number: #79c0ff;
38- --fb-hl-comment: #8b949e;
39- --fb-hl-constant: #79c0ff;
40- --fb-hl-variable: #ffa657;
41- --fb-hl-operator: #ff7b72;
42- --fb-hl-punctuation: #c9d1d9;
43- --fb-hl-attribute: #7ee787;
44- --fb-hl-tag: #7ee787;
34+ --fb-hl-keyword: #ff7eb6;
35+ --fb-hl-function: #82cfff;
36+ --fb-hl-type: #3ddbd9;
37+ --fb-hl-string: #a7f0ba;
38+ --fb-hl-number: #f1c21b;
39+ --fb-hl-comment: #8d8d8d;
40+ --fb-hl-constant: #d4bbff;
41+ --fb-hl-variable: #f4f4f4;
42+ --fb-hl-operator: #ff7eb6;
43+ --fb-hl-punctuation: #c6c6c6;
44+ --fb-hl-attribute: #3ddbd9;
45+ --fb-hl-tag: #82cfff;
4546 }
assets/themes/light.css +28 −27
@@ -2,43 +2,44 @@
22 * License, v. 2.0. If a copy of the MPL was not distributed with this
33 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
44 *
5- * light — the embedded light theme. Defines every documented --fb-* token. */
5+ * light — the embedded light theme, based on the IBM Carbon White palette.
6+ * Defines every documented --fb-* token. */
67
78 :root {
89 --fb-color-scheme: light;
910
10- /* Surfaces & text */
11+ /* Surfaces & text (Carbon White layers) */
1112 --fb-bg: #ffffff;
12- --fb-bg-raised: #f6f8fa;
13- --fb-bg-inset: #eaeef2;
14- --fb-border: #d0d7de;
15- --fb-fg: #1f2328;
16- --fb-fg-muted: #656d76;
13+ --fb-bg-raised: #f4f4f4;
14+ --fb-bg-inset: #e0e0e0;
15+ --fb-border: #e0e0e0;
16+ --fb-fg: #161616;
17+ --fb-fg-muted: #525252;
1718
1819 /* Accents & status */
19- --fb-accent: #0969da;
20+ --fb-accent: #0f62fe;
2021 --fb-accent-fg: #ffffff;
21- --fb-success: #1a7f37;
22- --fb-warning: #9a6700;
23- --fb-danger: #cf222e;
22+ --fb-success: #24a148;
23+ --fb-warning: #b28600;
24+ --fb-danger: #da1e28;
2425
2526 /* Diff row backgrounds & gutters */
26- --fb-diff-add-bg: rgba(26, 127, 55, 0.12);
27- --fb-diff-del-bg: rgba(207, 34, 46, 0.12);
28- --fb-diff-add-fg: #1a7f37;
29- --fb-diff-del-fg: #cf222e;
27+ --fb-diff-add-bg: rgba(36, 161, 72, 0.12);
28+ --fb-diff-del-bg: rgba(218, 30, 40, 0.12);
29+ --fb-diff-add-fg: #0e6027;
30+ --fb-diff-del-fg: #da1e28;
3031
3132 /* Syntax highlighting */
32- --fb-hl-keyword: #cf222e;
33- --fb-hl-function: #8250df;
34- --fb-hl-type: #1a7f37;
35- --fb-hl-string: #0a3069;
36- --fb-hl-number: #0550ae;
37- --fb-hl-comment: #6e7781;
38- --fb-hl-constant: #0550ae;
39- --fb-hl-variable: #953800;
40- --fb-hl-operator: #cf222e;
41- --fb-hl-punctuation: #24292f;
42- --fb-hl-attribute: #1a7f37;
43- --fb-hl-tag: #116329;
33+ --fb-hl-keyword: #d12771;
34+ --fb-hl-function: #0f62fe;
35+ --fb-hl-type: #007d79;
36+ --fb-hl-string: #0e6027;
37+ --fb-hl-number: #8a3ffc;
38+ --fb-hl-comment: #6f6f6f;
39+ --fb-hl-constant: #8a3ffc;
40+ --fb-hl-variable: #a2191f;
41+ --fb-hl-operator: #d12771;
42+ --fb-hl-punctuation: #161616;
43+ --fb-hl-attribute: #007d79;
44+ --fb-hl-tag: #0f62fe;
4445 }