@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.
- package/dist/cjs/arithmetic.js +55 -0
- package/dist/cjs/arithmetic.js.map +7 -0
- package/dist/cjs/constants.js +47 -0
- package/dist/cjs/constants.js.map +7 -0
- package/dist/cjs/globalStyles.js +47 -0
- package/dist/cjs/globalStyles.js.map +7 -0
- package/dist/cjs/index.js +43 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/mobileUtilities.js +72 -0
- package/dist/cjs/mobileUtilities.js.map +7 -0
- package/dist/cjs/spaceUtilities.js +94 -0
- package/dist/cjs/spaceUtilities.js.map +7 -0
- package/dist/cjs/styled/index.d.js +27 -0
- package/dist/cjs/styled/index.d.js.map +7 -0
- package/dist/cjs/styled/index.js +105 -0
- package/dist/cjs/styled/index.js.map +7 -0
- package/dist/cjs/styled/styleGetters.js +56 -0
- package/dist/cjs/styled/styleGetters.js.map +7 -0
- package/dist/cjs/styled/types.js +35 -0
- package/dist/cjs/styled/types.js.map +7 -0
- package/dist/cjs/styled/utils.js +47 -0
- package/dist/cjs/styled/utils.js.map +7 -0
- package/dist/cjs/th.js +58 -0
- package/dist/cjs/th.js.map +7 -0
- package/dist/cjs/theme.js +36 -0
- package/dist/cjs/theme.js.map +7 -0
- package/dist/cjs/themeProviderHOC.js +54 -0
- package/dist/cjs/themeProviderHOC.js.map +7 -0
- package/dist/cjs/utils.js +294 -0
- package/dist/cjs/utils.js.map +7 -0
- package/{esm → dist/esm}/arithmetic.js +13 -25
- package/dist/esm/arithmetic.js.map +7 -0
- package/dist/esm/constants.js +18 -0
- package/dist/esm/constants.js.map +7 -0
- package/dist/esm/globalStyles.js +18 -0
- package/dist/esm/globalStyles.js.map +7 -0
- package/dist/esm/index.js +14 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/mobileUtilities.js +43 -0
- package/dist/esm/mobileUtilities.js.map +7 -0
- package/dist/esm/spaceUtilities.js +65 -0
- package/dist/esm/spaceUtilities.js.map +7 -0
- package/dist/esm/styled/index.d.js +2 -0
- package/dist/esm/styled/index.d.js.map +7 -0
- package/dist/esm/styled/index.js +78 -0
- package/dist/esm/styled/index.js.map +7 -0
- package/dist/esm/styled/styleGetters.js +27 -0
- package/dist/esm/styled/styleGetters.js.map +7 -0
- package/dist/esm/styled/types.js +6 -0
- package/dist/esm/styled/types.js.map +7 -0
- package/dist/esm/styled/utils.js +18 -0
- package/dist/esm/styled/utils.js.map +7 -0
- package/dist/esm/th.js +29 -0
- package/dist/esm/th.js.map +7 -0
- package/dist/esm/theme.js +7 -0
- package/dist/esm/theme.js.map +7 -0
- package/dist/esm/themeProviderHOC.js +27 -0
- package/dist/esm/themeProviderHOC.js.map +7 -0
- package/dist/esm/utils.js +265 -0
- package/dist/esm/utils.js.map +7 -0
- package/package.json +53 -44
- package/cjs/arithmetic.js +0 -43
- package/cjs/constants.js +0 -19
- package/cjs/globalStyles.js +0 -25
- package/cjs/index.js +0 -84
- package/cjs/mobileUtilities.js +0 -41
- package/cjs/spaceUtilities.js +0 -68
- package/cjs/styled/index.d.js +0 -2
- package/cjs/styled/index.js +0 -125
- package/cjs/styled/styleGetters.js +0 -44
- package/cjs/styled/types.js +0 -12
- package/cjs/styled/utils.js +0 -24
- package/cjs/th.js +0 -32
- package/cjs/theme.js +0 -9
- package/cjs/themeProviderHOC.js +0 -29
- package/cjs/utils.js +0 -184
- package/esm/constants.js +0 -13
- package/esm/globalStyles.js +0 -17
- package/esm/index.js +0 -11
- package/esm/mobileUtilities.js +0 -34
- package/esm/spaceUtilities.js +0 -57
- package/esm/styled/index.d.js +0 -1
- package/esm/styled/index.js +0 -116
- package/esm/styled/styleGetters.js +0 -38
- package/esm/styled/types.js +0 -1
- package/esm/styled/utils.js +0 -18
- package/esm/th.js +0 -28
- package/esm/theme.js +0 -5
- package/esm/themeProviderHOC.js +0 -20
- package/esm/utils.js +0 -136
- package/types/arithmetic.d.ts +0 -5
- package/types/constants.d.ts +0 -11
- package/types/globalStyles.d.ts +0 -1
- package/types/index.d.ts +0 -9
- package/types/mobileUtilities.d.ts +0 -4
- package/types/spaceUtilities.d.ts +0 -13
- package/types/styled/index.d.ts +0 -2
- package/types/styled/styleGetters.d.ts +0 -4
- package/types/styled/types.d.ts +0 -28
- package/types/styled/utils.d.ts +0 -6
- package/types/tests/arithmetic.test.d.ts +0 -1
- package/types/th.d.ts +0 -14
- package/types/theme.d.ts +0 -2
- package/types/themeProviderHOC.d.ts +0 -2
- package/types/utils.d.ts +0 -27
package/cjs/spaceUtilities.js
DELETED
|
@@ -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;
|
package/cjs/styled/index.d.js
DELETED
package/cjs/styled/index.js
DELETED
|
@@ -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;
|
package/cjs/styled/types.js
DELETED
|
@@ -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
|
-
});
|
package/cjs/styled/utils.js
DELETED
|
@@ -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
package/cjs/themeProviderHOC.js
DELETED
|
@@ -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 };
|
package/esm/globalStyles.js
DELETED
|
@@ -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';
|
package/esm/mobileUtilities.js
DELETED
|
@@ -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 };
|