@patreon/studio/css-config/postcss/token-functions.js

Patreon Studio Design System

const tokenReferences = require('../lib/tokens-reference.json');
const tokenAliases = require('../lib/tokens-aliases.json');
const typographyTokenReferences = require('../lib/tokens-typography-reference.json');

function getTokenKey(path) {
  return path.replace(/"/g, '');
}

/**
 * Gets the css variable for the token at the given path. If the path provided
 * does not contain a valid variable, an error will be thrown.
 *
 * @param {string} path – dot-separated path to the token in the `tokens` object.
 * @returns {string} The variable name for the token at the given path.
 *
 * Example output: "var(--primary-action-default)"
 */
function getTokenVariable(keyPath) {
  // parse the path to remove any quotes
  const referenceKey = getTokenKey(keyPath);

  // get the token value object for the given path
  const tokenValue = tokenReferences[referenceKey] ?? tokenAliases[referenceKey];

  // if the token value is a valid variable, return it
  if (tokenValue) {
    return tokenValue;
  }

  // otherwise we should throw an error
  throw new Error(`No variable found for token at path: ${keyPath}`);
}

/**
 * Gets the css variable for the typography token at the given path. If the path
 * provided does not contain a valid variable, an error will be thrown.
 *
 * @param {string} path – dot-separated path to the token in the `tokens` object.
 * @returns {string} The variable name for the token at the given path.
 *
 * Example output: "var(--type-body-fontSize-sm)"
 */
function getTypographyTokenValue(keyPath) {
  // parse the path to remove any quotes
  const key = getTokenKey(keyPath);

  // get the token value object for the given path
  const tokenValue = typographyTokenReferences[key];

  // if the token value is a valid variable, return it
  if (tokenValue) {
    return tokenValue;
  }

  // otherwise we should throw an error
  throw new Error(`No variable found for token at path: ${keyPath}`);
}

module.exports = {
  getTokenVariable,
  getTypographyTokenValue,
};