@elliemae/ds-system 2.4.1-rc.7 → 2.4.2-rc.0

package/cjs/globalStyles.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 require('polished');
 require('lodash');
+var styled_component = require('styled-components');
 require('./theme.js');
 require('core-js/modules/web.dom-collections.iterator.js');
 require('react');
-var styled_component = require('styled-components');
+require('./th.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/index.js

@@ -31,6 +31,7 @@ exports.toMobile = mobileUtilities.toMobile;
 exports.useIsMobile = mobileUtilities.useIsMobile;
 exports.active = utils.active;
 exports.animation = utils.animation;
+exports.backgroundColorSetter = utils.backgroundColorSetter;
 exports.border = utils.border;
 exports.boxShadow = utils.boxShadow;
 exports.buttonLink = utils.buttonLink;
@@ -42,6 +43,7 @@ exports.fakeBorder = utils.fakeBorder;
 exports.flexCenter = utils.flexCenter;
 exports.focus = utils.focus;
 exports.focusAfter = utils.focusAfter;
+exports.hexToRgba = utils.hexToRgba;
 exports.hover = utils.hover;
 exports.iconColor = utils.iconColor;
 exports.keyframes = utils.keyframes;

package/cjs/th.js

@@ -2,33 +2,56 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.for-each.js');
+var utils = require('./utils.js');
 
-const th = property => {
-  const thGetter = function (value) {
-    let dfault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-
-    const func = _ref => {
-      var _ref2;
-
-      let {
-        theme
-      } = _ref;
-      const parts = value.split('-');
-      let result = theme[property];
-      parts.forEach(part => {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        if (result) result = result[part];
-      });
-      return (_ref2 = result) !== null && _ref2 !== void 0 ? _ref2 : dfault;
-    };
-
-    return func;
+const colorGetter = value => _ref => {
+  let {
+    theme
+  } = _ref;
+  const colorValues = value.split('-');
+  if (colorValues.length === 1) return colorValues[0];
+  if (colorValues.length > 3) throw new Error('Invalid color value');
+  const [colorType, colorValue, alpha] = colorValues;
+  const themeColor = theme.colors[colorType][colorValue];
+  if (!themeColor) throw new Error('Invalid color value');
+
+  if (alpha) {
+    const alphaFloatingNumber = "0.".concat(alpha.slice(1));
+    return utils.hexToRgba(themeColor, alphaFloatingNumber);
+  }
+
+  return themeColor;
+};
+
+const genericGetter = property => function (value) {
+  let dfault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return _ref2 => {
+    var _ref3;
+
+    let {
+      theme
+    } = _ref2;
+    const parts = value.split('-');
+    let result = theme[property];
+    parts.forEach(part => {
+      if (result) result = result[part];
+    });
+    return (_ref3 = result) !== null && _ref3 !== void 0 ? _ref3 : dfault;
   };
+};
+
+const th = property => {
+  switch (property) {
+    case 'colors':
+      return colorGetter;
 
-  return thGetter;
+    default:
+      return genericGetter(property);
+  }
 };
 th.space = th('space');
 th.fontSize = th('fontSizes');

package/cjs/utils.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var polished = require('polished');
 var lodash = require('lodash');
+var styled_component = require('styled-components');
 var theme = require('./theme.js');
 var mobileUtilities = require('./mobileUtilities.js');
-var styled_component = require('styled-components');
+var th = require('./th.js');
 
 /* eslint-disable no-shadow */
 function truncate(width) {
@@ -134,6 +135,25 @@ const onlySafariAndFirefox = styles => styled_component.css(["@media not all and
 const onlySafari = styles => "\n    @media not all and (min-resolution: 0.001dpcm) {\n      ".concat(styles, "\n    }\n  ");
 const onlyFirefox = styles => "\n    @media screen and (min--moz-device-pixel-ratio: 0) {\n      ".concat(styles, "\n    }\n  ");
 const safariAndFirefoxBold = color => "\n  @media not all and (min-resolution: 0.001dpcm) {\n    font-weight: 400;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-text-stroke: 0.4px ".concat(color, ";\n  }\n  @media screen and (min--moz-device-pixel-ratio: 0) {\n    font-weight: 400;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-text-stroke: 0.4px ").concat(color, ";\n  }\n");
+const backgroundColorSetter = /*#__PURE__*/styled_component.css(["", "}"], _ref => {
+  let {
+    bg,
+    backgroundColor,
+    theme
+  } = _ref;
+  return bg || backgroundColor ? "background-color: ".concat(th.th.color(bg || backgroundColor, bg || backgroundColor)({
+    theme
+  }), ";") : "";
+});
+const hexToRgba = (hex, alpha) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+  if (result) {
+    return "rgba(".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16), ", ").concat(alpha, ")");
+  }
+
+  return "";
+};
 
 Object.defineProperty(exports, 'rgba', {
   enumerable: true,
@@ -161,6 +181,7 @@ Object.defineProperty(exports, 'withTheme', {
 });
 exports.active = active;
 exports.animation = animation;
+exports.backgroundColorSetter = backgroundColorSetter;
 exports.border = border;
 exports.boxShadow = boxShadow;
 exports.buttonLink = buttonLink;
@@ -172,6 +193,7 @@ exports.fakeBorder = fakeBorder;
 exports.flexCenter = flexCenter;
 exports.focus = focus;
 exports.focusAfter = focusAfter;
+exports.hexToRgba = hexToRgba;
 exports.hover = hover;
 exports.iconColor = iconColor;
 exports.keyframes = keyframes;

package/esm/globalStyles.js

@@ -1,10 +1,11 @@
 import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import 'polished';
 import 'lodash';
+import { createGlobalStyle } from 'styled-components';
 import './theme.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'react';
-import { createGlobalStyle } from 'styled-components';
+import './th.js';
 
 var _templateObject;
 const GlobalStyles = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  :root, body {\n    overscroll-behavior-y: none;\n\n    font-size: ", ";\n\n    @media(min-width: ", ") {\n      font-size: ", ";\n    }\n\n  }\n"])), props => props.device === 'desktop' ? '13px' : '16px', _ref => {

package/esm/index.js

@@ -1,7 +1,7 @@
 export { GlobalStyles } from './globalStyles.js';
 export { fixSpace, fixSpaceGutter, mapGap, mapGrid, mapGutter, mapSpace, mapTemplateGrid, numbersToFr } from './spaceUtilities.js';
 export { __UNSAFE_SPACE_TO_DIMSUM, isMobile, toMobile, useIsMobile } from './mobileUtilities.js';
-export { active, animation, border, boxShadow, buttonLink, clearFocus, color, disabled, fakeActive, fakeBorder, flexCenter, focus, focusAfter, hover, iconColor, keyframes, onlyFirefox, onlySafari, onlySafariAndFirefox, safariAndFirefoxBold, textStyle, transition, truncate } from './utils.js';
+export { active, animation, backgroundColorSetter, border, boxShadow, buttonLink, clearFocus, color, disabled, fakeActive, fakeBorder, flexCenter, focus, focusAfter, hexToRgba, hover, iconColor, keyframes, onlyFirefox, onlySafari, onlySafariAndFirefox, safariAndFirefoxBold, textStyle, transition, truncate } from './utils.js';
 export { getNumberAndUnit, op } from './arithmetic.js';
 export { th } from './th.js';
 export { theme } from './theme.js';

package/esm/th.js

@@ -1,30 +1,53 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
+import { hexToRgba } from './utils.js';
 
-const th = property => {
-  const thGetter = function (value) {
-    let dfault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-
-    const func = _ref => {
-      var _ref2;
-
-      let {
-        theme
-      } = _ref;
-      const parts = value.split('-');
-      let result = theme[property];
-      parts.forEach(part => {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        if (result) result = result[part];
-      });
-      return (_ref2 = result) !== null && _ref2 !== void 0 ? _ref2 : dfault;
-    };
-
-    return func;
+const colorGetter = value => _ref => {
+  let {
+    theme
+  } = _ref;
+  const colorValues = value.split('-');
+  if (colorValues.length === 1) return colorValues[0];
+  if (colorValues.length > 3) throw new Error('Invalid color value');
+  const [colorType, colorValue, alpha] = colorValues;
+  const themeColor = theme.colors[colorType][colorValue];
+  if (!themeColor) throw new Error('Invalid color value');
+
+  if (alpha) {
+    const alphaFloatingNumber = "0.".concat(alpha.slice(1));
+    return hexToRgba(themeColor, alphaFloatingNumber);
+  }
+
+  return themeColor;
+};
+
+const genericGetter = property => function (value) {
+  let dfault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return _ref2 => {
+    var _ref3;
+
+    let {
+      theme
+    } = _ref2;
+    const parts = value.split('-');
+    let result = theme[property];
+    parts.forEach(part => {
+      if (result) result = result[part];
+    });
+    return (_ref3 = result) !== null && _ref3 !== void 0 ? _ref3 : dfault;
   };
+};
+
+const th = property => {
+  switch (property) {
+    case 'colors':
+      return colorGetter;
 
-  return thGetter;
+    default:
+      return genericGetter(property);
+  }
 };
 th.space = th('space');
 th.fontSize = th('fontSizes');

package/esm/utils.js

@@ -1,10 +1,11 @@
 import { lighten } from 'polished';
 export { rgba } from 'polished';
 import { reduce } from 'lodash';
-import { theme } from './theme.js';
-import { toMobile } from './mobileUtilities.js';
 import { css, keyframes as keyframes$1 } from 'styled-components';
 export { createGlobalStyle, css, keyframes as kfrm, useTheme, withTheme } from 'styled-components';
+import { theme } from './theme.js';
+import { toMobile } from './mobileUtilities.js';
+import { th } from './th.js';
 
 /* eslint-disable no-shadow */
 function truncate(width) {
@@ -132,5 +133,24 @@ const onlySafariAndFirefox = styles => css(["@media not all and (min-resolution:
 const onlySafari = styles => "\n    @media not all and (min-resolution: 0.001dpcm) {\n      ".concat(styles, "\n    }\n  ");
 const onlyFirefox = styles => "\n    @media screen and (min--moz-device-pixel-ratio: 0) {\n      ".concat(styles, "\n    }\n  ");
 const safariAndFirefoxBold = color => "\n  @media not all and (min-resolution: 0.001dpcm) {\n    font-weight: 400;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-text-stroke: 0.4px ".concat(color, ";\n  }\n  @media screen and (min--moz-device-pixel-ratio: 0) {\n    font-weight: 400;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-text-stroke: 0.4px ").concat(color, ";\n  }\n");
-
-export { active, animation, border, boxShadow, buttonLink, clearFocus, color, disabled, fakeActive, fakeBorder, flexCenter, focus, focusAfter, hover, iconColor, keyframes, onlyFirefox, onlySafari, onlySafariAndFirefox, safariAndFirefoxBold, textStyle, transition, truncate };
+const backgroundColorSetter = /*#__PURE__*/css(["", "}"], _ref => {
+  let {
+    bg,
+    backgroundColor,
+    theme
+  } = _ref;
+  return bg || backgroundColor ? "background-color: ".concat(th.color(bg || backgroundColor, bg || backgroundColor)({
+    theme
+  }), ";") : "";
+});
+const hexToRgba = (hex, alpha) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+  if (result) {
+    return "rgba(".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16), ", ").concat(alpha, ")");
+  }
+
+  return "";
+};
+
+export { active, animation, backgroundColorSetter, border, boxShadow, buttonLink, clearFocus, color, disabled, fakeActive, fakeBorder, flexCenter, focus, focusAfter, hexToRgba, hover, iconColor, keyframes, onlyFirefox, onlySafari, onlySafariAndFirefox, safariAndFirefoxBold, textStyle, transition, truncate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-system",
-  "version": "2.4.1-rc.7",
+  "version": "2.4.2-rc.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "module": "./esm/index.js",
@@ -89,7 +89,7 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-utilities": "2.4.1-rc.7",
+    "@elliemae/ds-utilities": "2.4.2-rc.0",
     "polished": "~3.6.7"
   },
   "devDependencies": {