diff --git a/design-tokens.config.json b/design-tokens.config.json index 97d2bbb0..a97a9c3f 100644 --- a/design-tokens.config.json +++ b/design-tokens.config.json @@ -2,7 +2,7 @@ "source": ["./design-tokens/**/*.json"], "platforms": { "scss": { - "transformGroup": "scss", + "transformGroup": "scss-capitalized", "buildPath": "./settings-templates/", "files": [ { @@ -18,7 +18,7 @@ ] }, "scss-defaults": { - "transformGroup": "scss", + "transformGroup": "scss-capitalized", "buildPath": "./scss/vars/", "files": [ { diff --git a/package.json b/package.json index 29be6f11..40174a06 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,8 @@ "react-dom": ">=15.3.0", "sassy-npm-importer": "^3.0.0", "style-dictionary": "^2.8.3", - "tempy": "^0.5.0" + "tempy": "^0.5.0", + "tinycolor2": "^1.4.1" }, "bin": { "harmonium": "./src/cli/index.js" diff --git a/src/cli/index.js b/src/cli/index.js index 16b13cf0..9bc21a48 100755 --- a/src/cli/index.js +++ b/src/cli/index.js @@ -28,9 +28,7 @@ program const config = await configuration.createConfiguration() - const configModule = `module.exports = ${util.inspect(config, { - depth: null, - })}` + const configModule = `module.exports = ${JSON.stringify(config, null, 2)}` const writeFileAsync = promisify(fs.writeFile) diff --git a/src/configuration/index.js b/src/configuration/index.js index a4e767be..dfd0fb2c 100644 --- a/src/configuration/index.js +++ b/src/configuration/index.js @@ -71,7 +71,9 @@ async function createAssets(configuration) { let jsPlatform = designTokensConfig.platforms.js scss = merge(scss, {buildPath: configuration.platforms.scss.buildPath}) - jsPlatform = merge(jsPlatform, {buildPath: configuration.platforms.js.buildPath}) + jsPlatform = merge(jsPlatform, { + buildPath: configuration.platforms.js.buildPath, + }) const StyleDictionary = require('./styleDictionary') .prepareStyleDictionary() diff --git a/src/configuration/styleDictionary.js b/src/configuration/styleDictionary.js index 28d45e96..8d6224a8 100644 --- a/src/configuration/styleDictionary.js +++ b/src/configuration/styleDictionary.js @@ -1,4 +1,5 @@ const StyleDictionary = require('style-dictionary') +const Color = require('tinycolor2') function fileHeader(options, commentStyle) { let to_ret = '' @@ -48,6 +49,10 @@ function variablesWithPrefix(prefix, properties, suffix, commentStyle) { .join('\n') } +function isColor(prop) { + return prop.attributes.category === 'color' +} + function prepareStyleDictionary() { StyleDictionary.registerTransformGroup({ name: 'docs', @@ -69,17 +74,44 @@ function prepareStyleDictionary() { StyleDictionary.registerFilter({ name: 'isColor', matcher(prop) { - return prop.attributes.category === 'color' + return isColor(prop) }, }) StyleDictionary.registerFilter({ name: 'isNotColor', matcher(prop) { - return prop.attributes.category !== 'color' + return !isColor(prop) + }, + }) + + StyleDictionary.registerTransform({ + name: 'color/css-capitalized', + type: 'value', + matcher: isColor, + transformer: (prop) => { + const color = Color(prop.value) + + if (color.getAlpha() === 1) { + return color.toHexString().toUpperCase() + } else { + return color.toRgbString() + } }, }) + StyleDictionary.registerTransformGroup({ + name: 'scss-capitalized', + transforms: [ + 'attribute/cti', + 'name/cti/kebab', + 'time/seconds', + 'content/icon', + 'size/rem', + 'color/css-capitalized', + ], + }) + return StyleDictionary }