@demos-europe/demosplan-ui 0.3.19 → 0.3.20

package/.idea/shelf/Uncommitted_changes_before_Update_at_17_07_2024_15_21_[Changes]/shelved.patch

@@ -0,0 +1,36 @@
+Index: package.json
+IDEA additional info:
+Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
+<+>{\n  \"name\": \"@demos-europe/demosplan-ui\",\n  \"version\": \"0.3.19\",\n  \"license\": \"MIT\",\n  \"private\": false,\n  \"description\": \"Vue components, Vue directives, Design Token and Scss files to build interfaces for demosPlan.\",\n  \"main\": \"./dist/demosplan-ui.umd.js\",\n  \"dependencies\": {\n    \"@braintree/sanitize-url\": \"^7.0.0\",\n    \"@floating-ui/dom\": \"^1.4.5\",\n    \"@tiptap/core\": \"^2.0.3\",\n    \"@tiptap/extension-bold\": \"^2.0.3\",\n    \"@tiptap/extension-bullet-list\": \"^2.0.3\",\n    \"@tiptap/extension-document\": \"^2.0.3\",\n    \"@tiptap/extension-hard-break\": \"^2.0.3\",\n    \"@tiptap/extension-heading\": \"^2.0.3\",\n    \"@tiptap/extension-history\": \"^2.0.3\",\n    \"@tiptap/extension-italic\": \"^2.0.3\",\n    \"@tiptap/extension-link\": \"^2.0.3\",\n    \"@tiptap/extension-list-item\": \"^2.0.3\",\n    \"@tiptap/extension-mention\": \"^2.0.3\",\n    \"@tiptap/extension-ordered-list\": \"^2.0.3\",\n    \"@tiptap/extension-paragraph\": \"^2.0.3\",\n    \"@tiptap/extension-strike\": \"^2.0.3\",\n    \"@tiptap/extension-table\": \"^2.0.3\",\n    \"@tiptap/extension-table-cell\": \"^2.0.3\",\n    \"@tiptap/extension-table-header\": \"^2.0.3\",\n    \"@tiptap/extension-table-row\": \"^2.0.3\",\n    \"@tiptap/extension-text\": \"^2.0.3\",\n    \"@tiptap/extension-underline\": \"^2.0.3\",\n    \"@tiptap/pm\": \"^2.0.3\",\n    \"@tiptap/suggestion\": \"^2.0.3\",\n    \"@tiptap/vue-2\": \"^2.0.3\",\n    \"@uppy/core\": \"^3.0.1\",\n    \"@uppy/drag-drop\": \"^3.0.0\",\n    \"@uppy/progress-bar\": \"^3.0.0\",\n    \"@uppy/tus\": \"^3.0.1\",\n    \"a11y-datepicker\": \" ^0.9.0\",\n    \"dayjs\": \"^1.11.5\",\n    \"dompurify\": \"^3.0.0\",\n    \"fscreen\": \"^1.2.0\",\n    \"ismobilejs\": \"^1.1.1\",\n    \"lscache\": \"^1.3.2\",\n    \"plyr\": \"^3.7.2\",\n    \"qs\": \"^6.11.0\",\n    \"tippy.js\": \"^6.3.7\",\n    \"uuid\": \"^9.0.0\",\n    \"v-tooltip\": \"2.1.3\",\n    \"vue-click-outside\": \"^1.1.0\",\n    \"vue-multiselect\": \"^2.1.6\",\n    \"vue-omnibox\": \"^0.3.7\",\n    \"vue-sliding-pagination\": \"^1.3.2\",\n    \"vuedraggable\": \"^2.24.3\",\n    \"vuex\": \"^3.6.2\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.21.4\",\n    \"@babel/preset-env\": \"^7.21.4\",\n    \"@babel/preset-react\": \"^7.23.3\",\n    \"@babel/preset-typescript\": \"^7.21.4\",\n    \"@jest/globals\": \"^29.5.0\",\n    \"@jest/transform\": \"^29.5.0\",\n    \"@storybook/addon-actions\": \"7.6.17\",\n    \"@storybook/addon-docs\": \"7.6.17\",\n    \"@storybook/addon-essentials\": \"7.6.17\",\n    \"@storybook/addon-links\": \"7.6.17\",\n    \"@storybook/addon-styling-webpack\": \"^0.0.6\",\n    \"@storybook/vue\": \"7.6.17\",\n    \"@storybook/vue-webpack5\": \"7.6.17\",\n    \"@types/jest\": \"^29.5.1\",\n    \"@types/qs\": \"^6.9.7\",\n    \"@typescript-eslint/eslint-plugin\": \"^5.4.0\",\n    \"@typescript-eslint/parser\": \"^5.4.0\",\n    \"@vue/cli-plugin-typescript\": \"~5.0.0\",\n    \"@vue/eslint-config-typescript\": \"^12.0.0\",\n    \"@vue/test-utils\": \"^1.3.5\",\n    \"@vue/vue2-jest\": \"^29.2.4\",\n    \"@webpack-cli/generators\": \"^3.0.0\",\n    \"autoprefixer\": \"^10.4.14\",\n    \"babel-core\": \"^7.0.0-bridge.0\",\n    \"babel-jest\": \"^29.5.0\",\n    \"babel-loader\": \"^9.1.2\",\n    \"babel-plugin-syntax-jsx\": \"^6.18.0\",\n    \"babel-plugin-transform-vue-jsx\": \"^3.7.0\",\n    \"css-loader\": \"^7.0.0\",\n    \"glob\": \"^10.3.1\",\n    \"jest\": \"^29.5.0\",\n    \"jest-environment-jsdom\": \"^29.3.1\",\n    \"jest-junit\": \"^16.0.0\",\n    \"jest-transform-stub\": \"^2.0.0\",\n    \"js-beautify\": \"^1.14.7\",\n    \"mini-css-extract-plugin\": \"^2.7.0\",\n    \"path\": \"^0.12.7\",\n    \"postcss\": \"^8.4.26\",\n    \"postcss-loader\": \"^8.0.0\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"storybook\": \"7.6.17\",\n    \"storybook-addon-vue-slots\": \"^0.9.21\",\n    \"string-width\": \"7.1.0\",\n    \"style-dictionary\": \"^3.9.2\",\n    \"style-loader\": \"^4.0.0\",\n    \"tailwindcss\": \"^3.2.1\",\n    \"ts-jest\": \"^29.1.0\",\n    \"ts-loader\": \"^9.4.4\",\n    \"typescript\": \"~5.4.2\",\n    \"vue-jest\": \"^3.0.7\",\n    \"vue-loader\": \"^15\",\n    \"vue-template-compiler\": \"^2.7.15\",\n    \"webpack\": \"^5.75.0\",\n    \"webpack-bundle-analyzer\": \"^4.7.0\",\n    \"webpack-cli\": \"^5.0.0\"\n  },\n  \"engines\": {\n    \"node\": \">= 18.13.0\"\n  },\n  \"peerDependencies\": {\n    \"prosemirror-history\": \"^1.3.0\",\n    \"prosemirror-model\": \"^1.18.1\",\n    \"prosemirror-schema-basic\": \"^1.2.0\",\n    \"prosemirror-schema-list\": \"^1.2.2\",\n    \"prosemirror-state\": \"^1.4.1\",\n    \"prosemirror-tables\": \"^1.3.0\",\n    \"prosemirror-utils\": \"^1.2.0\",\n    \"prosemirror-view\": \"^1.28.2\",\n    \"vue\": \"^2.7.15\"\n  },\n  \"peerDependenciesMeta\": {\n    \"prosemirror-history\": {\n      \"optional\": true\n    },\n    \"prosemirror-model\": {\n      \"optional\": true\n    },\n    \"prosemirror-schema-basic\": {\n      \"optional\": true\n    },\n    \"prosemirror-schema-list\": {\n      \"optional\": true\n    },\n    \"prosemirror-state\": {\n      \"optional\": true\n    },\n    \"prosemirror-tables\": {\n      \"optional\": true\n    },\n    \"prosemirror-utils\": {\n      \"optional\": true\n    },\n    \"prosemirror-view\": {\n      \"optional\": true\n    }\n  },\n  \"scripts\": {\n    \"build:storybook\": \"storybook build\",\n    \"build:tokens\": \"node buildTokens.js\",\n    \"prepack\": \"yarn build && yarn build:tokens\",\n    \"storybook\": \"storybook dev -p 6006\",\n    \"build\": \"yarn test && yarn build:prod\",\n    \"build:dev\": \"webpack --mode=development\",\n    \"build:prod\": \"webpack --mode=production --define-process-env-node-env=production\",\n    \"test\": \"jest\",\n    \"watch\": \"webpack --watch\"\n  }\n}\n
+Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
+<+>UTF-8
+===================================================================
+diff --git a/package.json b/package.json
+--- a/package.json	(revision 5c74b3474bb044112bc8eb7b0c99ecedada54235)
++++ b/package.json	(date 1721222454849)
+@@ -1,6 +1,6 @@
+ {
+   "name": "@demos-europe/demosplan-ui",
+-  "version": "0.3.19",
++  "version": "0.3.18",
+   "license": "MIT",
+   "private": false,
+   "description": "Vue components, Vue directives, Design Token and Scss files to build interfaces for demosPlan.",
+@@ -44,7 +44,7 @@
+     "plyr": "^3.7.2",
+     "qs": "^6.11.0",
+     "tippy.js": "^6.3.7",
+-    "uuid": "^9.0.0",
++    "uuid": "^10.0.0",
+     "v-tooltip": "2.1.3",
+     "vue-click-outside": "^1.1.0",
+     "vue-multiselect": "^2.1.6",
+@@ -103,7 +103,7 @@
+     "tailwindcss": "^3.2.1",
+     "ts-jest": "^29.1.0",
+     "ts-loader": "^9.4.4",
+-    "typescript": "~5.4.2",
++    "typescript": "~5.5.3",
+     "vue-jest": "^3.0.7",
+     "vue-loader": "^15",
+     "vue-template-compiler": "^2.7.15",

package/.idea/shelf/Uncommitted_changes_before_Update_at_17_07_2024_15_21__Changes_.xml

@@ -0,0 +1,4 @@
+<changelist name="Uncommitted_changes_before_Update_at_17_07_2024_15_21_[Changes]" date="1721222513247" recycled="true" deleted="true">
+  <option name="PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Update_at_17_07_2024_15_21_[Changes]/shelved.patch" />
+  <option name="DESCRIPTION" value="Uncommitted changes before Update at 17 07 2024 15:21 [Changes]" />
+</changelist>

package/.idea/workspace.xml

@@ -4,10 +4,8 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="0afade99-d5c9-4644-8d94-9e61461e1bbe" name="Changes" comment="chore: fix merge issues">
+    <list default="true" id="0afade99-d5c9-4644-8d94-9e61461e1bbe" name="Changes" comment="chore: prepare release">
       <change beforePath="$PROJECT_DIR$/CHANGELOG.md" beforeDir="false" afterPath="$PROJECT_DIR$/CHANGELOG.md" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/yarn.lock" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -20,7 +18,7 @@
   <component name="Git.Settings">
     <option name="RECENT_BRANCH_BY_REPOSITORY">
       <map>
-        <entry key="$PROJECT_DIR$" value="f_build_as_module" />
+        <entry key="$PROJECT_DIR$" value="f_tw_colors" />
       </map>
     </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -38,49 +36,49 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;SONARLINT_PRECOMMIT_ANALYSIS&quot;: &quot;true&quot;,
-    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;yarn&quot;,
-    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.sourceCode.JavaScript&quot;,
-    &quot;timeTracker.activityTracker&quot;: &quot;null&quot;,
-    &quot;timeTracker.comment&quot;: &quot;&quot;,
-    &quot;timeTracker.inactivityPeriodInMills&quot;: &quot;600000&quot;,
-    &quot;timeTracker.isAutoTrackingEnable&quot;: &quot;false&quot;,
-    &quot;timeTracker.isAutoTrackingTemporaryDisabled&quot;: &quot;false&quot;,
-    &quot;timeTracker.isManualTrackingEnable&quot;: &quot;false&quot;,
-    &quot;timeTracker.isPaused&quot;: &quot;true&quot;,
-    &quot;timeTracker.isPostAfterCommitEnabled&quot;: &quot;false&quot;,
-    &quot;timeTracker.isPostedScheduled&quot;: &quot;true&quot;,
-    &quot;timeTracker.isRunning&quot;: &quot;false&quot;,
-    &quot;timeTracker.isScheduledEnabled&quot;: &quot;false&quot;,
-    &quot;timeTracker.isWhenProjectClosedEnabled&quot;: &quot;false&quot;,
-    &quot;timeTracker.issueId&quot;: &quot;Default&quot;,
-    &quot;timeTracker.issueIdReadable&quot;: &quot;Default&quot;,
-    &quot;timeTracker.pausedTime&quot;: &quot;0&quot;,
-    &quot;timeTracker.query&quot;: &quot;&quot;,
-    &quot;timeTracker.recordedTime&quot;: &quot;0&quot;,
-    &quot;timeTracker.scheduledPeriod&quot;: &quot;19:00:0&quot;,
-    &quot;timeTracker.startTime&quot;: &quot;0&quot;,
-    &quot;timeTracker.timeInMills&quot;: &quot;0&quot;,
-    &quot;timeTracker.type&quot;: &quot;None&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;/home/florian/Dev/demosplan-ui/node_modules/typescript/lib&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "SONARLINT_PRECOMMIT_ANALYSIS": "true",
+    "WebServerToolWindowFactoryState": "false",
+    "git-widget-placeholder": "main",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "yarn",
+    "settings.editor.selected.configurable": "preferences.sourceCode.JavaScript",
+    "timeTracker.activityTracker": "null",
+    "timeTracker.comment": "",
+    "timeTracker.inactivityPeriodInMills": "600000",
+    "timeTracker.isAutoTrackingEnable": "false",
+    "timeTracker.isAutoTrackingTemporaryDisabled": "false",
+    "timeTracker.isManualTrackingEnable": "false",
+    "timeTracker.isPaused": "true",
+    "timeTracker.isPostAfterCommitEnabled": "false",
+    "timeTracker.isPostedScheduled": "true",
+    "timeTracker.isRunning": "false",
+    "timeTracker.isScheduledEnabled": "false",
+    "timeTracker.isWhenProjectClosedEnabled": "false",
+    "timeTracker.issueId": "Default",
+    "timeTracker.issueIdReadable": "Default",
+    "timeTracker.pausedTime": "0",
+    "timeTracker.query": "",
+    "timeTracker.recordedTime": "0",
+    "timeTracker.scheduledPeriod": "19:00:0",
+    "timeTracker.startTime": "0",
+    "timeTracker.timeInMills": "0",
+    "timeTracker.type": "None",
+    "ts.external.directory.path": "/home/florian/Dev/demosplan-ui/node_modules/typescript/lib",
+    "vue.rearranger.settings.migration": "true"
   },
-  &quot;keyToStringList&quot;: {
-    &quot;com.intellij.ide.scratch.ScratchImplUtil$2/New Scratch File&quot;: [
-      &quot;Markdown&quot;
+  "keyToStringList": {
+    "com.intellij.ide.scratch.ScratchImplUtil$2/New Scratch File": [
+      "Markdown"
     ]
   }
-}</component>
+}]]></component>
   <component name="SharedIndexes">
     <attachedChunks>
       <set>
@@ -211,7 +209,10 @@
       <workItem from="1720696714630" duration="599000" />
       <workItem from="1720766569205" duration="1962000" />
       <workItem from="1720777997277" duration="1548000" />
-      <workItem from="1720786658380" duration="1990000" />
+      <workItem from="1720786658380" duration="2854000" />
+      <workItem from="1720790401314" duration="1875000" />
+      <workItem from="1721114731372" duration="1062000" />
+      <workItem from="1721211812675" duration="3247000" />
     </task>
     <task id="LOCAL-00001" summary="chore: update yarn.lock">
       <option name="closed" value="true" />
@@ -429,7 +430,15 @@
       <option name="project" value="LOCAL" />
       <updated>1720767813168</updated>
     </task>
-    <option name="localTasksCounter" value="28" />
+    <task id="LOCAL-00028" summary="chore: prepare release">
+      <option name="closed" value="true" />
+      <created>1720789010880</created>
+      <option name="number" value="00028" />
+      <option name="presentableId" value="LOCAL-00028" />
+      <option name="project" value="LOCAL" />
+      <updated>1720789010880</updated>
+    </task>
+    <option name="localTasksCounter" value="29" />
     <servers>
       <YouTrack url="https://demoseurope.youtrack.cloud">
         <username>random</username>
@@ -488,6 +497,7 @@
     <MESSAGE value="chore: Add changelog" />
     <MESSAGE value="chore: Move changelog entry to the right place" />
     <MESSAGE value="chore: fix merge issues" />
-    <option name="LAST_COMMIT_MESSAGE" value="chore: fix merge issues" />
+    <MESSAGE value="chore: prepare release" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: prepare release" />
   </component>
 </project>

package/CHANGELOG.md

@@ -4,6 +4,13 @@ Since v0.0.10, this Changelog is formatted according to the [Common Changelog][c
 
 ## UNRELEASED
 
+## v0.3.19 - 2024-07-17
+
+### Added
+
+- ([#932](https://github.com/demos-europe/demosplan-ui/pull/932)) BREAKING: Make color tokens available to Tailwind config, with that the default tokens are not longer available. ([@spiess-demos](https://github.com/spiess-demos))
+
+
 ## v0.3.19 - 2024-07-12
 
 ### Fixed
@@ -28,7 +35,7 @@ Since v0.0.10, this Changelog is formatted according to the [Common Changelog][c
 
 ### Fixed
 
-- ([#891](https://github.com/demos-europe/demosplan-ui/pull/891)) DpDataTabele: Escape whitespaces and plus signs for searching ([@gruenbergerdemos](https://github.com/gruenbergerdemos))
+- ([#891](https://github.com/demos-europe/demosplan-ui/pull/891)) DpDataTable: Escape whitespaces and plus signs for searching ([@gruenbergerdemos](https://github.com/gruenbergerdemos))
 
 ### Added
 

package/buildTokens.js

@@ -17,10 +17,23 @@ const files = glob
     .replace('tokens/src/', '')
     .replace('color/', '')
     .replace('.json', ''))
-  // Do not render tokens only used internally
-  .filter(filePath => !filePath.startsWith('_'))
+    .filter(filePath => !filePath.startsWith('_')) // Do not render tokens only used internally
 
-// Adds prefix to variables
+// Resolve token values with fallback, for css variables nesting
+function resolveValue(token, dictionary) {
+  let value = token.value
+  const seen = new Set()
+
+  while (dictionary.usesReference(value)) {
+    seen.add(value)
+    value = dictionary.getReferences(value)[0].value
+    if (seen.has(value)) break
+  }
+
+  return value
+}
+
+// Adds prefix to variables. Keeps uppercase path parts, which is needed later.
 StyleDictionary.registerTransform({
   name: 'name/scss',
   type: 'name',
@@ -33,6 +46,120 @@ StyleDictionary.registerTransformGroup({
   transforms: StyleDictionary.transformGroup.scss.concat(['name/scss'])
 })
 
+// Adds prefix to variables. Keeps uppercase path parts, which is needed later.
+StyleDictionary.registerTransform({
+  name: 'name/web',
+  type: 'name',
+  transformer: (token) => token.path.join('-')
+})
+
+// Adds prefix transform to default scss transform group
+StyleDictionary.registerTransformGroup({
+  name: 'custom/web',
+  transforms: StyleDictionary.transformGroup.web.concat(['name/web'])
+})
+
+/**
+ * In the json tokens sources, some nesting is used for better structuring token groups.
+ * This must be resolved when transforming them into target formats.
+ * @param tokenName
+ * @param tokenPath
+ * @param targetFormat
+ * @return {*}
+ */
+const transformTokenName = (tokenName, tokenPath, targetFormat) => {
+  // The domain part within color tokens should not be part of the variable name.
+  if (tokenPath[0] === 'color') {
+    tokenName = tokenName.replace(/-(brand|data|palette|ui-tailwind|ui)/g, '')
+
+    if (tokenPath[1] === 'ui-tailwind' && tokenPath[2] !== 'color') {
+      tokenName = tokenName.replace(/color-/g, '')
+    } else if (tokenPath[1] === 'ui-tailwind' && tokenPath[2] === 'color') {
+      tokenName = tokenName.replace(/color-color-/g, 'color-')
+    }
+  }
+
+  // The domain part within font-size tokens should not be part of the variable name.
+  if (tokenPath[0] === 'font-size') {
+    tokenName = tokenName.replace(/-(scale|brand|heading|ui)/g, '')
+  }
+
+  // The key "z-index" should be shortened in the variable name to match Tailwind syntax
+  if (tokenPath[0] === 'z-index') {
+    tokenName = tokenName.replace(/z-index-/g, 'z-')
+  }
+
+  // "DEFAULT" is a Tailwind convention that should not be part of the Scss name
+  tokenName = tokenName.replace(/-DEFAULT/g, '')
+
+  if (targetFormat === 'scss') {
+    // Scss does not like variable names with dots in them, but Tailwind does, apparently.
+    if (tokenPath[0] === 'space') {
+      tokenName = tokenName.replace(/\./g, '_')
+    }
+  }
+
+  if (targetFormat === 'tailwind') {
+    if (tokenPath[0] === 'color' || tokenPath[1] === 'ui-tailwind') {
+      tokenName = tokenName.replace(/color-/g, '')
+    }
+    if (tokenPath[0] === 'color' && tokenPath[1] === 'ui-tailwind') {
+      tokenName = tokenName.replace(/(textColor|backgroundColor|borderColor)-/g, '')
+    }
+  }
+
+  return tokenName
+}
+
+const corePlugins = ['color', 'color.palette', 'color.brand', 'color.data', 'textColor', 'backgroundColor', 'borderColor']
+
+/**
+ * Custom format that generates javascript modules ready to be used as Tailwind config files.
+ * The values use a nested set of css variables to enable theming on multiple levels.
+ */
+StyleDictionary.registerFormat({
+  name: 'tailwind/variables',
+  formatter({ dictionary, file  }) {
+    const groupedTokens = {}
+    corePlugins.forEach(plugin => {
+      groupedTokens[plugin] = {}
+    })
+
+    dictionary.allTokens.forEach(token => {
+      const tokenName = transformTokenName(token.name, token.path, 'tailwind')
+      const varName = `--${prefix}${transformTokenName(token.name, token.path).replace(/\./g, '-')}`
+      let fallback = resolveValue(token, dictionary)
+
+      let current = token
+      let cssVar = `var(${varName}`
+      while (current.original && current.original.value.startsWith('{')) {
+        const ref = dictionary.getReferences(current.original.value)[0]
+        let refName = transformTokenName(ref.name, ref.path)
+        refName = `--${prefix}${refName.replace(/\./g, '-')}`
+        cssVar += `, var(${refName}`
+
+        current = ref
+      }
+
+      cssVar += `, ${fallback})`.repeat(cssVar.match(/var\(/g).length)
+
+      let regex = /#([0-9a-fA-F]{6})\), #([0-9a-fA-F]{6})/
+      let replaced = cssVar.replace(regex, '#$1)')
+
+      // Sort token definition into respective group
+      corePlugins.forEach(plugin => {
+        const isCorePluginDefinition = token.path[2] === plugin
+        const isColorDefinition = token.path[1] === plugin.replace('color.', '') && token.path[0] === 'color'
+        if (isCorePluginDefinition || isColorDefinition) {
+          groupedTokens[plugin][tokenName.replace(/\./g, '-')] = replaced + ';'
+        }
+      })
+    })
+
+    return `module.exports = ${JSON.stringify(groupedTokens[file.destination.replace('.js', '')], null, 2)};`
+  }
+})
+
 /**
  * This format is a customized version of the implementation
  * in `formattedVariables`. It applies some transformations
@@ -42,7 +169,7 @@ StyleDictionary.registerTransformGroup({
 StyleDictionary.registerFormat({
   name: 'scss/customVariables',
   formatter: ({dictionary, options, file}) => {
-    const { outputReferences, themeable = false, formatting} = options
+    const { outputReferences, themeable = false, formatting } = options
     let { allTokens } = dictionary
 
     if (outputReferences) {
@@ -53,32 +180,7 @@ StyleDictionary.registerFormat({
 
     const tokens = allTokens
       .map(token => {
-        let formattedVar = propertyFormatter(token)
-
-        // The domain part within color tokens should not be part of the variable name.
-        if (token.path[0] === 'color') {
-          formattedVar = formattedVar.replace(/-(brand|data|palette|ui)/g, '')
-        }
-
-        // The domain part within font-size tokens should not be part of the variable name.
-        if (token.path[0] === 'font-size') {
-          formattedVar = formattedVar.replace(/-(scale|brand|heading|ui)/g, '')
-        }
-
-        // The key "z-index" should be shortened in the variable name to match Tailwind syntax
-        if (token.path[0] === 'z-index') {
-          formattedVar = formattedVar.replace(/z-index-/g, 'z-')
-        }
-
-        // Scss does not like variable names with dots in them, but Tailwind does, apparently.
-        if (token.path[0] === 'space') {
-          formattedVar = formattedVar.replace(/\./g, '_')
-        }
-
-        // "DEFAULT" is a Tailwind convention that should not be part of the Scss name
-        formattedVar = formattedVar.replace(/-DEFAULT/g, '')
-
-        return formattedVar
+        return transformTokenName(propertyFormatter(token), token.path, 'scss')
       })
       .filter(function(strVal) { return !!strVal })
       .join('\n')
@@ -92,17 +194,19 @@ const StyleDictionaryExtended = StyleDictionary.extend({
   platforms: {
     scss: {
       transformGroup: 'custom/scss',
+      prefix,
       buildPath: 'tokens/dist/scss/',
-      files: files.map((filePath) => {
-        return {
-          destination: `_${filePath}.scss`,
-          format: 'scss/customVariables',
-          filter: (token) => token.filePath.includes(filePath),
-          options: {
-            outputReferences: true
+      files: files
+        .map((filePath) => {
+          return {
+            destination: `_${filePath}.scss`,
+            format: 'scss/customVariables',
+            filter: (token) => token.filePath.includes(filePath) && !token.filePath.includes('color.ui-tailwind'),
+            options: {
+              outputReferences: true
+            }
           }
-        }
-      })
+        })
     },
     js: {
       transformGroup: 'js',
@@ -111,13 +215,25 @@ const StyleDictionaryExtended = StyleDictionary.extend({
         return {
           destination: `${filePath}.js`,
           format: 'javascript/module',
-          filter: (token) => token.filePath.includes(filePath),
+          filter: (token) => {
+            return token.filePath.includes(filePath) && token.$status !== 'Deprecated'
+          },
           options: {
             outputReferences: true
           }
         }
       })
-    }
+    },
+    web: {
+      transformGroup: 'custom/web',
+      buildPath: 'tokens/dist/tailwind/',
+      files: corePlugins.map((plugin) => {
+        return {
+          destination: `${plugin}.js`,
+          format: 'tailwind/variables'
+        }
+      }),
+    },
   }
 })