export tetra tokens as CSS Variables

package.json

@@ -109,5 +109,6 @@
   },
   "resolutions": {
     "jackspeak": "2.1.1"
-  }
+  },
+  "packageManager": "[email protected]+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903"
 }

src/css-variables.mdx

@@ -0,0 +1,26 @@
+import { Meta, Source } from '@storybook/blocks';
+import cssVariables from './css-variables';
+
+<Meta title="Tokens/CSS Variables" />
+
+# Token CSS Variables
+
+The tokens are also available as CSS Variables. To use them:
+
+```jsx
+import cssVariables from '@chromatic-com/tetra/css-variables';
+import { css, Global } from '@storybook/theming';
+
+const tetraCSSVariables = css`
+  ${cssVariables}
+`;
+
+const App = () => (
+  <>
+    <Global styles={tetraCSSVariables} />
+    {/* Other app components */}
+  </>
+);
+```
+
+<Source code={cssVariables} />

src/css-variables.ts

@@ -0,0 +1,48 @@
+import {
+  color,
+  fontFamily,
+  fontWeight,
+  fontSize,
+  lineHeight,
+  breakpoint,
+  spacing,
+} from './_tokens/tokens';
+
+const prefix = 'tetra';
+
+function jsonToCssVariables(tokenType: string, json: Record<string, any>) {
+  const keys = Object.keys(json);
+
+  const vars = keys.map((key) => {
+    const varValue = json[key];
+    const varName = `--${prefix}-${tokenType}-${key}`;
+
+    return `  ${varName}: ${varValue};`;
+  }, {});
+
+  return vars.join('\n');
+}
+
+function generateCSSVariables() {
+  const cssVariables = `:root {
+${jsonToCssVariables('color', color)}
+
+${jsonToCssVariables('fontFamily', fontFamily)}
+
+${jsonToCssVariables('fontWeight', fontWeight)}
+
+${jsonToCssVariables('fontSize', fontSize)}
+
+${jsonToCssVariables('lineHeight', lineHeight)}
+
+${jsonToCssVariables('breakpoint', breakpoint)}
+
+${jsonToCssVariables('spacing', spacing)}
+}`;
+
+  return cssVariables;
+}
+
+const cssVariables = generateCSSVariables();
+
+export default cssVariables;

tsup.config.ts

@@ -2,7 +2,7 @@
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
-  entry: ['src/index.ts'],
+  entry: ['src/index.ts', 'src/css-variables.ts'],
   treeshake: true,
   sourcemap: true,
   minify: true,