@chakra-v2/styled-system/dist/esm/create-theme-vars/flatten-tokens.mjs

Style function for css-in-js building component libraries

import { walkObject } from '@chakra-v2/utils';
import { pseudoPropNames } from '../pseudos.mjs';
import { extractTokens, extractSemanticTokens } from './theme-tokens.mjs';

function flattenTokens(theme) {
  const tokens = extractTokens(theme);
  const semanticTokens = extractSemanticTokens(theme);
  const isSemanticCondition = (key) => (
    // @ts-ignore
    pseudoPropNames.includes(key) || "default" === key
  );
  const result = {};
  walkObject(tokens, (value, path) => {
    if (value == null)
      return;
    result[path.join(".")] = { isSemantic: false, value };
  });
  walkObject(
    semanticTokens,
    (value, path) => {
      if (value == null)
        return;
      result[path.join(".")] = { isSemantic: true, value };
    },
    {
      stop: (value) => Object.keys(value).every(isSemanticCondition)
    }
  );
  return result;
}

export { flattenTokens };