@chakra-v2/styled-system/dist/cjs/create-theme-vars/to-css-var.cjs

Style function for css-in-js building component libraries

'use strict';

var utils = require('@chakra-v2/utils');
var createThemeVars = require('./create-theme-vars.cjs');
var themeTokens = require('./theme-tokens.cjs');

function toCSSVar(rawTheme) {
  const theme = themeTokens.omitVars(rawTheme);
  const {
    /**
     * This is more like a dictionary of tokens users will type `green.500`,
     * and their equivalent css variable.
     */
    cssMap,
    /**
     * The extracted css variables will be stored here, and used in
     * the emotion's <Global/> component to attach variables to `:root`
     */
    cssVars
  } = createThemeVars.createThemeVars(theme);
  const cssVarPrefix = rawTheme.config.cssVarPrefix;
  const defaultCssVars = {
    [`--${cssVarPrefix}-ring-inset`]: `var(--${cssVarPrefix}-empty,/*!*/ /*!*/)`,
    [`--${cssVarPrefix}-ring-offset-width`]: "0px",
    [`--${cssVarPrefix}-ring-offset-color`]: "#fff",
    [`--${cssVarPrefix}-ring-color`]: "rgba(66, 153, 225, 0.6)",
    [`--${cssVarPrefix}-ring-offset-shadow`]: "0 0 #0000",
    [`--${cssVarPrefix}-ring-shadow`]: "0 0 #0000",
    [`--${cssVarPrefix}-space-x-reverse`]: "0",
    [`--${cssVarPrefix}-space-y-reverse`]: "0"
  };
  Object.assign(theme, {
    __cssVars: { ...defaultCssVars, ...cssVars },
    __cssMap: cssMap,
    __breakpoints: utils.analyzeBreakpoints(theme.breakpoints)
  });
  return theme;
}

exports.toCSSVar = toCSSVar;