chore: add component tokens

[rssilva]

Description of the change

Add component tokens

Type of change

• Non-Breaking Change (change to existing functionality)

[changeset-bot]

🦋 Changeset detected

Latest commit: 818cbdc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@localyze-pluto/design-tokens	Minor
@localyze-pluto/theme	Major
@localyze-pluto/components	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Size Change: 0 B

Total Size: 43 kB

ℹ️ View Unchanged

Filename	Size
packages/components/dist/index.js	25.7 kB
packages/design-tokens/dist/index.js	8.91 kB
packages/design-tokens/dist/js/border-radius.js	181 B
packages/design-tokens/dist/js/border-style.js	140 B
packages/design-tokens/dist/js/border-width.js	146 B
packages/design-tokens/dist/js/colors.js	4.44 kB
packages/design-tokens/dist/js/font-family.js	140 B
packages/design-tokens/dist/js/font-size.js	261 B
packages/design-tokens/dist/js/font-weight.js	155 B
packages/design-tokens/dist/js/line-height.js	185 B
packages/design-tokens/dist/js/margin.js	131 B
packages/design-tokens/dist/js/padding.js	159 B
packages/design-tokens/dist/js/size.js	247 B
packages/design-tokens/dist/js/space.js	546 B
packages/design-tokens/dist/js/z-index.js	169 B
packages/theme/dist/index.js	1.47 kB

_{compressed-size-action}

[apvale]

Code looks good to me! Thanks, Rafa 💟

I ran the storybook and saw that the RGB values are broken in the colors list. Do you know why?

[rssilva]

@apvale good catch! I haven't noticed 🤦

This happens because the docs used to get the colors straight from the colors JSON directly and that was an hexadecimal value. Now it's a template variable.

https://github.com/Localitos/pluto/blob/main/packages/design-tokens/docs/components/constants.tsx#L48

I hope to have solved that with this