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.
• Primarily used for CSS rules that require special syntax (e.g., URLs or complex values).
• Not recommended for general styling.

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. Noting, however, that you should omit the quatation marks.

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>