dom/theme.css at main · tinywasm/dom · 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
/*
 * tinywasm/dom — canonical design tokens
 *
 * FALLBACK THEME — injected once by the site builder into <head>.
 * Only defines CSS custom properties on :root — no resets, no global styles.
 *
 * Colors are inspired by Go, WebAssembly, JavaScript and HTML5 official palettes.
 *
 * Apps override by injecting their own CssVars.Render() output into <head>.
 * Dark mode works without JS: automatic via prefers-color-scheme,
 * manual override via [data-theme="dark"|"light"] on <html>.
 */

/* ── Default (light base) ─────────────────────────────────── */
:root {
  --color-primary:    #1C1C1E; /* dark text on light bg           */
  --color-secondary:  #00ADD8; /* Go cyan — brand accent            */
  --color-tertiary:   #6E6E73; /* muted                           */
  --color-quaternary: #F2F2F7; /* light panel                     */
  --color-gray:       #FFFFFF; /* white surface                   */
  --color-selection:  #654FF0; /* WebAssembly purple               */
  --color-hover:      #B8860B; /* darker JS yellow (readable)     */
  --color-success:    #3FB950; /* Go gopher green                  */
  --color-error:      #E34F26; /* HTML5 orange-red                 */

  --menu-width-collapsed: 64px;
  --menu-width-expanded:  250px;

  --title-height:    8vh;
  --content-height:  89vh;
  --controls-height: 3vh;

  --mag-pri: 0.5rem;
  --mag-sec: 0.2rem;
  --mag-cua: 0.2rem;
}

/* ── Automatic dark (OS preference, no JS required) ─────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary:    #E6EDF3; /* light text on dark bg            */
    --color-secondary:  #00ADD8; /* Go cyan stays                   */
    --color-tertiary:   #8B949E; /* muted text / borders             */
    --color-quaternary: #161B22; /* deep background / panels         */
    --color-gray:       #0D1117; /* neutral dark surface             */
    --color-selection:  #654FF0; /* WASM purple stays               */
    --color-hover:      #F7DF1E; /* JavaScript yellow                */
  }
}

/* ── Manual light override ([data-theme="light"] on <html>) ───── */
[data-theme="light"] {
  --color-primary:    #1C1C1E;
  --color-secondary:  #00ADD8;
  --color-tertiary:   #6E6E73;
  --color-quaternary: #F2F2F7;
  --color-gray:       #FFFFFF;
  --color-selection:  #654FF0;
  --color-hover:      #B8860B;
}

/* ── Manual dark override ([data-theme="dark"] on <html>) ────── */
[data-theme="dark"] {
  --color-primary:    #E6EDF3;
  --color-secondary:  #00ADD8;
  --color-tertiary:   #8B949E;
  --color-quaternary: #161B22;
  --color-gray:       #0D1117;
  --color-selection:  #654FF0;
  --color-hover:      #F7DF1E;
}