theme-custom-properties/dist/theme-custom-properties.cjs.development.js

 [](https://www.npmjs.com/package/theme-custom-properties) [![](https://img.shields.io/github/lic

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

// Create CSS custom properties based on theme
var generateCustomProperties = function generateCustomProperties(theme, prefix) {
  var customProperties = {};
  var transformedTheme = {};

  for (var _i = 0, _Object$entries = Object.entries(theme); _i < _Object$entries.length; _i++) {
    var _Object$entries$_i = _Object$entries[_i],
        name = _Object$entries$_i[0],
        value = _Object$entries$_i[1];

    if (typeof value === "object") {
      var _generateCustomProper = generateCustomProperties(value, "" + (prefix != null ? prefix + "-" + name : name)),
          nestedProperties = _generateCustomProper.customProperties,
          nestedTheme = _generateCustomProper.transformedTheme;

      transformedTheme[name] = nestedTheme;
      customProperties = _extends({}, customProperties, nestedProperties);
    } else if (typeof value === "string") {
      var varName = "--" + (prefix != null ? prefix + "-" : "") + name;
      transformedTheme[name] = "var(" + varName + ")";
      customProperties[varName] = value;
    }
  }

  return {
    customProperties: customProperties,
    transformedTheme: transformedTheme
  };
};

var generateCustomPropertyCSS = function generateCustomPropertyCSS(mode, attribute, theme) {
  var variables = Object.entries(theme.customProperties).map(function (_ref) {
    var varName = _ref[0],
        value = _ref[1];
    return varName + ": " + value + ";";
  }).join("\n");
  var attributeName = mode == null ? ":root" : attribute === "class" ? "." + mode : "[" + attribute + "=\"" + mode + "\"]";
  return attributeName + " {\n" + variables + "\n}";
};
/**
 * Transforms object of themes to custom properties (CSS variables) and returns
 * CSS string to add to page
 * @param themes object of color mode -> theme that will be transformed to custom properties
 * @param defaultColorTheme default color theme. These custom properties are added to the :root scope
 */


var transformThemeToCustomProperties = function transformThemeToCustomProperties(themes, options) {
  var _options$defaultTheme, _options$attribute;

  var defaultColorTheme = (_options$defaultTheme = options == null ? void 0 : options.defaultTheme) != null ? _options$defaultTheme : "light";
  var attribute = (_options$attribute = options == null ? void 0 : options.attribute) != null ? _options$attribute : "data-theme";

  if (!(attribute === "class" || attribute.startsWith("data-"))) {
    throw new Error("options.attribute must be either 'class' or 'data-*'");
  }

  var themesWithProperties = Object.entries(themes).reduce(function (acc, _ref2) {
    var _extends2;

    var colorMode = _ref2[0],
        theme = _ref2[1];
    return _extends({}, acc, (_extends2 = {}, _extends2[colorMode] = generateCustomProperties(theme), _extends2));
  }, {});
  var bodyCSS = [// default theme properties should get added to body
  generateCustomPropertyCSS(null, attribute, themesWithProperties[defaultColorTheme])].concat(Object.entries(themesWithProperties).map(function (_ref3) {
    var mode = _ref3[0],
        theme = _ref3[1];
    return generateCustomPropertyCSS(mode, attribute, theme);
  })).join("\n\n");
  var transformedThemes = Object.entries(themesWithProperties).reduce(function (acc, _ref4) {
    var _extends3;

    var colorMode = _ref4[0],
        themeWithProperties = _ref4[1];
    return _extends({}, acc, (_extends3 = {}, _extends3[colorMode] = themeWithProperties.transformedTheme, _extends3));
  }, {});
  return {
    transformedThemes: transformedThemes,
    bodyCSS: bodyCSS
  };
};

exports.generateCustomProperties = generateCustomProperties;
exports.transformThemeToCustomProperties = transformThemeToCustomProperties;
//# sourceMappingURL=theme-custom-properties.cjs.development.js.map