@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

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

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