feat(themes): Added initial implementation of themes library

Author: sullivanpj

.env

@@ -30,7 +30,7 @@ FORCE_COLOR=1
 
 STORM_FILE_BANNER="This code was developed by Storm Software (https://stormsoftware.org) and is licensed under the Apache License 2.0."
 
-
+STORM_LOG_LEVEL="all"
 
 # Nx 18 enables using plugins to infer targets by default
 # This is disabled for existing workspaces to maintain compatibility

nx.json

@@ -17,18 +17,6 @@
       "!{projectRoot}/cypress.config.[jt]s"
     ]
   },
-  "targetDefaults": {
-    "nx-release-publish": {
-      "cache": false,
-      "inputs": ["default", "^production"],
-      "dependsOn": ["^build"],
-      "executor": "@storm-software/workspace-tools:npm-publish",
-      "options": {
-        "packageRoot": "dist/{projectRoot}",
-        "registry": "https://registry.npmjs.org/"
-      }
-    }
-  },
   "generators": {
     "@nx/react": {
       "application": {
@@ -42,6 +30,30 @@
       }
     }
   },
+  "release": {
+    "projects": ["packages/*"],
+    "projectsRelationship": "independent",
+    "releaseTagPattern": "{projectName}@{version}",
+    "changelog": {
+      "automaticFromRef": true,
+      "projectChangelogs": {
+        "createRelease": "github"
+      }
+    },
+    "version": {
+      "conventionalCommits": true,
+      "generator": "@storm-software/workspace-tools:release-version"
+    }
+  },
+  "plugins": [
+    "@nx/plugin",
+    "@nx/js",
+    "@nx/jest",
+    "@nx/eslint",
+    "@nx/eslint-plugin",
+    "@nx/esbuild",
+    "@storm-software/workspace-tools"
+  ],
   "pluginsConfig": {
     "@nx/js": {
       "analyzeSourceFiles": true

package.json

@@ -73,11 +73,13 @@
     "release": "npx storm-git release",
     "test": "echo Skipping all workspace testing..."
   },
+  "prettier": "@storm-software/linting-tools/prettier/config.json",
   "dependencies": {
     "@biomejs/biome": "^1.5.1",
     "@nderscore/tamagui-typescript-plugin": "^0.6.0",
     "@nx/cypress": "18.0.4",
     "@nx/devkit": "18.0.4",
+    "@nx/eslint-plugin": "^18.0.4",
     "@nx/jest": "18.0.4",
     "@nx/js": "18.0.4",
     "@nx/next": "18.0.4",
@@ -96,7 +98,7 @@
     "@swc/helpers": "0.5.3",
     "@testing-library/react": "14.0.0",
     "@types/jest": "29.5.12",
-    "@types/node": "^20.10.5",
+    "@types/node": "^20.11.20",
     "@types/react": "18.2.55",
     "@types/react-dom": "18.2.17",
     "babel-jest": "^29.4.1",
@@ -164,7 +166,8 @@
       "@storm-stack/nx-tools": "workspace:*",
       "@storm-stack/web-docs": "workspace:*",
       "@storm-stack/server-cache": "workspace:*",
-      "@storm-stack/style-dictionary": "workspace:*"
+      "@storm-stack/style-dictionary": "workspace:*",
+      "@storm-stack/themes": "workspace:*"
     }
   },
   "triggerEmptyDevReleaseByIncrementingThisNumber": 0

packages/style-dictionary/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@storm-stack/style-dictionary",
   "version": "0.0.1",
+  "private": false,
   "description": "⚡ The storm-stack monorepo contains utility applications, tools, and various libraries to create modern and scalable web applications.",
   "repository": {
     "type": "github",
     "url": "https://github.com/storm-software/storm-stack.git",
     "directory": "packages/style-dictionary"
   },
-  "private": true,
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
+    "@tokens-studio/sd-transforms": "^0.14.2",
     "style-dictionary": "^3.9.2"
   }
 }

packages/style-dictionary/src/config/config.ts

@@ -62,13 +62,13 @@ export default {
   // }],
   source: ["tokens/**/*.json"],
   platforms: {
-    css: {
-      transformGroup: "css",
+    tamagui: {
+      transformGroup: "storm/tamagui",
       buildPath: "build/",
       files: [
         {
-          destination: "variables.css",
-          format: "css/variables"
+          format: "javascript/module-flat",
+          destination: "design-tokens.js"
         }
       ]
     }

packages/style-dictionary/src/formats/index.ts

@@ -0,0 +1 @@
+export * from "./register-tamagui";

packages/style-dictionary/src/formats/register-tamagui.ts

@@ -0,0 +1,35 @@
+import { EMPTY_STRING, NEWLINE_STRING } from "@storm-stack/utilities";
+import type StyleDictionary from "style-dictionary";
+import { type ColorPaletteGroup, DesignTokenGroupKind, DesignTokenTypes } from "../types";
+
+export const registerTamaguiFormat = (sd: typeof StyleDictionary) => {
+  sd.registerFormat({
+    name: "storm/tamagui/color-palettes",
+    formatter: ({ dictionary }) =>
+      `export const ColorPalettes = { ${dictionary.allTokens
+        .filter(
+          (token) =>
+            token?.$type === DesignTokenGroupKind.COLOR_PALETTE &&
+            token?.type === DesignTokenGroupKind.COLOR_PALETTE
+        )
+        .map((token) => {
+          const palettes = Object.values(token.value).filter(
+            (child: any) =>
+              child?.$type === DesignTokenGroupKind.COLOR_PALETTE &&
+              child?.type === DesignTokenGroupKind.COLOR_PALETTE
+          ) as ColorPaletteGroup[];
+
+          return palettes
+            .map(
+              (palette) =>
+                `${palette.name}: [ ${Object.keys(palette)
+                  .filter((key) => palette[key]?.type === DesignTokenTypes.COLOR)
+                  .sort()
+                  .map((key) => palette[key]?.value ?? EMPTY_STRING)
+                  .join(", ")} ]`
+            )
+            .join(`,${NEWLINE_STRING}`);
+        })
+        .join("\n")};`
+  });
+};

packages/style-dictionary/src/index.ts

@@ -8,3 +8,4 @@
  */
 
 export * from "./config";
+export * from "./transforms";

packages/style-dictionary/src/transform-group/index.ts

@@ -0,0 +1 @@
+export * from "./register-tamagui";

packages/style-dictionary/src/transform-group/register-tamagui.ts

@@ -0,0 +1,24 @@
+import type StyleDictionary from "style-dictionary";
+
+export const registerTamaguiTransformGroup = (sd: typeof StyleDictionary) => {
+  sd.registerTransformGroup({
+    name: "storm/tamagui",
+    transforms: [
+      "storm/transform/color-palette",
+      "name/cti/snake",
+      "ts/descriptionToComment",
+      "ts/size/px",
+      "ts/opacity",
+      "ts/size/lineheight",
+      "ts/typography/fontWeight",
+      "ts/resolveMath",
+      "ts/size/css/letterspacing",
+      "ts/typography/css/fontFamily",
+      "ts/typography/css/shorthand",
+      "ts/border/css/shorthand",
+      "ts/shadow/css/shorthand",
+      "ts/color/css/hexrgba",
+      "ts/color/modifiers"
+    ]
+  });
+};