@braineet/ui/dist/cjs/components/theme/getFills.js

Braineet design system

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _get = _interopRequireDefault(require("lodash/get"));
var _isObject = _interopRequireDefault(require("lodash/isObject"));
var _utils = require("../../utils");
var _utils2 = require("./utils");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var getKeyByValue = function getKeyByValue(object, value) {
  return Object.keys(object).find(function (key) {
    return !(0, _isObject.default)(object[key]) && object[key].toLowerCase() === value.toLowerCase();
  });
};
var getSolidAttributes = function getSolidAttributes(mainColor, secondaryColor, themeColors, reverse) {
  var palette = (0, _utils2.getPalette)(themeColors, mainColor, null);

  // default
  var defaultBg = reverse ? secondaryColor : palette[50];
  var defaultColor = reverse ? palette[90] : secondaryColor;
  var defaultContrast = (0, _utils2.getContrast)(defaultBg, defaultColor);

  // hover
  var hoverBg = reverse ? themeColors.gray : palette[90];
  var hoverContrast = (0, _utils2.getContrast)(hoverBg, defaultColor);

  // active
  var activeBg = reverse ? themeColors.gray : palette[100];
  var activeContrast = (0, _utils2.getContrast)(activeBg, defaultColor);
  return {
    color: defaultContrast > 3 ? defaultColor : palette[100],
    backgroundColor: defaultBg,
    hover: {
      color: hoverContrast > 3 ? defaultColor : palette[100],
      backgroundColor: hoverBg
    },
    active: {
      color: activeContrast > 3 ? defaultColor : palette[100],
      backgroundColor: activeBg
    },
    focus: {
      color: hoverContrast > 3 ? defaultColor : palette[100],
      backgroundColor: hoverBg
    }
  };
};
var getSubtleAttributes = function getSubtleAttributes(mainColor, secondaryColor, themeColors) {
  var palette = (0, _utils2.getPalette)(themeColors, mainColor);

  // default
  var defaultBg = palette[10];
  var defaultColor = palette[90];
  var defaultContrast = (0, _utils2.getContrast)(defaultBg, defaultColor);

  // hover
  var hoverBg = palette[20];
  var hoverContrast = (0, _utils2.getContrast)(hoverBg, defaultColor);

  // active
  var activeBg = palette[90];
  var activeColor = palette[10];
  var activeContrast = (0, _utils2.getContrast)(activeBg, activeColor);
  return {
    color: defaultContrast > 3 ? defaultColor : palette[100],
    backgroundColor: defaultBg,
    hover: {
      color: hoverContrast > 3 ? defaultColor : palette[100],
      backgroundColor: hoverBg
    },
    active: {
      color: activeContrast > 3 ? activeColor : palette[100],
      backgroundColor: activeBg
    },
    focus: {
      color: hoverContrast > 3 ? defaultColor : palette[100],
      backgroundColor: hoverBg
    }
  };
};
var getWiredAttributes = function getWiredAttributes(mainColor, themeColors) {
  var palette = (0, _utils2.getPalette)(themeColors, mainColor);

  // default
  var defaultBg = themeColors.background.white;
  var defaultColor = palette[50];
  var defaultContrast = (0, _utils2.getContrast)(defaultBg, defaultColor);

  // hover
  var hoverBg = palette[10];
  var hoverContrast = (0, _utils2.getContrast)(hoverBg, defaultColor);

  // active
  var activeBg = palette[20];
  var activeColor = palette[100];
  return {
    color: defaultColor,
    backgroundColor: 'transparent',
    boxShadow: "0px 0px 0px 2px " + (defaultContrast > 3 ? palette[50] : palette[90]) + " inset",
    hover: {
      color: hoverContrast > 3 ? defaultColor : palette[100],
      boxShadow: "0px 0px 0px 2px " + (hoverContrast > 3 ? palette[50] : palette[90]) + " inset",
      backgroundColor: hoverBg
    },
    active: {
      color: activeColor,
      boxShadow: "0px 0px 0px 2px " + palette[100] + " inset",
      backgroundColor: activeBg
    },
    focus: {
      color: hoverContrast > 3 ? defaultColor : palette[100],
      boxShadow: "0px 0px 0px 2px " + (hoverContrast > 3 ? palette[90] : palette[100]) + " inset",
      backgroundColor: hoverBg
    }
  };
};
var getGhostAttributes = function getGhostAttributes(mainColor, themeColors) {
  var palette = (0, _utils2.getPalette)(themeColors, mainColor);

  // default
  var defaultBg = themeColors.background.gray;
  var defaultColor = palette[50];
  var defaultContrast = (0, _utils2.getContrast)(defaultBg, defaultColor);

  // hover
  var hoverBg = palette[10];
  var hoverContrast = (0, _utils2.getContrast)(hoverBg, defaultColor);

  // active
  var activeBg = palette[20];
  var activeColor = palette[100];
  return {
    color: defaultContrast > 4.5 ? defaultColor : palette[90],
    backgroundColor: 'transparent',
    active: {
      color: activeColor,
      backgroundColor: activeBg
    },
    hover: {
      color: hoverContrast > 4.5 ? defaultColor : palette[100],
      backgroundColor: hoverBg
    },
    focus: {
      color: hoverContrast > 4.5 ? defaultColor : palette[100],
      backgroundColor: hoverBg
    }
  };
};
var themedProperty = function themedProperty(object, keyOrValue) {
  if (object && (0, _isObject.default)(object)) {
    if (keyOrValue.includes('#')) {
      var keyColor = getKeyByValue(object, keyOrValue);
      if (keyColor) {
        return (0, _get.default)(object, keyColor, keyColor);
      }
    }
    return (0, _get.default)(object, keyOrValue, keyOrValue);
  }
  return keyOrValue;
};
var getFillWithTextColorSolid = function getFillWithTextColorSolid(color, bckgColor, bckgColorActive) {
  return {
    color: color,
    backgroundColor: bckgColor,
    boxShadow: "0 8px 16px -8px " + (0, _utils.lighten)(color, 0.5),
    active: {
      backgroundColor: bckgColorActive,
      boxShadow: "0 4px 8px -4px " + (0, _utils.lighten)(color, 0.5)
    },
    hover: {
      boxShadow: "0 4px 8px -4px " + (0, _utils.lighten)(color, 0.5)
    },
    focus: {
      backgroundColor: bckgColor
    }
  };
};
var getFillWithBckgColorSolid = function getFillWithBckgColorSolid(color, bckgColor, bckgColorHover) {
  return {
    color: color,
    backgroundColor: bckgColor,
    boxShadow: "0 8px 16px -8px " + bckgColor,
    active: {
      backgroundColor: (0, _utils.darken)(bckgColor, 5),
      boxShadow: "0 4px 8px -4px " + bckgColor
    },
    hover: {
      backgroundColor: bckgColorHover
    },
    focus: {
      backgroundColor: bckgColorHover
    }
  };
};
var getFillWithTextColorSubtle = function getFillWithTextColorSubtle(color, bckgColor, bckgColorActive) {
  return {
    color: color,
    backgroundColor: bckgColor,
    boxShadow: '',
    active: {
      backgroundColor: bckgColorActive,
      boxShadow: ''
    },
    hover: {
      backgroundColor: bckgColorActive
    },
    focus: {
      boxShadow: "0px 0px 0px 1px " + color + " inset",
      backgroundColor: bckgColorActive
    }
  };
};
var getFillWithTextColorWired = function getFillWithTextColorWired(color) {
  return {
    color: color,
    backgroundColor: 'transparent',
    boxShadow: "0px 0px 0px 1px " + color + " inset",
    active: {
      boxShadow: "0px 0px 0px 2px " + color + " inset",
      backgroundColor: (0, _utils.lighten)(color, 0.1)
    },
    hover: {
      backgroundColor: (0, _utils.lighten)(color, 0.1)
    },
    focus: {
      boxShadow: "0px 0px 0px 1px " + color + " inset",
      backgroundColor: (0, _utils.lighten)(color, 0.1)
    }
  };
};
var getFillWithTextColorClear = function getFillWithTextColorClear(color) {
  return {
    color: color,
    backgroundColor: 'transparent',
    active: {
      backgroundColor: (0, _utils.lighten)(color, 0.2)
    },
    hover: {
      backgroundColor: (0, _utils.lighten)(color, 0.1)
    },
    focus: {
      backgroundColor: (0, _utils.lighten)(color, 0.1)
    }
  };
};
var solid = function solid(colors, reverse) {
  return {
    black: getSolidAttributes(colors.black, colors.white, colors, reverse),
    brand: getSolidAttributes(colors.brand, colors.white, colors, reverse),
    brandSecondary: getSolidAttributes(colors.brandSecondary, colors.white, colors, reverse),
    action: getSolidAttributes(colors.action, colors.white, colors, reverse),
    pending: getSolidAttributes(colors.pending, colors.white, colors, reverse),
    warning: getSolidAttributes(colors.warning, colors.white, colors, reverse),
    success: getSolidAttributes(colors.success, colors.white, colors, reverse),
    error: getSolidAttributes(colors.error, colors.white, colors, reverse),
    yellow: getSolidAttributes(colors.yellow, colors.white, colors, reverse),
    orange: getSolidAttributes(colors.orange, colors.white, colors, reverse),
    red: getSolidAttributes(colors.red, colors.white, colors, reverse),
    pink: getSolidAttributes(colors.pink, colors.white, colors, reverse),
    grape: getSolidAttributes(colors.grape, colors.white, colors, reverse),
    violet: getSolidAttributes(colors.violet, colors.white, colors, reverse),
    indigo: getSolidAttributes(colors.indigo, colors.white, colors, reverse),
    blue: getSolidAttributes(colors.blue, colors.white, colors, reverse),
    cyan: getSolidAttributes(colors.cyan, colors.white, colors, reverse),
    teal: getSolidAttributes(colors.teal, colors.white, colors, reverse),
    green: getSolidAttributes(colors.green, colors.white, colors, reverse),
    lime: getSolidAttributes(colors.lime, colors.white, colors, reverse),
    dark: getFillWithBckgColorSolid(colors.white, colors.dark.default, (0, _utils.lighten)(colors.dark.default, 0.8)),
    darkLight: getFillWithBckgColorSolid(colors.white, colors.dark.light, (0, _utils.lighten)(colors.dark.light, 0.8)),
    gray: getFillWithBckgColorSolid(colors.dark.default, colors.gray, (0, _utils.lighten)(colors.gray, 0.8)),
    disabled: {
      color: colors.dark.lighten(0.25),
      backgroundColor: colors.dark.lighten(0.2)
    },
    white: getFillWithTextColorSolid(colors.dark.default, colors.white, colors.gray),
    whitePrimary: getFillWithTextColorSolid(colors.primary.default, colors.white, colors.gray),
    whitePrimaryLight: getFillWithTextColorSolid(colors.primary.light, colors.white, colors.gray),
    whiteSecondary: getFillWithTextColorSolid(colors.secondary.default, colors.white, colors.gray),
    whiteSecondaryLight: getFillWithTextColorSolid(colors.secondary.light, colors.white, colors.gray),
    whiteAction: getFillWithTextColorSolid(colors.intent.action, colors.white, colors.gray),
    whiteSuccess: getFillWithTextColorSolid(colors.intent.success, colors.white, colors.gray),
    whiteWarning: getFillWithTextColorSolid(colors.intent.warning, colors.white, colors.gray),
    whiteError: getFillWithTextColorSolid(colors.intent.error, colors.white, colors.gray),
    whiteNotif: getFillWithTextColorSolid(colors.intent.notif, colors.white, colors.gray),
    whitePending: getFillWithTextColorSolid(colors.intent.pending, colors.white, colors.gray),
    primary: getFillWithBckgColorSolid(colors.white, colors.primary.default, colors.primary.light),
    primaryLight: getFillWithBckgColorSolid(colors.white, colors.primary.light, (0, _utils.lighten)(colors.primary.light, 0.5)),
    secondary: getFillWithBckgColorSolid(colors.white, colors.secondary.default, colors.secondary.light),
    secondaryLight: getFillWithBckgColorSolid(colors.white, colors.secondary.light, (0, _utils.lighten)(colors.secondary.light, 0.5)),
    other1: getFillWithBckgColorSolid(colors.white, colors.other.other1.default, (0, _utils.lighten)(colors.other.other1.default, 0.5)),
    getValue: function getValue(color) {
      return getSolidAttributes(color, colors.white, colors, reverse);
    }
  };
};
var subtle = function subtle(colors) {
  return {
    black: getSubtleAttributes(colors.black, colors.white, colors),
    brand: getSubtleAttributes(colors.brand, colors.white, colors),
    brandSecondary: getSubtleAttributes(colors.brandSecondary, colors.white, colors),
    action: getSubtleAttributes(colors.action, colors.white, colors),
    pending: getSubtleAttributes(colors.pending, colors.white, colors),
    warning: getSubtleAttributes(colors.warning, colors.white, colors),
    success: getSubtleAttributes(colors.success, colors.white, colors),
    error: getSubtleAttributes(colors.error, colors.white, colors),
    yellow: getSubtleAttributes(colors.yellow, colors.white, colors),
    orange: getSubtleAttributes(colors.orange, colors.white, colors),
    red: getSubtleAttributes(colors.red, colors.white, colors),
    pink: getSubtleAttributes(colors.pink, colors.white, colors),
    grape: getSubtleAttributes(colors.grape, colors.white, colors),
    violet: getSubtleAttributes(colors.violet, colors.white, colors),
    indigo: getSubtleAttributes(colors.indigo, colors.white, colors),
    blue: getSubtleAttributes(colors.blue, colors.white, colors),
    cyan: getSubtleAttributes(colors.cyan, colors.white, colors),
    teal: getSubtleAttributes(colors.teal, colors.white, colors),
    green: getSubtleAttributes(colors.green, colors.white, colors),
    lime: getSubtleAttributes(colors.lime, colors.white, colors),
    white: getFillWithTextColorSubtle(colors.white.default, (0, _utils.lighten)(colors.gray, 0.1), (0, _utils.lighten)(colors.gray, 0.3)),
    dark: getFillWithTextColorSubtle(colors.dark.default, colors.dark.lighten(0.1), colors.dark.lighten(0.3)),
    darkLight: getFillWithTextColorSubtle(colors.dark.light, (0, _utils.lighten)(colors.dark.light, 0.1), (0, _utils.lighten)(colors.dark.light, 0.3)),
    gray: getFillWithTextColorSubtle(colors.gray, (0, _utils.lighten)(colors.gray, 0.1), (0, _utils.lighten)(colors.gray, 0.3)),
    primary: getFillWithTextColorSubtle(colors.primary.default, colors.primary.lighten(0.1), colors.primary.lighten(0.3)),
    secondary: getFillWithTextColorSubtle(colors.secondary.default, colors.secondary.lighten(0.1), colors.secondary.lighten(0.3)),
    notif: getFillWithTextColorSubtle(colors.intent.notif, (0, _utils.lighten)(colors.intent.notif, 0.1), (0, _utils.lighten)(colors.intent.notif, 0.3)),
    disabled: getFillWithTextColorSubtle((0, _utils.lighten)(colors.dark.light, 0.25), (0, _utils.lighten)(colors.dark.light, 0.2)),
    other1: getFillWithTextColorSubtle(colors.other.other1.default, colors.other.other1.lighten(0.1), colors.other.other1.lighten(0.3)),
    other2: {
      color: colors.other.other2.default,
      backgroundColor: (0, _utils.lighten)(colors.other.other2.default, 0.1)
    },
    other3: {
      color: colors.other.other3.default,
      backgroundColor: (0, _utils.lighten)(colors.other.other3.default, 0.1)
    },
    other4: {
      color: colors.other.other4.default,
      backgroundColor: (0, _utils.lighten)(colors.other.other4.default, 0.1)
    },
    other5: {
      color: colors.other.other5.default,
      backgroundColor: (0, _utils.lighten)(colors.other.other5.default, 0.1)
    },
    other6: {
      color: colors.other.other6.default,
      backgroundColor: (0, _utils.lighten)(colors.other.other6.default, 0.1)
    },
    getValue: function getValue(color) {
      return getSubtleAttributes(color, colors.white, colors);
    }
  };
};
var wired = function wired(colors) {
  return {
    black: getWiredAttributes(colors.black, colors),
    brand: getWiredAttributes(colors.brand, colors),
    brandSecondary: getWiredAttributes(colors.brandSecondary, colors),
    action: getWiredAttributes(colors.action, colors),
    pending: getWiredAttributes(colors.pending, colors),
    warning: getWiredAttributes(colors.warning, colors),
    success: getWiredAttributes(colors.success, colors),
    error: getWiredAttributes(colors.error, colors),
    yellow: getWiredAttributes(colors.yellow, colors),
    orange: getWiredAttributes(colors.orange, colors),
    red: getWiredAttributes(colors.red, colors),
    pink: getWiredAttributes(colors.pink, colors),
    grape: getWiredAttributes(colors.grape, colors),
    violet: getWiredAttributes(colors.violet, colors),
    indigo: getWiredAttributes(colors.indigo, colors),
    blue: getWiredAttributes(colors.blue, colors),
    cyan: getWiredAttributes(colors.cyan, colors),
    teal: getWiredAttributes(colors.teal, colors),
    green: getWiredAttributes(colors.green, colors),
    lime: getWiredAttributes(colors.lime, colors),
    primary: getFillWithTextColorWired(colors.primary.default),
    primaryLight: getFillWithTextColorWired(colors.primary.light),
    secondary: getFillWithTextColorWired(colors.secondary.default),
    secondaryLight: getFillWithTextColorWired(colors.secondary.light),
    notif: getFillWithTextColorWired(colors.intent.notif),
    dark: getFillWithTextColorWired(colors.dark.default),
    darkLight: getFillWithTextColorWired(colors.dark.light),
    gray: getFillWithTextColorWired(colors.gray),
    disabled: getFillWithTextColorWired(colors.dark.lighten(0.2)),
    getValue: function getValue(color) {
      return getWiredAttributes(color, colors);
    }
  };
};
var ghost = function ghost(colors) {
  return {
    black: getGhostAttributes(colors.black, colors),
    brand: getGhostAttributes(colors.brand, colors),
    brandSecondary: getGhostAttributes(colors.brandSecondary, colors),
    action: getGhostAttributes(colors.action, colors),
    pending: getGhostAttributes(colors.pending, colors),
    warning: getGhostAttributes(colors.warning, colors),
    success: getGhostAttributes(colors.success, colors),
    error: getGhostAttributes(colors.error, colors),
    yellow: getGhostAttributes(colors.yellow, colors),
    orange: getGhostAttributes(colors.orange, colors),
    red: getGhostAttributes(colors.red, colors),
    pink: getGhostAttributes(colors.pink, colors),
    grape: getGhostAttributes(colors.grape, colors),
    violet: getGhostAttributes(colors.violet, colors),
    indigo: getGhostAttributes(colors.indigo, colors),
    blue: getGhostAttributes(colors.blue, colors),
    cyan: getGhostAttributes(colors.cyan, colors),
    teal: getGhostAttributes(colors.teal, colors),
    green: getGhostAttributes(colors.green, colors),
    lime: getGhostAttributes(colors.lime, colors),
    white: getGhostAttributes(colors.white, colors),
    getValue: function getValue(color) {
      return getGhostAttributes(color, colors);
    }
  };
};
var clear = function clear(colors) {
  return {
    primary: getFillWithTextColorClear(colors.primary.default),
    primaryLight: getFillWithTextColorClear(colors.primary.light),
    secondary: getFillWithTextColorClear(colors.secondary.default),
    secondaryLight: getFillWithTextColorClear(colors.secondary.light),
    action: getFillWithTextColorClear(colors.intent.action),
    success: getFillWithTextColorClear(colors.intent.success),
    warning: getFillWithTextColorClear(colors.intent.warning),
    error: getFillWithTextColorClear(colors.intent.error),
    notif: getFillWithTextColorClear(colors.intent.notif),
    pending: getFillWithTextColorClear(colors.intent.pending),
    other1: getFillWithTextColorClear(colors.other.other1.default),
    other2: getFillWithTextColorClear(colors.other.other2.default),
    other3: getFillWithTextColorClear(colors.other.other3.default),
    other4: getFillWithTextColorClear(colors.other.other4.default),
    other5: getFillWithTextColorClear(colors.other.other5.default),
    other6: getFillWithTextColorClear(colors.other.other6.default),
    dark: getFillWithTextColorClear(colors.dark.default),
    darkLight: getFillWithTextColorClear(colors.dark.light),
    disabled: getFillWithTextColorClear(colors.dark.lighten(0.2)),
    gray: getFillWithTextColorClear(colors.gray),
    getValue: function getValue(color) {
      return getFillWithTextColorClear(color);
    }
  };
};
var defaultFills = {
  solid: solid,
  subtle: subtle,
  wired: wired,
  clear: clear,
  ghost: ghost
};
var fills = function fills(appearanceOption, colors, reverseOption) {
  return defaultFills[appearanceOption](colors, reverseOption);
};
var _default = exports.default = function _default(options, colors) {
  if (options === void 0) {
    options = {
      appearance: 'solid',
      color: 'brand',
      reverse: false
    };
  }
  var appearanceOption = options.appearance || 'solid';
  var colorOption = options.color || 'brand';
  var reverseOption = options.reverse || false;
  var appearances = fills(appearanceOption, colors, reverseOption);
  if (themedProperty(appearances, colorOption) && typeof themedProperty(appearances, colorOption) === 'object' && themedProperty(appearances, colorOption).constructor === Object) {
    return themedProperty(appearances, colorOption);
  }
  return appearances.getValue(colorOption);
};