@pitlane/theme 0.2.0 → 0.3.1
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 +127 -0
- package/README.md +66 -28
- package/dist/default.d.mts +605 -0
- package/dist/default.mjs +584 -0
- package/dist/dtcg.d.mts +127 -0
- package/dist/dtcg.mjs +468 -0
- package/dist/index.d.mts +76 -348
- package/dist/index.mjs +54 -458
- package/dist/schema-CRP607Pg.d.mts +320 -0
- package/dist/schema-JmfNnMzr.mjs +572 -0
- package/dist/schema.d.mts +2 -0
- package/dist/schema.mjs +2 -0
- package/dist/theme-CaHfWYnM.d.mts +280 -0
- package/dist/theme-iDUjQhE0.mjs +253 -0
- package/package.json +58 -48
|
@@ -0,0 +1,320 @@
|
|
|
1
|
+
import { Issue, Schema } from "remix/data-schema";
|
|
2
|
+
//#region src/brands.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* The twelve DTCG token types, in canonical order.
|
|
5
|
+
*
|
|
6
|
+
* @internal
|
|
7
|
+
*/
|
|
8
|
+
declare const TOKEN_TYPES: readonly ["color", "dimension", "duration", "fontFamily", "fontWeight", "number", "cubicBezier", "shadow", "border", "transition", "gradient", "strokeStyle"];
|
|
9
|
+
/** The twelve DTCG token `$type` values. @see {@link AnyToken} */
|
|
10
|
+
type TokenType = (typeof TOKEN_TYPES)[number];
|
|
11
|
+
declare const COLOR: unique symbol;
|
|
12
|
+
declare const DIMENSION: unique symbol;
|
|
13
|
+
declare const DURATION: unique symbol;
|
|
14
|
+
declare const FONT_FAMILY: unique symbol;
|
|
15
|
+
declare const FONT_WEIGHT: unique symbol;
|
|
16
|
+
declare const NUMBER: unique symbol;
|
|
17
|
+
declare const CUBIC_BEZIER: unique symbol;
|
|
18
|
+
declare const SHADOW: unique symbol;
|
|
19
|
+
declare const BORDER: unique symbol;
|
|
20
|
+
declare const TRANSITION: unique symbol;
|
|
21
|
+
declare const GRADIENT: unique symbol;
|
|
22
|
+
declare const STROKE_STYLE: unique symbol;
|
|
23
|
+
/** Compile-time brand for a `color` token. */
|
|
24
|
+
type ColorToken = string & {
|
|
25
|
+
readonly [COLOR]: true;
|
|
26
|
+
};
|
|
27
|
+
/** Compile-time brand for a `dimension` token. */
|
|
28
|
+
type DimensionToken = string & {
|
|
29
|
+
readonly [DIMENSION]: true;
|
|
30
|
+
};
|
|
31
|
+
/** Compile-time brand for a `duration` token. */
|
|
32
|
+
type DurationToken = string & {
|
|
33
|
+
readonly [DURATION]: true;
|
|
34
|
+
};
|
|
35
|
+
/** Compile-time brand for a `fontFamily` token. */
|
|
36
|
+
type FontFamilyToken = string & {
|
|
37
|
+
readonly [FONT_FAMILY]: true;
|
|
38
|
+
};
|
|
39
|
+
/** Compile-time brand for a `fontWeight` token. */
|
|
40
|
+
type FontWeightToken = string & {
|
|
41
|
+
readonly [FONT_WEIGHT]: true;
|
|
42
|
+
};
|
|
43
|
+
/** Compile-time brand for a `number` token. */
|
|
44
|
+
type NumberToken = string & {
|
|
45
|
+
readonly [NUMBER]: true;
|
|
46
|
+
};
|
|
47
|
+
/** Compile-time brand for a `cubicBezier` token. */
|
|
48
|
+
type CubicBezierToken = string & {
|
|
49
|
+
readonly [CUBIC_BEZIER]: true;
|
|
50
|
+
};
|
|
51
|
+
/** Compile-time brand for a `shadow` token. */
|
|
52
|
+
type ShadowToken = string & {
|
|
53
|
+
readonly [SHADOW]: true;
|
|
54
|
+
};
|
|
55
|
+
/** Compile-time brand for a `border` token. */
|
|
56
|
+
type BorderToken = string & {
|
|
57
|
+
readonly [BORDER]: true;
|
|
58
|
+
};
|
|
59
|
+
/** Compile-time brand for a `transition` token. */
|
|
60
|
+
type TransitionToken = string & {
|
|
61
|
+
readonly [TRANSITION]: true;
|
|
62
|
+
};
|
|
63
|
+
/** Compile-time brand for a `gradient` token. */
|
|
64
|
+
type GradientToken = string & {
|
|
65
|
+
readonly [GRADIENT]: true;
|
|
66
|
+
};
|
|
67
|
+
/** Compile-time brand for a `strokeStyle` token. */
|
|
68
|
+
type StrokeStyleToken = string & {
|
|
69
|
+
readonly [STROKE_STYLE]: true;
|
|
70
|
+
};
|
|
71
|
+
/**
|
|
72
|
+
* Maps each {@link TokenType} to its token brand.
|
|
73
|
+
*
|
|
74
|
+
* @internal
|
|
75
|
+
*/
|
|
76
|
+
interface BrandByType {
|
|
77
|
+
color: ColorToken;
|
|
78
|
+
dimension: DimensionToken;
|
|
79
|
+
duration: DurationToken;
|
|
80
|
+
fontFamily: FontFamilyToken;
|
|
81
|
+
fontWeight: FontWeightToken;
|
|
82
|
+
number: NumberToken;
|
|
83
|
+
cubicBezier: CubicBezierToken;
|
|
84
|
+
shadow: ShadowToken;
|
|
85
|
+
border: BorderToken;
|
|
86
|
+
transition: TransitionToken;
|
|
87
|
+
gradient: GradientToken;
|
|
88
|
+
strokeStyle: StrokeStyleToken;
|
|
89
|
+
}
|
|
90
|
+
declare const UNTYPED: unique symbol;
|
|
91
|
+
/**
|
|
92
|
+
* Compile-time brand for a token declared with `s.any()`. It carries
|
|
93
|
+
* no CSS type, so the open-grammar properties (`animation`,
|
|
94
|
+
* `aspectRatio`, `background`) accept it and the token-mapped
|
|
95
|
+
* longhands reject it.
|
|
96
|
+
*/
|
|
97
|
+
type UntypedToken = string & {
|
|
98
|
+
readonly [UNTYPED]: true;
|
|
99
|
+
};
|
|
100
|
+
/**
|
|
101
|
+
* The union of all twelve token brands. Brands are compile-time tags
|
|
102
|
+
* naming each token's type; they let {@link css} reject a dimension
|
|
103
|
+
* where a color belongs. They exist only in the type system — every
|
|
104
|
+
* ref is a plain string at runtime, so brands cost nothing — and they
|
|
105
|
+
* are theme-independent, so tokens minted by two different
|
|
106
|
+
* {@link createTheme} calls mix freely in one {@link css} call.
|
|
107
|
+
*/
|
|
108
|
+
type AnyToken = BrandByType[TokenType];
|
|
109
|
+
//#endregion
|
|
110
|
+
//#region src/schema.d.ts
|
|
111
|
+
/**
|
|
112
|
+
* The tag a schema carries. The twelve {@link TokenType} values name a
|
|
113
|
+
* DTCG type; `scale` is a dimension whose accessor leaf multiplies;
|
|
114
|
+
* `any` declines to type the token at all.
|
|
115
|
+
*
|
|
116
|
+
* @internal
|
|
117
|
+
*/
|
|
118
|
+
type SchemaTag = "any" | "scale" | TokenType;
|
|
119
|
+
/** @internal */
|
|
120
|
+
declare const TAG: unique symbol;
|
|
121
|
+
/** @internal */
|
|
122
|
+
declare const SELF: unique symbol;
|
|
123
|
+
/**
|
|
124
|
+
* A `remix/data-schema` schema that also names the token type it
|
|
125
|
+
* declares. Every factory in this module returns one.
|
|
126
|
+
*
|
|
127
|
+
* @see {@link color}
|
|
128
|
+
*/
|
|
129
|
+
interface TokenSchema<tag extends SchemaTag = SchemaTag> extends Schema<unknown, string> {
|
|
130
|
+
readonly [TAG]: tag;
|
|
131
|
+
}
|
|
132
|
+
/**
|
|
133
|
+
* A schema group: per-child schemas, optionally under a schema for the
|
|
134
|
+
* node itself. {@link group} builds one; a plain object literal is the
|
|
135
|
+
* children-only form.
|
|
136
|
+
*
|
|
137
|
+
* @see {@link group}
|
|
138
|
+
*/
|
|
139
|
+
interface SchemaGroup {
|
|
140
|
+
readonly [SELF]?: TokenSchema;
|
|
141
|
+
readonly [key: string]: SchemaNode | undefined;
|
|
142
|
+
}
|
|
143
|
+
/** A node in a schema tree. @see {@link SchemaGroup} */
|
|
144
|
+
type SchemaNode = SchemaGroup | TokenSchema;
|
|
145
|
+
/**
|
|
146
|
+
* Standard Schema path segments may be objects, so stringify each one
|
|
147
|
+
* rather than relying on `Array#join`.
|
|
148
|
+
*
|
|
149
|
+
* @internal
|
|
150
|
+
*/
|
|
151
|
+
declare function pathKey(path: NonNullable<Issue["path"]>): string;
|
|
152
|
+
/**
|
|
153
|
+
* A `color` token. Accepts any CSS color, including `light-dark()`,
|
|
154
|
+
* `color-mix()`, and `currentColor`, plus DTCG's structured form.
|
|
155
|
+
*
|
|
156
|
+
* @returns A schema declaring the `color` token type
|
|
157
|
+
*
|
|
158
|
+
* @example
|
|
159
|
+
* ```ts
|
|
160
|
+
* let schema = { color: s.color() };
|
|
161
|
+
* let tokens = { color: { white: "#fff", page: lightDark("#fff", "#111") } };
|
|
162
|
+
* ```
|
|
163
|
+
*/
|
|
164
|
+
declare function color(): TokenSchema<"color">;
|
|
165
|
+
/**
|
|
166
|
+
* A `dimension` token. Accepts any CSS length, including `clamp()`,
|
|
167
|
+
* `calc()`, `%`, and `em`.
|
|
168
|
+
*
|
|
169
|
+
* @returns A schema declaring the `dimension` token type
|
|
170
|
+
*/
|
|
171
|
+
declare function dimension(): TokenSchema<"dimension">;
|
|
172
|
+
/**
|
|
173
|
+
* A `duration` token. Accepts `ms`, `s`, and `calc()`.
|
|
174
|
+
*
|
|
175
|
+
* @returns A schema declaring the `duration` token type
|
|
176
|
+
*/
|
|
177
|
+
declare function duration(): TokenSchema<"duration">;
|
|
178
|
+
/**
|
|
179
|
+
* A `number` token. Accepts a finite number, which is what unitless
|
|
180
|
+
* CSS values such as `line-height` and `opacity` take.
|
|
181
|
+
*
|
|
182
|
+
* @returns A schema declaring the `number` token type
|
|
183
|
+
*/
|
|
184
|
+
declare function number(): TokenSchema<"number">;
|
|
185
|
+
/**
|
|
186
|
+
* A `cubicBezier` token, named for the CSS property it feeds. Accepts
|
|
187
|
+
* a four-number tuple or `cubic-bezier(…)` text.
|
|
188
|
+
*
|
|
189
|
+
* @returns A schema declaring the `cubicBezier` token type
|
|
190
|
+
*/
|
|
191
|
+
declare function easing(): TokenSchema<"cubicBezier">;
|
|
192
|
+
/**
|
|
193
|
+
* A `shadow` token. Accepts CSS shadow text, `inset` included.
|
|
194
|
+
*
|
|
195
|
+
* @returns A schema declaring the `shadow` token type
|
|
196
|
+
*/
|
|
197
|
+
declare function shadow(): TokenSchema<"shadow">;
|
|
198
|
+
/**
|
|
199
|
+
* A `border` token. Accepts CSS border shorthand text.
|
|
200
|
+
*
|
|
201
|
+
* @returns A schema declaring the `border` token type
|
|
202
|
+
*/
|
|
203
|
+
declare function border(): TokenSchema<"border">;
|
|
204
|
+
/**
|
|
205
|
+
* A `transition` token. Accepts CSS transition shorthand text.
|
|
206
|
+
*
|
|
207
|
+
* @returns A schema declaring the `transition` token type
|
|
208
|
+
*/
|
|
209
|
+
declare function transition(): TokenSchema<"transition">;
|
|
210
|
+
/**
|
|
211
|
+
* A `gradient` token. Accepts CSS gradient function text.
|
|
212
|
+
*
|
|
213
|
+
* @returns A schema declaring the `gradient` token type
|
|
214
|
+
*/
|
|
215
|
+
declare function gradient(): TokenSchema<"gradient">;
|
|
216
|
+
/**
|
|
217
|
+
* A `strokeStyle` token, named for the CSS value it holds. Accepts a
|
|
218
|
+
* line-style keyword.
|
|
219
|
+
*
|
|
220
|
+
* @returns A schema declaring the `strokeStyle` token type
|
|
221
|
+
*/
|
|
222
|
+
declare function stroke(): TokenSchema<"strokeStyle">;
|
|
223
|
+
/**
|
|
224
|
+
* The two font token types, grouped because they share a prefix.
|
|
225
|
+
*
|
|
226
|
+
* `font.family()` accepts a font stack, as a string or an array of
|
|
227
|
+
* names; an array joins with commas and quotes what needs quoting.
|
|
228
|
+
* `font.weight()` accepts 1 to 1000 or one of DTCG's nineteen
|
|
229
|
+
* keywords, and emits the number.
|
|
230
|
+
*
|
|
231
|
+
* @example
|
|
232
|
+
* ```ts
|
|
233
|
+
* let schema = { font: s.font.family(), weight: s.font.weight() };
|
|
234
|
+
* let tokens = { font: { sans: ["Inter var", "system-ui"] }, weight: { bold: 700 } };
|
|
235
|
+
* ```
|
|
236
|
+
*/
|
|
237
|
+
declare let font: {
|
|
238
|
+
family(): TokenSchema<"fontFamily">;
|
|
239
|
+
weight(): TokenSchema<"fontWeight">;
|
|
240
|
+
};
|
|
241
|
+
/**
|
|
242
|
+
* A dimension token whose accessor leaf is a multiplier rather than a
|
|
243
|
+
* value. The token emits its own custom property; the accessor leaf is
|
|
244
|
+
* callable, and carries the base itself as `.token`.
|
|
245
|
+
*
|
|
246
|
+
* This is Tailwind's `--spacing`: one base that the whole scale
|
|
247
|
+
* multiplies, with no named steps.
|
|
248
|
+
*
|
|
249
|
+
* @returns A schema declaring a scale token
|
|
250
|
+
*
|
|
251
|
+
* @example
|
|
252
|
+
* ```ts
|
|
253
|
+
* let theme = createTheme({
|
|
254
|
+
* schema: { spacing: s.scale() },
|
|
255
|
+
* tokens: { spacing: "0.25rem" },
|
|
256
|
+
* });
|
|
257
|
+
*
|
|
258
|
+
* theme.token.spacing(4); // "calc(var(--spacing) * 4)"
|
|
259
|
+
* theme.token.spacing.token; // "var(--spacing)"
|
|
260
|
+
* ```
|
|
261
|
+
*/
|
|
262
|
+
declare function scale(): TokenSchema<"scale">;
|
|
263
|
+
/**
|
|
264
|
+
* A token with no type. Its value is emitted verbatim and its accessor
|
|
265
|
+
* leaf brands as a plain `string`, which the open-grammar CSS
|
|
266
|
+
* properties accept and the token-mapped longhands still reject.
|
|
267
|
+
*
|
|
268
|
+
* This exists for CSS values with no DTCG type, such as
|
|
269
|
+
* `spin 1s linear infinite` and `16 / 9`. An untyped token may not be
|
|
270
|
+
* the target of a typed token's reference, because there is no type to
|
|
271
|
+
* check against.
|
|
272
|
+
*
|
|
273
|
+
* @returns A schema declaring an untyped token
|
|
274
|
+
*/
|
|
275
|
+
declare function any(): TokenSchema<"any">;
|
|
276
|
+
/**
|
|
277
|
+
* A node that is itself typed and also carries per-child overrides.
|
|
278
|
+
* `self` applies to that node and to every descendant without its own
|
|
279
|
+
* entry; each key in `children` overrides it from there down.
|
|
280
|
+
*
|
|
281
|
+
* The self schema rides on a symbol key, so no token name is reserved:
|
|
282
|
+
* a token named `default` can carry its own type.
|
|
283
|
+
*
|
|
284
|
+
* @param self - The schema for this node and its unlabelled descendants
|
|
285
|
+
* @param children - Per-child schema overrides
|
|
286
|
+
* @returns A schema group
|
|
287
|
+
*
|
|
288
|
+
* @example
|
|
289
|
+
* ```ts
|
|
290
|
+
* let schema = {
|
|
291
|
+
* control: s.group(s.dimension(), { color: s.color(), opacity: s.number() }),
|
|
292
|
+
* };
|
|
293
|
+
* // control.height.sm is a dimension; control.color.border is a color.
|
|
294
|
+
* ```
|
|
295
|
+
*/
|
|
296
|
+
declare function group<const self extends TokenSchema, const children extends Record<string, SchemaNode>>(self: self, children: children): children & {
|
|
297
|
+
readonly [SELF]: self;
|
|
298
|
+
};
|
|
299
|
+
/**
|
|
300
|
+
* True when a node declares a token type rather than grouping others.
|
|
301
|
+
*
|
|
302
|
+
* @internal
|
|
303
|
+
*/
|
|
304
|
+
declare function isTokenSchema(node: unknown): node is TokenSchema;
|
|
305
|
+
/**
|
|
306
|
+
* The schema a node declares for itself and its unlabelled children,
|
|
307
|
+
* or `undefined` when it only groups.
|
|
308
|
+
*
|
|
309
|
+
* @internal
|
|
310
|
+
*/
|
|
311
|
+
declare function selfSchema(node: unknown): TokenSchema | undefined;
|
|
312
|
+
/**
|
|
313
|
+
* The schema node for one child key, or `undefined` when the parent
|
|
314
|
+
* declares nothing for it.
|
|
315
|
+
*
|
|
316
|
+
* @internal
|
|
317
|
+
*/
|
|
318
|
+
declare function childSchema(node: unknown, key: string): unknown;
|
|
319
|
+
//#endregion
|
|
320
|
+
export { DimensionToken as A, UntypedToken as B, stroke as C, BrandByType as D, BorderToken as E, NumberToken as F, ShadowToken as I, StrokeStyleToken as L, FontFamilyToken as M, FontWeightToken as N, ColorToken as O, GradientToken as P, TokenType as R, shadow as S, AnyToken as T, isTokenSchema as _, TAG as a, scale as b, border as c, dimension as d, duration as f, group as g, gradient as h, SchemaTag as i, DurationToken as j, CubicBezierToken as k, childSchema as l, font as m, SchemaGroup as n, TokenSchema as o, easing as p, SchemaNode as r, any as s, SELF as t, color as u, number as v, transition as w, selfSchema as x, pathKey as y, TransitionToken as z };
|