@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,109 @@
|
|
|
1
|
+
/* =================================================== */
|
|
2
|
+
/* SCROLLBAR → GENERATOR */
|
|
3
|
+
/* =================================================== */
|
|
4
|
+
import { cssSelectorBlock } from '../../utils/formats.utils.js';
|
|
5
|
+
import { cssGenerator } from '../../utils/generators.utils.js';
|
|
6
|
+
//
|
|
7
|
+
// ---------------------------------------------------
|
|
8
|
+
// GENERATOR FUNCTION
|
|
9
|
+
// This function outputs the scrollbar styles
|
|
10
|
+
export const scrollbarGenerator = (params) => cssGenerator('scrollbar', params, (output, config) => {
|
|
11
|
+
output.push(cssSelectorBlock({
|
|
12
|
+
name: 'html:not(.isMacOs)',
|
|
13
|
+
code: ` --scrollbar-area: ${config.areaWidth}px;
|
|
14
|
+
--scrollbar-thumb-size-base: ${config.thumbSizeBase}px;
|
|
15
|
+
--scrollbar-thumb-size-over: ${config.thumbSizeOver}px;
|
|
16
|
+
--scrollbar-gap-size-base: calc(
|
|
17
|
+
(var(--scrollbar-area) - var(--scrollbar-thumb-size-base)) / 2
|
|
18
|
+
); /* 6px */
|
|
19
|
+
--scrollbar-gap-size-over: calc(
|
|
20
|
+
(var(--scrollbar-area) - var(--scrollbar-thumb-size-over)) / 2
|
|
21
|
+
); /* 3px */
|
|
22
|
+
--scrollbar-background: ${config.scrollbarBackground};
|
|
23
|
+
--scrollbar-thumb-color: ${config.thumbColor};
|
|
24
|
+
--scrollbar-thumb-color-hover: ${config.thumbColorHover};
|
|
25
|
+
--scrollbar-thumb-color-active: ${config.thumbColorActive};
|
|
26
|
+
--scrollbar-thumb-min-size: ${config.thumbMinSize}px;
|
|
27
|
+
|
|
28
|
+
/* Scrollbar area */
|
|
29
|
+
::-webkit-scrollbar:vertical {
|
|
30
|
+
width: var(--scrollbar-area);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
::-webkit-scrollbar:horizontal {
|
|
34
|
+
height: var(--scrollbar-area);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
::-webkit-scrollbar {
|
|
38
|
+
scroll-margin: 0;
|
|
39
|
+
background-color: var(--scrollbar-background);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Track */
|
|
43
|
+
::-webkit-scrollbar-track-piece {
|
|
44
|
+
border: var(--scrollbar-gap-size-base) solid transparent;
|
|
45
|
+
border-radius: var(--scrollbar-thumb-size-base);
|
|
46
|
+
background-color: transparent;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Thumb */
|
|
50
|
+
::-webkit-scrollbar-thumb:vertical {
|
|
51
|
+
min-height: var(--scrollbar-thumb-min-size);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
::-webkit-scrollbar-thumb:horizontal {
|
|
55
|
+
min-width: var(--scrollbar-thumb-min-size);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
::-webkit-scrollbar-thumb {
|
|
59
|
+
border: var(--scrollbar-gap-size-base) solid transparent;
|
|
60
|
+
border-radius: var(--scrollbar-area);
|
|
61
|
+
background: var(--scrollbar-thumb-color);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
::-webkit-scrollbar-thumb:hover {
|
|
65
|
+
--scrollbar-thumb-color: var(--scrollbar-thumb-color-hover);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
::-webkit-scrollbar-thumb:active {
|
|
69
|
+
--scrollbar-thumb-color: var(--scrollbar-thumb-color-active);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
::-webkit-scrollbar-thumb:hover,
|
|
73
|
+
::-webkit-scrollbar-thumb:active {
|
|
74
|
+
border: var(--scrollbar-gap-size-over) solid transparent;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
::-webkit-scrollbar-thumb,
|
|
78
|
+
::-webkit-scrollbar-thumb:hover,
|
|
79
|
+
::-webkit-scrollbar-thumb:active {
|
|
80
|
+
background-clip: padding-box;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Cursor */
|
|
84
|
+
::-webkit-scrollbar-track-piece,
|
|
85
|
+
::-webkit-scrollbar-track-piece:hover,
|
|
86
|
+
::-webkit-scrollbar-track-piece:active {
|
|
87
|
+
cursor: default;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
::-webkit-scrollbar-thumb:vertical,
|
|
91
|
+
::-webkit-scrollbar-thumb:vertical:hover,
|
|
92
|
+
::-webkit-scrollbar-thumb:vertical:active {
|
|
93
|
+
cursor: ns-resize;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
::-webkit-scrollbar-thumb:horizontal,
|
|
97
|
+
::-webkit-scrollbar-thumb:horizontal:hover,
|
|
98
|
+
::-webkit-scrollbar-thumb:horizontal:active {
|
|
99
|
+
cursor: ew-resize;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Button */
|
|
103
|
+
::-webkit-scrollbar-button {
|
|
104
|
+
display: none;
|
|
105
|
+
}`
|
|
106
|
+
}) + '\n');
|
|
107
|
+
return `${output.join('\n')}\n`;
|
|
108
|
+
});
|
|
109
|
+
//# sourceMappingURL=scrollbar.generator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scrollbar.generator.js","sourceRoot":"","sources":["../../../src/generators/scrollbar/scrollbar.generator.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,2BAA2B;AAC3B,yDAAyD;AAGzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,EAAE;AACF,sDAAsD;AACtD,qBAAqB;AAErB,6CAA6C;AAC7C,MAAM,CAAC,MAAM,kBAAkB,GAA0C,CAAC,MAAM,EAAE,EAAE,CAClF,YAAY,CAA2B,WAAW,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;IAC7E,MAAM,CAAC,IAAI,CACT,gBAAgB,CAAC;QACf,IAAI,EAAE,oBAAoB;QAC1B,IAAI,EAAE,uBAAuB,MAAM,CAAC,SAAS;iCACpB,MAAM,CAAC,aAAa;iCACpB,MAAM,CAAC,aAAa;;;;;;;4BAOzB,MAAM,CAAC,mBAAmB;6BACzB,MAAM,CAAC,UAAU;mCACX,MAAM,CAAC,eAAe;oCACrB,MAAM,CAAC,gBAAgB;gCAC3B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+E/C;KACG,CAAC,GAAG,IAAI,CACV,CAAC;IAEF,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AAClC,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export type ScrollbarGeneratorParams = {
|
|
2
|
+
areaWidth?: number;
|
|
3
|
+
thumbSizeBase?: number;
|
|
4
|
+
thumbSizeOver?: number;
|
|
5
|
+
thumbMinSize?: number;
|
|
6
|
+
scrollbarBackground?: string;
|
|
7
|
+
thumbColor?: string;
|
|
8
|
+
thumbColorHover?: string;
|
|
9
|
+
thumbColorActive?: string;
|
|
10
|
+
buildPath?: string;
|
|
11
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scrollbar.types.js","sourceRoot":"","sources":["../../../src/generators/scrollbar/scrollbar.types.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,uBAAuB;AACvB,yDAAyD"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/* =================================================== */
|
|
2
|
+
/* TOKENS → HANDLERS → BASIC */
|
|
3
|
+
/* =================================================== */
|
|
4
|
+
import { tab } from '../../../utils/formats.utils.js';
|
|
5
|
+
import { toSpaceCase } from '../../../utils/strings.utils.js';
|
|
6
|
+
import { CustomFormatterCategory } from '../types/format.types.js';
|
|
7
|
+
import { getFileOutput } from '../utils/formats.utils.js';
|
|
8
|
+
//
|
|
9
|
+
// ---------------------------------------------------
|
|
10
|
+
// HANDLER FUNCTION
|
|
11
|
+
// Renders basic tokens based on a given context
|
|
12
|
+
export const basicHandler = ({ name, category, type, formatArgs, tokens, config }) => getFileOutput({
|
|
13
|
+
name,
|
|
14
|
+
category,
|
|
15
|
+
config,
|
|
16
|
+
parser: (output, wrapper, definer) => {
|
|
17
|
+
let code = wrapper({
|
|
18
|
+
name: category !== CustomFormatterCategory.CSS ? name : undefined,
|
|
19
|
+
code: definer({ type, tokens, options: formatArgs?.options })
|
|
20
|
+
});
|
|
21
|
+
if (name === 'Other') {
|
|
22
|
+
const groupedTokens = tokens.reduce((acc, token) => {
|
|
23
|
+
const type = token.$type;
|
|
24
|
+
if (!acc[type || '']) {
|
|
25
|
+
acc[type || ''] = [];
|
|
26
|
+
}
|
|
27
|
+
acc[type || ''].push(token);
|
|
28
|
+
return acc;
|
|
29
|
+
}, {});
|
|
30
|
+
if (category === CustomFormatterCategory.CSS) {
|
|
31
|
+
code = Object.values(groupedTokens)
|
|
32
|
+
.map((tokens) => wrapper({
|
|
33
|
+
code: definer({ type, tokens, indent: tab(), options: formatArgs?.options })
|
|
34
|
+
}))
|
|
35
|
+
.join('\n');
|
|
36
|
+
}
|
|
37
|
+
else {
|
|
38
|
+
code = wrapper({
|
|
39
|
+
name,
|
|
40
|
+
code: Object.entries(groupedTokens)
|
|
41
|
+
.map(([groupName, tokens], index) => wrapper({
|
|
42
|
+
name: category === CustomFormatterCategory.JS ? groupName : toSpaceCase(groupName),
|
|
43
|
+
code: definer({ type, tokens, indent: tab(2), options: formatArgs?.options }),
|
|
44
|
+
indent: tab()
|
|
45
|
+
}) +
|
|
46
|
+
(index < Object.entries(groupedTokens).length - 1 &&
|
|
47
|
+
category === CustomFormatterCategory.JS
|
|
48
|
+
? ','
|
|
49
|
+
: ''))
|
|
50
|
+
.join('\n')
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
output.push(code);
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
//# sourceMappingURL=basic.handler.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"basic.handler.js","sourceRoot":"","sources":["../../../../src/generators/tokens/handlers/basic.handler.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
/* =================================================== */
|
|
2
|
+
/* TOKENS → HANDLERS → COLOR */
|
|
3
|
+
/* =================================================== */
|
|
4
|
+
import { tab } from '../../../utils/formats.utils.js';
|
|
5
|
+
import { capitalize } from '../../../utils/strings.utils.js';
|
|
6
|
+
import { CustomFormatterCategory, JsCustomFormatterType } from '../types/format.types.js';
|
|
7
|
+
import { getColorScheme } from '../utils/color-tokens.utils.js';
|
|
8
|
+
import { getFileOutput } from '../utils/formats.utils.js';
|
|
9
|
+
//
|
|
10
|
+
// ---------------------------------------------------
|
|
11
|
+
// HANDLER FUNCTION
|
|
12
|
+
// Renders color tokens based on a given context
|
|
13
|
+
export const colorHandler = async ({ name, category, type, formatArgs, tokens, config }) => getFileOutput({
|
|
14
|
+
name,
|
|
15
|
+
category,
|
|
16
|
+
config,
|
|
17
|
+
parser: (output, wrapper, definer) => {
|
|
18
|
+
// Get the options from the format arguments
|
|
19
|
+
const { options } = formatArgs;
|
|
20
|
+
const { designData } = options;
|
|
21
|
+
// Parse color scheme tokens
|
|
22
|
+
if (category !== CustomFormatterCategory.JS || type !== JsCustomFormatterType.VARIABLE) {
|
|
23
|
+
const colorScheme = getColorScheme(tokens, category === CustomFormatterCategory.JS ? 'pascal' : 'kebab');
|
|
24
|
+
const parsers = {
|
|
25
|
+
css: () => {
|
|
26
|
+
// no method case
|
|
27
|
+
if (!designData.colorScheme?.method) {
|
|
28
|
+
output.push(wrapper({
|
|
29
|
+
code: definer({
|
|
30
|
+
tokens: colorScheme[designData.colorScheme?.default]
|
|
31
|
+
})
|
|
32
|
+
}) + '\n');
|
|
33
|
+
}
|
|
34
|
+
// media and combined methods
|
|
35
|
+
if (['media', 'combined'].includes(designData.colorScheme?.method)) {
|
|
36
|
+
output.push(wrapper({
|
|
37
|
+
code: definer({
|
|
38
|
+
tokens: colorScheme[designData.colorScheme?.default]
|
|
39
|
+
})
|
|
40
|
+
}) + '\n');
|
|
41
|
+
Object.entries(colorScheme).forEach(([scheme, tokens]) => {
|
|
42
|
+
output.push(`@media (prefers-color-scheme: ${scheme}) {`);
|
|
43
|
+
output.push(wrapper({
|
|
44
|
+
code: definer({ tokens, indent: tab(2) }),
|
|
45
|
+
indent: tab()
|
|
46
|
+
}));
|
|
47
|
+
output.push('}\n');
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
// class and combined methods
|
|
51
|
+
if (['class', 'combined'].includes(designData.colorScheme?.method)) {
|
|
52
|
+
Object.entries(colorScheme).forEach(([scheme, tokens]) => {
|
|
53
|
+
output.push(wrapper({
|
|
54
|
+
name: `html.${scheme}`,
|
|
55
|
+
code: definer({ tokens })
|
|
56
|
+
}) + '\n');
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
scss: () => {
|
|
61
|
+
output.push(wrapper({
|
|
62
|
+
name: 'color-scheme',
|
|
63
|
+
code: Object.entries(colorScheme)
|
|
64
|
+
.map(([scheme, tokens]) => wrapper({
|
|
65
|
+
name: scheme,
|
|
66
|
+
code: definer({ tokens, indent: tab(2) }),
|
|
67
|
+
indent: tab()
|
|
68
|
+
}))
|
|
69
|
+
.join('\n')
|
|
70
|
+
}) + '\n');
|
|
71
|
+
},
|
|
72
|
+
js: () => {
|
|
73
|
+
output.push(wrapper({
|
|
74
|
+
name: 'Color Scheme',
|
|
75
|
+
code: Object.entries(colorScheme)
|
|
76
|
+
.map(([scheme, tokens], index) => wrapper({
|
|
77
|
+
name: scheme,
|
|
78
|
+
code: definer({ type, tokens, indent: tab(2) }),
|
|
79
|
+
indent: tab()
|
|
80
|
+
}) + (index < Object.entries(colorScheme).length - 1 ? ',' : ''))
|
|
81
|
+
.join('\n')
|
|
82
|
+
}) + '\n');
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
if (category) {
|
|
86
|
+
parsers[category]();
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
// Single color tokens
|
|
90
|
+
const nonSchemeTokens = tokens.filter(({ attributes }) => attributes?.type !== 'scheme');
|
|
91
|
+
const jsVariableTokens = category === CustomFormatterCategory.JS && type === JsCustomFormatterType.VARIABLE
|
|
92
|
+
? tokens
|
|
93
|
+
.filter(({ attributes }) => attributes?.type === 'scheme' &&
|
|
94
|
+
attributes?.item === designData.colorScheme.default)
|
|
95
|
+
.map((token) => {
|
|
96
|
+
token.path.splice(1, 2);
|
|
97
|
+
return {
|
|
98
|
+
...token,
|
|
99
|
+
name: token.name.replace(`Scheme${capitalize(designData.colorScheme.default)}`, ''),
|
|
100
|
+
path: token.path
|
|
101
|
+
};
|
|
102
|
+
})
|
|
103
|
+
: [];
|
|
104
|
+
const singleTokens = [...nonSchemeTokens, ...jsVariableTokens];
|
|
105
|
+
if (singleTokens.length) {
|
|
106
|
+
output.push(wrapper({
|
|
107
|
+
name: category !== CustomFormatterCategory.CSS ? name : undefined,
|
|
108
|
+
code: definer({
|
|
109
|
+
type,
|
|
110
|
+
tokens: singleTokens,
|
|
111
|
+
options
|
|
112
|
+
})
|
|
113
|
+
}));
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
//# sourceMappingURL=color.handler.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color.handler.js","sourceRoot":"","sources":["../../../../src/generators/tokens/handlers/color.handler.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/* =================================================== */
|
|
2
|
+
/* TOKENS → HANDLERS */
|
|
3
|
+
/* =================================================== */
|
|
4
|
+
export * from './basic.handler.js';
|
|
5
|
+
export * from './color.handler.js';
|
|
6
|
+
export * from './utopia.handler.js';
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/generators/tokens/handlers/index.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,uBAAuB;AACvB,yDAAyD;AAEzD,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/* =================================================== */
|
|
2
|
+
/* TOKENS → HANDLERS → UTOPIA */
|
|
3
|
+
/* =================================================== */
|
|
4
|
+
import { tab } from '../../../utils/formats.utils.js';
|
|
5
|
+
import { CustomFormatterCategory, JsCustomFormatterType } from '../types/format.types.js';
|
|
6
|
+
import { getFileOutput } from '../utils/formats.utils.js';
|
|
7
|
+
import { mapUtopiaTokenValuesToMax, mapUtopiaTokenValuesToMin, mapUtopiaTokenValuesToResponsive, separateUtopiaAndBasicTokens } from '../utils/utopia-tokens.utils.js';
|
|
8
|
+
//
|
|
9
|
+
// ---------------------------------------------------
|
|
10
|
+
// HANDLER FUNCTION
|
|
11
|
+
// Renders Utopia tokens based on a given context
|
|
12
|
+
export const utopiaHandler = async ({ name, category, type, formatArgs, tokens, config }) => getFileOutput({
|
|
13
|
+
name,
|
|
14
|
+
category,
|
|
15
|
+
config,
|
|
16
|
+
parser: (output, wrapper, definer) => {
|
|
17
|
+
// Get the options from the format arguments
|
|
18
|
+
const { options } = formatArgs;
|
|
19
|
+
// Separate Utopia and basic tokens
|
|
20
|
+
const { utopiaTokens, basicTokens } = separateUtopiaAndBasicTokens(tokens);
|
|
21
|
+
const { utopiaScheme, baseFontSize } = options?.designData || {};
|
|
22
|
+
const { minViewportW, maxViewportW } = utopiaScheme;
|
|
23
|
+
const separation = [CustomFormatterCategory.CSS, CustomFormatterCategory.SCSS].includes(category) ||
|
|
24
|
+
type === JsCustomFormatterType.STATIC;
|
|
25
|
+
if (separation) {
|
|
26
|
+
const tokens = {
|
|
27
|
+
Min: {
|
|
28
|
+
tokens: mapUtopiaTokenValuesToMin(utopiaTokens),
|
|
29
|
+
media: `(max-width: ${minViewportW - 1}px)`
|
|
30
|
+
},
|
|
31
|
+
Utopia: {
|
|
32
|
+
tokens: mapUtopiaTokenValuesToResponsive(utopiaTokens, baseFontSize, utopiaScheme),
|
|
33
|
+
media: `(min-width: ${minViewportW}px) and (max-width: ${maxViewportW}px)`
|
|
34
|
+
},
|
|
35
|
+
Max: {
|
|
36
|
+
tokens: mapUtopiaTokenValuesToMax(utopiaTokens),
|
|
37
|
+
media: `(min-width: ${maxViewportW + 1}px)`
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
const variants = Object.entries(tokens).map(([key, value]) => ({
|
|
41
|
+
suffix: key,
|
|
42
|
+
tokens: value.tokens,
|
|
43
|
+
media: value.media
|
|
44
|
+
}));
|
|
45
|
+
variants.forEach(({ suffix, tokens, media }, index) => {
|
|
46
|
+
const separator = category === CustomFormatterCategory.JS ? ' ' : '-';
|
|
47
|
+
const extraNewline = index < variants.length - 1 || basicTokens.length;
|
|
48
|
+
if (category === CustomFormatterCategory.CSS && media) {
|
|
49
|
+
output.push(`@media all and ${media} {`);
|
|
50
|
+
}
|
|
51
|
+
output.push(wrapper({
|
|
52
|
+
name: category !== CustomFormatterCategory.CSS
|
|
53
|
+
? name +
|
|
54
|
+
separator +
|
|
55
|
+
(category === CustomFormatterCategory.JS ? suffix : suffix.toLowerCase())
|
|
56
|
+
: undefined,
|
|
57
|
+
code: definer({
|
|
58
|
+
type,
|
|
59
|
+
tokens,
|
|
60
|
+
indent: category === CustomFormatterCategory.CSS ? tab(2) : undefined
|
|
61
|
+
}),
|
|
62
|
+
indent: category === CustomFormatterCategory.CSS ? tab(1) : undefined
|
|
63
|
+
}) + (extraNewline && category !== CustomFormatterCategory.CSS ? '\n' : ''));
|
|
64
|
+
if (category === CustomFormatterCategory.CSS && media) {
|
|
65
|
+
output.push(`}${extraNewline ? '\n' : ''}`);
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
// Print out basic tokens (if no separation, print out all the tokens as basic)
|
|
70
|
+
const restTokens = separation ? basicTokens : tokens;
|
|
71
|
+
if (restTokens.length) {
|
|
72
|
+
output.push(wrapper({
|
|
73
|
+
name: category !== CustomFormatterCategory.CSS ? name : undefined,
|
|
74
|
+
code: definer({ type, tokens: restTokens, options })
|
|
75
|
+
}));
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
//# sourceMappingURL=utopia.handler.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utopia.handler.js","sourceRoot":"","sources":["../../../../src/generators/tokens/handlers/utopia.handler.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,gCAAgC;AAChC,yDAAyD;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAEL,uBAAuB,EACvB,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EACL,yBAAyB,EACzB,yBAAyB,EACzB,gCAAgC,EAChC,4BAA4B,EAC7B,MAAM,iCAAiC,CAAC;AAEzC,EAAE;AACF,sDAAsD;AACtD,mBAAmB;AAEnB,iDAAiD;AACjD,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,EAAE,EAClC,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,MAAM,EACN,MAAM,EACc,EAAmB,EAAE,CACzC,aAAa,CAAC;IACZ,IAAI;IACJ,QAAQ;IACR,MAAM;IACN,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;QACnC,4CAA4C;QAC5C,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC;QAE/B,mCAAmC;QACnC,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,4BAA4B,CAAC,MAAM,CAAC,CAAC;QAC3E,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,OAAO,EAAE,UAAU,IAAI,EAAE,CAAC;QACjE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC;QACpD,MAAM,UAAU,GACd,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAC9E,IAAI,KAAK,qBAAqB,CAAC,MAAM,CAAC;QAExC,IAAI,UAAU,EAAE,CAAC;YACf,MAAM,MAAM,GAAG;gBACb,GAAG,EAAE;oBACH,MAAM,EAAE,yBAAyB,CAAC,YAAY,CAAC;oBAC/C,KAAK,EAAE,eAAe,YAAY,GAAG,CAAC,KAAK;iBAC5C;gBACD,MAAM,EAAE;oBACN,MAAM,EAAE,gCAAgC,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC;oBAClF,KAAK,EAAE,eAAe,YAAY,uBAAuB,YAAY,KAAK;iBAC3E;gBACD,GAAG,EAAE;oBACH,MAAM,EAAE,yBAAyB,CAAC,YAAY,CAAC;oBAC/C,KAAK,EAAE,eAAe,YAAY,GAAG,CAAC,KAAK;iBAC5C;aACF,CAAC;YAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;gBAC7D,MAAM,EAAE,GAAG;gBACX,MAAM,EAAE,KAAK,CAAC,MAAM;gBACpB,KAAK,EAAE,KAAK,CAAC,KAAK;aACnB,CAAC,CAAC,CAAC;YAEJ,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;gBACpD,MAAM,SAAS,GAAG,QAAQ,KAAK,uBAAuB,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;gBACtE,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,WAAW,CAAC,MAAM,CAAC;gBAEvE,IAAI,QAAQ,KAAK,uBAAuB,CAAC,GAAG,IAAI,KAAK,EAAE,CAAC;oBACtD,MAAM,CAAC,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,CAAC;gBAC3C,CAAC;gBACD,MAAM,CAAC,IAAI,CACT,OAAO,CAAC;oBACN,IAAI,EACF,QAAQ,KAAK,uBAAuB,CAAC,GAAG;wBACtC,CAAC,CAAC,IAAI;4BACJ,SAAS;4BACT,CAAC,QAAQ,KAAK,uBAAuB,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;wBAC3E,CAAC,CAAC,SAAS;oBACf,IAAI,EAAE,OAAO,CAAC;wBACZ,IAAI;wBACJ,MAAM;wBACN,MAAM,EAAE,QAAQ,KAAK,uBAAuB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;qBACtE,CAAC;oBACF,MAAM,EAAE,QAAQ,KAAK,uBAAuB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;iBACtE,CAAC,GAAG,CAAC,YAAY,IAAI,QAAQ,KAAK,uBAAuB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAC5E,CAAC;gBACF,IAAI,QAAQ,KAAK,uBAAuB,CAAC,GAAG,IAAI,KAAK,EAAE,CAAC;oBACtD,MAAM,CAAC,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;gBAC9C,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAED,+EAA+E;QAC/E,MAAM,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC;QACrD,IAAI,UAAU,CAAC,MAAM,EAAE,CAAC;YACtB,MAAM,CAAC,IAAI,CACT,OAAO,CAAC;gBACN,IAAI,EAAE,QAAQ,KAAK,uBAAuB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;gBACjE,IAAI,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;aACrD,CAAC,CACH,CAAC;QACJ,CAAC;IACH,CAAC;CACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* =================================================== */
|
|
2
|
+
/* TOKENS → PLATFORMS → CSS → FORMATS */
|
|
3
|
+
/* =================================================== */
|
|
4
|
+
import { CustomFormatterCategory } from '../../types/format.types.js';
|
|
5
|
+
import { allFormatterTemplate, coreFormatterTemplate, othersFormatterTemplate } from '../../utils/formats.utils.js';
|
|
6
|
+
// This is the list of formatters for the CSS platform.
|
|
7
|
+
export const cssFormatters = [
|
|
8
|
+
...Object.entries({
|
|
9
|
+
// Formatter for all tokens
|
|
10
|
+
all: allFormatterTemplate,
|
|
11
|
+
// Formatter for tokens with a core handler
|
|
12
|
+
core: coreFormatterTemplate,
|
|
13
|
+
// Formatter for non-core tokens
|
|
14
|
+
others: othersFormatterTemplate
|
|
15
|
+
}).map(([name, getFormatter]) => getFormatter({
|
|
16
|
+
name,
|
|
17
|
+
category: CustomFormatterCategory.CSS
|
|
18
|
+
}))
|
|
19
|
+
];
|
|
20
|
+
//# sourceMappingURL=formats.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formats.js","sourceRoot":"","sources":["../../../../../src/generators/tokens/platforms/css/formats.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,wCAAwC;AACxC,yDAAyD;AAGzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EACL,oBAAoB,EACpB,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,8BAA8B,CAAC;AAEtC,uDAAuD;AACvD,MAAM,CAAC,MAAM,aAAa,GAAa;IACrC,GAAG,MAAM,CAAC,OAAO,CAAC;QAChB,2BAA2B;QAC3B,GAAG,EAAE,oBAAoB;QAEzB,2CAA2C;QAC3C,IAAI,EAAE,qBAAqB;QAE3B,gCAAgC;QAChC,MAAM,EAAE,uBAAuB;KAChC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,YAAY,CAAC,EAAE,EAAE,CAC9B,YAAY,CAAC;QACX,IAAI;QACJ,QAAQ,EAAE,uBAAuB,CAAC,GAAG;KACtC,CAAC,CACH;CACF,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* =================================================== */
|
|
2
|
+
/* TOKENS → PLATFORMS → CSS */
|
|
3
|
+
/* =================================================== */
|
|
4
|
+
// This is the platform context getter for the CSS platform.
|
|
5
|
+
// It returns the platform context that brings the following info:
|
|
6
|
+
// • a file with all tokens should be created;
|
|
7
|
+
// • a file for each token type should be created
|
|
8
|
+
// • a custom file for the root font size should be created.
|
|
9
|
+
export const css = ({ prefix, designData }) => ({
|
|
10
|
+
config: {
|
|
11
|
+
prefix,
|
|
12
|
+
options: {
|
|
13
|
+
prefix,
|
|
14
|
+
designData
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
allTokensFile: true,
|
|
18
|
+
tokenTypeFiles: true
|
|
19
|
+
});
|
|
20
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/generators/tokens/platforms/css/index.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,8BAA8B;AAC9B,yDAAyD;AAIzD,4DAA4D;AAC5D,kEAAkE;AAClE,8CAA8C;AAC9C,iDAAiD;AACjD,4DAA4D;AAC5D,MAAM,CAAC,MAAM,GAAG,GAA0B,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;IACrE,MAAM,EAAE;QACN,MAAM;QACN,OAAO,EAAE;YACP,MAAM;YACN,UAAU;SACX;KACF;IACD,aAAa,EAAE,IAAI;IACnB,cAAc,EAAE,IAAI;CACrB,CAAC,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/* =================================================== */
|
|
2
|
+
/* TOKENS → PLATFORMS → CSS → UTILS */
|
|
3
|
+
/* =================================================== */
|
|
4
|
+
import { cssSelectorBlock } from '../../../../utils/formats.utils.js';
|
|
5
|
+
//
|
|
6
|
+
// ---------------------------------------------------
|
|
7
|
+
// OUTPUT FUNCTIONS
|
|
8
|
+
// This function wraps a code block in a given CSS selector.
|
|
9
|
+
export const wrapper = ({ name = ':root', code, indent = '' }) => cssSelectorBlock({ name, code, indent });
|
|
10
|
+
// This function defines the list of custom properties.
|
|
11
|
+
export const definer = ({ tokens, indent = ' ' }) => tokens.map(({ name, $value }) => `${indent}--${name}: ${$value};`).join('\n');
|
|
12
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/generators/tokens/platforms/css/utils.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,sCAAsC;AACtC,yDAAyD;AAEzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAGtE,EAAE;AACF,sDAAsD;AACtD,mBAAmB;AAEnB,4DAA4D;AAC5D,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,EAAE,EAAiB,EAAU,EAAE,CACtF,gBAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;AAE3C,uDAAuD;AACvD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,EAAiB,EAAU,EAAE,CAC1E,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,MAAM,KAAK,IAAI,KAAK,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/* =================================================== */
|
|
2
|
+
/* TOKENS → PLATFORMS → FORMATS */
|
|
3
|
+
/* =================================================== */
|
|
4
|
+
export * from './css/formats.js';
|
|
5
|
+
export * from './js/formats.js';
|
|
6
|
+
export * from './scss/formats.js';
|
|
7
|
+
//# sourceMappingURL=formats.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formats.js","sourceRoot":"","sources":["../../../../src/generators/tokens/platforms/formats.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,kCAAkC;AAClC,yDAAyD;AAEzD,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { PlatformConfig } from 'style-dictionary/types';
|
|
2
|
+
import { PlatformType, TokensDesignData } from '../tokens.types.js';
|
|
3
|
+
export declare const getPlatformConfigs: ({ platforms, buildPath, designData, prefix }: {
|
|
4
|
+
platforms: PlatformType[];
|
|
5
|
+
buildPath: string;
|
|
6
|
+
designData: TokensDesignData;
|
|
7
|
+
prefix: string;
|
|
8
|
+
}) => Promise<Partial<Record<PlatformType, PlatformConfig>>>;
|