Available from: 2.0.0
Token Value Types
Token value can be of 3 different types:
- Raw value where the value doesn't reference anything (red: #333).
- Referenced value where the value comes from another token (primary: red).
- Mixin where value is constructed out of other values (border: 1px solid red).
Fortunately, the SDK handles the entire resolution chain for you, so you don't have to worry about this complex logic yourself. You'll always get two pieces of information:
- The final, resolved value, even if the value comes from another referenced token.
- Information about whether the token is raw or referenced.
- If the token allows Mixins (such as Typography), you'll get the same information for every property separately.
Example
Let's take color token as an example, defined like this:
export type ColorTokenValue = {
color: ColorValue;
opacity: OpacityTokenValue;
referencedTokenId: string | null;
};
Each token will come with color and opacity value filled in. You can distinguish whether this value was defined by the token or some other token by checking referencedTokenId !== null. If the reference is set, you can look up the aliased token by its id.
Color also allows mixin, for example, it is possible to create a color token that references another token, but overrides its opacity. In that case, property reference id will come handy to check that case. Such situation would in the data be defined like this:
export type ColorTokenValue = {
color: {
r: 255, g: 255, b: 255, referencedTokenId: "xxxx-xxxx-xxxx"
};
opacity: {
unit: Unit.raw,
measure: 1,
referencedTokenId: null
};
referencedTokenId: null;
};
In the case above, color references another token, but opacity was set on this token. Because referencedTokenId on the main token definition is null, token as whole didn't reference anything.
All token values
Here is a reference definition for all token values and their shapes. All token values, and all token properties have referencedTokenId property that is omitted for bravity in each type. Each token type can be imported like this:
import { ColorToken, ColorTokenValue, .... } from "@supernovaio/sdk"
ColorTokenValue
- color: The RGB value of the color.
- opacity: Opacity value of the color.
TypographyTokenValue
- fontFamily: The font family of the typography token.
- fontWeight: The weight or thickness of the font characters.
- fontSize: The size of the font characters.
- textDecoration: Decorative styling applied to text, such as underline or strike-through.
- textCase: The casing style, such as uppercase or lowercase, applied to text.
- letterSpacing: The space between individual characters in text.
- lineHeight: The vertical spacing between lines of text. Can be null.
- paragraphIndent: The indentation applied to paragraphs.
- paragraphSpacing: The vertical spacing between paragraphs.
ShadowTokenValue
- color: The color of the shadow.
- x: The horizontal offset of the shadow.
- y: The vertical offset of the shadow.
- radius: The blur radius of the shadow.
- spread: The spread radius of the shadow. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink.
- opacity: The opacity of the shadow.
- type: The type of shadow, for instance inner shadow or drop shadow.
DimensionTokenValue
- unit: The unit of measure.
- measure: The measurement value.
SizeTokenValue
- unit: The unit of measure.
- measure: The measurement value for the size.
SpaceTokenValue
- unit: The unit of measure .
- measure: The measurement value for the spacing.
OpacityTokenValue
- unit: The unit of measure for opacity.
- measure: The measurement value for opacity.
FontSizeTokenValue
- unit: The unit of measure for the font size.
- measure: The measurement value for the font size.
LineHeightTokenValue
- unit: The unit of measure for line height.
- measure: The measurement value for line height.
LetterSpacingTokenValue
- unit: The unit of measure for letter spacing.
- measure: The measurement value for letter spacing.
ParagraphSpacingTokenValue
- unit: The unit of measure for paragraph spacing.
- measure: The measurement value for paragraph spacing.
BorderWidthTokenValue
- unit: The unit of measure for border width.
- measure: The measurement value for border width.
RadiusTokenValue
- unit: The unit of measure for the radius.
- measure: The measurement value for the radius.
DurationTokenValue
- unit: The unit of measure for duration, typically milliseconds.
- measure: The measurement value for duration.
ZIndexTokenValue
- unit: The unit of measure for the z-index.
- measure: The measurement value for the z-index.
BorderTokenValue
- color: The color of the border.
- width: The width of the border.
- position: The position of the border, for example, inside, outside, or center.
- style: The style of the border, such as solid, dotted, groove, or dashed.
GradientTokenValue
- to: The end point of the gradient defined with x and y coordinates.
- from: The start point of the gradient defined with x and y coordinates.
- type: The type of gradient, for example, linear or radial.
- aspectRatio: The aspect ratio of the gradient.
- stops: An array representing the stops for the gradient. Each stop specifies a position and a color.
GradientStopValue
- position: The position of the gradient stop, a number between 0 and 1.
- color: The color at this position in the gradient.
StringTokenValue
- text: The string value.
ProductCopyTokenValue
- text: The text value of the product copy.
FontFamilyTokenValue
- text: The name of the font family.
FontWeightTokenValue
- text: The weight value of the font, for example, "bold", "normal", "300", etc.
TextCaseTokenValue
- value: The case style, such as uppercase, lowercase, camelCase, SmallCaps, or Original.
TextDecorationTokenValue
- value: The decoration style for the text, such as underline, strikethrough, or none.
VisibilityTokenValue
- value: The visibility state, like visible or hidden.
BlurTokenValue
- type: The type of blur, for example, "layer".
- radius: The radius for the blur effect.