@elliemae/ds-system 2.0.0-alpha.10 → 2.0.0-alpha.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/cjs/arithmetic.js +2 -0
  2. package/cjs/globalStyles.js +9 -10
  3. package/cjs/mobileUtilities.js +3 -2
  4. package/cjs/spaceUtilities.js +9 -9
  5. package/cjs/utils.js +21 -77
  6. package/esm/arithmetic.js +2 -0
  7. package/esm/globalStyles.js +5 -10
  8. package/esm/mobileUtilities.js +3 -2
  9. package/esm/spaceUtilities.js +9 -9
  10. package/esm/utils.js +21 -77
  11. package/package.json +3 -3
  12. package/cjs/package.json +0 -7
  13. package/esm/package.json +0 -7
package/cjs/arithmetic.js CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ require('core-js/modules/web.dom-collections.iterator.js');
6
+
5
7
  function getNumberAndUnit(numberStrWithUnit) {
6
8
  const [number, unit] = String(numberStrWithUnit).match(/[a-z]+|[(/^\-?\d*.\d+|\d+),?]+/gi);
7
9
  return {
package/cjs/globalStyles.js CHANGED
@@ -2,22 +2,21 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
5
6
  require('polished');
6
7
  require('lodash');
7
8
  require('./theme.js');
9
+ require('core-js/modules/web.dom-collections.iterator.js');
8
10
  require('react');
9
11
  var styledComponents = require('styled-components');
10
12
 
11
- const GlobalStyles = styledComponents.createGlobalStyle`
12
- :root, body {
13
- overscroll-behavior-y: none;
14
- font-size: 16px;
15
- @media (min-width: ${({
13
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
+
15
+ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
16
+
17
+ var _templateObject;
18
+ const GlobalStyles = styledComponents.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n :root, body {\n overscroll-behavior-y: none;\n font-size: 16px;\n @media (min-width: ", ") { \n font-size: 13px;\n }\n }\n"])), ({
16
19
  theme
17
- }) => theme.breakpoints.small}) {
18
- font-size: 13px;
19
- }
20
- }
21
- `;
20
+ }) => theme.breakpoints.small);
22
21
 
23
22
  exports.GlobalStyles = GlobalStyles;
package/cjs/mobileUtilities.js CHANGED
@@ -2,17 +2,18 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ require('core-js/modules/web.dom-collections.iterator.js');
5
6
  var react = require('react');
6
7
  var theme = require('./theme.js');
7
8
  var constants = require('./constants.js');
8
9
 
9
10
  function __UNSAFE_SPACE_TO_DIMSUM(unit) {
10
11
  if (constants.translateUnits[unit]) return constants.translateUnits[unit];
11
- return `${parseFloat(unit) * (constants.mobileBaseFont / constants.desktopBaseFont) / 2}px`;
12
+ return "".concat(parseFloat(unit) * (constants.mobileBaseFont / constants.desktopBaseFont) / 2, "px");
12
13
  }
13
14
  function toMobile(unit) {
14
15
  if (!isMobile()) return unit;
15
- return `${parseFloat(unit) * (constants.desktopBaseFont / constants.mobileBaseFont)}rem`;
16
+ return "".concat(parseFloat(unit) * (constants.desktopBaseFont / constants.mobileBaseFont), "rem");
16
17
  }
17
18
  const useIsMobile = () => {
18
19
  const [mobile, setMobile] = react.useState(isMobile());
package/cjs/spaceUtilities.js CHANGED
@@ -8,20 +8,20 @@ var theme = require('./theme.js');
8
8
  function mapGap(gutter) {
9
9
  if (!gutter) return '0rem';
10
10
  if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;
11
- return `${theme.theme.space[gutter]}`;
11
+ return "".concat(theme.theme.space[gutter]);
12
12
  }
13
13
  function mapGutter(gutter) {
14
14
  if (!gutter) return '0rem';
15
- return `${theme.theme.space[gutter]} * 2`;
15
+ return "".concat(theme.theme.space[gutter], " * 2");
16
16
  }
17
17
  function mapSpace(width) {
18
- if (typeof width === 'string') return lodash.get(theme.theme, width) ? `${lodash.get(theme.theme, width)}` : width;
19
- return `${width * 100}%`;
18
+ if (typeof width === 'string') return lodash.get(theme.theme, width) ? "".concat(lodash.get(theme.theme, width)) : width;
19
+ return "".concat(width * 100, "%");
20
20
  }
21
21
  function fixSpaceGutter(width, gutter) {
22
22
  if (!width) return '';
23
- if (Array.isArray(width)) return width.map(w => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);
24
- return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;
23
+ if (Array.isArray(width)) return width.map(w => "calc(".concat(mapSpace(w), " - (").concat(mapGutter(gutter), "))"));
24
+ return "calc(".concat(mapSpace(width), " - (").concat(mapGutter(gutter), "))");
25
25
  }
26
26
  function fixSpace(width) {
27
27
  if (!width) return '';
@@ -36,13 +36,13 @@ function fixSpace(width) {
36
36
 
37
37
  function numbersToFr(grid) {
38
38
  const den = grid.map(f => f < 1 ? Math.floor(1 / f) : f);
39
- return den.map(d => `${d}fr`);
39
+ return den.map(d => "".concat(d, "fr"));
40
40
  }
41
41
  function mapGrid(width) {
42
- if (lodash.get(theme.theme, width)) return `${lodash.get(theme.theme, width)}`;
42
+ if (lodash.get(theme.theme, width)) return "".concat(lodash.get(theme.theme, width));
43
43
  if (typeof width === 'string') return width;
44
44
  const den = width < 1 ? Math.floor(1 / width) : width;
45
- return `${den}fr`;
45
+ return "".concat(den, "fr");
46
46
  }
47
47
  function mapTemplateGrid(grid) {
48
48
  if (Array.isArray(grid)) {
package/cjs/utils.js CHANGED
@@ -10,38 +10,26 @@ var styledComponents = require('styled-components');
10
10
 
11
11
  /* eslint-disable no-shadow */
12
12
  function truncate(width) {
13
- return props => styledComponents.css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? `width: ${props.width || width};` : '');
13
+ return props => styledComponents.css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? "width: ".concat(props.width || width, ";") : '');
14
14
  }
15
15
  function flexCenter() {
16
- return `
17
- display: flex;
18
- justify-content: center;
19
- align-items: center;
20
- `;
16
+ return "\n display: flex;\n justify-content: center;\n align-items: center;\n ";
21
17
  }
22
18
  function disabled() {
23
- return `
24
- cursor: not-allowed;
25
- pointer-events: none;
26
- `;
19
+ return "\n cursor: not-allowed;\n pointer-events: none;\n ";
27
20
  }
28
21
  function keyframes(obj) {
29
- return styledComponents.keyframes(["", ""], lodash.reduce(obj, (result, value, key) => `
30
- ${result}
31
- ${key}% {
32
- ${value}
33
- }
34
- `, ''));
22
+ return styledComponents.keyframes(["", ""], lodash.reduce(obj, (result, value, key) => "\n ".concat(result, "\n ").concat(key, "% {\n ").concat(value, "\n }\n "), ''));
35
23
  } // eslint-disable-next-line max-params
36
24
 
37
25
  function boxShadow(top, left, blur, color, inset = false) {
38
- return `box-shadow: ${inset ? 'inset' : ''} ${top} ${left} ${blur} ${color};`;
26
+ return "box-shadow: ".concat(inset ? 'inset' : '', " ").concat(top, " ").concat(left, " ").concat(blur, " ").concat(color, ";");
39
27
  }
40
28
  function color(variant = 'neutral', type = 400) {
41
29
  return styledComponents.css(["color:", ";"], props => props.theme.colors[variant][type]);
42
30
  }
43
31
  function border(color = theme.theme.colors.brand[600], size = '1px', type = 'solid') {
44
- return `${size} ${type} ${color}`;
32
+ return "".concat(size, " ").concat(type, " ").concat(color);
45
33
  }
46
34
  function animation(animationKeyframes, animationLength, animationTimingFn) {
47
35
  return props => styledComponents.css(["animation:", " ", " ", ";"], props.animationKeyframes || animationKeyframes, props.animationLength || animationLength, props.animationTimingFn || animationTimingFn);
@@ -62,86 +50,51 @@ function hover() {
62
50
  function textStyle(type, weight = 'regular') {
63
51
  // eslint-disable-next-line complexity
64
52
  return props => {
65
- let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`; // eslint-disable-next-line default-case
53
+ let cssVar = "font-weight: ".concat(props.theme.fontWeights[weight], ";"); // eslint-disable-next-line default-case
66
54
 
67
55
  switch (type) {
68
56
  case 'h1':
69
- cssVar += `
70
- font-size: ${mobileUtilities.toMobile('2.7692rem')};
71
- line-height: normal;
72
- `;
57
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile('2.7692rem'), ";\n line-height: normal;\n ");
73
58
  break;
74
59
 
75
60
  case 'h2':
76
- cssVar += `
77
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.title[800])};
78
- line-height: normal;
79
- `;
61
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[800]), ";\n line-height: normal;\n ");
80
62
  break;
81
63
 
82
64
  case 'h3':
83
- cssVar += `
84
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.title[700])};
85
- line-height: 1.2;
86
- `;
65
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[700]), ";\n line-height: 1.2;\n ");
87
66
  break;
88
67
 
89
68
  case 'h4':
90
- cssVar += `
91
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.title[600])};
92
- line-height: normal;
93
- `;
69
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[600]), ";\n line-height: normal;\n ");
94
70
  break;
95
71
 
96
72
  case 'h5':
97
- cssVar += `
98
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.title[500])};
99
- line-height: normal;
100
- `;
73
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[500]), ";\n line-height: normal;\n ");
101
74
  break;
102
75
 
103
76
  case 'section-header':
104
- cssVar += `
105
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.title[500])};
106
- line-height: normal;
107
- text-transform: uppercase;
108
- `;
77
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[500]), ";\n line-height: normal;\n text-transform: uppercase;\n ");
109
78
  break;
110
79
 
111
80
  case 'body':
112
- cssVar += `
113
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.value[400])};
114
- line-height: normal;
115
- `;
81
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[400]), ";\n line-height: normal;\n ");
116
82
  break;
117
83
 
118
84
  case 'body-small':
119
- cssVar += `
120
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.value[300])};
121
- line-height: normal;
122
- `;
85
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[300]), ";\n line-height: normal;\n ");
123
86
  break;
124
87
 
125
88
  case 'body-micro':
126
- cssVar += `
127
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.microText[200])};
128
- line-height: normal;
129
- `;
89
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.microText[200]), ";\n line-height: normal;\n ");
130
90
  break;
131
91
 
132
92
  case 'list':
133
- cssVar += `
134
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.value[400])};
135
- line-height: normal;
136
- `;
93
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[400]), ";\n line-height: normal;\n ");
137
94
  break;
138
95
 
139
96
  case 'link':
140
- cssVar += `
141
- line-height: ${props.theme.xl};
142
- color: ${props.theme.colors.brand[600]};
143
- cursor: pointer;
144
- `;
97
+ cssVar += "\n line-height: ".concat(props.theme.xl, ";\n color: ").concat(props.theme.colors.brand[600], ";\n cursor: pointer;\n ");
145
98
  break;
146
99
  }
147
100
 
@@ -158,22 +111,13 @@ function fakeActive() {
158
111
  return styledComponents.css(["outline:none;box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.brand[700]);
159
112
  }
160
113
  function clearFocus() {
161
- return `
162
- border: none;
163
- box-shadow: none;
164
- `;
114
+ return "\n border: none;\n box-shadow: none;\n ";
165
115
  }
166
116
  function buttonLink() {
167
- return `
168
- background-color: transparent;
169
- border: 1px solid transparent;
170
- cursor: pointer;
171
- `;
117
+ return "\n background-color: transparent;\n border: 1px solid transparent;\n cursor: pointer;\n ";
172
118
  }
173
119
  function transition(t = 'all 1s ease') {
174
- return `
175
- transition: ${t};
176
- `;
120
+ return "\n transition: ".concat(t, ";\n ");
177
121
  }
178
122
  function onlySafariAndFiredox(styles) {
179
123
  return styledComponents.css(["@media not all and (min-resolution:0.001dpcm){", "}@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles, styles);
package/esm/arithmetic.js CHANGED
@@ -1,3 +1,5 @@
1
+ import 'core-js/modules/web.dom-collections.iterator.js';
2
+
1
3
  function getNumberAndUnit(numberStrWithUnit) {
2
4
  const [number, unit] = String(numberStrWithUnit).match(/[a-z]+|[(/^\-?\d*.\d+|\d+),?]+/gi);
3
5
  return {
package/esm/globalStyles.js CHANGED
@@ -1,19 +1,14 @@
1
+ import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
1
2
  import 'polished';
2
3
  import 'lodash';
3
4
  import './theme.js';
5
+ import 'core-js/modules/web.dom-collections.iterator.js';
4
6
  import 'react';
5
7
  import { createGlobalStyle } from 'styled-components';
6
8
 
7
- const GlobalStyles = createGlobalStyle`
8
- :root, body {
9
- overscroll-behavior-y: none;
10
- font-size: 16px;
11
- @media (min-width: ${({
9
+ var _templateObject;
10
+ const GlobalStyles = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n :root, body {\n overscroll-behavior-y: none;\n font-size: 16px;\n @media (min-width: ", ") { \n font-size: 13px;\n }\n }\n"])), ({
12
11
  theme
13
- }) => theme.breakpoints.small}) {
14
- font-size: 13px;
15
- }
16
- }
17
- `;
12
+ }) => theme.breakpoints.small);
18
13
 
19
14
  export { GlobalStyles };
package/esm/mobileUtilities.js CHANGED
@@ -1,14 +1,15 @@
1
+ import 'core-js/modules/web.dom-collections.iterator.js';
1
2
  import { useState, useEffect } from 'react';
2
3
  import { theme } from './theme.js';
3
4
  import { translateUnits, mobileBaseFont, desktopBaseFont } from './constants.js';
4
5
 
5
6
  function __UNSAFE_SPACE_TO_DIMSUM(unit) {
6
7
  if (translateUnits[unit]) return translateUnits[unit];
7
- return `${parseFloat(unit) * (mobileBaseFont / desktopBaseFont) / 2}px`;
8
+ return "".concat(parseFloat(unit) * (mobileBaseFont / desktopBaseFont) / 2, "px");
8
9
  }
9
10
  function toMobile(unit) {
10
11
  if (!isMobile()) return unit;
11
- return `${parseFloat(unit) * (desktopBaseFont / mobileBaseFont)}rem`;
12
+ return "".concat(parseFloat(unit) * (desktopBaseFont / mobileBaseFont), "rem");
12
13
  }
13
14
  const useIsMobile = () => {
14
15
  const [mobile, setMobile] = useState(isMobile());
package/esm/spaceUtilities.js CHANGED
@@ -4,20 +4,20 @@ import { theme } from './theme.js';
4
4
  function mapGap(gutter) {
5
5
  if (!gutter) return '0rem';
6
6
  if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;
7
- return `${theme.space[gutter]}`;
7
+ return "".concat(theme.space[gutter]);
8
8
  }
9
9
  function mapGutter(gutter) {
10
10
  if (!gutter) return '0rem';
11
- return `${theme.space[gutter]} * 2`;
11
+ return "".concat(theme.space[gutter], " * 2");
12
12
  }
13
13
  function mapSpace(width) {
14
- if (typeof width === 'string') return get(theme, width) ? `${get(theme, width)}` : width;
15
- return `${width * 100}%`;
14
+ if (typeof width === 'string') return get(theme, width) ? "".concat(get(theme, width)) : width;
15
+ return "".concat(width * 100, "%");
16
16
  }
17
17
  function fixSpaceGutter(width, gutter) {
18
18
  if (!width) return '';
19
- if (Array.isArray(width)) return width.map(w => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);
20
- return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;
19
+ if (Array.isArray(width)) return width.map(w => "calc(".concat(mapSpace(w), " - (").concat(mapGutter(gutter), "))"));
20
+ return "calc(".concat(mapSpace(width), " - (").concat(mapGutter(gutter), "))");
21
21
  }
22
22
  function fixSpace(width) {
23
23
  if (!width) return '';
@@ -32,13 +32,13 @@ function fixSpace(width) {
32
32
 
33
33
  function numbersToFr(grid) {
34
34
  const den = grid.map(f => f < 1 ? Math.floor(1 / f) : f);
35
- return den.map(d => `${d}fr`);
35
+ return den.map(d => "".concat(d, "fr"));
36
36
  }
37
37
  function mapGrid(width) {
38
- if (get(theme, width)) return `${get(theme, width)}`;
38
+ if (get(theme, width)) return "".concat(get(theme, width));
39
39
  if (typeof width === 'string') return width;
40
40
  const den = width < 1 ? Math.floor(1 / width) : width;
41
- return `${den}fr`;
41
+ return "".concat(den, "fr");
42
42
  }
43
43
  function mapTemplateGrid(grid) {
44
44
  if (Array.isArray(grid)) {
package/esm/utils.js CHANGED
@@ -8,38 +8,26 @@ export { createGlobalStyle, css, keyframes as kfrm, useTheme, withTheme } from '
8
8
 
9
9
  /* eslint-disable no-shadow */
10
10
  function truncate(width) {
11
- return props => css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? `width: ${props.width || width};` : '');
11
+ return props => css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? "width: ".concat(props.width || width, ";") : '');
12
12
  }
13
13
  function flexCenter() {
14
- return `
15
- display: flex;
16
- justify-content: center;
17
- align-items: center;
18
- `;
14
+ return "\n display: flex;\n justify-content: center;\n align-items: center;\n ";
19
15
  }
20
16
  function disabled() {
21
- return `
22
- cursor: not-allowed;
23
- pointer-events: none;
24
- `;
17
+ return "\n cursor: not-allowed;\n pointer-events: none;\n ";
25
18
  }
26
19
  function keyframes(obj) {
27
- return keyframes$1(["", ""], reduce(obj, (result, value, key) => `
28
- ${result}
29
- ${key}% {
30
- ${value}
31
- }
32
- `, ''));
20
+ return keyframes$1(["", ""], reduce(obj, (result, value, key) => "\n ".concat(result, "\n ").concat(key, "% {\n ").concat(value, "\n }\n "), ''));
33
21
  } // eslint-disable-next-line max-params
34
22
 
35
23
  function boxShadow(top, left, blur, color, inset = false) {
36
- return `box-shadow: ${inset ? 'inset' : ''} ${top} ${left} ${blur} ${color};`;
24
+ return "box-shadow: ".concat(inset ? 'inset' : '', " ").concat(top, " ").concat(left, " ").concat(blur, " ").concat(color, ";");
37
25
  }
38
26
  function color(variant = 'neutral', type = 400) {
39
27
  return css(["color:", ";"], props => props.theme.colors[variant][type]);
40
28
  }
41
29
  function border(color = theme.colors.brand[600], size = '1px', type = 'solid') {
42
- return `${size} ${type} ${color}`;
30
+ return "".concat(size, " ").concat(type, " ").concat(color);
43
31
  }
44
32
  function animation(animationKeyframes, animationLength, animationTimingFn) {
45
33
  return props => css(["animation:", " ", " ", ";"], props.animationKeyframes || animationKeyframes, props.animationLength || animationLength, props.animationTimingFn || animationTimingFn);
@@ -60,86 +48,51 @@ function hover() {
60
48
  function textStyle(type, weight = 'regular') {
61
49
  // eslint-disable-next-line complexity
62
50
  return props => {
63
- let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`; // eslint-disable-next-line default-case
51
+ let cssVar = "font-weight: ".concat(props.theme.fontWeights[weight], ";"); // eslint-disable-next-line default-case
64
52
 
65
53
  switch (type) {
66
54
  case 'h1':
67
- cssVar += `
68
- font-size: ${toMobile('2.7692rem')};
69
- line-height: normal;
70
- `;
55
+ cssVar += "\n font-size: ".concat(toMobile('2.7692rem'), ";\n line-height: normal;\n ");
71
56
  break;
72
57
 
73
58
  case 'h2':
74
- cssVar += `
75
- font-size: ${toMobile(props.theme.fontSizes.title[800])};
76
- line-height: normal;
77
- `;
59
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.title[800]), ";\n line-height: normal;\n ");
78
60
  break;
79
61
 
80
62
  case 'h3':
81
- cssVar += `
82
- font-size: ${toMobile(props.theme.fontSizes.title[700])};
83
- line-height: 1.2;
84
- `;
63
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.title[700]), ";\n line-height: 1.2;\n ");
85
64
  break;
86
65
 
87
66
  case 'h4':
88
- cssVar += `
89
- font-size: ${toMobile(props.theme.fontSizes.title[600])};
90
- line-height: normal;
91
- `;
67
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.title[600]), ";\n line-height: normal;\n ");
92
68
  break;
93
69
 
94
70
  case 'h5':
95
- cssVar += `
96
- font-size: ${toMobile(props.theme.fontSizes.title[500])};
97
- line-height: normal;
98
- `;
71
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.title[500]), ";\n line-height: normal;\n ");
99
72
  break;
100
73
 
101
74
  case 'section-header':
102
- cssVar += `
103
- font-size: ${toMobile(props.theme.fontSizes.title[500])};
104
- line-height: normal;
105
- text-transform: uppercase;
106
- `;
75
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.title[500]), ";\n line-height: normal;\n text-transform: uppercase;\n ");
107
76
  break;
108
77
 
109
78
  case 'body':
110
- cssVar += `
111
- font-size: ${toMobile(props.theme.fontSizes.value[400])};
112
- line-height: normal;
113
- `;
79
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.value[400]), ";\n line-height: normal;\n ");
114
80
  break;
115
81
 
116
82
  case 'body-small':
117
- cssVar += `
118
- font-size: ${toMobile(props.theme.fontSizes.value[300])};
119
- line-height: normal;
120
- `;
83
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.value[300]), ";\n line-height: normal;\n ");
121
84
  break;
122
85
 
123
86
  case 'body-micro':
124
- cssVar += `
125
- font-size: ${toMobile(props.theme.fontSizes.microText[200])};
126
- line-height: normal;
127
- `;
87
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.microText[200]), ";\n line-height: normal;\n ");
128
88
  break;
129
89
 
130
90
  case 'list':
131
- cssVar += `
132
- font-size: ${toMobile(props.theme.fontSizes.value[400])};
133
- line-height: normal;
134
- `;
91
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.value[400]), ";\n line-height: normal;\n ");
135
92
  break;
136
93
 
137
94
  case 'link':
138
- cssVar += `
139
- line-height: ${props.theme.xl};
140
- color: ${props.theme.colors.brand[600]};
141
- cursor: pointer;
142
- `;
95
+ cssVar += "\n line-height: ".concat(props.theme.xl, ";\n color: ").concat(props.theme.colors.brand[600], ";\n cursor: pointer;\n ");
143
96
  break;
144
97
  }
145
98
 
@@ -156,22 +109,13 @@ function fakeActive() {
156
109
  return css(["outline:none;box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.brand[700]);
157
110
  }
158
111
  function clearFocus() {
159
- return `
160
- border: none;
161
- box-shadow: none;
162
- `;
112
+ return "\n border: none;\n box-shadow: none;\n ";
163
113
  }
164
114
  function buttonLink() {
165
- return `
166
- background-color: transparent;
167
- border: 1px solid transparent;
168
- cursor: pointer;
169
- `;
115
+ return "\n background-color: transparent;\n border: 1px solid transparent;\n cursor: pointer;\n ";
170
116
  }
171
117
  function transition(t = 'all 1s ease') {
172
- return `
173
- transition: ${t};
174
- `;
118
+ return "\n transition: ".concat(t, ";\n ");
175
119
  }
176
120
  function onlySafariAndFiredox(styles) {
177
121
  return css(["@media not all and (min-resolution:0.001dpcm){", "}@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles, styles);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-system",
3
- "version": "2.0.0-alpha.10",
3
+ "version": "2.0.0-alpha.11",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - System",
6
6
  "module": "./esm/index.js",
@@ -72,12 +72,12 @@
72
72
  "polished": "~3.6.7"
73
73
  },
74
74
  "devDependencies": {
75
- "@elliemae/pui-theme": "~2.2.3",
75
+ "@elliemae/pui-theme": "~2.2.4",
76
76
  "styled-components": "~5.3.1",
77
77
  "styled-system": "~5.1.5"
78
78
  },
79
79
  "peerDependencies": {
80
- "@elliemae/pui-theme": "^2.2.3",
80
+ "@elliemae/pui-theme": "^2.2.4",
81
81
  "lodash": "^4.17.21",
82
82
  "react": "~17.0.2",
83
83
  "react-dom": "^17.0.2",
package/cjs/package.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "type": "commonjs",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }
package/esm/package.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "type": "module",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }