fix: removing style-dictionary from token build (#105)

* fix: removing style-dictionary from token build

* chore: package scripts cleanup

* chore: adding changeset

* fix: addressing feedback

.changeset/calm-bobcats-trade.md

@@ -0,0 +1,2 @@
+---
+---

package.json

@@ -9,19 +9,17 @@
     "tooling/*"
   ],
   "scripts": {
-    "build": "run-s build:tokens build:packemon build:types",
+    "build": "run-s build:packemon build:types",
     "build:docs": "run-s build build:next",
     "build:packemon": "packemon build --addEngines",
     "build:next": "yarn workspace @project44-manifest/docs build",
     "build:storybook": "yarn workspace @project44-manifest/storybook build",
-    "build:tokens": "yarn workspace @project44-manifest/design-tokens build",
     "build:types": "tsc -b",
-    "dev": "yarn build:tokens && run-p dev:tokens dev:storybook",
-    "dev:all": "yarn build:tokens && run-p dev:tokens dev:storybook dev:website",
-    "dev:docs": "yarn build && yarn workspace @project44-manifest/docs dev",
+    "dev": "run-s build dev:storybook",
+    "dev:all": "run-p dev:storybook dev:website",
+    "dev:docs": "yarn workspace @project44-manifest/docs dev",
     "dev:packemon": "packemon watch",
     "dev:storybook": "yarn workspace @project44-manifest/storybook dev",
-    "dev:tokens": "yarn workspace @project44-manifest/design-tokens dev",
     "changeset": "changeset",
     "chromatic": "chromatic",
     "clean": "run-s clean:packemon clean:types",
@@ -55,7 +53,6 @@
     "@typescript-eslint/eslint-plugin": "^5.34.0",
     "@typescript-eslint/parser": "^5.34.0",
     "chokidar-cli": "^3.0.0",
-    "esbuild": "^0.15.7",
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
@@ -67,7 +64,6 @@
     "eslint-plugin-react-perf": "^3.3.1",
     "fast-glob": "^3.2.12",
     "fs-extra": "^10.1.0",
-    "globby": "^13.1.2",
     "husky": "^8.0.1",
     "jest": "^28.1.3",
     "jest-axe": "^6.0.0",

packages/design-tokens/package.json

@@ -28,12 +28,7 @@
     "url": "git@github.com:project-44/manifest.git",
     "directory": "packages/design-tokens"
   },
-  "scripts": {
-    "build": "node scripts/build.js",
-    "clean": "rm -rf .turbo node_modules lib esm dts",
-    "dev": "chokidar \"tokens/**/*.json\" -c \"yarn build\""
-  },
-  "devDependencies": {
-    "style-dictionary": "^3.7.0"
+  "packemon": {
+    "platform": "browser"
   }
 }

packages/design-tokens/src/index.ts

@@ -0,0 +1,5 @@
+export * from './tokens/border';
+export * from './tokens/color';
+export * from './tokens/elevation';
+export * from './tokens/space';
+export * from './tokens/typography';

packages/design-tokens/src/tokens/border.ts

@@ -0,0 +1,12 @@
+/** --------------------------------------------
+ * Border Radius
+ * -------------------------------------------- */
+export const radiusFull = '999em';
+export const radiusSmall = '2px';
+
+/** --------------------------------------------
+ * Border Width
+ * -------------------------------------------- */
+export const borderWidthLarge = '3px';
+export const borderWidthMedium = '2px';
+export const borderWidthSmall = '1px';

packages/design-tokens/src/tokens/color.ts

@@ -0,0 +1,178 @@
+/** --------------------------------------------
+ * Palette colors
+ * -------------------------------------------- */
+export const colorPaletteBlack = '#091521';
+export const colorPaletteWhite = '#ffffff';
+export const colorPaletteBlue50 = '#ecf4fe';
+export const colorPaletteBlue100 = '#c9e1fb';
+export const colorPaletteBlue200 = '#95c5f8';
+export const colorPaletteBlue300 = '#62a9f4';
+export const colorPaletteBlue400 = '#308df1';
+export const colorPaletteBlue500 = '#0072ec';
+export const colorPaletteBlue600 = '#005cbe';
+export const colorPaletteBlue700 = '#00458e';
+export const colorPaletteBlue800 = '#003772';
+export const colorPaletteBlue900 = '#002956';
+export const colorPaletteBrown50 = '#faf0e7';
+export const colorPaletteBrown100 = '#ead9ce';
+export const colorPaletteBrown200 = '#d8c1b2';
+export const colorPaletteBrown300 = '#c4a794';
+export const colorPaletteBrown400 = '#b3917b';
+export const colorPaletteBrown500 = '#a27c62';
+export const colorPaletteBrown600 = '#95715a';
+export const colorPaletteBrown700 = '#84634f';
+export const colorPaletteBrown800 = '#755646';
+export const colorPaletteBrown900 = '#64473a';
+export const colorPaletteGreen50 = '#ddefe6';
+export const colorPaletteGreen100 = '#c3e1d2';
+export const colorPaletteGreen200 = '#93c9ae';
+export const colorPaletteGreen300 = '#62b08b';
+export const colorPaletteGreen400 = '#329867';
+export const colorPaletteGreen500 = '#0e864c';
+export const colorPaletteGreen600 = '#0b6b3d';
+export const colorPaletteGreen700 = '#095731';
+export const colorPaletteGreen800 = '#074326';
+export const colorPaletteGreen900 = '#06361e';
+export const colorPaletteGrey50 = '#fafafb';
+export const colorPaletteGrey100 = '#f4f4f5';
+export const colorPaletteGrey200 = '#e4e6e7';
+export const colorPaletteGrey300 = '#d1d3d6';
+export const colorPaletteGrey400 = '#a9adb1';
+export const colorPaletteGrey500 = '#898e94';
+export const colorPaletteGrey600 = '#697078';
+export const colorPaletteGrey700 = '#49515a';
+export const colorPaletteGrey800 = '#2a343f';
+export const colorPaletteGrey900 = '#091521';
+export const colorPaletteIndigo50 = '#e9eafa';
+export const colorPaletteIndigo100 = '#c7ccf0';
+export const colorPaletteIndigo200 = '#a5aee8';
+export const colorPaletteIndigo300 = '#7785db';
+export const colorPaletteIndigo400 = '#5c6cd6';
+export const colorPaletteIndigo500 = '#3142c8';
+export const colorPaletteIndigo600 = '#3442bc';
+export const colorPaletteIndigo700 = '#2e39ad';
+export const colorPaletteIndigo800 = '#232b9c';
+export const colorPaletteIndigo900 = '#16158d';
+export const colorPaletteOrange50 = '#fbede7';
+export const colorPaletteOrange100 = '#ffd0bc';
+export const colorPaletteOrange200 = '#ffb291';
+export const colorPaletteOrange300 = '#ff9365';
+export const colorPaletteOrange400 = '#ff7b43';
+export const colorPaletteOrange500 = '#ff6422';
+export const colorPaletteOrange600 = '#f45e1e';
+export const colorPaletteOrange700 = '#e65719';
+export const colorPaletteOrange800 = '#d85015';
+export const colorPaletteOrange900 = '#bf420c';
+export const colorPalettePink50 = '#fbe5ee';
+export const colorPalettePink100 = '#f6bed6';
+export const colorPalettePink200 = '#f194ba';
+export const colorPalettePink300 = '#ed6a9f';
+export const colorPalettePink400 = '#ea4c89';
+export const colorPalettePink500 = '#e83274';
+export const colorPalettePink600 = '#d72f70';
+export const colorPalettePink700 = '#c02c69';
+export const colorPalettePink800 = '#aa2964';
+export const colorPalettePink900 = '#852259';
+export const colorPalettePurple50 = '#f2e7fc';
+export const colorPalettePurple100 = '#ddd0f3';
+export const colorPalettePurple200 = '#c79bf2';
+export const colorPalettePurple300 = '#b16fed';
+export const colorPalettePurple400 = '#9e4ae8';
+export const colorPalettePurple500 = '#8c18e2';
+export const colorPalettePurple600 = '#8110dc';
+export const colorPalettePurple700 = '#7300d3';
+export const colorPalettePurple800 = '#6500ce';
+export const colorPalettePurple900 = '#4e00c6';
+export const colorPaletteRed50 = '#f5e9e8';
+export const colorPaletteRed100 = '#f4cfcd';
+export const colorPaletteRed200 = '#eca9a5';
+export const colorPaletteRed300 = '#e3837d';
+export const colorPaletteRed400 = '#da5d55';
+export const colorPaletteRed500 = '#d44037';
+export const colorPaletteRed600 = '#b4362f';
+export const colorPaletteRed700 = '#942d27';
+export const colorPaletteRed800 = '#75231e';
+export const colorPaletteRed900 = '#551a16';
+export const colorPaletteYellow50 = '#fefae7';
+export const colorPaletteYellow100 = '#fbf1c4';
+export const colorPaletteYellow200 = '#f8e99f';
+export const colorPaletteYellow300 = '#f4e07b';
+export const colorPaletteYellow400 = '#f0d961';
+export const colorPaletteYellow500 = '#ecd348';
+export const colorPaletteYellow600 = '#dcc243';
+export const colorPaletteYellow700 = '#c8ac3d';
+export const colorPaletteYellow800 = '#b39638';
+export const colorPaletteYellow900 = '#90722f';
+
+/** --------------------------------------------
+ * Background colors
+ * -------------------------------------------- */
+export const colorBackgroundDanger = colorPaletteRed50;
+export const colorBackgroundPrimary = colorPaletteWhite;
+export const colorBackgroundSecondary = colorPaletteGrey100;
+export const colorBackgroundSideNav = '#021c6b';
+export const colorBackgroundSuccess = colorPaletteGreen50;
+export const colorBackgroundSurface = colorPaletteWhite;
+export const colorBackgroundTertiary = colorPaletteGrey200;
+export const colorBackgroundTopNav = '#1f3987';
+export const colorBackgroundWarning = colorPaletteOrange50;
+
+/** --------------------------------------------
+ * Border colors
+ * -------------------------------------------- */
+export const colorBorderDanger = colorPaletteRed600;
+export const colorBorderDisabled = colorPaletteGrey100;
+export const colorBorderPrimary = colorPaletteGrey200;
+export const colorBorderSuccess = colorPaletteGreen600;
+export const colorBorderWarning = colorPaletteOrange600;
+
+/** --------------------------------------------
+ * Brand colors
+ * -------------------------------------------- */
+export const colorBrandDefault = colorPaletteBlue500;
+export const colorBrandActive = `linear-gradient(0deg, rgba(9, 21, 33, 0.4), rgba(9, 21, 33, 0.4)), linear-gradient(90deg, ${colorPaletteBlue500} 0%, ${colorPalettePurple900} 163.65%, ${colorPalettePurple500}  191.59%)`;
+export const colorBrandHover = `linear-gradient(0deg, rgba(9, 21, 33, 0.2), rgba(9, 21, 33, 0.2)), linear-gradient(90deg, ${colorPaletteBlue500} 0%, ${colorPalettePurple900} 163.65%, ${colorPalettePurple500}  191.59%)`;
+export const colorBrandGradient = `linear-gradient(90deg, ${colorPaletteBlue500} 0%, ${colorPalettePurple900} 163.65%, ${colorPalettePurple500}  191.59%)`;
+
+/** --------------------------------------------
+ * Primary colors
+ * -------------------------------------------- */
+export const colorPrimaryDefault = colorPaletteIndigo500;
+export const colorPrimaryActive = colorPaletteIndigo900;
+export const colorPrimaryHover = colorPaletteIndigo700;
+
+/** --------------------------------------------
+ * Text colors
+ * -------------------------------------------- */
+export const colorTextContrast = colorPaletteWhite;
+export const colorTextDanger = colorPaletteRed600;
+export const colorTextDisabled = colorPaletteGrey400;
+export const colorTextPrimary = colorPaletteBlack;
+export const colorTextSecondary = colorPaletteGrey700;
+export const colorTextSuccess = colorPaletteGreen600;
+export const colorTextTertiary = colorPaletteGrey500;
+export const colorTextWarning = colorPaletteOrange600;
+
+/** --------------------------------------------
+ * Data Visualization colors
+ * -------------------------------------------- */
+export const colorDataVizDangerFill = colorPaletteRed300;
+export const colorDataVizDangerHover = colorPaletteRed600;
+export const colorDataVizDangerLine = colorPaletteRed500;
+export const colorDataVizNeutralFill = colorPaletteGrey300;
+export const colorDataVizNeutralHover = colorPaletteGrey500;
+export const colorDataVizPrimaryFill = colorPaletteIndigo300;
+export const colorDataVizPrimaryFillAlt = colorPaletteIndigo100;
+export const colorDataVizPrimaryHover = colorPaletteIndigo600;
+export const colorDataVizPrimaryLine = colorPaletteIndigo500;
+export const colorDataVizSecondaryFill = colorPaletteBlue300;
+export const colorDataVizSecondaryFillAlt = colorPaletteBlue100;
+export const colorDataVizSecondaryHover = colorPaletteBlue600;
+export const colorDataVizSecondaryLine = colorPaletteBlue500;
+export const colorDataVizTertiaryFill = colorPalettePurple300;
+export const colorDataVizTertiaryFillAlt = colorPalettePurple100;
+export const colorDataVizTertiaryHover = colorPalettePurple600;
+export const colorDataVizTertiaryLine = colorPalettePurple500;
+export const colorDataVizWarningFill = colorPaletteOrange300;
+export const colorDataVizWarningHover = colorPaletteOrange600;
+export const colorDataVizWarningLine = colorPaletteOrange500;

packages/design-tokens/src/tokens/elevation.ts

@@ -0,0 +1,21 @@
+/** --------------------------------------------
+ * Box Shadow
+ * -------------------------------------------- */
+export const shadowLarge =
+  '0px -1px 2px rgba(61, 58, 180, 0.1), 0px 6px 14px rgba(61, 58, 180, 0.15)';
+export const shadowMedium =
+  '0px -1px 2px rgba(61, 58, 180, 0.1), 0px 4px 5px rgba(61, 58, 180, 0.15)';
+export const shadowSmall =
+  '0px -1px 2px rgba(61, 58, 180, 0.1), 0px 1px 2px rgba(61, 58, 180, 0.4)';
+
+/** --------------------------------------------
+ * Z Index
+ * -------------------------------------------- */
+export const zIndexDialog = 6000;
+export const zIndexDropdown = 7000;
+export const zIndexModal = 9000;
+export const zIndexOverlay = 8000;
+export const zIndexPopover = 5000;
+export const zIndexSticky = 100;
+export const zIndexToast = 10000;
+export const zIndexTooltip = 6000;

packages/design-tokens/src/tokens/space.ts

@@ -0,0 +1,17 @@
+/** --------------------------------------------
+ * Size
+ * -------------------------------------------- */
+export const sizeLarge = '87.5rem';
+export const sizeMedium = '80rem';
+export const sizeSmall = '60rem';
+export const sizeXLarge = '120rem';
+export const sizeXSmall = '40.625rem';
+
+/** --------------------------------------------
+ * Space
+ * -------------------------------------------- */
+export const spaceMedium = '1rem';
+export const spaceSmall = '0.5rem';
+export const spaceLarge = '1.5rem';
+export const spaceXLarge = '2rem';
+export const spaceXSmall = '0.25rem';

packages/design-tokens/src/tokens/typography.ts

@@ -0,0 +1,41 @@
+/** --------------------------------------------
+ * Font Family
+ * -------------------------------------------- */
+export const fontFamilyMono = '"Fira Mono", Courier, monospace';
+export const fontFamilyText =
+  '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
+
+/** --------------------------------------------
+ * Font Size
+ * -------------------------------------------- */
+export const fontSizeLarge = '1.25rem';
+export const fontSizeMedium = '1rem';
+export const fontSizeSmall = '0.875rem';
+export const fontSizeXLarge = '1.5rem';
+export const fontSizeXSmall = '0.75rem';
+export const fontSizeXxLarge = '2rem';
+
+/** --------------------------------------------
+ * Font Weight
+ * -------------------------------------------- */
+export const fontWeightBold = 700;
+export const fontWeightRegular = 400;
+export const fontWeightSemibold = 600;
+
+/** --------------------------------------------
+ * Letter Spacing
+ * -------------------------------------------- */
+export const letterSpacingLarge = '0em';
+export const letterSpacingMedium = '-0.01em';
+export const letterSpacingSmall = '-0.02em';
+export const letterSpacingXSmall = '-0.03em';
+
+/** --------------------------------------------
+ * Line Height
+ * -------------------------------------------- */
+export const lineHeightLarge = '1.875rem';
+export const lineHeightMedium = '1.5rem';
+export const lineHeightSmall = '1.25rem';
+export const lineHeightXLarge = '2rem';
+export const lineHeightXSmall = '1.125rem';
+export const lineHeightXxLarge = '2.625rem';