feat(ui-kit): add Design Tokens synchronization automation from Figma to UI Kit

.changeset/shiny-tables-promise.md

@@ -0,0 +1,5 @@
+---
+'@propeldata/ui-kit': patch
+---
+
+Added Design Tokens synchronization automation from Figma to UI Kit

app/storybook/documentation/ui-kit/Theming.mdx

@@ -4,9 +4,9 @@ import { prettier } from '../../src/utils'
 import { SourceCode } from '../../.storybook/blocks/SourceCode'
 import * as ThemeProviderStories from '../../../../packages/ui-kit/src/components/ThemeProvider/ThemeProvider.stories'
 import rawThemesScss from '!!raw-loader!../../../../packages/ui-kit/src/themes/themes.module.scss'
-import rawCommonScss from '!!raw-loader!../../../../packages/ui-kit/src/themes/_common.scss'
-import rawLightThemeScss from '!!raw-loader!../../../../packages/ui-kit/src/themes/_lightTheme.scss'
-import rawDarkThemeScss from '!!raw-loader!../../../../packages/ui-kit/src/themes/_darkTheme.scss'
+import rawCommonScss from '!!raw-loader!../../../../packages/ui-kit/src/themes/generated/_tokens.scss'
+import rawLightThemeScss from '!!raw-loader!../../../../packages/ui-kit/src/themes/generated/_lightTheme.scss'
+import rawDarkThemeScss from '!!raw-loader!../../../../packages/ui-kit/src/themes/generated/_darkTheme.scss'
 
 <Meta title="Customization/Theming" />
 
@@ -35,9 +35,9 @@ unique needs.
 
 Each token in the theme object is represented as both a
 [CSS Custom Property](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) and a corresponding
-JavaScript property, e.g. `--propel-font-family` and `fontFamily`. The CSS Custom Properties are prefixed with
-`--propel-` which helps to prevent any potential naming collisions with other stylesheets. Further details are available
-in the <LinkTo kind="API/ThemeTokenProps" story="overview">API section</LinkTo>.
+JavaScript property, e.g. `--propel-text-md-regular-font-family` and `textMdRegularFontFamily`. The CSS Custom
+Properties are prefixed with `--propel-` which helps to prevent any potential naming collisions with other stylesheets.
+Further details are available in the <LinkTo kind="API/ThemeTokenProps" story="overview">API section</LinkTo>.
 
 ### Default values
 

app/storybook/documentation/ui-kit/api/ThemeTokenProps.mdx

@@ -8,8 +8,8 @@ import { camelCaseToKebabCase } from '../../../../../packages/ui-kit/src/helpers
 
 Each token in the theme object is represented as both a
 [CSS Custom Property](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) and a corresponding
-JavaScript property, e.g. `--propel-font-family` and `fontFamily`. The CSS Custom Properties are prefixed with
-`--propel-` which helps to prevent any potential naming collisions with other stylesheets.
+JavaScript property, e.g. `--propel-text-md-regular-font-family` and `textMdRegularFontFamily`. The CSS Custom
+Properties are prefixed with `--propel-` which helps to prevent any potential naming collisions with other stylesheets.
 
 <Source
   language="css"

packages/ui-kit/package.json

@@ -7,11 +7,14 @@
   "module": "dist/esm/index.module.js",
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "build": "rm -rf dist && yarn graphql:build && yarn typecheck && rollup -c",
+    "build": "rm -rf dist && yarn graphql:build && yarn design-tokens:sync && yarn typecheck && rollup -c",
     "graphql:build": "rm -rf src/helpers/graphql/generated && yarn graphql:gen",
     "graphql:gen": "graphql-codegen --config src/helpers/graphql/codegen.yml && node src/helpers/graphql/script.cjs src/helpers/graphql/generated/index.ts",
-    "test": "yarn graphql:build && jest",
-    "test:coverage": "jest --ci --coverage --json --outputFile=coverage/coverage.json"
+    "test": "jest",
+    "test:coverage": "jest --ci --coverage --json --outputFile=coverage/coverage.json",
+    "design-tokens:sync": "rm -rf ./scripts/dist && rm -rf ./packages/ui-kit/src/themes/generated && tsc -p ./scripts/tsconfig.json && yarn design-tokens:parse && yarn design-tokens:validate",
+    "design-tokens:parse": "node ./scripts/dist/parse-design-tokens.mjs",
+    "design-tokens:validate": "node ./scripts/dist/validate-design-tokens.mjs"
   },
   "publishConfig": {
     "access": "public",
@@ -50,6 +53,8 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^27.5.1",
     "@types/luxon": "^3.3.2",
+    "@types/node": "^20.12.3",
+    "@types/ora": "^3.2.0",
     "@types/react": "latest",
     "@types/react-dom": "latest",
     "@types/testing-library__jest-dom": "^5.14.7",
@@ -60,6 +65,7 @@
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^27.5.1",
     "msw": "^1.3.2",
+    "ora": "^8.0.1",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-docgen-typescript": "^2.2.2",
@@ -68,6 +74,8 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
     "sass": "^1.69.5",
+    "slugify": "^1.6.6",
+    "ts-node": "^10.9.2",
     "typescript": "^4.9.3"
   },
   "peerDependencies": {

packages/ui-kit/rollup.config.js

@@ -26,6 +26,12 @@ module.exports = {
     }
   ],
   external: externalPackages,
+  onwarn: (warning, warn) => {
+    if (warning.message.includes('Module level directives cause errors when bundled, "use client" in')) {
+      return
+    }
+    warn(warning)
+  },
   plugins: [
     nodeResolve(),
     commonjs(),