tokenlab-docs/custom.css at main · hedging8563/tokenlab-docs · 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
/* Mintlify sets its heading face from fonts.family even when fonts.heading
   names another, so the serif display face is loaded and applied here.
   @import has to come before every other rule. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif&display=swap");

/* TokenLab 2.0 semantics, from apps/web/design-system/tokenlab-tokens.json.
   Keep these scoped values in sync with that owner; docs-theme.test.mjs checks it. */
:root {
  --tokenlab-docs-surface: #FFFFFF;
  --tokenlab-docs-text: #1B1814;
  --tokenlab-docs-muted: #57514A;
  --tokenlab-docs-line: #E8E3DB;
  --tokenlab-docs-control-border: #908880;
  --tokenlab-docs-action: #8A5A45;
  --tokenlab-docs-action-hover: #7A4E3B;
  --tokenlab-docs-action-text: #FFFFFF;
  --tokenlab-docs-brand: #875B49;
  --tokenlab-docs-focus: #8A5A45;
  --tokenlab-docs-danger: #B64135;
}

.dark {
  --tokenlab-docs-surface: #171915;
  --tokenlab-docs-text: #F2F2EE;
  --tokenlab-docs-muted: #B6B8B0;
  --tokenlab-docs-line: #292C26;
  --tokenlab-docs-control-border: #62665D;
  --tokenlab-docs-action: #D39A80;
  --tokenlab-docs-action-hover: #DFAB92;
  --tokenlab-docs-action-text: #151714;
  --tokenlab-docs-brand: #D39A80;
  --tokenlab-docs-focus: #D39A80;
  --tokenlab-docs-danger: #E47D70;
}

/* Mintlify colors.dark is shared by button themes. Use the matching 2.0
   action semantics for this documented hook in both light and dark mode. */
#topbar-cta-button > a > span {
  background-color: var(--tokenlab-docs-action);
}

#topbar-cta-button > a:hover > span {
  background-color: var(--tokenlab-docs-action-hover);
}

#topbar-cta-button > a > div,
#topbar-cta-button > a > div > * { color: var(--tokenlab-docs-action-text); }

#tokenlab-auth-input {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin-block-end: 1rem;
  padding: 1rem;
  border: 1px solid var(--tokenlab-docs-line);
  border-radius: 0.625rem;
  background: var(--tokenlab-docs-surface);
  color: var(--tokenlab-docs-text);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
}

#tokenlab-auth-input *,
#tokenlab-auth-input *::before,
#tokenlab-auth-input *::after {
  box-sizing: border-box;
}

#tokenlab-auth-input .tokenlab-auth-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
}

#tokenlab-auth-input label { font-weight: 600; }
#tokenlab-auth-input .tokenlab-auth-required { color: var(--tokenlab-docs-danger); font-size: 0.75rem; }

#tokenlab-auth-input .tokenlab-auth-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

#tokenlab-api-key-input {
  flex: 1 1 8rem;
  width: 0;
  min-width: 0;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--tokenlab-docs-control-border);
  border-radius: 0.4375rem;
  background: var(--tokenlab-docs-surface);
  color: var(--tokenlab-docs-text);
  font-family: 'IBM Plex Mono', SFMono-Regular, Consolas, monospace;
  font-size: 0.875rem;
}

#tokenlab-api-key-input::placeholder { color: var(--tokenlab-docs-muted); }

#tokenlab-toggle-visibility {
  flex: 0 1 auto;
  min-height: 2.75rem;
  max-width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid transparent;
  border-radius: 0.4375rem;
  background: var(--tokenlab-docs-action);
  color: var(--tokenlab-docs-action-text);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  overflow-wrap: anywhere;
}

#tokenlab-toggle-visibility:hover { background: var(--tokenlab-docs-action-hover); }

#tokenlab-auth-input input:focus-visible,
#tokenlab-auth-input button:focus-visible,
#tokenlab-auth-input a:focus-visible,
#topbar-cta-button > a:focus-visible {
  outline: 2px solid var(--tokenlab-docs-focus);
  outline-offset: 2px;
}

#tokenlab-auth-input .tokenlab-auth-help {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-block-start: 0.5rem;
  color: var(--tokenlab-docs-muted);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

#tokenlab-auth-input a { color: var(--tokenlab-docs-brand); text-decoration: underline; text-underline-offset: 2px; }

/* An article's title and section headings use the site's serif display
   face, as on tokenlab.sh; navigation labels and smaller headings stay in
   the text face. Instrument Serif has one weight, so headings keep it rather
   than a synthesized bold. */
#content-area h1,
#content-area h2 {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.012em;
}