System Token Types

Special Tokens

Elevate includes a number of “helper” token types that provide additional capabilities beyond the core functionality for specific situations. These can be used to extend the framework’s capabilities, but they should be used with caution.

Pass-Through Tokens

• Unrestricted value entry.
• No build-time validation, for dynamic or flexible values.
• Used for CSS rules that require special syntax (e.g., URLs or complex values such as transforms).
• Supports any value that can be passed through to a CSS declaration.
• Spaces are supported in the token value by using an underscore (_) to replace spaces.

Example:

propertyAttributeMap.ts

rotate: {
  "rotate": "PassThroughToken" // Allows any rotation value
}

<div class="rotate:((90deg))"></div>

'Pass Through' Means Literally

When using PassThroughToken based properties or using it in your own custom syntax, remember that the actual CSS value is whatever you pass through. So, if you’re using a PassThroughToken for a background image, for example, you must use the url() syntax just as you would in a CSS declaration. PassThroughTokens also allow you to write spaces in your utility strings by placing an underscore (_) in place of the space, much like the operator flag (@) does

Numeric Tokens

• For numeric values.
• Build-time validation ensures that the value is a valid number.
• Primarily used for CSS rules that require numeric values.

Example:

//Elevate's declaration map, responsible for matching modifiers to CSS declarations for a given property.
// =============================
 // Z-Index
 // =============================
 z: { "z-index": "NumericToken" }

<div class="z:20"></div>