Builder

Type Aliases

BaseProperties

type BaseProperties = object;

Properties

$deprecated?

optional $deprecated?: boolean | string;

$description?

optional $description?: string;

$extensions?

optional $extensions?: Record<string, unknown>;

BorderToken

type BorderToken = BaseProperties & object;

Type Declaration

Name	Type
`$type?`	`"border"`
`$value`	\| { `color`: `ColorToken`[`"$value"`]; `style`: `StrokeStyleToken`[`"$value"`]; `width`: `DimensionToken`[`"$value"`]; } \| `TokenReference`

ColorSpace

type ColorSpace = typeof colorSpaces[number];

ColorToken

type ColorToken = BaseProperties & object;

Type Declaration

Name	Type
`$type?`	`"color"`
`$value`	\| `string` \| `StructuredColor` \| `TokenReference`

Config

type Config = object;

Properties

data

data: string | string[] | object | object[];

log?

optional log?: Partial<LogConfig>;

options?

optional options?: ConfigOptions;

ConfigOptions

type ConfigOptions = object;

Properties

customValidator?

optional customValidator?: ValidatorConfig;

loader

loader: Loader | string;

platforms

platforms: Platform[];

validator?

optional validator?: (value, config?) => ValidatorReturn;

Parameters

Parameter	Type
`value`	`unknown`
`config?`	`ValidatorConfig`

Returns

ValidatorReturn

CubicBezierToken

type CubicBezierToken = BaseProperties & object;

Type Declaration

Name	Type
`$type?`	`"cubicBezier"`
`$value`	\| [`number`, `number`, `number`, `number`] \| `TokenReference`

DimensionToken

type DimensionToken = BaseProperties & object;

Type Declaration

Name	Type
`$type?`	`"dimension"`
`$value`	`DimensionValue` \| `TokenReference`

DimensionValue

type DimensionValue = object;

Properties

unit

unit: "px" | "rem";

value

value: number;

DurationToken

type DurationToken = BaseProperties & object;

Type Declaration

Name	Type
`$type?`	`"duration"`
`$value`	`DurationValue` \| `TokenReference`

DurationValue

type DurationValue = object;

Properties

unit

unit: "ms" | "s";

value

value: number;

FontFamilyToken

type FontFamilyToken = BaseProperties & object;

Type Declaration

Name	Type
`$type?`	`"fontFamily"`
`$value`	`string` \| `string`[] \| `TokenReference`

FontWeightToken

type FontWeightToken = BaseProperties & object;

Type Declaration

Name	Type
`$type?`	`"fontWeight"`
`$value`	`string` \| `number` \| `TokenReference`

FormatName

type FormatName = typeof formatNames[number];

GradientToken

type GradientToken = BaseProperties & object;

Type Declaration

Name	Type
`$type?`	`"gradient"`
`$value`	\| ( \| { `color`: `ColorToken`[`"$value"`]; `position`: `NumberToken`[`"$value"`]; } \| `TokenReference`)[] \| `TokenReference`

JsonPointerReference

type JsonPointerReference = `#/${string}`;

LoaderName

type LoaderName = typeof loaderNames[number];

LogConfig

type LogConfig = object;

Properties

verbosity

verbosity: LogVerbosity;

warnings

warnings: LogWarningLevel;

LogVerbosity

type LogVerbosity = typeof logVerbosityLevels[keyof typeof logVerbosityLevels];

LogWarningLevel

type LogWarningLevel = typeof logWarningLevels[keyof typeof logWarningLevels];

LooseToken

type LooseToken = ModifyProperties<Token, {
  $type: string;
  $value: unknown;
}>;

NumberToken

type NumberToken = BaseProperties & object;

Type Declaration

Name	Type
`$type?`	`"number"`
`$value`	`number` \| `TokenReference`

Platform

type Platform = object;

Properties

config?

optional config?: FormatConfig;

format

format: Format | string;

name

name: string;

outputs

outputs: object[];

fileHeader?

optional fileHeader?: FileHeader;

filter?

optional filter?: ({ token, path }) => boolean;

Parameters

Parameter	Type
`{ token, path }`	{ `path`: `string`; `token`: `Token`; }
`{ token, path }.path`	`string`
`{ token, path }.token`	`Token`

Returns

boolean

name

name: string;

transforms?

optional transforms?: (string | Transform | TransformGroup)[];

PlatformWithoutString

type PlatformWithoutString = ModifyProperties<Platform, {
  format: Format;
  transforms: (Transform | TransformGroup)[];
}>;

ReferenceValue

type ReferenceValue = `{${string}}`;

ShadowToken

type ShadowToken = BaseProperties & object;

Type Declaration

Name	Type
`$type?`	`"shadow"`
`$value`	\| `ShadowValue` \| (`ShadowValue` \| `TokenReference`)[] \| `TokenReference`

StrictToken

type StrictToken = WithRequired<Token, "$type">;

StrokeStyleToken

type StrokeStyleToken = BaseProperties & object;

Type Declaration

Name	Type
`$type?`	`"strokeStyle"`
`$value`	\| typeof `strokePredefinedValues`[`number`] \| { `dashArray`: ( \| `DimensionToken`[`"$value"`] \| `TokenReference`)[]; `lineCap`: typeof `lineCapPredefinedValues`[`number`]; } \| `TokenReference`

StructuredColor

type StructuredColor = object;

Properties

alpha?

optional alpha?: number;

colorSpace

colorSpace: ColorSpace;

components

components: (number | "none")[];

hex?

optional hex?: string;

Token

type Token = 
  | ColorToken
  | DimensionToken
  | FontFamilyToken
  | FontWeightToken
  | DurationToken
  | CubicBezierToken
  | NumberToken
  | TransitionToken
  | ShadowToken
  | GradientToken
  | TypographyToken
  | StrokeStyleToken
  | BorderToken;

TokenCompositeValue

type TokenCompositeValue = Exclude<
  | TypographyToken["$value"]
  | ShadowToken["$value"]
  | GradientToken["$value"]
  | TransitionToken["$value"]
  | StrokeStyleToken["$value"]
| BorderToken["$value"], TokenReference>;

TokenGroup

type TokenGroup = TokenGroupProperties & object;

TokenGroupProperties

type TokenGroupProperties = object;

Properties

$deprecated?

optional $deprecated?: boolean | string;

$description?

optional $description?: string;

$extends?

optional $extends?: 
  | ReferenceValue
  | JsonPointerReference;

$extensions?

optional $extensions?: Record<string, unknown>;

$schema?

optional $schema?: string;

$type?

optional $type?: TokenType;

TokenReference

type TokenReference = ReferenceValue;

TokenType

type TokenType = typeof tokenTypes[number];

TokenValue

type TokenValue = Extract<Token, {
  $value: unknown;
}>["$value"];

TransformName

type TransformName = typeof transformNames[number];

TransitionToken

type TransitionToken = BaseProperties & object;

Type Declaration

Name	Type
`$type?`	`"transition"`
`$value`	\| { `delay`: `DurationToken`[`"$value"`]; `duration`: `DurationToken`[`"$value"`]; `timingFunction`: `CubicBezierToken`[`"$value"`]; } \| `TokenReference`

TypographyToken

type TypographyToken = BaseProperties & object;

Type Declaration

Name	Type
`$type?`	`"typography"`
`$value`	\| { `fontFamily`: `FontFamilyToken`[`"$value"`]; `fontSize`: `DimensionToken`[`"$value"`]; `fontWeight`: `FontWeightToken`[`"$value"`]; `letterSpacing`: `DimensionToken`[`"$value"`]; `lineHeight`: `NumberToken`[`"$value"`]; } \| `TokenReference`

Variables

camelCaseTransform

const camelCaseTransform: Transform;

Formats the given string in camel case fashion

camel('hello world') -> 'helloWorld' camel('va va-VOOM') -> 'vaVaVoom' camel('helloWorld') -> 'helloWorld'

CSS_EXTENSION

const CSS_EXTENSION: "com.tokun.css" = "com.tokun.css";

cssBorderStyleTransform

const cssBorderStyleTransform: Transform;

cssFontTransform

const cssFontTransform: Transform;

cssFormat

const cssFormat: Format;

CSS formatter. Custom extension com.tokun.css with value and resolvedValue properties is used to take transformed values (recommended for better CSS output). Otherwise, the value and resolvedValue will be used.

Reference:

cssGradientTransform

const cssGradientTransform: Transform;

cssShadowTransform

const cssShadowTransform: Transform;

cssTransforms

const cssTransforms: TransformGroup;

cssUnitTransform

const cssUnitTransform: Transform;

cssVariableSafeTransform

const cssVariableSafeTransform: Transform;

detailedJsonFormat

const detailedJsonFormat: Format;

Detailed JSON formatter.

dtcgJsonLoader

const dtcgJsonLoader: Loader;

flattenJsonFormat

const flattenJsonFormat: Format;

Simple JSON formatter.

formatNames

const formatNames: readonly string[];

kebabCaseTransform

const kebabCaseTransform: Transform;

Formats the given string in dash case fashion

dash('hello world') -> 'hello-world' dash('va va_VOOM') -> 'va-va-voom' dash('helloWord') -> 'hello-word'

loaderNames

const loaderNames: readonly string[];

logVerbosityLevels

const logVerbosityLevels: object;

Type Declaration

Name	Type	Default value
`default`	`"default"`	`"default"`
`silent`	`"silent"`	`"silent"`
`verbose`	`"verbose"`	`"verbose"`

logWarningLevels

const logWarningLevels: object;

Type Declaration

Name	Type	Default value
`disabled`	`"disabled"`	`"disabled"`
`error`	`"error"`	`"error"`
`warn`	`"warn"`	`"warn"`

pascalCaseTransform

const pascalCaseTransform: Transform;

Formats the given string in pascal case fashion

pascal('hello world') -> 'HelloWorld' pascal('va va boom') -> 'VaVaBoom'

RESOLVED_EXTENSION

const RESOLVED_EXTENSION: "com.tokun.resolvedValue" = "com.tokun.resolvedValue";

scssFormat

const scssFormat: Format;

SCSS formatter. Generates $variable-name: value; output.

snakeCaseTransform

const snakeCaseTransform: Transform;

Formats the given string in snake case fashion

snake('hello world') -> 'hello_world' snake('va va-VOOM') -> 'va_va_voom' snake('helloWord') -> 'hello_world'

Functions

build()

function build(config, buildOptions?): BuildOutput[];

Parameters

Parameter	Type
`config`	`Config`
`buildOptions?`	{ `log?`: `Partial`<`LogConfig`>; `writeTo?`: `string`; }
`buildOptions.log?`	`Partial`<`LogConfig`>
`buildOptions.writeTo?`	`string`

Returns

BuildOutput[]

defineConfig()

function defineConfig<T>(config): T;

Define a configuration object for the design token builder. It should be used with CLI.

Type Parameters

Type Parameter
`T` extends `Config`

Parameters

Parameter	Type
`config`	`T`

Returns

T

isReference()

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

Check if the value is a curly-brace reference.

Parameters

Parameter	Type
`value`	`unknown`

Returns

value is `{${string}}`

registerFormat()

function registerFormat(format): void;

Parameters

Parameter	Type
`format`	`Format`

Returns

void

registerLoader()

function registerLoader(loader): void;

Parameters

Parameter	Type
`loader`	`Loader`

Returns

void

registerTransform()

function registerTransform(transform): void;

Parameters

Parameter	Type
`transform`	`Transform` \| `TransformGroup`

Returns

void

resolveTokens()

function resolveTokens(tokens): FlattenTokens;

Resolves all token references in the given token collection

Parameters

Parameter	Type
`tokens`	`FlattenTokens`

Returns

FlattenTokens

stringifyCssValue()

function stringifyCssValue(value): string;

Parameters

Parameter	Type
`value`	`unknown`

Returns

string

unwrapReference()

function unwrapReference(value): string;

Unwrap a curly-brace reference.

Parameters

Parameter	Type
`value`	`unknown`

Returns

string