export type TokenId = string; export type TokenRawGroupNamePath = string[]; export type TokenGroupNamePath = string[]; export type TokenRawNamePath = string[]; export type TokenNamePath = string[]; export type TokenRawGroupName = string; export type TokenGroupName = string; export type TokenRawName = string; export type TokenName = string; export type TokenRawGroupOrName = string; export type TokenRawModeName = string; export type TokenModeName = string; export interface TokenModeNames { rawName: TokenRawModeName; name: TokenModeName; } export type TokenRawCollectionName = string; export type TokenCollectionName = string; export interface TokenCollectionNames { rawName: TokenRawCollectionName; name: TokenCollectionName; } /** * { * "screen": [ * { rawName: 'Small Screen', name: 'small-screen' } * ], * } */ export type TokenCollectionModeNames = Record; export type TokenMap = Record; export type TokenCollectionGroupHierarchy = Record; export interface TokenGroupOrTokenIds { [group: TokenGroupName]: TokenGroupOrTokenIds | TokenId[]; } /** * Each token can have multiple end values depending on the alias hierarchy. * The first list represents all possible end value hierarchies. * The second list represents the hierarchy for a single end value. * * For example, 'color-brand' has 2 modes: 'light' and 'dark'. * For the 'light' mode, we use 'color-palate/blue/100' from the 'global' collection, which also has 2 modes ('theme-a' and 'theme-b'). * For the 'dark' mode, we use 'color-palate/blue/700' from the 'global' collection, which also has 2 modes ('theme-a' and 'theme-b'). * This results in 4 end values, and this hierarchy can continue. * * Hierarchical structure: * * color-brand -- * |-> [Mode: 'light'] color-palate/black/100 -- * | |-> 1- [Collection: 'global', mode: 'theme-a'] #000 * | \-> 2- [Collection: 'global', mode: 'theme-b'] #111 * | * \-> [Mode: 'dark'] color-palate/black/400 -- * |-> 3- [Collection: 'global', mode: 'theme-a'] #222 * \-> 4- [Collection: 'global', mode: 'theme-b'] #333 * * const colorButtonPrimary = [ * // colors/brand [theme-a] -> color-palate/black/100 [light] * [ * { collectionName: 'colors', mode: 'theme-a', token: {} }, * { collectionName: 'global', mode: 'light', token: {} }, * ], * * // colors/brand [theme-a] -> color-palate/black/500 [light] * [ * { collectionName: 'colors', mode: 'theme-a', token: {} }, * { collectionName: 'global', mode: 'dark', token: {} }, * ], * * // colors/brand [theme-b] -> color-palate/black/100 [dark] * [ * { collectionName: 'colors', mode: 'theme-b', token: {} }, * { collectionName: 'global', mode: 'dark', token: {} }, * ], * * // colors/brand [theme-b] -> color-palate/black/500 [dark] * [ * { collectionName: 'colors', mode: 'theme-b', token: {} }, * { collectionName: 'global', mode: 'dark', token: {} }, * ], * ]; */ export type TokenAliasHierarchies = TokenAliasHierarchy[][]; export interface TokenAliasHierarchy { tokenId: TokenId; collectionName: TokenCollectionName; modeName: TokenModeName; namePath: TokenNamePath; type: TokenType; } export type TokenType = 'color' | 'string' | 'gradient' | 'dimension' | 'shadow' | 'typography'; export interface Token { id: string; collectionName: TokenCollectionName; rawNamePath: TokenRawNamePath; namePath: TokenNamePath; type: TokenType; /** * { * light: {...} * dark: {...} * } */ modes: Record; variable: { name: string; css: string; scss: string; }; } export interface TokenDictionary { collectionNames: TokenCollectionNames[]; collectionModeNames: TokenCollectionModeNames; tokenMap: TokenMap; collectionGroupHierarchy: TokenCollectionGroupHierarchy; } export type TokenGroupsNameCollectionName = Record;