Available from: 2.0.0
Import
import { Token } from "@supernovaio/sdk"
Properties
- id: The persistent identifier of the token. This ID remains consistent and never changes across different versions.
- idInVersion: The version-specific identifier of the token. This ID changes with each new version created. Each version of the token has a different idInVersion.
- brandId: The persistent identifier of the associated brand. This ID is immutable since tokens cannot be transferred between brands.
- themeId: The identifier of the theme the token belongs to. Can be null if the token is not associated with any theme.
- designSystemVersionId: The identifier of the design system version the token is associated with.
- name: The display name of the token.
- description: A brief explanation or overview of the token's purpose or characteristics.
- tokenType: The category or type of design token, such as color, typography, spacing, etc.
- origin: The origin of token, the token source data object. Will be null if the token was created in Supernova. Otherwise it will point to the original object, such as a Figma style.
- parentGroupId: The identifier of the group the token belongs to within the design system's organization structure.
- sortOrder: A numerical value indicating the token's position or sequence in a list or grouping.
- properties: Custom properties that are associated with this token.
- propertyValues: An object containing key-value pairs where each key corresponds to a property.id, and its value provides the property payload.
- createdAt: The date and time when the token was first created.
- updatedAt: The most recent date and time when the token was updated or modified.
Token types
While the base object contains a lot of information, you'll never work with it directly (as it can't be created directly in the first place). Instead, each token is specialized based on its type:
const tokens = sdk.tokens.tokens(..) // Type of Array<Token>
// Get access to actual token value, different for each type
switch (token.tokenType) {
case TokenType.color: {
const t = token as ColorToken
const color = t.value.color // Value is specific to token type
}
default: {
const value = token.value // Will throw error because there is no value on generic token
};
}
You can rely on associating token type with the object class as it will always be the case. There can never be token with type which would not align with its encompassing class.
You can read about all types of tokens here: