fix: lint errors in harmonium.config.js and in output

revelrylabs · Jul 19, 2020 · 26c68ab · 26c68ab
1 parent f3cce58
commit 26c68ab
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
 }