Generate Design Token

v1.0.0

The generate design token library is a library that provides convenience for defining design tokens in JSON format.

Useage

You can use the value of a token that is defined using a reference value.
You can reference different tokens when creating composite properties as well as single properties.
A simple rule can save you the trouble of rewriting duplicate token values.

Try it

{
    "color": {
        "red": {
            "$type": "color",
            "$value": "#ff0000"
        },
        "blue": {
            "$type": "color",
            "$value": "#0000ff"
        },
        "primary": {
            "$type": "color",
            "$value": "{color.red}"
        }
    },
    "border": {
        "thin": {
            "$type": "string",
            "$value": "1px solid {color.red}"
        }
    },
    "box-shadow": {
        "$type": "string",
        "$value": "2px 5px 5px {color.primary}"
    }
}

{
    "color": {
        "red": {
            "$type": "color",
            "$value": "#ff0000"
        },
        "blue": {
            "$type": "color",
            "$value": "#0000ff"
        },
        "primary": {
            "$type": "color",
            "$value": "{color.red}"
        }
    },
    "border": {
        "thin": {
            "$type": "string",
            "$value": "1px solid {color.red}"
        }
    },
    "box-shadow": {
        "$type": "string",
        "$value": "2px 5px 5px {color.primary}"
    }
}

{}

{}