Type Scale Token Naming Export

Export caller actual named type scale as bounded validated CSS custom properties; strict unique identifiers prevent syntax injection, no invented design-token nomenclature or fixed scale.

Description

Named type-scale tokens export measured design choices as CSS custom properties.

Named type-scale tokens export measured design choices as CSS custom properties. Naming policy should be explicit and stable.1

Enter newline-separated unique ASCII identifier names, aligned positive rem sizes and one valid identifier prefix. Names are ≤64 characters, starting letter/underscore with letters/digits/_/- thereafter. Render numbers to 12 significant digits and preserve order.

When to use Type Scale Token Naming Export

Use Type Scale Token Naming Export when you need to evaluate the supplied records under the calculation and evidence rules below. The prefix is validated through trimmed lines but emitted as supplied; use one unpadded literal identifier. No scale or naming convention is invented.

Prepare measured font or typeset-layout values and the explicit design policy requested. For text or font bytes, use the supported syntax explained below.

How to use Type Scale Token Naming Export and understand its results

  1. Prepare measured font or typeset-layout values and the explicit design policy requested. For text or font bytes, use the supported syntax explained below.
  2. Enter tokenNames, tokenSizesRem, cssVariablePrefix using the field table and calculation rules, then run the tool.
  3. Read cssCustomProperties. The explanation below defines the units, signs, ordering and any flags or placeholder values.
  4. If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.
Input fieldMeaningValue type; see rules belowRequirement
tokenNamesToken namesstringRequired
tokenSizesRemToken sizes remlist of numberRequired
cssVariablePrefixCss variable prefixstringRequired

Enter newline-separated unique ASCII identifier names, aligned positive rem sizes and one valid identifier prefix. Names are ≤64 characters, starting letter/underscore with letters/digits/_/- thereafter. Render numbers to 12 significant digits and preserve order.

property=--prefix-name: sizeRem rem

Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.

Output fieldMeaningValue type
cssCustomPropertiesCss custom propertiesstring
json
{
  "input": {
    "tokenNames": "body\nheading",
    "tokenSizesRem": [
      1,
      1.5
    ],
    "cssVariablePrefix": "type"
  },
  "output": {
    "cssCustomProperties": "--type-body: 1rem;\n--type-heading: 1.5rem;"
  }
}

Limitations and assumptions

The prefix is validated through trimmed lines but emitted as supplied; use one unpadded literal identifier. No scale or naming convention is invented.

Numeric inputs, where present, must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Numeric lists are limited to 10,000 entries; string lists to 128 strings of at most 128 characters each. The rules above may impose smaller limits. Extremely large text inputs are rejected. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.

Alternative or Complementary methods

Use CSS clamp() Min/Preferred/Max Builder: Fluid font sizing interpolates between chosen viewport endpoints and clamps at font-size endpoints. rem representation depends on the supplied root size. For a complementary task, use Heading Step Consistency Checker: Adjacent heading-size ratios describe a measured hierarchy. Consistency with a target scale differs from generating an ideal hierarchy.

References

  1. Type Scale Token Naming Export — tool.io

Similar or alternative tools

  • CSS clamp() Min/Preferred/Max Builder

    Fluid font sizing interpolates between chosen viewport endpoints and clamps at font-size endpoints. rem representation depends on the supplied root size.

  • Heading Step Consistency Checker

    Adjacent heading-size ratios describe a measured hierarchy. Consistency with a target scale differs from generating an ideal hierarchy.

Don't forget to set a bookmark for tool.io!
Privacy | Imprint | Cookies