@grantcodes/style-dictionary 1.2.0 → 1.3.0

package/.turbo/turbo-build.log

@@ -1,44 +1,45 @@
-
-> @grantcodes/style-dictionary@1.2.0 build /home/grantcodes/projects/@grantcodes/ui/packages/style-dictionary
-> node ./build.js
-
-🚧 No theme specified, building all themes...
-
-🏗️ Building WIREFRAME theme
-
-🏗️ Building GRANTCODES theme
-
-🏗️ Building TODOMAP theme
-
-css
-✔︎ dist/css/todomap/tokens.css
-✔︎ dist/css/todomap/todomap.css
-
-json
-✔︎ dist/json/todomap/tokens.json
-
-css
-✔︎ dist/css/grantcodes/tokens.css
-✔︎ dist/css/grantcodes/grantcodes.css
-
-json
-✔︎ dist/json/grantcodes/tokens.json
-
-css
-✔︎ dist/css/wireframe/tokens.css
-✔︎ dist/css/wireframe/wireframe.css
-
-json
-✔︎ dist/json/wireframe/tokens.json
-
-ts
-✔︎ dist/js/todomap/style-dictionary.js
-✔︎ dist/js/todomap/style-dictionary.d.ts
-
-ts
-✔︎ dist/js/grantcodes/style-dictionary.js
-✔︎ dist/js/grantcodes/style-dictionary.d.ts
-
-ts
-✔︎ dist/js/wireframe/style-dictionary.js
-✔︎ dist/js/wireframe/style-dictionary.d.ts
+
+
+> @grantcodes/style-dictionary@1.3.0 build /home/grantcodes/projects/@grantcodes/ui/packages/style-dictionary
+> node ./build.js
+
+🚧 No theme specified, building all themes...
+
+🏗️ Building WIREFRAME theme
+
+🏗️ Building GRANTCODES theme
+
+🏗️ Building TODOMAP theme
+
+css
+✔︎ dist/css/todomap/tokens.css
+✔︎ dist/css/todomap/todomap.css
+
+json
+✔︎ dist/json/todomap/tokens.json
+
+css
+✔︎ dist/css/grantcodes/tokens.css
+✔︎ dist/css/grantcodes/grantcodes.css
+
+json
+✔︎ dist/json/grantcodes/tokens.json
+
+css
+✔︎ dist/css/wireframe/tokens.css
+✔︎ dist/css/wireframe/wireframe.css
+
+json
+✔︎ dist/json/wireframe/tokens.json
+
+ts
+✔︎ dist/js/todomap/style-dictionary.js
+✔︎ dist/js/todomap/style-dictionary.d.ts
+
+ts
+✔︎ dist/js/grantcodes/style-dictionary.js
+✔︎ dist/js/grantcodes/style-dictionary.d.ts
+
+ts
+✔︎ dist/js/wireframe/style-dictionary.js
+✔︎ dist/js/wireframe/style-dictionary.d.ts

package/.turbo/turbo-lint.log

@@ -1,5 +1,10 @@
-
-> @grantcodes/style-dictionary@1.1.0 lint /home/grantcodes/projects/@grantcodes/ui/packages/style-dictionary
-> npx @biomejs/biome lint tokens build.js lib
-
-Checked 48 files in 6ms. No fixes applied.
+
+
+> @grantcodes/style-dictionary@1.2.1 lint /home/grantcodes/projects/@grantcodes/ui/packages/style-dictionary
+> npx @biomejs/biome lint tokens build.js lib
+
+npm warn Unknown env config "npm-globalconfig". This will stop working in the next major version of npm.
+npm warn Unknown env config "verify-deps-before-run". This will stop working in the next major version of npm.
+npm warn Unknown env config "_jsr-registry". This will stop working in the next major version of npm.
+⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏Checked 54 files in 6ms. No fixes applied.
+⠙

package/AGENTS.md

@@ -0,0 +1,67 @@
+# @grantcodes/style-dictionary
+
+Design tokens and theming system for the UI packages. Built with Style Dictionary.
+
+## Themes
+
+Three themes are available:
+
+- **grantcodes** - Default theme with Greycliff font
+- **todomap** - Theme with Quicksand font
+- **wireframe** - Minimal theme with system fonts
+
+## Token Structure
+
+Tokens are organized in tiers:
+
+```
+tokens/
+├── core/                    # Shared tokens (z-index)
+├── grantcodes/              # Grantcodes theme
+│   ├── tier-1-definitions/  # Base tokens (colors, typography, etc.)
+│   ├── tier-2-usage/        # Usage tokens (component-level)
+│   └── tier-3-components/   # Component-specific tokens
+├── todomap/                 # Todomap theme
+└── wireframe/               # Wireframe theme
+```
+
+### Tier System
+
+- **Tier 1** - Primitive/base tokens (colors, spacing, typography)
+- **Tier 2** - Usage tokens (semantic, component-level)
+- **Tier 3** - Component-specific tokens
+
+## Exports
+
+```javascript
+// Theme tokens (CSS variables)
+import '@grantcodes/style-dictionary/grantcodes/css';
+import '@grantcodes/style-dictionary/todomap/css';
+import '@grantcodes/style-dictionary/wireframe/css';
+
+// Theme with component tokens
+import '@grantcodes/style-dictionary/grantcodes/css/theme';
+
+// JavaScript tokens
+import { GColorNeutral100 } from '@grantcodes/style-dictionary/grantcodes/js';
+
+// Fonts
+import '@grantcodes/style-dictionary/assets/fonts/greycliff';
+import '@grantcodes/style-dictionary/assets/fonts/quicksand';
+```
+
+## Adding New Tokens
+
+1. Choose the appropriate theme folder
+2. Add token to the correct tier (1, 2, or 3)
+3. Rebuild with `pnpm build`
+
+## Building
+
+```bash
+# Build all themes
+pnpm build
+
+# Build single theme
+pnpm build -- --theme=grantcodes
+```

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.3.0](https://github.com/grantcodes/ui/compare/style-dictionary-v1.2.1...style-dictionary-v1.3.0) (2026-03-14)
+
+
+### Features
+
+* **tokens:** expand spacing tokens and add typography shorthand ([0d9a558](https://github.com/grantcodes/ui/commit/0d9a5580a32a6ecf2b170d54fde3d1c68008e314))
+
+## [1.2.1](https://github.com/grantcodes/ui/compare/style-dictionary-v1.2.0...style-dictionary-v1.2.1) (2026-03-07)
+
+
+### Bug Fixes
+
+* update imports & exports ([db68e69](https://github.com/grantcodes/ui/commit/db68e69f5307fd62f26a6e65c9904e86ab156af6))
+
 ## [1.1.0](https://github.com/grantcodes/style-dictionary/compare/v1.0.0...v1.1.0) (2022-09-23)
 
 

package/config.js

@@ -30,6 +30,27 @@ const isHigherTierToken = (filePath) => {
  * Transform shadow tokens
  * 1) Used to transform the individual shadow tokens into a single box-shadow-sm, box-shadow-md, etc. with x, y, blur, spread, and color concatenated
  */
+const transformTypographyTokens = (dictionary, themeTokens) => {
+  const typographyGroups = dictionary.allTokens.filter(
+    (p) =>
+      isHigherTierToken(p.filePath) &&
+      p.path[0] === 'typography'
+  ).reduce((groups, token) => {
+    const style = token.path[1]; // extract typography.{style}
+    if (!groups[style]) groups[style] = {};
+    groups[style][token.path[2]] = token.value;
+    return groups;
+  }, {});
+
+  Object.keys(typographyGroups).forEach((style) => {
+    const group = typographyGroups[style];
+    if (group['font-family'] && group['font-weight'] && group['font-size'] && group['line-height']) {
+      const shorthand = `${group['font-weight']} ${group['font-size']}/${group['line-height']} ${group['font-family']}`;
+      themeTokens.push(`  --g-theme-typography-${style}: ${shorthand};`);
+    }
+  });
+};
+
 const transformShadowTokens = (dictionary, size, themeTokens) => {
 	const shadowProps = dictionary.allTokens.filter(
 		(p) =>
@@ -165,7 +186,10 @@ const formatVariables = (dictionary) => {
 	 * Iterate over all tokens and format them
 	 *
 	 */
-	dictionary.allTokens.forEach((prop) => {
+
+    transformTypographyTokens(dictionary, themeTokens);
+
+    dictionary.allTokens.forEach((prop) => {
 		/**
 		 * 1) Always include z-index and size tokens from core
 		 */

package/package.json

@@ -1,17 +1,20 @@
 {
 	"name": "@grantcodes/style-dictionary",
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"type": "module",
 	"description": "My personal style dictionary",
 	"main": "./dist/js/default/style-dictionary.js",
 	"exports": {
 		"./wireframe/css": "./dist/css/wireframe/tokens.css",
+		"./wireframe/css/theme": "./dist/css/wireframe/wireframe.css",
 		"./wireframe/js": "./dist/js/wireframe/style-dictionary.js",
 		"./wireframe/json": "./dist/json/wireframe/tokens.json",
 		"./grantcodes/css": "./dist/css/grantcodes/tokens.css",
+		"./grantcodes/css/theme": "./dist/css/grantcodes/grantcodes.css",
 		"./grantcodes/js": "./dist/js/grantcodes/style-dictionary.js",
 		"./grantcodes/json": "./dist/json/grantcodes/tokens.json",
 		"./todomap/css": "./dist/css/todomap/tokens.css",
+		"./todomap/css/theme": "./dist/css/todomap/todomap.css",
 		"./todomap/js": "./dist/js/todomap/style-dictionary.js",
 		"./todomap/json": "./dist/json/todomap/tokens.json",
 		"./assets/fonts/greycliff": "./assets/fonts/greycliff.css",

package/tokens/core/tier-1-definitions/colors.json

@@ -1,175 +1,174 @@
 {
-  "color": {
-    "neutral": {
-      "white": {
-        "value": "oklch(100% 0 0)"
-      },
-      "100": {
-        "value": "oklch(95% 0 0)"
-      },
-      "200": {
-        "value": "oklch(90% 0 0)"
-      },
-      "300": {
-        "value": "oklch(80% 0 0)"
-      },
-      "400": {
-        "value": "oklch(70% 0 0)"
-      },
-      "500": {
-        "value": "oklch(60% 0 0)"
-      },
-      "600": {
-        "value": "oklch(50% 0 0)"
-      },
-      "700": {
-        "value": "oklch(40% 0 0)"
-      },
-      "800": {
-        "value": "oklch(30% 0 0)"
-      },
-      "900": {
-        "value": "oklch(20% 0 0)"
-      },
-      "black": {
-        "value": "oklch(0% 0 0)"
-      }
-    },
-    "utility": {
-      "green": {
-        "100": {
-          "value": "oklch(96.73% 0.0537 129.1)"
-        },
-        "200": {
-          "value": "oklch(93.45% 0.107 131.96)"
-        },
-        "300": {
-          "value": "oklch(87.97% 0.1546 135.05)"
-        },
-        "400": {
-          "value": "oklch(81.78% 0.1827 137.62)"
-        },
-        "500": {
-          "value": "oklch(74.01% 0.2132 139.87)"
-        },
-        "600": {
-          "value": "oklch(65.44% 0.1981 141.12)"
-        },
-        "700": {
-          "value": "oklch(57.11% 0.1795 142.12)"
-        },
-        "800": {
-          "value": "oklch(48.67% 0.1572 142.68)"
-        },
-        "900": {
-          "value": "oklch(42.59% 0.1358 143.3)"
-        }
-      },
-      "blue": {
-        "100": {
-          "value": "oklch(95.86% 0.0542 179.13)"
-        },
-        "200": {
-          "value": "oklch(92.82% 0.0973 184.41)"
-        },
-        "300": {
-          "value": "oklch(90.54% 0.1282 189.63)"
-        },
-        "500": {
-          "value": "oklch(81.86% 0.141005 208.7047)"
-        },
-        "600": {
-          "value": "oklch(68.89% 0.125872 220.4932)"
-        },
-        "700": {
-          "value": "oklch(56.7% 0.116289 232.4331)"
-        },
-        "800": {
-          "value": "oklch(45.75% 0.107158 241.2805)"
-        },
-        "900": {
-          "value": "oklch(37.55% 0.1037 249.04)"
-        }
-      },
-      "yellow": {
-        "100": {
-          "value": "oklch(97.66% 0.0606 103.43)"
-        },
-        "200": {
-          "value": "oklch(95.72% 0.1147 103.53)"
-        },
-        "300": {
-          "value": "oklch(93.47% 0.1552 102.21)"
-        },
-        "400": {
-          "value": "oklch(91.68% 0.1745 101.08)"
-        },
-        "500": {
-          "value": "oklch(88.99% 0.183778 97.6996)"
-        },
-        "600": {
-          "value": "oklch(78.68% 0.162 96.43)"
-        },
-        "700": {
-          "value": "oklch(68.35% 0.14027 94.7302)"
-        },
-        "800": {
-          "value": "oklch(58.04% 0.1189 93.71)"
-        },
-        "900": {
-          "value": "oklch(50.09% 0.1025 92.6)"
-        }
-      },
-      "red": {
-        "100": {
-          "value": "oklch(94.96% 0.0395 73.45)"
-        },
-        "200": {
-          "value": "oklch(89.21% 0.076552 65.9429)"
-        },
-        "300": {
-          "value": "oklch(82.67% 0.1156 57.65)"
-        },
-        "400": {
-          "value": "oklch(77.04% 0.1486 49.15)"
-        },
-        "500": {
-          "value": "oklch(69.31% 0.203172 39.994)"
-        },
-        "600": {
-          "value": "oklch(60.03% 0.1938 35.81)"
-        },
-        "700": {
-          "value": "oklch(51.18% 0.1802 32.56)"
-        },
-        "800": {
-          "value": "oklch(42.79% 0.16 30.38)"
-        },
-        "900": {
-          "value": "oklch(36.89% 0.1443 28.98)"
-        }
-      }
-    },
-    "transparent": {
-      "0": {
-        "value": "oklch(100% 0 0 / 0)"
-      },
-      "10": {
-        "value": "oklch(100% 0 0 / 0.1)"
-      },
-      "25": {
-        "value": "oklch(100% 0 0 / 0.25)"
-      },
-      "50": {
-        "value": "oklch(100% 0 0 / 0.5)"
-      },
-      "75": {
-        "value": "oklch(100% 0 0 / 0.75)"
-      },
-      "90": {
-        "value": "oklch(100% 0 0 / 0.9)"
-      }
-    }
-  }
+	"color": {
+		"neutral": {
+			"white": {
+				"value": "oklch(100% 0 0)"
+			},
+			"100": {
+				"value": "oklch(95% 0 0)"
+			},
+			"200": {
+				"value": "oklch(90% 0 0)"
+			},
+			"300": {
+				"value": "oklch(80% 0 0)"
+			},
+			"400": {
+				"value": "oklch(70% 0 0)"
+			},
+			"500": {
+				"value": "oklch(60% 0 0)"
+			},
+			"600": {
+				"value": "oklch(50% 0 0)"
+			},
+			"700": {
+				"value": "oklch(40% 0 0)"
+			},
+			"800": {
+				"value": "oklch(30% 0 0)"
+			},
+			"900": {
+				"value": "oklch(20% 0 0)"
+			},
+			"black": {
+				"value": "oklch(0% 0 0)"
+			}
+		},
+		"utility": {
+			"green": {
+				"100": {
+					"value": "oklch(96.73% 0.0537 129.1)"
+				},
+				"200": {
+					"value": "oklch(93.45% 0.107 131.96)"
+				},
+				"300": {
+					"value": "oklch(87.97% 0.1546 135.05)"
+				},
+				"400": {
+					"value": "oklch(81.78% 0.1827 137.62)"
+				},
+				"500": {
+					"value": "oklch(74.01% 0.2132 139.87)"
+				},
+				"600": {
+					"value": "oklch(65.44% 0.1981 141.12)"
+				},
+				"700": {
+					"value": "oklch(57.11% 0.1795 142.12)"
+				},
+				"800": {
+					"value": "oklch(48.67% 0.1572 142.68)"
+				},
+				"900": {
+					"value": "oklch(42.59% 0.1358 143.3)"
+				}
+			},
+			"blue": {
+				"100": {
+					"value": "oklch(95.86% 0.0542 179.13)"
+				},
+				"200": {
+					"value": "oklch(92.82% 0.0973 184.41)"
+				},
+				"300": {
+					"value": "oklch(90.54% 0.1282 189.63)"
+				},
+				"500": {
+					"value": "oklch(81.86% 0.141005 208.7047)"
+				},
+				"600": {
+					"value": "oklch(68.89% 0.125872 220.4932)"
+				},
+				"700": {
+					"value": "oklch(56.7% 0.116289 232.4331)"
+				},
+				"800": {
+					"value": "oklch(45.75% 0.107158 241.2805)"
+				},
+				"900": {
+					"value": "oklch(37.55% 0.1037 249.04)"
+				}
+			},
+			"yellow": {
+				"100": {
+					"value": "oklch(97.66% 0.0606 103.43)"
+				},
+				"200": {
+					"value": "oklch(95.72% 0.1147 103.53)"
+				},
+				"300": {
+					"value": "oklch(93.47% 0.1552 102.21)"
+				},
+				"400": {
+					"value": "oklch(91.68% 0.1745 101.08)"
+				},
+				"500": {
+					"value": "oklch(88.99% 0.183778 97.6996)"
+				},
+				"600": {
+					"value": "oklch(78.68% 0.162 96.43)"
+				},
+				"700": {
+					"value": "oklch(68.35% 0.14027 94.7302)"
+				},
+				"800": {
+					"value": "oklch(58.04% 0.1189 93.71)"
+				},
+				"900": {
+					"value": "oklch(50.09% 0.1025 92.6)"
+				}
+			},
+			"red": {
+				"100": {
+					"value": "oklch(94.96% 0.0395 73.45)"
+				},
+				"200": {
+					"value": "oklch(89.21% 0.076552 65.9429)"
+				},
+				"300": {
+					"value": "oklch(82.67% 0.1156 57.65)"
+				},
+				"400": {
+					"value": "oklch(77.04% 0.1486 49.15)"
+				},
+				"500": {
+					"value": "oklch(69.31% 0.203172 39.994)"
+				},
+				"600": {
+					"value": "oklch(60.03% 0.1938 35.81)"
+				},
+				"700": {
+					"value": "oklch(51.18% 0.1802 32.56)"
+				},
+				"800": {
+					"value": "oklch(42.79% 0.16 30.38)"
+				},
+				"900": {
+					"value": "oklch(36.89% 0.1443 28.98)"
+				}
+			}
+		},
+		"transparent": {
+			"0": {
+				"value": "oklch(100% 0 0 / 0)"
+			},
+			"10": {
+				"value": "oklch(100% 0 0 / 0.1)"
+			},
+			"25": {
+				"value": "oklch(100% 0 0 / 0.25)"
+			},
+			"50": {
+				"value": "oklch(100% 0 0 / 0.5)"
+			},
+			"75": {
+				"value": "oklch(100% 0 0 / 0.75)"
+			},
+			"90": {
+				"value": "oklch(100% 0 0 / 0.9)"
+			}
+		}
+	}
 }
-

package/tokens/core/tier-1-definitions/z-index.json

@@ -1,29 +1,28 @@
 {
-  "z-index": {
-    "top": {
-      "value": "99999"
-    },
-    "500": {
-      "value": "500"
-    },
-    "400": {
-      "value": "400"
-    },
-    "300": {
-      "value": "300"
-    },
-    "200": {
-      "value": "200"
-    },
-    "100": {
-      "value": "100"
-    },
-    "0": {
-      "value": "0"
-    },
-    "bottom": {
-      "value": "-100"
-    }
-  }
+	"z-index": {
+		"top": {
+			"value": "99999"
+		},
+		"500": {
+			"value": "500"
+		},
+		"400": {
+			"value": "400"
+		},
+		"300": {
+			"value": "300"
+		},
+		"200": {
+			"value": "200"
+		},
+		"100": {
+			"value": "100"
+		},
+		"0": {
+			"value": "0"
+		},
+		"bottom": {
+			"value": "-100"
+		}
+	}
 }
-