@stridge/noctis-design-tokens 1.0.0-beta.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/README.md +226 -0
- package/dist/apply-scopes.d.ts +12 -0
- package/dist/apply-scopes.js +30 -0
- package/dist/css.d.ts +10 -0
- package/dist/css.js +36 -0
- package/dist/graph/components.d.ts +6 -0
- package/dist/graph/components.js +4488 -0
- package/dist/graph/index.d.ts +11 -0
- package/dist/graph/index.js +26 -0
- package/dist/graph/inputs.d.ts +1 -0
- package/dist/graph/inputs.js +23 -0
- package/dist/graph/model.d.ts +205 -0
- package/dist/graph/model.js +282 -0
- package/dist/graph/registry.d.ts +67 -0
- package/dist/graph/registry.js +118 -0
- package/dist/graph/roles.d.ts +5 -0
- package/dist/graph/roles.js +151 -0
- package/dist/graph/scales.d.ts +1 -0
- package/dist/graph/scales.js +1296 -0
- package/dist/graph/serialize.d.ts +16 -0
- package/dist/graph/serialize.js +25 -0
- package/dist/graph/statics.d.ts +1 -0
- package/dist/graph/statics.js +419 -0
- package/dist/index.d.ts +26 -0
- package/dist/index.js +25 -0
- package/dist/palettes.d.ts +70 -0
- package/dist/palettes.js +114 -0
- package/dist/react/provider.d.ts +23 -0
- package/dist/react/provider.js +28 -0
- package/dist/react.d.ts +3 -0
- package/dist/react.js +3 -0
- package/dist/scales.d.ts +186 -0
- package/dist/scales.js +186 -0
- package/dist/semantic.d.ts +36 -0
- package/dist/semantic.js +49 -0
- package/dist/swatches.d.ts +24 -0
- package/dist/swatches.js +57 -0
- package/dist/tokens.css +2607 -0
- package/dist/tokens.dtcg.json +3475 -0
- package/dist/tokens.json +14658 -0
- package/dist/tokens.tailwind.css +479 -0
- package/package.json +67 -0
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { TokenName } from "./model.js";
|
|
2
|
+
|
|
3
|
+
//#region src/graph/serialize.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* The dashed body of a token name (namespace prefix excluded): a flat name's id verbatim, or a
|
|
6
|
+
* component name's `component[-anatomy]-property[-state]`. Object field order is irrelevant —
|
|
7
|
+
* the serialization order is fixed (component → anatomy → property → state).
|
|
8
|
+
*/
|
|
9
|
+
declare function serializeTokenName(name: TokenName): string;
|
|
10
|
+
/**
|
|
11
|
+
* The slot-internal custom property a component declares on its slot to carry the resolution
|
|
12
|
+
* chain. Defined only for component names — flat names have no internal twin.
|
|
13
|
+
*/
|
|
14
|
+
declare function internalVar(name: TokenName): `--_${string}`;
|
|
15
|
+
//#endregion
|
|
16
|
+
export { internalVar, serializeTokenName };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
//#region src/graph/serialize.ts
|
|
2
|
+
/**
|
|
3
|
+
* The dashed body of a token name (namespace prefix excluded): a flat name's id verbatim, or a
|
|
4
|
+
* component name's `component[-anatomy]-property[-state]`. Object field order is irrelevant —
|
|
5
|
+
* the serialization order is fixed (component → anatomy → property → state).
|
|
6
|
+
*/
|
|
7
|
+
function serializeTokenName(name) {
|
|
8
|
+
if (name.kind === "flat") return name.id;
|
|
9
|
+
return [
|
|
10
|
+
name.component,
|
|
11
|
+
name.anatomy,
|
|
12
|
+
name.property,
|
|
13
|
+
name.state
|
|
14
|
+
].filter(Boolean).join("-");
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* The slot-internal custom property a component declares on its slot to carry the resolution
|
|
18
|
+
* chain. Defined only for component names — flat names have no internal twin.
|
|
19
|
+
*/
|
|
20
|
+
function internalVar(name) {
|
|
21
|
+
if (name.kind !== "component") throw new Error(`internalVar is component-only; received a flat name "${serializeTokenName(name)}"`);
|
|
22
|
+
return `--_${serializeTokenName(name)}`;
|
|
23
|
+
}
|
|
24
|
+
//#endregion
|
|
25
|
+
export { internalVar, serializeTokenName };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
|
@@ -0,0 +1,419 @@
|
|
|
1
|
+
/** Authored static T1 semantic tokens, in reference display order. */
|
|
2
|
+
const STATIC_SEMANTIC_TOKENS = [
|
|
3
|
+
{
|
|
4
|
+
uuid: "fc02f2e2-77c0-4e43-8f14-5f26d16f36f1",
|
|
5
|
+
tier: "semantic",
|
|
6
|
+
name: {
|
|
7
|
+
kind: "flat",
|
|
8
|
+
id: "text-disabled"
|
|
9
|
+
},
|
|
10
|
+
value: { raw: "color-mix(in oklch, var(--noctis-engine-fg-4) 55%, transparent)" },
|
|
11
|
+
description: "Disabled text where reduced opacity is inappropriate.",
|
|
12
|
+
usage: "Disabled text over busy rows where dimming the whole element is wrong.",
|
|
13
|
+
introduced: "0.0.0",
|
|
14
|
+
label: "Disabled text",
|
|
15
|
+
category: "color",
|
|
16
|
+
group: "text",
|
|
17
|
+
utility: "text-disabled",
|
|
18
|
+
bridge: {
|
|
19
|
+
kind: "theme-inline",
|
|
20
|
+
name: "--color-disabled"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
uuid: "4e1b2bce-53d9-47fe-be88-583041a0bc01",
|
|
25
|
+
tier: "semantic",
|
|
26
|
+
name: {
|
|
27
|
+
kind: "flat",
|
|
28
|
+
id: "well"
|
|
29
|
+
},
|
|
30
|
+
value: { raw: `color-mix(in oklch, var(--noctis-engine-fg-1) 20%, transparent)` },
|
|
31
|
+
description: "Recessed-well / track fill that stays visible on any surface.",
|
|
32
|
+
usage: "The unfilled bed of a track, gutter, or recessed region — a translucent foreground overlay so it self-adapts to whatever surface sits behind it.",
|
|
33
|
+
introduced: "0.1.0-alpha.2",
|
|
34
|
+
label: "Well",
|
|
35
|
+
category: "color",
|
|
36
|
+
group: "surface",
|
|
37
|
+
utility: "bg-well",
|
|
38
|
+
bridge: { kind: "color" }
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
uuid: "45be4a2b-5971-4a3c-9c6e-289ba72c3e63",
|
|
42
|
+
tier: "semantic",
|
|
43
|
+
name: {
|
|
44
|
+
kind: "flat",
|
|
45
|
+
id: "chart-1"
|
|
46
|
+
},
|
|
47
|
+
value: {
|
|
48
|
+
raw: "oklch(0.7 0.15 264)",
|
|
49
|
+
rawLight: "oklch(0.55 0.17 264)"
|
|
50
|
+
},
|
|
51
|
+
description: "Categorical chart series 1.",
|
|
52
|
+
usage: "Categorical chart series — a stable, accent-independent palette.",
|
|
53
|
+
introduced: "0.0.0",
|
|
54
|
+
label: "Chart 1",
|
|
55
|
+
category: "color",
|
|
56
|
+
group: "chart",
|
|
57
|
+
utility: "bg-chart-1",
|
|
58
|
+
bridge: { kind: "color" }
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
uuid: "d2d0d9bd-d1d5-4447-a08b-c544dcc51922",
|
|
62
|
+
tier: "semantic",
|
|
63
|
+
name: {
|
|
64
|
+
kind: "flat",
|
|
65
|
+
id: "chart-2"
|
|
66
|
+
},
|
|
67
|
+
value: {
|
|
68
|
+
raw: "oklch(0.78 0.13 195)",
|
|
69
|
+
rawLight: "oklch(0.6 0.13 195)"
|
|
70
|
+
},
|
|
71
|
+
description: "Categorical chart series 2.",
|
|
72
|
+
usage: "Categorical chart series — a stable, accent-independent palette.",
|
|
73
|
+
introduced: "0.0.0",
|
|
74
|
+
label: "Chart 2",
|
|
75
|
+
category: "color",
|
|
76
|
+
group: "chart",
|
|
77
|
+
utility: "bg-chart-2",
|
|
78
|
+
bridge: { kind: "color" }
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
uuid: "ea930647-ecef-4ae2-bb81-2d601f3eac43",
|
|
82
|
+
tier: "semantic",
|
|
83
|
+
name: {
|
|
84
|
+
kind: "flat",
|
|
85
|
+
id: "chart-3"
|
|
86
|
+
},
|
|
87
|
+
value: {
|
|
88
|
+
raw: "oklch(0.74 0.16 150)",
|
|
89
|
+
rawLight: "oklch(0.58 0.16 150)"
|
|
90
|
+
},
|
|
91
|
+
description: "Categorical chart series 3.",
|
|
92
|
+
usage: "Categorical chart series — a stable, accent-independent palette.",
|
|
93
|
+
introduced: "0.0.0",
|
|
94
|
+
label: "Chart 3",
|
|
95
|
+
category: "color",
|
|
96
|
+
group: "chart",
|
|
97
|
+
utility: "bg-chart-3",
|
|
98
|
+
bridge: { kind: "color" }
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
uuid: "a2ef87da-e31c-47cf-b5cf-39afed4fb2ad",
|
|
102
|
+
tier: "semantic",
|
|
103
|
+
name: {
|
|
104
|
+
kind: "flat",
|
|
105
|
+
id: "chart-4"
|
|
106
|
+
},
|
|
107
|
+
value: {
|
|
108
|
+
raw: "oklch(0.83 0.15 95)",
|
|
109
|
+
rawLight: "oklch(0.68 0.15 95)"
|
|
110
|
+
},
|
|
111
|
+
description: "Categorical chart series 4.",
|
|
112
|
+
usage: "Categorical chart series — a stable, accent-independent palette.",
|
|
113
|
+
introduced: "0.0.0",
|
|
114
|
+
label: "Chart 4",
|
|
115
|
+
category: "color",
|
|
116
|
+
group: "chart",
|
|
117
|
+
utility: "bg-chart-4",
|
|
118
|
+
bridge: { kind: "color" }
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
uuid: "c9de26e2-f367-4316-bf36-62db564182d9",
|
|
122
|
+
tier: "semantic",
|
|
123
|
+
name: {
|
|
124
|
+
kind: "flat",
|
|
125
|
+
id: "chart-5"
|
|
126
|
+
},
|
|
127
|
+
value: {
|
|
128
|
+
raw: "oklch(0.72 0.16 55)",
|
|
129
|
+
rawLight: "oklch(0.6 0.17 55)"
|
|
130
|
+
},
|
|
131
|
+
description: "Categorical chart series 5.",
|
|
132
|
+
usage: "Categorical chart series — a stable, accent-independent palette.",
|
|
133
|
+
introduced: "0.0.0",
|
|
134
|
+
label: "Chart 5",
|
|
135
|
+
category: "color",
|
|
136
|
+
group: "chart",
|
|
137
|
+
utility: "bg-chart-5",
|
|
138
|
+
bridge: { kind: "color" }
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
uuid: "ad319f18-7ae2-453a-a01f-c0244df13e0d",
|
|
142
|
+
tier: "semantic",
|
|
143
|
+
name: {
|
|
144
|
+
kind: "flat",
|
|
145
|
+
id: "chart-6"
|
|
146
|
+
},
|
|
147
|
+
value: {
|
|
148
|
+
raw: "oklch(0.68 0.18 25)",
|
|
149
|
+
rawLight: "oklch(0.55 0.2 25)"
|
|
150
|
+
},
|
|
151
|
+
description: "Categorical chart series 6.",
|
|
152
|
+
usage: "Categorical chart series — a stable, accent-independent palette.",
|
|
153
|
+
introduced: "0.0.0",
|
|
154
|
+
label: "Chart 6",
|
|
155
|
+
category: "color",
|
|
156
|
+
group: "chart",
|
|
157
|
+
utility: "bg-chart-6",
|
|
158
|
+
bridge: { kind: "color" }
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
uuid: "9d894fe9-1815-46ae-bbd0-d4e1e1ebf3f7",
|
|
162
|
+
tier: "semantic",
|
|
163
|
+
name: {
|
|
164
|
+
kind: "flat",
|
|
165
|
+
id: "chart-7"
|
|
166
|
+
},
|
|
167
|
+
value: {
|
|
168
|
+
raw: "oklch(0.7 0.17 310)",
|
|
169
|
+
rawLight: "oklch(0.55 0.19 310)"
|
|
170
|
+
},
|
|
171
|
+
description: "Categorical chart series 7.",
|
|
172
|
+
usage: "Categorical chart series — a stable, accent-independent palette.",
|
|
173
|
+
introduced: "0.0.0",
|
|
174
|
+
label: "Chart 7",
|
|
175
|
+
category: "color",
|
|
176
|
+
group: "chart",
|
|
177
|
+
utility: "bg-chart-7",
|
|
178
|
+
bridge: { kind: "color" }
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
uuid: "f6235811-1942-406d-8e9c-30578c2b6ab3",
|
|
182
|
+
tier: "semantic",
|
|
183
|
+
name: {
|
|
184
|
+
kind: "flat",
|
|
185
|
+
id: "chart-8"
|
|
186
|
+
},
|
|
187
|
+
value: {
|
|
188
|
+
raw: "oklch(0.76 0.14 350)",
|
|
189
|
+
rawLight: "oklch(0.6 0.16 350)"
|
|
190
|
+
},
|
|
191
|
+
description: "Categorical chart series 8.",
|
|
192
|
+
usage: "Categorical chart series — a stable, accent-independent palette.",
|
|
193
|
+
introduced: "0.0.0",
|
|
194
|
+
label: "Chart 8",
|
|
195
|
+
category: "color",
|
|
196
|
+
group: "chart",
|
|
197
|
+
utility: "bg-chart-8",
|
|
198
|
+
bridge: { kind: "color" }
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
uuid: "e3a3fffd-08c6-4428-b1c4-2ef6871cd105",
|
|
202
|
+
tier: "semantic",
|
|
203
|
+
name: {
|
|
204
|
+
kind: "flat",
|
|
205
|
+
id: "avatar-1"
|
|
206
|
+
},
|
|
207
|
+
value: {
|
|
208
|
+
raw: "oklch(0.62 0.17 264)",
|
|
209
|
+
rawLight: "oklch(0.58 0.18 264)"
|
|
210
|
+
},
|
|
211
|
+
description: "Generative avatar swatch 1.",
|
|
212
|
+
usage: "Avatar / initials background, indexed by a stable id hash.",
|
|
213
|
+
introduced: "0.0.0",
|
|
214
|
+
label: "Avatar 1",
|
|
215
|
+
category: "color",
|
|
216
|
+
group: "avatar",
|
|
217
|
+
utility: "bg-avatar-1",
|
|
218
|
+
bridge: { kind: "color" }
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
uuid: "c94440a3-9695-4a60-a30f-d4208264fb9c",
|
|
222
|
+
tier: "semantic",
|
|
223
|
+
name: {
|
|
224
|
+
kind: "flat",
|
|
225
|
+
id: "avatar-2"
|
|
226
|
+
},
|
|
227
|
+
value: {
|
|
228
|
+
raw: "oklch(0.62 0.15 196)",
|
|
229
|
+
rawLight: "oklch(0.56 0.15 196)"
|
|
230
|
+
},
|
|
231
|
+
description: "Generative avatar swatch 2.",
|
|
232
|
+
usage: "Avatar / initials background, indexed by a stable id hash.",
|
|
233
|
+
introduced: "0.0.0",
|
|
234
|
+
label: "Avatar 2",
|
|
235
|
+
category: "color",
|
|
236
|
+
group: "avatar",
|
|
237
|
+
utility: "bg-avatar-2",
|
|
238
|
+
bridge: { kind: "color" }
|
|
239
|
+
},
|
|
240
|
+
{
|
|
241
|
+
uuid: "9a123d6a-99a1-47d6-894e-f8d4955443e9",
|
|
242
|
+
tier: "semantic",
|
|
243
|
+
name: {
|
|
244
|
+
kind: "flat",
|
|
245
|
+
id: "avatar-3"
|
|
246
|
+
},
|
|
247
|
+
value: {
|
|
248
|
+
raw: "oklch(0.62 0.16 152)",
|
|
249
|
+
rawLight: "oklch(0.56 0.16 152)"
|
|
250
|
+
},
|
|
251
|
+
description: "Generative avatar swatch 3.",
|
|
252
|
+
usage: "Avatar / initials background, indexed by a stable id hash.",
|
|
253
|
+
introduced: "0.0.0",
|
|
254
|
+
label: "Avatar 3",
|
|
255
|
+
category: "color",
|
|
256
|
+
group: "avatar",
|
|
257
|
+
utility: "bg-avatar-3",
|
|
258
|
+
bridge: { kind: "color" }
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
uuid: "17763bc9-6671-4f36-858d-d8a598a00987",
|
|
262
|
+
tier: "semantic",
|
|
263
|
+
name: {
|
|
264
|
+
kind: "flat",
|
|
265
|
+
id: "avatar-4"
|
|
266
|
+
},
|
|
267
|
+
value: {
|
|
268
|
+
raw: "oklch(0.64 0.15 130)",
|
|
269
|
+
rawLight: "oklch(0.58 0.15 130)"
|
|
270
|
+
},
|
|
271
|
+
description: "Generative avatar swatch 4.",
|
|
272
|
+
usage: "Avatar / initials background, indexed by a stable id hash.",
|
|
273
|
+
introduced: "0.0.0",
|
|
274
|
+
label: "Avatar 4",
|
|
275
|
+
category: "color",
|
|
276
|
+
group: "avatar",
|
|
277
|
+
utility: "bg-avatar-4",
|
|
278
|
+
bridge: { kind: "color" }
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
uuid: "7728d6d9-a196-4d33-8113-2fae86a08a2b",
|
|
282
|
+
tier: "semantic",
|
|
283
|
+
name: {
|
|
284
|
+
kind: "flat",
|
|
285
|
+
id: "avatar-5"
|
|
286
|
+
},
|
|
287
|
+
value: {
|
|
288
|
+
raw: "oklch(0.66 0.16 70)",
|
|
289
|
+
rawLight: "oklch(0.62 0.16 70)"
|
|
290
|
+
},
|
|
291
|
+
description: "Generative avatar swatch 5.",
|
|
292
|
+
usage: "Avatar / initials background, indexed by a stable id hash.",
|
|
293
|
+
introduced: "0.0.0",
|
|
294
|
+
label: "Avatar 5",
|
|
295
|
+
category: "color",
|
|
296
|
+
group: "avatar",
|
|
297
|
+
utility: "bg-avatar-5",
|
|
298
|
+
bridge: { kind: "color" }
|
|
299
|
+
},
|
|
300
|
+
{
|
|
301
|
+
uuid: "d5536df4-39ab-4dd2-a3a2-e9acbcf0ec77",
|
|
302
|
+
tier: "semantic",
|
|
303
|
+
name: {
|
|
304
|
+
kind: "flat",
|
|
305
|
+
id: "avatar-6"
|
|
306
|
+
},
|
|
307
|
+
value: {
|
|
308
|
+
raw: "oklch(0.62 0.18 40)",
|
|
309
|
+
rawLight: "oklch(0.58 0.19 40)"
|
|
310
|
+
},
|
|
311
|
+
description: "Generative avatar swatch 6.",
|
|
312
|
+
usage: "Avatar / initials background, indexed by a stable id hash.",
|
|
313
|
+
introduced: "0.0.0",
|
|
314
|
+
label: "Avatar 6",
|
|
315
|
+
category: "color",
|
|
316
|
+
group: "avatar",
|
|
317
|
+
utility: "bg-avatar-6",
|
|
318
|
+
bridge: { kind: "color" }
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
uuid: "c27d7067-d36c-486d-87bd-8c9d6ec2c5a9",
|
|
322
|
+
tier: "semantic",
|
|
323
|
+
name: {
|
|
324
|
+
kind: "flat",
|
|
325
|
+
id: "avatar-7"
|
|
326
|
+
},
|
|
327
|
+
value: {
|
|
328
|
+
raw: "oklch(0.6 0.2 18)",
|
|
329
|
+
rawLight: "oklch(0.56 0.21 18)"
|
|
330
|
+
},
|
|
331
|
+
description: "Generative avatar swatch 7.",
|
|
332
|
+
usage: "Avatar / initials background, indexed by a stable id hash.",
|
|
333
|
+
introduced: "0.0.0",
|
|
334
|
+
label: "Avatar 7",
|
|
335
|
+
category: "color",
|
|
336
|
+
group: "avatar",
|
|
337
|
+
utility: "bg-avatar-7",
|
|
338
|
+
bridge: { kind: "color" }
|
|
339
|
+
},
|
|
340
|
+
{
|
|
341
|
+
uuid: "14d955f4-5a36-43b1-91c3-8aa452ea097d",
|
|
342
|
+
tier: "semantic",
|
|
343
|
+
name: {
|
|
344
|
+
kind: "flat",
|
|
345
|
+
id: "avatar-8"
|
|
346
|
+
},
|
|
347
|
+
value: {
|
|
348
|
+
raw: "oklch(0.6 0.18 330)",
|
|
349
|
+
rawLight: "oklch(0.56 0.19 330)"
|
|
350
|
+
},
|
|
351
|
+
description: "Generative avatar swatch 8.",
|
|
352
|
+
usage: "Avatar / initials background, indexed by a stable id hash.",
|
|
353
|
+
introduced: "0.0.0",
|
|
354
|
+
label: "Avatar 8",
|
|
355
|
+
category: "color",
|
|
356
|
+
group: "avatar",
|
|
357
|
+
utility: "bg-avatar-8",
|
|
358
|
+
bridge: { kind: "color" }
|
|
359
|
+
},
|
|
360
|
+
{
|
|
361
|
+
uuid: "9ce232b0-56f8-4098-983a-a3af52fb0ffb",
|
|
362
|
+
tier: "semantic",
|
|
363
|
+
name: {
|
|
364
|
+
kind: "flat",
|
|
365
|
+
id: "avatar-9"
|
|
366
|
+
},
|
|
367
|
+
value: {
|
|
368
|
+
raw: "oklch(0.6 0.18 300)",
|
|
369
|
+
rawLight: "oklch(0.56 0.19 300)"
|
|
370
|
+
},
|
|
371
|
+
description: "Generative avatar swatch 9.",
|
|
372
|
+
usage: "Avatar / initials background, indexed by a stable id hash.",
|
|
373
|
+
introduced: "0.0.0",
|
|
374
|
+
label: "Avatar 9",
|
|
375
|
+
category: "color",
|
|
376
|
+
group: "avatar",
|
|
377
|
+
utility: "bg-avatar-9",
|
|
378
|
+
bridge: { kind: "color" }
|
|
379
|
+
},
|
|
380
|
+
{
|
|
381
|
+
uuid: "a78cb6f4-a317-455a-930d-96687f38d69f",
|
|
382
|
+
tier: "semantic",
|
|
383
|
+
name: {
|
|
384
|
+
kind: "flat",
|
|
385
|
+
id: "avatar-10"
|
|
386
|
+
},
|
|
387
|
+
value: {
|
|
388
|
+
raw: "oklch(0.6 0.15 285)",
|
|
389
|
+
rawLight: "oklch(0.56 0.16 285)"
|
|
390
|
+
},
|
|
391
|
+
description: "Generative avatar swatch 10.",
|
|
392
|
+
usage: "Avatar / initials background, indexed by a stable id hash.",
|
|
393
|
+
introduced: "0.0.0",
|
|
394
|
+
label: "Avatar 10",
|
|
395
|
+
category: "color",
|
|
396
|
+
group: "avatar",
|
|
397
|
+
utility: "bg-avatar-10",
|
|
398
|
+
bridge: { kind: "color" }
|
|
399
|
+
},
|
|
400
|
+
{
|
|
401
|
+
uuid: "8ac67b72-d712-4c92-af5f-c0caae413e20",
|
|
402
|
+
tier: "semantic",
|
|
403
|
+
name: {
|
|
404
|
+
kind: "flat",
|
|
405
|
+
id: "avatar-foreground"
|
|
406
|
+
},
|
|
407
|
+
value: { raw: "oklch(0.99 0 0)" },
|
|
408
|
+
description: "Initials text on an avatar background.",
|
|
409
|
+
usage: "Initials text on an avatar — the page background as a knockout.",
|
|
410
|
+
introduced: "0.0.0",
|
|
411
|
+
label: "Avatar foreground",
|
|
412
|
+
category: "color",
|
|
413
|
+
group: "avatar",
|
|
414
|
+
utility: "text-avatar-foreground",
|
|
415
|
+
bridge: { kind: "color" }
|
|
416
|
+
}
|
|
417
|
+
];
|
|
418
|
+
//#endregion
|
|
419
|
+
export { STATIC_SEMANTIC_TOKENS };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { applyThemeWithScopes } from "./apply-scopes.js";
|
|
2
|
+
import { defaultThemeCss } from "./css.js";
|
|
3
|
+
import { CATEGORY_REGISTRY, COMPOSITE_PROPERTIES, ComponentCategory, CompositeProperty, ROLE_VAR_PREFIX, STATE_REGISTRY, TOKEN_CATEGORIES, TOKEN_TIERS, TokenCategory, TokenState, TokenTier } from "./graph/registry.js";
|
|
4
|
+
import { ComponentDeclaration, DesignToken, GraphValidationError, TokenBridge, TokenDeprecation, TokenGroup, TokenName, TokenValue, bridgeVarName, componentDeclarationSchema, cssVarName, designTokenSchema, validateGraph } from "./graph/model.js";
|
|
5
|
+
import { COMPONENT_DECLARATIONS } from "./graph/components.js";
|
|
6
|
+
import { DESIGN_TOKENS, SemanticRoleId } from "./graph/index.js";
|
|
7
|
+
import { internalVar, serializeTokenName } from "./graph/serialize.js";
|
|
8
|
+
import { AVATAR_FOREGROUND, AVATAR_PALETTE, AVATAR_SWATCH_COUNT, CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, ModePalette, avatarIndex } from "./palettes.js";
|
|
9
|
+
import { BREAKPOINTS, DENSITY_VAR, EASINGS, FONT_SCALE_VAR, FONT_SIZES, FONT_WEIGHTS, RADII, RADIUS_VAR, SPEEDS, Z_INDEX } from "./scales.js";
|
|
10
|
+
import { ACCENT_SWATCHES, BACKGROUND_SWATCHES, ThemeSwatch } from "./swatches.js";
|
|
11
|
+
import { ELEVATION_SCOPES, ElevationScope, SEMANTIC_ROLES, STATIC_TOKENS, SemanticRole, StaticToken } from "./semantic.js";
|
|
12
|
+
import { ThemeOverrides, ThemePreset, defaultPreset, presets } from "@stridge/noctis-theme-engine";
|
|
13
|
+
|
|
14
|
+
//#region src/index.d.ts
|
|
15
|
+
/**
|
|
16
|
+
* `@stridge/noctis-design-tokens` — the semantic token layer on top of `@stridge/noctis-theme-engine`.
|
|
17
|
+
*
|
|
18
|
+
* Defines the intent-named L2 roles components consume, the static L0 scales the engine
|
|
19
|
+
* does not own, the brand presets, and the build-time default CSS. The Tailwind bridge that
|
|
20
|
+
* turns the roles into utilities lives in `./tokens.css`; the "semantic tokens only" lint is
|
|
21
|
+
* the `stridge/semantic-tokens` oxlint rule in `toolings/noctis-lint`.
|
|
22
|
+
*/
|
|
23
|
+
/** Package identifier — the workspace-resolution marker consumed by the app scaffold. */
|
|
24
|
+
declare const DESIGN_TOKENS_PACKAGE: "@stridge/noctis-design-tokens";
|
|
25
|
+
//#endregion
|
|
26
|
+
export { ACCENT_SWATCHES, AVATAR_FOREGROUND, AVATAR_PALETTE, AVATAR_SWATCH_COUNT, BACKGROUND_SWATCHES, BREAKPOINTS, CATEGORY_REGISTRY, CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, COMPONENT_DECLARATIONS, COMPOSITE_PROPERTIES, type ComponentCategory, type ComponentDeclaration, type CompositeProperty, DENSITY_VAR, DESIGN_TOKENS, DESIGN_TOKENS_PACKAGE, type DesignToken, EASINGS, ELEVATION_SCOPES, type ElevationScope, FONT_SCALE_VAR, FONT_SIZES, FONT_WEIGHTS, GraphValidationError, type ModePalette, RADII, RADIUS_VAR, ROLE_VAR_PREFIX, SEMANTIC_ROLES, SPEEDS, STATE_REGISTRY, STATIC_TOKENS, type SemanticRole, type SemanticRoleId, type StaticToken, TOKEN_CATEGORIES, TOKEN_TIERS, type ThemeOverrides, type ThemePreset, type ThemeSwatch, type TokenBridge, type TokenCategory, type TokenDeprecation, type TokenGroup, type TokenName, type TokenState, type TokenTier, type TokenValue, Z_INDEX, applyThemeWithScopes, avatarIndex, bridgeVarName, componentDeclarationSchema, cssVarName, defaultPreset, defaultThemeCss, designTokenSchema, internalVar, presets, serializeTokenName, validateGraph };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { applyThemeWithScopes } from "./apply-scopes.js";
|
|
2
|
+
import { defaultThemeCss } from "./css.js";
|
|
3
|
+
import { COMPONENT_DECLARATIONS } from "./graph/components.js";
|
|
4
|
+
import { CATEGORY_REGISTRY, COMPOSITE_PROPERTIES, ROLE_VAR_PREFIX, STATE_REGISTRY, TOKEN_CATEGORIES, TOKEN_TIERS } from "./graph/registry.js";
|
|
5
|
+
import { internalVar, serializeTokenName } from "./graph/serialize.js";
|
|
6
|
+
import { GraphValidationError, bridgeVarName, componentDeclarationSchema, cssVarName, designTokenSchema, validateGraph } from "./graph/model.js";
|
|
7
|
+
import { DESIGN_TOKENS } from "./graph/index.js";
|
|
8
|
+
import { AVATAR_FOREGROUND, AVATAR_PALETTE, AVATAR_SWATCH_COUNT, CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, avatarIndex } from "./palettes.js";
|
|
9
|
+
import { BREAKPOINTS, DENSITY_VAR, EASINGS, FONT_SCALE_VAR, FONT_SIZES, FONT_WEIGHTS, RADII, RADIUS_VAR, SPEEDS, Z_INDEX } from "./scales.js";
|
|
10
|
+
import { ACCENT_SWATCHES, BACKGROUND_SWATCHES } from "./swatches.js";
|
|
11
|
+
import { ELEVATION_SCOPES, SEMANTIC_ROLES, STATIC_TOKENS } from "./semantic.js";
|
|
12
|
+
import { defaultPreset, presets } from "@stridge/noctis-theme-engine";
|
|
13
|
+
//#region src/index.ts
|
|
14
|
+
/**
|
|
15
|
+
* `@stridge/noctis-design-tokens` — the semantic token layer on top of `@stridge/noctis-theme-engine`.
|
|
16
|
+
*
|
|
17
|
+
* Defines the intent-named L2 roles components consume, the static L0 scales the engine
|
|
18
|
+
* does not own, the brand presets, and the build-time default CSS. The Tailwind bridge that
|
|
19
|
+
* turns the roles into utilities lives in `./tokens.css`; the "semantic tokens only" lint is
|
|
20
|
+
* the `stridge/semantic-tokens` oxlint rule in `toolings/noctis-lint`.
|
|
21
|
+
*/
|
|
22
|
+
/** Package identifier — the workspace-resolution marker consumed by the app scaffold. */
|
|
23
|
+
const DESIGN_TOKENS_PACKAGE = "@stridge/noctis-design-tokens";
|
|
24
|
+
//#endregion
|
|
25
|
+
export { ACCENT_SWATCHES, AVATAR_FOREGROUND, AVATAR_PALETTE, AVATAR_SWATCH_COUNT, BACKGROUND_SWATCHES, BREAKPOINTS, CATEGORY_REGISTRY, CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, COMPONENT_DECLARATIONS, COMPOSITE_PROPERTIES, DENSITY_VAR, DESIGN_TOKENS, DESIGN_TOKENS_PACKAGE, EASINGS, ELEVATION_SCOPES, FONT_SCALE_VAR, FONT_SIZES, FONT_WEIGHTS, GraphValidationError, RADII, RADIUS_VAR, ROLE_VAR_PREFIX, SEMANTIC_ROLES, SPEEDS, STATE_REGISTRY, STATIC_TOKENS, TOKEN_CATEGORIES, TOKEN_TIERS, Z_INDEX, applyThemeWithScopes, avatarIndex, bridgeVarName, componentDeclarationSchema, cssVarName, defaultPreset, defaultThemeCss, designTokenSchema, internalVar, presets, serializeTokenName, validateGraph };
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
//#region src/palettes.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* Static, accent-independent palettes the engine does not generate.
|
|
4
|
+
*
|
|
5
|
+
* Charts and avatars need **categorical distinctness that stays stable** regardless of the
|
|
6
|
+
* active theme accent, so these are authored in OKLCH (not derived from the seed) with
|
|
7
|
+
* explicit light and dark values. They are emitted as Tailwind colors (`bg-chart-1`,
|
|
8
|
+
* `bg-avatar-3`, `text-chart-positive`) and switch on the resolved mode via `data-theme`.
|
|
9
|
+
*
|
|
10
|
+
* Hue choices are spread across the wheel and separated in lightness as well as hue, so the
|
|
11
|
+
* series remain distinguishable under the common forms of color-vision deficiency (the worst
|
|
12
|
+
* case — deutan/protan red↔green — is disambiguated by the lightness and the blue/amber axis).
|
|
13
|
+
*/
|
|
14
|
+
/** A palette with a value per supported mode. */
|
|
15
|
+
interface ModePalette {
|
|
16
|
+
readonly light: readonly string[];
|
|
17
|
+
readonly dark: readonly string[];
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Categorical chart series (8). Spread across the hue wheel with alternating lightness;
|
|
21
|
+
* dark-mode values sit lighter (read on dark surfaces), light-mode values sit darker.
|
|
22
|
+
*/
|
|
23
|
+
declare const CHART_PALETTE: ModePalette;
|
|
24
|
+
/**
|
|
25
|
+
* Avatar / identity backgrounds (10). Saturated mid-lightness colors chosen so white initials
|
|
26
|
+
* read clearly on every swatch; picked deterministically by hashing a stable id.
|
|
27
|
+
*/
|
|
28
|
+
declare const AVATAR_PALETTE: ModePalette;
|
|
29
|
+
/** Number of distinct chart series and avatar swatches. */
|
|
30
|
+
declare const CHART_SERIES_COUNT: number;
|
|
31
|
+
declare const AVATAR_SWATCH_COUNT: number;
|
|
32
|
+
/** On-avatar text — a fixed knockout that reads on every (saturated) avatar swatch. */
|
|
33
|
+
declare const AVATAR_FOREGROUND: "oklch(0.99 0 0)";
|
|
34
|
+
/**
|
|
35
|
+
* Pick a stable avatar swatch index (1-based, matching `bg-avatar-N`) for an id. A small FNV-1a
|
|
36
|
+
* hash keeps the mapping deterministic across renders and sessions.
|
|
37
|
+
*/
|
|
38
|
+
declare function avatarIndex(id: string): number;
|
|
39
|
+
/** Chart roles that alias engine semantics (kept here so the swatch/reference lists them together). */
|
|
40
|
+
declare const CHART_SEMANTIC_ROLES: readonly [{
|
|
41
|
+
readonly role: "chart-positive";
|
|
42
|
+
readonly utility: "text-chart-positive";
|
|
43
|
+
readonly description: "Up / gain trend (= success).";
|
|
44
|
+
}, {
|
|
45
|
+
readonly role: "chart-negative";
|
|
46
|
+
readonly utility: "text-chart-negative";
|
|
47
|
+
readonly description: "Down / loss trend (= danger).";
|
|
48
|
+
}, {
|
|
49
|
+
readonly role: "chart-neutral";
|
|
50
|
+
readonly utility: "text-chart-neutral";
|
|
51
|
+
readonly description: "Flat / baseline series.";
|
|
52
|
+
}, {
|
|
53
|
+
readonly role: "chart-grid";
|
|
54
|
+
readonly utility: "border-chart-grid";
|
|
55
|
+
readonly description: "Gridlines and axis ticks.";
|
|
56
|
+
}, {
|
|
57
|
+
readonly role: "chart-axis";
|
|
58
|
+
readonly utility: "text-chart-axis";
|
|
59
|
+
readonly description: "Axis labels and tick text.";
|
|
60
|
+
}, {
|
|
61
|
+
readonly role: "chart-track";
|
|
62
|
+
readonly utility: "bg-chart-track";
|
|
63
|
+
readonly description: "Empty bar / gauge remainder.";
|
|
64
|
+
}, {
|
|
65
|
+
readonly role: "chart-tooltip";
|
|
66
|
+
readonly utility: "bg-chart-tooltip";
|
|
67
|
+
readonly description: "Chart tooltip surface.";
|
|
68
|
+
}];
|
|
69
|
+
//#endregion
|
|
70
|
+
export { AVATAR_FOREGROUND, AVATAR_PALETTE, AVATAR_SWATCH_COUNT, CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, ModePalette, avatarIndex };
|