/** * Style Dictionary configuration for FA Design System (v4) * * Transforms W3C DTCG token JSON into: * - CSS custom properties (for runtime theming) * - JavaScript ES6 module (for MUI theme consumption) * - JSON (for Penpot import) */ import StyleDictionary from 'style-dictionary'; const sd = new StyleDictionary({ source: ['tokens/**/*.json'], usesDtcg: true, platforms: { // CSS custom properties css: { transformGroup: 'css', prefix: 'fa', buildPath: 'src/theme/generated/', files: [{ destination: 'tokens.css', format: 'css/variables', options: { outputReferences: true, }, }], }, // JavaScript ES6 module for MUI theme js: { transformGroup: 'js', buildPath: 'src/theme/generated/', files: [{ destination: 'tokens.js', format: 'javascript/es6', }], }, // Flat JSON for Penpot import and other tools json: { transformGroup: 'js', buildPath: 'tokens/export/', files: [{ destination: 'tokens-flat.json', format: 'json/flat', }], }, }, }); await sd.buildAllPlatforms();