feat(box, vars): add typography tokens

package.json

@@ -75,7 +75,7 @@
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
     "@vanilla-extract/css": "^1.14.0",
-    "@vanilla-extract/vite-plugin": "^3.9.0",
+    "@vanilla-extract/vite-plugin": "^3.9.2",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@vitest/coverage-v8": "^1.0.0-beta.4",
     "@vitest/ui": "^1.0.0-beta.4",

packages/box/src/styles/rainbow-sprinkles.css.ts

@@ -3,6 +3,15 @@ import { flatten } from 'flat';
 import { defineProperties, createRainbowSprinkles } from 'rainbow-sprinkles';
 
 const { bg, border, fill, shadow, text, gradient, ...global } = vars.color;
+const { body, heading, small, label, code, display } = vars;
+const typography = {
+  body,
+  heading,
+  small,
+  label,
+  code,
+  display,
+};
 
 type FlattenObjectKeys<T extends Record<string, unknown>, Key = keyof T> = Key extends string
   ? T[Key] extends Record<string, unknown>
@@ -16,13 +25,15 @@ type BackgroundKeys = FlattenObjectKeys<typeof bg>;
 type BorderKeys = FlattenObjectKeys<typeof border>;
 type FillKeys = FlattenObjectKeys<typeof fill>;
 type TextKeys = FlattenObjectKeys<typeof text>;
+type TypographyKeys = FlattenObjectKeys<typeof typography>;
 
 const colors = flatten<typeof global, Record<GlobalKeys, string>>(global);
 const gradients = flatten<typeof gradient, Record<GradientKeys, string>>(gradient);
 const backgrounds = flatten<typeof bg, Record<BackgroundKeys, string>>(bg);
 const borders = flatten<typeof border, Record<BorderKeys, string>>(border);
 const fills = flatten<typeof fill, Record<FillKeys, string>>(fill);
 const texts = flatten<typeof text, Record<TextKeys, string>>(text);
+const typographies = flatten<typeof typography, Record<TypographyKeys, string>>(typography);
 
 const responsiveProperties = defineProperties({
   conditions: {
@@ -53,6 +64,7 @@ const responsiveProperties = defineProperties({
     marginBottom: vars.spacing,
     borderRadius: vars.border.radius,
     borderWidth: vars.border.width,
+    font: typographies,
     fontFamily: vars.font.family,
     fontSize: vars.font.size,
     fontWeight: vars.font.weight,

packages/tokens/build.ts

@@ -147,7 +147,7 @@ const myStyleDictionary = StyleDictionary.extend({
     },
     json: {
       buildPath: 'dist/',
-      transforms: ['attribute/cti', 'name/cti/kebab', 'value/path'],
+      transforms: ['attribute/cti', 'name/cti/kebab', 'font/css', 'value/path'],
       files: [
         {
           format: 'json/nested',