AuroDesignTokens icon indicating copy to clipboard operation
AuroDesignTokens copied to clipboard

Auro design tokens: Support importing into TypeScript

Open codetothepoint opened this issue 1 year ago • 1 comments

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

codetothepoint avatar Oct 16 '24 21:10 codetothepoint

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

chrisfalaska avatar Oct 17 '24 18:10 chrisfalaska