Color tokens in the Editor

Jux supports color tokens as a combination of HEX value (like #141414) and opacity value as percentage (1-100). Despite having 2 distinct values the color token is still considered a simple -not a composite - token (like typography, shadow or border), since it can be written as a unified RGBA value.

The color circular thumbnail will show both the hex value, and the unified opacity result if the opacity value is other than 100%

Color tokens have these fields:

  1. A name (like blue-500 or primary-bg)

  2. A folder path (like color/core/blue-500)

  3. Optional - an alias to another token

  4. Hex value

  5. Opacity value

  6. Optional - description

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

  1. Background color

  2. Text color

  3. Border color

  4. Shadow color

  5. Asset color

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 color tokens (section 8.1.) and stores the token as a JSON file with the following structure:

	// Our opinianated structure uses type-based groups at the root level
	"color": {
		// 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", "600"
		  "600": {
			  // 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": "color",
		  	  "$value": "#ff00ff"
			  "$description": "This is a color token in the core to use in brand"



Required. "color"






(Optional) A description of this token and its intended usage.

Last updated