AlaskaAirlines / AuroDesignTokens

Abstract UI atomic values to support the Auro Design System.
https://auro.alaskaair.com/getting-started/developers/design-tokens
Apache License 2.0
19 stars 7 forks source link

Auro design tokens: Support importing into TypeScript #182

Open codetothepoint opened 1 month ago

codetothepoint commented 1 month ago

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

chrisfalaska commented 1 month ago

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