Dimension

Dimension tokens in the Jux Editor

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.

  • Note that dimension fields can accept entries like ‘auto’ which cannot be tokenized.

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 have these fields:

  1. A name (like "space_xs" or "padding_top_input")

  2. A folder path (like "color/core/space_xs")

  3. Optional - an alias to another token

  4. Number value + unit

  5. Optional - description

Dimension tokens can later be used in the DDP in the following modules:

  1. Size (width, height)

  2. Padding + margin

  3. Vertical and horizontal gaps when display is ‘flex’

  4. Border width

  5. Corner radius

  6. 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"
			}
		}
	}
}
PreviousTypographyNextRoadmap 🛣️

Last updated