@petsmart-ui/design-tokens v1.2.0

design-tokens

Design Tokens for our Sparky Design System

In src/index.ts, this file contains three objects:

Base -> Application/Semantic -> Component

Where Component values are driven by the Application/Semantic object and that object is informed by the Base.

1. The Base object contains raw definitions mostly derived from the design documentation. Here we try to use the language of that design documentation and define all possible values. If values are missing we want to negotiate and add them here.
2. The Application/Semantic layer allows us to scale across themes or applications. Things like "background color" and "text color" get loosely defined initial states. These values should only references to the values in the Base object defined in step one.
3. The Component object generates the final values that our design system components will consume. These values are references to the Application/Semantic values.

Powered by Style Dictionary.