Feature/vnys 2737 build scripts

design-tokens/README.md

@@ -1,19 +1,3 @@
-Design tokens
-=============
+# EDS Design Tokens
 
-The design tokens in this folder are exported from the [Figma Tokens][ft] plugin in Figma. Edit the files in JSON or in the Figma Plugin, but don’t edit the files in the readonly folder, they’re generated with javascript.
-
-The tokens will eventually be made available on CDN and NPM, but for now they’re intended for the EDS Core Team in the work with EDS 2.0.
-
-To use the plugin:
-
-1. Open the plugin in Figma, and choose Github for `token storage`.
-1. Add new credentials
-1. Generate a personal access token on Github with the `repo` scope for the `access token` field
-1. Add `equinor/design-system` as repository
-1. Add `packages/eds-tokens/figma` as `file path`
-
-For questions or comments use [#eds-design-system][slack] on Slack or <abbr title="Direct message">DM</abbr> @vnys
-
-[slack]: https://equinor.slack.com/archives/CJT20H1B9
-[ft]: https://www.figmatokens.com/
+Here be dragons …

design-tokens/build-tokens.js

@@ -0,0 +1,114 @@
+const StyleDictionary = require('style-dictionary')
+
+const extractState = (styleObject, state, attributeName, value) => {
+  const newStyleObject = { ...styleObject }
+
+  if (!newStyleObject.states) {
+    newStyleObject.states = {}
+  }
+
+  if (!newStyleObject.states[state]) {
+    newStyleObject.states[state] = {}
+  }
+
+  newStyleObject.states[state] = {
+    ...newStyleObject.states[state],
+    [attributeName]: value,
+  }
+
+  return newStyleObject
+}
+
+const extractStyle = (variantObject, style, state, attributeName, value) => {
+  const newVariantObject = { ...variantObject }
+
+  newVariantObject[style] = extractState(
+    newVariantObject[style] || {},
+    state,
+    attributeName,
+    value,
+  )
+
+  return newVariantObject
+}
+
+StyleDictionary.registerFormat({
+  name: 'js/custom',
+  formatter: function (dictionary, config) {
+    let styleObject = {}
+
+    dictionary.allTokens.forEach((token) => {
+      const component = token.path[1]
+      const variant = token.path[2] // primary, secondary, danger, allVariants or elements
+      const style = token.path[3] // filled, outlined, ghost
+      const state = token.path[4] // default, hover, disabled, loading, or allStates
+      const attributeName = token.path[5] // default, hover, disabled, loading
+
+      let componentStyle
+
+      if (variant === 'elements') {
+        console.log('token', token)
+        componentStyle = styleObject['common']
+          ? { ...styleObject['common'] }
+          : {}
+
+        Object.entries(token.value).forEach(([key, value]) => {
+          componentStyle[key] = value
+        })
+
+        styleObject[component]['common'] = componentStyle
+      } else {
+        componentStyle = styleObject[component]
+          ? { ...styleObject[component] }
+          : {}
+
+        componentStyle[variant] = extractStyle(
+          componentStyle[variant] || {},
+          style,
+          state,
+          attributeName,
+          token.value,
+        )
+
+        styleObject[component] = componentStyle
+      }
+    })
+    return 'export const edsTokens = ' + JSON.stringify(styleObject, null, 2)
+  },
+})
+
+/**
+ * Generate a Config
+ */
+const getStyleDictionaryConfig = () => {
+  console.log(`🚧 Compiling tokens`)
+
+  return {
+    source: [
+      '../design-tokens/raw/component/buttonTest.json',
+      '../design-tokens/build/json/shapeTest.json',
+      '../design-tokens/build/json/semanticTest.json',
+    ],
+    platforms: {
+      js: {
+        transformGroup: 'js',
+        buildPath: 'build/js/',
+        files: [
+          {
+            format: 'js/custom',
+            destination: `button.js`,
+          },
+        ],
+      },
+    },
+  }
+}
+
+// APPLY THE CONFIGURATION
+// IMPORTANT: the registration of custom transforms
+// needs to be done _before_ applying the configuration
+
+StyleDictionaryExtended = StyleDictionary.extend(getStyleDictionaryConfig())
+
+// BUILD ALL THE PLATFORMS
+StyleDictionaryExtended.buildAllPlatforms()

design-tokens/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@equinor/eds-design-tokens",
+  "private": true,
+  "version": "1",
+  "author": {
+    "name": "EDS Core Team",
+    "email": "[email protected]"
+  },
+  "scripts": {
+    "create-tokens": "node resolve-compositions.js && node build-tokens.js"
+  },
+  "dependencies": {
+    "style-dictionary": "^3.7.2",
+    "token-transformer": "^0.0.29"
+  }
+}