feat: [M3-7995] - Improve typescript definitions and how we export tokens - pt. 2

[jaalah-akamai]

Description 📝

In order to provide better type definitions to developers, we want to provide them with the actual values of the tokens, not just what primitive it is.

Major Changes 🔄

• Using latest version of yarn and ESM: https://github.com/amzn/style-dictionary/releases/tag/v4.0.0-prerelease.0
• Renamed config/ to style-dictionary/
• Simplified the build step and reduced most of the files in /config that we were using to manually generate index files.
• Improved the flexibility developers have when importing tokens
• Moved utils, formats, transforms and configs to their own files

Examples:

You may import each tier of tokens: Global, Alias, Component

import { Global, Alias, Component } from '@linode/design-language-system';

You may alternately access any token set under each tier:

import { Color, Interaction, Button } from '@linode/design-language-system';

You selectively import tokens by extending the path:

import { Button } from '@linode/design-language-system/components';

All of the above applies to themes:

import { Global, Alias, Component } from '@linode/design-language-system/themes/dark';

Preview 📷

Before	After

Test

• yarn generate
• Ensure everything builds properly
• Copy dist over to your local projects node_modules or yarn link projects together.
• Copy package.json over to local projects node_modules

[abailly-akamai]

This is amazing work! waiting for you to be back and other PRs to be merged to bump the version