@quarkly/atomize/build/esm/utils/theme.js

Library for creating atomic react components

import _memoize from "lodash/fp/memoize";
import _isUndefined from "lodash/fp/isUndefined";
import _get from "lodash/fp/get";
import themeDefault from '../constants/themeDefault';
export var getFromTheme = function getFromTheme(props, key) {
  return _get(key, props.theme) || _get(key, themeDefault);
};
export var variantGet = function variantGet(props, key, name) {
  var variants = getFromTheme(props, key);
  if (_isUndefined(variants)) return name;

  var value = _get(name, variants);

  return _isUndefined(value) ? name : value;
};
export var themeGet = function themeGet(props, key, def) {
  var value = getFromTheme(props, key);
  return _isUndefined(value) ? def : value;
};
export var createBreakpointRule = function createBreakpointRule(point) {
  return point.map(function (_ref) {
    var type = _ref.type,
        value = _ref.value;
    return value === true ? "(" + type + ")" : "(" + type + ": " + value + "px)";
  }).join(' and ');
};
export var getBreakpoints = _memoize(function (props) {
  var breakpoints = getFromTheme(props, 'breakpoints');
  return Object.entries(breakpoints).reduce(function (acc, _ref2) {
    var key = _ref2[0],
        point = _ref2[1];
    acc[key] = "@media " + createBreakpointRule(point);
    return acc;
  }, {});
});
export default themeDefault;