Add Support for Custom Tokens in Mix Framework

[tilucasoli]

Description:

The Mix framework currently supports five built-in tokens. To enable developers to create and use custom tokens, like iconSize, Animation duration and curve. This task aims to design and implement a solution for adding and managing custom tokens seamlessly.

User Story:

As a developer using Mix, I want to define custom tokens like iconSize and Animation duration so that I can standardize icon sizes and animation duration in my projects.

Acceptance Criteria

• Design a flexible token system that supports additional custom tokens like Size, Duration and Border.
• Implement a configuration interface or API to define custom tokens.
• Ensure that custom tokens integrate well with existing API.
• Provide clear documentation on how to create and use custom tokens
• Add unit tests to validate the behavior of custom tokens

Resources:

• This issue was mentioned by @Shader-Killer on Custom MixToken Document #500;
• Review existing token implementation in Mix.
• Explore design token standards (e.g., W3C Design Tokens, Style Dictionary).
• One design system that can be used as reference is the Dharma. It contains tokens, that are not possible to create on Mix, such as Opacity and Border.

Work Items

• Create Documentation for TokenResolver feature #536