Utils

Type Aliases

FlattenTokens

type FlattenTokens = Map<string, Token>;

FormatName

type FormatName = typeof formatNames[number];

LoaderName

type LoaderName = typeof loaderNames[number];

TransformName

type TransformName = typeof transformNames[number];

Variables

COMPOSITE_TOKEN_TYPES

const COMPOSITE_TOKEN_TYPES: TokenType[];

DTCG_KEYS

const DTCG_KEYS: string[];

The keys of the Design Tokens Community Group Format.

formatNames

const formatNames: readonly string[];

formatRegistry

const formatRegistry: Format[];

hexColorWithAlphaRegex

const hexColorWithAlphaRegex: RegExp;

Regex for hex color with alpha.

Explanation:

# matches the character # literally.
([A-Fa-f0-9]{3}){1,2} matches any character in the range A-F, a-f, or 0-9 three times, one or two times.
\b asserts a word boundary.
| or.
# matches the character # literally.
([A-Fa-f0-9]{4}){1,2} matches any character in the range A-F, a-f, or 0-9 four times, one or two times.
\b asserts a word boundary.

Example

hexColorWithAlphaRegex.test("#000000"); // true
hexColorWithAlphaRegex.test("#000"); // true
hexColorWithAlphaRegex.test("#000000ff"); // true
hexColorWithAlphaRegex.test("#000f"); // true

loaderNames

const loaderNames: readonly string[];

loaderRegistry

const loaderRegistry: Loader[];

TOKEN_TYPES

const TOKEN_TYPES: TokenType[];

tokenReferenceRegex

const tokenReferenceRegex: RegExp;

Regex for token reference.

Explanation:

^ asserts the start of a line.
\{ matches the character { literally.
[a-zA-Z0-9\s@_-]+ matches any character in the range a-z, A-Z, 0-9, whitespace, @, _, - one or more times.
(?:\.[a-zA-Z0-9\s@_-]+)* non-capturing group that matches any character in the range a-z, A-Z, 0-9, whitespace, @, _, - one or more times, zero or more times.
\} matches the character } literally.
$ asserts the end of a line.

Example

tokenReferenceRegex.test("{brand.color.core}"); // true
tokenReferenceRegex.test("{@typography_primitives.Scale 03}"); // true
tokenReferenceRegex.test("{brand.color.unknown"); // false

transformNames

const transformNames: readonly string[];

transformRegistry

const transformRegistry: (Transform | TransformGroup)[];

UNALLOWED_CHARACTERS_IN_NAME

const UNALLOWED_CHARACTERS_IN_NAME: string[];

The unallowed characters in token or group name. Reference: https://tr.designtokens.org/format/#character-restrictions

Functions

applyTransform()

function applyTransform(transform, input): undefined | string | Token;

Type guard to distinguish between the two possible types of transformer and handle them appropriately.

Parameters

Parameter	Type	Description
`transform`	`Transform`	The transform to check.
`input`	`string` \| `Token`	The input to transform.

Returns

undefined | string | Token

The result of the transformation.

assign()

function assign<X>(initial, override): X;

Merges two objects together recursivly into a new object applying values from right to left. Recursion only applies to child object properties.

Type Parameters

Type Parameter
`X` extends `Record`<`string` \| `number` \| `symbol`, `any`>

Parameters

Parameter	Type
`initial`	`X`
`override`	`X`

Returns

X

capitalize()

function capitalize(str): string;

Capitalize the first word of the string

capitalize('hello') -> 'Hello' capitalize('va va voom') -> 'Va va voom'

Parameters

Parameter	Type
`str`	`string`

Returns

string

findInRegistry()

function findInRegistry<T>(name, registry): T;

Type Parameters

Type Parameter
`T`

Parameters

Parameter	Type
`name`	`string`
`registry`	`T` & `object`[]

Returns

T

generateConfig()

function generateConfig(__namedParameters): ConfigOptions;

Parameters

Parameter	Type
`__namedParameters`	{ `format`: `string`; `loader`: `string`; `name?`: `string`; }
`__namedParameters.format`	`string`
`__namedParameters.loader`	`string`
`__namedParameters.name?`	`string`

Returns

ConfigOptions

get()

function get<TDefault>(
   value, 
   path, 
   defaultValue?): TDefault;

Dynamically get a nested value from an array or object with a string.

Type Parameters

Type Parameter	Default type
`TDefault`	`unknown`

Parameters

Parameter	Type
`value`	`any`
`path`	`string`
`defaultValue?`	`TDefault`

Returns

TDefault

Example

get(person, 'friends[0].name')

hasUnallowedCharactersInName()

function hasUnallowedCharactersInName(value): boolean;

Check if the value has unallowed characters in the name. Reference: https://tr.designtokens.org/format/#character-restrictions

Parameters

Parameter	Type	Description
`value`	`string`	The value to check.

Returns

boolean

The result of the check.

isEqual()

function isEqual<TType>(x, y): boolean;

Type Parameters

Type Parameter
`TType`

Parameters

Parameter	Type
`x`	`TType`
`y`	`TType`

Returns

boolean

isObject()

function isObject(value): value is object;

Parameters

Parameter	Type
`value`	`any`

Returns

value is object

isReference()

function isReference(value): value is `{${string}}`;

Check if the value is a reference.

Parameters

Parameter	Type	Description
`value`	`any`	The $value parameter of the Token.

Returns

value is `{${string}}`

The result of the check.

See

Token

isToken()

function isToken(obj): obj is Token;

Check if the object is a token. Reference: https://tr.designtokens.org/format/#additional-group-properties

Parameters

Parameter	Type	Description
`obj`	`object`	The object to check.

Returns

obj is Token

The result of the check.

isTokenComposite()

function isTokenComposite(value): value is TransitionToken | ShadowToken | GradientToken | TypographyToken | StrokeStyleToken | BorderToken;

Parameters

Parameter	Type
`value`	`Token`

Returns

isValueComposite()

function isValueComposite(value): value is TokenCompositeValue;

Check if the value is composite. It can be an object or an array of objects.

Parameters

Parameter	Type	Description
`value`	\| `string` \| `number` \| `string`[] \| { `unit`: `"px"` \| `"rem"`; `value`: `number`; } \| { `unit`: `"ms"` \| `"s"`; `value`: `number`; } \| [`number` \| `{${string}}`, `number` \| `{${string}}`, `number` \| `{${string}}`, `number` \| `{${string}}`] \| { `delay`: \| `{${string}}` \| { `unit`: `"ms"` \| `"s"`; `value`: `number`; }; `duration`: \| `{${string}}` \| { `unit`: `"ms"` \| `"s"`; `value`: `number`; }; `timingFunction`: \| `{${string}}` \| [`number` \| `{${string}}`, `number` \| `{${string}}`, `number` \| `{${string}}`, `number` \| `{${string}}`]; } \| { `blur`: \| `{${string}}` \| { `unit`: `"px"` \| `"rem"`; `value`: `number`; }; `color`: `#${string}` \| `{${string}}`; `inset?`: `boolean`; `offsetX`: \| `{${string}}` \| { `unit`: `"px"` \| `"rem"`; `value`: `number`; }; `offsetY`: \| `{${string}}` \| { `unit`: `"px"` \| `"rem"`; `value`: `number`; }; `spread`: \| `{${string}}` \| { `unit`: `"px"` \| `"rem"`; `value`: `number`; }; } \| `ShadowValue`[] \| ( \| `{${string}}` \| { `color`: `#${string}` \| `{${string}}`; `position`: `number` \| `{${string}}`; })[] \| { `fontFamily`: `string` \| `string`[]; `fontSize`: \| `{${string}}` \| { `unit`: `"px"` \| `"rem"`; `value`: `number`; }; `fontWeight`: `string` \| `number`; `letterSpacing`: \| `{${string}}` \| { `unit`: `"px"` \| `"rem"`; `value`: `number`; }; `lineHeight`: `number` \| `{${string}}`; } \| { `dashArray`: ( \| `{${string}}` \| { `unit`: `"px"` \| `"rem"`; `value`: `number`; })[]; `lineCap`: `"butt"` \| `"round"` \| `"square"`; } \| { `color`: `#${string}` \| `{${string}}`; `style`: \| `{${string}}` \| `"solid"` \| `"dashed"` \| `"dotted"` \| `"double"` \| `"groove"` \| `"ridge"` \| `"outset"` \| `"inset"` \| { `dashArray`: ( \| `{${string}}` \| { `unit`: `"px"` \| `"rem"`; `value`: `number`; })[]; `lineCap`: `"butt"` \| `"round"` \| `"square"`; }; `width`: \| `{${string}}` \| { `unit`: `"px"` \| `"rem"`; `value`: `number`; }; }	The value to check.

Returns

value is TokenCompositeValue

Boolean value.

replacer()

function replacer(_, value): any;

Replace the Map with an object. Used in JSON.stringify.

Parameters

Parameter	Type
`_`	`any`
`value`	`any`

Returns

any

stringifyUnitValue()

function stringifyUnitValue(value): string;

Stringify the value of the dimension token.

Parameters

Parameter	Type	Description
`value`	\| `{${string}}` \| { `unit`: `"px"` \| `"rem"`; `value`: `number`; } \| { `unit`: `"ms"` \| `"s"`; `value`: `number`; }	The value of the dimension token.

Returns

string

The stringified value.

toFlat()

function toFlat(obj): object;

Parameters

Parameter	Type
`obj`	`Token` \| `TokenGroup`

Returns

object

Name	Type	Default value
`flatten`	`Map`<`string`, `Token`>	`sortedFlatten`

traverseTokens()

function traverseTokens(value, __namedParameters): void;

Parameters

Parameter	Type
`value`	`unknown`
`__namedParameters`	{ `onGroup?`: (`group`, `path`) => `void`; `onToken?`: (`token`, `path`, `lastType?`, `lastGroupProperties?`) => `void`; }
`__namedParameters.onGroup?`	(`group`, `path`) => `void`
`__namedParameters.onToken?`	(`token`, `path`, `lastType?`, `lastGroupProperties?`) => `void`

Returns

void

unwrapReference()

function unwrapReference(value): string;

Unwrap the reference.

Parameters

Parameter	Type	Description
`value`	`any`	The value parameter of the Token.

Returns

string

The unwrapped reference.

See

Token