@tokenami/config 0.0.35 → 0.0.36

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.
Files changed (5) hide show
  1. package/dist/index.d.mts +22 -159
  2. package/dist/index.d.ts +22 -159
  3. package/dist/index.js +1 -0
  4. package/dist/index.mjs +1 -0
  5. package/package.json +2 -2
package/dist/index.d.mts CHANGED
@@ -5,15 +5,24 @@ type Flatten<T> = {
5
5
  type CSSProperty = Flatten<typeof layers>[number];
6
6
  declare const properties: CSSProperty;
7
7
 
8
- type DeepReadonly<T> = T extends any[] ? T : {
8
+ type DeepReadonly<T> = T extends Function | any[] ? T : {
9
9
  readonly [P in keyof T]: DeepReadonly<T[P]>;
10
10
  };
11
11
  type ThemeKey = 'alpha' | 'border' | 'color' | 'ease' | 'font-size' | 'leading' | 'line-style' | 'radii' | 'size' | 'shadow' | 'tracking' | 'transition' | 'weight' | 'z' | (string & {});
12
12
  type ThemeValues = Record<string, string>;
13
- type Theme = Partial<Record<ThemeKey, ThemeValues>>;
13
+ type Theme = {
14
+ [themeKey in ThemeKey]?: ThemeValues;
15
+ };
16
+ type ThemeMode<T = Theme> = {
17
+ [mode: string]: T;
18
+ };
19
+ type ThemeModes<T = Theme> = {
20
+ modes?: ThemeMode<T>;
21
+ };
22
+ type ThemeConfig = Theme | ThemeModes;
14
23
  type Aliases = Record<string, readonly CSSProperty[]>;
15
24
  type PropertiesOptions = readonly ('grid' | ThemeKey)[];
16
- interface Config extends DeepReadonly<{
25
+ interface Config {
17
26
  include: string[];
18
27
  exclude?: string[];
19
28
  grid?: string;
@@ -31,14 +40,15 @@ interface Config extends DeepReadonly<{
31
40
  };
32
41
  };
33
42
  aliases?: Aliases;
34
- theme: Theme;
43
+ themeSelector?: (mode: string) => string;
44
+ theme: ThemeConfig;
35
45
  properties?: Partial<Record<CSSProperty, PropertiesOptions>>;
36
- }> {
37
46
  }
38
47
  declare const defaultConfig: {
39
48
  include: never[];
40
49
  grid: string;
41
50
  responsive: {};
51
+ themeSelector: (mode: string) => string;
42
52
  theme: {};
43
53
  aliases: {};
44
54
  selectors: {
@@ -188,159 +198,12 @@ declare const defaultConfig: {
188
198
  };
189
199
  };
190
200
  type DefaultConfig = typeof defaultConfig;
201
+ type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
191
202
  type Exact<T, V extends T> = Exclude<keyof V, keyof T> extends never ? V : T;
192
- declare function createConfig<T extends Config>(obj: Exact<Config, T>): {
193
- include: never[];
194
- grid: string;
195
- responsive: {};
196
- theme: {};
197
- aliases: {};
198
- selectors: {
199
- after: string;
200
- before: string;
201
- even: string;
202
- odd: string;
203
- 'first-child': string;
204
- 'last-child': string;
205
- placeholder: string;
206
- hover: string;
207
- focus: string;
208
- 'focus-visible': string;
209
- 'focus-within': string;
210
- active: string;
211
- disabled: string;
212
- };
213
- properties: {
214
- 'accent-color': "color"[];
215
- animation: "anim"[];
216
- 'animation-timing-function': "ease"[];
217
- background: ("color" | "surface")[];
218
- 'background-color': "color"[];
219
- 'background-image': "surface"[];
220
- 'background-position': "grid"[];
221
- 'background-position-x': "grid"[];
222
- 'background-position-y': "grid"[];
223
- 'block-size': ("grid" | "size")[];
224
- border: "border"[];
225
- 'border-block': "border"[];
226
- 'border-block-color': "color"[];
227
- 'border-block-end': "border"[];
228
- 'border-block-end-color': "color"[];
229
- 'border-block-end-style': "line-style"[];
230
- 'border-block-start': "border"[];
231
- 'border-block-start-color': "color"[];
232
- 'border-block-start-style': "line-style"[];
233
- 'border-block-style': "line-style"[];
234
- 'border-bottom': "border"[];
235
- 'border-bottom-color': "color"[];
236
- 'border-bottom-left-radius': "radii"[];
237
- 'border-bottom-right-radius': "radii"[];
238
- 'border-bottom-style': "line-style"[];
239
- 'border-color': "color"[];
240
- 'border-end-end-radius': "radii"[];
241
- 'border-end-start-radius': "radii"[];
242
- 'border-inline': "border"[];
243
- 'border-inline-color': "color"[];
244
- 'border-inline-end': "border"[];
245
- 'border-inline-end-color': "color"[];
246
- 'border-inline-end-style': "line-style"[];
247
- 'border-inline-start': "border"[];
248
- 'border-inline-start-color': "color"[];
249
- 'border-inline-start-style': "line-style"[];
250
- 'border-inline-style': "line-style"[];
251
- 'border-left': "border"[];
252
- 'border-left-color': "color"[];
253
- 'border-left-style': "line-style"[];
254
- 'border-radius': "radii"[];
255
- 'border-right': "border"[];
256
- 'border-right-color': "color"[];
257
- 'border-right-style': "line-style"[];
258
- 'border-start-end-radius': "radii"[];
259
- 'border-start-start-radius': "radii"[];
260
- 'border-style': "line-style"[];
261
- 'border-top': "border"[];
262
- 'border-top-color': "color"[];
263
- 'border-top-left-radius': "radii"[];
264
- 'border-top-right-radius': "radii"[];
265
- 'border-top-style': "line-style"[];
266
- bottom: "grid"[];
267
- 'box-shadow': "shadow"[];
268
- 'caret-color': "color"[];
269
- color: "color"[];
270
- 'column-gap': "grid"[];
271
- 'column-rule-color': "color"[];
272
- 'column-rule-width': "grid"[];
273
- 'column-width': ("grid" | "size")[];
274
- 'flex-basis': ("grid" | "size")[];
275
- 'font-family': "font"[];
276
- 'font-size': "font-size"[];
277
- 'font-weight': "weight"[];
278
- gap: "grid"[];
279
- height: ("grid" | "size")[];
280
- 'inline-size': ("grid" | "size")[];
281
- inset: "grid"[];
282
- 'inset-block': "grid"[];
283
- 'inset-block-end': "grid"[];
284
- 'inset-block-start': "grid"[];
285
- 'inset-inline': "grid"[];
286
- 'inset-inline-end': "grid"[];
287
- 'inset-inline-start': "grid"[];
288
- left: "grid"[];
289
- 'letter-spacing': "tracking"[];
290
- 'line-height': "leading"[];
291
- margin: "grid"[];
292
- 'margin-block': "grid"[];
293
- 'margin-block-end': "grid"[];
294
- 'margin-block-start': "grid"[];
295
- 'margin-bottom': "grid"[];
296
- 'margin-inline': "grid"[];
297
- 'margin-inline-end': "grid"[];
298
- 'margin-inline-start': "grid"[];
299
- 'margin-left': "grid"[];
300
- 'margin-right': "grid"[];
301
- 'margin-top': "grid"[];
302
- 'max-block-size': ("grid" | "size")[];
303
- 'max-height': ("grid" | "size")[];
304
- 'max-inline-size': ("grid" | "size")[];
305
- 'max-width': ("grid" | "size")[];
306
- 'min-block-size': ("grid" | "size")[];
307
- 'min-height': ("grid" | "size")[];
308
- 'min-inline-size': ("grid" | "size")[];
309
- 'min-width': ("grid" | "size")[];
310
- opacity: "alpha"[];
311
- 'outline-color': "color"[];
312
- padding: "grid"[];
313
- 'padding-block': "grid"[];
314
- 'padding-block-end': "grid"[];
315
- 'padding-block-start': "grid"[];
316
- 'padding-bottom': "grid"[];
317
- 'padding-inline': "grid"[];
318
- 'padding-inline-end': "grid"[];
319
- 'padding-inline-start': "grid"[];
320
- 'padding-left': "grid"[];
321
- 'padding-right': "grid"[];
322
- 'padding-top': "grid"[];
323
- right: "grid"[];
324
- 'row-gap': "grid"[];
325
- 'scroll-margin': "grid"[];
326
- 'scroll-margin-bottom': "grid"[];
327
- 'scroll-margin-left': "grid"[];
328
- 'scroll-margin-right': "grid"[];
329
- 'scroll-margin-top': "grid"[];
330
- 'scroll-padding': "grid"[];
331
- 'scroll-padding-bottom': "grid"[];
332
- 'scroll-padding-left': "grid"[];
333
- 'scroll-padding-right': "grid"[];
334
- 'scroll-padding-top': "grid"[];
335
- 'text-decoration-color': "color"[];
336
- 'text-shadow': "shadow"[];
337
- top: "grid"[];
338
- transition: "transition"[];
339
- 'transition-timing-function': "ease"[];
340
- width: ("grid" | "size")[];
341
- 'z-index': "z"[];
342
- };
343
- } & DeepReadonly<T>;
203
+ type MatchingThemeModes<M> = M extends ThemeMode ? {
204
+ theme: ThemeModes<UnionToIntersection<M[keyof M]>>;
205
+ } : {};
206
+ declare function createConfig<T extends Config>(obj: Exact<Config, T> & MatchingThemeModes<T['theme']['modes']>): Omit<DefaultConfig, keyof DeepReadonly<T>> & DeepReadonly<T>;
344
207
 
345
208
  type GridProperty = '--_grid';
346
209
  declare const GridProperty: {
@@ -360,7 +223,7 @@ type VariantProperty<P extends string = string, V extends string = string> = `--
360
223
  declare const VariantProperty: {
361
224
  safeParse: (input: unknown) => Validated<`--${string}_${string}`>;
362
225
  };
363
- declare function variantProperty(variant: string, name: string): TokenProperty;
226
+ declare function variantProperty(variant: string, name: string): VariantProperty;
364
227
  type TokenValue<TK extends string = string, V extends string = string> = `var(--${TK}_${V})`;
365
228
  declare const TokenValue: {
366
229
  safeParse: (input: unknown) => Validated<`var(--${string}_${string})`>;
@@ -468,4 +331,4 @@ declare const mapShorthandToLonghands: {
468
331
  transition: ("transition-delay" | "transition-duration" | "transition-property" | "transition-timing-function")[];
469
332
  };
470
333
 
471
- export { type Aliases, ArbitraryValue, type CSSProperty, type Config, type DeepReadonly, type DefaultConfig, GridProperty, GridValue, type Theme, TokenProperty, TokenValue, VariantProperty, arbitraryValue, createConfig, defaultConfig, getCSSPropertiesForAlias, getTokenPropertyName, getTokenPropertyParts, getTokenPropertySplit, getTokenValueParts, gridProperty, layers, mapShorthandToLonghands, properties, tokenProperty, tokenValue, variantProperty };
334
+ export { type Aliases, ArbitraryValue, type CSSProperty, type Config, type DeepReadonly, type DefaultConfig, GridProperty, GridValue, type Theme, type ThemeModes, TokenProperty, TokenValue, VariantProperty, arbitraryValue, createConfig, defaultConfig, getCSSPropertiesForAlias, getTokenPropertyName, getTokenPropertyParts, getTokenPropertySplit, getTokenValueParts, gridProperty, layers, mapShorthandToLonghands, properties, tokenProperty, tokenValue, variantProperty };
package/dist/index.d.ts CHANGED
@@ -5,15 +5,24 @@ type Flatten<T> = {
5
5
  type CSSProperty = Flatten<typeof layers>[number];
6
6
  declare const properties: CSSProperty;
7
7
 
8
- type DeepReadonly<T> = T extends any[] ? T : {
8
+ type DeepReadonly<T> = T extends Function | any[] ? T : {
9
9
  readonly [P in keyof T]: DeepReadonly<T[P]>;
10
10
  };
11
11
  type ThemeKey = 'alpha' | 'border' | 'color' | 'ease' | 'font-size' | 'leading' | 'line-style' | 'radii' | 'size' | 'shadow' | 'tracking' | 'transition' | 'weight' | 'z' | (string & {});
12
12
  type ThemeValues = Record<string, string>;
13
- type Theme = Partial<Record<ThemeKey, ThemeValues>>;
13
+ type Theme = {
14
+ [themeKey in ThemeKey]?: ThemeValues;
15
+ };
16
+ type ThemeMode<T = Theme> = {
17
+ [mode: string]: T;
18
+ };
19
+ type ThemeModes<T = Theme> = {
20
+ modes?: ThemeMode<T>;
21
+ };
22
+ type ThemeConfig = Theme | ThemeModes;
14
23
  type Aliases = Record<string, readonly CSSProperty[]>;
15
24
  type PropertiesOptions = readonly ('grid' | ThemeKey)[];
16
- interface Config extends DeepReadonly<{
25
+ interface Config {
17
26
  include: string[];
18
27
  exclude?: string[];
19
28
  grid?: string;
@@ -31,14 +40,15 @@ interface Config extends DeepReadonly<{
31
40
  };
32
41
  };
33
42
  aliases?: Aliases;
34
- theme: Theme;
43
+ themeSelector?: (mode: string) => string;
44
+ theme: ThemeConfig;
35
45
  properties?: Partial<Record<CSSProperty, PropertiesOptions>>;
36
- }> {
37
46
  }
38
47
  declare const defaultConfig: {
39
48
  include: never[];
40
49
  grid: string;
41
50
  responsive: {};
51
+ themeSelector: (mode: string) => string;
42
52
  theme: {};
43
53
  aliases: {};
44
54
  selectors: {
@@ -188,159 +198,12 @@ declare const defaultConfig: {
188
198
  };
189
199
  };
190
200
  type DefaultConfig = typeof defaultConfig;
201
+ type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
191
202
  type Exact<T, V extends T> = Exclude<keyof V, keyof T> extends never ? V : T;
192
- declare function createConfig<T extends Config>(obj: Exact<Config, T>): {
193
- include: never[];
194
- grid: string;
195
- responsive: {};
196
- theme: {};
197
- aliases: {};
198
- selectors: {
199
- after: string;
200
- before: string;
201
- even: string;
202
- odd: string;
203
- 'first-child': string;
204
- 'last-child': string;
205
- placeholder: string;
206
- hover: string;
207
- focus: string;
208
- 'focus-visible': string;
209
- 'focus-within': string;
210
- active: string;
211
- disabled: string;
212
- };
213
- properties: {
214
- 'accent-color': "color"[];
215
- animation: "anim"[];
216
- 'animation-timing-function': "ease"[];
217
- background: ("color" | "surface")[];
218
- 'background-color': "color"[];
219
- 'background-image': "surface"[];
220
- 'background-position': "grid"[];
221
- 'background-position-x': "grid"[];
222
- 'background-position-y': "grid"[];
223
- 'block-size': ("grid" | "size")[];
224
- border: "border"[];
225
- 'border-block': "border"[];
226
- 'border-block-color': "color"[];
227
- 'border-block-end': "border"[];
228
- 'border-block-end-color': "color"[];
229
- 'border-block-end-style': "line-style"[];
230
- 'border-block-start': "border"[];
231
- 'border-block-start-color': "color"[];
232
- 'border-block-start-style': "line-style"[];
233
- 'border-block-style': "line-style"[];
234
- 'border-bottom': "border"[];
235
- 'border-bottom-color': "color"[];
236
- 'border-bottom-left-radius': "radii"[];
237
- 'border-bottom-right-radius': "radii"[];
238
- 'border-bottom-style': "line-style"[];
239
- 'border-color': "color"[];
240
- 'border-end-end-radius': "radii"[];
241
- 'border-end-start-radius': "radii"[];
242
- 'border-inline': "border"[];
243
- 'border-inline-color': "color"[];
244
- 'border-inline-end': "border"[];
245
- 'border-inline-end-color': "color"[];
246
- 'border-inline-end-style': "line-style"[];
247
- 'border-inline-start': "border"[];
248
- 'border-inline-start-color': "color"[];
249
- 'border-inline-start-style': "line-style"[];
250
- 'border-inline-style': "line-style"[];
251
- 'border-left': "border"[];
252
- 'border-left-color': "color"[];
253
- 'border-left-style': "line-style"[];
254
- 'border-radius': "radii"[];
255
- 'border-right': "border"[];
256
- 'border-right-color': "color"[];
257
- 'border-right-style': "line-style"[];
258
- 'border-start-end-radius': "radii"[];
259
- 'border-start-start-radius': "radii"[];
260
- 'border-style': "line-style"[];
261
- 'border-top': "border"[];
262
- 'border-top-color': "color"[];
263
- 'border-top-left-radius': "radii"[];
264
- 'border-top-right-radius': "radii"[];
265
- 'border-top-style': "line-style"[];
266
- bottom: "grid"[];
267
- 'box-shadow': "shadow"[];
268
- 'caret-color': "color"[];
269
- color: "color"[];
270
- 'column-gap': "grid"[];
271
- 'column-rule-color': "color"[];
272
- 'column-rule-width': "grid"[];
273
- 'column-width': ("grid" | "size")[];
274
- 'flex-basis': ("grid" | "size")[];
275
- 'font-family': "font"[];
276
- 'font-size': "font-size"[];
277
- 'font-weight': "weight"[];
278
- gap: "grid"[];
279
- height: ("grid" | "size")[];
280
- 'inline-size': ("grid" | "size")[];
281
- inset: "grid"[];
282
- 'inset-block': "grid"[];
283
- 'inset-block-end': "grid"[];
284
- 'inset-block-start': "grid"[];
285
- 'inset-inline': "grid"[];
286
- 'inset-inline-end': "grid"[];
287
- 'inset-inline-start': "grid"[];
288
- left: "grid"[];
289
- 'letter-spacing': "tracking"[];
290
- 'line-height': "leading"[];
291
- margin: "grid"[];
292
- 'margin-block': "grid"[];
293
- 'margin-block-end': "grid"[];
294
- 'margin-block-start': "grid"[];
295
- 'margin-bottom': "grid"[];
296
- 'margin-inline': "grid"[];
297
- 'margin-inline-end': "grid"[];
298
- 'margin-inline-start': "grid"[];
299
- 'margin-left': "grid"[];
300
- 'margin-right': "grid"[];
301
- 'margin-top': "grid"[];
302
- 'max-block-size': ("grid" | "size")[];
303
- 'max-height': ("grid" | "size")[];
304
- 'max-inline-size': ("grid" | "size")[];
305
- 'max-width': ("grid" | "size")[];
306
- 'min-block-size': ("grid" | "size")[];
307
- 'min-height': ("grid" | "size")[];
308
- 'min-inline-size': ("grid" | "size")[];
309
- 'min-width': ("grid" | "size")[];
310
- opacity: "alpha"[];
311
- 'outline-color': "color"[];
312
- padding: "grid"[];
313
- 'padding-block': "grid"[];
314
- 'padding-block-end': "grid"[];
315
- 'padding-block-start': "grid"[];
316
- 'padding-bottom': "grid"[];
317
- 'padding-inline': "grid"[];
318
- 'padding-inline-end': "grid"[];
319
- 'padding-inline-start': "grid"[];
320
- 'padding-left': "grid"[];
321
- 'padding-right': "grid"[];
322
- 'padding-top': "grid"[];
323
- right: "grid"[];
324
- 'row-gap': "grid"[];
325
- 'scroll-margin': "grid"[];
326
- 'scroll-margin-bottom': "grid"[];
327
- 'scroll-margin-left': "grid"[];
328
- 'scroll-margin-right': "grid"[];
329
- 'scroll-margin-top': "grid"[];
330
- 'scroll-padding': "grid"[];
331
- 'scroll-padding-bottom': "grid"[];
332
- 'scroll-padding-left': "grid"[];
333
- 'scroll-padding-right': "grid"[];
334
- 'scroll-padding-top': "grid"[];
335
- 'text-decoration-color': "color"[];
336
- 'text-shadow': "shadow"[];
337
- top: "grid"[];
338
- transition: "transition"[];
339
- 'transition-timing-function': "ease"[];
340
- width: ("grid" | "size")[];
341
- 'z-index': "z"[];
342
- };
343
- } & DeepReadonly<T>;
203
+ type MatchingThemeModes<M> = M extends ThemeMode ? {
204
+ theme: ThemeModes<UnionToIntersection<M[keyof M]>>;
205
+ } : {};
206
+ declare function createConfig<T extends Config>(obj: Exact<Config, T> & MatchingThemeModes<T['theme']['modes']>): Omit<DefaultConfig, keyof DeepReadonly<T>> & DeepReadonly<T>;
344
207
 
345
208
  type GridProperty = '--_grid';
346
209
  declare const GridProperty: {
@@ -360,7 +223,7 @@ type VariantProperty<P extends string = string, V extends string = string> = `--
360
223
  declare const VariantProperty: {
361
224
  safeParse: (input: unknown) => Validated<`--${string}_${string}`>;
362
225
  };
363
- declare function variantProperty(variant: string, name: string): TokenProperty;
226
+ declare function variantProperty(variant: string, name: string): VariantProperty;
364
227
  type TokenValue<TK extends string = string, V extends string = string> = `var(--${TK}_${V})`;
365
228
  declare const TokenValue: {
366
229
  safeParse: (input: unknown) => Validated<`var(--${string}_${string})`>;
@@ -468,4 +331,4 @@ declare const mapShorthandToLonghands: {
468
331
  transition: ("transition-delay" | "transition-duration" | "transition-property" | "transition-timing-function")[];
469
332
  };
470
333
 
471
- export { type Aliases, ArbitraryValue, type CSSProperty, type Config, type DeepReadonly, type DefaultConfig, GridProperty, GridValue, type Theme, TokenProperty, TokenValue, VariantProperty, arbitraryValue, createConfig, defaultConfig, getCSSPropertiesForAlias, getTokenPropertyName, getTokenPropertyParts, getTokenPropertySplit, getTokenValueParts, gridProperty, layers, mapShorthandToLonghands, properties, tokenProperty, tokenValue, variantProperty };
334
+ export { type Aliases, ArbitraryValue, type CSSProperty, type Config, type DeepReadonly, type DefaultConfig, GridProperty, GridValue, type Theme, type ThemeModes, TokenProperty, TokenValue, VariantProperty, arbitraryValue, createConfig, defaultConfig, getCSSPropertiesForAlias, getTokenPropertyName, getTokenPropertyParts, getTokenPropertySplit, getTokenValueParts, gridProperty, layers, mapShorthandToLonghands, properties, tokenProperty, tokenValue, variantProperty };
package/dist/index.js CHANGED
@@ -49,6 +49,7 @@ var defaultConfig = {
49
49
  include: [],
50
50
  grid: "0.25rem",
51
51
  responsive: {},
52
+ themeSelector: (mode) => mode === "root" ? ":root" : `.theme-${mode}`,
52
53
  theme: {},
53
54
  aliases: {},
54
55
  selectors: {
package/dist/index.mjs CHANGED
@@ -3,6 +3,7 @@ var defaultConfig = {
3
3
  include: [],
4
4
  grid: "0.25rem",
5
5
  responsive: {},
6
+ themeSelector: (mode) => mode === "root" ? ":root" : `.theme-${mode}`,
6
7
  theme: {},
7
8
  aliases: {},
8
9
  selectors: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tokenami/config",
3
- "version": "0.0.35",
3
+ "version": "0.0.36",
4
4
  "license": "MIT",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -14,7 +14,7 @@
14
14
  "csstype": "^3.1.2",
15
15
  "tsup": "^7.0.0",
16
16
  "typescript": "^5.1.3",
17
- "@tokenami/dev": "0.0.35"
17
+ "@tokenami/dev": "0.0.36"
18
18
  },
19
19
  "scripts": {
20
20
  "build": "tsup src/index.ts --format=esm,cjs --dts",