AuroDesignTokens
AuroDesignTokens copied to clipboard
Auro design tokens: Support importing into TypeScript
Is your feature request related to a problem? Please describe.
No response
Describe the solution you'd like
I would like to import Auro tokens into server-side rendered components written in TypeScript.
Here is the syntax I would like to use:
import {DsColorBackgroundPrimary100Default} from '@aurodesignsystem/design-tokens/dist/tokens/JSData--color';
But instead of using JSData--color, it would be nice to use TSData--color instead.
When I try importing JSData--color, I get the following compilation error:
Could not find a declaration file for module '@aurodesignsystem/design-tokens/dist/tokens/JSVariables--color.js'. '[my project]/node_modules/@aurodesignsystem/design-tokens/dist/tokens/JSVariables--color.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/aurodesignsystem__design-tokens` if it exists or add a new declaration (.d.ts) file containing `declare module '@aurodesignsystem/design-tokens/dist/tokens/JSVariables--color.js';`
Describe alternatives you've considered
No response
Additional context
No response
Exit criteria
No response
I've used Style Dictionary in the past to export design tokens to different formats (JSON, CSS Vars, iOS, Android, etc)
https://amzn.github.io/style-dictionary/#/
https://github.com/amzn/style-dictionary/issues/425