~bigbes/lethe

ref: 5928a62ab320b3c552c39d2a1fbf1692e88bf5d5 lethe/web/src/styles/tokens.css -rw-r--r-- 2.6 KiB
5928a62a — Eugene Blikh docs(lethe-oidc-stub): design + plan a month ago 
                                                                                
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

/* Design tokens — ported verbatim from prototype.css */

:root {
  /* Accent locked at hue 120 (true green) */
  --accent:       oklch(0.78 0.18 120);
  --accent-soft:  oklch(0.94 0.05 120);
  --accent-ink:   oklch(0.30 0.10 120);
  --accent-on:    oklch(0.20 0.08 120);  /* fg on bright accent bg */

  /* Surfaces */
  --paper:   #fdfcf8;   /* main bg */
  --paper-2: #f3f0e7;   /* hover */
  --paper-3: #fbfaf2;   /* sub-bar / table head */
  --paper-4: #ffffff;   /* card body */

  /* Ink */
  --ink:    #1c1a17;
  --ink-2:  #4a453d;
  --ink-3:  #7a7468;
  --ink-4:  #b3ad9f;

  /* Rules */
  --rule:   #d8d3c4;
  --rule-2: #e6e1d2;

  /* Top bar */
  --topbar-bg: #1c1a17;
  --topbar-fg: #fdfcf8;
  --topbar-input-bg: rgba(255,255,255,0.06);
  --topbar-input-bd: rgba(255,255,255,0.15);

  /* Tag base */
  --tag-bg:    #ebe7d8;
  --tag-host-bg: #d9e6dd;
  --tag-host-fg: #2f5a3f;

  /* Turn backgrounds */
  --turn-user: #f5f0e0;
  --turn-asst: #ffffff;
  --turn-tool: #f8f5e9;

  /* Status */
  --ok:    #3b6e3b;  --ok-bg: #d6efd6;
  --warn:  #c89a3a;  --warn-bg: #fdebcc;
  --err:   #b04a2a;  --err-bg: #f5dccf;

  /* Misc */
  --scrim:  rgba(28,26,23,0.45);
  --shadow: 0 20px 60px rgba(0,0,0,0.25);
  --shadow-pop: 0 8px 24px rgba(0,0,0,0.18);

  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans: 'Inter', system-ui, sans-serif;
}

[data-theme="dark"] {
  /* Same accent hue but tuned for dark surface contrast */
  --accent:       oklch(0.78 0.16 120);
  --accent-soft:  oklch(0.30 0.08 120);
  --accent-ink:   oklch(0.86 0.16 120);
  --accent-on:    oklch(0.18 0.06 120);  /* fg on bright accent bg */

  --paper:   #15140f;
  --paper-2: #211f17;
  --paper-3: #1a1813;
  --paper-4: #1d1b14;

  --ink:    #e8e3d4;
  --ink-2:  #b8b2a0;
  --ink-3:  #807a6b;
  --ink-4:  #4a4538;

  --rule:   #2c2920;
  --rule-2: #24221a;

  --topbar-bg: #0d0c08;
  --topbar-fg: #e8e3d4;
  --topbar-input-bg: rgba(255,255,255,0.04);
  --topbar-input-bd: rgba(255,255,255,0.10);

  --tag-bg:    #2a2820;
  --tag-host-bg: #1f3327;
  --tag-host-fg: #8fc09e;

  --turn-user: #1f1d15;
  --turn-asst: #15140f;
  --turn-tool: #211f17;

  --ok:    #6fb46f;  --ok-bg: #1f3327;
  --warn:  #d4a648;  --warn-bg: #3a2e15;
  --err:   #d97052;  --err-bg: #3a1f15;

  --scrim:  rgba(0,0,0,0.65);
  --shadow: 0 20px 60px rgba(0,0,0,0.6);
  --shadow-pop: 0 8px 24px rgba(0,0,0,0.5);
}

/* Base reset */
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}