Add design tokens to Figma Utility Spec

[pseys]

Issue
All component design specs require Characteristic specs to aid development and ensure alignment between design and code. These specs can easily become outdated. There are also opportunities for human error when duplicating tokens to reuse design elements. Creating the specs can be time consuming

Tasks

• Add visual representations of each characteristic token into the Salt Spec Utilities library in Figma as component instances.
• Each characteristic should be its own component, with each token within the characteristic being an instance of that component
• Consider a redesign of the characteristic spec to improve scanning and readability.
• All additions to the Spec Utility must use Salt Next variables

Benefits
Creating visual representations of each design token within Figma...

• Reduces the chance of error
• Speeds up the creation of characteristic specs
• Ensures consistency across specs
• Helps keep design specs up-to-date with minimal manual effort

Future considerations

• Allows deprecated tokens to be flagged with the update filtering through to any specs the token is used in
• If the spec utility is opened up to a wider audience can help other teams create custom components or patterns
• Using the Salt Next variables allows specs to be set up for specific themes/style recipes

Tasks

Beta Give feedback

1. Update spec utilities to use Salt NEXT Color library (Ivan)
2. Update spec utilities to use Salt NEXT Style library (Ivan)
3. Add color token component to Spec utilities (Paul)

[yunjungyeh]

• a quick update - 31 Jul - updated/published cursor order: moved default cursor to the left so it will be the default from the asset panel (cc @bhoppers2008

[mark-tate]

Cortado Goal: Paul to complete his part (Ivan to help if needed)

[origami-z]

Aug 12 - WIP

[joshwooding]

Aug 14 - Finished the core component with @pseys. In review.