@r3l/app/lib/styles/custom-properties.js

Relevant App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createColorStyles = exports.objectToVars = exports.toCustomProperties = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _css = require("@theme-ui/css");

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var toVarName = function toVarName(key) {
  return "--theme-ui-".concat(key);
};

var toVarValue = function toVarValue(key, value) {
  return "var(".concat(toVarName(key), ", ").concat(value, ")");
};

var join = function join() {
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
    args[_key] = arguments[_key];
  }

  return args.filter(Boolean).join('-');
};

var numberScales = {
  fontWeights: true,
  lineHeights: true
};
var reservedKeys = {
  useCustomProperties: true,
  initialColorModeName: true,
  initialColorMode: true,
  useLocalStorage: true
};

var toPixel = function toPixel(key, value) {
  if (typeof value !== 'number') return value;
  if (numberScales[key]) return value;
  return value + 'px';
}; // convert theme values to custom properties


var toCustomProperties = function toCustomProperties(obj, parent, themeKey) {
  var next = Array.isArray(obj) ? [] : {};

  for (var key in obj) {
    var value = obj[key];
    var name = join(parent, key);

    if (value && (0, _typeof2.default)(value) === 'object') {
      next[key] = toCustomProperties(value, name, key);
      continue;
    }

    if (reservedKeys[key]) {
      next[key] = value;
      continue;
    }

    var val = toPixel(themeKey || key, value);
    next[key] = toVarValue(name, val);
  }

  return next;
};

exports.toCustomProperties = toCustomProperties;

var objectToVars = function objectToVars(parent, obj) {
  var vars = {};

  for (var key in obj) {
    if (key === 'modes') continue;
    var name = join(parent, key);
    var value = obj[key];

    if (value && (0, _typeof2.default)(value) === 'object') {
      vars = _objectSpread(_objectSpread({}, vars), objectToVars(name, value));
    } else {
      vars[toVarName(name)] = value;
    }
  }

  return vars;
}; // create body styles for color modes


exports.objectToVars = objectToVars;

var createColorStyles = function createColorStyles() {
  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  if (!theme.colors || theme.useBodyStyles === false) return {};

  if (theme.useCustomProperties === false || !theme.colors.modes) {
    return (0, _css.css)({
      body: {// color: 'text',
        // bg: 'background',
      }
    })(theme);
  }

  var colors = theme.colors;
  var modes = colors.modes || {};
  var styles = objectToVars('colors', colors);
  Object.keys(modes).forEach(function (mode) {
    var key = "&.theme-ui-".concat(mode);
    styles[key] = objectToVars('colors', modes[mode]);
  });
  return (0, _css.css)({
    body: _objectSpread({}, styles)
  })(theme);
};

exports.createColorStyles = createColorStyles;
//# sourceMappingURL=custom-properties.js.map