Token Generation

The tokens described in the previous sections are enormously powerful, but their creation and management presents a significant problem.

As the number of options grows, the combinatorial complexity explodes. It is easy to exceed one thousand variable mode values in colours alone. It is not tenable to manage this information through drop-downs alone.

However this complexity can work to our advantage. It is complexity derived from simple rules that can be captured in code.

From a starting point of a hand-crafted but well-structured semantics token set, consider for example the sentiment tokens, expressed here in DTCG format:

{
  "$type": "color",
  "semantics": {
    "sentiments": {
      "positive": {
        "background": {
          "default": {
            "$value": "{primitives.green.300}"
          },
          "hover": {
            "$value": "{primitives.green.400}"
          },
          "active": {
            "$value": "{primitives.green.500}"
          }
        }
      }
    }
  }
}

Generating behavioural tokens can roughly be done as follows:

/**
 * Check if the given object has default/hover/active keys
 */
function isBehavioural(obj) {
  return ["default", "hover", "active"].every(
    (k) => k in obj && "$value" in obj[k],
  );
}

/**
 * Recursively search for behavioural tokens
 */
function* findBehavioural(obj, path) {
  if (isBehavioural(obj)) {
    yield [path, obj];
  } else {
    for (const [k, v] of Object.entries(obj)) {
      yield* findBehavioural(v, [...path, k]);
    }
  }
}

/**
 * Iterate through all behavioural tokens, upserting them as required
 */
for (const [path, value] of findBehavioural(semantics, [])) {
  upsertBehaviouralToken(path.join("/"), value);
}