[#182321458] update tokens (#12)

* pivotal-182321458 update tokens and remove token type

* adjust sd directory structure

* pivotal-182321458 add missing theme keys

* pivotal-182321458
- allow for multiple token files,
- remove at and me token sets for now,
- simplify themeprovider only passing theme key as context

* move tokens again (to make github sync simpler)

* update readme

.eslintignore

@@ -11,6 +11,6 @@ app/javascript/shared/i18n.ts
 config/**/*.js
 vite.config.ts
 node_modules
-sd.config.js
+style-dictionary/config.js
 storybook-static
 dist

config/sd.config.js → config/style-dictionary/config.js

@@ -1,7 +1,7 @@
-const themes = require('./themes.json')
-require('./sd/transforms.js')
-require('./sd/transformGroups.js')
-require('./sd/parsers.js')
+const themes = require('../themes.json')
+require('./transforms.js')
+require('./transformGroups.js')
+require('./parsers.js')
 
 const getFileConfig = (platform, format) => {
   const themeFiles = themes.map((theme) => ({

config/sd/parsers.js → config/style-dictionary/parsers.js

@@ -12,7 +12,7 @@ StyleDictionary.registerParser({
     // strip away the global key for global token set but keep the themes nested
     // this is necessary, because the references from Figma Tokens do not include the token set key
     // e.g. {Primary.Green 800} would not work
-    let transformedTokens = tokens['global']
+    let transformedTokens = tokens['global'] || {}
 
     Object.keys(tokens).forEach((set) => {
       // only add the token set if it is defined as a valid theme

config/sd/transformGroups.js → config/style-dictionary/transformGroups.js

@@ -5,7 +5,6 @@ StyleDictionary.registerTransformGroup({
   transforms: [
     ...StyleDictionary.transformGroup['web'],
     'name/theme',
-    'name/tokenType',
     'size/pxToRem',
     'value/quote',
     'value/boxShadow',
@@ -18,7 +17,6 @@ StyleDictionary.registerTransformGroup({
     ...StyleDictionary.transformGroup['js'],
     'name/cti/kebab',
     'name/theme',
-    'name/tokenType',
     'size/pxToRem',
     'value/boxShadow',
   ],

config/sd/transforms.js → config/style-dictionary/transforms.js

@@ -50,19 +50,6 @@ StyleDictionary.registerTransform({
   },
 })
 
-// add token type to name
-StyleDictionary.registerTransform({
-  name: 'name/tokenType',
-  type: 'name',
-  matcher: function (token) {
-    return token.type
-  },
-  transformer: function (token) {
-    const prefix = token.name.split('-')[0]
-    return token.name.replace(prefix, `${prefix}-${token.type}`)
-  },
-})
-
 // TODO: output typography styles as mixin
 StyleDictionary.registerTransform({
   name: 'value/typography',

config/themes.json

@@ -1 +1 @@
-["at", "me", "org"]
+["org"]