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
- [x] Update spec utilities to use Salt NEXT Color library (Ivan)
- [x] Update spec utilities to use Salt NEXT Style library (Ivan)
- [ ] Add color token component to Spec utilities (Paul)