fannypack-v5/es/utils/theme.js

An accessible, composable, and friendly React UI Kit

import 'classnames';
import 'emotion';
import { css } from '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import { _ as _objectSpread2, a as _taggedTemplateLiteralLoose } from '../chunk-0c448560.js';
import tinycolor from 'tinycolor2';
import { isFunction } from './isFunction.js';
import { get } from './get.js';

function _templateObject4() {
  var data = _taggedTemplateLiteralLoose(["\n      @media screen and (", ": ", "px) {\n        ", ";\n      }\n      @media screen and (", ": ", "px) {\n        ", ";\n      }\n    "]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteralLoose(["\n        @media screen and (min-width: ", "px) and (max-width: ", "px) {\n          ", ";\n        }\n\n        @media screen and (max-width: ", "px) {\n          ", ";\n        }\n        @media screen and (min-width: ", "px) {\n          ", ";\n        }\n      "]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n          @media screen and (max-width: ", "px) {\n            ", ";\n          }\n          @media screen and (min-width: ", "px) {\n            ", ";\n          }\n\n          @media screen and (min-width: ", "px) and (max-width: ", "px) {\n            ", ";\n          }\n        "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n        ", ";\n      "]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
function theme(themeKey, path, defaultValue) {
  return function (props) {
    var colorMode = props.colorMode,
        variant = props.variant;
    var selector = "" + themeKey + (path ? "." + path : '');
    var variantSelector = themeKey + ".variants." + variant + "." + path;
    var colorModeSelector = themeKey + ".modes." + colorMode + "." + path;
    var defaultTheme = get(props, "overrides." + selector) || get(props, "theme." + selector) || defaultValue;
    var variantTheme = get(props, "overrides." + variantSelector) || get(props, "theme." + variantSelector);
    var colorModeTheme = get(props, "overrides." + colorModeSelector) || get(props, "theme." + colorModeSelector);

    if (path && path.includes('css')) {
      var defaultThemeValue = isFunction(defaultTheme) ? defaultTheme(props) : defaultTheme;
      var variantThemeValue = isFunction(variantTheme) ? variantTheme(props) : variantTheme;
      var colorModeThemeValue = isFunction(colorModeTheme) ? colorModeTheme(props) : colorModeTheme;
      return _objectSpread2(_objectSpread2(_objectSpread2({}, defaultThemeValue), variantThemeValue), colorModeThemeValue);
    }

    var theme = colorModeTheme || variantTheme || defaultTheme;
    return isFunction(theme) ? theme(props) : theme;
  };
}
function altitude(selector, defaultValue) {
  return function (props) {
    var altitude = theme('altitudes', selector || props.altitude, defaultValue)(props);
    return altitude;
  };
}
function border(selector, defaultValue) {
  return function (props) {
    var border = theme('borders', selector || props.border, defaultValue)(props);
    return border;
  };
}
function borderRadius(selector, defaultValue) {
  return function (props) {
    var borderRadius = theme('borderRadii', selector || props.borderRadius, defaultValue)(props);
    return borderRadius;
  };
}
function font(selector, defaultValue) {
  return function (props) {
    var color = theme('fonts', selector || props.font, defaultValue)(props);
    return color;
  };
}
function fontSize(selector, defaultValue) {
  return function (props) {
    var color = theme('fontSizes', selector || props.fontSize, defaultValue)(props);
    return color;
  };
}
function fontWeight(selector, defaultValue) {
  return function (props) {
    var color = theme('fontWeights', selector || props.fontWeight, defaultValue)(props);
    return color;
  };
}
function palette(selector, defaultValue) {
  return function (props) {
    var color = theme('palette', selector || props.palette, defaultValue)(props);
    if (!color) return tinycolor(selector).toHexString();
    return color;
  };
}
function space(_scalar, _scaleType) {
  if (_scaleType === void 0) {
    _scaleType = 'minor';
  }

  return function (props) {
    var scalar = _scalar;
    var scaleType = _scaleType;
    if (!scalar) return 0;

    if (typeof scalar === 'string') {
      if (scalar.includes('minor') || scalar.includes('major')) {
        // @ts-ignore
        var _scalar$split = scalar.split('-');

        scaleType = _scalar$split[0];
        scalar = _scalar$split[1];
        scalar = parseFloat(scalar);
        if (isNaN(scalar)) return 0;
      } else {
        var value = theme('spacing', scalar)(props);
        return value;
      }
    }

    if (typeof scalar === 'number') {
      var _props$theme, _props$theme$spacing, _props$theme2, _props$theme2$global;

      var unitSize = props === null || props === void 0 ? void 0 : (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : (_props$theme$spacing = _props$theme.spacing) === null || _props$theme$spacing === void 0 ? void 0 : _props$theme$spacing[scaleType + "Unit"];

      var _fontSize = props === null || props === void 0 ? void 0 : (_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : (_props$theme2$global = _props$theme2.global) === null || _props$theme2$global === void 0 ? void 0 : _props$theme2$global.fontSize;

      var _value = scalar * (unitSize / _fontSize);

      return _value;
    }
  };
}
function breakpoint(breakpoint, cssStyle, config) {
  var _ref = config || {},
      _ref$else = _ref.else,
      elseStyle = _ref$else === void 0 ? '' : _ref$else,
      _ref$show = _ref.show,
      show = _ref$show === void 0 ? false : _ref$show;

  return function (props) {
    var _props$theme3, _props$theme3$breakpo, _props$theme4, _props$theme4$breakpo, _props$theme5, _props$theme5$breakpo, _props$theme6, _props$theme6$breakpo, _props$theme7, _props$theme7$breakpo;

    if (!breakpoint) return css(_templateObject(), elseStyle);
    var key;
    var elseKey;

    if (!show && breakpoint.includes('max')) {
      key = 'max-width';
      elseKey = 'min-width';
    } else if (!show && breakpoint.includes('min')) {
      key = 'min-width';
      elseKey = 'max-width';
    } else if (show && breakpoint.includes('max')) {
      key = 'min-width';
      elseKey = 'max-width';
    } else if (show && breakpoint.includes('min')) {
      key = 'max-width';
      elseKey = 'min-width';
    }

    var strippedBreakpoint = breakpoint;
    strippedBreakpoint = strippedBreakpoint.replace('max-', '');
    strippedBreakpoint = strippedBreakpoint.replace('min-', '');
    var minBreakpointValues = {
      mobile: 0,
      tablet: props === null || props === void 0 ? void 0 : (_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : (_props$theme3$breakpo = _props$theme3.breakpoints) === null || _props$theme3$breakpo === void 0 ? void 0 : _props$theme3$breakpo.mobile,
      desktop: props === null || props === void 0 ? void 0 : (_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : (_props$theme4$breakpo = _props$theme4.breakpoints) === null || _props$theme4$breakpo === void 0 ? void 0 : _props$theme4$breakpo.tablet,
      widescreen: props === null || props === void 0 ? void 0 : (_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : (_props$theme5$breakpo = _props$theme5.breakpoints) === null || _props$theme5$breakpo === void 0 ? void 0 : _props$theme5$breakpo.desktop,
      fullHD: props === null || props === void 0 ? void 0 : (_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : (_props$theme6$breakpo = _props$theme6.breakpoints) === null || _props$theme6$breakpo === void 0 ? void 0 : _props$theme6$breakpo.widescreen
    };
    var breakpointValue = props === null || props === void 0 ? void 0 : (_props$theme7 = props.theme) === null || _props$theme7 === void 0 ? void 0 : (_props$theme7$breakpo = _props$theme7.breakpoints) === null || _props$theme7$breakpo === void 0 ? void 0 : _props$theme7$breakpo[strippedBreakpoint];

    if (!show && breakpoint.includes('max')) {
      breakpointValue = breakpointValue - 1;
    }

    if (!show && breakpoint.includes('min')) {
      breakpointValue = minBreakpointValues[strippedBreakpoint];
    }

    if (show && breakpoint.includes('min')) {
      breakpointValue = minBreakpointValues[strippedBreakpoint] - 1;
    }

    if (!breakpoint.includes('min-') && !breakpoint.includes('max-')) {
      if (show) {
        return css(_templateObject2(), minBreakpointValues[breakpoint], cssStyle, breakpointValue + 1, cssStyle, minBreakpointValues[breakpoint] + 1, breakpointValue, elseStyle);
      }

      return css(_templateObject3(), minBreakpointValues[breakpoint], breakpointValue - 1, cssStyle, minBreakpointValues[breakpoint] - 1, elseStyle, breakpointValue, elseStyle);
    }

    return css(_templateObject4(), key, breakpointValue, cssStyle, elseKey, breakpointValue, elseStyle);
  };
}

export { altitude, border, borderRadius, breakpoint, font, fontSize, fontWeight, palette, space, theme };