design-token-library 0.3.0 → 0.4.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 +38 -0
- package/dist/lib/css-reflector.d.ts +32 -24
- package/dist/lib/css-reflector.js +10 -26
- package/dist/lib/css-reflector.js.map +1 -1
- package/dist/lib/equality.d.ts +16 -0
- package/dist/lib/equality.js +90 -0
- package/dist/lib/equality.js.map +1 -0
- package/dist/lib/graph.d.ts +58 -0
- package/dist/lib/graph.js +104 -0
- package/dist/lib/graph.js.map +1 -0
- package/dist/lib/index.d.ts +4 -2
- package/dist/lib/index.js +2 -1
- package/dist/lib/index.js.map +1 -1
- package/dist/lib/library.d.ts +221 -10
- package/dist/lib/library.js +1256 -258
- package/dist/lib/library.js.map +1 -1
- package/dist/lib/notifier.d.ts +0 -15
- package/dist/lib/notifier.js +0 -23
- package/dist/lib/notifier.js.map +1 -1
- package/dist/lib/parse-document.d.ts +21 -0
- package/dist/lib/parse-document.js +31 -0
- package/dist/lib/parse-document.js.map +1 -0
- package/dist/lib/parse-expression.d.ts +45 -0
- package/dist/lib/parse-expression.js +148 -0
- package/dist/lib/parse-expression.js.map +1 -0
- package/dist/lib/parse-extension.d.ts +24 -0
- package/dist/lib/parse-extension.js +68 -0
- package/dist/lib/parse-extension.js.map +1 -0
- package/dist/lib/parse-resolve.d.ts +16 -0
- package/dist/lib/parse-resolve.js +281 -0
- package/dist/lib/parse-resolve.js.map +1 -0
- package/dist/lib/parse-value.d.ts +35 -0
- package/dist/lib/parse-value.js +330 -0
- package/dist/lib/parse-value.js.map +1 -0
- package/dist/lib/parse.d.ts +103 -0
- package/dist/lib/parse.js +562 -0
- package/dist/lib/parse.js.map +1 -0
- package/dist/lib/queue.d.ts +13 -2
- package/dist/lib/queue.js +18 -2
- package/dist/lib/queue.js.map +1 -1
- package/dist/lib/ref.d.ts +18 -1
- package/dist/lib/ref.js +22 -4
- package/dist/lib/ref.js.map +1 -1
- package/dist/lib/standard-values.d.ts +50 -0
- package/dist/lib/standard-values.js +73 -0
- package/dist/lib/standard-values.js.map +1 -0
- package/dist/lib/tsconfig.tsbuildinfo +1 -1
- package/dist/lib/utilities.d.ts +6 -0
- package/dist/lib/utilities.js +7 -1
- package/dist/lib/utilities.js.map +1 -1
- package/package.json +9 -5
- package/dist/lib/public.d.ts +0 -1405
- package/dist/lib/tsdoc-metadata.json +0 -11
- package/dist/lib/watcher.d.ts +0 -12
- package/dist/lib/watcher.js +0 -25
- package/dist/lib/watcher.js.map +0 -1
package/dist/lib/public.d.ts
DELETED
|
@@ -1,1405 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Thrown when reading a token whose value refers back to itself through
|
|
3
|
-
* one or more refs or computed values.
|
|
4
|
-
*
|
|
5
|
-
* @public
|
|
6
|
-
*/
|
|
7
|
-
export declare class CircularReferenceError extends Error {
|
|
8
|
-
readonly name = "CircularReferenceError";
|
|
9
|
-
/**
|
|
10
|
-
* The names of the tokens in the cycle, starting and ending with the
|
|
11
|
-
* same token.
|
|
12
|
-
*/
|
|
13
|
-
readonly chain: string[];
|
|
14
|
-
constructor(chain: string[]);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* The key of the phantom type of a computed value, apart from a ref's, so
|
|
19
|
-
* that a ref's type is never inferred from a computed value's.
|
|
20
|
-
*/
|
|
21
|
-
declare const COMPUTES: unique symbol;
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* A token's value as it was configured, or last given to `set()`, with its
|
|
25
|
-
* refs and computed values unresolved. A token of a library made by
|
|
26
|
-
* `extend()` that isn't given a value has its source token's.
|
|
27
|
-
*
|
|
28
|
-
* @remarks
|
|
29
|
-
* A token's `$value` is resolved, so it can't tell a value that is given from
|
|
30
|
-
* one that is derived from other tokens, or say where in a value a ref is. A
|
|
31
|
-
* tool that reads how a library is configured finds the refs in this value
|
|
32
|
-
* with {@link isRef} and the computed values with {@link isComputed}: a value
|
|
33
|
-
* with neither, at any depth, is given. A converter that writes a ref as a
|
|
34
|
-
* CSS `var()`, rather than its token's value, reads the ref here and its
|
|
35
|
-
* path with {@link pathOf}.
|
|
36
|
-
*
|
|
37
|
-
* It's the value the token holds, not a copy, so it isn't frozen. Changing it
|
|
38
|
-
* doesn't change the token: give a new value to `set()`. Refs and computed
|
|
39
|
-
* values are searched for in plain data, as the library resolves them, and
|
|
40
|
-
* not in a class instance or a function.
|
|
41
|
-
*
|
|
42
|
-
* @example
|
|
43
|
-
* ```ts
|
|
44
|
-
* const isGiven = (value: unknown): boolean =>
|
|
45
|
-
* !isRef(value) &&
|
|
46
|
-
* !isComputed(value) &&
|
|
47
|
-
* (typeof value !== "object" || value === null ||
|
|
48
|
-
* Object.values(value).every(isGiven));
|
|
49
|
-
*
|
|
50
|
-
* isGiven(configuredValueOf(library.tokens.colors.primary)); // true
|
|
51
|
-
* isGiven(configuredValueOf(library.tokens.colors.hover)); // false: a recipe
|
|
52
|
-
* ```
|
|
53
|
-
*
|
|
54
|
-
* @public
|
|
55
|
-
*/
|
|
56
|
-
export declare const configuredValueOf: <T extends DesignToken.Shape, R extends {}, G extends string = never>(token: Library.Token<T, R, G>) => Library.ConfigTokenValue<T, R> | DesignToken.ReadonlyValueByToken<T>;
|
|
57
|
-
|
|
58
|
-
/**
|
|
59
|
-
* Converts a value of a standard type to CSS, the way {@link toCSS} does for a
|
|
60
|
-
* token of the type, without a converter for the type in `converters`.
|
|
61
|
-
*
|
|
62
|
-
* @remarks
|
|
63
|
-
* A converter for a custom type that has values of standard types uses it for
|
|
64
|
-
* each of them, and a converter for a standard type can use it for what it
|
|
65
|
-
* keeps.
|
|
66
|
-
*
|
|
67
|
-
* @example
|
|
68
|
-
* ```ts
|
|
69
|
-
* toCSS(library, {
|
|
70
|
-
* converters: {
|
|
71
|
-
* elevation: (value) =>
|
|
72
|
-
* `${convert("dimension", value.offset)} ${convert("color", value.color)}`,
|
|
73
|
-
* },
|
|
74
|
-
* });
|
|
75
|
-
* ```
|
|
76
|
-
*
|
|
77
|
-
* @param type - The type, like `"color"`
|
|
78
|
-
* @param value - The value of a token of the type
|
|
79
|
-
* @returns The value as it is written to CSS
|
|
80
|
-
*
|
|
81
|
-
* @public
|
|
82
|
-
*/
|
|
83
|
-
export declare function convert<Name extends keyof DesignToken.ReadonlyValueByType>(type: Name, value: DesignToken.ReadonlyValueByType[Name]): string;
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* @public
|
|
87
|
-
*/
|
|
88
|
-
export declare type ConvertersOf<C> = {
|
|
89
|
-
[N in C extends {
|
|
90
|
-
$type: infer N extends string;
|
|
91
|
-
} ? N : never]: C extends {
|
|
92
|
-
$type: N;
|
|
93
|
-
} ? C extends DesignToken.Shape ? CSSConverter<DesignToken.ReadonlyValueByToken<C>, C> : never : never;
|
|
94
|
-
};
|
|
95
|
-
|
|
96
|
-
/**
|
|
97
|
-
* Converts a token value to a CSS value.
|
|
98
|
-
*
|
|
99
|
-
* @remarks
|
|
100
|
-
* A string is the value of the token's custom property, and is the same as
|
|
101
|
-
* `{ "": value }`. A converter returns {@link CSSValues} to write a token as
|
|
102
|
-
* more than one property, such as a value for each state of a component, or
|
|
103
|
-
* a typography value as a property for each of its fields. An empty record
|
|
104
|
-
* writes none.
|
|
105
|
-
*
|
|
106
|
-
* @public
|
|
107
|
-
*/
|
|
108
|
-
export declare type CSSConverter<V, T extends DesignToken.Shape = DesignToken.Shape> = (value: V, token: Library.Token<T, {}>) => CSSValue;
|
|
109
|
-
|
|
110
|
-
/**
|
|
111
|
-
* What a library of shape `T` accepts for each custom token type: a
|
|
112
|
-
* {@link CSSConverter}, or `false` for a type that is not serialized.
|
|
113
|
-
*
|
|
114
|
-
* @public
|
|
115
|
-
*/
|
|
116
|
-
export declare type CSSConverterEntries<T> = {
|
|
117
|
-
[N in keyof CSSConverters<T>]: CSSConverters<T>[N] | false;
|
|
118
|
-
};
|
|
119
|
-
|
|
120
|
-
/**
|
|
121
|
-
* A {@link CSSConverter} for each custom token type in a library of shape `T`,
|
|
122
|
-
* keyed by type name.
|
|
123
|
-
*
|
|
124
|
-
* @public
|
|
125
|
-
*/
|
|
126
|
-
export declare type CSSConverters<T> = ConvertersOf<CustomTokensOf<T>>;
|
|
127
|
-
|
|
128
|
-
/**
|
|
129
|
-
* Options accepted by {@link toCSS}.
|
|
130
|
-
*
|
|
131
|
-
* @remarks
|
|
132
|
-
* `converters` is required when the library contains custom token types,
|
|
133
|
-
* and must have an entry for each of them: a converter, or `false` for a type
|
|
134
|
-
* whose tokens are not written to CSS.
|
|
135
|
-
* It can have a converter for a standard type as well, which is used in place
|
|
136
|
-
* of the one of the library, see {@link convert} for what it does.
|
|
137
|
-
*
|
|
138
|
-
* @public
|
|
139
|
-
*/
|
|
140
|
-
export declare type CSSOptions<T> = CSSPropertiesOptions & ([CustomTokensOf<T>] extends [never] ? {
|
|
141
|
-
converters?: StandardConverters;
|
|
142
|
-
} : {
|
|
143
|
-
converters: CSSConverterEntries<T> & StandardConverters;
|
|
144
|
-
});
|
|
145
|
-
|
|
146
|
-
/**
|
|
147
|
-
* A collection of {@link CSSPropertyValues} (`var` and `property` per token) that mirrors the
|
|
148
|
-
* structure of the source {@link (Library:namespace).Library}.
|
|
149
|
-
*
|
|
150
|
-
* @remarks
|
|
151
|
-
* `C` is the converters given to {@link toProperties}, which name the
|
|
152
|
-
* properties of a token written as more than one, see {@link CSSPropertiesOf}.
|
|
153
|
-
*
|
|
154
|
-
* @public
|
|
155
|
-
*/
|
|
156
|
-
export declare type CSSPropertiesLibrary<T extends {}, C = {}> = {
|
|
157
|
-
[K in keyof Readonly<T>]: T[K] extends DesignToken.Shape ? CSSPropertiesOf<T[K], C> : K extends keyof DesignToken.Group ? T[K] : T[K] extends {} ? CSSPropertiesLibrary<T[K], C> : never;
|
|
158
|
-
};
|
|
159
|
-
|
|
160
|
-
/**
|
|
161
|
-
* The {@link CSSPropertyValues} of a token of shape `T`, given the
|
|
162
|
-
* converters `C`: one for its property, or one for each key of the
|
|
163
|
-
* {@link CSSValues} its converter returns, where `""` is the token's own.
|
|
164
|
-
*
|
|
165
|
-
* @remarks
|
|
166
|
-
* The keys are known when the return type of the converter is inferred.
|
|
167
|
-
* When it isn't, such as for a converter typed {@link CSSConverter}, the
|
|
168
|
-
* token has the property of its own in the type, and the others at runtime.
|
|
169
|
-
*
|
|
170
|
-
* @public
|
|
171
|
-
*/
|
|
172
|
-
export declare type CSSPropertiesOf<T, C = {}> = T extends {
|
|
173
|
-
$type: infer N extends keyof C;
|
|
174
|
-
} ? C[N] extends (...args: any[]) => infer V ? V extends string ? CSSPropertyValues : string extends keyof V ? CSSPropertyValues : ("" extends keyof V ? CSSPropertyValues : {}) & {
|
|
175
|
-
readonly [P in Exclude<keyof V, "">]: CSSPropertyValues;
|
|
176
|
-
} : CSSPropertyValues : CSSPropertyValues;
|
|
177
|
-
|
|
178
|
-
/**
|
|
179
|
-
* Options that control how custom properties are named.
|
|
180
|
-
*
|
|
181
|
-
* @public
|
|
182
|
-
*/
|
|
183
|
-
export declare interface CSSPropertiesOptions {
|
|
184
|
-
/**
|
|
185
|
-
* Derives a token's custom property name, without the leading `--`.
|
|
186
|
-
*
|
|
187
|
-
* @remarks
|
|
188
|
-
* Defaults to the token's name with `.` replaced by `-`. Pass the same
|
|
189
|
-
* function to {@link toCSS} and {@link toProperties} to keep the names
|
|
190
|
-
* aligned.
|
|
191
|
-
*/
|
|
192
|
-
name?(token: Library.Token<any, any>): string;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
/**
|
|
196
|
-
* @public
|
|
197
|
-
*/
|
|
198
|
-
export declare interface CSSPropertyValues {
|
|
199
|
-
readonly var: `var(--${string})`;
|
|
200
|
-
readonly property: `--${string}`;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
/**
|
|
204
|
-
* What a {@link CSSConverter} returns: the value of the token's custom
|
|
205
|
-
* property, or {@link CSSValues} for a token written as more than one.
|
|
206
|
-
*
|
|
207
|
-
* @public
|
|
208
|
-
*/
|
|
209
|
-
export declare type CSSValue = string | CSSValues;
|
|
210
|
-
|
|
211
|
-
/**
|
|
212
|
-
* The values of the custom properties of a token, by what is added to the
|
|
213
|
-
* name of the token's property with `-`: `""` is the token's own property,
|
|
214
|
-
* and `hover` is `--fill-hover` for a token named `fill`.
|
|
215
|
-
*
|
|
216
|
-
* @public
|
|
217
|
-
*/
|
|
218
|
-
export declare type CSSValues = {
|
|
219
|
-
readonly [suffix: string]: string;
|
|
220
|
-
};
|
|
221
|
-
|
|
222
|
-
/**
|
|
223
|
-
* A union of the custom tokens in a library of shape `T`: tokens whose
|
|
224
|
-
* type is not defined by {@link https://www.designtokens.org/tr/2025.10/format/#types}.
|
|
225
|
-
*
|
|
226
|
-
* @public
|
|
227
|
-
*/
|
|
228
|
-
export declare type CustomTokensOf<T> = Exclude<Library.TokensOf<T>, {
|
|
229
|
-
$type?: DesignToken.Type;
|
|
230
|
-
}>;
|
|
231
|
-
|
|
232
|
-
/**
|
|
233
|
-
* The tokens that a token's value refers to, through refs anywhere in its
|
|
234
|
-
* configured value, including the arguments of the recipes it's computed
|
|
235
|
-
* with, in the token's library. Each token is listed once, in the order its
|
|
236
|
-
* first ref is in the value.
|
|
237
|
-
*
|
|
238
|
-
* @remarks
|
|
239
|
-
* These are the tokens the value is made from, and not theirs in turn: a
|
|
240
|
-
* tool follows each with `dependenciesOf()` for the whole chain. A value
|
|
241
|
-
* computed by a recipe from literal arguments only has no dependencies,
|
|
242
|
-
* though it's derived: {@link configuredValueOf} tells that apart.
|
|
243
|
-
*
|
|
244
|
-
* It throws when a ref's path isn't a token of the library, as reading the
|
|
245
|
-
* token's `$value` does.
|
|
246
|
-
*
|
|
247
|
-
* @example
|
|
248
|
-
* ```ts
|
|
249
|
-
* // hover: { $value: Recipes.darken(theme.colors.primary, 0.2) }
|
|
250
|
-
* dependenciesOf(library.tokens.colors.hover).map((token) => token.name);
|
|
251
|
-
* // ["colors.primary"]
|
|
252
|
-
* ```
|
|
253
|
-
*
|
|
254
|
-
* @public
|
|
255
|
-
*/
|
|
256
|
-
export declare const dependenciesOf: <T extends DesignToken.Shape, R extends {}, G extends string = never>(token: Library.Token<T, R, G>) => ReadonlyArray<Library.TokenRecord<R>>;
|
|
257
|
-
|
|
258
|
-
/**
|
|
259
|
-
* The tokens whose values refer to a token, through refs anywhere in their
|
|
260
|
-
* configured values, including the arguments of their recipes, in the
|
|
261
|
-
* token's library. It is the reverse of {@link dependenciesOf}: each token is
|
|
262
|
-
* listed once, in the order of the library.
|
|
263
|
-
*
|
|
264
|
-
* @remarks
|
|
265
|
-
* These are the tokens that refer to the token directly. A token whose value
|
|
266
|
-
* may change when this one is set is also one that refers to one of those: a
|
|
267
|
-
* tool follows each with `dependentsOf()` for the whole set, as it follows
|
|
268
|
-
* {@link dependenciesOf} for the chain the other way.
|
|
269
|
-
*
|
|
270
|
-
* This reads the configured values and not the values, so it resolves no
|
|
271
|
-
* token, and so it is known of a library whose tokens have not been read. It
|
|
272
|
-
* is found for the whole library once and kept until a token is set to a
|
|
273
|
-
* different value, so each call after the first is a lookup. A value a recipe
|
|
274
|
-
* reads other than through its arguments is not seen, as for
|
|
275
|
-
* {@link dependenciesOf}.
|
|
276
|
-
*
|
|
277
|
-
* It throws when a ref in a token of the library isn't a token of it, as
|
|
278
|
-
* reading the token's `$value` does.
|
|
279
|
-
*
|
|
280
|
-
* @example
|
|
281
|
-
* ```ts
|
|
282
|
-
* // hover: { $value: Recipes.darken(theme.colors.primary, 0.2) }
|
|
283
|
-
* dependentsOf(library.tokens.colors.primary).map((token) => token.name);
|
|
284
|
-
* // ["colors.hover"]
|
|
285
|
-
*
|
|
286
|
-
* // Every token that may change when a token is set
|
|
287
|
-
* const affected = new Set<Library.Token<any, any>>();
|
|
288
|
-
* const visit = (token: Library.Token<any, any>) => {
|
|
289
|
-
* for (const dependent of dependentsOf(token)) {
|
|
290
|
-
* if (!affected.has(dependent)) {
|
|
291
|
-
* affected.add(dependent);
|
|
292
|
-
* visit(dependent);
|
|
293
|
-
* }
|
|
294
|
-
* }
|
|
295
|
-
* };
|
|
296
|
-
* visit(extension.tokens.color.context);
|
|
297
|
-
* ```
|
|
298
|
-
*
|
|
299
|
-
* @public
|
|
300
|
-
*/
|
|
301
|
-
export declare const dependentsOf: <T extends DesignToken.Shape, R extends {}, G extends string = never>(token: Library.Token<T, R, G>) => ReadonlyArray<Library.TokenRecord<R>>;
|
|
302
|
-
|
|
303
|
-
/**
|
|
304
|
-
* @public
|
|
305
|
-
*/
|
|
306
|
-
export declare namespace DesignToken {
|
|
307
|
-
/**
|
|
308
|
-
* An enumeration of all supported types defined
|
|
309
|
-
* by {@link https://www.designtokens.org/tr/2025.10/format/#types}
|
|
310
|
-
*/
|
|
311
|
-
export enum Type {
|
|
312
|
-
Border = "border",
|
|
313
|
-
Color = "color",
|
|
314
|
-
CubicBezier = "cubicBezier",
|
|
315
|
-
Dimension = "dimension",
|
|
316
|
-
Duration = "duration",
|
|
317
|
-
FontFamily = "fontFamily",
|
|
318
|
-
FontWeight = "fontWeight",
|
|
319
|
-
Gradient = "gradient",
|
|
320
|
-
Number = "number",
|
|
321
|
-
Shadow = "shadow",
|
|
322
|
-
StrokeStyle = "strokeStyle",
|
|
323
|
-
Transition = "transition",
|
|
324
|
-
Typography = "typography"
|
|
325
|
-
}
|
|
326
|
-
/**
|
|
327
|
-
* The values supported for each {@link DesignToken.Type | DesignToken type}.
|
|
328
|
-
*/
|
|
329
|
-
export namespace Values {
|
|
330
|
-
/**
|
|
331
|
-
* The color spaces of the {@link https://www.designtokens.org/tr/2025.10/color/ | Color module}.
|
|
332
|
-
*/
|
|
333
|
-
export type ColorSpace = "srgb" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "display-p3" | "a98-rgb" | "prophoto-rgb" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
334
|
-
/**
|
|
335
|
-
* A color component: a number, or `"none"` for a missing component.
|
|
336
|
-
*/
|
|
337
|
-
export type ColorComponent = Values.Number | "none";
|
|
338
|
-
/**
|
|
339
|
-
* A color in a color space. Every color space has three components,
|
|
340
|
-
* whose ranges depend on the color space.
|
|
341
|
-
*
|
|
342
|
-
* @see {@link https://www.designtokens.org/tr/2025.10/color/}
|
|
343
|
-
*/
|
|
344
|
-
export interface Color {
|
|
345
|
-
colorSpace: ColorSpace;
|
|
346
|
-
components: [ColorComponent, ColorComponent, ColorComponent];
|
|
347
|
-
/**
|
|
348
|
-
* From 0 (transparent) to 1 (opaque). Defaults to 1.
|
|
349
|
-
*/
|
|
350
|
-
alpha?: Values.Number;
|
|
351
|
-
/**
|
|
352
|
-
* A fallback in six digit CSS hex notation.
|
|
353
|
-
*/
|
|
354
|
-
hex?: `#${string}`;
|
|
355
|
-
}
|
|
356
|
-
/**
|
|
357
|
-
* A number with a unit, which is required even when the number is 0.
|
|
358
|
-
*
|
|
359
|
-
* @see {@link https://www.designtokens.org/tr/2025.10/format/#dimension}
|
|
360
|
-
*/
|
|
361
|
-
export interface Dimension {
|
|
362
|
-
value: Values.Number;
|
|
363
|
-
unit: "px" | "rem";
|
|
364
|
-
}
|
|
365
|
-
/**
|
|
366
|
-
* The name of the font family, or an array of names in order of
|
|
367
|
-
* preference.
|
|
368
|
-
*
|
|
369
|
-
* @see {@link https://www.designtokens.org/tr/2025.10/format/#font-family}
|
|
370
|
-
*/
|
|
371
|
-
export type FontFamily = string | string[];
|
|
372
|
-
/**
|
|
373
|
-
* @see {@link https://www.designtokens.org/tr/2025.10/format/#number}
|
|
374
|
-
*/
|
|
375
|
-
export type Number = number;
|
|
376
|
-
/**
|
|
377
|
-
* A number from 1 to 1000, or a font-weight keyword.
|
|
378
|
-
*
|
|
379
|
-
* @see {@link https://www.designtokens.org/tr/2025.10/format/#font-weight}
|
|
380
|
-
*/
|
|
381
|
-
export type FontWeight = Values.Number | "thin" | "hairline" | "extra-light" | "ultra-light" | "light" | "normal" | "regular" | "book" | "medium" | "semi-bold" | "demi-bold" | "bold" | "extra-bold" | "ultra-bold" | "black" | "heavy" | "extra-black" | "ultra-black";
|
|
382
|
-
/**
|
|
383
|
-
* A length of time in milliseconds or seconds.
|
|
384
|
-
*
|
|
385
|
-
* @see {@link https://www.designtokens.org/tr/2025.10/format/#duration}
|
|
386
|
-
*/
|
|
387
|
-
export interface Duration {
|
|
388
|
-
value: Values.Number;
|
|
389
|
-
unit: "ms" | "s";
|
|
390
|
-
}
|
|
391
|
-
/**
|
|
392
|
-
* Cubic Bézier coordinates. The x coordinates are within [0, 1].
|
|
393
|
-
*
|
|
394
|
-
* @see {@link https://www.designtokens.org/tr/2025.10/format/#cubic-bezier}
|
|
395
|
-
*/
|
|
396
|
-
export type CubicBezier = [
|
|
397
|
-
P1x: Values.Number,
|
|
398
|
-
P1y: Values.Number,
|
|
399
|
-
P2x: Values.Number,
|
|
400
|
-
P2y: Values.Number
|
|
401
|
-
];
|
|
402
|
-
/**
|
|
403
|
-
* One shadow.
|
|
404
|
-
*
|
|
405
|
-
* @see {@link https://www.designtokens.org/tr/2025.10/format/#shadow}
|
|
406
|
-
*/
|
|
407
|
-
export interface ShadowLayer {
|
|
408
|
-
color: Values.Color;
|
|
409
|
-
offsetX: Values.Dimension;
|
|
410
|
-
offsetY: Values.Dimension;
|
|
411
|
-
blur: Values.Dimension;
|
|
412
|
-
spread: Values.Dimension;
|
|
413
|
-
/**
|
|
414
|
-
* An inner shadow. Defaults to `false`.
|
|
415
|
-
*/
|
|
416
|
-
inset?: boolean;
|
|
417
|
-
}
|
|
418
|
-
/**
|
|
419
|
-
* One shadow, or several layered shadows.
|
|
420
|
-
*
|
|
421
|
-
* @see {@link https://www.designtokens.org/tr/2025.10/format/#shadow}
|
|
422
|
-
*/
|
|
423
|
-
export type Shadow = ShadowLayer | ShadowLayer[];
|
|
424
|
-
/**
|
|
425
|
-
* @see {@link https://www.designtokens.org/tr/2025.10/format/#stroke-style}
|
|
426
|
-
*/
|
|
427
|
-
export type StrokeStyle = "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "outset" | "inset" | {
|
|
428
|
-
dashArray: Values.Dimension[];
|
|
429
|
-
lineCap: "round" | "butt" | "square";
|
|
430
|
-
};
|
|
431
|
-
/**
|
|
432
|
-
* @see {@link https://www.designtokens.org/tr/2025.10/format/#border}
|
|
433
|
-
*/
|
|
434
|
-
export interface Border {
|
|
435
|
-
color: Values.Color;
|
|
436
|
-
width: Values.Dimension;
|
|
437
|
-
style: Values.StrokeStyle;
|
|
438
|
-
}
|
|
439
|
-
/**
|
|
440
|
-
* @see {@link https://www.designtokens.org/tr/2025.10/format/#transition}
|
|
441
|
-
*/
|
|
442
|
-
export interface Transition {
|
|
443
|
-
duration: Values.Duration;
|
|
444
|
-
delay: Values.Duration;
|
|
445
|
-
timingFunction: Values.CubicBezier;
|
|
446
|
-
}
|
|
447
|
-
/**
|
|
448
|
-
* @see {@link https://www.designtokens.org/tr/2025.10/format/#gradient}
|
|
449
|
-
* @remarks
|
|
450
|
-
* Position values must be a number within [0, 1].
|
|
451
|
-
*/
|
|
452
|
-
export type Gradient = Array<{
|
|
453
|
-
color: Values.Color;
|
|
454
|
-
position: Values.Number;
|
|
455
|
-
}>;
|
|
456
|
-
/**
|
|
457
|
-
* @see {@link https://www.designtokens.org/tr/2025.10/format/#typography}
|
|
458
|
-
*/
|
|
459
|
-
export interface Typography {
|
|
460
|
-
fontFamily: Values.FontFamily;
|
|
461
|
-
fontSize: Values.Dimension;
|
|
462
|
-
fontWeight: Values.FontWeight;
|
|
463
|
-
letterSpacing: Values.Dimension;
|
|
464
|
-
lineHeight: Values.Number;
|
|
465
|
-
}
|
|
466
|
-
/**
|
|
467
|
-
* The readonly form of each value, as returned by a library token.
|
|
468
|
-
*/
|
|
469
|
-
export namespace Readonly {
|
|
470
|
-
export interface Border extends DeepReadonly<Values.Border> {
|
|
471
|
-
}
|
|
472
|
-
export interface Color extends DeepReadonly<Values.Color> {
|
|
473
|
-
}
|
|
474
|
-
export type CubicBezier = DeepReadonly<Values.CubicBezier>;
|
|
475
|
-
export interface Dimension extends DeepReadonly<Values.Dimension> {
|
|
476
|
-
}
|
|
477
|
-
export interface Duration extends DeepReadonly<Values.Duration> {
|
|
478
|
-
}
|
|
479
|
-
export type FontFamily = DeepReadonly<Values.FontFamily>;
|
|
480
|
-
export type FontWeight = DeepReadonly<Values.FontWeight>;
|
|
481
|
-
export type Gradient = DeepReadonly<Values.Gradient>;
|
|
482
|
-
export type Number = DeepReadonly<Values.Number>;
|
|
483
|
-
export type Shadow = DeepReadonly<Values.Shadow>;
|
|
484
|
-
export type StrokeStyle = DeepReadonly<Values.StrokeStyle>;
|
|
485
|
-
export interface Transition extends DeepReadonly<Values.Transition> {
|
|
486
|
-
}
|
|
487
|
-
export interface Typography extends DeepReadonly<Values.Typography> {
|
|
488
|
-
}
|
|
489
|
-
}
|
|
490
|
-
}
|
|
491
|
-
/**
|
|
492
|
-
* The value type of each {@link DesignToken.Type}, keyed by its name, like
|
|
493
|
-
* `color`.
|
|
494
|
-
*/
|
|
495
|
-
export interface ValueByType {
|
|
496
|
-
border: Values.Border;
|
|
497
|
-
color: Values.Color;
|
|
498
|
-
cubicBezier: Values.CubicBezier;
|
|
499
|
-
dimension: Values.Dimension;
|
|
500
|
-
duration: Values.Duration;
|
|
501
|
-
fontFamily: Values.FontFamily;
|
|
502
|
-
fontWeight: Values.FontWeight;
|
|
503
|
-
gradient: Values.Gradient;
|
|
504
|
-
number: Values.Number;
|
|
505
|
-
shadow: Values.Shadow;
|
|
506
|
-
strokeStyle: Values.StrokeStyle;
|
|
507
|
-
transition: Values.Transition;
|
|
508
|
-
typography: Values.Typography;
|
|
509
|
-
}
|
|
510
|
-
/**
|
|
511
|
-
* `T` with every nested property, array, and array item readonly.
|
|
512
|
-
*/
|
|
513
|
-
export type DeepReadonly<T> = T extends Function ? T : {
|
|
514
|
-
readonly [K in keyof T]: DeepReadonly<T[K]>;
|
|
515
|
-
};
|
|
516
|
-
/**
|
|
517
|
-
* The readonly value type of each {@link DesignToken.Type}, keyed by its
|
|
518
|
-
* name, like `color`: the value a library token of the type returns.
|
|
519
|
-
*/
|
|
520
|
-
export interface ReadonlyValueByType {
|
|
521
|
-
border: Values.Readonly.Border;
|
|
522
|
-
color: Values.Readonly.Color;
|
|
523
|
-
cubicBezier: Values.Readonly.CubicBezier;
|
|
524
|
-
dimension: Values.Readonly.Dimension;
|
|
525
|
-
duration: Values.Readonly.Duration;
|
|
526
|
-
fontFamily: Values.Readonly.FontFamily;
|
|
527
|
-
fontWeight: Values.Readonly.FontWeight;
|
|
528
|
-
gradient: Values.Readonly.Gradient;
|
|
529
|
-
number: Values.Readonly.Number;
|
|
530
|
-
shadow: Values.Readonly.Shadow;
|
|
531
|
-
strokeStyle: Values.Readonly.StrokeStyle;
|
|
532
|
-
transition: Values.Readonly.Transition;
|
|
533
|
-
typography: Values.Readonly.Typography;
|
|
534
|
-
}
|
|
535
|
-
/**
|
|
536
|
-
* All properties supported by a DesignToken
|
|
537
|
-
*/
|
|
538
|
-
export interface Properties<Type extends DesignToken.Type, Value extends DesignToken.Values.Any> {
|
|
539
|
-
$description?: string;
|
|
540
|
-
/**
|
|
541
|
-
* The token's type. In a {@link (Library:namespace).Config}, it may be omitted
|
|
542
|
-
* when it's inherited from an ancestor group.
|
|
543
|
-
*/
|
|
544
|
-
$type: Type;
|
|
545
|
-
$extensions?: Record<string, any>;
|
|
546
|
-
/**
|
|
547
|
-
* `true`, or a string explaining why, when the token is deprecated.
|
|
548
|
-
*/
|
|
549
|
-
$deprecated?: boolean | string;
|
|
550
|
-
$value: Value;
|
|
551
|
-
}
|
|
552
|
-
export type Border = Properties<DesignToken.Type.Border, DesignToken.Values.Border>;
|
|
553
|
-
export type Color = Properties<DesignToken.Type.Color, DesignToken.Values.Color>;
|
|
554
|
-
export type CubicBezier = Properties<DesignToken.Type.CubicBezier, DesignToken.Values.CubicBezier>;
|
|
555
|
-
export type Dimension = Properties<DesignToken.Type.Dimension, DesignToken.Values.Dimension>;
|
|
556
|
-
export type Duration = Properties<DesignToken.Type.Duration, DesignToken.Values.Duration>;
|
|
557
|
-
export type FontFamily = Properties<DesignToken.Type.FontFamily, DesignToken.Values.FontFamily>;
|
|
558
|
-
export type FontWeight = Properties<DesignToken.Type.FontWeight, DesignToken.Values.FontWeight>;
|
|
559
|
-
export type Gradient = Properties<DesignToken.Type.Gradient, DesignToken.Values.Gradient>;
|
|
560
|
-
export type Number = Properties<DesignToken.Type.Number, DesignToken.Values.Number>;
|
|
561
|
-
export type Shadow = Properties<DesignToken.Type.Shadow, DesignToken.Values.Shadow>;
|
|
562
|
-
export type StrokeStyle = Properties<DesignToken.Type.StrokeStyle, DesignToken.Values.StrokeStyle>;
|
|
563
|
-
export type Transition = Properties<DesignToken.Type.Transition, DesignToken.Values.Transition>;
|
|
564
|
-
export type Typography = Properties<DesignToken.Type.Typography, DesignToken.Values.Typography>;
|
|
565
|
-
/**
|
|
566
|
-
* Type names reserved by {@link https://www.designtokens.org/tr/2025.10/format/#types}.
|
|
567
|
-
* Custom types cannot use these names.
|
|
568
|
-
*/
|
|
569
|
-
export type ReservedTypeName = `${DesignToken.Type}`;
|
|
570
|
-
/**
|
|
571
|
-
* A token of a custom type that is not defined by
|
|
572
|
-
* {@link https://www.designtokens.org/tr/2025.10/format/#types}.
|
|
573
|
-
*
|
|
574
|
-
* @remarks
|
|
575
|
-
* `Name` identifies the type and must not be a {@link DesignToken.ReservedTypeName}.
|
|
576
|
-
* `Value` can be any type, such as a plain object, a class instance, or an
|
|
577
|
-
* object with methods. The library returns the value as it is, and never
|
|
578
|
-
* calls its functions. A config can give the value, or any property of
|
|
579
|
-
* plain data in it, as a {@link ref} or a {@link recipes | computed value}.
|
|
580
|
-
*
|
|
581
|
-
* @example
|
|
582
|
-
* ```ts
|
|
583
|
-
* interface Elevation { level: number; shadow: DesignToken.Values.Shadow }
|
|
584
|
-
* type ElevationToken = DesignToken.Custom<"elevation", Elevation>;
|
|
585
|
-
* ```
|
|
586
|
-
*/
|
|
587
|
-
export interface Custom<Name extends string, Value> {
|
|
588
|
-
$description?: string;
|
|
589
|
-
$type: CustomTypeName<Name>;
|
|
590
|
-
$extensions?: Record<string, any>;
|
|
591
|
-
$deprecated?: boolean | string;
|
|
592
|
-
$value: Value;
|
|
593
|
-
}
|
|
594
|
-
/**
|
|
595
|
-
* A group of DesignTokens.
|
|
596
|
-
*/
|
|
597
|
-
export type Group = {
|
|
598
|
-
/**
|
|
599
|
-
* If the group has a type, the type is inferred for all descendent design tokens,
|
|
600
|
-
* unless specified by the token.
|
|
601
|
-
*/
|
|
602
|
-
$type?: string;
|
|
603
|
-
$description?: string;
|
|
604
|
-
$extensions?: Record<string, any>;
|
|
605
|
-
$deprecated?: boolean | string;
|
|
606
|
-
};
|
|
607
|
-
}
|
|
608
|
-
|
|
609
|
-
/**
|
|
610
|
-
* The tokens and groups of a library, each with its path, in the order of
|
|
611
|
-
* the config. A group is listed before the tokens and groups in it.
|
|
612
|
-
*
|
|
613
|
-
* @remarks
|
|
614
|
-
* This is the library's own rule for what is a token and what is a group, and
|
|
615
|
-
* for which keys are children, so a tool that visits every token (an index, a
|
|
616
|
-
* report, a list of the tokens to offer for a property) doesn't walk
|
|
617
|
-
* `library.tokens` and restate it. It walks as a DOM `TreeWalker` does: an
|
|
618
|
-
* entry that `whatToShow` leaves out is not passed to `filter`, but what is
|
|
619
|
-
* under it is still visited, and `filter` can return `"reject"` to leave out
|
|
620
|
-
* a group and everything under it.
|
|
621
|
-
*
|
|
622
|
-
* The library itself isn't listed, as a `TreeWalker`'s root isn't, so its own
|
|
623
|
-
* `$`-prefixed properties are not visited. A group's own token is listed with
|
|
624
|
-
* the path of its group and `$root`.
|
|
625
|
-
*
|
|
626
|
-
* The order is the order of the keys in a JavaScript object, so a name that
|
|
627
|
-
* is an array index (`"0"`, `"123"`) is listed before the other names of its
|
|
628
|
-
* group, in ascending order, whatever its place in the config.
|
|
629
|
-
*
|
|
630
|
-
* The listing is lazy and reads the
|
|
631
|
-
* library as it goes; a token's `$value` is not read.
|
|
632
|
-
*
|
|
633
|
-
* @example
|
|
634
|
-
* ```ts
|
|
635
|
-
* // The names of every token that isn't deprecated, in a group that isn't
|
|
636
|
-
* for (const { token } of entriesOf(library, {
|
|
637
|
-
* whatToShow: "token",
|
|
638
|
-
* filter: ({ token }) => !token.$deprecated,
|
|
639
|
-
* })) {
|
|
640
|
-
* names.push(token.name);
|
|
641
|
-
* }
|
|
642
|
-
*
|
|
643
|
-
* // Everything, leaving out the deprecated groups
|
|
644
|
-
* const entries = [
|
|
645
|
-
* ...entriesOf(library, {
|
|
646
|
-
* filter: (entry) =>
|
|
647
|
-
* entry.kind === "group" && entry.group.$deprecated
|
|
648
|
-
* ? "reject"
|
|
649
|
-
* : true,
|
|
650
|
-
* }),
|
|
651
|
-
* ];
|
|
652
|
-
* ```
|
|
653
|
-
*
|
|
654
|
-
* @public
|
|
655
|
-
*/
|
|
656
|
-
export declare function entriesOf<T extends {}, R extends {}>(library: Library.Library<T, R>, options: Library.EntriesOptions<"token", R> & {
|
|
657
|
-
whatToShow: "token";
|
|
658
|
-
}): Generator<Library.TokenEntry<R>, void, undefined>;
|
|
659
|
-
|
|
660
|
-
/** @public */
|
|
661
|
-
export declare function entriesOf<T extends {}, R extends {}>(library: Library.Library<T, R>, options: Library.EntriesOptions<"group", R> & {
|
|
662
|
-
whatToShow: "group";
|
|
663
|
-
}): Generator<Library.GroupEntry, void, undefined>;
|
|
664
|
-
|
|
665
|
-
/** @public */
|
|
666
|
-
export declare function entriesOf<T extends {}, R extends {}>(library: Library.Library<T, R>, options?: Library.EntriesOptions<"all", R>): Generator<Library.EntryOf<"all", R>, void, undefined>;
|
|
667
|
-
|
|
668
|
-
/**
|
|
669
|
-
* Builds a 2025.10 sRGB color from a hex color string: `#RGB`, `#RRGGBB` or
|
|
670
|
-
* `#RRGGBBAA`.
|
|
671
|
-
*
|
|
672
|
-
* @throws A `TypeError` when the string is not a hex color.
|
|
673
|
-
*
|
|
674
|
-
* @public
|
|
675
|
-
*/
|
|
676
|
-
export declare const hex: (css: string) => DesignToken.Values.Color;
|
|
677
|
-
|
|
678
|
-
/**
|
|
679
|
-
* Tests whether a value is a {@link (Library:namespace).Computed} value, a
|
|
680
|
-
* recipe's result, also one made by another copy of this package.
|
|
681
|
-
*
|
|
682
|
-
* @remarks
|
|
683
|
-
* The library computes a value anywhere in a token's value. A tool that reads
|
|
684
|
-
* a token's value as configured, with {@link configuredValueOf}, tells a
|
|
685
|
-
* computed value from other values with `isComputed()`, as it tells a ref
|
|
686
|
-
* with {@link isRef}.
|
|
687
|
-
*
|
|
688
|
-
* A computed value is a `Computed<unknown, never>` whatever its result and
|
|
689
|
-
* library, so a value typed as a computed value of a library is narrowed to
|
|
690
|
-
* it.
|
|
691
|
-
*
|
|
692
|
-
* @example
|
|
693
|
-
* ```ts
|
|
694
|
-
* isComputed(Recipes.darken(ref("colors.primary"), 0.2)); // true
|
|
695
|
-
* isComputed(hex("#0000ff")); // false
|
|
696
|
-
* ```
|
|
697
|
-
*
|
|
698
|
-
* @public
|
|
699
|
-
*/
|
|
700
|
-
export declare const isComputed: (value: unknown) => value is Library.Computed<unknown, never>;
|
|
701
|
-
|
|
702
|
-
/**
|
|
703
|
-
* Tests whether a value is a {@link (Library:namespace).Ref}, made by
|
|
704
|
-
* {@link ref} or {@link refs}, also by another copy of this package.
|
|
705
|
-
*
|
|
706
|
-
* @remarks
|
|
707
|
-
* The library resolves a ref anywhere in a value. An add-on that keeps a
|
|
708
|
-
* ref, rather than its token's value, tells it from other values with
|
|
709
|
-
* `isRef()`, and reads its path with {@link pathOf}.
|
|
710
|
-
*
|
|
711
|
-
* A ref is a `Ref<unknown, never>` whatever its token and library, so a
|
|
712
|
-
* value typed as a ref of a library is narrowed to that ref.
|
|
713
|
-
*
|
|
714
|
-
* @example
|
|
715
|
-
* ```ts
|
|
716
|
-
* isRef(ref("colors.primary")); // true
|
|
717
|
-
* isRef(hex("#0000ff")); // false
|
|
718
|
-
* ```
|
|
719
|
-
*
|
|
720
|
-
* @public
|
|
721
|
-
*/
|
|
722
|
-
export declare const isRef: (value: unknown) => value is Library.Ref<unknown, never>;
|
|
723
|
-
|
|
724
|
-
/**
|
|
725
|
-
* @public
|
|
726
|
-
*/
|
|
727
|
-
export declare namespace Library {
|
|
728
|
-
export interface Library<T extends {}, R extends {} = T> {
|
|
729
|
-
tokens: TokenLibrary<T, R>;
|
|
730
|
-
subscribe(subscriber: Library.Subscriber<R>): void;
|
|
731
|
-
unsubscribe(subscriber: Library.Subscriber<R>): void;
|
|
732
|
-
/**
|
|
733
|
-
* Creates a library with the values of the tokens replaced, and
|
|
734
|
-
* recipes overridden.
|
|
735
|
-
*
|
|
736
|
-
* @remarks
|
|
737
|
-
* This has no tokens to add, so a value is checked against the type
|
|
738
|
-
* of its token wherever the token is.
|
|
739
|
-
*
|
|
740
|
-
* A token of the extension is made when it is first read, and an
|
|
741
|
-
* extension that nothing refers to is collected, along with its
|
|
742
|
-
* subscribers.
|
|
743
|
-
*/
|
|
744
|
-
extend(config: ExtendConfig<T, R>, options?: ExtendOptions): Library<T, R>;
|
|
745
|
-
/**
|
|
746
|
-
* Creates a library with the values of tokens replaced, new tokens,
|
|
747
|
-
* and recipes overridden.
|
|
748
|
-
*
|
|
749
|
-
* @remarks
|
|
750
|
-
* A token of the extension is made when it is first read, and an
|
|
751
|
-
* extension that nothing refers to is collected, along with its
|
|
752
|
-
* subscribers.
|
|
753
|
-
*/
|
|
754
|
-
extend<K extends NoRoot<K> = {}>(config: ExtendConfig<T, R & NewTokens<K, T>> & Config<K, R & NewTokens<K, T>, never, T> & NoInfer<ConfigValueCheck<K, R & NewTokens<K, T>>> & (ConfigTypeHint | {}), options?: ExtendOptions): Library<T & NewTokens<K, T>, R & NewTokens<K, T>>;
|
|
755
|
-
}
|
|
756
|
-
/**
|
|
757
|
-
* The tokens and groups of `K` that are new relative to a source library
|
|
758
|
-
* of shape `T`. Overrides of tokens in `T` are removed so that they keep
|
|
759
|
-
* the source token's type.
|
|
760
|
-
*
|
|
761
|
-
* @public
|
|
762
|
-
*/
|
|
763
|
-
export type NewTokens<K, T> = {
|
|
764
|
-
[P in keyof K as P extends keyof T ? T[P] extends DesignToken.Shape ? never : P : P]: P extends keyof T ? NewTokens<K[P], T[P]> : K[P];
|
|
765
|
-
};
|
|
766
|
-
/**
|
|
767
|
-
* `$root` is the token of a group, so a library cannot have one at its top
|
|
768
|
-
* level, where there is no group to name it for.
|
|
769
|
-
*
|
|
770
|
-
* @public
|
|
771
|
-
*/
|
|
772
|
-
export type NoRoot<T> = {
|
|
773
|
-
[K in keyof T]: K extends "$root" ? never : T[K];
|
|
774
|
-
};
|
|
775
|
-
/**
|
|
776
|
-
* Which entries of a library {@link (entriesOf:3)} lists: its tokens, its
|
|
777
|
-
* groups, or both. Each is the `kind` of the entries it lists.
|
|
778
|
-
*
|
|
779
|
-
* @public
|
|
780
|
-
*/
|
|
781
|
-
export type Show = "all" | "token" | "group";
|
|
782
|
-
/**
|
|
783
|
-
* A token of a library, with the path of keys that leads to it from the
|
|
784
|
-
* root. The path of a group's own token ends with `$root`.
|
|
785
|
-
*
|
|
786
|
-
* @public
|
|
787
|
-
*/
|
|
788
|
-
export interface TokenEntry<R extends {}> {
|
|
789
|
-
readonly kind: "token";
|
|
790
|
-
readonly path: readonly string[];
|
|
791
|
-
readonly token: TokenRecord<R>;
|
|
792
|
-
}
|
|
793
|
-
/**
|
|
794
|
-
* A group of a library, with the path of keys that leads to it from the
|
|
795
|
-
* root. The group has the `$`-prefixed properties it was configured with.
|
|
796
|
-
*
|
|
797
|
-
* @public
|
|
798
|
-
*/
|
|
799
|
-
export interface GroupEntry {
|
|
800
|
-
readonly kind: "group";
|
|
801
|
-
readonly path: readonly string[];
|
|
802
|
-
readonly group: Readonly<DesignToken.Group>;
|
|
803
|
-
}
|
|
804
|
-
/**
|
|
805
|
-
* The entries that {@link (entriesOf:3)} lists for `S`.
|
|
806
|
-
*
|
|
807
|
-
* @public
|
|
808
|
-
*/
|
|
809
|
-
export type EntryOf<S extends Show, R extends {}> = S extends "token" ? TokenEntry<R> : S extends "group" ? GroupEntry : TokenEntry<R> | GroupEntry;
|
|
810
|
-
/**
|
|
811
|
-
* What a {@link (entriesOf:3)} filter returns for an entry: `true` lists it,
|
|
812
|
-
* `false` leaves it out, and `"reject"` leaves it out along with
|
|
813
|
-
* everything under it.
|
|
814
|
-
*
|
|
815
|
-
* @public
|
|
816
|
-
*/
|
|
817
|
-
export type FilterResult = boolean | "reject";
|
|
818
|
-
/**
|
|
819
|
-
* @public
|
|
820
|
-
*/
|
|
821
|
-
export interface EntriesOptions<S extends Show, R extends {}> {
|
|
822
|
-
/**
|
|
823
|
-
* The kind of entries to list. Groups are visited, and their tokens
|
|
824
|
-
* listed, whichever it is. By default, all.
|
|
825
|
-
*/
|
|
826
|
-
readonly whatToShow?: S;
|
|
827
|
-
/**
|
|
828
|
-
* Called with each entry of the kinds shown, before its children are
|
|
829
|
-
* visited.
|
|
830
|
-
*/
|
|
831
|
-
filter?(entry: EntryOf<S, R>): FilterResult;
|
|
832
|
-
}
|
|
833
|
-
export interface Subscriber<R extends {}> {
|
|
834
|
-
onChange(records: ReadonlyArray<Library.TokenRecord<R>>): void;
|
|
835
|
-
}
|
|
836
|
-
/**
|
|
837
|
-
* A union of all tokens in a library of shape `T`.
|
|
838
|
-
*
|
|
839
|
-
* @public
|
|
840
|
-
*/
|
|
841
|
-
export type TokensOf<T> = {
|
|
842
|
-
[K in keyof T]-?: T[K] extends DesignToken.Shape ? T[K] : K extends keyof DesignToken.Group ? never : T[K] extends object ? TokensOf<T[K]> : never;
|
|
843
|
-
}[keyof T];
|
|
844
|
-
/**
|
|
845
|
-
* A {@link (Library:namespace).Token} of any token in a library of shape `R`.
|
|
846
|
-
* The union is discriminated by `type`.
|
|
847
|
-
*
|
|
848
|
-
* @public
|
|
849
|
-
*/
|
|
850
|
-
export type TokenRecord<R extends {}> = TokensOf<R> extends infer T ? T extends DesignToken.Shape ? Token<T, R> : never : never;
|
|
851
|
-
/**
|
|
852
|
-
* Defines a token library that can be interacted with
|
|
853
|
-
* to mutate token values.
|
|
854
|
-
*
|
|
855
|
-
* @remarks
|
|
856
|
-
* `G` is the type inherited from ancestor groups.
|
|
857
|
-
*
|
|
858
|
-
* @public
|
|
859
|
-
*/
|
|
860
|
-
export type TokenLibrary<T extends {}, R extends {} = T, G extends string = never> = TokenGroup<T, R, GroupType<T, G>>;
|
|
861
|
-
export type TokenGroup<T extends {}, R extends {}, G extends string> = {
|
|
862
|
-
[K in keyof Readonly<T>]: T[K] extends DesignToken.Shape ? Token<T[K], R, G> : K extends keyof DesignToken.Group ? T[K] : T[K] extends {} ? TokenLibrary<T[K], R, G> : never;
|
|
863
|
-
};
|
|
864
|
-
/**
|
|
865
|
-
* The value type of each token of a library of shape `T`, by its path.
|
|
866
|
-
* Refs and computed values are typed by it, so they're given only to a
|
|
867
|
-
* library that has their tokens, with values of the same types, whether
|
|
868
|
-
* its shape is declared or inferred from its config.
|
|
869
|
-
*
|
|
870
|
-
* @public
|
|
871
|
-
*/
|
|
872
|
-
export type TokenValues<T> = {
|
|
873
|
-
[K in keyof T as K extends keyof DesignToken.Group ? never : K]: T[K] extends DesignToken.Shape ? TokenValue<DesignToken.ValueByToken<T[K]>> : T[K] extends object ? TokenValues<T[K]> : never;
|
|
874
|
-
};
|
|
875
|
-
/**
|
|
876
|
-
* A token with a value of type `V`, in
|
|
877
|
-
* {@link (Library:namespace).TokenValues}. It's only a type: it marks
|
|
878
|
-
* where a path ends at a token rather than going into its value.
|
|
879
|
-
*
|
|
880
|
-
* @public
|
|
881
|
-
*/
|
|
882
|
-
export interface TokenValue<V> {
|
|
883
|
-
readonly [TOKEN]: V;
|
|
884
|
-
}
|
|
885
|
-
/**
|
|
886
|
-
* The dotted path of each token in `T`, the
|
|
887
|
-
* {@link (Library:namespace).TokenValues} of a library, whose value is a
|
|
888
|
-
* `V`. These are the paths {@link ref} takes where a `V` is expected.
|
|
889
|
-
*
|
|
890
|
-
* @public
|
|
891
|
-
*/
|
|
892
|
-
export type TokenPath<T, V> = {
|
|
893
|
-
[K in keyof T & string]: T[K] extends TokenValue<infer W> ? [W] extends [V] ? K : never : `${K}.${TokenPath<T[K], V>}`;
|
|
894
|
-
}[keyof T & string];
|
|
895
|
-
/**
|
|
896
|
-
* A reference to a token whose value is of type `V`, in a library whose
|
|
897
|
-
* token values are `T`. It's resolved to the token's value when the token
|
|
898
|
-
* that has it is read. Made by {@link ref} and {@link refs}.
|
|
899
|
-
*
|
|
900
|
-
* @remarks
|
|
901
|
-
* A ref is data: the path of its token. `T`, the
|
|
902
|
-
* {@link (Library:namespace).TokenValues} of the library, is only in its
|
|
903
|
-
* type, so that a ref can only be given to a library that has its token.
|
|
904
|
-
*
|
|
905
|
-
* @public
|
|
906
|
-
*/
|
|
907
|
-
export interface Ref<V, T> {
|
|
908
|
-
readonly [REF]: readonly string[];
|
|
909
|
-
readonly [RESOLVES]?: (library: T) => V;
|
|
910
|
-
}
|
|
911
|
-
/**
|
|
912
|
-
* A value of type `V` computed by a {@link (Library:namespace).Recipe}
|
|
913
|
-
* from its arguments, which may refer to the tokens of a library whose
|
|
914
|
-
* {@link (Library:namespace).TokenValues} are `T`. It's computed when the
|
|
915
|
-
* token that has it is read.
|
|
916
|
-
*
|
|
917
|
-
* @remarks
|
|
918
|
-
* A computed value is data: the recipe and its arguments.
|
|
919
|
-
*
|
|
920
|
-
* @public
|
|
921
|
-
*/
|
|
922
|
-
export interface Computed<V, T> {
|
|
923
|
-
readonly [COMPUTED]: {
|
|
924
|
-
readonly recipe: Recipe<any, unknown>;
|
|
925
|
-
readonly args: readonly unknown[];
|
|
926
|
-
};
|
|
927
|
-
readonly [COMPUTES]?: (library: T) => V;
|
|
928
|
-
}
|
|
929
|
-
/**
|
|
930
|
-
* A value of type `V` in a configuration: the value, a
|
|
931
|
-
* {@link (Library:namespace).Ref}, a {@link (Library:namespace).Computed}
|
|
932
|
-
* value, or, when `V` is an object or an array, `V` with any of its
|
|
933
|
-
* properties and elements, at any depth, given as one of those.
|
|
934
|
-
*
|
|
935
|
-
* @remarks
|
|
936
|
-
* Its objects and arrays may be readonly, as a token's value is, so a
|
|
937
|
-
* token's value can be given where a config takes a value, as `set()`
|
|
938
|
-
* takes it. A computed value may be readonly, as a recipe's function that
|
|
939
|
-
* takes readonly arguments returns: the library copies and freezes a
|
|
940
|
-
* recipe's result.
|
|
941
|
-
*
|
|
942
|
-
* @public
|
|
943
|
-
*/
|
|
944
|
-
export type DeepValue<V, T> = V | Ref<V, T> | Computed<DesignToken.DeepReadonly<V>, T> | (V extends object ? {
|
|
945
|
-
readonly [K in keyof V]: DeepValue<V[K], T>;
|
|
946
|
-
} : never);
|
|
947
|
-
/**
|
|
948
|
-
* The arguments of a {@link (Library:namespace).Recipe} whose function has
|
|
949
|
-
* the parameters `A`. Each may be a ref, a computed value, or a value with
|
|
950
|
-
* them in it.
|
|
951
|
-
*
|
|
952
|
-
* @public
|
|
953
|
-
*/
|
|
954
|
-
export type RecipeArguments<A extends readonly unknown[], T> = {
|
|
955
|
-
[K in keyof A]: DeepValue<A[K], T>;
|
|
956
|
-
};
|
|
957
|
-
/**
|
|
958
|
-
* A function, made by {@link recipes}, that takes the arguments of a
|
|
959
|
-
* function with parameters `A` and result `V`, any of which may refer to
|
|
960
|
-
* tokens, and returns the {@link (Library:namespace).Computed} result.
|
|
961
|
-
* `T` is the token values of the library its arguments refer to.
|
|
962
|
-
*
|
|
963
|
-
* @remarks
|
|
964
|
-
* A recipe has its name and its function, which a library that extends
|
|
965
|
-
* another can override with {@link override}. The function gets each
|
|
966
|
-
* argument as a token gets its value: a ref's value, and a copy of plain
|
|
967
|
-
* data, which are frozen, and anything else as it is. So its parameters
|
|
968
|
-
* are typed readonly, as in `DesignToken.Values.Readonly.Color`.
|
|
969
|
-
*
|
|
970
|
-
* @public
|
|
971
|
-
*/
|
|
972
|
-
export type Recipe<A extends readonly unknown[], V> = (<T extends {} = {}>(...args: RecipeArguments<A, T>) => Computed<V, T>) & {
|
|
973
|
-
readonly [RECIPE]: {
|
|
974
|
-
readonly name: string;
|
|
975
|
-
readonly fn: (...args: A) => V;
|
|
976
|
-
};
|
|
977
|
-
};
|
|
978
|
-
/**
|
|
979
|
-
* The {@link (Library:namespace).Recipe | recipes} of the functions of `F`,
|
|
980
|
-
* by the same keys. Made by {@link recipes}.
|
|
981
|
-
*
|
|
982
|
-
* @public
|
|
983
|
-
*/
|
|
984
|
-
export type Recipes<F extends Record<string, (...args: any[]) => unknown>> = {
|
|
985
|
-
readonly [K in keyof F]: Recipe<Parameters<F[K]>, ReturnType<F[K]>>;
|
|
986
|
-
};
|
|
987
|
-
/**
|
|
988
|
-
* A function that replaces a recipe's in a library made by `extend()`.
|
|
989
|
-
* Made by {@link override}.
|
|
990
|
-
*
|
|
991
|
-
* @public
|
|
992
|
-
*/
|
|
993
|
-
export interface RecipeOverride {
|
|
994
|
-
readonly recipe: Recipe<any, unknown>;
|
|
995
|
-
readonly fn: (...args: any[]) => unknown;
|
|
996
|
-
}
|
|
997
|
-
/**
|
|
998
|
-
* Options of `extend()`.
|
|
999
|
-
*
|
|
1000
|
-
* @public
|
|
1001
|
-
*/
|
|
1002
|
-
export interface ExtendOptions {
|
|
1003
|
-
/**
|
|
1004
|
-
* Recipes whose function is replaced in the new library, for every
|
|
1005
|
-
* token that computes its value with them, including the tokens it
|
|
1006
|
-
* doesn't restate.
|
|
1007
|
-
*/
|
|
1008
|
-
readonly recipes?: readonly RecipeOverride[];
|
|
1009
|
-
}
|
|
1010
|
-
/**
|
|
1011
|
-
* A {@link (Library:namespace).Ref} to each token of a library of shape
|
|
1012
|
-
* `R`, at the path of the token in `T`, the shape of a group of it. Made by
|
|
1013
|
-
* {@link refs}.
|
|
1014
|
-
*
|
|
1015
|
-
* @public
|
|
1016
|
-
*/
|
|
1017
|
-
export type Refs<T extends {}, R extends {} = T> = {
|
|
1018
|
-
readonly [K in keyof T as K extends keyof DesignToken.Group ? never : K]-?: T[K] extends DesignToken.Shape ? Ref<DesignToken.ValueByToken<T[K]>, TokenValues<R>> : T[K] extends {} ? Refs<T[K], R> : never;
|
|
1019
|
-
};
|
|
1020
|
-
/**
|
|
1021
|
-
* A token in a {@link (Library:namespace).TokenLibrary}
|
|
1022
|
-
*
|
|
1023
|
-
* @remarks
|
|
1024
|
-
* `G` is the type inherited from ancestor groups, used when
|
|
1025
|
-
* `T` does not declare a `$type`.
|
|
1026
|
-
*
|
|
1027
|
-
* @public
|
|
1028
|
-
*/
|
|
1029
|
-
export type Token<T extends DesignToken.Shape, C extends {}, G extends string = never> = {
|
|
1030
|
-
set(value: ConfigTokenValue<T, C> | DesignToken.ReadonlyValueByToken<T>): void;
|
|
1031
|
-
/**
|
|
1032
|
-
* A JSON representation of the token's name, type, resolved value,
|
|
1033
|
-
* description, extensions and deprecation.
|
|
1034
|
-
*/
|
|
1035
|
-
toString(): string;
|
|
1036
|
-
readonly $type: DesignToken.TypeByToken<T, G>;
|
|
1037
|
-
readonly $extensions: Record<string, any>;
|
|
1038
|
-
readonly $value: DesignToken.ReadonlyValueByToken<T>;
|
|
1039
|
-
readonly $description: string;
|
|
1040
|
-
/**
|
|
1041
|
-
* `false`, `true`, or the explanation the token was deprecated with.
|
|
1042
|
-
*/
|
|
1043
|
-
readonly $deprecated: boolean | string;
|
|
1044
|
-
readonly name: string;
|
|
1045
|
-
};
|
|
1046
|
-
export type IsUnion<T, U = T> = T extends unknown ? [U] extends [T] ? false : true : never;
|
|
1047
|
-
/**
|
|
1048
|
-
* The type a group passes on to its descendant tokens, following
|
|
1049
|
-
* {@link https://www.designtokens.org/tr/2025.10/format/#type-1 | DTCG group type inheritance}.
|
|
1050
|
-
*
|
|
1051
|
-
* @remarks
|
|
1052
|
-
* A group passes on its own `$type` only when the group's shape declares a
|
|
1053
|
-
* required, single, literal `$type`. A group with an optional or non-literal
|
|
1054
|
-
* `$type` may set any type at runtime, so it passes on nothing. A group
|
|
1055
|
-
* without a `$type` passes on its ancestor's type, `G`.
|
|
1056
|
-
*
|
|
1057
|
-
* @public
|
|
1058
|
-
*/
|
|
1059
|
-
export type GroupType<T, G extends string = never> = "$type" extends keyof T ? {} extends Pick<T, "$type"> ? never : T["$type"] extends string ? string extends T["$type"] ? never : true extends IsUnion<T["$type"]> ? never : T["$type"] : never : G;
|
|
1060
|
-
/**
|
|
1061
|
-
* The value of a token in a configuration object, in a library of shape
|
|
1062
|
-
* `R`: a {@link (Library:namespace).DeepValue} of the token's value type.
|
|
1063
|
-
*
|
|
1064
|
-
* @public
|
|
1065
|
-
*/
|
|
1066
|
-
export type ConfigTokenValue<T extends DesignToken.Shape, R extends {}> = DeepValue<DesignToken.ValueByToken<T>, TokenValues<R>>;
|
|
1067
|
-
/**
|
|
1068
|
-
* A token in a configuration object.
|
|
1069
|
-
*
|
|
1070
|
-
* @remarks
|
|
1071
|
-
* The token's `$type` may only be omitted when it matches the type
|
|
1072
|
-
* inherited from ancestor groups, `G`.
|
|
1073
|
-
*
|
|
1074
|
-
* @public
|
|
1075
|
-
*/
|
|
1076
|
-
export type ConfigValue<T extends DesignToken.Shape, R extends {}, G extends string = never> = T | (Omit<T, "$type" | "$value"> & ([G] extends [never] ? {
|
|
1077
|
-
$type: DesignToken.TypeByToken<T>;
|
|
1078
|
-
} : [DesignToken.TypeByToken<T, G>] extends [G] ? {
|
|
1079
|
-
$type?: DesignToken.TypeByToken<T, G>;
|
|
1080
|
-
} : {
|
|
1081
|
-
$type: DesignToken.TypeByToken<T>;
|
|
1082
|
-
}) & {
|
|
1083
|
-
$value: ConfigTokenValue<T, R>;
|
|
1084
|
-
});
|
|
1085
|
-
/**
|
|
1086
|
-
* A configuration object provided to {@link Library.create}
|
|
1087
|
-
*
|
|
1088
|
-
* @remarks
|
|
1089
|
-
* `G` is the type inherited from ancestor groups. `S` is the shape of a
|
|
1090
|
-
* source library being extended: its group types are inherited, and its
|
|
1091
|
-
* tokens may be overridden without restating their type.
|
|
1092
|
-
*
|
|
1093
|
-
* @public
|
|
1094
|
-
*/
|
|
1095
|
-
export type Config<T extends {}, R extends {} = T, G extends string = never, S = {}> = ConfigGroup<T, R, GroupType<T, GroupType<S, G>>, S>;
|
|
1096
|
-
export type ConfigGroup<T extends {}, R extends {}, G extends string, S> = {
|
|
1097
|
-
[K in keyof T]: K extends keyof S ? S[K] extends DesignToken.Shape ? unknown : ConfigEntry<T, R, G, S, K> : ConfigEntry<T, R, G, S, K>;
|
|
1098
|
-
};
|
|
1099
|
-
export type ConfigEntry<T extends {}, R extends {}, G extends string, S, K extends keyof T> = T[K] extends DesignToken.Shape ? ConfigValue<T[K], R, G> : K extends keyof DesignToken.Group ? T[K] : T[K] extends {} ? Config<T[K], R, G, K extends keyof S ? S[K] : {}> : T[K] extends null | undefined ? T[K] : never;
|
|
1100
|
-
/**
|
|
1101
|
-
* Checks the `$value` of each token in a config of shape `T` against
|
|
1102
|
-
* its `$type`. It's needed when `T` is inferred from the config, because
|
|
1103
|
-
* the inferred `$value` is the config's own value, so
|
|
1104
|
-
* {@link (Library:namespace).Config} alone can't reject it.
|
|
1105
|
-
*
|
|
1106
|
-
* @remarks
|
|
1107
|
-
* Only the values of tokens that declare a {@link DesignToken.Type} are
|
|
1108
|
-
* checked. A token can't have a child (a key without a `$` prefix).
|
|
1109
|
-
*
|
|
1110
|
-
* Tokens are found by their keys rather than by `T[K] extends Shape`,
|
|
1111
|
-
* which TypeScript doesn't resolve for an inferred `T` with extra keys.
|
|
1112
|
-
* An `any` config, such as `Library.create<any>()`, isn't checked.
|
|
1113
|
-
*
|
|
1114
|
-
* @public
|
|
1115
|
-
*/
|
|
1116
|
-
export type ConfigValueCheck<T, R extends {}> = 0 extends 1 & T ? unknown : {
|
|
1117
|
-
[K in keyof T]: 0 extends 1 & T[K] ? unknown : "$value" extends keyof T[K] ? ("$type" extends keyof T[K] ? TokenValueCheck<T[K][Extract<"$type", keyof T[K]>], R> : unknown) & {
|
|
1118
|
-
[P in Exclude<keyof T[K], `$${string}`>]?: never;
|
|
1119
|
-
} : T[K] extends object ? ConfigValueCheck<T[K], R> : unknown;
|
|
1120
|
-
};
|
|
1121
|
-
export type TokenValueCheck<Type, R extends {}> = [Type] extends [
|
|
1122
|
-
keyof DesignToken.ValueByType
|
|
1123
|
-
] ? {
|
|
1124
|
-
$value: ConfigTokenValue<{
|
|
1125
|
-
$type: Type;
|
|
1126
|
-
$value: DesignToken.ValueByType[Type];
|
|
1127
|
-
}, R>;
|
|
1128
|
-
} : unknown;
|
|
1129
|
-
/**
|
|
1130
|
-
* Gives each `$type` in a config literal a contextual type, so that
|
|
1131
|
-
* TypeScript keeps an inferred `$type` literal, such as
|
|
1132
|
-
* `DesignToken.Type.Color`, instead of widening it to `DesignToken.Type`.
|
|
1133
|
-
* {@link (Library:namespace).ConfigValueCheck} needs the literal.
|
|
1134
|
-
*
|
|
1135
|
-
* @remarks
|
|
1136
|
-
* Configs are typed `ConfigTypeHint | {}`, so a config without an index
|
|
1137
|
-
* signature, such as a typed variable, is still accepted.
|
|
1138
|
-
*
|
|
1139
|
-
* @public
|
|
1140
|
-
*/
|
|
1141
|
-
export type ConfigTypeHint = {
|
|
1142
|
-
readonly [key: string]: ConfigTypeHint | DesignToken.Type | (string & {}) | number | boolean | object | null | undefined;
|
|
1143
|
-
};
|
|
1144
|
-
/**
|
|
1145
|
-
* A configuration object provided to {@link (Library:namespace).Library.(extend:1)}.
|
|
1146
|
-
* All tokens and groups of the source library are optional, and token
|
|
1147
|
-
* values may be static values, refs or computed values. Token types are inherited
|
|
1148
|
-
* from the source library.
|
|
1149
|
-
*
|
|
1150
|
-
* @public
|
|
1151
|
-
*/
|
|
1152
|
-
export type ExtendConfig<T extends {}, R extends {} = T> = {
|
|
1153
|
-
[K in keyof T]?: T[K] extends DesignToken.Shape ? Omit<T[K], "$type" | "$value"> & {
|
|
1154
|
-
$type?: DesignToken.TypeByToken<T[K]>;
|
|
1155
|
-
$value: ConfigTokenValue<T[K], R>;
|
|
1156
|
-
} : K extends keyof DesignToken.Group ? T[K] : T[K] extends {} ? ExtendConfig<T[K], R> : never;
|
|
1157
|
-
};
|
|
1158
|
-
/**
|
|
1159
|
-
* @public
|
|
1160
|
-
*/
|
|
1161
|
-
const create: <T extends NoRoot<T> = any>(config: Library.Config<T, T> & NoInfer<ConfigValueCheck<T, T>> & (ConfigTypeHint | {})) => Library.Library<T>;
|
|
1162
|
-
export {};
|
|
1163
|
-
}
|
|
1164
|
-
|
|
1165
|
-
/**
|
|
1166
|
-
* Builds a duration in milliseconds.
|
|
1167
|
-
*
|
|
1168
|
-
* @public
|
|
1169
|
-
*/
|
|
1170
|
-
export declare const ms: (value: number) => DesignToken.Values.Duration;
|
|
1171
|
-
|
|
1172
|
-
/**
|
|
1173
|
-
* Replaces the function of a recipe, in a library made by
|
|
1174
|
-
* `extend()`, for every token that computes
|
|
1175
|
-
* its value with the recipe. `fn` takes the recipe's arguments and returns a
|
|
1176
|
-
* value of its result's type.
|
|
1177
|
-
*
|
|
1178
|
-
* @example
|
|
1179
|
-
* ```ts
|
|
1180
|
-
* const contrast = library.extend({}, { recipes: [override(Recipes.darken, darkenMore)] });
|
|
1181
|
-
* ```
|
|
1182
|
-
*
|
|
1183
|
-
* @public
|
|
1184
|
-
*/
|
|
1185
|
-
export declare const override: <A extends unknown[], V>(recipe: Library.Recipe<A, V>, fn: (...args: A) => V) => Library.RecipeOverride;
|
|
1186
|
-
|
|
1187
|
-
/**
|
|
1188
|
-
* The path of a {@link (Library:namespace).Ref}'s token, the name of each
|
|
1189
|
-
* group and of the token: `["colors", "primary"]` for
|
|
1190
|
-
* `ref("colors.primary")`.
|
|
1191
|
-
*
|
|
1192
|
-
* @remarks
|
|
1193
|
-
* The library resolves a ref anywhere in a value to its token's value. An
|
|
1194
|
-
* add-on that needs the token itself, such as one that writes a CSS custom
|
|
1195
|
-
* property for it, keeps the path instead, and finds the token in the
|
|
1196
|
-
* library when it needs the value.
|
|
1197
|
-
*
|
|
1198
|
-
* @example
|
|
1199
|
-
* ```ts
|
|
1200
|
-
* // An operand of an expression keeps its token's path, so that it's
|
|
1201
|
-
* // written as a `var()` and isn't resolved to the token's value.
|
|
1202
|
-
* const operand = <T>(arg: number | Library.Ref<number, T>) =>
|
|
1203
|
-
* isRef(arg) ? { token: pathOf(arg).join(".") } : arg;
|
|
1204
|
-
* ```
|
|
1205
|
-
*
|
|
1206
|
-
* @public
|
|
1207
|
-
*/
|
|
1208
|
-
export declare const pathOf: (ref: Library.Ref<unknown, never>) => readonly string[];
|
|
1209
|
-
|
|
1210
|
-
/**
|
|
1211
|
-
* The converters that {@link toProperties} takes, by type.
|
|
1212
|
-
*
|
|
1213
|
-
* @public
|
|
1214
|
-
*/
|
|
1215
|
-
export declare type PropertiesConverters = {
|
|
1216
|
-
readonly [type: string]: ((value: any, token: any) => CSSValue) | false;
|
|
1217
|
-
};
|
|
1218
|
-
|
|
1219
|
-
/**
|
|
1220
|
-
* Builds a dimension in pixels.
|
|
1221
|
-
*
|
|
1222
|
-
* @public
|
|
1223
|
-
*/
|
|
1224
|
-
export declare const px: (value: number) => DesignToken.Values.Dimension;
|
|
1225
|
-
|
|
1226
|
-
/**
|
|
1227
|
-
* Makes the {@link (Library:namespace).Recipe} of each function of
|
|
1228
|
-
* `functions`, named by its key. A recipe takes its function's arguments, any
|
|
1229
|
-
* of which may be refs, computed values, or values with them in it, and
|
|
1230
|
-
* returns the
|
|
1231
|
-
* {@link (Library:namespace).Computed} result. The function is called when
|
|
1232
|
-
* the token is read, with the values of the refs, and again when one of the
|
|
1233
|
-
* tokens it read changes.
|
|
1234
|
-
*
|
|
1235
|
-
* @remarks
|
|
1236
|
-
* Arguments are evaluated when a function is called, before the library
|
|
1237
|
-
* exists, so a function can't be given refs itself: its recipe defers it.
|
|
1238
|
-
* The function must be pure, because it's called only when the token's value
|
|
1239
|
-
* is resolved again. Its arguments are frozen, as token values are, so its
|
|
1240
|
-
* parameters are typed readonly, as in `DesignToken.Values.Readonly.Color`:
|
|
1241
|
-
* mutating one throws. A generic function's recipe takes the arguments of its
|
|
1242
|
-
* constraint. Recipes are extended by spreading them into a new object, and a
|
|
1243
|
-
* recipe's function is replaced in an extended library with {@link override}.
|
|
1244
|
-
*
|
|
1245
|
-
* @example
|
|
1246
|
-
* ```ts
|
|
1247
|
-
* // darkenColor(color: DesignToken.Values.Readonly.Color, amount: number)
|
|
1248
|
-
* export const Recipes = recipes({ darken: darkenColor, lighten: lightenColor });
|
|
1249
|
-
* export const MyRecipes = { ...Recipes, ...recipes({ tint: tintColor }) };
|
|
1250
|
-
*
|
|
1251
|
-
* hover: { $type: DesignToken.Type.Color, $value: Recipes.darken(ref("colors.primary"), 0.2) }
|
|
1252
|
-
* ```
|
|
1253
|
-
*
|
|
1254
|
-
* @public
|
|
1255
|
-
*/
|
|
1256
|
-
export declare const recipes: <F extends Record<string, (...args: any[]) => unknown>>(functions: F) => Library.Recipes<F>;
|
|
1257
|
-
|
|
1258
|
-
/**
|
|
1259
|
-
* Makes a {@link (Library:namespace).Ref} to the token at a dotted path. Its
|
|
1260
|
-
* type comes from where it's used: the library must have a token at the path
|
|
1261
|
-
* whose value has the type expected there.
|
|
1262
|
-
*
|
|
1263
|
-
* @remarks
|
|
1264
|
-
* Where the shape of the library is inferred, as in `Library.create({ ... })`
|
|
1265
|
-
* without a type argument, or for a new token in `extend()`, the path can't
|
|
1266
|
-
* be checked, so the shape is given as a type argument, or the ref is made
|
|
1267
|
-
* with {@link refs}.
|
|
1268
|
-
*
|
|
1269
|
-
* @example
|
|
1270
|
-
* ```ts
|
|
1271
|
-
* link: { $type: DesignToken.Type.Color, $value: ref("colors.primary") }
|
|
1272
|
-
* ```
|
|
1273
|
-
*
|
|
1274
|
-
* @public
|
|
1275
|
-
*/
|
|
1276
|
-
export declare const ref: <V, T extends {} = {}>(path: NoInfer<Library.TokenPath<T, V>>) => Library.Ref<V, T>;
|
|
1277
|
-
|
|
1278
|
-
/**
|
|
1279
|
-
* Makes a {@link (Library:namespace).Ref} to each token of a library of shape
|
|
1280
|
-
* `T`, at the token's path: `refs<Theme>().colors.primary` is the same ref as
|
|
1281
|
-
* `ref("colors.primary")`. It needs no library, so the refs are made once,
|
|
1282
|
-
* before the library's config, and serve every library of the shape.
|
|
1283
|
-
*
|
|
1284
|
-
* @example
|
|
1285
|
-
* ```ts
|
|
1286
|
-
* const theme = refs<Theme>();
|
|
1287
|
-
* const library = Library.create<Theme>({
|
|
1288
|
-
* colors: {
|
|
1289
|
-
* $type: DesignToken.Type.Color,
|
|
1290
|
-
* primary: { $value: hex("#0000ff") },
|
|
1291
|
-
* link: { $value: theme.colors.primary },
|
|
1292
|
-
* },
|
|
1293
|
-
* });
|
|
1294
|
-
* ```
|
|
1295
|
-
*
|
|
1296
|
-
* @public
|
|
1297
|
-
*/
|
|
1298
|
-
export declare const refs: <T extends {}>() => Library.Refs<T>;
|
|
1299
|
-
|
|
1300
|
-
/**
|
|
1301
|
-
* Builds a dimension in rems.
|
|
1302
|
-
*
|
|
1303
|
-
* @public
|
|
1304
|
-
*/
|
|
1305
|
-
export declare const rem: (value: number) => DesignToken.Values.Dimension;
|
|
1306
|
-
|
|
1307
|
-
/**
|
|
1308
|
-
* The key of the phantom type of a ref: what it resolves to, in a library of
|
|
1309
|
-
* what shape. It's never set.
|
|
1310
|
-
*/
|
|
1311
|
-
declare const RESOLVES: unique symbol;
|
|
1312
|
-
|
|
1313
|
-
/**
|
|
1314
|
-
* Builds a duration in seconds.
|
|
1315
|
-
*
|
|
1316
|
-
* @public
|
|
1317
|
-
*/
|
|
1318
|
-
export declare const s: (value: number) => DesignToken.Values.Duration;
|
|
1319
|
-
|
|
1320
|
-
/**
|
|
1321
|
-
* A converter for any of the standard types, which is used in place of the one
|
|
1322
|
-
* of the library.
|
|
1323
|
-
*
|
|
1324
|
-
* @public
|
|
1325
|
-
*/
|
|
1326
|
-
export declare type StandardConverters = {
|
|
1327
|
-
[N in keyof DesignToken.ReadonlyValueByType]?: CSSConverter<DesignToken.ReadonlyValueByType[N], Extract<DesignToken.Standard, {
|
|
1328
|
-
$type: N;
|
|
1329
|
-
}>>;
|
|
1330
|
-
};
|
|
1331
|
-
|
|
1332
|
-
/**
|
|
1333
|
-
* Convert a library to CSS custom property declarations.
|
|
1334
|
-
*
|
|
1335
|
-
* @remarks
|
|
1336
|
-
* Libraries with custom token types must provide a converter for each
|
|
1337
|
-
* custom type, or `false` to leave tokens of that type out of the CSS.
|
|
1338
|
-
* A converter for a standard type is used in place of the one of the library.
|
|
1339
|
-
*
|
|
1340
|
-
* @public
|
|
1341
|
-
*/
|
|
1342
|
-
export declare function toCSS<T extends {}, R extends {}>(library: Library.Library<T, R>, ...[options]: ToCSSArgs<NoInfer<T>>): string;
|
|
1343
|
-
|
|
1344
|
-
/**
|
|
1345
|
-
* The trailing arguments of {@link toCSS}: {@link CSSOptions} are
|
|
1346
|
-
* required when the library contains custom token types.
|
|
1347
|
-
*
|
|
1348
|
-
* @public
|
|
1349
|
-
*/
|
|
1350
|
-
export declare type ToCSSArgs<T> = [CustomTokensOf<T>] extends [never] ? [options?: CSSOptions<T>] : [options: CSSOptions<T>];
|
|
1351
|
-
|
|
1352
|
-
/**
|
|
1353
|
-
* The key of the phantom type that marks a token in
|
|
1354
|
-
* {@link (Library:namespace).TokenValues}. It's never set.
|
|
1355
|
-
*/
|
|
1356
|
-
declare const TOKEN: unique symbol;
|
|
1357
|
-
|
|
1358
|
-
/**
|
|
1359
|
-
* Construct an {@link CSSPropertiesLibrary} from a {@link (Library:namespace).Library}.
|
|
1360
|
-
*
|
|
1361
|
-
* @remarks
|
|
1362
|
-
* Pass the same `converters` given to {@link toCSS} to leave out the tokens it does
|
|
1363
|
-
* not write (a custom type whose converter is `false`). They are still in the
|
|
1364
|
-
* {@link CSSPropertiesLibrary} type, but missing at runtime.
|
|
1365
|
-
*
|
|
1366
|
-
* A token whose type has a converter in `converters` has a property for each
|
|
1367
|
-
* key of the {@link CSSValues} it returns, so this reads the token's value to
|
|
1368
|
-
* call it. Its own property is `var` and `property`, as for any token, and
|
|
1369
|
-
* the one for `hover` is at `hover`, so a converter's keys can't be `var` or
|
|
1370
|
-
* `property`.
|
|
1371
|
-
*
|
|
1372
|
-
* @example
|
|
1373
|
-
* ```ts
|
|
1374
|
-
* const properties = toProperties(library, {
|
|
1375
|
-
* converters: {
|
|
1376
|
-
* states: (value: States) => ({
|
|
1377
|
-
* "": convert("color", value.rest),
|
|
1378
|
-
* hover: convert("color", value.hover),
|
|
1379
|
-
* }),
|
|
1380
|
-
* },
|
|
1381
|
-
* });
|
|
1382
|
-
* properties.fill.var; // "var(--fill)"
|
|
1383
|
-
* properties.fill.hover.var; // "var(--fill-hover)"
|
|
1384
|
-
* ```
|
|
1385
|
-
*
|
|
1386
|
-
* @public
|
|
1387
|
-
*/
|
|
1388
|
-
export declare function toProperties<T extends Library.Library<any>, C extends PropertiesConverters = {}>(library: T, options?: ToPropertiesOptions<C>): CSSPropertiesLibrary<T["tokens"], C>;
|
|
1389
|
-
|
|
1390
|
-
/**
|
|
1391
|
-
* Options accepted by {@link toProperties}.
|
|
1392
|
-
*
|
|
1393
|
-
* @public
|
|
1394
|
-
*/
|
|
1395
|
-
export declare interface ToPropertiesOptions<C extends PropertiesConverters = PropertiesConverters> extends CSSPropertiesOptions {
|
|
1396
|
-
/**
|
|
1397
|
-
* The converters given to {@link toCSS}. A token whose custom type is `false`
|
|
1398
|
-
* isn't written by `toCSS`, so it has no custom property and is left out.
|
|
1399
|
-
* A token whose converter returns {@link CSSValues} has a property for
|
|
1400
|
-
* each of its keys.
|
|
1401
|
-
*/
|
|
1402
|
-
converters?: C;
|
|
1403
|
-
}
|
|
1404
|
-
|
|
1405
|
-
export { }
|