Dimension
Jux supports dimension tokens as consisting of an positive number and a unit of measure. Jux currently supports the following units:
px
, %
, em
, rem
, vh
, vw
.

Coming soon :
Dimension tokens could be aliased (pointed to) by other composite tokens like the font size, line height and letter spacing in Typography token, the border width in Border token, the x, y, spread and blur values in Shadow token etc..
Dimension tokens consist of the following fields:
- A name (like
space_xs
orpadding_top_input
) - A folder path (like
color
/core
/space_xs
) - Optional - an alias to another token
- Number value + unit
- Optional - description

Dimension tokens can be applied in the Dynamic Design Panel (DDP) within the following modules:
- Size (width, height)
- Padding and margin
- Vertical and horizontal gaps (when display is ‘flex’)
- Border width
- Corner radius
- Shadow measurements

Each color field can be tokenized by clicking on the ‘token icon button’ that appears on the right side of the field upon hover:

Under the hood
Jux adheres to the W3C Community group’s draft guidelines regarding dimension tokens (section 8.2.) and stores the token as a JSON file with the following structure:
{ // Our opinianated structure uses type-based groups at the root level "dimension": { // We like to use core/semantic/specific as the base groups in all token // types, but this group's name can be any valid JSON identifier "core": { // Token names must be valid JSON identifiers, e.g. "Foo", "foo_0", "spacing_xs" "spacing_xs": { // Specifying the type here might seem redundant since the type is used // as the root-level grouping, but this is part of the W3C group's specs "$type": "dimension", "$value": "4px" "$description": "Use only for padding and gaps" } } }}
Property | Type | Description |
---|---|---|
$type | string | Required. "dimension" |
$value | string of number and unit | Required. |
$description | string | (Optional) A description of this token and its intended usage. |