@atomico/design-tokens api

module

import {
    compose,
    tokens,
    classes
} from "@atomico/design-tokens";

compose

create a pipeline of functions that share the same CSSStyleSheet.

Syntax

compose(
    ...middleware: ((sheet: CSSStyleSheet, lastParam:any)=> any)[]
): (firstParam:any)=>sheet: CSSStyleSheet;

tokens

transform an object to custom properties.

Syntax

tokens(theme: Tokens, prefix: string);

Example 1

Input

compose(
    tokens(
        {
            size: {
                xl: "32px",
                l: "28px",
                m: "24px",
            }
        },
        "ds"
    )
);

css mutations

:host{
    --size-xl: var( --ds--size-xl,  32px);
    --size-l: var( --ds--size-xl,  28px);
    --size-m: var( --ds--size-xl,  24px);
}

Example 2, variations

Input

compose(
    tokens(
        {
            size: {
                xl: "32px",
                l: "28px",
                m: "24px",
            },
            variation: {
                small: {
                    size: {
                        xl: "28px",
                        l: "24px",
                        m: "20px",
                    },                
                }
            }
        },
        "ds"
    )
);

css mutations

:host{
    --size-xl: var( --ds--size-xl,  32px);
    --size-l: var( --ds--size-xl,  28px);
    --size-m: var( --ds--size-xl,  24px);
}
:host([small]){
    --size-xl: var( --ds-small--size-xl,  28px);
    --size-l: var( --ds-small--size-xl,  24px);
    --size-m: var( --ds-small--size-xl,  20px);
}

classes

It facilitates the reuse of tokens, through the generation of dynamic classes.

Syntax

classes(tokens:Tokens);

Example

Input

import {css} from "atomico";
import { compose, classes } from "@atomico/design-tokens";

const designTokens = compose(
    classes(
        {
            size: {
                xl: "32px",
                l: "28px",
                m: "24px",
            }
        }
    )
);

export const classUtils = designTokens(
    css`
        .gap.--size{
            gap: var(--size);
        }
    `
);

CSS mutations

.gap\.xl{    
    gap: var(--size-xl);
}
.gap\.l{    
    gap: var(--size-l);
}
.gap\.m{    
    gap: var(--size-m);
}