@removify/tailwind-preset 0.1.10 → 0.2.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/dist/{chunk-J5XGEDSE.js → chunk-QZWKJNXG.js} +36 -10
- package/dist/cli/index.cjs +2 -2
- package/dist/cli/index.js +1 -1
- package/dist/index.cjs +46 -19
- package/dist/index.d.cts +99 -88
- package/dist/index.d.ts +99 -88
- package/dist/index.js +14 -12
- package/package.json +8 -8
- package/readme.md +2 -2
|
@@ -252,7 +252,7 @@ function fontConfigKeysKebabCase(fontConfig) {
|
|
|
252
252
|
}
|
|
253
253
|
|
|
254
254
|
// src/theme/fontSize.ts
|
|
255
|
-
var
|
|
255
|
+
var fontSize = {
|
|
256
256
|
"2xs": ["0.6875rem", "1rem"],
|
|
257
257
|
"xs": ["0.75rem", "1rem"],
|
|
258
258
|
"sm": ["0.875rem", "1.25rem"],
|
|
@@ -305,7 +305,7 @@ var fontSizes = {
|
|
|
305
305
|
letterSpacing: "-0.0125rem"
|
|
306
306
|
}]
|
|
307
307
|
};
|
|
308
|
-
var unocssFontSizes = fontConfigKeysKebabCase(
|
|
308
|
+
var unocssFontSizes = fontConfigKeysKebabCase(fontSize);
|
|
309
309
|
|
|
310
310
|
// src/theme/screen.ts
|
|
311
311
|
var screensNumber = {
|
|
@@ -330,7 +330,7 @@ var screens = {
|
|
|
330
330
|
};
|
|
331
331
|
|
|
332
332
|
// src/theme/shadows.ts
|
|
333
|
-
var
|
|
333
|
+
var boxShadow = {
|
|
334
334
|
"elevation-0": "0 0 0 0 rgba(0, 0, 0, 0.10)",
|
|
335
335
|
"elevation-1": "0 1px 2px 0 rgba(0, 0, 0, 0.10)",
|
|
336
336
|
"elevation-2": "0 4px 8px 0 rgba(0, 0, 0, 0.10)",
|
|
@@ -340,10 +340,35 @@ var shadows = {
|
|
|
340
340
|
};
|
|
341
341
|
|
|
342
342
|
// src/theme/index.ts
|
|
343
|
-
|
|
343
|
+
function buildTheme(options = {}) {
|
|
344
|
+
const theme = {};
|
|
345
|
+
if (options.colors !== false) {
|
|
346
|
+
theme.colors = colors;
|
|
347
|
+
}
|
|
348
|
+
if (options.boxShadow !== false) {
|
|
349
|
+
theme.boxShadow = boxShadow;
|
|
350
|
+
}
|
|
351
|
+
if (options.fontSize !== false) {
|
|
352
|
+
theme.fontSize = fontSize;
|
|
353
|
+
}
|
|
354
|
+
if (options.fontFamily !== false) {
|
|
355
|
+
theme.fontFamily = customFontFamily;
|
|
356
|
+
}
|
|
357
|
+
if (options.animation !== false) {
|
|
358
|
+
theme.animation = animation;
|
|
359
|
+
}
|
|
360
|
+
if (options.keyframes !== false) {
|
|
361
|
+
theme.keyframes = keyframes;
|
|
362
|
+
}
|
|
363
|
+
if (options.screens !== false) {
|
|
364
|
+
theme.screens = screens;
|
|
365
|
+
}
|
|
366
|
+
return theme;
|
|
367
|
+
}
|
|
368
|
+
var defaultTheme = {
|
|
344
369
|
colors,
|
|
345
|
-
boxShadow
|
|
346
|
-
fontSize
|
|
370
|
+
boxShadow,
|
|
371
|
+
fontSize,
|
|
347
372
|
fontFamily: customFontFamily,
|
|
348
373
|
animation,
|
|
349
374
|
keyframes,
|
|
@@ -351,7 +376,7 @@ var theme = {
|
|
|
351
376
|
};
|
|
352
377
|
var unocssTheme = {
|
|
353
378
|
colors,
|
|
354
|
-
boxShadow
|
|
379
|
+
boxShadow,
|
|
355
380
|
fontSize: unocssFontSizes
|
|
356
381
|
};
|
|
357
382
|
|
|
@@ -360,10 +385,11 @@ export {
|
|
|
360
385
|
keyframes,
|
|
361
386
|
colors,
|
|
362
387
|
customFontFamily,
|
|
363
|
-
|
|
388
|
+
fontSize,
|
|
364
389
|
screensNumber,
|
|
365
390
|
screens,
|
|
366
|
-
|
|
367
|
-
|
|
391
|
+
boxShadow,
|
|
392
|
+
buildTheme,
|
|
393
|
+
defaultTheme,
|
|
368
394
|
unocssTheme
|
|
369
395
|
};
|
package/dist/cli/index.cjs
CHANGED
|
@@ -281,7 +281,7 @@ function fontConfigKeysKebabCase(fontConfig) {
|
|
|
281
281
|
}
|
|
282
282
|
|
|
283
283
|
// src/theme/fontSize.ts
|
|
284
|
-
var
|
|
284
|
+
var fontSize = {
|
|
285
285
|
"2xs": ["0.6875rem", "1rem"],
|
|
286
286
|
"xs": ["0.75rem", "1rem"],
|
|
287
287
|
"sm": ["0.875rem", "1.25rem"],
|
|
@@ -334,7 +334,7 @@ var fontSizes = {
|
|
|
334
334
|
letterSpacing: "-0.0125rem"
|
|
335
335
|
}]
|
|
336
336
|
};
|
|
337
|
-
var unocssFontSizes = fontConfigKeysKebabCase(
|
|
337
|
+
var unocssFontSizes = fontConfigKeysKebabCase(fontSize);
|
|
338
338
|
|
|
339
339
|
// src/theme/screen.ts
|
|
340
340
|
var screensNumber = {
|
package/dist/cli/index.js
CHANGED
package/dist/index.cjs
CHANGED
|
@@ -31,17 +31,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
31
31
|
var src_exports = {};
|
|
32
32
|
__export(src_exports, {
|
|
33
33
|
animation: () => animation2,
|
|
34
|
+
boxShadow: () => boxShadow,
|
|
35
|
+
buildPreset: () => buildPreset,
|
|
36
|
+
buildTheme: () => buildTheme,
|
|
34
37
|
colors: () => colors,
|
|
35
38
|
colorsNames: () => colorsNames,
|
|
36
|
-
config: () => config,
|
|
37
39
|
default: () => src_default,
|
|
40
|
+
defaultTheme: () => defaultTheme,
|
|
38
41
|
fontFamily: () => customFontFamily,
|
|
39
|
-
|
|
42
|
+
fontSize: () => fontSize,
|
|
40
43
|
keyframes: () => keyframes,
|
|
41
44
|
screens: () => screens,
|
|
42
45
|
screensNumber: () => screensNumber,
|
|
43
|
-
shadows: () => shadows,
|
|
44
|
-
theme: () => theme,
|
|
45
46
|
unocssTheme: () => unocssTheme
|
|
46
47
|
});
|
|
47
48
|
module.exports = __toCommonJS(src_exports);
|
|
@@ -304,7 +305,7 @@ function fontConfigKeysKebabCase(fontConfig) {
|
|
|
304
305
|
}
|
|
305
306
|
|
|
306
307
|
// src/theme/fontSize.ts
|
|
307
|
-
var
|
|
308
|
+
var fontSize = {
|
|
308
309
|
"2xs": ["0.6875rem", "1rem"],
|
|
309
310
|
"xs": ["0.75rem", "1rem"],
|
|
310
311
|
"sm": ["0.875rem", "1.25rem"],
|
|
@@ -357,7 +358,7 @@ var fontSizes = {
|
|
|
357
358
|
letterSpacing: "-0.0125rem"
|
|
358
359
|
}]
|
|
359
360
|
};
|
|
360
|
-
var unocssFontSizes = fontConfigKeysKebabCase(
|
|
361
|
+
var unocssFontSizes = fontConfigKeysKebabCase(fontSize);
|
|
361
362
|
|
|
362
363
|
// src/theme/screen.ts
|
|
363
364
|
var screensNumber = {
|
|
@@ -382,7 +383,7 @@ var screens = {
|
|
|
382
383
|
};
|
|
383
384
|
|
|
384
385
|
// src/theme/shadows.ts
|
|
385
|
-
var
|
|
386
|
+
var boxShadow = {
|
|
386
387
|
"elevation-0": "0 0 0 0 rgba(0, 0, 0, 0.10)",
|
|
387
388
|
"elevation-1": "0 1px 2px 0 rgba(0, 0, 0, 0.10)",
|
|
388
389
|
"elevation-2": "0 4px 8px 0 rgba(0, 0, 0, 0.10)",
|
|
@@ -392,10 +393,35 @@ var shadows = {
|
|
|
392
393
|
};
|
|
393
394
|
|
|
394
395
|
// src/theme/index.ts
|
|
395
|
-
|
|
396
|
+
function buildTheme(options = {}) {
|
|
397
|
+
const theme = {};
|
|
398
|
+
if (options.colors !== false) {
|
|
399
|
+
theme.colors = colors;
|
|
400
|
+
}
|
|
401
|
+
if (options.boxShadow !== false) {
|
|
402
|
+
theme.boxShadow = boxShadow;
|
|
403
|
+
}
|
|
404
|
+
if (options.fontSize !== false) {
|
|
405
|
+
theme.fontSize = fontSize;
|
|
406
|
+
}
|
|
407
|
+
if (options.fontFamily !== false) {
|
|
408
|
+
theme.fontFamily = customFontFamily;
|
|
409
|
+
}
|
|
410
|
+
if (options.animation !== false) {
|
|
411
|
+
theme.animation = animation2;
|
|
412
|
+
}
|
|
413
|
+
if (options.keyframes !== false) {
|
|
414
|
+
theme.keyframes = keyframes;
|
|
415
|
+
}
|
|
416
|
+
if (options.screens !== false) {
|
|
417
|
+
theme.screens = screens;
|
|
418
|
+
}
|
|
419
|
+
return theme;
|
|
420
|
+
}
|
|
421
|
+
var defaultTheme = {
|
|
396
422
|
colors,
|
|
397
|
-
boxShadow
|
|
398
|
-
fontSize
|
|
423
|
+
boxShadow,
|
|
424
|
+
fontSize,
|
|
399
425
|
fontFamily: customFontFamily,
|
|
400
426
|
animation: animation2,
|
|
401
427
|
keyframes,
|
|
@@ -403,7 +429,7 @@ var theme = {
|
|
|
403
429
|
};
|
|
404
430
|
var unocssTheme = {
|
|
405
431
|
colors,
|
|
406
|
-
boxShadow
|
|
432
|
+
boxShadow,
|
|
407
433
|
fontSize: unocssFontSizes
|
|
408
434
|
};
|
|
409
435
|
|
|
@@ -424,33 +450,34 @@ var colorsNames = [
|
|
|
424
450
|
];
|
|
425
451
|
|
|
426
452
|
// src/index.ts
|
|
427
|
-
function
|
|
453
|
+
function buildPreset(extend = true, buildOptions = {}) {
|
|
428
454
|
if (extend === false) {
|
|
429
455
|
return {
|
|
430
|
-
theme,
|
|
456
|
+
theme: buildTheme(buildOptions),
|
|
431
457
|
plugins
|
|
432
458
|
};
|
|
433
459
|
}
|
|
434
460
|
return {
|
|
435
461
|
theme: {
|
|
436
|
-
extend:
|
|
462
|
+
extend: buildTheme(buildOptions)
|
|
437
463
|
},
|
|
438
464
|
plugins
|
|
439
465
|
};
|
|
440
466
|
}
|
|
441
|
-
var src_default =
|
|
467
|
+
var src_default = buildPreset();
|
|
442
468
|
// Annotate the CommonJS export names for ESM import in node:
|
|
443
469
|
0 && (module.exports = {
|
|
444
470
|
animation,
|
|
471
|
+
boxShadow,
|
|
472
|
+
buildPreset,
|
|
473
|
+
buildTheme,
|
|
445
474
|
colors,
|
|
446
475
|
colorsNames,
|
|
447
|
-
|
|
476
|
+
defaultTheme,
|
|
448
477
|
fontFamily,
|
|
449
|
-
|
|
478
|
+
fontSize,
|
|
450
479
|
keyframes,
|
|
451
480
|
screens,
|
|
452
481
|
screensNumber,
|
|
453
|
-
shadows,
|
|
454
|
-
theme,
|
|
455
482
|
unocssTheme
|
|
456
483
|
});
|
package/dist/index.d.cts
CHANGED
|
@@ -3,6 +3,99 @@ import { Config } from 'tailwindcss';
|
|
|
3
3
|
|
|
4
4
|
declare const colorsNames: readonly ["primary", "bateau", "secondary", "pompelmo", "green", "fuchsia", "indigo", "neutral", "orange", "red", "amber", "seafoam"];
|
|
5
5
|
|
|
6
|
+
type ColorsNames = typeof colorsNames[number];
|
|
7
|
+
type ColorsVariations = 'DEFAULT' | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
|
|
8
|
+
interface MainColors {
|
|
9
|
+
black: string;
|
|
10
|
+
white: string;
|
|
11
|
+
inherit: 'inherit';
|
|
12
|
+
current: 'currentColor';
|
|
13
|
+
transparent: 'transparent';
|
|
14
|
+
}
|
|
15
|
+
interface DefaultColors {
|
|
16
|
+
danger: string;
|
|
17
|
+
warning: string;
|
|
18
|
+
success: string;
|
|
19
|
+
info: string;
|
|
20
|
+
special: string;
|
|
21
|
+
}
|
|
22
|
+
type Colors = DefaultColors & MainColors & Record<ColorsNames, {
|
|
23
|
+
[K in ColorsVariations]: string;
|
|
24
|
+
}>;
|
|
25
|
+
type ColorString = `${ColorsNames}-${ColorsVariations}` | keyof DefaultColors | keyof MainColors;
|
|
26
|
+
|
|
27
|
+
interface BuildThemeOptions {
|
|
28
|
+
colors?: boolean;
|
|
29
|
+
boxShadow?: boolean;
|
|
30
|
+
fontSize?: boolean;
|
|
31
|
+
fontFamily?: boolean;
|
|
32
|
+
animation?: boolean;
|
|
33
|
+
keyframes?: boolean;
|
|
34
|
+
screens?: boolean;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Converts the given string from camel-case to kebab-case.
|
|
39
|
+
* @template T The string to convert the case.
|
|
40
|
+
* @see https://gist.github.com/albertms10/09f14ef7ebdc3ce0e95683c728616253
|
|
41
|
+
* @example
|
|
42
|
+
* type Kebab = CamelToKebab<'exampleVarName'>;
|
|
43
|
+
* // 'example-var-name'
|
|
44
|
+
*/
|
|
45
|
+
type CamelToKebab<S extends string> = S extends `${infer T}${infer U}` ? U extends Uncapitalize<U> ? `${Uncapitalize<T>}${CamelToKebab<U>}` : `${Uncapitalize<T>}-${CamelToKebab<U>}` : '';
|
|
46
|
+
type CamelToKebabKeys<T> = {
|
|
47
|
+
[K in keyof T as K extends string ? CamelToKebab<K> : K]: T[K];
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* tailwindcss font-size configuration
|
|
52
|
+
* @see https://tailwindcss.com/docs/font-size
|
|
53
|
+
*
|
|
54
|
+
* @note For unocss, the keys are kebab-case
|
|
55
|
+
* @see https://github.com/unocss/unocss/issues/3663#issuecomment-2024909371
|
|
56
|
+
*/
|
|
57
|
+
|
|
58
|
+
interface FontSizeDetail {
|
|
59
|
+
lineHeight?: string;
|
|
60
|
+
letterSpacing?: string;
|
|
61
|
+
fontWeight?: number;
|
|
62
|
+
}
|
|
63
|
+
type FontValue = `${number}px` | `${number}rem`;
|
|
64
|
+
type FontAndLineHeight = [FontValue, FontValue];
|
|
65
|
+
type DetailFont = [
|
|
66
|
+
FontValue,
|
|
67
|
+
FontSizeDetail
|
|
68
|
+
];
|
|
69
|
+
type UnocssDetailFont = [FontValue, CamelToKebabKeys<FontSizeDetail>];
|
|
70
|
+
type FontSize = FontAndLineHeight | FontValue | DetailFont;
|
|
71
|
+
type UnocssFontSize = FontValue | FontAndLineHeight | UnocssDetailFont;
|
|
72
|
+
type SizeKeys = `${number}xs` | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | `${number}xl`;
|
|
73
|
+
type HeadingKeys = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
74
|
+
type DisplayKeys = 'display1' | 'display2' | 'display3' | 'display4';
|
|
75
|
+
type FontSizeKeys = SizeKeys | HeadingKeys | DisplayKeys;
|
|
76
|
+
declare function isDetailFont(value: FontSize): value is DetailFont;
|
|
77
|
+
type FontSizes = {
|
|
78
|
+
[K in FontSizeKeys]?: FontSize;
|
|
79
|
+
};
|
|
80
|
+
type UnocssFontSizes = {
|
|
81
|
+
[K in FontSizeKeys]?: UnocssFontSize;
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
declare const screenSizes: readonly ["sm", "md", "lg", "xl", "2xl", "tablet", "laptop", "desktop"];
|
|
85
|
+
type Screens = Record<typeof screenSizes[number], `${number}px`>;
|
|
86
|
+
type ExtractNumber<T extends string> = T extends `${infer N extends number}px` ? N : never;
|
|
87
|
+
type ScreensNumber = {
|
|
88
|
+
[K in keyof Screens]: ExtractNumber<Screens[K]>;
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
type BorderSize = 0 | `${number}px`;
|
|
92
|
+
type RgbValue = number;
|
|
93
|
+
type Shadow = `${BorderSize} ${BorderSize} ${BorderSize} ${BorderSize} rgba(${RgbValue}, ${RgbValue}, ${RgbValue}, ${RgbValue})`;
|
|
94
|
+
type ShadowSize = 0 | 1 | 2 | 3 | 4 | 5;
|
|
95
|
+
type Shadows = {
|
|
96
|
+
[K in ShadowSize as `elevation-${K}`]?: Shadow;
|
|
97
|
+
};
|
|
98
|
+
|
|
6
99
|
declare const animation: {
|
|
7
100
|
'radix-accordion-down': string;
|
|
8
101
|
'radix-accordion-up': string;
|
|
@@ -265,54 +358,7 @@ declare const customFontFamily: {
|
|
|
265
358
|
sans: string[];
|
|
266
359
|
};
|
|
267
360
|
|
|
268
|
-
|
|
269
|
-
* Converts the given string from camel-case to kebab-case.
|
|
270
|
-
* @template T The string to convert the case.
|
|
271
|
-
* @see https://gist.github.com/albertms10/09f14ef7ebdc3ce0e95683c728616253
|
|
272
|
-
* @example
|
|
273
|
-
* type Kebab = CamelToKebab<'exampleVarName'>;
|
|
274
|
-
* // 'example-var-name'
|
|
275
|
-
*/
|
|
276
|
-
type CamelToKebab<S extends string> = S extends `${infer T}${infer U}` ? U extends Uncapitalize<U> ? `${Uncapitalize<T>}${CamelToKebab<U>}` : `${Uncapitalize<T>}-${CamelToKebab<U>}` : '';
|
|
277
|
-
type CamelToKebabKeys<T> = {
|
|
278
|
-
[K in keyof T as K extends string ? CamelToKebab<K> : K]: T[K];
|
|
279
|
-
};
|
|
280
|
-
|
|
281
|
-
/**
|
|
282
|
-
* tailwindcss font-size configuration
|
|
283
|
-
* @see https://tailwindcss.com/docs/font-size
|
|
284
|
-
*
|
|
285
|
-
* @note For unocss, the keys are kebab-case
|
|
286
|
-
* @see https://github.com/unocss/unocss/issues/3663#issuecomment-2024909371
|
|
287
|
-
*/
|
|
288
|
-
|
|
289
|
-
interface FontSizeDetail {
|
|
290
|
-
lineHeight?: string;
|
|
291
|
-
letterSpacing?: string;
|
|
292
|
-
fontWeight?: number;
|
|
293
|
-
}
|
|
294
|
-
type FontValue = `${number}px` | `${number}rem`;
|
|
295
|
-
type FontAndLineHeight = [FontValue, FontValue];
|
|
296
|
-
type DetailFont = [
|
|
297
|
-
FontValue,
|
|
298
|
-
FontSizeDetail
|
|
299
|
-
];
|
|
300
|
-
type UnocssDetailFont = [FontValue, CamelToKebabKeys<FontSizeDetail>];
|
|
301
|
-
type FontSize = FontAndLineHeight | FontValue | DetailFont;
|
|
302
|
-
type UnocssFontSize = FontValue | FontAndLineHeight | UnocssDetailFont;
|
|
303
|
-
type SizeKeys = `${number}xs` | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | `${number}xl`;
|
|
304
|
-
type HeadingKeys = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
305
|
-
type DisplayKeys = 'display1' | 'display2' | 'display3' | 'display4';
|
|
306
|
-
type FontSizeKeys = SizeKeys | HeadingKeys | DisplayKeys;
|
|
307
|
-
declare function isDetailFont(value: FontSize): value is DetailFont;
|
|
308
|
-
type FontSizes = {
|
|
309
|
-
[K in FontSizeKeys]?: FontSize;
|
|
310
|
-
};
|
|
311
|
-
type UnocssFontSizes = {
|
|
312
|
-
[K in FontSizeKeys]?: UnocssFontSize;
|
|
313
|
-
};
|
|
314
|
-
|
|
315
|
-
declare const fontSizes: {
|
|
361
|
+
declare const fontSize: {
|
|
316
362
|
'2xs': ["0.6875rem", "1rem"];
|
|
317
363
|
xs: ["0.75rem", "1rem"];
|
|
318
364
|
sm: ["0.875rem", "1.25rem"];
|
|
@@ -387,7 +433,7 @@ declare const screens: {
|
|
|
387
433
|
desktop: `${number}px`;
|
|
388
434
|
};
|
|
389
435
|
|
|
390
|
-
declare const
|
|
436
|
+
declare const boxShadow: {
|
|
391
437
|
'elevation-0': "0 0 0 0 rgba(0, 0, 0, 0.10)";
|
|
392
438
|
'elevation-1': "0 1px 2px 0 rgba(0, 0, 0, 0.10)";
|
|
393
439
|
'elevation-2': "0 4px 8px 0 rgba(0, 0, 0, 0.10)";
|
|
@@ -396,7 +442,8 @@ declare const shadows: {
|
|
|
396
442
|
'elevation-5': "0 12px 24px 0 rgba(0, 0, 0, 0.10)";
|
|
397
443
|
};
|
|
398
444
|
|
|
399
|
-
declare
|
|
445
|
+
declare function buildTheme(options?: BuildThemeOptions): Config['theme'];
|
|
446
|
+
declare const defaultTheme: Config['theme'];
|
|
400
447
|
declare const unocssTheme: {
|
|
401
448
|
colors: {
|
|
402
449
|
primary: {
|
|
@@ -589,43 +636,7 @@ declare const unocssTheme: {
|
|
|
589
636
|
fontSize: UnocssFontSizes;
|
|
590
637
|
};
|
|
591
638
|
|
|
592
|
-
|
|
593
|
-
type ColorsVariations = 'DEFAULT' | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
|
|
594
|
-
interface MainColors {
|
|
595
|
-
black: string;
|
|
596
|
-
white: string;
|
|
597
|
-
inherit: 'inherit';
|
|
598
|
-
current: 'currentColor';
|
|
599
|
-
transparent: 'transparent';
|
|
600
|
-
}
|
|
601
|
-
interface DefaultColors {
|
|
602
|
-
danger: string;
|
|
603
|
-
warning: string;
|
|
604
|
-
success: string;
|
|
605
|
-
info: string;
|
|
606
|
-
special: string;
|
|
607
|
-
}
|
|
608
|
-
type Colors = DefaultColors & MainColors & Record<ColorsNames, {
|
|
609
|
-
[K in ColorsVariations]: string;
|
|
610
|
-
}>;
|
|
611
|
-
type ColorString = `${ColorsNames}-${ColorsVariations}` | keyof DefaultColors | keyof MainColors;
|
|
612
|
-
|
|
613
|
-
declare const screenSizes: readonly ["sm", "md", "lg", "xl", "2xl", "tablet", "laptop", "desktop"];
|
|
614
|
-
type Screens = Record<typeof screenSizes[number], `${number}px`>;
|
|
615
|
-
type ExtractNumber<T extends string> = T extends `${infer N extends number}px` ? N : never;
|
|
616
|
-
type ScreensNumber = {
|
|
617
|
-
[K in keyof Screens]: ExtractNumber<Screens[K]>;
|
|
618
|
-
};
|
|
619
|
-
|
|
620
|
-
type BorderSize = 0 | `${number}px`;
|
|
621
|
-
type RgbValue = number;
|
|
622
|
-
type Shadow = `${BorderSize} ${BorderSize} ${BorderSize} ${BorderSize} rgba(${RgbValue}, ${RgbValue}, ${RgbValue}, ${RgbValue})`;
|
|
623
|
-
type ShadowSize = 0 | 1 | 2 | 3 | 4 | 5;
|
|
624
|
-
type Shadows = {
|
|
625
|
-
[K in ShadowSize as `elevation-${K}`]?: Shadow;
|
|
626
|
-
};
|
|
627
|
-
|
|
628
|
-
declare function config(extend?: boolean): Partial<Config>;
|
|
639
|
+
declare function buildPreset(extend?: boolean, buildOptions?: BuildThemeOptions): Partial<Config>;
|
|
629
640
|
declare const _default: Partial<tailwindcss_types_config.Config>;
|
|
630
641
|
|
|
631
|
-
export { type ColorString, type Colors, type ColorsNames, type FontSizes, type Screens, type ScreensNumber, type Shadows, type UnocssFontSizes, animation, colors, colorsNames,
|
|
642
|
+
export { type BuildThemeOptions, type ColorString, type Colors, type ColorsNames, type FontSizes, type Screens, type ScreensNumber, type Shadows, type UnocssFontSizes, animation, boxShadow, buildPreset, buildTheme, colors, colorsNames, _default as default, defaultTheme, customFontFamily as fontFamily, fontSize, isDetailFont, keyframes, screenSizes, screens, screensNumber, unocssTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,99 @@ import { Config } from 'tailwindcss';
|
|
|
3
3
|
|
|
4
4
|
declare const colorsNames: readonly ["primary", "bateau", "secondary", "pompelmo", "green", "fuchsia", "indigo", "neutral", "orange", "red", "amber", "seafoam"];
|
|
5
5
|
|
|
6
|
+
type ColorsNames = typeof colorsNames[number];
|
|
7
|
+
type ColorsVariations = 'DEFAULT' | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
|
|
8
|
+
interface MainColors {
|
|
9
|
+
black: string;
|
|
10
|
+
white: string;
|
|
11
|
+
inherit: 'inherit';
|
|
12
|
+
current: 'currentColor';
|
|
13
|
+
transparent: 'transparent';
|
|
14
|
+
}
|
|
15
|
+
interface DefaultColors {
|
|
16
|
+
danger: string;
|
|
17
|
+
warning: string;
|
|
18
|
+
success: string;
|
|
19
|
+
info: string;
|
|
20
|
+
special: string;
|
|
21
|
+
}
|
|
22
|
+
type Colors = DefaultColors & MainColors & Record<ColorsNames, {
|
|
23
|
+
[K in ColorsVariations]: string;
|
|
24
|
+
}>;
|
|
25
|
+
type ColorString = `${ColorsNames}-${ColorsVariations}` | keyof DefaultColors | keyof MainColors;
|
|
26
|
+
|
|
27
|
+
interface BuildThemeOptions {
|
|
28
|
+
colors?: boolean;
|
|
29
|
+
boxShadow?: boolean;
|
|
30
|
+
fontSize?: boolean;
|
|
31
|
+
fontFamily?: boolean;
|
|
32
|
+
animation?: boolean;
|
|
33
|
+
keyframes?: boolean;
|
|
34
|
+
screens?: boolean;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Converts the given string from camel-case to kebab-case.
|
|
39
|
+
* @template T The string to convert the case.
|
|
40
|
+
* @see https://gist.github.com/albertms10/09f14ef7ebdc3ce0e95683c728616253
|
|
41
|
+
* @example
|
|
42
|
+
* type Kebab = CamelToKebab<'exampleVarName'>;
|
|
43
|
+
* // 'example-var-name'
|
|
44
|
+
*/
|
|
45
|
+
type CamelToKebab<S extends string> = S extends `${infer T}${infer U}` ? U extends Uncapitalize<U> ? `${Uncapitalize<T>}${CamelToKebab<U>}` : `${Uncapitalize<T>}-${CamelToKebab<U>}` : '';
|
|
46
|
+
type CamelToKebabKeys<T> = {
|
|
47
|
+
[K in keyof T as K extends string ? CamelToKebab<K> : K]: T[K];
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* tailwindcss font-size configuration
|
|
52
|
+
* @see https://tailwindcss.com/docs/font-size
|
|
53
|
+
*
|
|
54
|
+
* @note For unocss, the keys are kebab-case
|
|
55
|
+
* @see https://github.com/unocss/unocss/issues/3663#issuecomment-2024909371
|
|
56
|
+
*/
|
|
57
|
+
|
|
58
|
+
interface FontSizeDetail {
|
|
59
|
+
lineHeight?: string;
|
|
60
|
+
letterSpacing?: string;
|
|
61
|
+
fontWeight?: number;
|
|
62
|
+
}
|
|
63
|
+
type FontValue = `${number}px` | `${number}rem`;
|
|
64
|
+
type FontAndLineHeight = [FontValue, FontValue];
|
|
65
|
+
type DetailFont = [
|
|
66
|
+
FontValue,
|
|
67
|
+
FontSizeDetail
|
|
68
|
+
];
|
|
69
|
+
type UnocssDetailFont = [FontValue, CamelToKebabKeys<FontSizeDetail>];
|
|
70
|
+
type FontSize = FontAndLineHeight | FontValue | DetailFont;
|
|
71
|
+
type UnocssFontSize = FontValue | FontAndLineHeight | UnocssDetailFont;
|
|
72
|
+
type SizeKeys = `${number}xs` | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | `${number}xl`;
|
|
73
|
+
type HeadingKeys = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
74
|
+
type DisplayKeys = 'display1' | 'display2' | 'display3' | 'display4';
|
|
75
|
+
type FontSizeKeys = SizeKeys | HeadingKeys | DisplayKeys;
|
|
76
|
+
declare function isDetailFont(value: FontSize): value is DetailFont;
|
|
77
|
+
type FontSizes = {
|
|
78
|
+
[K in FontSizeKeys]?: FontSize;
|
|
79
|
+
};
|
|
80
|
+
type UnocssFontSizes = {
|
|
81
|
+
[K in FontSizeKeys]?: UnocssFontSize;
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
declare const screenSizes: readonly ["sm", "md", "lg", "xl", "2xl", "tablet", "laptop", "desktop"];
|
|
85
|
+
type Screens = Record<typeof screenSizes[number], `${number}px`>;
|
|
86
|
+
type ExtractNumber<T extends string> = T extends `${infer N extends number}px` ? N : never;
|
|
87
|
+
type ScreensNumber = {
|
|
88
|
+
[K in keyof Screens]: ExtractNumber<Screens[K]>;
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
type BorderSize = 0 | `${number}px`;
|
|
92
|
+
type RgbValue = number;
|
|
93
|
+
type Shadow = `${BorderSize} ${BorderSize} ${BorderSize} ${BorderSize} rgba(${RgbValue}, ${RgbValue}, ${RgbValue}, ${RgbValue})`;
|
|
94
|
+
type ShadowSize = 0 | 1 | 2 | 3 | 4 | 5;
|
|
95
|
+
type Shadows = {
|
|
96
|
+
[K in ShadowSize as `elevation-${K}`]?: Shadow;
|
|
97
|
+
};
|
|
98
|
+
|
|
6
99
|
declare const animation: {
|
|
7
100
|
'radix-accordion-down': string;
|
|
8
101
|
'radix-accordion-up': string;
|
|
@@ -265,54 +358,7 @@ declare const customFontFamily: {
|
|
|
265
358
|
sans: string[];
|
|
266
359
|
};
|
|
267
360
|
|
|
268
|
-
|
|
269
|
-
* Converts the given string from camel-case to kebab-case.
|
|
270
|
-
* @template T The string to convert the case.
|
|
271
|
-
* @see https://gist.github.com/albertms10/09f14ef7ebdc3ce0e95683c728616253
|
|
272
|
-
* @example
|
|
273
|
-
* type Kebab = CamelToKebab<'exampleVarName'>;
|
|
274
|
-
* // 'example-var-name'
|
|
275
|
-
*/
|
|
276
|
-
type CamelToKebab<S extends string> = S extends `${infer T}${infer U}` ? U extends Uncapitalize<U> ? `${Uncapitalize<T>}${CamelToKebab<U>}` : `${Uncapitalize<T>}-${CamelToKebab<U>}` : '';
|
|
277
|
-
type CamelToKebabKeys<T> = {
|
|
278
|
-
[K in keyof T as K extends string ? CamelToKebab<K> : K]: T[K];
|
|
279
|
-
};
|
|
280
|
-
|
|
281
|
-
/**
|
|
282
|
-
* tailwindcss font-size configuration
|
|
283
|
-
* @see https://tailwindcss.com/docs/font-size
|
|
284
|
-
*
|
|
285
|
-
* @note For unocss, the keys are kebab-case
|
|
286
|
-
* @see https://github.com/unocss/unocss/issues/3663#issuecomment-2024909371
|
|
287
|
-
*/
|
|
288
|
-
|
|
289
|
-
interface FontSizeDetail {
|
|
290
|
-
lineHeight?: string;
|
|
291
|
-
letterSpacing?: string;
|
|
292
|
-
fontWeight?: number;
|
|
293
|
-
}
|
|
294
|
-
type FontValue = `${number}px` | `${number}rem`;
|
|
295
|
-
type FontAndLineHeight = [FontValue, FontValue];
|
|
296
|
-
type DetailFont = [
|
|
297
|
-
FontValue,
|
|
298
|
-
FontSizeDetail
|
|
299
|
-
];
|
|
300
|
-
type UnocssDetailFont = [FontValue, CamelToKebabKeys<FontSizeDetail>];
|
|
301
|
-
type FontSize = FontAndLineHeight | FontValue | DetailFont;
|
|
302
|
-
type UnocssFontSize = FontValue | FontAndLineHeight | UnocssDetailFont;
|
|
303
|
-
type SizeKeys = `${number}xs` | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | `${number}xl`;
|
|
304
|
-
type HeadingKeys = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
305
|
-
type DisplayKeys = 'display1' | 'display2' | 'display3' | 'display4';
|
|
306
|
-
type FontSizeKeys = SizeKeys | HeadingKeys | DisplayKeys;
|
|
307
|
-
declare function isDetailFont(value: FontSize): value is DetailFont;
|
|
308
|
-
type FontSizes = {
|
|
309
|
-
[K in FontSizeKeys]?: FontSize;
|
|
310
|
-
};
|
|
311
|
-
type UnocssFontSizes = {
|
|
312
|
-
[K in FontSizeKeys]?: UnocssFontSize;
|
|
313
|
-
};
|
|
314
|
-
|
|
315
|
-
declare const fontSizes: {
|
|
361
|
+
declare const fontSize: {
|
|
316
362
|
'2xs': ["0.6875rem", "1rem"];
|
|
317
363
|
xs: ["0.75rem", "1rem"];
|
|
318
364
|
sm: ["0.875rem", "1.25rem"];
|
|
@@ -387,7 +433,7 @@ declare const screens: {
|
|
|
387
433
|
desktop: `${number}px`;
|
|
388
434
|
};
|
|
389
435
|
|
|
390
|
-
declare const
|
|
436
|
+
declare const boxShadow: {
|
|
391
437
|
'elevation-0': "0 0 0 0 rgba(0, 0, 0, 0.10)";
|
|
392
438
|
'elevation-1': "0 1px 2px 0 rgba(0, 0, 0, 0.10)";
|
|
393
439
|
'elevation-2': "0 4px 8px 0 rgba(0, 0, 0, 0.10)";
|
|
@@ -396,7 +442,8 @@ declare const shadows: {
|
|
|
396
442
|
'elevation-5': "0 12px 24px 0 rgba(0, 0, 0, 0.10)";
|
|
397
443
|
};
|
|
398
444
|
|
|
399
|
-
declare
|
|
445
|
+
declare function buildTheme(options?: BuildThemeOptions): Config['theme'];
|
|
446
|
+
declare const defaultTheme: Config['theme'];
|
|
400
447
|
declare const unocssTheme: {
|
|
401
448
|
colors: {
|
|
402
449
|
primary: {
|
|
@@ -589,43 +636,7 @@ declare const unocssTheme: {
|
|
|
589
636
|
fontSize: UnocssFontSizes;
|
|
590
637
|
};
|
|
591
638
|
|
|
592
|
-
|
|
593
|
-
type ColorsVariations = 'DEFAULT' | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
|
|
594
|
-
interface MainColors {
|
|
595
|
-
black: string;
|
|
596
|
-
white: string;
|
|
597
|
-
inherit: 'inherit';
|
|
598
|
-
current: 'currentColor';
|
|
599
|
-
transparent: 'transparent';
|
|
600
|
-
}
|
|
601
|
-
interface DefaultColors {
|
|
602
|
-
danger: string;
|
|
603
|
-
warning: string;
|
|
604
|
-
success: string;
|
|
605
|
-
info: string;
|
|
606
|
-
special: string;
|
|
607
|
-
}
|
|
608
|
-
type Colors = DefaultColors & MainColors & Record<ColorsNames, {
|
|
609
|
-
[K in ColorsVariations]: string;
|
|
610
|
-
}>;
|
|
611
|
-
type ColorString = `${ColorsNames}-${ColorsVariations}` | keyof DefaultColors | keyof MainColors;
|
|
612
|
-
|
|
613
|
-
declare const screenSizes: readonly ["sm", "md", "lg", "xl", "2xl", "tablet", "laptop", "desktop"];
|
|
614
|
-
type Screens = Record<typeof screenSizes[number], `${number}px`>;
|
|
615
|
-
type ExtractNumber<T extends string> = T extends `${infer N extends number}px` ? N : never;
|
|
616
|
-
type ScreensNumber = {
|
|
617
|
-
[K in keyof Screens]: ExtractNumber<Screens[K]>;
|
|
618
|
-
};
|
|
619
|
-
|
|
620
|
-
type BorderSize = 0 | `${number}px`;
|
|
621
|
-
type RgbValue = number;
|
|
622
|
-
type Shadow = `${BorderSize} ${BorderSize} ${BorderSize} ${BorderSize} rgba(${RgbValue}, ${RgbValue}, ${RgbValue}, ${RgbValue})`;
|
|
623
|
-
type ShadowSize = 0 | 1 | 2 | 3 | 4 | 5;
|
|
624
|
-
type Shadows = {
|
|
625
|
-
[K in ShadowSize as `elevation-${K}`]?: Shadow;
|
|
626
|
-
};
|
|
627
|
-
|
|
628
|
-
declare function config(extend?: boolean): Partial<Config>;
|
|
639
|
+
declare function buildPreset(extend?: boolean, buildOptions?: BuildThemeOptions): Partial<Config>;
|
|
629
640
|
declare const _default: Partial<tailwindcss_types_config.Config>;
|
|
630
641
|
|
|
631
|
-
export { type ColorString, type Colors, type ColorsNames, type FontSizes, type Screens, type ScreensNumber, type Shadows, type UnocssFontSizes, animation, colors, colorsNames,
|
|
642
|
+
export { type BuildThemeOptions, type ColorString, type Colors, type ColorsNames, type FontSizes, type Screens, type ScreensNumber, type Shadows, type UnocssFontSizes, animation, boxShadow, buildPreset, buildTheme, colors, colorsNames, _default as default, defaultTheme, customFontFamily as fontFamily, fontSize, isDetailFont, keyframes, screenSizes, screens, screensNumber, unocssTheme };
|
package/dist/index.js
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import {
|
|
2
2
|
animation,
|
|
3
|
+
boxShadow,
|
|
4
|
+
buildTheme,
|
|
3
5
|
colors,
|
|
4
6
|
customFontFamily,
|
|
5
|
-
|
|
7
|
+
defaultTheme,
|
|
8
|
+
fontSize,
|
|
6
9
|
keyframes,
|
|
7
10
|
screens,
|
|
8
11
|
screensNumber,
|
|
9
|
-
shadows,
|
|
10
|
-
theme,
|
|
11
12
|
unocssTheme
|
|
12
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-QZWKJNXG.js";
|
|
13
14
|
|
|
14
15
|
// src/plugins/index.ts
|
|
15
16
|
import animation2 from "tailwindcss-animate";
|
|
@@ -32,33 +33,34 @@ var colorsNames = [
|
|
|
32
33
|
];
|
|
33
34
|
|
|
34
35
|
// src/index.ts
|
|
35
|
-
function
|
|
36
|
+
function buildPreset(extend = true, buildOptions = {}) {
|
|
36
37
|
if (extend === false) {
|
|
37
38
|
return {
|
|
38
|
-
theme,
|
|
39
|
+
theme: buildTheme(buildOptions),
|
|
39
40
|
plugins
|
|
40
41
|
};
|
|
41
42
|
}
|
|
42
43
|
return {
|
|
43
44
|
theme: {
|
|
44
|
-
extend:
|
|
45
|
+
extend: buildTheme(buildOptions)
|
|
45
46
|
},
|
|
46
47
|
plugins
|
|
47
48
|
};
|
|
48
49
|
}
|
|
49
|
-
var src_default =
|
|
50
|
+
var src_default = buildPreset();
|
|
50
51
|
export {
|
|
51
52
|
animation,
|
|
53
|
+
boxShadow,
|
|
54
|
+
buildPreset,
|
|
55
|
+
buildTheme,
|
|
52
56
|
colors,
|
|
53
57
|
colorsNames,
|
|
54
|
-
config,
|
|
55
58
|
src_default as default,
|
|
59
|
+
defaultTheme,
|
|
56
60
|
customFontFamily as fontFamily,
|
|
57
|
-
|
|
61
|
+
fontSize,
|
|
58
62
|
keyframes,
|
|
59
63
|
screens,
|
|
60
64
|
screensNumber,
|
|
61
|
-
shadows,
|
|
62
|
-
theme,
|
|
63
65
|
unocssTheme
|
|
64
66
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@removify/tailwind-preset",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.2.0",
|
|
5
5
|
"description": "Tailwind CSS preset for Removify",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"tailwind"
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@commitlint/cli": "^19.5.0",
|
|
35
35
|
"@commitlint/config-conventional": "^19.5.0",
|
|
36
|
-
"@removify/eslint-config": "^1.5.
|
|
37
|
-
"@types/node": "^22.5.
|
|
36
|
+
"@removify/eslint-config": "^1.5.7",
|
|
37
|
+
"@types/node": "^22.5.5",
|
|
38
38
|
"@types/yargs": "^17.0.33",
|
|
39
39
|
"bumpp": "^9.5.2",
|
|
40
40
|
"eslint": "^9.10.0",
|
|
@@ -42,12 +42,12 @@
|
|
|
42
42
|
"lint-staged": "^15.2.10",
|
|
43
43
|
"rimraf": "^6.0.1",
|
|
44
44
|
"tailwind-config-viewer": "^2.0.4",
|
|
45
|
-
"tailwindcss": "^3.4.
|
|
46
|
-
"tsup": "^8.
|
|
47
|
-
"tsx": "^4.19.
|
|
45
|
+
"tailwindcss": "^3.4.12",
|
|
46
|
+
"tsup": "^8.3.0",
|
|
47
|
+
"tsx": "^4.19.1",
|
|
48
48
|
"typescript": "^5.6.2",
|
|
49
|
-
"vitest": "^2.
|
|
50
|
-
"@removify/tailwind-preset": "0.
|
|
49
|
+
"vitest": "^2.1.1",
|
|
50
|
+
"@removify/tailwind-preset": "0.2.0"
|
|
51
51
|
},
|
|
52
52
|
"lint-staged": {
|
|
53
53
|
"**/*.{js,ts,vue,html}": [
|
package/readme.md
CHANGED
|
@@ -21,11 +21,11 @@ npx @removify/tailwind-preset > src/style.css
|
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
```ts
|
|
24
|
+
import type { Config } from 'tailwindcss';
|
|
25
|
+
|
|
24
26
|
// tailwind.config.{t,j}s
|
|
25
27
|
import removify from '@removify/tailwind-preset';
|
|
26
28
|
|
|
27
|
-
import type { Config } from 'tailwindcss';
|
|
28
|
-
|
|
29
29
|
export default {
|
|
30
30
|
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
|
31
31
|
presets: [removify],
|