@cueplusplus/tokens 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1250 -0
- package/LICENSE +21 -0
- package/README.md +100 -0
- package/dist/axes.css +324 -0
- package/dist/base.json +364 -0
- package/dist/primitives.tokens.json +27 -0
- package/dist/registry/token-layer.json +340 -0
- package/dist/tailwind.css +20 -0
- package/dist/theme.css +12 -0
- package/dist/tokens.d.ts +114 -0
- package/dist/tokens.js +240 -0
- package/package.json +51 -0
|
@@ -0,0 +1,340 @@
|
|
|
1
|
+
{
|
|
2
|
+
"cssVars": {
|
|
3
|
+
"theme": {
|
|
4
|
+
"color-bg": "var(--cue-bg)",
|
|
5
|
+
"color-sunken": "var(--cue-sunken)",
|
|
6
|
+
"color-surface-1": "var(--cue-surface-1)",
|
|
7
|
+
"color-surface-2": "var(--cue-surface-2)",
|
|
8
|
+
"color-surface-3": "var(--cue-surface-3)",
|
|
9
|
+
"color-fg": "var(--cue-fg)",
|
|
10
|
+
"color-fg-muted": "var(--cue-fg-muted)",
|
|
11
|
+
"color-fg-subtle": "var(--cue-fg-subtle)",
|
|
12
|
+
"color-border": "var(--cue-border)",
|
|
13
|
+
"color-border-strong": "var(--cue-border-strong)",
|
|
14
|
+
"color-border-overlay": "var(--cue-border-overlay)",
|
|
15
|
+
"color-accent": "var(--cue-accent)",
|
|
16
|
+
"color-accent-hover": "var(--cue-accent-hover)",
|
|
17
|
+
"color-accent-fg": "var(--cue-accent-fg)",
|
|
18
|
+
"color-accent-soft": "var(--cue-accent-soft)",
|
|
19
|
+
"color-ok": "var(--cue-ok)",
|
|
20
|
+
"color-busy": "var(--cue-busy)",
|
|
21
|
+
"color-warn": "var(--cue-warn)",
|
|
22
|
+
"color-warn-fg": "var(--cue-warn-fg)",
|
|
23
|
+
"color-danger": "var(--cue-danger)",
|
|
24
|
+
"color-danger-fg": "var(--cue-danger-fg)",
|
|
25
|
+
"color-info": "var(--cue-info)",
|
|
26
|
+
"color-stream": "var(--cue-stream)",
|
|
27
|
+
"spacing-control-sm": "var(--cue-control-sm)",
|
|
28
|
+
"spacing-control-md": "var(--cue-control-md)",
|
|
29
|
+
"spacing-control-lg": "var(--cue-control-lg)",
|
|
30
|
+
"spacing-chip": "var(--cue-chip-h)",
|
|
31
|
+
"spacing-icon-sm": "var(--cue-icon-sm)",
|
|
32
|
+
"spacing-icon-md": "var(--cue-icon-md)",
|
|
33
|
+
"text-micro": "var(--cue-text-micro)",
|
|
34
|
+
"text-label": "var(--cue-text-label)",
|
|
35
|
+
"text-ui": "var(--cue-text-ui)",
|
|
36
|
+
"text-body": "var(--cue-text-body)",
|
|
37
|
+
"text-emphasis": "var(--cue-text-emphasis)",
|
|
38
|
+
"text-title": "var(--cue-text-title)",
|
|
39
|
+
"radius-control": "calc(var(--cue-radius-control) * var(--cue-radius-scale))",
|
|
40
|
+
"radius-surface": "calc(var(--cue-radius-surface) * var(--cue-radius-scale))",
|
|
41
|
+
"radius-overlay": "calc(var(--cue-radius-overlay) * var(--cue-radius-scale))",
|
|
42
|
+
"font-sans": "var(--cue-font-sans)",
|
|
43
|
+
"font-mono": "var(--cue-font-mono)"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"css": {
|
|
47
|
+
":root": {
|
|
48
|
+
"--cue-border-width": "1px",
|
|
49
|
+
"--cue-border-width-hairline": "0.5px",
|
|
50
|
+
"--cue-focus-ring": "2px",
|
|
51
|
+
"--cue-focus-ring-offset": "1px",
|
|
52
|
+
"--cue-radius-full": "9999px",
|
|
53
|
+
"--cue-icon-stroke": "1.5",
|
|
54
|
+
"--cue-font-sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", sans-serif",
|
|
55
|
+
"--cue-font-mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
|
|
56
|
+
"--cue-font-display": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
|
|
57
|
+
"--cue-tracking-label": "0.12em",
|
|
58
|
+
"--cue-transition-fast": "120ms",
|
|
59
|
+
"--cue-transition-base": "180ms",
|
|
60
|
+
"--cue-ease-out": "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
61
|
+
"--cue-control-sm": "1.25rem",
|
|
62
|
+
"--cue-control-md": "1.5rem",
|
|
63
|
+
"--cue-control-lg": "1.75rem",
|
|
64
|
+
"--cue-chip-h": "1.125rem",
|
|
65
|
+
"--cue-icon-sm": "0.625rem",
|
|
66
|
+
"--cue-icon-md": "0.75rem",
|
|
67
|
+
"--cue-text-micro": "calc(0.5rem * var(--cue-font-scale, 1))",
|
|
68
|
+
"--cue-text-label": "calc(0.5625rem * var(--cue-font-scale, 1))",
|
|
69
|
+
"--cue-text-ui": "calc(0.625rem * var(--cue-font-scale, 1))",
|
|
70
|
+
"--cue-text-body": "calc(0.6875rem * var(--cue-font-scale, 1))",
|
|
71
|
+
"--cue-text-emphasis": "calc(0.875rem * var(--cue-font-scale, 1))",
|
|
72
|
+
"--cue-text-title": "calc(1.125rem * var(--cue-font-scale, 1))",
|
|
73
|
+
"--cue-radius-control": "3px",
|
|
74
|
+
"--cue-radius-surface": "6px",
|
|
75
|
+
"--cue-radius-overlay": "8px",
|
|
76
|
+
"--cue-pad-row-y": "0.25rem",
|
|
77
|
+
"--cue-pad-row-x": "0.5rem",
|
|
78
|
+
"--cue-space-1": "0.125rem",
|
|
79
|
+
"--cue-space-2": "0.25rem",
|
|
80
|
+
"--cue-space-3": "0.375rem",
|
|
81
|
+
"--cue-space-4": "0.5rem",
|
|
82
|
+
"--cue-space-5": "0.75rem",
|
|
83
|
+
"--cue-space-6": "1rem",
|
|
84
|
+
"--cue-space-7": "1.5rem",
|
|
85
|
+
"--cue-space-8": "2rem",
|
|
86
|
+
"--cue-chrome-toolbar": "2.25rem",
|
|
87
|
+
"--cue-chrome-statusbar": "1.5rem",
|
|
88
|
+
"--cue-chrome-titlebar": "2.375rem",
|
|
89
|
+
"--cue-density": "1",
|
|
90
|
+
"--cue-radius-scale": "1",
|
|
91
|
+
"--cue-band-y": "var(--cue-space-7)",
|
|
92
|
+
"--cue-band-rule": "var(--cue-border-width)",
|
|
93
|
+
"--cue-band-ground": "transparent",
|
|
94
|
+
"--cue-leading-prose": "1.625",
|
|
95
|
+
"--cue-leading-ui": "1.625",
|
|
96
|
+
"--cue-measure-narrow": "42rem",
|
|
97
|
+
"--cue-measure-wide": "54rem",
|
|
98
|
+
"--cue-measure-broad": "84rem",
|
|
99
|
+
"--cue-measure-prose": "68ch"
|
|
100
|
+
},
|
|
101
|
+
"[data-density=\"ultra-compact\"]": {
|
|
102
|
+
"--cue-control-sm": "1.125rem",
|
|
103
|
+
"--cue-control-md": "1.25rem",
|
|
104
|
+
"--cue-control-lg": "1.5rem",
|
|
105
|
+
"--cue-chip-h": "1rem",
|
|
106
|
+
"--cue-icon-sm": "0.625rem",
|
|
107
|
+
"--cue-icon-md": "0.625rem",
|
|
108
|
+
"--cue-text-micro": "calc(0.5rem * var(--cue-font-scale, 1))",
|
|
109
|
+
"--cue-text-label": "calc(0.5rem * var(--cue-font-scale, 1))",
|
|
110
|
+
"--cue-text-ui": "calc(0.5625rem * var(--cue-font-scale, 1))",
|
|
111
|
+
"--cue-text-body": "calc(0.625rem * var(--cue-font-scale, 1))",
|
|
112
|
+
"--cue-text-emphasis": "calc(0.8125rem * var(--cue-font-scale, 1))",
|
|
113
|
+
"--cue-text-title": "calc(1rem * var(--cue-font-scale, 1))",
|
|
114
|
+
"--cue-radius-control": "2px",
|
|
115
|
+
"--cue-radius-surface": "4px",
|
|
116
|
+
"--cue-radius-overlay": "6px",
|
|
117
|
+
"--cue-pad-row-y": "0.125rem",
|
|
118
|
+
"--cue-pad-row-x": "0.375rem",
|
|
119
|
+
"--cue-space-1": "0.125rem",
|
|
120
|
+
"--cue-space-2": "0.125rem",
|
|
121
|
+
"--cue-space-3": "0.25rem",
|
|
122
|
+
"--cue-space-4": "0.375rem",
|
|
123
|
+
"--cue-space-5": "0.5rem",
|
|
124
|
+
"--cue-space-6": "0.75rem",
|
|
125
|
+
"--cue-space-7": "1rem",
|
|
126
|
+
"--cue-space-8": "1.5rem",
|
|
127
|
+
"--cue-chrome-toolbar": "2rem",
|
|
128
|
+
"--cue-chrome-statusbar": "1.375rem",
|
|
129
|
+
"--cue-chrome-titlebar": "2.25rem",
|
|
130
|
+
"--cue-density": "0.85",
|
|
131
|
+
"--cue-radius-scale": "0.75"
|
|
132
|
+
},
|
|
133
|
+
"[data-density=\"compact\"]": {
|
|
134
|
+
"--cue-control-sm": "1.25rem",
|
|
135
|
+
"--cue-control-md": "1.5rem",
|
|
136
|
+
"--cue-control-lg": "1.75rem",
|
|
137
|
+
"--cue-chip-h": "1.125rem",
|
|
138
|
+
"--cue-icon-sm": "0.625rem",
|
|
139
|
+
"--cue-icon-md": "0.75rem",
|
|
140
|
+
"--cue-text-micro": "calc(0.5rem * var(--cue-font-scale, 1))",
|
|
141
|
+
"--cue-text-label": "calc(0.5625rem * var(--cue-font-scale, 1))",
|
|
142
|
+
"--cue-text-ui": "calc(0.625rem * var(--cue-font-scale, 1))",
|
|
143
|
+
"--cue-text-body": "calc(0.6875rem * var(--cue-font-scale, 1))",
|
|
144
|
+
"--cue-text-emphasis": "calc(0.875rem * var(--cue-font-scale, 1))",
|
|
145
|
+
"--cue-text-title": "calc(1.125rem * var(--cue-font-scale, 1))",
|
|
146
|
+
"--cue-radius-control": "3px",
|
|
147
|
+
"--cue-radius-surface": "6px",
|
|
148
|
+
"--cue-radius-overlay": "8px",
|
|
149
|
+
"--cue-pad-row-y": "0.25rem",
|
|
150
|
+
"--cue-pad-row-x": "0.5rem",
|
|
151
|
+
"--cue-space-1": "0.125rem",
|
|
152
|
+
"--cue-space-2": "0.25rem",
|
|
153
|
+
"--cue-space-3": "0.375rem",
|
|
154
|
+
"--cue-space-4": "0.5rem",
|
|
155
|
+
"--cue-space-5": "0.75rem",
|
|
156
|
+
"--cue-space-6": "1rem",
|
|
157
|
+
"--cue-space-7": "1.5rem",
|
|
158
|
+
"--cue-space-8": "2rem",
|
|
159
|
+
"--cue-chrome-toolbar": "2.25rem",
|
|
160
|
+
"--cue-chrome-statusbar": "1.5rem",
|
|
161
|
+
"--cue-chrome-titlebar": "2.375rem",
|
|
162
|
+
"--cue-density": "1",
|
|
163
|
+
"--cue-radius-scale": "1"
|
|
164
|
+
},
|
|
165
|
+
"[data-density=\"normal\"]": {
|
|
166
|
+
"--cue-control-sm": "1.75rem",
|
|
167
|
+
"--cue-control-md": "2rem",
|
|
168
|
+
"--cue-control-lg": "2.25rem",
|
|
169
|
+
"--cue-chip-h": "1.375rem",
|
|
170
|
+
"--cue-icon-sm": "0.75rem",
|
|
171
|
+
"--cue-icon-md": "1rem",
|
|
172
|
+
"--cue-text-micro": "calc(0.5625rem * var(--cue-font-scale, 1))",
|
|
173
|
+
"--cue-text-label": "calc(0.625rem * var(--cue-font-scale, 1))",
|
|
174
|
+
"--cue-text-ui": "calc(0.75rem * var(--cue-font-scale, 1))",
|
|
175
|
+
"--cue-text-body": "calc(0.8125rem * var(--cue-font-scale, 1))",
|
|
176
|
+
"--cue-text-emphasis": "calc(1.0625rem * var(--cue-font-scale, 1))",
|
|
177
|
+
"--cue-text-title": "calc(1.375rem * var(--cue-font-scale, 1))",
|
|
178
|
+
"--cue-radius-control": "4px",
|
|
179
|
+
"--cue-radius-surface": "8px",
|
|
180
|
+
"--cue-radius-overlay": "10px",
|
|
181
|
+
"--cue-pad-row-y": "0.375rem",
|
|
182
|
+
"--cue-pad-row-x": "0.75rem",
|
|
183
|
+
"--cue-space-1": "0.25rem",
|
|
184
|
+
"--cue-space-2": "0.375rem",
|
|
185
|
+
"--cue-space-3": "0.5rem",
|
|
186
|
+
"--cue-space-4": "0.75rem",
|
|
187
|
+
"--cue-space-5": "1rem",
|
|
188
|
+
"--cue-space-6": "1.5rem",
|
|
189
|
+
"--cue-space-7": "2rem",
|
|
190
|
+
"--cue-space-8": "3rem",
|
|
191
|
+
"--cue-chrome-toolbar": "2.75rem",
|
|
192
|
+
"--cue-chrome-statusbar": "1.75rem",
|
|
193
|
+
"--cue-chrome-titlebar": "3rem",
|
|
194
|
+
"--cue-density": "1.3",
|
|
195
|
+
"--cue-radius-scale": "1"
|
|
196
|
+
},
|
|
197
|
+
"[data-density=\"large\"]": {
|
|
198
|
+
"--cue-control-sm": "2.25rem",
|
|
199
|
+
"--cue-control-md": "2.5rem",
|
|
200
|
+
"--cue-control-lg": "2.75rem",
|
|
201
|
+
"--cue-chip-h": "1.625rem",
|
|
202
|
+
"--cue-icon-sm": "0.875rem",
|
|
203
|
+
"--cue-icon-md": "1.25rem",
|
|
204
|
+
"--cue-text-micro": "calc(0.625rem * var(--cue-font-scale, 1))",
|
|
205
|
+
"--cue-text-label": "calc(0.6875rem * var(--cue-font-scale, 1))",
|
|
206
|
+
"--cue-text-ui": "calc(0.875rem * var(--cue-font-scale, 1))",
|
|
207
|
+
"--cue-text-body": "calc(0.9375rem * var(--cue-font-scale, 1))",
|
|
208
|
+
"--cue-text-emphasis": "calc(1.25rem * var(--cue-font-scale, 1))",
|
|
209
|
+
"--cue-text-title": "calc(1.625rem * var(--cue-font-scale, 1))",
|
|
210
|
+
"--cue-radius-control": "5px",
|
|
211
|
+
"--cue-radius-surface": "10px",
|
|
212
|
+
"--cue-radius-overlay": "12px",
|
|
213
|
+
"--cue-pad-row-y": "0.5rem",
|
|
214
|
+
"--cue-pad-row-x": "1rem",
|
|
215
|
+
"--cue-space-1": "0.375rem",
|
|
216
|
+
"--cue-space-2": "0.5rem",
|
|
217
|
+
"--cue-space-3": "0.75rem",
|
|
218
|
+
"--cue-space-4": "1rem",
|
|
219
|
+
"--cue-space-5": "1.5rem",
|
|
220
|
+
"--cue-space-6": "2rem",
|
|
221
|
+
"--cue-space-7": "3rem",
|
|
222
|
+
"--cue-space-8": "4rem",
|
|
223
|
+
"--cue-chrome-toolbar": "3.25rem",
|
|
224
|
+
"--cue-chrome-statusbar": "2rem",
|
|
225
|
+
"--cue-chrome-titlebar": "3.5rem",
|
|
226
|
+
"--cue-density": "1.6",
|
|
227
|
+
"--cue-radius-scale": "1"
|
|
228
|
+
},
|
|
229
|
+
"[data-density=\"ultra-large\"]": {
|
|
230
|
+
"--cue-control-sm": "2.75rem",
|
|
231
|
+
"--cue-control-md": "3rem",
|
|
232
|
+
"--cue-control-lg": "3.25rem",
|
|
233
|
+
"--cue-chip-h": "1.875rem",
|
|
234
|
+
"--cue-icon-sm": "1rem",
|
|
235
|
+
"--cue-icon-md": "1.5rem",
|
|
236
|
+
"--cue-text-micro": "calc(0.6875rem * var(--cue-font-scale, 1))",
|
|
237
|
+
"--cue-text-label": "calc(0.75rem * var(--cue-font-scale, 1))",
|
|
238
|
+
"--cue-text-ui": "calc(1rem * var(--cue-font-scale, 1))",
|
|
239
|
+
"--cue-text-body": "calc(1.0625rem * var(--cue-font-scale, 1))",
|
|
240
|
+
"--cue-text-emphasis": "calc(1.4375rem * var(--cue-font-scale, 1))",
|
|
241
|
+
"--cue-text-title": "calc(1.875rem * var(--cue-font-scale, 1))",
|
|
242
|
+
"--cue-radius-control": "6px",
|
|
243
|
+
"--cue-radius-surface": "12px",
|
|
244
|
+
"--cue-radius-overlay": "14px",
|
|
245
|
+
"--cue-pad-row-y": "0.625rem",
|
|
246
|
+
"--cue-pad-row-x": "1.25rem",
|
|
247
|
+
"--cue-space-1": "0.5rem",
|
|
248
|
+
"--cue-space-2": "0.75rem",
|
|
249
|
+
"--cue-space-3": "1rem",
|
|
250
|
+
"--cue-space-4": "1.5rem",
|
|
251
|
+
"--cue-space-5": "2rem",
|
|
252
|
+
"--cue-space-6": "3rem",
|
|
253
|
+
"--cue-space-7": "4rem",
|
|
254
|
+
"--cue-space-8": "6rem",
|
|
255
|
+
"--cue-chrome-toolbar": "3.75rem",
|
|
256
|
+
"--cue-chrome-statusbar": "2.25rem",
|
|
257
|
+
"--cue-chrome-titlebar": "4rem",
|
|
258
|
+
"--cue-density": "1.9",
|
|
259
|
+
"--cue-radius-scale": "1"
|
|
260
|
+
},
|
|
261
|
+
"@media (pointer: coarse)": {
|
|
262
|
+
"[data-density=\"ultra-compact\"]": {
|
|
263
|
+
"--cue-control-sm": "1.25rem",
|
|
264
|
+
"--cue-control-md": "1.5rem",
|
|
265
|
+
"--cue-control-lg": "1.75rem"
|
|
266
|
+
}
|
|
267
|
+
},
|
|
268
|
+
"[data-font=\"system\"]": {
|
|
269
|
+
"--cue-font-sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", sans-serif",
|
|
270
|
+
"--cue-font-display": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
|
|
271
|
+
"--cue-font-pairing-mono": "initial",
|
|
272
|
+
"--cue-font-mono": "var(--cue-font-theme-mono, ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace)"
|
|
273
|
+
},
|
|
274
|
+
"[data-font=\"geist\"]": {
|
|
275
|
+
"--cue-font-sans": "var(--cue-face-geist, Geist), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
|
|
276
|
+
"--cue-font-display": "var(--cue-face-geist, Geist), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
|
|
277
|
+
"--cue-font-pairing-mono": "var(--cue-face-jetbrains-mono, \"JetBrains Mono\"), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
|
|
278
|
+
"--cue-font-mono": "var(--cue-font-pairing-mono, var(--cue-font-theme-mono))"
|
|
279
|
+
},
|
|
280
|
+
"[data-font=\"inter\"]": {
|
|
281
|
+
"--cue-font-sans": "var(--cue-face-inter, Inter), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
|
|
282
|
+
"--cue-font-display": "var(--cue-face-inter, Inter), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
|
|
283
|
+
"--cue-font-pairing-mono": "var(--cue-face-ibm-plex-mono, \"IBM Plex Mono\"), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
|
|
284
|
+
"--cue-font-mono": "var(--cue-font-pairing-mono, var(--cue-font-theme-mono))"
|
|
285
|
+
},
|
|
286
|
+
"[data-font=\"plex\"]": {
|
|
287
|
+
"--cue-font-sans": "var(--cue-face-ibm-plex-sans, \"IBM Plex Sans\"), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
|
|
288
|
+
"--cue-font-display": "var(--cue-face-ibm-plex-sans, \"IBM Plex Sans\"), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
|
|
289
|
+
"--cue-font-pairing-mono": "var(--cue-face-ibm-plex-mono, \"IBM Plex Mono\"), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
|
|
290
|
+
"--cue-font-mono": "var(--cue-font-pairing-mono, var(--cue-font-theme-mono))"
|
|
291
|
+
},
|
|
292
|
+
"[data-font=\"roboto\"]": {
|
|
293
|
+
"--cue-font-sans": "var(--cue-face-roboto, Roboto), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
|
|
294
|
+
"--cue-font-display": "var(--cue-face-roboto, Roboto), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
|
|
295
|
+
"--cue-font-pairing-mono": "var(--cue-face-roboto-mono, \"Roboto Mono\"), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
|
|
296
|
+
"--cue-font-mono": "var(--cue-font-pairing-mono, var(--cue-font-theme-mono))"
|
|
297
|
+
},
|
|
298
|
+
"[data-font=\"source\"]": {
|
|
299
|
+
"--cue-font-sans": "var(--cue-face-source-sans-3, \"Source Sans 3\"), \"Source Sans Pro\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
|
|
300
|
+
"--cue-font-display": "var(--cue-face-source-sans-3, \"Source Sans 3\"), \"Source Sans Pro\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
|
|
301
|
+
"--cue-font-pairing-mono": "var(--cue-face-source-code-pro, \"Source Code Pro\"), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
|
|
302
|
+
"--cue-font-mono": "var(--cue-font-pairing-mono, var(--cue-font-theme-mono))"
|
|
303
|
+
},
|
|
304
|
+
"[data-font=\"apple\"]": {
|
|
305
|
+
"--cue-font-sans": "-apple-system, BlinkMacSystemFont, \"SF Pro Text\", system-ui, ui-sans-serif, sans-serif",
|
|
306
|
+
"--cue-font-display": "-apple-system, BlinkMacSystemFont, \"SF Pro Display\", system-ui, ui-sans-serif, sans-serif",
|
|
307
|
+
"--cue-font-pairing-mono": "\"SF Mono\", SFMono-Regular, ui-monospace, Menlo, monospace",
|
|
308
|
+
"--cue-font-mono": "var(--cue-font-pairing-mono, var(--cue-font-theme-mono))"
|
|
309
|
+
},
|
|
310
|
+
"[data-font=\"office\"]": {
|
|
311
|
+
"--cue-font-sans": "Calibri, Carlito, \"Segoe UI\", ui-sans-serif, system-ui, sans-serif",
|
|
312
|
+
"--cue-font-display": "Calibri, Carlito, \"Segoe UI\", ui-sans-serif, system-ui, sans-serif",
|
|
313
|
+
"--cue-font-pairing-mono": "\"Cascadia Mono\", \"Cascadia Code\", Consolas, ui-monospace, SFMono-Regular, monospace",
|
|
314
|
+
"--cue-font-mono": "var(--cue-font-pairing-mono, var(--cue-font-theme-mono))"
|
|
315
|
+
},
|
|
316
|
+
"[data-style=\"console\"]": {
|
|
317
|
+
"--cue-measure-prose": "68ch",
|
|
318
|
+
"--cue-leading-prose": "1.625",
|
|
319
|
+
"--cue-band-y": "var(--cue-space-7)",
|
|
320
|
+
"--cue-band-rule": "var(--cue-border-width)",
|
|
321
|
+
"--cue-band-ground": "transparent"
|
|
322
|
+
},
|
|
323
|
+
"[data-style=\"editorial\"]": {
|
|
324
|
+
"--cue-measure-prose": "74ch",
|
|
325
|
+
"--cue-leading-prose": "1.75",
|
|
326
|
+
"--cue-band-y": "calc(var(--cue-space-7) * 2)",
|
|
327
|
+
"--cue-band-rule": "var(--cue-border-width-hairline)",
|
|
328
|
+
"--cue-band-ground": "transparent",
|
|
329
|
+
"--cue-style-display": "calc(3.25rem * var(--cue-font-scale, 1))"
|
|
330
|
+
},
|
|
331
|
+
"[data-style=\"marketing\"]": {
|
|
332
|
+
"--cue-measure-prose": "60ch",
|
|
333
|
+
"--cue-leading-prose": "1.6",
|
|
334
|
+
"--cue-band-y": "calc(var(--cue-space-7) * 3)",
|
|
335
|
+
"--cue-band-rule": "0px",
|
|
336
|
+
"--cue-band-ground": "var(--cue-surface-1)",
|
|
337
|
+
"--cue-style-display": "calc(4rem * var(--cue-font-scale, 1))"
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/*! @cueplusplus/tokens — Tailwind v4 mapping layer
|
|
2
|
+
* Generated by build.mjs from src/**.tokens.json. Do not edit by hand.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@theme inline {
|
|
6
|
+
--color-bg: var(--cue-bg); --color-sunken: var(--cue-sunken);
|
|
7
|
+
--color-surface-1: var(--cue-surface-1); --color-surface-2: var(--cue-surface-2); --color-surface-3: var(--cue-surface-3);
|
|
8
|
+
--color-fg: var(--cue-fg); --color-fg-muted: var(--cue-fg-muted); --color-fg-subtle: var(--cue-fg-subtle);
|
|
9
|
+
--color-border: var(--cue-border); --color-border-strong: var(--cue-border-strong); --color-border-overlay: var(--cue-border-overlay);
|
|
10
|
+
--color-accent: var(--cue-accent); --color-accent-hover: var(--cue-accent-hover); --color-accent-fg: var(--cue-accent-fg); --color-accent-soft: var(--cue-accent-soft);
|
|
11
|
+
--color-ok: var(--cue-ok); --color-busy: var(--cue-busy); --color-warn: var(--cue-warn); --color-warn-fg: var(--cue-warn-fg); --color-danger: var(--cue-danger); --color-danger-fg: var(--cue-danger-fg); --color-info: var(--cue-info); --color-stream: var(--cue-stream);
|
|
12
|
+
--spacing-control-sm: var(--cue-control-sm); --spacing-control-md: var(--cue-control-md); --spacing-control-lg: var(--cue-control-lg);
|
|
13
|
+
--spacing-chip: var(--cue-chip-h); --spacing-icon-sm: var(--cue-icon-sm); --spacing-icon-md: var(--cue-icon-md);
|
|
14
|
+
--text-micro: var(--cue-text-micro); --text-label: var(--cue-text-label); --text-ui: var(--cue-text-ui);
|
|
15
|
+
--text-body: var(--cue-text-body); --text-emphasis: var(--cue-text-emphasis); --text-title: var(--cue-text-title);
|
|
16
|
+
--radius-control: calc(var(--cue-radius-control) * var(--cue-radius-scale));
|
|
17
|
+
--radius-surface: calc(var(--cue-radius-surface) * var(--cue-radius-scale));
|
|
18
|
+
--radius-overlay: calc(var(--cue-radius-overlay) * var(--cue-radius-scale));
|
|
19
|
+
--font-sans: var(--cue-font-sans); --font-mono: var(--cue-font-mono);
|
|
20
|
+
}
|
package/dist/theme.css
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/*! @cueplusplus/tokens — DEPRECATED — an alias for axes.css.
|
|
2
|
+
*
|
|
3
|
+
* This file used to carry the ten colour presets. It carries no colour at
|
|
4
|
+
* all now: a palette is a package. Import "@cueplusplus/ui/styles.css" for
|
|
5
|
+
* the blank base, then a theme package's own stylesheet — for example
|
|
6
|
+
* @import "@cueplusplus/theme-cue/theme.css" — and pass its manifest to
|
|
7
|
+
* <ThemeProvider themes={[cue]}>. This alias goes in the next minor.
|
|
8
|
+
*
|
|
9
|
+
* Generated by build.mjs from src/**.tokens.json. Do not edit by hand.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
@import "./axes.css";
|
package/dist/tokens.d.ts
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @cueplusplus/tokens — the typed half of the public contract.
|
|
3
|
+
* Generated by build.mjs. Do not edit by hand.
|
|
4
|
+
*
|
|
5
|
+
* The values are in `tokens.js`, beside this file and generated with it.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/** Every density level, in ladder order. */
|
|
9
|
+
export declare const DENSITIES: readonly ["ultra-compact", "compact", "normal", "large", "ultra-large"];
|
|
10
|
+
export type Density = (typeof DENSITIES)[number];
|
|
11
|
+
|
|
12
|
+
/** Color-scheme modes. `system` tracks `prefers-color-scheme`. */
|
|
13
|
+
export declare const MODES: readonly ["dark", "light", "system"];
|
|
14
|
+
export type Mode = "dark" | "light" | "system";
|
|
15
|
+
|
|
16
|
+
/** Dark-first portfolio: these are the values the ThemeProvider falls back to. */
|
|
17
|
+
export declare const DEFAULT_DENSITY: Density;
|
|
18
|
+
export declare const DEFAULT_MODE: Mode;
|
|
19
|
+
|
|
20
|
+
/** The colour tokens every theme block declares, in emission order. */
|
|
21
|
+
export declare const COLOR_CONTRACT: readonly ["bg", "sunken", "surface-1", "surface-2", "surface-3", "fg", "fg-muted", "fg-subtle", "border", "border-strong", "border-overlay", "accent", "accent-hover", "accent-fg", "ok", "busy", "warn", "warn-fg", "danger", "danger-fg", "info", "stream", "selection", "focus", "data-ground", "scrim"];
|
|
22
|
+
export type ColorToken = (typeof COLOR_CONTRACT)[number];
|
|
23
|
+
|
|
24
|
+
/** The geometry tokens every density block declares, in emission order. */
|
|
25
|
+
export declare const GEOMETRY_CONTRACT: readonly ["control-sm", "control-md", "control-lg", "chip-h", "icon-sm", "icon-md", "text-micro", "text-label", "text-ui", "text-body", "text-emphasis", "text-title", "radius-control", "radius-surface", "radius-overlay", "pad-row-y", "pad-row-x", "space-1", "space-2", "space-3", "space-4", "space-5", "space-6", "space-7", "space-8", "chrome-toolbar", "chrome-statusbar", "chrome-titlebar", "density", "radius-scale"];
|
|
26
|
+
export type GeometryToken = (typeof GEOMETRY_CONTRACT)[number];
|
|
27
|
+
|
|
28
|
+
/** The three type stacks a pairing may name. */
|
|
29
|
+
export declare const FONT_TOKENS: readonly ["font-sans", "font-mono", "font-display"];
|
|
30
|
+
export type FontToken = (typeof FONT_TOKENS)[number];
|
|
31
|
+
|
|
32
|
+
/** The page-composition tokens `:root` declares, in emission order. */
|
|
33
|
+
export declare const STYLE_CONTRACT: readonly ["leading-prose", "leading-ui", "measure-narrow", "measure-wide", "measure-broad", "measure-prose", "band-y", "band-rule", "band-ground"];
|
|
34
|
+
export type StyleToken = (typeof STYLE_CONTRACT)[number];
|
|
35
|
+
|
|
36
|
+
/** The page-composition tokens every `[data-style]` block declares. */
|
|
37
|
+
export declare const STYLE_SET_CONTRACT: readonly ["measure-prose", "leading-prose", "band-y", "band-rule", "band-ground"];
|
|
38
|
+
|
|
39
|
+
/** Style sets, in menu order — the fourth composable axis. */
|
|
40
|
+
export declare const STYLE_SETS: readonly ["console", "editorial", "marketing"];
|
|
41
|
+
export type StyleSet = (typeof STYLE_SETS)[number];
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* The set that restates the `:root` defaults. Unlike `DEFAULT_DENSITY` and
|
|
45
|
+
* `DEFAULT_FONT`, this is NOT what `<ThemeProvider>` opens on — it opens on *no set at all*
|
|
46
|
+
* and stamps no attribute, because a style set is opt-in page composition. This
|
|
47
|
+
* names the set a subtree stamps to declare itself console inside a page that
|
|
48
|
+
* is not.
|
|
49
|
+
*/
|
|
50
|
+
export declare const DEFAULT_STYLE_SET: StyleSet;
|
|
51
|
+
|
|
52
|
+
/** Every font pairing, in menu order. `system` is the default and costs nothing. */
|
|
53
|
+
export declare const FONTS: readonly ["system", "geist", "inter", "plex", "roboto", "source", "apple", "office"];
|
|
54
|
+
export type FontName = (typeof FONTS)[number];
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* The pairing an app that never touched the axis renders at.
|
|
58
|
+
*
|
|
59
|
+
* It declares no `--cue-font-mono`, so a preset's own monospace survives it.
|
|
60
|
+
* Every other pairing was chosen by a person and outranks the preset on both
|
|
61
|
+
* families — see the `[data-font]` blocks at the end of `theme.css`.
|
|
62
|
+
*/
|
|
63
|
+
export declare const DEFAULT_FONT: FontName;
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* How a pairing reaches a reader's screen.
|
|
67
|
+
*
|
|
68
|
+
* - `none` — the platform's own faces. Nothing to download, resolves everywhere.
|
|
69
|
+
* - `webfont` — freely redistributable; the app self-hosts it and assigns the
|
|
70
|
+
* `faces` properties. Undelivered, the stack still resolves: a local install
|
|
71
|
+
* first, then the platform.
|
|
72
|
+
* - `system` — licensed such that it CANNOT be served (SF Pro, Calibri). It
|
|
73
|
+
* lights up where installed and falls through cleanly where it is not, and no
|
|
74
|
+
* app may bundle it.
|
|
75
|
+
*/
|
|
76
|
+
export type FontDelivery = "none" | "webfont" | "system";
|
|
77
|
+
|
|
78
|
+
/** One pairing, for a picker row, a docs table and a delivery wiring. */
|
|
79
|
+
export interface FontPairing {
|
|
80
|
+
/** Menu label. */
|
|
81
|
+
label: string;
|
|
82
|
+
/** The sans family this pairing names. */
|
|
83
|
+
sans: string;
|
|
84
|
+
/** The mono family, or `null` for the default pairing, which leaves the theme's. */
|
|
85
|
+
mono: string | null;
|
|
86
|
+
/** How it reaches a screen. */
|
|
87
|
+
delivery: FontDelivery;
|
|
88
|
+
/** Custom properties an app assigns to deliver it. Empty unless `delivery` is `"webfont"`. */
|
|
89
|
+
faces: readonly string[];
|
|
90
|
+
/** The licensing and fallback facts, in one sentence a docs page can print. */
|
|
91
|
+
note: string;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/** Every pairing's families, delivery and licensing note, keyed by id. */
|
|
95
|
+
export declare const FONT_PAIRINGS: Record<FontName, FontPairing>;
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* Every face an app must self-host to deliver the webfont pairings, as
|
|
99
|
+
* `custom property -> family name`. Assign each one the family your bundler
|
|
100
|
+
* generated; `next/font` hashes family names, so the literal never matches.
|
|
101
|
+
*/
|
|
102
|
+
export declare const FONT_FACES: Record<string, string>;
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* The custom property that delivers one face.
|
|
106
|
+
* @example faceProperty("IBM Plex Mono") // "--cue-face-ibm-plex-mono"
|
|
107
|
+
*/
|
|
108
|
+
export declare const faceProperty: (family: string) => string;
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* Reference a semantic token as a CSS value.
|
|
112
|
+
* @example token("accent") // "var(--cue-accent)"
|
|
113
|
+
*/
|
|
114
|
+
export declare const token: (name: string) => string;
|