@mevbg/design-essentials-vendor 2.0.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.
Files changed (143) hide show
  1. package/README.md +2340 -0
  2. package/dist/defaults.d.ts +8 -0
  3. package/dist/defaults.js +137 -0
  4. package/dist/defaults.js.map +1 -0
  5. package/dist/generators/favicons/favicons.generator.d.ts +4 -0
  6. package/dist/generators/favicons/favicons.generator.js +58 -0
  7. package/dist/generators/favicons/favicons.generator.js.map +1 -0
  8. package/dist/generators/favicons/favicons.types.d.ts +7 -0
  9. package/dist/generators/favicons/favicons.types.js +5 -0
  10. package/dist/generators/favicons/favicons.types.js.map +1 -0
  11. package/dist/generators/font-faces/font-faces.generator.d.ts +2 -0
  12. package/dist/generators/font-faces/font-faces.generator.js +123 -0
  13. package/dist/generators/font-faces/font-faces.generator.js.map +1 -0
  14. package/dist/generators/font-faces/font-faces.types.d.ts +11 -0
  15. package/dist/generators/font-faces/font-faces.types.js +5 -0
  16. package/dist/generators/font-faces/font-faces.types.js.map +1 -0
  17. package/dist/generators/icons/icons.generator.d.ts +2 -0
  18. package/dist/generators/icons/icons.generator.js +47 -0
  19. package/dist/generators/icons/icons.generator.js.map +1 -0
  20. package/dist/generators/icons/icons.types.d.ts +6 -0
  21. package/dist/generators/icons/icons.types.js +5 -0
  22. package/dist/generators/icons/icons.types.js.map +1 -0
  23. package/dist/generators/index.d.ts +7 -0
  24. package/dist/generators/index.js +13 -0
  25. package/dist/generators/index.js.map +1 -0
  26. package/dist/generators/master/master.generator.d.ts +3 -0
  27. package/dist/generators/master/master.generator.js +73 -0
  28. package/dist/generators/master/master.generator.js.map +1 -0
  29. package/dist/generators/master/master.types.d.ts +14 -0
  30. package/dist/generators/master/master.types.js +5 -0
  31. package/dist/generators/master/master.types.js.map +1 -0
  32. package/dist/generators/scrollbar/scrollbar.generator.d.ts +2 -0
  33. package/dist/generators/scrollbar/scrollbar.generator.js +109 -0
  34. package/dist/generators/scrollbar/scrollbar.generator.js.map +1 -0
  35. package/dist/generators/scrollbar/scrollbar.types.d.ts +11 -0
  36. package/dist/generators/scrollbar/scrollbar.types.js +5 -0
  37. package/dist/generators/scrollbar/scrollbar.types.js.map +1 -0
  38. package/dist/generators/tokens/handlers/basic.handler.d.ts +2 -0
  39. package/dist/generators/tokens/handlers/basic.handler.js +57 -0
  40. package/dist/generators/tokens/handlers/basic.handler.js.map +1 -0
  41. package/dist/generators/tokens/handlers/color.handler.d.ts +2 -0
  42. package/dist/generators/tokens/handlers/color.handler.js +117 -0
  43. package/dist/generators/tokens/handlers/color.handler.js.map +1 -0
  44. package/dist/generators/tokens/handlers/index.d.ts +3 -0
  45. package/dist/generators/tokens/handlers/index.js +7 -0
  46. package/dist/generators/tokens/handlers/index.js.map +1 -0
  47. package/dist/generators/tokens/handlers/utopia.handler.d.ts +2 -0
  48. package/dist/generators/tokens/handlers/utopia.handler.js +79 -0
  49. package/dist/generators/tokens/handlers/utopia.handler.js.map +1 -0
  50. package/dist/generators/tokens/platforms/css/formats.d.ts +2 -0
  51. package/dist/generators/tokens/platforms/css/formats.js +20 -0
  52. package/dist/generators/tokens/platforms/css/formats.js.map +1 -0
  53. package/dist/generators/tokens/platforms/css/index.d.ts +2 -0
  54. package/dist/generators/tokens/platforms/css/index.js +20 -0
  55. package/dist/generators/tokens/platforms/css/index.js.map +1 -0
  56. package/dist/generators/tokens/platforms/css/utils.d.ts +3 -0
  57. package/dist/generators/tokens/platforms/css/utils.js +12 -0
  58. package/dist/generators/tokens/platforms/css/utils.js.map +1 -0
  59. package/dist/generators/tokens/platforms/formats.d.ts +3 -0
  60. package/dist/generators/tokens/platforms/formats.js +7 -0
  61. package/dist/generators/tokens/platforms/formats.js.map +1 -0
  62. package/dist/generators/tokens/platforms/index.d.ts +8 -0
  63. package/dist/generators/tokens/platforms/index.js +83 -0
  64. package/dist/generators/tokens/platforms/index.js.map +1 -0
  65. package/dist/generators/tokens/platforms/js/formats.d.ts +2 -0
  66. package/dist/generators/tokens/platforms/js/formats.js +15 -0
  67. package/dist/generators/tokens/platforms/js/formats.js.map +1 -0
  68. package/dist/generators/tokens/platforms/js/index.d.ts +2 -0
  69. package/dist/generators/tokens/platforms/js/index.js +18 -0
  70. package/dist/generators/tokens/platforms/js/index.js.map +1 -0
  71. package/dist/generators/tokens/platforms/js/utils.d.ts +3 -0
  72. package/dist/generators/tokens/platforms/js/utils.js +20 -0
  73. package/dist/generators/tokens/platforms/js/utils.js.map +1 -0
  74. package/dist/generators/tokens/platforms/json/index.d.ts +2 -0
  75. package/dist/generators/tokens/platforms/json/index.js +24 -0
  76. package/dist/generators/tokens/platforms/json/index.js.map +1 -0
  77. package/dist/generators/tokens/platforms/scss/formats.d.ts +2 -0
  78. package/dist/generators/tokens/platforms/scss/formats.js +15 -0
  79. package/dist/generators/tokens/platforms/scss/formats.js.map +1 -0
  80. package/dist/generators/tokens/platforms/scss/index.d.ts +2 -0
  81. package/dist/generators/tokens/platforms/scss/index.js +15 -0
  82. package/dist/generators/tokens/platforms/scss/index.js.map +1 -0
  83. package/dist/generators/tokens/platforms/scss/utils.d.ts +3 -0
  84. package/dist/generators/tokens/platforms/scss/utils.js +15 -0
  85. package/dist/generators/tokens/platforms/scss/utils.js.map +1 -0
  86. package/dist/generators/tokens/tokens.generator.d.ts +3 -0
  87. package/dist/generators/tokens/tokens.generator.js +52 -0
  88. package/dist/generators/tokens/tokens.generator.js.map +1 -0
  89. package/dist/generators/tokens/tokens.types.d.ts +17 -0
  90. package/dist/generators/tokens/tokens.types.js +12 -0
  91. package/dist/generators/tokens/tokens.types.js.map +1 -0
  92. package/dist/generators/tokens/types/color-scheme.types.d.ts +13 -0
  93. package/dist/generators/tokens/types/color-scheme.types.js +29 -0
  94. package/dist/generators/tokens/types/color-scheme.types.js.map +1 -0
  95. package/dist/generators/tokens/types/format.types.d.ts +52 -0
  96. package/dist/generators/tokens/types/format.types.js +35 -0
  97. package/dist/generators/tokens/types/format.types.js.map +1 -0
  98. package/dist/generators/tokens/types/platform.types.d.ts +33 -0
  99. package/dist/generators/tokens/types/platform.types.js +36 -0
  100. package/dist/generators/tokens/types/platform.types.js.map +1 -0
  101. package/dist/generators/tokens/types/tokens.types.d.ts +27 -0
  102. package/dist/generators/tokens/types/tokens.types.js +41 -0
  103. package/dist/generators/tokens/types/tokens.types.js.map +1 -0
  104. package/dist/generators/tokens/types/utopia-scheme.types.d.ts +4 -0
  105. package/dist/generators/tokens/types/utopia-scheme.types.js +5 -0
  106. package/dist/generators/tokens/types/utopia-scheme.types.js.map +1 -0
  107. package/dist/generators/tokens/utils/color-tokens.utils.d.ts +8 -0
  108. package/dist/generators/tokens/utils/color-tokens.utils.js +24 -0
  109. package/dist/generators/tokens/utils/color-tokens.utils.js.map +1 -0
  110. package/dist/generators/tokens/utils/formats.utils.d.ts +17 -0
  111. package/dist/generators/tokens/utils/formats.utils.js +164 -0
  112. package/dist/generators/tokens/utils/formats.utils.js.map +1 -0
  113. package/dist/generators/tokens/utils/utopia-tokens.utils.d.ts +10 -0
  114. package/dist/generators/tokens/utils/utopia-tokens.utils.js +56 -0
  115. package/dist/generators/tokens/utils/utopia-tokens.utils.js.map +1 -0
  116. package/dist/generators/viewport-scaler/viewport-scaler.generator.d.ts +2 -0
  117. package/dist/generators/viewport-scaler/viewport-scaler.generator.js +56 -0
  118. package/dist/generators/viewport-scaler/viewport-scaler.generator.js.map +1 -0
  119. package/dist/generators/viewport-scaler/viewport-scaler.types.d.ts +7 -0
  120. package/dist/generators/viewport-scaler/viewport-scaler.types.js +5 -0
  121. package/dist/generators/viewport-scaler/viewport-scaler.types.js.map +1 -0
  122. package/dist/index.d.ts +2 -0
  123. package/dist/index.js +11 -0
  124. package/dist/index.js.map +1 -0
  125. package/dist/types/generator.types.d.ts +2 -0
  126. package/dist/types/generator.types.js +5 -0
  127. package/dist/types/generator.types.js.map +1 -0
  128. package/dist/types/index.d.ts +8 -0
  129. package/dist/types/index.js +12 -0
  130. package/dist/types/index.js.map +1 -0
  131. package/dist/types/utils.types.d.ts +2 -0
  132. package/dist/types/utils.types.js +5 -0
  133. package/dist/types/utils.types.js.map +1 -0
  134. package/dist/utils/formats.utils.d.ts +14 -0
  135. package/dist/utils/formats.utils.js +24 -0
  136. package/dist/utils/formats.utils.js.map +1 -0
  137. package/dist/utils/generators.utils.d.ts +2 -0
  138. package/dist/utils/generators.utils.js +39 -0
  139. package/dist/utils/generators.utils.js.map +1 -0
  140. package/dist/utils/strings.utils.d.ts +5 -0
  141. package/dist/utils/strings.utils.js +46 -0
  142. package/dist/utils/strings.utils.js.map +1 -0
  143. package/package.json +91 -0
@@ -0,0 +1,27 @@
1
+ import type { Kebab } from '../../../types/utils.types.js';
2
+ import type { ColorSchemeParams, UtopiaSchemeParams } from '../tokens.types.js';
3
+ export declare enum CoreToken {
4
+ FONT_FAMILY = "fontFamily",
5
+ FONT_SIZE = "fontSize",
6
+ FONT_WEIGHT = "fontWeight",
7
+ LETTER_SPACING = "letterSpacing",
8
+ LINE_HEIGHT = "lineHeight",
9
+ COLOR = "color",
10
+ SIZE = "size",
11
+ BORDER_COLOR = "borderColor",
12
+ BORDER_RADIUS = "borderRadius",
13
+ BORDER_STYLE = "borderStyle",
14
+ BORDER_WIDTH = "borderWidth",
15
+ BOX_SHADOW = "boxShadow",
16
+ BREAKPOINT = "breakpoint",
17
+ DIMENSIONS = "dimensions",
18
+ OPACITY = "opacity",
19
+ TRANSITION = "transition"
20
+ }
21
+ export type CoreTokenCamelValues = `${CoreToken}`;
22
+ export type CoreTokenKebabValues = `${Kebab<CoreToken>}`;
23
+ export type TokensDesignData = {
24
+ baseFontSize?: number;
25
+ colorScheme?: ColorSchemeParams;
26
+ utopiaScheme?: UtopiaSchemeParams;
27
+ };
@@ -0,0 +1,41 @@
1
+ /* =================================================== */
2
+ /* TOKENS → TYPES → TOKENS */
3
+ /* =================================================== */
4
+ //
5
+ // ---------------------------------------------------
6
+ // CORE TOKENS
7
+ // Core tokens are those tokens that are most often the subject of definitions
8
+ // and almost certainly expect values to be passed for them,
9
+ // for which output is expected to be generated.
10
+ // Therefore, they are registered as reserved, with some of them having key names
11
+ // to which specific logic is attached and a specific structure is expected.
12
+ // Such a type is "color", to which logic for defining color schemes is attached.
13
+ export var CoreToken;
14
+ (function (CoreToken) {
15
+ // Typography
16
+ CoreToken["FONT_FAMILY"] = "fontFamily";
17
+ CoreToken["FONT_SIZE"] = "fontSize";
18
+ CoreToken["FONT_WEIGHT"] = "fontWeight";
19
+ CoreToken["LETTER_SPACING"] = "letterSpacing";
20
+ CoreToken["LINE_HEIGHT"] = "lineHeight";
21
+ // Color
22
+ CoreToken["COLOR"] = "color";
23
+ // Size
24
+ CoreToken["SIZE"] = "size";
25
+ // Border
26
+ CoreToken["BORDER_COLOR"] = "borderColor";
27
+ CoreToken["BORDER_RADIUS"] = "borderRadius";
28
+ CoreToken["BORDER_STYLE"] = "borderStyle";
29
+ CoreToken["BORDER_WIDTH"] = "borderWidth";
30
+ // Box Shadow
31
+ CoreToken["BOX_SHADOW"] = "boxShadow";
32
+ // Breakpoint
33
+ CoreToken["BREAKPOINT"] = "breakpoint";
34
+ // Dimensions
35
+ CoreToken["DIMENSIONS"] = "dimensions";
36
+ // Opacity
37
+ CoreToken["OPACITY"] = "opacity";
38
+ // Transition
39
+ CoreToken["TRANSITION"] = "transition";
40
+ })(CoreToken || (CoreToken = {}));
41
+ //# sourceMappingURL=tokens.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokens.types.js","sourceRoot":"","sources":["../../../../src/generators/tokens/types/tokens.types.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,6BAA6B;AAC7B,yDAAyD;AAKzD,EAAE;AACF,sDAAsD;AACtD,cAAc;AAEd,8EAA8E;AAC9E,4DAA4D;AAC5D,gDAAgD;AAEhD,iFAAiF;AACjF,4EAA4E;AAC5E,iFAAiF;AAEjF,MAAM,CAAN,IAAY,SAkCX;AAlCD,WAAY,SAAS;IACnB,aAAa;IACb,uCAA0B,CAAA;IAC1B,mCAAsB,CAAA;IACtB,uCAA0B,CAAA;IAC1B,6CAAgC,CAAA;IAChC,uCAA0B,CAAA;IAE1B,QAAQ;IACR,4BAAe,CAAA;IAEf,OAAO;IACP,0BAAa,CAAA;IAEb,SAAS;IACT,yCAA4B,CAAA;IAC5B,2CAA8B,CAAA;IAC9B,yCAA4B,CAAA;IAC5B,yCAA4B,CAAA;IAE5B,aAAa;IACb,qCAAwB,CAAA;IAExB,aAAa;IACb,sCAAyB,CAAA;IAEzB,aAAa;IACb,sCAAyB,CAAA;IAEzB,UAAU;IACV,gCAAmB,CAAA;IAEnB,aAAa;IACb,sCAAyB,CAAA;AAC3B,CAAC,EAlCW,SAAS,KAAT,SAAS,QAkCpB"}
@@ -0,0 +1,4 @@
1
+ export type UtopiaSchemeParams = {
2
+ minViewportW: number;
3
+ maxViewportW: number;
4
+ };
@@ -0,0 +1,5 @@
1
+ /* =================================================== */
2
+ /* TOKENS → TYPES → UTOPIA SCHEME */
3
+ /* =================================================== */
4
+ export {};
5
+ //# sourceMappingURL=utopia-scheme.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utopia-scheme.types.js","sourceRoot":"","sources":["../../../../src/generators/tokens/types/utopia-scheme.types.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,oCAAoC;AACpC,yDAAyD"}
@@ -0,0 +1,8 @@
1
+ import type { TransformedToken } from 'style-dictionary/types';
2
+ declare const nameReplacers: {
3
+ pascal: (name: string, scheme: string) => string;
4
+ kebab: (name: string, scheme: string) => string;
5
+ };
6
+ type Syntax = keyof typeof nameReplacers;
7
+ export declare const getColorScheme: (tokens: TransformedToken[], syntax: Syntax) => Record<string, TransformedToken[]>;
8
+ export {};
@@ -0,0 +1,24 @@
1
+ /* =================================================== */
2
+ /* TOKENS → UTILS → COLOR TOKENS */
3
+ /* =================================================== */
4
+ import { capitalize } from '../../../utils/strings.utils.js';
5
+ const nameReplacers = {
6
+ pascal: (name, scheme) => name.replace('ColorScheme' + capitalize(scheme), ''),
7
+ kebab: (name, scheme) => name.replace(`-scheme-${scheme}`, '')
8
+ };
9
+ // Returns the tokens for a given color scheme
10
+ const getColorSchemeTokens = (tokens, scheme, syntax) => tokens
11
+ .filter(({ attributes }) => attributes?.item === scheme)
12
+ .map(({ name, ...rest }) => ({
13
+ name: nameReplacers[syntax](name, scheme),
14
+ ...rest
15
+ }));
16
+ // Returns the color scheme tokens for a given syntax
17
+ export const getColorScheme = (tokens, syntax) => {
18
+ const schemeTokens = tokens.filter(({ attributes }) => attributes?.type === 'scheme');
19
+ return {
20
+ light: getColorSchemeTokens(schemeTokens, 'light', syntax),
21
+ dark: getColorSchemeTokens(schemeTokens, 'dark', syntax)
22
+ };
23
+ };
24
+ //# sourceMappingURL=color-tokens.utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"color-tokens.utils.js","sourceRoot":"","sources":["../../../../src/generators/tokens/utils/color-tokens.utils.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,mCAAmC;AACnC,yDAAyD;AAGzD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAE7D,MAAM,aAAa,GAAG;IACpB,MAAM,EAAE,CAAC,IAAY,EAAE,MAAc,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,UAAU,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC;IAC9F,KAAK,EAAE,CAAC,IAAY,EAAE,MAAc,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,MAAM,EAAE,EAAE,EAAE,CAAC;CAC/E,CAAC;AAIF,8CAA8C;AAC9C,MAAM,oBAAoB,GAAG,CAC3B,MAA0B,EAC1B,MAAc,EACd,MAAc,EACM,EAAE,CACtB,MAAM;KACH,MAAM,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,UAAU,EAAE,IAAI,KAAK,MAAM,CAAC;KACvD,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC;IACzC,GAAG,IAAI;CACR,CAAC,CAAC,CAAC;AAER,qDAAqD;AACrD,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,MAA0B,EAC1B,MAAc,EACsB,EAAE;IACtC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,UAAU,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC;IAEtF,OAAO;QACL,KAAK,EAAE,oBAAoB,CAAC,YAAY,EAAE,OAAO,EAAE,MAAM,CAAC;QAC1D,IAAI,EAAE,oBAAoB,CAAC,YAAY,EAAE,MAAM,EAAE,MAAM,CAAC;KACzD,CAAC;AACJ,CAAC,CAAC"}
@@ -0,0 +1,17 @@
1
+ import { CoreTokensHandlerResolvers, CustomFormatterType, DefinerParams, FormatterTemplateFn, OutputConfig, PlatformFilename, PlatformType, WrapperParams } from '../tokens.types.js';
2
+ import { CustomFormatterCategory } from '../types/format.types.js';
3
+ export declare const getDestinationFileName: (platformType: PlatformType, name: PlatformFilename) => string;
4
+ export declare const getCategoryFormatterName: (category: CustomFormatterCategory, name: string) => string;
5
+ export declare const getFileOutput: ({ name, category, config, parser }: {
6
+ name: string;
7
+ category: CustomFormatterCategory;
8
+ config?: OutputConfig;
9
+ parser: (output: string[], wrapper: (args: WrapperParams) => string, definer: (args: DefinerParams) => string) => void;
10
+ }) => Promise<string>;
11
+ export declare const getCoreTokensHandlerResolvers: ({ category, type }: {
12
+ category: CustomFormatterCategory;
13
+ type?: CustomFormatterType;
14
+ }) => CoreTokensHandlerResolvers;
15
+ export declare const allFormatterTemplate: FormatterTemplateFn;
16
+ export declare const coreFormatterTemplate: FormatterTemplateFn;
17
+ export declare const othersFormatterTemplate: FormatterTemplateFn;
@@ -0,0 +1,164 @@
1
+ /* =================================================== */
2
+ /* TOKENS → UTILS → FORMATS */
3
+ /* =================================================== */
4
+ import { fileHeader, getFormatterName } from '../../../utils/formats.utils.js';
5
+ import { capitalize, toSpaceCase } from '../../../utils/strings.utils.js';
6
+ import * as handlers from '../handlers/index.js';
7
+ import { CoreToken } from '../tokens.types.js';
8
+ import { isUtopiaToken } from './utopia-tokens.utils.js';
9
+ // Returns a destination file name
10
+ export const getDestinationFileName = (platformType, name) => `${platformType}/${name}.${platformType}`;
11
+ // Returns a formatter name
12
+ export const getCategoryFormatterName = (category, name) => getFormatterName(`${category}/${name}`);
13
+ // This function returns a promise with the output for a file.
14
+ // It is used by all handlers
15
+ export const getFileOutput = async ({ name, category, config, parser }) => {
16
+ // Import the wrapper and definer functions for the current category
17
+ const { wrapper, definer } = await import(`../platforms/${category}/utils.js`);
18
+ // Define the output array
19
+ const output = [];
20
+ // Populate the output array with the parsed tokens
21
+ parser(output, wrapper, definer);
22
+ // Return the output
23
+ return config?.noChapterTitle
24
+ ? `${output.join('\n')}\n`
25
+ : `\n${`/* ${name} */`.toUpperCase()}\n\n${output.join('\n')}\n`;
26
+ };
27
+ // Returns an object of core tokens keys with handlers builders for each type
28
+ export const getCoreTokensHandlerResolvers = ({ category, type }) => Object.fromEntries(Object.values(CoreToken).map((token) => [
29
+ token,
30
+ // HandlerResolver
31
+ async (formatArgs, tokens, config) => {
32
+ const name = capitalize(toSpaceCase(token));
33
+ let handlerType = '';
34
+ switch (true) {
35
+ case tokens.length && tokens[0].$type === 'color':
36
+ handlerType = 'color';
37
+ break;
38
+ case tokens.some(isUtopiaToken):
39
+ handlerType = 'utopia';
40
+ break;
41
+ default:
42
+ handlerType = 'basic';
43
+ }
44
+ // if (handlerType === 'SPECIFIC') {
45
+ // const { default: handler } = await import(
46
+ // `../platforms/${format}/handlers/${type ? `${type}/` : ''}${handlerType}.handler.js`
47
+ // );
48
+ // return handler(...args);
49
+ // }
50
+ // Get the handler function
51
+ const handleTokens = handlers[`${handlerType}Handler`];
52
+ return handleTokens({
53
+ name,
54
+ category,
55
+ type,
56
+ formatArgs,
57
+ tokens,
58
+ config
59
+ });
60
+ }
61
+ ]));
62
+ // This function represents a template for a format config
63
+ // that prepares one for formatting all tokens available.
64
+ export const allFormatterTemplate = ({ name, category, type }) => ({
65
+ name: getCategoryFormatterName(category, name),
66
+ format: async function (formatArgs) {
67
+ // Get the core token handlers
68
+ const coreTokensHandlerResolvers = getCoreTokensHandlerResolvers({
69
+ category,
70
+ type
71
+ });
72
+ // Define the output array
73
+ const output = [];
74
+ // Get all tokens from the dictionary
75
+ const { allTokens } = formatArgs.dictionary;
76
+ // Add header to the output array
77
+ output.push(fileHeader(`${category} Tokens${type ? ` (${type})` : ''}`));
78
+ // Parse tokens that have a core handler
79
+ const getCoreTokens = (type) => allTokens.filter((token) => token.$type === type);
80
+ const promises = [];
81
+ Object.entries(coreTokensHandlerResolvers).forEach(([type, handlerResolver]) => {
82
+ const tokens = getCoreTokens(type);
83
+ if (tokens.length) {
84
+ promises.push(handlerResolver(formatArgs, tokens));
85
+ }
86
+ });
87
+ const responses = await Promise.all(promises);
88
+ responses.forEach((response) => {
89
+ output.push(response);
90
+ });
91
+ // Parse tokens that don't have a core handler
92
+ const otherTokens = allTokens.filter((token) => !Object.keys(coreTokensHandlerResolvers).includes(token.$type || ''));
93
+ if (otherTokens.length) {
94
+ output.push(await handlers.basicHandler({
95
+ name: 'Other',
96
+ category,
97
+ type,
98
+ formatArgs,
99
+ tokens: otherTokens
100
+ }));
101
+ }
102
+ // Join the output array into a string and return it
103
+ return output.join('\n');
104
+ }
105
+ });
106
+ // This function represents a template for a format config
107
+ // that prepares one for formatting individual files for each core token available.
108
+ export const coreFormatterTemplate = ({ name, category, type }) => ({
109
+ name: getCategoryFormatterName(category, name),
110
+ format: async function (formatArgs) {
111
+ // Get the dictionary and the options from the format arguments
112
+ const { dictionary } = formatArgs;
113
+ // Get the core token handlers
114
+ const coreTokensHandlerResolvers = getCoreTokensHandlerResolvers({
115
+ category,
116
+ type
117
+ });
118
+ // Define the output array
119
+ const output = [];
120
+ // Get all tokens from the dictionary
121
+ const { allTokens: tokens } = dictionary;
122
+ // Get the type of the tokens
123
+ // If there are no tokens, exit the function
124
+ const tokenType = tokens.length && tokens[0].$type;
125
+ if (!tokenType)
126
+ return;
127
+ // Add header to the output array
128
+ output.push(fileHeader(`${toSpaceCase(tokenType)} Tokens`));
129
+ // Parse the tokens
130
+ const handlerResolver = coreTokensHandlerResolvers[tokenType];
131
+ if (handlerResolver) {
132
+ output.push(await handlerResolver(formatArgs, tokens, { noChapterTitle: true }));
133
+ }
134
+ // Join the output array into a string and return it
135
+ return output.join('\n');
136
+ }
137
+ });
138
+ // This function represents a template for a format config
139
+ // that prepares one for formatting all tokens that don't have a core handler (if such).
140
+ export const othersFormatterTemplate = ({ name, category, type }) => ({
141
+ name: getCategoryFormatterName(category, name),
142
+ format: async function (formatArgs) {
143
+ // Get the dictionary and the options from the format arguments
144
+ const { dictionary } = formatArgs;
145
+ // Define the output array
146
+ const output = [];
147
+ // Get all tokens from the dictionary
148
+ const { allTokens: tokens } = dictionary;
149
+ // Add header to the output array
150
+ output.push(fileHeader(`Other Tokens`));
151
+ // Parse tokens that don't have a core handler
152
+ output.push(await handlers.basicHandler({
153
+ name: 'Other',
154
+ category,
155
+ type,
156
+ formatArgs,
157
+ tokens,
158
+ config: { noChapterTitle: true }
159
+ }));
160
+ // Join the output array into a string and return it
161
+ return output.join('\n');
162
+ }
163
+ });
164
+ //# sourceMappingURL=formats.utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"formats.utils.js","sourceRoot":"","sources":["../../../../src/generators/tokens/utils/formats.utils.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,10 @@
1
+ import type { TransformedToken } from 'style-dictionary/types';
2
+ import type { UtopiaSchemeParams } from '../tokens.types.js';
3
+ export declare const mapUtopiaTokenValuesToMin: (tokens: TransformedToken[]) => TransformedToken[];
4
+ export declare const mapUtopiaTokenValuesToMax: (tokens: TransformedToken[]) => TransformedToken[];
5
+ export declare const mapUtopiaTokenValuesToResponsive: (tokens: TransformedToken[], baseFontSize: number, utopiaScheme: UtopiaSchemeParams) => TransformedToken[];
6
+ export declare const separateUtopiaAndBasicTokens: (tokens: TransformedToken[]) => {
7
+ utopiaTokens: TransformedToken[];
8
+ basicTokens: TransformedToken[];
9
+ };
10
+ export declare const isUtopiaToken: (token: TransformedToken) => boolean;
@@ -0,0 +1,56 @@
1
+ /* =================================================== */
2
+ /* TOKENS → UTILS → UTOPIA TOKENS */
3
+ /* =================================================== */
4
+ //
5
+ // ---------------------------------------------------
6
+ // HELPER FUNCTIONS
7
+ // Generates and returns the responsive value
8
+ // of a given Utopia token (one with min and max values)
9
+ const getUtopiaTokenResponsiveValue = (token, baseFontSize, { minViewportW, maxViewportW }) => {
10
+ const slope = ((parseFloat(token.$value.max) - parseFloat(token.$value.min)) /
11
+ (maxViewportW - minViewportW)) *
12
+ 100;
13
+ const yIntercept = parseFloat(token.$value.min) - (slope * minViewportW) / 100;
14
+ const yInterceptRem = yIntercept / baseFontSize;
15
+ return `calc(${yInterceptRem.toFixed(5)}rem + ${slope.toFixed(5)}vw)`;
16
+ };
17
+ // Sets the value of a given Utopia token to the provided value
18
+ // and returns a new token with the new value (either fixed min/max or responsive)
19
+ const setUtopiaTokenValue = (token, $value) => ({
20
+ ...token,
21
+ $value
22
+ });
23
+ // Transforms the values of a given Utopia tokens array to their fixed min values
24
+ // and returns a new array of tokens with the new values
25
+ export const mapUtopiaTokenValuesToMin = (tokens) => tokens.map((token) => setUtopiaTokenValue(token, token.$value.min));
26
+ // Transforms the values of a given Utopia tokens array to their fixed max values
27
+ // and returns a new array of tokens with the new values
28
+ export const mapUtopiaTokenValuesToMax = (tokens) => tokens.map((token) => setUtopiaTokenValue(token, token.$value.max));
29
+ // Transforms the values of a given Utopia tokens array to their responsive values
30
+ // and returns a new array of tokens with the new values
31
+ export const mapUtopiaTokenValuesToResponsive = (tokens, baseFontSize, utopiaScheme) => tokens.map((token) => setUtopiaTokenValue(token, getUtopiaTokenResponsiveValue(token, baseFontSize, utopiaScheme)));
32
+ // Separates tokens into Utopia and basic tokens
33
+ // and returns an object with the two arrays
34
+ export const separateUtopiaAndBasicTokens = (tokens) => {
35
+ const utopiaTokens = [];
36
+ const basicTokens = [];
37
+ tokens.forEach((token) => {
38
+ const value = token.$value;
39
+ if (typeof value === 'object' && value !== null && 'min' in value && 'max' in value) {
40
+ utopiaTokens.push(token);
41
+ }
42
+ else {
43
+ basicTokens.push(token);
44
+ }
45
+ });
46
+ return {
47
+ utopiaTokens,
48
+ basicTokens
49
+ };
50
+ };
51
+ // Checks if a given token is Utopia (has min and max values)
52
+ // and returns true if it is
53
+ export const isUtopiaToken = (token) => token.$value.min !== undefined &&
54
+ token.$value.max !== undefined &&
55
+ token.$value.min !== token.$value.max;
56
+ //# sourceMappingURL=utopia-tokens.utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utopia-tokens.utils.js","sourceRoot":"","sources":["../../../../src/generators/tokens/utils/utopia-tokens.utils.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import { GeneratorFn, ViewportScalerGeneratorParams } from '../../types/index.js';
2
+ export declare const viewportScalerGenerator: GeneratorFn<ViewportScalerGeneratorParams>;
@@ -0,0 +1,56 @@
1
+ /* =================================================== */
2
+ /* VIEWPORT SCALER → GENERATOR */
3
+ /* =================================================== */
4
+ import { cssSelectorBlock, tab } from '../../utils/formats.utils.js';
5
+ import { cssGenerator } from '../../utils/generators.utils.js';
6
+ //
7
+ // ---------------------------------------------------
8
+ // GENERATOR FUNCTION
9
+ // This function outputs the root font size definition
10
+ export const viewportScalerGenerator = (params) => cssGenerator('viewportScaler', params, (output, config) => {
11
+ const { minViewportW, maxViewportW, baseFontSize } = config;
12
+ const prefix = config.prefix ? `${config.prefix}-` : '';
13
+ const variants = [
14
+ // from 0 up to min breakpoint
15
+ {
16
+ media: `(max-width: ${minViewportW - 1}px)`,
17
+ wrappers: [
18
+ {
19
+ code: `${tab(2)}--${prefix}root-font-size: calc((${baseFontSize} * 100vw) / ${minViewportW});`
20
+ }
21
+ ]
22
+ },
23
+ // from min breakpoint up to max breakpoint
24
+ {
25
+ media: `(min-width: ${minViewportW}px) and (max-width: ${maxViewportW}px)`,
26
+ wrappers: [
27
+ {
28
+ code: `${tab(2)}--${prefix}root-font-size: var(--${prefix}font-size-base-percentage);`
29
+ }
30
+ ]
31
+ },
32
+ // scalable from max breakpoint up to ∞
33
+ {
34
+ media: `(min-width: ${maxViewportW + 1}px)`,
35
+ wrappers: [
36
+ {
37
+ code: `${tab(2)}--${prefix}root-font-size: var(--${prefix}font-size-base-percentage);`
38
+ },
39
+ {
40
+ name: 'html.presentation-mode',
41
+ code: `${tab(2)}--${prefix}root-font-size: calc((${baseFontSize} * 100vw) / ${maxViewportW});`
42
+ }
43
+ ]
44
+ }
45
+ ];
46
+ variants.forEach(({ media, wrappers }) => {
47
+ output.push(`@media all and ${media} {`);
48
+ wrappers.forEach(({ name = ':root', code }, index) => {
49
+ output.push(cssSelectorBlock({ name, code, indent: tab() }) +
50
+ (index < wrappers.length - 1 ? '\n' : ''));
51
+ });
52
+ output.push(`}\n`);
53
+ });
54
+ return `${output.join('\n')}\n`;
55
+ });
56
+ //# sourceMappingURL=viewport-scaler.generator.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"viewport-scaler.generator.js","sourceRoot":"","sources":["../../../src/generators/viewport-scaler/viewport-scaler.generator.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,iCAAiC;AACjC,yDAAyD;AAGzD,OAAO,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,EAAE;AACF,sDAAsD;AACtD,qBAAqB;AAErB,sDAAsD;AACtD,MAAM,CAAC,MAAM,uBAAuB,GAA+C,CAAC,MAAM,EAAE,EAAE,CAC5F,YAAY,CAAgC,gBAAgB,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;IACvF,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,GAChD,MAAiD,CAAC;IACpD,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IAExD,MAAM,QAAQ,GAAG;QACf,8BAA8B;QAC9B;YACE,KAAK,EAAE,eAAe,YAAY,GAAG,CAAC,KAAK;YAC3C,QAAQ,EAAE;gBACR;oBACE,IAAI,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,MAAM,yBAAyB,YAAY,eAAe,YAAY,IAAI;iBAC/F;aACF;SACF;QACD,2CAA2C;QAC3C;YACE,KAAK,EAAE,eAAe,YAAY,uBAAuB,YAAY,KAAK;YAC1E,QAAQ,EAAE;gBACR;oBACE,IAAI,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,MAAM,yBAAyB,MAAM,6BAA6B;iBACvF;aACF;SACF;QACD,uCAAuC;QACvC;YACE,KAAK,EAAE,eAAe,YAAY,GAAG,CAAC,KAAK;YAC3C,QAAQ,EAAE;gBACR;oBACE,IAAI,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,MAAM,yBAAyB,MAAM,6BAA6B;iBACvF;gBACD;oBACE,IAAI,EAAE,wBAAwB;oBAC9B,IAAI,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,MAAM,yBAAyB,YAAY,eAAe,YAAY,IAAI;iBAC/F;aACF;SACF;KACF,CAAC;IAEF,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QACvC,MAAM,CAAC,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,CAAC;QACzC,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE;YACnD,MAAM,CAAC,IAAI,CACT,gBAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC;gBAC7C,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAC5C,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AAClC,CAAC,CAAC,CAAC"}
@@ -0,0 +1,7 @@
1
+ export type ViewportScalerGeneratorParams = {
2
+ prefix?: string;
3
+ baseFontSize?: number;
4
+ minViewportW?: number;
5
+ maxViewportW?: number;
6
+ buildPath?: string;
7
+ };
@@ -0,0 +1,5 @@
1
+ /* =================================================== */
2
+ /* VIEWPORT SCALER → TYPES */
3
+ /* =================================================== */
4
+ export {};
5
+ //# sourceMappingURL=viewport-scaler.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"viewport-scaler.types.js","sourceRoot":"","sources":["../../../src/generators/viewport-scaler/viewport-scaler.types.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,6BAA6B;AAC7B,yDAAyD"}
@@ -0,0 +1,2 @@
1
+ export { masterGenerator as generateDesignEssentials, faviconsGenerator as generateFavicons, fontFacesGenerator as generateFontFaces, iconsGenerator as generateIcons, scrollbarGenerator as generateScrollbar, tokensGenerator as generateTokens, viewportScalerGenerator as generateViewportScaler } from './generators/index.js';
2
+ export * from './types/index.js';
package/dist/index.js ADDED
@@ -0,0 +1,11 @@
1
+ /* =================================================== */
2
+ /* DESIGN ESSENTIALS VENDOR */
3
+ /* =================================================== */
4
+ export {
5
+ // Master generator
6
+ masterGenerator as generateDesignEssentials,
7
+ // Individual generators
8
+ faviconsGenerator as generateFavicons, fontFacesGenerator as generateFontFaces, iconsGenerator as generateIcons, scrollbarGenerator as generateScrollbar, tokensGenerator as generateTokens, viewportScalerGenerator as generateViewportScaler } from './generators/index.js';
9
+ // Types
10
+ export * from './types/index.js';
11
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,8BAA8B;AAC9B,yDAAyD;AAEzD,OAAO;AACL,mBAAmB;AACnB,eAAe,IAAI,wBAAwB;AAE3C,wBAAwB;AACxB,iBAAiB,IAAI,gBAAgB,EACrC,kBAAkB,IAAI,iBAAiB,EACvC,cAAc,IAAI,aAAa,EAC/B,kBAAkB,IAAI,iBAAiB,EACvC,eAAe,IAAI,cAAc,EACjC,uBAAuB,IAAI,sBAAsB,EAClD,MAAM,uBAAuB,CAAC;AAE/B,QAAQ;AACR,cAAc,kBAAkB,CAAC"}
@@ -0,0 +1,2 @@
1
+ import type StyleDictionary from 'style-dictionary';
2
+ export type GeneratorFn<T, Response = StyleDictionary> = (params: T) => Promise<Response>;
@@ -0,0 +1,5 @@
1
+ /* =================================================== */
2
+ /* TYPES → GENERATOR */
3
+ /* =================================================== */
4
+ export {};
5
+ //# sourceMappingURL=generator.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generator.types.js","sourceRoot":"","sources":["../../src/types/generator.types.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,uBAAuB;AACvB,yDAAyD"}
@@ -0,0 +1,8 @@
1
+ export * from './generator.types.js';
2
+ export * from '../generators/master/master.types.js';
3
+ export * from '../generators/favicons/favicons.types.js';
4
+ export * from '../generators/font-faces/font-faces.types.js';
5
+ export * from '../generators/icons/icons.types.js';
6
+ export * from '../generators/scrollbar/scrollbar.types.js';
7
+ export * from '../generators/tokens/tokens.types.js';
8
+ export * from '../generators/viewport-scaler/viewport-scaler.types.js';
@@ -0,0 +1,12 @@
1
+ /* =================================================== */
2
+ /* TYPES */
3
+ /* =================================================== */
4
+ export * from './generator.types.js';
5
+ export * from '../generators/master/master.types.js';
6
+ export * from '../generators/favicons/favicons.types.js';
7
+ export * from '../generators/font-faces/font-faces.types.js';
8
+ export * from '../generators/icons/icons.types.js';
9
+ export * from '../generators/scrollbar/scrollbar.types.js';
10
+ export * from '../generators/tokens/tokens.types.js';
11
+ export * from '../generators/viewport-scaler/viewport-scaler.types.js';
12
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,WAAW;AACX,yDAAyD;AAEzD,cAAc,sBAAsB,CAAC;AAErC,cAAc,sCAAsC,CAAC;AAErD,cAAc,0CAA0C,CAAC;AACzD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,oCAAoC,CAAC;AACnD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sCAAsC,CAAC;AACrD,cAAc,wDAAwD,CAAC"}
@@ -0,0 +1,2 @@
1
+ export type Kebab<T extends string> = T extends `${infer F}${infer R}` ? R extends Uncapitalize<R> ? `${Lowercase<F>}${Kebab<R>}` : `${Lowercase<F>}-${Kebab<Uncapitalize<R>>}` : T;
2
+ export type EnforceRequired<T, K extends keyof T> = Required<Pick<T, K>> & Omit<T, K>;
@@ -0,0 +1,5 @@
1
+ /* =================================================== */
2
+ /* TYPES → UTILS */
3
+ /* =================================================== */
4
+ export {};
5
+ //# sourceMappingURL=utils.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.types.js","sourceRoot":"","sources":["../../src/types/utils.types.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,mBAAmB;AACnB,yDAAyD"}
@@ -0,0 +1,14 @@
1
+ import { Format } from 'style-dictionary/types';
2
+ export declare const fileHeader: (name: string) => string;
3
+ export declare const tab: (c?: number) => string;
4
+ export declare const getFormatterName: (name: string) => string;
5
+ export declare const customFormatterTemplate: <GeneratorParams>({ name, config, outputGenerator: generateOutput }: {
6
+ name: string;
7
+ config: GeneratorParams;
8
+ outputGenerator: (output: string[], config: GeneratorParams) => string;
9
+ }) => Format;
10
+ export declare const cssSelectorBlock: ({ name, code, indent }: {
11
+ name: string;
12
+ code: string;
13
+ indent?: string;
14
+ }) => string;
@@ -0,0 +1,24 @@
1
+ import { toCamelCase, toSpaceCase } from './strings.utils.js';
2
+ // Returns a file header with a provided name
3
+ export const fileHeader = (name) => `/* =================================================== */\n/* ${name.toUpperCase()} */\n/* =================================================== */\n`;
4
+ // Returns a pair of spaces multiplied by the provided number
5
+ export const tab = (c = 1) => ' '.repeat(c);
6
+ // Returns a formatter name
7
+ export const getFormatterName = (name) => `mev/${name}`;
8
+ // This function represents a template for a format config
9
+ // that prepares one for formatting a custom output.
10
+ export const customFormatterTemplate = ({ name, config, outputGenerator: generateOutput }) => ({
11
+ name: getFormatterName(name),
12
+ format: () => {
13
+ // Define the output array
14
+ const output = [];
15
+ // Add header to the output array
16
+ output.push(fileHeader(toSpaceCase(toCamelCase(name))));
17
+ // Handle the output
18
+ generateOutput(output, config);
19
+ // Join the output array into a string and return it
20
+ return output.join('\n');
21
+ }
22
+ });
23
+ export const cssSelectorBlock = ({ name, code, indent = '' }) => `${indent}${name} {\n${code}\n${indent}}`;
24
+ //# sourceMappingURL=formats.utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"formats.utils.js","sourceRoot":"","sources":["../../src/utils/formats.utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAE9D,6CAA6C;AAC7C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAY,EAAU,EAAE,CACjD,iEAAiE,IAAI,CAAC,WAAW,EAAE,kEAAkE,CAAC;AAExJ,6DAA6D;AAC7D,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,IAAY,CAAC,EAAU,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAE7D,2BAA2B;AAC3B,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,OAAO,IAAI,EAAE,CAAC;AAEhE,0DAA0D;AAC1D,oDAAoD;AACpD,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAkB,EACvD,IAAI,EACJ,MAAM,EACN,eAAe,EAAE,cAAc,EAKhC,EAAU,EAAE,CAAC,CAAC;IACb,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAC5B,MAAM,EAAE,GAAG,EAAE;QACX,0BAA0B;QAC1B,MAAM,MAAM,GAAa,EAAE,CAAC;QAE5B,iCAAiC;QACjC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAExD,oBAAoB;QACpB,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAE/B,oDAAoD;QACpD,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,IAAI,EACJ,IAAI,EACJ,MAAM,GAAG,EAAE,EAKZ,EAAU,EAAE,CAAC,GAAG,MAAM,GAAG,IAAI,OAAO,IAAI,KAAK,MAAM,GAAG,CAAC"}
@@ -0,0 +1,2 @@
1
+ import StyleDictionary from 'style-dictionary';
2
+ export declare const cssGenerator: <GeneratorParams>(name: string, params: GeneratorParams, outputGenerator: (output: string[], config: GeneratorParams) => string) => Promise<StyleDictionary>;