-
Notifications
You must be signed in to change notification settings - Fork 6
/
render-themes.js
66 lines (56 loc) 路 2.04 KB
/
render-themes.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { resolve } from 'path';
import StyleDictionaryPackage from 'style-dictionary';
import fs from 'fs';
import _ from 'lodash';
import R from 'ramda';
import { removeDirSync } from 'remove-dir-safe';
const
propertiesPath = resolve('../../node_modules/@vonage/vvd-design-tokens-properties/dist'),
CUSTOM_SCHEMES_FORMAT = 'custom/web/scss/schemes',
OUTPUT_FOLDER = 'build/scss/schemes';
StyleDictionaryPackage.registerFormat({
name: CUSTOM_SCHEMES_FORMAT,
formatter: _.template(
fs.readFileSync(resolve('templates/web-scss-schemes.template'))
),
});
// HAVE THE STYLE DICTIONARY CONFIG DYNAMICALLY GENERATED
function getStyleDictionaryConfig(scheme, scope) {
return {
source: [
`${propertiesPath}/sizing/**/*.json`,
`${propertiesPath}/color/**/*.json`,
`${propertiesPath}/shadow/**/*.json`,
`${propertiesPath}/themes/${scheme}/**/${scope}.json`,
],
platforms: {
web: {
prefix: 'vvd',
transformGroup: 'css',
buildPath: `${resolve()}/`,
files: [
{
destination: `${OUTPUT_FOLDER}/${scheme}/${scope}.scss`,
format: CUSTOM_SCHEMES_FORMAT,
filter: token => token.attributes.category !== 'alias'
}
]
}
}
};
}
const curriedGetStyleDictionaryConfig = R.curry(getStyleDictionaryConfig);
const baseConfig = curriedGetStyleDictionaryConfig(R.__, 'main');
const alternateConfig = curriedGetStyleDictionaryConfig(R.__, 'alternate');
// PROCESS THE DESIGN TOKENS FOR THE DIFFERENT SCHEMES AND PLATFORMS
// TODO: [VIV-41] add accessible colors scheme
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export const render = () => {
removeDirSync(OUTPUT_FOLDER, { recursive: true });
['light', 'dark'].forEach(function (scheme) {
console.log(`\n馃帹\x1b[2mProcessing: [\x1b[0m\x1b[36m${scheme}\x1b[0m\x1b[2m]\x1b[0m`);
StyleDictionaryPackage.extend(baseConfig(scheme)).buildPlatform('web');
StyleDictionaryPackage.extend(alternateConfig(scheme)).buildPlatform('web');
console.log('\n\x1b[2m================================================================\x1b[0m');
});
};