@teamturing/react-kit 1.1.0
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/LICENSE +21 -0
- package/README.md +5 -0
- package/dist/core/Chip/index.d.ts +25 -0
- package/dist/core/GradientText/index.d.ts +287 -0
- package/dist/core/Grid/index.d.ts +25 -0
- package/dist/core/IconButton/index.d.ts +53 -0
- package/dist/core/IconToggleButton/index.d.ts +28 -0
- package/dist/core/ItemList/index.d.ts +10 -0
- package/dist/core/Space/index.d.ts +8 -0
- package/dist/core/Spinner/index.d.ts +487 -0
- package/dist/core/Stack/index.d.ts +19 -0
- package/dist/core/StyledIcon/index.d.ts +10 -0
- package/dist/core/Text/index.d.ts +10 -0
- package/dist/core/View/index.d.ts +8 -0
- package/dist/core/_UnstyledButton.d.ts +6 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.js +4010 -0
- package/dist/utils/forcePixelValue.d.ts +6 -0
- package/dist/utils/index.d.ts +3 -0
- package/dist/utils/isArray.d.ts +1 -0
- package/dist/utils/isNullable.d.ts +1 -0
- package/dist/utils/styled-system/index.d.ts +31 -0
- package/esm/_virtual/_commonjsHelpers.js +5 -0
- package/esm/_virtual/_rollupPluginBabelHelpers.js +16 -0
- package/esm/node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js +12 -0
- package/esm/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js +9 -0
- package/esm/node_modules/@emotion/unitless/dist/emotion-unitless.esm.js +51 -0
- package/esm/node_modules/@styled-system/background/dist/index.esm.js +16 -0
- package/esm/node_modules/@styled-system/border/dist/index.esm.js +131 -0
- package/esm/node_modules/@styled-system/color/dist/index.esm.js +17 -0
- package/esm/node_modules/@styled-system/core/dist/index.esm.js +178 -0
- package/esm/node_modules/@styled-system/css/dist/index.esm.js +209 -0
- package/esm/node_modules/@styled-system/flexbox/dist/index.esm.js +21 -0
- package/esm/node_modules/@styled-system/grid/dist/index.esm.js +34 -0
- package/esm/node_modules/@styled-system/layout/dist/index.esm.js +47 -0
- package/esm/node_modules/@styled-system/position/dist/index.esm.js +35 -0
- package/esm/node_modules/@styled-system/shadow/dist/index.esm.js +14 -0
- package/esm/node_modules/@styled-system/space/dist/index.esm.js +121 -0
- package/esm/node_modules/@styled-system/typography/dist/index.esm.js +33 -0
- package/esm/node_modules/@styled-system/variant/dist/index.esm.js +40 -0
- package/esm/node_modules/object-assign/index.js +83 -0
- package/esm/node_modules/styled-components/dist/styled-components.esm.js +657 -0
- package/esm/node_modules/styled-system/dist/index.esm.js +77 -0
- package/esm/node_modules/stylis/src/Enum.js +11 -0
- package/esm/node_modules/stylis/src/Middleware.js +85 -0
- package/esm/node_modules/stylis/src/Parser.js +187 -0
- package/esm/node_modules/stylis/src/Prefixer.js +197 -0
- package/esm/node_modules/stylis/src/Serializer.js +39 -0
- package/esm/node_modules/stylis/src/Tokenizer.js +242 -0
- package/esm/node_modules/stylis/src/Utility.js +128 -0
- package/esm/node_modules/tslib/tslib.es6.js +44 -0
- package/esm/packages/icons/src/ProgressGradient.js +41 -0
- package/esm/packages/react-kit/src/core/Chip/index.js +179 -0
- package/esm/packages/react-kit/src/core/GradientText/index.js +13 -0
- package/esm/packages/react-kit/src/core/Grid/index.js +106 -0
- package/esm/packages/react-kit/src/core/IconButton/index.js +212 -0
- package/esm/packages/react-kit/src/core/IconToggleButton/index.js +105 -0
- package/esm/packages/react-kit/src/core/ItemList/index.js +11 -0
- package/esm/packages/react-kit/src/core/Space/index.js +12 -0
- package/esm/packages/react-kit/src/core/Spinner/index.js +23 -0
- package/esm/packages/react-kit/src/core/Stack/index.js +57 -0
- package/esm/packages/react-kit/src/core/StyledIcon/index.js +20 -0
- package/esm/packages/react-kit/src/core/Text/index.js +49 -0
- package/esm/packages/react-kit/src/core/View/index.js +18 -0
- package/esm/packages/react-kit/src/core/_UnstyledButton.js +14 -0
- package/esm/packages/react-kit/src/index.js +12 -0
- package/esm/packages/react-kit/src/utils/forcePixelValue.js +8 -0
- package/esm/packages/react-kit/src/utils/isArray.js +3 -0
- package/esm/packages/react-kit/src/utils/isNullable.js +3 -0
- package/esm/packages/react-kit/src/utils/styled-system/index.js +27 -0
- package/esm/packages/token-studio/src/foundation/palette/index.js +90 -0
- package/esm/packages/token-studio/src/foundation/rounding/index.js +13 -0
- package/esm/packages/token-studio/src/foundation/spacing/index.js +56 -0
- package/esm/packages/token-studio/src/foundation/typography/fontSize/index.js +18 -0
- package/esm/packages/token-studio/src/foundation/typography/fontWeight/index.js +13 -0
- package/esm/packages/token-studio/src/foundation/typography/lineHeight/index.js +6 -0
- package/esm/packages/token-studio/src/token/color/index.js +140 -0
- package/esm/packages/token-studio/src/token/radii/index.js +15 -0
- package/esm/packages/token-studio/src/token/space/index.js +55 -0
- package/esm/packages/token-studio/src/token/typography/fontSizes.js +17 -0
- package/esm/packages/token-studio/src/token/typography/fontWeights.js +9 -0
- package/esm/packages/token-studio/src/token/typography/index.js +133 -0
- package/esm/packages/token-studio/src/token/typography/lineHeights.js +8 -0
- package/package.json +59 -0
- package/src/index.ts +12 -0
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
function _extends() {
|
|
2
|
+
_extends = Object.assign || function (target) {
|
|
3
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
4
|
+
var source = arguments[i];
|
|
5
|
+
for (var key in source) {
|
|
6
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
7
|
+
target[key] = source[key];
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
return target;
|
|
12
|
+
};
|
|
13
|
+
return _extends.apply(this, arguments);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// based on https://github.com/developit/dlv
|
|
17
|
+
var get = function get(obj, key, def, p, undef) {
|
|
18
|
+
key = key && key.split ? key.split('.') : [key];
|
|
19
|
+
for (p = 0; p < key.length; p++) {
|
|
20
|
+
obj = obj ? obj[key[p]] : undef;
|
|
21
|
+
}
|
|
22
|
+
return obj === undef ? def : obj;
|
|
23
|
+
};
|
|
24
|
+
var defaultBreakpoints = [40, 52, 64].map(function (n) {
|
|
25
|
+
return n + 'em';
|
|
26
|
+
});
|
|
27
|
+
var defaultTheme = {
|
|
28
|
+
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
|
|
29
|
+
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
|
|
30
|
+
};
|
|
31
|
+
var aliases = {
|
|
32
|
+
bg: 'backgroundColor',
|
|
33
|
+
m: 'margin',
|
|
34
|
+
mt: 'marginTop',
|
|
35
|
+
mr: 'marginRight',
|
|
36
|
+
mb: 'marginBottom',
|
|
37
|
+
ml: 'marginLeft',
|
|
38
|
+
mx: 'marginX',
|
|
39
|
+
my: 'marginY',
|
|
40
|
+
p: 'padding',
|
|
41
|
+
pt: 'paddingTop',
|
|
42
|
+
pr: 'paddingRight',
|
|
43
|
+
pb: 'paddingBottom',
|
|
44
|
+
pl: 'paddingLeft',
|
|
45
|
+
px: 'paddingX',
|
|
46
|
+
py: 'paddingY'
|
|
47
|
+
};
|
|
48
|
+
var multiples = {
|
|
49
|
+
marginX: ['marginLeft', 'marginRight'],
|
|
50
|
+
marginY: ['marginTop', 'marginBottom'],
|
|
51
|
+
paddingX: ['paddingLeft', 'paddingRight'],
|
|
52
|
+
paddingY: ['paddingTop', 'paddingBottom'],
|
|
53
|
+
size: ['width', 'height']
|
|
54
|
+
};
|
|
55
|
+
var scales = {
|
|
56
|
+
color: 'colors',
|
|
57
|
+
backgroundColor: 'colors',
|
|
58
|
+
borderColor: 'colors',
|
|
59
|
+
margin: 'space',
|
|
60
|
+
marginTop: 'space',
|
|
61
|
+
marginRight: 'space',
|
|
62
|
+
marginBottom: 'space',
|
|
63
|
+
marginLeft: 'space',
|
|
64
|
+
marginX: 'space',
|
|
65
|
+
marginY: 'space',
|
|
66
|
+
padding: 'space',
|
|
67
|
+
paddingTop: 'space',
|
|
68
|
+
paddingRight: 'space',
|
|
69
|
+
paddingBottom: 'space',
|
|
70
|
+
paddingLeft: 'space',
|
|
71
|
+
paddingX: 'space',
|
|
72
|
+
paddingY: 'space',
|
|
73
|
+
top: 'space',
|
|
74
|
+
right: 'space',
|
|
75
|
+
bottom: 'space',
|
|
76
|
+
left: 'space',
|
|
77
|
+
gridGap: 'space',
|
|
78
|
+
gridColumnGap: 'space',
|
|
79
|
+
gridRowGap: 'space',
|
|
80
|
+
gap: 'space',
|
|
81
|
+
columnGap: 'space',
|
|
82
|
+
rowGap: 'space',
|
|
83
|
+
fontFamily: 'fonts',
|
|
84
|
+
fontSize: 'fontSizes',
|
|
85
|
+
fontWeight: 'fontWeights',
|
|
86
|
+
lineHeight: 'lineHeights',
|
|
87
|
+
letterSpacing: 'letterSpacings',
|
|
88
|
+
border: 'borders',
|
|
89
|
+
borderTop: 'borders',
|
|
90
|
+
borderRight: 'borders',
|
|
91
|
+
borderBottom: 'borders',
|
|
92
|
+
borderLeft: 'borders',
|
|
93
|
+
borderWidth: 'borderWidths',
|
|
94
|
+
borderStyle: 'borderStyles',
|
|
95
|
+
borderRadius: 'radii',
|
|
96
|
+
borderTopRightRadius: 'radii',
|
|
97
|
+
borderTopLeftRadius: 'radii',
|
|
98
|
+
borderBottomRightRadius: 'radii',
|
|
99
|
+
borderBottomLeftRadius: 'radii',
|
|
100
|
+
borderTopWidth: 'borderWidths',
|
|
101
|
+
borderTopColor: 'colors',
|
|
102
|
+
borderTopStyle: 'borderStyles',
|
|
103
|
+
borderBottomWidth: 'borderWidths',
|
|
104
|
+
borderBottomColor: 'colors',
|
|
105
|
+
borderBottomStyle: 'borderStyles',
|
|
106
|
+
borderLeftWidth: 'borderWidths',
|
|
107
|
+
borderLeftColor: 'colors',
|
|
108
|
+
borderLeftStyle: 'borderStyles',
|
|
109
|
+
borderRightWidth: 'borderWidths',
|
|
110
|
+
borderRightColor: 'colors',
|
|
111
|
+
borderRightStyle: 'borderStyles',
|
|
112
|
+
outlineColor: 'colors',
|
|
113
|
+
boxShadow: 'shadows',
|
|
114
|
+
textShadow: 'shadows',
|
|
115
|
+
zIndex: 'zIndices',
|
|
116
|
+
width: 'sizes',
|
|
117
|
+
minWidth: 'sizes',
|
|
118
|
+
maxWidth: 'sizes',
|
|
119
|
+
height: 'sizes',
|
|
120
|
+
minHeight: 'sizes',
|
|
121
|
+
maxHeight: 'sizes',
|
|
122
|
+
flexBasis: 'sizes',
|
|
123
|
+
size: 'sizes',
|
|
124
|
+
// svg
|
|
125
|
+
fill: 'colors',
|
|
126
|
+
stroke: 'colors'
|
|
127
|
+
};
|
|
128
|
+
var positiveOrNegative = function positiveOrNegative(scale, value) {
|
|
129
|
+
if (typeof value !== 'number' || value >= 0) {
|
|
130
|
+
return get(scale, value, value);
|
|
131
|
+
}
|
|
132
|
+
var absolute = Math.abs(value);
|
|
133
|
+
var n = get(scale, absolute, absolute);
|
|
134
|
+
if (typeof n === 'string') return '-' + n;
|
|
135
|
+
return n * -1;
|
|
136
|
+
};
|
|
137
|
+
var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
|
|
138
|
+
var _extends2;
|
|
139
|
+
return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
|
|
140
|
+
}, {});
|
|
141
|
+
var responsive = function responsive(styles) {
|
|
142
|
+
return function (theme) {
|
|
143
|
+
var next = {};
|
|
144
|
+
var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
|
|
145
|
+
var mediaQueries = [null].concat(breakpoints.map(function (n) {
|
|
146
|
+
return "@media screen and (min-width: " + n + ")";
|
|
147
|
+
}));
|
|
148
|
+
for (var key in styles) {
|
|
149
|
+
var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
|
|
150
|
+
if (value == null) continue;
|
|
151
|
+
if (!Array.isArray(value)) {
|
|
152
|
+
next[key] = value;
|
|
153
|
+
continue;
|
|
154
|
+
}
|
|
155
|
+
for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
|
|
156
|
+
var media = mediaQueries[i];
|
|
157
|
+
if (!media) {
|
|
158
|
+
next[key] = value[i];
|
|
159
|
+
continue;
|
|
160
|
+
}
|
|
161
|
+
next[media] = next[media] || {};
|
|
162
|
+
if (value[i] == null) continue;
|
|
163
|
+
next[media][key] = value[i];
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
return next;
|
|
167
|
+
};
|
|
168
|
+
};
|
|
169
|
+
var css = function css(args) {
|
|
170
|
+
return function (props) {
|
|
171
|
+
if (props === void 0) {
|
|
172
|
+
props = {};
|
|
173
|
+
}
|
|
174
|
+
var theme = _extends({}, defaultTheme, {}, props.theme || props);
|
|
175
|
+
var result = {};
|
|
176
|
+
var obj = typeof args === 'function' ? args(theme) : args;
|
|
177
|
+
var styles = responsive(obj)(theme);
|
|
178
|
+
for (var key in styles) {
|
|
179
|
+
var x = styles[key];
|
|
180
|
+
var val = typeof x === 'function' ? x(theme) : x;
|
|
181
|
+
if (key === 'variant') {
|
|
182
|
+
var variant = css(get(theme, val))(theme);
|
|
183
|
+
result = _extends({}, result, {}, variant);
|
|
184
|
+
continue;
|
|
185
|
+
}
|
|
186
|
+
if (val && typeof val === 'object') {
|
|
187
|
+
result[key] = css(val)(theme);
|
|
188
|
+
continue;
|
|
189
|
+
}
|
|
190
|
+
var prop = get(aliases, key, key);
|
|
191
|
+
var scaleName = get(scales, prop);
|
|
192
|
+
var scale = get(theme, scaleName, get(theme, prop, {}));
|
|
193
|
+
var transform = get(transforms, prop, get);
|
|
194
|
+
var value = transform(scale, val, val);
|
|
195
|
+
if (multiples[prop]) {
|
|
196
|
+
var dirs = multiples[prop];
|
|
197
|
+
for (var i = 0; i < dirs.length; i++) {
|
|
198
|
+
result[dirs[i]] = value;
|
|
199
|
+
}
|
|
200
|
+
} else {
|
|
201
|
+
result[prop] = value;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
return result;
|
|
205
|
+
};
|
|
206
|
+
};
|
|
207
|
+
var css$1 = css;
|
|
208
|
+
|
|
209
|
+
export { css, css$1 as default, get, responsive };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { system } from '../../core/dist/index.esm.js';
|
|
2
|
+
|
|
3
|
+
var config = {
|
|
4
|
+
alignItems: true,
|
|
5
|
+
alignContent: true,
|
|
6
|
+
justifyItems: true,
|
|
7
|
+
justifyContent: true,
|
|
8
|
+
flexWrap: true,
|
|
9
|
+
flexDirection: true,
|
|
10
|
+
// item
|
|
11
|
+
flex: true,
|
|
12
|
+
flexGrow: true,
|
|
13
|
+
flexShrink: true,
|
|
14
|
+
flexBasis: true,
|
|
15
|
+
justifySelf: true,
|
|
16
|
+
alignSelf: true,
|
|
17
|
+
order: true
|
|
18
|
+
};
|
|
19
|
+
var flexbox = system(config);
|
|
20
|
+
|
|
21
|
+
export { flexbox as default, flexbox };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { system } from '../../core/dist/index.esm.js';
|
|
2
|
+
|
|
3
|
+
var defaults = {
|
|
4
|
+
space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
|
|
5
|
+
};
|
|
6
|
+
var config = {
|
|
7
|
+
gridGap: {
|
|
8
|
+
property: 'gridGap',
|
|
9
|
+
scale: 'space',
|
|
10
|
+
defaultScale: defaults.space
|
|
11
|
+
},
|
|
12
|
+
gridColumnGap: {
|
|
13
|
+
property: 'gridColumnGap',
|
|
14
|
+
scale: 'space',
|
|
15
|
+
defaultScale: defaults.space
|
|
16
|
+
},
|
|
17
|
+
gridRowGap: {
|
|
18
|
+
property: 'gridRowGap',
|
|
19
|
+
scale: 'space',
|
|
20
|
+
defaultScale: defaults.space
|
|
21
|
+
},
|
|
22
|
+
gridColumn: true,
|
|
23
|
+
gridRow: true,
|
|
24
|
+
gridAutoFlow: true,
|
|
25
|
+
gridAutoColumns: true,
|
|
26
|
+
gridAutoRows: true,
|
|
27
|
+
gridTemplateColumns: true,
|
|
28
|
+
gridTemplateRows: true,
|
|
29
|
+
gridTemplateAreas: true,
|
|
30
|
+
gridArea: true
|
|
31
|
+
};
|
|
32
|
+
var grid = system(config);
|
|
33
|
+
|
|
34
|
+
export { grid as default, grid };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { system, get } from '../../core/dist/index.esm.js';
|
|
2
|
+
|
|
3
|
+
var isNumber = function isNumber(n) {
|
|
4
|
+
return typeof n === 'number' && !isNaN(n);
|
|
5
|
+
};
|
|
6
|
+
var getWidth = function getWidth(n, scale) {
|
|
7
|
+
return get(scale, n, !isNumber(n) || n > 1 ? n : n * 100 + '%');
|
|
8
|
+
};
|
|
9
|
+
var config = {
|
|
10
|
+
width: {
|
|
11
|
+
property: 'width',
|
|
12
|
+
scale: 'sizes',
|
|
13
|
+
transform: getWidth
|
|
14
|
+
},
|
|
15
|
+
height: {
|
|
16
|
+
property: 'height',
|
|
17
|
+
scale: 'sizes'
|
|
18
|
+
},
|
|
19
|
+
minWidth: {
|
|
20
|
+
property: 'minWidth',
|
|
21
|
+
scale: 'sizes'
|
|
22
|
+
},
|
|
23
|
+
minHeight: {
|
|
24
|
+
property: 'minHeight',
|
|
25
|
+
scale: 'sizes'
|
|
26
|
+
},
|
|
27
|
+
maxWidth: {
|
|
28
|
+
property: 'maxWidth',
|
|
29
|
+
scale: 'sizes'
|
|
30
|
+
},
|
|
31
|
+
maxHeight: {
|
|
32
|
+
property: 'maxHeight',
|
|
33
|
+
scale: 'sizes'
|
|
34
|
+
},
|
|
35
|
+
size: {
|
|
36
|
+
properties: ['width', 'height'],
|
|
37
|
+
scale: 'sizes'
|
|
38
|
+
},
|
|
39
|
+
overflow: true,
|
|
40
|
+
overflowX: true,
|
|
41
|
+
overflowY: true,
|
|
42
|
+
display: true,
|
|
43
|
+
verticalAlign: true
|
|
44
|
+
};
|
|
45
|
+
var layout = system(config);
|
|
46
|
+
|
|
47
|
+
export { layout as default, layout };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { system } from '../../core/dist/index.esm.js';
|
|
2
|
+
|
|
3
|
+
var defaults = {
|
|
4
|
+
space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
|
|
5
|
+
};
|
|
6
|
+
var config = {
|
|
7
|
+
position: true,
|
|
8
|
+
zIndex: {
|
|
9
|
+
property: 'zIndex',
|
|
10
|
+
scale: 'zIndices'
|
|
11
|
+
},
|
|
12
|
+
top: {
|
|
13
|
+
property: 'top',
|
|
14
|
+
scale: 'space',
|
|
15
|
+
defaultScale: defaults.space
|
|
16
|
+
},
|
|
17
|
+
right: {
|
|
18
|
+
property: 'right',
|
|
19
|
+
scale: 'space',
|
|
20
|
+
defaultScale: defaults.space
|
|
21
|
+
},
|
|
22
|
+
bottom: {
|
|
23
|
+
property: 'bottom',
|
|
24
|
+
scale: 'space',
|
|
25
|
+
defaultScale: defaults.space
|
|
26
|
+
},
|
|
27
|
+
left: {
|
|
28
|
+
property: 'left',
|
|
29
|
+
scale: 'space',
|
|
30
|
+
defaultScale: defaults.space
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
var position = system(config);
|
|
34
|
+
|
|
35
|
+
export { position as default, position };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { system } from '../../core/dist/index.esm.js';
|
|
2
|
+
|
|
3
|
+
var shadow = system({
|
|
4
|
+
boxShadow: {
|
|
5
|
+
property: 'boxShadow',
|
|
6
|
+
scale: 'shadows'
|
|
7
|
+
},
|
|
8
|
+
textShadow: {
|
|
9
|
+
property: 'textShadow',
|
|
10
|
+
scale: 'shadows'
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
export { shadow as default, shadow };
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { system, compose, get } from '../../core/dist/index.esm.js';
|
|
2
|
+
|
|
3
|
+
var defaults = {
|
|
4
|
+
space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
|
|
5
|
+
};
|
|
6
|
+
var isNumber = function isNumber(n) {
|
|
7
|
+
return typeof n === 'number' && !isNaN(n);
|
|
8
|
+
};
|
|
9
|
+
var getMargin = function getMargin(n, scale) {
|
|
10
|
+
if (!isNumber(n)) {
|
|
11
|
+
return get(scale, n, n);
|
|
12
|
+
}
|
|
13
|
+
var isNegative = n < 0;
|
|
14
|
+
var absolute = Math.abs(n);
|
|
15
|
+
var value = get(scale, absolute, absolute);
|
|
16
|
+
if (!isNumber(value)) {
|
|
17
|
+
return isNegative ? '-' + value : value;
|
|
18
|
+
}
|
|
19
|
+
return value * (isNegative ? -1 : 1);
|
|
20
|
+
};
|
|
21
|
+
var configs = {};
|
|
22
|
+
configs.margin = {
|
|
23
|
+
margin: {
|
|
24
|
+
property: 'margin',
|
|
25
|
+
scale: 'space',
|
|
26
|
+
transform: getMargin,
|
|
27
|
+
defaultScale: defaults.space
|
|
28
|
+
},
|
|
29
|
+
marginTop: {
|
|
30
|
+
property: 'marginTop',
|
|
31
|
+
scale: 'space',
|
|
32
|
+
transform: getMargin,
|
|
33
|
+
defaultScale: defaults.space
|
|
34
|
+
},
|
|
35
|
+
marginRight: {
|
|
36
|
+
property: 'marginRight',
|
|
37
|
+
scale: 'space',
|
|
38
|
+
transform: getMargin,
|
|
39
|
+
defaultScale: defaults.space
|
|
40
|
+
},
|
|
41
|
+
marginBottom: {
|
|
42
|
+
property: 'marginBottom',
|
|
43
|
+
scale: 'space',
|
|
44
|
+
transform: getMargin,
|
|
45
|
+
defaultScale: defaults.space
|
|
46
|
+
},
|
|
47
|
+
marginLeft: {
|
|
48
|
+
property: 'marginLeft',
|
|
49
|
+
scale: 'space',
|
|
50
|
+
transform: getMargin,
|
|
51
|
+
defaultScale: defaults.space
|
|
52
|
+
},
|
|
53
|
+
marginX: {
|
|
54
|
+
properties: ['marginLeft', 'marginRight'],
|
|
55
|
+
scale: 'space',
|
|
56
|
+
transform: getMargin,
|
|
57
|
+
defaultScale: defaults.space
|
|
58
|
+
},
|
|
59
|
+
marginY: {
|
|
60
|
+
properties: ['marginTop', 'marginBottom'],
|
|
61
|
+
scale: 'space',
|
|
62
|
+
transform: getMargin,
|
|
63
|
+
defaultScale: defaults.space
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
configs.margin.m = configs.margin.margin;
|
|
67
|
+
configs.margin.mt = configs.margin.marginTop;
|
|
68
|
+
configs.margin.mr = configs.margin.marginRight;
|
|
69
|
+
configs.margin.mb = configs.margin.marginBottom;
|
|
70
|
+
configs.margin.ml = configs.margin.marginLeft;
|
|
71
|
+
configs.margin.mx = configs.margin.marginX;
|
|
72
|
+
configs.margin.my = configs.margin.marginY;
|
|
73
|
+
configs.padding = {
|
|
74
|
+
padding: {
|
|
75
|
+
property: 'padding',
|
|
76
|
+
scale: 'space',
|
|
77
|
+
defaultScale: defaults.space
|
|
78
|
+
},
|
|
79
|
+
paddingTop: {
|
|
80
|
+
property: 'paddingTop',
|
|
81
|
+
scale: 'space',
|
|
82
|
+
defaultScale: defaults.space
|
|
83
|
+
},
|
|
84
|
+
paddingRight: {
|
|
85
|
+
property: 'paddingRight',
|
|
86
|
+
scale: 'space',
|
|
87
|
+
defaultScale: defaults.space
|
|
88
|
+
},
|
|
89
|
+
paddingBottom: {
|
|
90
|
+
property: 'paddingBottom',
|
|
91
|
+
scale: 'space',
|
|
92
|
+
defaultScale: defaults.space
|
|
93
|
+
},
|
|
94
|
+
paddingLeft: {
|
|
95
|
+
property: 'paddingLeft',
|
|
96
|
+
scale: 'space',
|
|
97
|
+
defaultScale: defaults.space
|
|
98
|
+
},
|
|
99
|
+
paddingX: {
|
|
100
|
+
properties: ['paddingLeft', 'paddingRight'],
|
|
101
|
+
scale: 'space',
|
|
102
|
+
defaultScale: defaults.space
|
|
103
|
+
},
|
|
104
|
+
paddingY: {
|
|
105
|
+
properties: ['paddingTop', 'paddingBottom'],
|
|
106
|
+
scale: 'space',
|
|
107
|
+
defaultScale: defaults.space
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
configs.padding.p = configs.padding.padding;
|
|
111
|
+
configs.padding.pt = configs.padding.paddingTop;
|
|
112
|
+
configs.padding.pr = configs.padding.paddingRight;
|
|
113
|
+
configs.padding.pb = configs.padding.paddingBottom;
|
|
114
|
+
configs.padding.pl = configs.padding.paddingLeft;
|
|
115
|
+
configs.padding.px = configs.padding.paddingX;
|
|
116
|
+
configs.padding.py = configs.padding.paddingY;
|
|
117
|
+
var margin = system(configs.margin);
|
|
118
|
+
var padding = system(configs.padding);
|
|
119
|
+
var space = compose(margin, padding);
|
|
120
|
+
|
|
121
|
+
export { space as default, margin, padding, space };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { system } from '../../core/dist/index.esm.js';
|
|
2
|
+
|
|
3
|
+
var defaults = {
|
|
4
|
+
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
|
|
5
|
+
};
|
|
6
|
+
var config = {
|
|
7
|
+
fontFamily: {
|
|
8
|
+
property: 'fontFamily',
|
|
9
|
+
scale: 'fonts'
|
|
10
|
+
},
|
|
11
|
+
fontSize: {
|
|
12
|
+
property: 'fontSize',
|
|
13
|
+
scale: 'fontSizes',
|
|
14
|
+
defaultScale: defaults.fontSizes
|
|
15
|
+
},
|
|
16
|
+
fontWeight: {
|
|
17
|
+
property: 'fontWeight',
|
|
18
|
+
scale: 'fontWeights'
|
|
19
|
+
},
|
|
20
|
+
lineHeight: {
|
|
21
|
+
property: 'lineHeight',
|
|
22
|
+
scale: 'lineHeights'
|
|
23
|
+
},
|
|
24
|
+
letterSpacing: {
|
|
25
|
+
property: 'letterSpacing',
|
|
26
|
+
scale: 'letterSpacings'
|
|
27
|
+
},
|
|
28
|
+
textAlign: true,
|
|
29
|
+
fontStyle: true
|
|
30
|
+
};
|
|
31
|
+
var typography = system(config);
|
|
32
|
+
|
|
33
|
+
export { typography as default, typography };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { createParser, get } from '../../core/dist/index.esm.js';
|
|
2
|
+
import css from '../../css/dist/index.esm.js';
|
|
3
|
+
|
|
4
|
+
var variant = function variant(_ref) {
|
|
5
|
+
var _config;
|
|
6
|
+
var scale = _ref.scale,
|
|
7
|
+
_ref$prop = _ref.prop,
|
|
8
|
+
prop = _ref$prop === void 0 ? 'variant' : _ref$prop,
|
|
9
|
+
_ref$variants = _ref.variants,
|
|
10
|
+
variants = _ref$variants === void 0 ? {} : _ref$variants,
|
|
11
|
+
key = _ref.key;
|
|
12
|
+
var sx;
|
|
13
|
+
if (Object.keys(variants).length) {
|
|
14
|
+
sx = function sx(value, scale, props) {
|
|
15
|
+
return css(get(scale, value, null))(props.theme);
|
|
16
|
+
};
|
|
17
|
+
} else {
|
|
18
|
+
sx = function sx(value, scale) {
|
|
19
|
+
return get(scale, value, null);
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
sx.scale = scale || key;
|
|
23
|
+
sx.defaults = variants;
|
|
24
|
+
var config = (_config = {}, _config[prop] = sx, _config);
|
|
25
|
+
var parser = createParser(config);
|
|
26
|
+
return parser;
|
|
27
|
+
};
|
|
28
|
+
variant({
|
|
29
|
+
key: 'buttons'
|
|
30
|
+
});
|
|
31
|
+
variant({
|
|
32
|
+
key: 'textStyles',
|
|
33
|
+
prop: 'textStyle'
|
|
34
|
+
});
|
|
35
|
+
variant({
|
|
36
|
+
key: 'colorStyles',
|
|
37
|
+
prop: 'colors'
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
export { variant as default, variant };
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { getDefaultExportFromCjs } from '../../_virtual/_commonjsHelpers.js';
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
object-assign
|
|
5
|
+
(c) Sindre Sorhus
|
|
6
|
+
@license MIT
|
|
7
|
+
*/
|
|
8
|
+
/* eslint-disable no-unused-vars */
|
|
9
|
+
var getOwnPropertySymbols = Object.getOwnPropertySymbols;
|
|
10
|
+
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
11
|
+
var propIsEnumerable = Object.prototype.propertyIsEnumerable;
|
|
12
|
+
function toObject(val) {
|
|
13
|
+
if (val === null || val === undefined) {
|
|
14
|
+
throw new TypeError('Object.assign cannot be called with null or undefined');
|
|
15
|
+
}
|
|
16
|
+
return Object(val);
|
|
17
|
+
}
|
|
18
|
+
function shouldUseNative() {
|
|
19
|
+
try {
|
|
20
|
+
if (!Object.assign) {
|
|
21
|
+
return false;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// Detect buggy property enumeration order in older V8 versions.
|
|
25
|
+
|
|
26
|
+
// https://bugs.chromium.org/p/v8/issues/detail?id=4118
|
|
27
|
+
var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
|
|
28
|
+
test1[5] = 'de';
|
|
29
|
+
if (Object.getOwnPropertyNames(test1)[0] === '5') {
|
|
30
|
+
return false;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// https://bugs.chromium.org/p/v8/issues/detail?id=3056
|
|
34
|
+
var test2 = {};
|
|
35
|
+
for (var i = 0; i < 10; i++) {
|
|
36
|
+
test2['_' + String.fromCharCode(i)] = i;
|
|
37
|
+
}
|
|
38
|
+
var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
|
|
39
|
+
return test2[n];
|
|
40
|
+
});
|
|
41
|
+
if (order2.join('') !== '0123456789') {
|
|
42
|
+
return false;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// https://bugs.chromium.org/p/v8/issues/detail?id=3056
|
|
46
|
+
var test3 = {};
|
|
47
|
+
'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
|
|
48
|
+
test3[letter] = letter;
|
|
49
|
+
});
|
|
50
|
+
if (Object.keys(Object.assign({}, test3)).join('') !== 'abcdefghijklmnopqrst') {
|
|
51
|
+
return false;
|
|
52
|
+
}
|
|
53
|
+
return true;
|
|
54
|
+
} catch (err) {
|
|
55
|
+
// We don't expect any of the above to throw, but better to be safe.
|
|
56
|
+
return false;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
|
|
60
|
+
var from;
|
|
61
|
+
var to = toObject(target);
|
|
62
|
+
var symbols;
|
|
63
|
+
for (var s = 1; s < arguments.length; s++) {
|
|
64
|
+
from = Object(arguments[s]);
|
|
65
|
+
for (var key in from) {
|
|
66
|
+
if (hasOwnProperty.call(from, key)) {
|
|
67
|
+
to[key] = from[key];
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
if (getOwnPropertySymbols) {
|
|
71
|
+
symbols = getOwnPropertySymbols(from);
|
|
72
|
+
for (var i = 0; i < symbols.length; i++) {
|
|
73
|
+
if (propIsEnumerable.call(from, symbols[i])) {
|
|
74
|
+
to[symbols[i]] = from[symbols[i]];
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
return to;
|
|
80
|
+
};
|
|
81
|
+
var assign = /*@__PURE__*/getDefaultExportFromCjs(objectAssign);
|
|
82
|
+
|
|
83
|
+
export { assign as default };
|