openhuman/app/src/styles/tokens.css at main · tinyhumansai/openhuman · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
/*
 * Canonical theme tokens — the single source of truth for every themeable
 * colour and font in the app. See gitbooks/developing/theming.md.
 *
 * WHY CHANNEL FORMAT: each colour is stored as a space-separated RGB triple
 * (e.g. `255 255 255`) rather than a hex string. `tailwind.config.js` wraps
 * every token as `rgb(var(--token) / <alpha-value>)`, so Tailwind opacity
 * modifiers keep working (`bg-surface/50`, `bg-primary-500/10`). A hex/var
 * swap would silently break all ~640 opacity-suffixed utilities.
 *
 * HOW THEMING WORKS: a "theme" is just a set of values for these vars. The
 * defaults below are the historical Light palette; `:root.dark` holds the
 * historical Dark palette. `ThemeProvider` writes the active theme's values
 * as inline `--token` vars on <html>, overriding both blocks at runtime — so
 * presets and fully-custom user themes are the same mechanism.
 *
 * Values here are byte-identical to the previous --cmd and --color blocks and
 * the tailwind.config.js palette hexes, so adopting tokens is colour-neutral
 * until a user actually changes a theme.
 */

:root {
  /* ---- Surfaces (backgrounds) ---- */
  --surface: 255 255 255; /* cards / panels — "secondary background" (white) */
  --surface-canvas: 245 245 245; /* app background — "primary background" (stone-100) */
  --surface-muted: 250 250 250; /* inputs / subtle fills (stone-50) */
  --surface-subtle: 245 245 245; /* recessed wells (stone-100) */
  --surface-strong: 229 229 229; /* sunken / pressed (stone-200) */
  --surface-hover: 240 240 240; /* hover fills — distinct from white surface so
                                   hover reads on elevated cards, not just canvas */
  --surface-overlay: 0 0 0; /* modal scrim (used with /40../70) */
  --surface-chrome: 214 214 214; /* window chrome — the tinted frame the sidebar
                                    sits on, behind the inset content card
                                    (stone-300). Used at partial alpha as a
                                    legibility scrim over the themed
                                    AppBackground, so it must stay a neutral,
                                    not an accent. Was stone-100, identical to
                                    the canvas beneath it, which left the /30
                                    scrim doing nothing and the white card
                                    floating on white. Dark mode needs no
                                    equivalent bump — its chrome (10) is already
                                    below both canvas and surface. */

  /* ---- Text ---- */
  --content: 23 23 23; /* primary text (stone-900) */
  --content-secondary: 82 82 82; /* secondary text (stone-600) */
  --content-muted: 115 115 115; /* muted/labels (stone-500) */
  --content-faint: 163 163 163; /* faint/placeholder (stone-400) */
  --content-inverted: 255 255 255; /* text over accent fills (white) */

  /* ---- Borders ---- */
  --line: 229 229 229; /* default hairline (stone-200) */
  --line-strong: 212 212 212; /* stronger divider (stone-300) */
  --line-subtle: 245 245 245; /* faintest divider (stone-100) */
  --line-chrome: 212 212 212; /* the hairline where the content card meets the
                                 chrome (stone-300). Drawn as a zero-blur inset
                                 box-shadow, not a border — see the
                                 `--shadow-content-edge` token in index.css. */

  /* ---- Accent palette: primary (Complementary Blue) ---- */
  --primary-50: 239 246 255;
  --primary-100: 219 234 254;
  --primary-200: 191 219 254;
  --primary-300: 147 197 253;
  --primary-400: 96 165 250;
  --primary-500: 47 110 244;
  --primary-600: 37 99 235;
  --primary-700: 29 78 216;
  --primary-800: 30 64 175;
  --primary-900: 30 58 138;
  --primary-950: 23 37 84;

  /* ---- Accent palette: sage (Success Green) ---- */
  --sage-50: 240 253 244;
  --sage-100: 220 252 231;
  --sage-200: 187 247 208;
  --sage-300: 134 239 172;
  --sage-400: 74 222 128;
  --sage-500: 52 199 89;
  --sage-600: 22 163 74;
  --sage-700: 21 128 61;
  --sage-800: 22 101 52;
  --sage-900: 20 83 45;
  --sage-950: 5 46 22;

  /* ---- Accent palette: amber (Alert Orange) ---- */
  --amber-50: 255 251 235;
  --amber-100: 254 243 199;
  --amber-200: 253 230 138;
  --amber-300: 252 211 77;
  --amber-400: 251 191 36;
  --amber-500: 232 167 40;
  --amber-600: 217 119 6;
  --amber-700: 180 83 9;
  --amber-800: 146 64 14;
  --amber-900: 120 53 15;
  --amber-950: 69 26 3;

  /* ---- Accent palette: coral (Error Red) ---- */
  --coral-50: 254 242 242;
  --coral-100: 254 226 226;
  --coral-200: 254 202 202;
  --coral-300: 252 165 165;
  --coral-400: 248 113 113;
  --coral-500: 239 68 68;
  --coral-600: 220 38 38;
  --coral-700: 185 28 28;
  --coral-800: 153 27 27;
  --coral-900: 127 29 29;
  --coral-950: 69 10 10;

  /* ---- Font roles ----
     NOTE ON 'Cabinet Grotesk': it is NOT bundled, so every stack naming it
     resolves to Inter. It never rendered — `styles/theme.css` declared an
     @font-face whose `src` pointed at a Google Fonts *stylesheet* URL rather
     than a font binary, which can only fail. That file is gone; the name is
     kept here only so the intended stack is still legible. Do not "fix" this
     by re-adding an @font-face: either vendor the real woff2 into
     `public/fonts/` via `scripts/fetch-fonts.mjs`, or drop the name. */
  --font-title: 'Cabinet Grotesk', 'Inter', -apple-system, system-ui, sans-serif;
  --font-heading: 'Inter', 'Cabinet Grotesk', -apple-system, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', Courier, monospace;
  --font-serif: 'Newsreader', Georgia, Cambria, 'Times New Roman', Times, serif;
}

:root.dark {
  /* ---- Surfaces ---- */
  --surface: 23 23 23; /* neutral-900 */
  --surface-canvas: 0 0 0; /* black (historical dark --color-background) */
  --surface-muted: 38 38 38; /* neutral-800 */
  --surface-subtle: 38 38 38; /* neutral-800 */
  --surface-strong: 38 38 38; /* neutral-800 */
  --surface-hover: 38 38 38; /* neutral-800 */
  --surface-overlay: 0 0 0;
  --surface-chrome: 10 10 10; /* neutral-950 — darker than --surface (23) so the
                                 content card reads as raised against the frame */

  /* ---- Text ---- */
  --content: 245 245 245; /* neutral-100 */
  --content-secondary: 212 212 212; /* neutral-300 */
  --content-muted: 163 163 163; /* neutral-400 */
  --content-faint: 115 115 115; /* neutral-500 */
  --content-inverted: 255 255 255;

  /* ---- Borders ---- */
  --line: 38 38 38; /* neutral-800 */
  --line-strong: 64 64 64; /* neutral-700 */
  --line-subtle: 38 38 38; /* neutral-800 */
  --line-chrome: 64 64 64; /* neutral-700 */

  /*
   * Accent palettes intentionally inherit their `:root` values under dark mode:
   * the historical design kept primary/sage/amber/coral identical across light
   * and dark, varying only the shade chosen per component via `dark:` utilities.
   * Custom themes may override these per theme.
   */
}