@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.
- package/README.md +2340 -0
- package/dist/defaults.d.ts +8 -0
- package/dist/defaults.js +137 -0
- package/dist/defaults.js.map +1 -0
- package/dist/generators/favicons/favicons.generator.d.ts +4 -0
- package/dist/generators/favicons/favicons.generator.js +58 -0
- package/dist/generators/favicons/favicons.generator.js.map +1 -0
- package/dist/generators/favicons/favicons.types.d.ts +7 -0
- package/dist/generators/favicons/favicons.types.js +5 -0
- package/dist/generators/favicons/favicons.types.js.map +1 -0
- package/dist/generators/font-faces/font-faces.generator.d.ts +2 -0
- package/dist/generators/font-faces/font-faces.generator.js +123 -0
- package/dist/generators/font-faces/font-faces.generator.js.map +1 -0
- package/dist/generators/font-faces/font-faces.types.d.ts +11 -0
- package/dist/generators/font-faces/font-faces.types.js +5 -0
- package/dist/generators/font-faces/font-faces.types.js.map +1 -0
- package/dist/generators/icons/icons.generator.d.ts +2 -0
- package/dist/generators/icons/icons.generator.js +47 -0
- package/dist/generators/icons/icons.generator.js.map +1 -0
- package/dist/generators/icons/icons.types.d.ts +6 -0
- package/dist/generators/icons/icons.types.js +5 -0
- package/dist/generators/icons/icons.types.js.map +1 -0
- package/dist/generators/index.d.ts +7 -0
- package/dist/generators/index.js +13 -0
- package/dist/generators/index.js.map +1 -0
- package/dist/generators/master/master.generator.d.ts +3 -0
- package/dist/generators/master/master.generator.js +73 -0
- package/dist/generators/master/master.generator.js.map +1 -0
- package/dist/generators/master/master.types.d.ts +14 -0
- package/dist/generators/master/master.types.js +5 -0
- package/dist/generators/master/master.types.js.map +1 -0
- package/dist/generators/scrollbar/scrollbar.generator.d.ts +2 -0
- package/dist/generators/scrollbar/scrollbar.generator.js +109 -0
- package/dist/generators/scrollbar/scrollbar.generator.js.map +1 -0
- package/dist/generators/scrollbar/scrollbar.types.d.ts +11 -0
- package/dist/generators/scrollbar/scrollbar.types.js +5 -0
- package/dist/generators/scrollbar/scrollbar.types.js.map +1 -0
- package/dist/generators/tokens/handlers/basic.handler.d.ts +2 -0
- package/dist/generators/tokens/handlers/basic.handler.js +57 -0
- package/dist/generators/tokens/handlers/basic.handler.js.map +1 -0
- package/dist/generators/tokens/handlers/color.handler.d.ts +2 -0
- package/dist/generators/tokens/handlers/color.handler.js +117 -0
- package/dist/generators/tokens/handlers/color.handler.js.map +1 -0
- package/dist/generators/tokens/handlers/index.d.ts +3 -0
- package/dist/generators/tokens/handlers/index.js +7 -0
- package/dist/generators/tokens/handlers/index.js.map +1 -0
- package/dist/generators/tokens/handlers/utopia.handler.d.ts +2 -0
- package/dist/generators/tokens/handlers/utopia.handler.js +79 -0
- package/dist/generators/tokens/handlers/utopia.handler.js.map +1 -0
- package/dist/generators/tokens/platforms/css/formats.d.ts +2 -0
- package/dist/generators/tokens/platforms/css/formats.js +20 -0
- package/dist/generators/tokens/platforms/css/formats.js.map +1 -0
- package/dist/generators/tokens/platforms/css/index.d.ts +2 -0
- package/dist/generators/tokens/platforms/css/index.js +20 -0
- package/dist/generators/tokens/platforms/css/index.js.map +1 -0
- package/dist/generators/tokens/platforms/css/utils.d.ts +3 -0
- package/dist/generators/tokens/platforms/css/utils.js +12 -0
- package/dist/generators/tokens/platforms/css/utils.js.map +1 -0
- package/dist/generators/tokens/platforms/formats.d.ts +3 -0
- package/dist/generators/tokens/platforms/formats.js +7 -0
- package/dist/generators/tokens/platforms/formats.js.map +1 -0
- package/dist/generators/tokens/platforms/index.d.ts +8 -0
- package/dist/generators/tokens/platforms/index.js +83 -0
- package/dist/generators/tokens/platforms/index.js.map +1 -0
- package/dist/generators/tokens/platforms/js/formats.d.ts +2 -0
- package/dist/generators/tokens/platforms/js/formats.js +15 -0
- package/dist/generators/tokens/platforms/js/formats.js.map +1 -0
- package/dist/generators/tokens/platforms/js/index.d.ts +2 -0
- package/dist/generators/tokens/platforms/js/index.js +18 -0
- package/dist/generators/tokens/platforms/js/index.js.map +1 -0
- package/dist/generators/tokens/platforms/js/utils.d.ts +3 -0
- package/dist/generators/tokens/platforms/js/utils.js +20 -0
- package/dist/generators/tokens/platforms/js/utils.js.map +1 -0
- package/dist/generators/tokens/platforms/json/index.d.ts +2 -0
- package/dist/generators/tokens/platforms/json/index.js +24 -0
- package/dist/generators/tokens/platforms/json/index.js.map +1 -0
- package/dist/generators/tokens/platforms/scss/formats.d.ts +2 -0
- package/dist/generators/tokens/platforms/scss/formats.js +15 -0
- package/dist/generators/tokens/platforms/scss/formats.js.map +1 -0
- package/dist/generators/tokens/platforms/scss/index.d.ts +2 -0
- package/dist/generators/tokens/platforms/scss/index.js +15 -0
- package/dist/generators/tokens/platforms/scss/index.js.map +1 -0
- package/dist/generators/tokens/platforms/scss/utils.d.ts +3 -0
- package/dist/generators/tokens/platforms/scss/utils.js +15 -0
- package/dist/generators/tokens/platforms/scss/utils.js.map +1 -0
- package/dist/generators/tokens/tokens.generator.d.ts +3 -0
- package/dist/generators/tokens/tokens.generator.js +52 -0
- package/dist/generators/tokens/tokens.generator.js.map +1 -0
- package/dist/generators/tokens/tokens.types.d.ts +17 -0
- package/dist/generators/tokens/tokens.types.js +12 -0
- package/dist/generators/tokens/tokens.types.js.map +1 -0
- package/dist/generators/tokens/types/color-scheme.types.d.ts +13 -0
- package/dist/generators/tokens/types/color-scheme.types.js +29 -0
- package/dist/generators/tokens/types/color-scheme.types.js.map +1 -0
- package/dist/generators/tokens/types/format.types.d.ts +52 -0
- package/dist/generators/tokens/types/format.types.js +35 -0
- package/dist/generators/tokens/types/format.types.js.map +1 -0
- package/dist/generators/tokens/types/platform.types.d.ts +33 -0
- package/dist/generators/tokens/types/platform.types.js +36 -0
- package/dist/generators/tokens/types/platform.types.js.map +1 -0
- package/dist/generators/tokens/types/tokens.types.d.ts +27 -0
- package/dist/generators/tokens/types/tokens.types.js +41 -0
- package/dist/generators/tokens/types/tokens.types.js.map +1 -0
- package/dist/generators/tokens/types/utopia-scheme.types.d.ts +4 -0
- package/dist/generators/tokens/types/utopia-scheme.types.js +5 -0
- package/dist/generators/tokens/types/utopia-scheme.types.js.map +1 -0
- package/dist/generators/tokens/utils/color-tokens.utils.d.ts +8 -0
- package/dist/generators/tokens/utils/color-tokens.utils.js +24 -0
- package/dist/generators/tokens/utils/color-tokens.utils.js.map +1 -0
- package/dist/generators/tokens/utils/formats.utils.d.ts +17 -0
- package/dist/generators/tokens/utils/formats.utils.js +164 -0
- package/dist/generators/tokens/utils/formats.utils.js.map +1 -0
- package/dist/generators/tokens/utils/utopia-tokens.utils.d.ts +10 -0
- package/dist/generators/tokens/utils/utopia-tokens.utils.js +56 -0
- package/dist/generators/tokens/utils/utopia-tokens.utils.js.map +1 -0
- package/dist/generators/viewport-scaler/viewport-scaler.generator.d.ts +2 -0
- package/dist/generators/viewport-scaler/viewport-scaler.generator.js +56 -0
- package/dist/generators/viewport-scaler/viewport-scaler.generator.js.map +1 -0
- package/dist/generators/viewport-scaler/viewport-scaler.types.d.ts +7 -0
- package/dist/generators/viewport-scaler/viewport-scaler.types.js +5 -0
- package/dist/generators/viewport-scaler/viewport-scaler.types.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +11 -0
- package/dist/index.js.map +1 -0
- package/dist/types/generator.types.d.ts +2 -0
- package/dist/types/generator.types.js +5 -0
- package/dist/types/generator.types.js.map +1 -0
- package/dist/types/index.d.ts +8 -0
- package/dist/types/index.js +12 -0
- package/dist/types/index.js.map +1 -0
- package/dist/types/utils.types.d.ts +2 -0
- package/dist/types/utils.types.js +5 -0
- package/dist/types/utils.types.js.map +1 -0
- package/dist/utils/formats.utils.d.ts +14 -0
- package/dist/utils/formats.utils.js +24 -0
- package/dist/utils/formats.utils.js.map +1 -0
- package/dist/utils/generators.utils.d.ts +2 -0
- package/dist/utils/generators.utils.js +39 -0
- package/dist/utils/generators.utils.js.map +1 -0
- package/dist/utils/strings.utils.d.ts +5 -0
- package/dist/utils/strings.utils.js +46 -0
- package/dist/utils/strings.utils.js.map +1 -0
- 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 @@
|
|
|
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,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 @@
|
|
|
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"}
|
package/dist/index.d.ts
ADDED
|
@@ -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 @@
|
|
|
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 @@
|
|
|
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"}
|