@elliemae/ds-system 3.0.0-next.2 → 3.0.0-next.6

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 (105) hide show
  1. package/dist/cjs/arithmetic.js +55 -0
  2. package/dist/cjs/arithmetic.js.map +7 -0
  3. package/dist/cjs/constants.js +47 -0
  4. package/dist/cjs/constants.js.map +7 -0
  5. package/dist/cjs/globalStyles.js +47 -0
  6. package/dist/cjs/globalStyles.js.map +7 -0
  7. package/dist/cjs/index.js +43 -0
  8. package/dist/cjs/index.js.map +7 -0
  9. package/dist/cjs/mobileUtilities.js +72 -0
  10. package/dist/cjs/mobileUtilities.js.map +7 -0
  11. package/dist/cjs/spaceUtilities.js +94 -0
  12. package/dist/cjs/spaceUtilities.js.map +7 -0
  13. package/dist/cjs/styled/index.d.js +27 -0
  14. package/dist/cjs/styled/index.d.js.map +7 -0
  15. package/dist/cjs/styled/index.js +105 -0
  16. package/dist/cjs/styled/index.js.map +7 -0
  17. package/dist/cjs/styled/styleGetters.js +56 -0
  18. package/dist/cjs/styled/styleGetters.js.map +7 -0
  19. package/dist/cjs/styled/types.js +35 -0
  20. package/dist/cjs/styled/types.js.map +7 -0
  21. package/dist/cjs/styled/utils.js +47 -0
  22. package/dist/cjs/styled/utils.js.map +7 -0
  23. package/dist/cjs/th.js +58 -0
  24. package/dist/cjs/th.js.map +7 -0
  25. package/dist/cjs/theme.js +36 -0
  26. package/dist/cjs/theme.js.map +7 -0
  27. package/dist/cjs/themeProviderHOC.js +54 -0
  28. package/dist/cjs/themeProviderHOC.js.map +7 -0
  29. package/dist/cjs/utils.js +294 -0
  30. package/dist/cjs/utils.js.map +7 -0
  31. package/{esm → dist/esm}/arithmetic.js +13 -25
  32. package/dist/esm/arithmetic.js.map +7 -0
  33. package/dist/esm/constants.js +18 -0
  34. package/dist/esm/constants.js.map +7 -0
  35. package/dist/esm/globalStyles.js +18 -0
  36. package/dist/esm/globalStyles.js.map +7 -0
  37. package/dist/esm/index.js +14 -0
  38. package/dist/esm/index.js.map +7 -0
  39. package/dist/esm/mobileUtilities.js +43 -0
  40. package/dist/esm/mobileUtilities.js.map +7 -0
  41. package/dist/esm/spaceUtilities.js +65 -0
  42. package/dist/esm/spaceUtilities.js.map +7 -0
  43. package/dist/esm/styled/index.d.js +2 -0
  44. package/dist/esm/styled/index.d.js.map +7 -0
  45. package/dist/esm/styled/index.js +78 -0
  46. package/dist/esm/styled/index.js.map +7 -0
  47. package/dist/esm/styled/styleGetters.js +27 -0
  48. package/dist/esm/styled/styleGetters.js.map +7 -0
  49. package/dist/esm/styled/types.js +6 -0
  50. package/dist/esm/styled/types.js.map +7 -0
  51. package/dist/esm/styled/utils.js +18 -0
  52. package/dist/esm/styled/utils.js.map +7 -0
  53. package/dist/esm/th.js +29 -0
  54. package/dist/esm/th.js.map +7 -0
  55. package/dist/esm/theme.js +7 -0
  56. package/dist/esm/theme.js.map +7 -0
  57. package/dist/esm/themeProviderHOC.js +27 -0
  58. package/dist/esm/themeProviderHOC.js.map +7 -0
  59. package/dist/esm/utils.js +265 -0
  60. package/dist/esm/utils.js.map +7 -0
  61. package/package.json +53 -44
  62. package/cjs/arithmetic.js +0 -43
  63. package/cjs/constants.js +0 -19
  64. package/cjs/globalStyles.js +0 -25
  65. package/cjs/index.js +0 -84
  66. package/cjs/mobileUtilities.js +0 -41
  67. package/cjs/spaceUtilities.js +0 -68
  68. package/cjs/styled/index.d.js +0 -2
  69. package/cjs/styled/index.js +0 -125
  70. package/cjs/styled/styleGetters.js +0 -44
  71. package/cjs/styled/types.js +0 -12
  72. package/cjs/styled/utils.js +0 -24
  73. package/cjs/th.js +0 -32
  74. package/cjs/theme.js +0 -9
  75. package/cjs/themeProviderHOC.js +0 -29
  76. package/cjs/utils.js +0 -184
  77. package/esm/constants.js +0 -13
  78. package/esm/globalStyles.js +0 -17
  79. package/esm/index.js +0 -11
  80. package/esm/mobileUtilities.js +0 -34
  81. package/esm/spaceUtilities.js +0 -57
  82. package/esm/styled/index.d.js +0 -1
  83. package/esm/styled/index.js +0 -116
  84. package/esm/styled/styleGetters.js +0 -38
  85. package/esm/styled/types.js +0 -1
  86. package/esm/styled/utils.js +0 -18
  87. package/esm/th.js +0 -28
  88. package/esm/theme.js +0 -5
  89. package/esm/themeProviderHOC.js +0 -20
  90. package/esm/utils.js +0 -136
  91. package/types/arithmetic.d.ts +0 -5
  92. package/types/constants.d.ts +0 -11
  93. package/types/globalStyles.d.ts +0 -1
  94. package/types/index.d.ts +0 -9
  95. package/types/mobileUtilities.d.ts +0 -4
  96. package/types/spaceUtilities.d.ts +0 -13
  97. package/types/styled/index.d.ts +0 -2
  98. package/types/styled/styleGetters.d.ts +0 -4
  99. package/types/styled/types.d.ts +0 -28
  100. package/types/styled/utils.d.ts +0 -6
  101. package/types/tests/arithmetic.test.d.ts +0 -1
  102. package/types/th.d.ts +0 -14
  103. package/types/theme.d.ts +0 -2
  104. package/types/themeProviderHOC.d.ts +0 -2
  105. package/types/utils.d.ts +0 -27
@@ -1,68 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/esnext.async-iterator.map.js');
6
- require('core-js/modules/esnext.iterator.map.js');
7
- require('core-js/modules/esnext.async-iterator.some.js');
8
- require('core-js/modules/esnext.iterator.constructor.js');
9
- require('core-js/modules/esnext.iterator.some.js');
10
- var lodash = require('lodash');
11
- var theme = require('./theme.js');
12
-
13
- function mapGap(gutter) {
14
- if (!gutter) return '0rem';
15
- if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;
16
- return "".concat(theme.theme.space[gutter]);
17
- }
18
- function mapGutter(gutter) {
19
- if (!gutter) return '0rem';
20
- return "".concat(theme.theme.space[gutter], " * 2");
21
- }
22
- function mapSpace(width) {
23
- if (typeof width === 'string') return lodash.get(theme.theme, width) ? "".concat(lodash.get(theme.theme, width)) : width;
24
- return "".concat(width * 100, "%");
25
- }
26
- function fixSpaceGutter(width, gutter) {
27
- if (!width) return '';
28
- if (Array.isArray(width)) return width.map(w => "calc(".concat(mapSpace(w), " - (").concat(mapGutter(gutter), "))"));
29
- return "calc(".concat(mapSpace(width), " - (").concat(mapGutter(gutter), "))");
30
- }
31
- function fixSpace(width) {
32
- if (!width) return '';
33
- if (Array.isArray(width)) return width.map(w => mapSpace(w));
34
- return mapSpace(width);
35
- }
36
- /**
37
- * Grid
38
- *
39
- * @param grid
40
- */
41
-
42
- function numbersToFr(grid) {
43
- const den = grid.map(f => f < 1 ? Math.floor(1 / f) : f);
44
- return den.map(d => "".concat(d, "fr"));
45
- }
46
- function mapGrid(width) {
47
- if (lodash.get(theme.theme, width)) return "".concat(lodash.get(theme.theme, width));
48
- if (typeof width === 'string') return width;
49
- const den = width < 1 ? Math.floor(1 / width) : width;
50
- return "".concat(den, "fr");
51
- }
52
- function mapTemplateGrid(grid) {
53
- if (Array.isArray(grid)) {
54
- if (grid.some(w => typeof w === 'string')) return grid.map(w => mapGrid(w));
55
- return numbersToFr(grid);
56
- }
57
-
58
- return mapGrid(grid);
59
- }
60
-
61
- exports.fixSpace = fixSpace;
62
- exports.fixSpaceGutter = fixSpaceGutter;
63
- exports.mapGap = mapGap;
64
- exports.mapGrid = mapGrid;
65
- exports.mapGutter = mapGutter;
66
- exports.mapSpace = mapSpace;
67
- exports.mapTemplateGrid = mapTemplateGrid;
68
- exports.numbersToFr = numbersToFr;
@@ -1,2 +0,0 @@
1
- 'use strict';
2
-
@@ -1,125 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
- require('core-js/modules/esnext.async-iterator.map.js');
7
- require('core-js/modules/esnext.iterator.map.js');
8
- require('core-js/modules/web.dom-collections.iterator.js');
9
- require('core-js/modules/esnext.async-iterator.reduce.js');
10
- require('core-js/modules/esnext.iterator.constructor.js');
11
- require('core-js/modules/esnext.iterator.reduce.js');
12
- require('core-js/modules/esnext.async-iterator.filter.js');
13
- require('core-js/modules/esnext.iterator.filter.js');
14
- require('core-js/modules/esnext.async-iterator.for-each.js');
15
- require('core-js/modules/esnext.iterator.for-each.js');
16
- var styled_component = require('styled-components');
17
- var styleGetters = require('./styleGetters.js');
18
- var utils = require('./utils.js');
19
-
20
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
21
-
22
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
23
- var styled_component__default = /*#__PURE__*/_interopDefaultLegacy(styled_component);
24
-
25
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
26
-
27
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
28
-
29
- const styledFunction = function (tag) {
30
- let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
31
- name: null,
32
- slot: null
33
- };
34
- const {
35
- name: componentName,
36
- slot: componentSlot,
37
- displayName: componentDisplayName = null
38
- } = options;
39
-
40
- const func = function (styleArg) {
41
- for (var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
42
- expressions[_key - 1] = arguments[_key];
43
- }
44
-
45
- /*
46
- * These are the internal expression written in dimsum
47
- * We just coerce with the default theme in case users
48
- * forget to add the ThemeProvider
49
- */
50
- const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => typeof stylesArg === 'function' ? props => stylesArg(_objectSpread(_objectSpread({}, props), {}, {
51
- theme: utils.coerceWithDefaultTheme(props.theme)
52
- })) : stylesArg) : [];
53
- let transformedStyleArg = styleArg;
54
- /*
55
- * Here we get the style overrides from the user
56
- */
57
-
58
- if (componentName && componentSlot) {
59
- expressionsWithDefaultTheme.push(props => {
60
- const theme = utils.coerceWithDefaultTheme(props.theme);
61
- const styleOverrides = styleGetters.getStyleOverrides(componentName, theme);
62
-
63
- if (styleOverrides) {
64
- return [styleOverrides[componentSlot]];
65
- }
66
-
67
- return null;
68
- });
69
- }
70
- /*
71
- * Here we get the variant overrides from the user (only for the root)
72
- */
73
-
74
-
75
- if (componentName && componentSlot === 'root') {
76
- expressionsWithDefaultTheme.push(props => {
77
- const theme = utils.coerceWithDefaultTheme(props.theme);
78
- return styleGetters.variantsResolver(props, styleGetters.getVariantStyles(componentName, theme), theme, componentName);
79
- });
80
- }
81
-
82
- const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
83
-
84
- if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
85
- // Here we are adding placeholders for all the new functions that we are gonna call
86
- const placeholders = new Array(numOfCustomFnsApplied).fill('');
87
- transformedStyleArg = Object.assign([...styleArg, ...placeholders], {
88
- raw: [...styleArg.raw, ...placeholders]
89
- });
90
- } else if (typeof styleArg === 'function') {
91
- // Here we just coerce with the default theme
92
- transformedStyleArg = props => styleArg(_objectSpread(_objectSpread({}, props), {}, {
93
- theme: utils.coerceWithDefaultTheme(props.theme)
94
- }));
95
- }
96
-
97
- let Component = /*#__PURE__*/styled_component__default["default"](tag);
98
- const displayName = componentName !== null && componentSlot !== null ? "".concat(componentName, "-").concat(componentSlot) : componentDisplayName;
99
-
100
- if (displayName !== null) {
101
- Component = Component.attrs({
102
- className: "".concat(componentName, "-").concat(componentSlot)
103
- });
104
- }
105
-
106
- Component = Component(transformedStyleArg, ...expressionsWithDefaultTheme);
107
-
108
- if (displayName !== null) {
109
- Component.displayName = displayName;
110
- }
111
-
112
- return Component;
113
- };
114
-
115
- return func;
116
- };
117
-
118
- const styledObject = Object.keys(styled_component__default["default"]).reduce((obj, key) => {
119
- const castedKey = key;
120
- obj[castedKey] = styledFunction(castedKey);
121
- return obj;
122
- }, {});
123
- const styled = Object.assign(styledFunction, styledObject);
124
-
125
- exports.styled = styled;
@@ -1,44 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/esnext.async-iterator.reduce.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.reduce.js');
8
- require('core-js/modules/esnext.async-iterator.every.js');
9
- require('core-js/modules/esnext.iterator.every.js');
10
- var utils = require('./utils.js');
11
-
12
- const getStyleOverrides = (name, theme) => {
13
- var _theme$components, _theme$components$nam;
14
-
15
- return ((_theme$components = theme.components) === null || _theme$components === void 0 ? void 0 : (_theme$components$nam = _theme$components[name]) === null || _theme$components$nam === void 0 ? void 0 : _theme$components$nam.styleOverrides) || null;
16
- };
17
- const getVariantStyles = (name, theme) => {
18
- var _theme$components2, _theme$components2$na;
19
-
20
- const variants = ((_theme$components2 = theme.components) === null || _theme$components2 === void 0 ? void 0 : (_theme$components2$na = _theme$components2[name]) === null || _theme$components2$na === void 0 ? void 0 : _theme$components2$na.variants) || [];
21
- return variants.reduce((styles, definition) => {
22
- const key = utils.propsToClassKey(definition.props);
23
- styles[key] = definition.style;
24
- return styles;
25
- }, {});
26
- };
27
- const variantsResolver = (props, styles, theme, name) => {
28
- var _theme$components3, _theme$components3$na;
29
-
30
- const themeVariants = (theme === null || theme === void 0 ? void 0 : (_theme$components3 = theme.components) === null || _theme$components3 === void 0 ? void 0 : (_theme$components3$na = _theme$components3[name]) === null || _theme$components3$na === void 0 ? void 0 : _theme$components3$na.variants) || [];
31
- return themeVariants.reduce((variantsStyles, themeVariant) => {
32
- const isMatch = Object.keys(themeVariant.props).every(key => props[key] === themeVariant.props[key]);
33
-
34
- if (isMatch) {
35
- variantsStyles.push(styles[utils.propsToClassKey(themeVariant.props)]);
36
- }
37
-
38
- return variantsStyles;
39
- }, []);
40
- };
41
-
42
- exports.getStyleOverrides = getStyleOverrides;
43
- exports.getVariantStyles = getVariantStyles;
44
- exports.variantsResolver = variantsResolver;
@@ -1,12 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var styled_component = require('styled-components');
6
-
7
-
8
-
9
- Object.defineProperty(exports, 'CSSObject', {
10
- enumerable: true,
11
- get: function () { return styled_component.CSSObject; }
12
- });
@@ -1,24 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/esnext.async-iterator.reduce.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.reduce.js');
8
- var dsUtilities = require('@elliemae/ds-utilities');
9
- var theme = require('../theme.js');
10
-
11
- const systemTheme = theme.theme;
12
- const isEmpty = string => string.length === 0;
13
- const coerceWithDefaultTheme = themeInput => themeInput !== null && themeInput !== void 0 ? themeInput : systemTheme;
14
- const propsToClassKey = props => Object.keys(props).sort().reduce((classKey, key) => {
15
- if (key === 'color') {
16
- return classKey + isEmpty(String(classKey)) ? String(props[key]) : dsUtilities.capitalize(String(props[key]));
17
- }
18
-
19
- return "".concat(classKey).concat(isEmpty(String(classKey)) ? key : dsUtilities.capitalize(key)).concat(dsUtilities.capitalize(props[key].toString()));
20
- }, '');
21
-
22
- exports.coerceWithDefaultTheme = coerceWithDefaultTheme;
23
- exports.isEmpty = isEmpty;
24
- exports.propsToClassKey = propsToClassKey;
package/cjs/th.js DELETED
@@ -1,32 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/esnext.async-iterator.for-each.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.for-each.js');
8
-
9
- const th = property => (value, dfault) => _ref => {
10
- var _result;
11
-
12
- let {
13
- theme
14
- } = _ref;
15
- const parts = value.split('-');
16
- let result = theme[property];
17
- parts.forEach(part => {
18
- if (result) result = result[part];
19
- });
20
- return (_result = result) !== null && _result !== void 0 ? _result : dfault;
21
- };
22
- th.space = th('space');
23
- th.fontSize = th('fontSizes');
24
- th.fontWeight = th('fontWeights');
25
- th.lineHeight = th('lineHeights');
26
- th.letterSpacing = th('letterSpacings');
27
- th.font = th('fonts');
28
- th.color = th('colors');
29
- th.breakpoint = th('breakpoints');
30
- th.media = th('media');
31
-
32
- exports.th = th;
package/cjs/theme.js DELETED
@@ -1,9 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var puiTheme = require('@elliemae/pui-theme');
6
-
7
- const theme = puiTheme.getDefaultTheme();
8
-
9
- exports.theme = theme;
@@ -1,29 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/esnext.async-iterator.filter.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.filter.js');
8
- require('core-js/modules/esnext.async-iterator.for-each.js');
9
- require('core-js/modules/esnext.iterator.for-each.js');
10
- var _jsx2 = require('@babel/runtime/helpers/jsx');
11
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
12
- require('react');
13
- var styled_component = require('styled-components');
14
- var theme = require('./theme.js');
15
- var jsxRuntime = require('react/jsx-runtime');
16
-
17
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
-
19
- var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
20
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
21
-
22
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
23
-
24
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
25
- const themeProviderHOC = Component => props => /*#__PURE__*/_jsx2__default["default"](styled_component.ThemeProvider, {
26
- theme: theme.theme
27
- }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)));
28
-
29
- exports.themeProviderHOC = themeProviderHOC;
package/cjs/utils.js DELETED
@@ -1,184 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var polished = require('polished');
6
- var lodash = require('lodash');
7
- var theme = require('./theme.js');
8
- var mobileUtilities = require('./mobileUtilities.js');
9
- var styled_component = require('styled-components');
10
-
11
- /* eslint-disable no-shadow */
12
- function truncate(width) {
13
- return props => styled_component.css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? "width: ".concat(props.width || width, ";") : '');
14
- }
15
- function flexCenter() {
16
- return "\n display: flex;\n justify-content: center;\n align-items: center;\n ";
17
- }
18
- function disabled() {
19
- return "\n cursor: not-allowed;\n pointer-events: none;\n ";
20
- }
21
- function keyframes(obj) {
22
- return styled_component.keyframes(["", ""], lodash.reduce(obj, (result, value, key) => "\n ".concat(result, "\n ").concat(key, "% {\n ").concat(value, "\n }\n "), ''));
23
- } // eslint-disable-next-line max-params
24
-
25
- function boxShadow(top, left, blur, color) {
26
- let inset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
27
- return "box-shadow: ".concat(inset ? 'inset' : '', " ").concat(top, " ").concat(left, " ").concat(blur, " ").concat(color, ";");
28
- }
29
- function color() {
30
- let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'neutral';
31
- let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 400;
32
- return styled_component.css(["color:", ";"], props => props.theme.colors[variant][type]);
33
- }
34
- function border() {
35
- let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.theme.colors.brand[600];
36
- let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1px';
37
- let type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'solid';
38
- return "".concat(size, " ").concat(type, " ").concat(color);
39
- }
40
- function animation(animationKeyframes, animationLength, animationTimingFn) {
41
- return props => styled_component.css(["animation:", " ", " ", ";"], props.animationKeyframes || animationKeyframes, props.animationLength || animationLength, props.animationTimingFn || animationTimingFn);
42
- } // 0.0769
43
-
44
- function focus() {
45
- let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.theme.colors.brand[600];
46
- return () => styled_component.css(["outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], color, polished.lighten(0.3, color));
47
- }
48
- function focusAfter(color) {
49
- return styled_component.css(["outline:none;position:relative;&:after{content:'';z-index:10;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;", "}"], focus(color));
50
- }
51
- function active() {
52
- return props => styled_component.css(["outline:none;border:1px solid ", ";border-radius:2px;"], props.theme.colors.brand[700]);
53
- }
54
- function hover() {
55
- return props => styled_component.css(["outline:1px solid ", ";outline-offset:-1px;"], props.theme.colors.brand[600]);
56
- }
57
- function textStyle(type) {
58
- let weight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'regular';
59
- // eslint-disable-next-line complexity
60
- return props => {
61
- let cssVar = "font-weight: ".concat(props.theme.fontWeights[weight], ";"); // eslint-disable-next-line default-case
62
-
63
- switch (type) {
64
- case 'h1':
65
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile('2.7692rem'), ";\n line-height: normal;\n ");
66
- break;
67
-
68
- case 'h2':
69
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[800]), ";\n line-height: normal;\n ");
70
- break;
71
-
72
- case 'h3':
73
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[700]), ";\n line-height: 1.2;\n ");
74
- break;
75
-
76
- case 'h4':
77
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[600]), ";\n line-height: normal;\n ");
78
- break;
79
-
80
- case 'h5':
81
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[500]), ";\n line-height: normal;\n ");
82
- break;
83
-
84
- case 'section-header':
85
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[500]), ";\n line-height: normal;\n text-transform: uppercase;\n ");
86
- break;
87
-
88
- case 'body':
89
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[400]), ";\n line-height: normal;\n ");
90
- break;
91
-
92
- case 'body-small':
93
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[300]), ";\n line-height: normal;\n ");
94
- break;
95
-
96
- case 'body-micro':
97
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.microText[200]), ";\n line-height: normal;\n ");
98
- break;
99
-
100
- case 'list':
101
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[400]), ";\n line-height: normal;\n ");
102
- break;
103
-
104
- case 'link':
105
- cssVar += "\n line-height: ".concat(props.theme.xl, ";\n color: ").concat(props.theme.colors.brand[600], ";\n cursor: pointer;\n ");
106
- break;
107
- }
108
-
109
- return cssVar;
110
- };
111
- }
112
- function iconColor() {
113
- let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'neutral';
114
- let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 400;
115
- return styled_component.css(["fill:", ";"], props => props.theme.colors[variant][type]);
116
- }
117
- function fakeBorder() {
118
- return styled_component.css(["box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.neutral[200]);
119
- }
120
- function fakeActive() {
121
- return styled_component.css(["outline:none;box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.brand[700]);
122
- }
123
- function clearFocus() {
124
- return "\n border: none;\n box-shadow: none;\n ";
125
- }
126
- function buttonLink() {
127
- return "\n background-color: transparent;\n border: 1px solid transparent;\n cursor: pointer;\n ";
128
- }
129
- function transition() {
130
- let t = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all 1s ease';
131
- return "\n transition: ".concat(t, ";\n ");
132
- }
133
- const onlySafariAndFirefox = styles => styled_component.css(["@media not all and (min-resolution:0.001dpcm){", "}@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles, styles);
134
- const onlySafari = styles => "\n @media not all and (min-resolution: 0.001dpcm) {\n ".concat(styles, "\n }\n ");
135
- const onlyFirefox = styles => "\n @media screen and (min--moz-device-pixel-ratio: 0) {\n ".concat(styles, "\n }\n ");
136
- 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");
137
-
138
- Object.defineProperty(exports, 'rgba', {
139
- enumerable: true,
140
- get: function () { return polished.rgba; }
141
- });
142
- Object.defineProperty(exports, 'createGlobalStyle', {
143
- enumerable: true,
144
- get: function () { return styled_component.createGlobalStyle; }
145
- });
146
- Object.defineProperty(exports, 'css', {
147
- enumerable: true,
148
- get: function () { return styled_component.css; }
149
- });
150
- Object.defineProperty(exports, 'kfrm', {
151
- enumerable: true,
152
- get: function () { return styled_component.keyframes; }
153
- });
154
- Object.defineProperty(exports, 'useTheme', {
155
- enumerable: true,
156
- get: function () { return styled_component.useTheme; }
157
- });
158
- Object.defineProperty(exports, 'withTheme', {
159
- enumerable: true,
160
- get: function () { return styled_component.withTheme; }
161
- });
162
- exports.active = active;
163
- exports.animation = animation;
164
- exports.border = border;
165
- exports.boxShadow = boxShadow;
166
- exports.buttonLink = buttonLink;
167
- exports.clearFocus = clearFocus;
168
- exports.color = color;
169
- exports.disabled = disabled;
170
- exports.fakeActive = fakeActive;
171
- exports.fakeBorder = fakeBorder;
172
- exports.flexCenter = flexCenter;
173
- exports.focus = focus;
174
- exports.focusAfter = focusAfter;
175
- exports.hover = hover;
176
- exports.iconColor = iconColor;
177
- exports.keyframes = keyframes;
178
- exports.onlyFirefox = onlyFirefox;
179
- exports.onlySafari = onlySafari;
180
- exports.onlySafariAndFirefox = onlySafariAndFirefox;
181
- exports.safariAndFirefoxBold = safariAndFirefoxBold;
182
- exports.textStyle = textStyle;
183
- exports.transition = transition;
184
- exports.truncate = truncate;
package/esm/constants.js DELETED
@@ -1,13 +0,0 @@
1
- const desktopBaseFont = 13;
2
- const mobileBaseFont = 16;
3
- const translateUnits = {
4
- '8px': '4px',
5
- '16px': '8px',
6
- '32px': '16px',
7
- '48px': '24px',
8
- '56px': '32px',
9
- '64px': '48px',
10
- '72px': '64px'
11
- };
12
-
13
- export { desktopBaseFont, mobileBaseFont, translateUnits };
@@ -1,17 +0,0 @@
1
- import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
- import 'polished';
3
- import 'lodash';
4
- import './theme.js';
5
- import 'core-js/modules/web.dom-collections.iterator.js';
6
- import 'react';
7
- import { createGlobalStyle } from 'styled-components';
8
-
9
- var _templateObject;
10
- 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 => {
11
- let {
12
- theme
13
- } = _ref;
14
- return theme.breakpoints.small;
15
- }, props => props.device === 'mobile' ? '16px' : '13px');
16
-
17
- export { GlobalStyles };
package/esm/index.js DELETED
@@ -1,11 +0,0 @@
1
- export { GlobalStyles } from './globalStyles.js';
2
- export { fixSpace, fixSpaceGutter, mapGap, mapGrid, mapGutter, mapSpace, mapTemplateGrid, numbersToFr } from './spaceUtilities.js';
3
- export { __UNSAFE_SPACE_TO_DIMSUM, isMobile, toMobile, useIsMobile } from './mobileUtilities.js';
4
- 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';
5
- export { getNumberAndUnit, op } from './arithmetic.js';
6
- export { th } from './th.js';
7
- export { theme } from './theme.js';
8
- export { styled } from './styled/index.js';
9
- export { themeProviderHOC } from './themeProviderHOC.js';
10
- export { createGlobalStyle, css, keyframes as kfrm, useTheme, withTheme } from 'styled-components';
11
- export { rgba } from 'polished';
@@ -1,34 +0,0 @@
1
- import 'core-js/modules/web.dom-collections.iterator.js';
2
- import { useState, useEffect } from 'react';
3
- import { theme } from './theme.js';
4
- import { translateUnits, mobileBaseFont, desktopBaseFont } from './constants.js';
5
-
6
- function __UNSAFE_SPACE_TO_DIMSUM(unit) {
7
- if (translateUnits[unit]) return translateUnits[unit];
8
- return "".concat(parseFloat(unit) * (mobileBaseFont / desktopBaseFont) / 2, "px");
9
- }
10
- function toMobile(unit) {
11
- if (!isMobile()) return unit;
12
- return "".concat(parseFloat(unit) * (desktopBaseFont / mobileBaseFont), "rem");
13
- }
14
- const useIsMobile = () => {
15
- const [mobile, setMobile] = useState(isMobile());
16
- useEffect(() => {
17
- function handleResize() {
18
- setMobile(isMobile());
19
- }
20
-
21
- if (window) window.addEventListener('resize', handleResize);
22
- return () => {
23
- if (window) window.removeEventListener('resize', handleResize);
24
- };
25
- }, []);
26
- if (!window) return false;
27
- return mobile;
28
- };
29
- const isMobile = () => {
30
- if (!window) return false;
31
- return Number(theme.breakpoints.medium.split('px')[0]) - window.innerWidth >= 0;
32
- };
33
-
34
- export { __UNSAFE_SPACE_TO_DIMSUM, isMobile, toMobile, useIsMobile };