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