@marigold/system 0.3.2 → 0.5.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/CHANGELOG.md +19 -0
- package/dist/index.d.ts +371 -8
- package/dist/index.js +426 -5
- package/dist/index.mjs +387 -0
- package/package.json +32 -7
- package/dist/Box.d.ts +0 -14
- package/dist/Global.d.ts +0 -2
- package/dist/SVG.d.ts +0 -6
- package/dist/SVG.stories.d.ts +0 -5
- package/dist/normalize.d.ts +0 -144
- package/dist/system.cjs.development.js +0 -409
- package/dist/system.cjs.development.js.map +0 -1
- package/dist/system.cjs.production.min.js +0 -2
- package/dist/system.cjs.production.min.js.map +0 -1
- package/dist/system.esm.js +0 -392
- package/dist/system.esm.js.map +0 -1
- package/dist/theme.d.ts +0 -136
- package/dist/types.d.ts +0 -8
- package/dist/useTheme.d.ts +0 -16
- package/dist/variant.d.ts +0 -29
- package/src/Box.test.tsx +0 -308
- package/src/Box.tsx +0 -199
- package/src/Global.test.tsx +0 -57
- package/src/Global.tsx +0 -34
- package/src/SVG.stories.tsx +0 -48
- package/src/SVG.test.tsx +0 -82
- package/src/SVG.tsx +0 -24
- package/src/index.ts +0 -8
- package/src/normalize.test.tsx +0 -15
- package/src/normalize.ts +0 -100
- package/src/theme.ts +0 -157
- package/src/types.ts +0 -14
- package/src/useTheme.test.tsx +0 -123
- package/src/useTheme.tsx +0 -50
- package/src/variant.test.ts +0 -93
- package/src/variant.ts +0 -54
- package/tsconfig.build.json +0 -3
package/dist/system.esm.js
DELETED
|
@@ -1,392 +0,0 @@
|
|
|
1
|
-
import { jsx, ThemeProvider as ThemeProvider$1, Global as Global$1 } from '@emotion/react';
|
|
2
|
-
import { css as css$1 } from '@theme-ui/css';
|
|
3
|
-
import React, { forwardRef, useContext, useCallback, createContext } from 'react';
|
|
4
|
-
import { getNormalizedStyles as getNormalizedStyles$1 } from '@marigold/system';
|
|
5
|
-
|
|
6
|
-
function _extends() {
|
|
7
|
-
_extends = Object.assign || function (target) {
|
|
8
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
9
|
-
var source = arguments[i];
|
|
10
|
-
|
|
11
|
-
for (var key in source) {
|
|
12
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
13
|
-
target[key] = source[key];
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
return _extends.apply(this, arguments);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
25
|
-
if (source == null) return {};
|
|
26
|
-
var target = {};
|
|
27
|
-
var sourceKeys = Object.keys(source);
|
|
28
|
-
var key, i;
|
|
29
|
-
|
|
30
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
31
|
-
key = sourceKeys[i];
|
|
32
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
33
|
-
target[key] = source[key];
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
return target;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
var base = {
|
|
40
|
-
boxSizing: 'border-box',
|
|
41
|
-
margin: 0,
|
|
42
|
-
minWidth: 0
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
var a = /*#__PURE__*/_extends({}, base, {
|
|
46
|
-
textDecoration: 'none'
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
var text = /*#__PURE__*/_extends({}, base, {
|
|
50
|
-
overflowWrap: 'break-word'
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
var media = /*#__PURE__*/_extends({}, base, {
|
|
54
|
-
display: 'block',
|
|
55
|
-
maxWidth: '100%'
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
var button = /*#__PURE__*/_extends({}, base, {
|
|
59
|
-
display: 'block',
|
|
60
|
-
appearance: 'none',
|
|
61
|
-
font: 'inherit',
|
|
62
|
-
background: 'transparent',
|
|
63
|
-
textAlign: 'center'
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
var input = /*#__PURE__*/_extends({}, base, {
|
|
67
|
-
display: 'block',
|
|
68
|
-
appearance: 'none',
|
|
69
|
-
font: 'inherit',
|
|
70
|
-
'&::-ms-clear': {
|
|
71
|
-
display: 'none'
|
|
72
|
-
},
|
|
73
|
-
'&::-webkit-search-cancel-button': {
|
|
74
|
-
WebkitAppearance: 'none'
|
|
75
|
-
}
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
var select = /*#__PURE__*/_extends({}, base, {
|
|
79
|
-
display: 'block',
|
|
80
|
-
appearance: 'none',
|
|
81
|
-
font: 'inherit',
|
|
82
|
-
'&::-ms-expand': {
|
|
83
|
-
display: 'none'
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
|
|
87
|
-
var textarea = /*#__PURE__*/_extends({}, base, {
|
|
88
|
-
display: 'block',
|
|
89
|
-
appearance: 'none',
|
|
90
|
-
font: 'inherit'
|
|
91
|
-
}); // Normalize
|
|
92
|
-
// ---------------
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
var normalize = {
|
|
96
|
-
base: base,
|
|
97
|
-
a: a,
|
|
98
|
-
p: text,
|
|
99
|
-
h1: text,
|
|
100
|
-
h2: text,
|
|
101
|
-
h3: text,
|
|
102
|
-
h4: text,
|
|
103
|
-
h5: text,
|
|
104
|
-
h6: text,
|
|
105
|
-
img: media,
|
|
106
|
-
picture: media,
|
|
107
|
-
video: media,
|
|
108
|
-
canvas: media,
|
|
109
|
-
svg: media,
|
|
110
|
-
select: select,
|
|
111
|
-
button: button,
|
|
112
|
-
textarea: textarea,
|
|
113
|
-
input: input
|
|
114
|
-
};
|
|
115
|
-
/**
|
|
116
|
-
* Type-safe helper to get normalization. If no normalization is found,
|
|
117
|
-
* returns the *base* normalization.
|
|
118
|
-
*/
|
|
119
|
-
|
|
120
|
-
var getNormalizedStyles = function getNormalizedStyles(val) {
|
|
121
|
-
return typeof val === 'string' && val in normalize ? normalize[val] // Typescript doesn't infer this correctly
|
|
122
|
-
: normalize.base;
|
|
123
|
-
};
|
|
124
|
-
|
|
125
|
-
var _excluded = ["disabled"];
|
|
126
|
-
|
|
127
|
-
var isNil = function isNil(value) {
|
|
128
|
-
return value === null || value === undefined;
|
|
129
|
-
};
|
|
130
|
-
/**
|
|
131
|
-
* Ensures that the `val` is an array. Will return an empty array if `val` is falsy.
|
|
132
|
-
*/
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
var ensureArray = function ensureArray(val) {
|
|
136
|
-
return isNil(val) ? [] : Array.isArray(val) ? val : [val];
|
|
137
|
-
};
|
|
138
|
-
/**
|
|
139
|
-
* Removes trailing dot from variant, if necessary. This is necessary to support
|
|
140
|
-
* `__default` styles. See https://github.com/system-ui/theme-ui/pull/951
|
|
141
|
-
*/
|
|
142
|
-
|
|
143
|
-
var ensureVariantDefault = function ensureVariantDefault(val) {
|
|
144
|
-
return val.replace(/\.$/, '');
|
|
145
|
-
};
|
|
146
|
-
/**
|
|
147
|
-
* Ensures that the `variant` is an array and supports the `__default` key.
|
|
148
|
-
*/
|
|
149
|
-
|
|
150
|
-
var ensureArrayVariant = function ensureArrayVariant(variant) {
|
|
151
|
-
return ensureArray(variant).map(ensureVariantDefault);
|
|
152
|
-
};
|
|
153
|
-
/**
|
|
154
|
-
* Appends given `state` to a `variant`.
|
|
155
|
-
*/
|
|
156
|
-
|
|
157
|
-
var appendVariantState = function appendVariantState(variant, state) {
|
|
158
|
-
return ensureVariantDefault(variant) + ".:" + state;
|
|
159
|
-
};
|
|
160
|
-
/**
|
|
161
|
-
* Create a variant array from a `variant` and `state` containing
|
|
162
|
-
* passed states, if they are truthy.
|
|
163
|
-
*/
|
|
164
|
-
|
|
165
|
-
var conditional = function conditional(variant, _ref) {
|
|
166
|
-
var _ref$disabled = _ref.disabled,
|
|
167
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
168
|
-
states = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
169
|
-
|
|
170
|
-
var entries = [].concat(Object.entries(states), [['disabled', disabled]]);
|
|
171
|
-
var stateVariants = entries.filter(function (_ref2) {
|
|
172
|
-
var val = _ref2[1];
|
|
173
|
-
return Boolean(val);
|
|
174
|
-
}).map(function (_ref3) {
|
|
175
|
-
var key = _ref3[0];
|
|
176
|
-
return appendVariantState(variant, key);
|
|
177
|
-
});
|
|
178
|
-
return [variant].concat(stateVariants);
|
|
179
|
-
};
|
|
180
|
-
|
|
181
|
-
var _excluded$1 = ["as", "children", "__baseCSS", "variant", "css", "display", "height", "width", "minWidth", "maxWidth", "position", "top", "bottom", "right", "left", "zIndex", "p", "px", "py", "pt", "pb", "pl", "pr", "m", "mx", "my", "mt", "mb", "ml", "mr", "flexDirection", "flexWrap", "flexShrink", "flexGrow", "alignItems", "justifyContent", "bg", "border", "borderRadius", "boxShadow", "opacity", "overflow", "transition"];
|
|
182
|
-
/**
|
|
183
|
-
* Check if there is any falsy value or empty object
|
|
184
|
-
*/
|
|
185
|
-
|
|
186
|
-
var isNotEmpty = function isNotEmpty(val) {
|
|
187
|
-
return !(val && Object.keys(val).length === 0 && val.constructor === Object);
|
|
188
|
-
};
|
|
189
|
-
|
|
190
|
-
var createThemedStyle = function createThemedStyle(_ref) {
|
|
191
|
-
var as = _ref.as,
|
|
192
|
-
__baseCSS = _ref.__baseCSS,
|
|
193
|
-
variant = _ref.variant,
|
|
194
|
-
styles = _ref.styles,
|
|
195
|
-
css = _ref.css;
|
|
196
|
-
return function (theme) {
|
|
197
|
-
return [getNormalizedStyles(as), css$1(__baseCSS)(theme)].concat(ensureArrayVariant(variant).map(function (v) {
|
|
198
|
-
return css$1({
|
|
199
|
-
variant: v
|
|
200
|
-
})(theme);
|
|
201
|
-
}), [css$1(styles)(theme), css$1(css)(theme)]).filter(isNotEmpty);
|
|
202
|
-
};
|
|
203
|
-
};
|
|
204
|
-
|
|
205
|
-
var Box = /*#__PURE__*/forwardRef(function (_ref2, ref) {
|
|
206
|
-
var _ref2$as = _ref2.as,
|
|
207
|
-
as = _ref2$as === void 0 ? 'div' : _ref2$as,
|
|
208
|
-
children = _ref2.children,
|
|
209
|
-
__baseCSS = _ref2.__baseCSS,
|
|
210
|
-
variant = _ref2.variant,
|
|
211
|
-
_ref2$css = _ref2.css,
|
|
212
|
-
css = _ref2$css === void 0 ? {} : _ref2$css,
|
|
213
|
-
display = _ref2.display,
|
|
214
|
-
height = _ref2.height,
|
|
215
|
-
width = _ref2.width,
|
|
216
|
-
minWidth = _ref2.minWidth,
|
|
217
|
-
maxWidth = _ref2.maxWidth,
|
|
218
|
-
position = _ref2.position,
|
|
219
|
-
top = _ref2.top,
|
|
220
|
-
bottom = _ref2.bottom,
|
|
221
|
-
right = _ref2.right,
|
|
222
|
-
left = _ref2.left,
|
|
223
|
-
zIndex = _ref2.zIndex,
|
|
224
|
-
p = _ref2.p,
|
|
225
|
-
px = _ref2.px,
|
|
226
|
-
py = _ref2.py,
|
|
227
|
-
pt = _ref2.pt,
|
|
228
|
-
pb = _ref2.pb,
|
|
229
|
-
pl = _ref2.pl,
|
|
230
|
-
pr = _ref2.pr,
|
|
231
|
-
m = _ref2.m,
|
|
232
|
-
mx = _ref2.mx,
|
|
233
|
-
my = _ref2.my,
|
|
234
|
-
mt = _ref2.mt,
|
|
235
|
-
mb = _ref2.mb,
|
|
236
|
-
ml = _ref2.ml,
|
|
237
|
-
mr = _ref2.mr,
|
|
238
|
-
flexDirection = _ref2.flexDirection,
|
|
239
|
-
flexWrap = _ref2.flexWrap,
|
|
240
|
-
flexShrink = _ref2.flexShrink,
|
|
241
|
-
flexGrow = _ref2.flexGrow,
|
|
242
|
-
alignItems = _ref2.alignItems,
|
|
243
|
-
justifyContent = _ref2.justifyContent,
|
|
244
|
-
bg = _ref2.bg,
|
|
245
|
-
border = _ref2.border,
|
|
246
|
-
borderRadius = _ref2.borderRadius,
|
|
247
|
-
boxShadow = _ref2.boxShadow,
|
|
248
|
-
opacity = _ref2.opacity,
|
|
249
|
-
overflow = _ref2.overflow,
|
|
250
|
-
transition = _ref2.transition,
|
|
251
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
|
|
252
|
-
|
|
253
|
-
return jsx(as, _extends({}, props, {
|
|
254
|
-
css: createThemedStyle({
|
|
255
|
-
as: as,
|
|
256
|
-
__baseCSS: __baseCSS,
|
|
257
|
-
variant: variant,
|
|
258
|
-
css: css,
|
|
259
|
-
styles: {
|
|
260
|
-
display: display,
|
|
261
|
-
height: height,
|
|
262
|
-
width: width,
|
|
263
|
-
minWidth: minWidth,
|
|
264
|
-
maxWidth: maxWidth,
|
|
265
|
-
position: position,
|
|
266
|
-
top: top,
|
|
267
|
-
bottom: bottom,
|
|
268
|
-
right: right,
|
|
269
|
-
left: left,
|
|
270
|
-
zIndex: zIndex,
|
|
271
|
-
p: p,
|
|
272
|
-
px: px,
|
|
273
|
-
py: py,
|
|
274
|
-
pt: pt,
|
|
275
|
-
pb: pb,
|
|
276
|
-
pl: pl,
|
|
277
|
-
pr: pr,
|
|
278
|
-
m: m,
|
|
279
|
-
mx: mx,
|
|
280
|
-
my: my,
|
|
281
|
-
mt: mt,
|
|
282
|
-
mb: mb,
|
|
283
|
-
ml: ml,
|
|
284
|
-
mr: mr,
|
|
285
|
-
flexDirection: flexDirection,
|
|
286
|
-
flexWrap: flexWrap,
|
|
287
|
-
flexShrink: flexShrink,
|
|
288
|
-
flexGrow: flexGrow,
|
|
289
|
-
alignItems: alignItems,
|
|
290
|
-
justifyContent: justifyContent,
|
|
291
|
-
bg: bg,
|
|
292
|
-
border: border,
|
|
293
|
-
borderRadius: borderRadius,
|
|
294
|
-
boxShadow: boxShadow,
|
|
295
|
-
opacity: opacity,
|
|
296
|
-
overflow: overflow,
|
|
297
|
-
transition: transition
|
|
298
|
-
}
|
|
299
|
-
}),
|
|
300
|
-
ref: ref
|
|
301
|
-
}), children);
|
|
302
|
-
});
|
|
303
|
-
|
|
304
|
-
/**
|
|
305
|
-
* @internal
|
|
306
|
-
*/
|
|
307
|
-
|
|
308
|
-
var __defaultTheme = {};
|
|
309
|
-
var InternalContext = /*#__PURE__*/createContext(__defaultTheme);
|
|
310
|
-
var useTheme = function useTheme() {
|
|
311
|
-
var theme = useContext(InternalContext);
|
|
312
|
-
/**
|
|
313
|
-
* We cast the theme here to `any` since our subset is not
|
|
314
|
-
* compatible with the typings of `theme-ui`, since they
|
|
315
|
-
* also support arrays as scale values, while we don't.
|
|
316
|
-
*/
|
|
317
|
-
|
|
318
|
-
var css = useCallback(function (style) {
|
|
319
|
-
return css$1(style)(theme);
|
|
320
|
-
}, [theme]);
|
|
321
|
-
return {
|
|
322
|
-
theme: theme,
|
|
323
|
-
css: css
|
|
324
|
-
};
|
|
325
|
-
};
|
|
326
|
-
function ThemeProvider(_ref) {
|
|
327
|
-
var theme = _ref.theme,
|
|
328
|
-
children = _ref.children;
|
|
329
|
-
return React.createElement(ThemeProvider$1, {
|
|
330
|
-
theme: theme
|
|
331
|
-
}, React.createElement(InternalContext.Provider, {
|
|
332
|
-
value: theme
|
|
333
|
-
}, children));
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
/**
|
|
337
|
-
* CSS snippet and idea from:
|
|
338
|
-
* https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
|
|
339
|
-
*/
|
|
340
|
-
|
|
341
|
-
var reduceMotionStyles = {
|
|
342
|
-
'@media screen and (prefers-reduced-motion: reduce), (update: slow)': {
|
|
343
|
-
'*': {
|
|
344
|
-
animationDuration: '0.001ms !important',
|
|
345
|
-
animationIterationCount: '1 !important',
|
|
346
|
-
transitionDuration: '0.001ms !important'
|
|
347
|
-
}
|
|
348
|
-
}
|
|
349
|
-
};
|
|
350
|
-
var Global = function Global() {
|
|
351
|
-
var _useTheme = useTheme(),
|
|
352
|
-
css = _useTheme.css;
|
|
353
|
-
|
|
354
|
-
var styles = css({
|
|
355
|
-
html: {
|
|
356
|
-
height: '100%',
|
|
357
|
-
variant: 'root.html'
|
|
358
|
-
},
|
|
359
|
-
body: {
|
|
360
|
-
height: '100%',
|
|
361
|
-
lineHeight: 1.5,
|
|
362
|
-
WebkitFontSmoothing: 'antialiased',
|
|
363
|
-
variant: 'root.body'
|
|
364
|
-
}
|
|
365
|
-
});
|
|
366
|
-
return React.createElement(Global$1, {
|
|
367
|
-
styles: _extends({
|
|
368
|
-
reduceMotionStyles: reduceMotionStyles
|
|
369
|
-
}, styles)
|
|
370
|
-
});
|
|
371
|
-
};
|
|
372
|
-
|
|
373
|
-
var _excluded$2 = ["size", "children"];
|
|
374
|
-
var css = /*#__PURE__*/getNormalizedStyles$1('svg');
|
|
375
|
-
var SVG = function SVG(_ref) {
|
|
376
|
-
var _ref$size = _ref.size,
|
|
377
|
-
size = _ref$size === void 0 ? 24 : _ref$size,
|
|
378
|
-
children = _ref.children,
|
|
379
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
380
|
-
|
|
381
|
-
return jsx('svg', _extends({
|
|
382
|
-
width: size,
|
|
383
|
-
height: size,
|
|
384
|
-
viewBox: '0 0 24 24',
|
|
385
|
-
fill: 'currentcolor'
|
|
386
|
-
}, props, {
|
|
387
|
-
css: css
|
|
388
|
-
}), children);
|
|
389
|
-
};
|
|
390
|
-
|
|
391
|
-
export { Box, Global, SVG, ThemeProvider, __defaultTheme, appendVariantState, conditional, ensureArray, ensureArrayVariant, ensureVariantDefault, getNormalizedStyles, normalize, useTheme };
|
|
392
|
-
//# sourceMappingURL=system.esm.js.map
|
package/dist/system.esm.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"system.esm.js","sources":["../src/normalize.ts","../src/variant.ts","../src/Box.tsx","../src/useTheme.tsx","../src/Global.tsx","../src/SVG.tsx"],"sourcesContent":["/**\n * Normalize styling of certain elements between browsers.\n * Based on https://www.joshwcomeau.com/css/custom-css-reset/\n */\nimport { ElementType } from 'react';\n\nconst base = {\n boxSizing: 'border-box',\n margin: 0,\n minWidth: 0,\n} as const;\n\nconst a = {\n ...base,\n textDecoration: 'none',\n} as const;\n\nconst text = {\n ...base,\n overflowWrap: 'break-word',\n} as const;\n\nconst media = {\n ...base,\n display: 'block',\n maxWidth: '100%',\n} as const;\n\nconst button = {\n ...base,\n display: 'block',\n appearance: 'none',\n font: 'inherit',\n background: 'transparent',\n textAlign: 'center',\n} as const;\n\nconst input = {\n ...base,\n display: 'block',\n appearance: 'none',\n font: 'inherit',\n '&::-ms-clear': {\n display: 'none',\n },\n '&::-webkit-search-cancel-button': {\n WebkitAppearance: 'none',\n },\n} as const;\n\nconst select = {\n ...base,\n display: 'block',\n appearance: 'none',\n font: 'inherit',\n '&::-ms-expand': {\n display: 'none',\n },\n} as const;\n\nconst textarea = {\n ...base,\n display: 'block',\n appearance: 'none',\n font: 'inherit',\n} as const;\n\n// Normalize\n// ---------------\nexport const normalize = {\n base,\n a,\n p: text,\n h1: text,\n h2: text,\n h3: text,\n h4: text,\n h5: text,\n h6: text,\n img: media,\n picture: media,\n video: media,\n canvas: media,\n svg: media,\n select,\n button,\n textarea,\n input,\n} as const;\n\nexport type NormalizedElement = keyof typeof normalize;\n\n/**\n * Type-safe helper to get normalization. If no normalization is found,\n * returns the *base* normalization.\n */\nexport const getNormalizedStyles = (val?: ElementType) =>\n typeof val === 'string' && val in normalize\n ? normalize[val as NormalizedElement] // Typescript doesn't infer this correctly\n : normalize.base;\n","const isNil = (value: any): value is null | undefined =>\n value === null || value === undefined;\n\n/**\n * Ensures that the `val` is an array. Will return an empty array if `val` is falsy.\n */\nexport const ensureArray = <T>(val?: T | T[]) =>\n isNil(val) ? [] : Array.isArray(val) ? val : [val];\n\n/**\n * Removes trailing dot from variant, if necessary. This is necessary to support\n * `__default` styles. See https://github.com/system-ui/theme-ui/pull/951\n */\nexport const ensureVariantDefault = (val: string) => val.replace(/\\.$/, '');\n\n/**\n * Ensures that the `variant` is an array and supports the `__default` key.\n */\nexport const ensureArrayVariant = <T extends string>(variant?: T | T[]) =>\n ensureArray(variant).map(ensureVariantDefault);\n\nexport type State = {\n checked?: boolean;\n focus?: boolean;\n hover?: boolean;\n disabled?: boolean;\n error?: boolean;\n};\n\n/**\n * Appends given `state` to a `variant`.\n */\nexport const appendVariantState = (variant: string, state: keyof State) => {\n return `${ensureVariantDefault(variant)}.:${state}`;\n};\n\n/**\n * Create a variant array from a `variant` and `state` containing\n * passed states, if they are truthy.\n */\nexport const conditional = (\n variant: string,\n { disabled = false, ...states }: State\n) => {\n const entries = [...Object.entries(states), ['disabled', disabled]] as [\n keyof State,\n boolean\n ][];\n const stateVariants = entries\n .filter(([, val]) => Boolean(val))\n .map(([key]) => appendVariantState(variant, key));\n\n return [variant, ...stateVariants];\n};\n","import { jsx, Theme } from '@emotion/react';\nimport { css as transformStyleObject } from '@theme-ui/css';\nimport { forwardRef } from 'react';\nimport {\n PolymorphicPropsWithRef,\n PolymorphicComponentWithRef,\n} from '@marigold/types';\n\nimport { getNormalizedStyles } from './normalize';\nimport { CSSObject } from './types';\nimport { ensureArrayVariant } from './variant';\n\nexport type StyleProps = Pick<\n CSSObject,\n | 'display'\n | 'height'\n | 'width'\n | 'minWidth'\n | 'maxWidth'\n | 'position'\n | 'top'\n | 'bottom'\n | 'right'\n | 'left'\n | 'zIndex'\n | 'p'\n | 'px'\n | 'py'\n | 'pt'\n | 'pb'\n | 'pl'\n | 'pr'\n | 'm'\n | 'mx'\n | 'my'\n | 'mt'\n | 'mb'\n | 'ml'\n | 'mr'\n | 'flexDirection'\n | 'flexWrap'\n | 'flexShrink'\n | 'flexGrow'\n | 'alignItems'\n | 'justifyContent'\n | 'bg'\n | 'border'\n | 'borderRadius'\n | 'boxShadow'\n | 'opacity'\n | 'overflow'\n | 'transition'\n>;\n\nexport type BoxOwnProps = {\n css?: CSSObject;\n variant?: string | string[];\n /**\n * Use to set base styles for the component\n * @internal Used to set default styles for Marigold components\n */\n __baseCSS?: CSSObject;\n} & StyleProps;\n\nexport type BoxProps = PolymorphicPropsWithRef<BoxOwnProps, 'div'>;\n\n/**\n * Check if there is any falsy value or empty object\n */\nconst isNotEmpty = (val: any) =>\n !(val && Object.keys(val).length === 0 && val.constructor === Object);\n\ntype CreateStyleProps = {\n as?: BoxProps['as'];\n __baseCSS?: BoxOwnProps['__baseCSS'];\n variant?: BoxOwnProps['variant'];\n css?: BoxOwnProps['css'];\n styles?: StyleProps;\n};\n\nconst createThemedStyle =\n ({ as, __baseCSS, variant, styles, css }: CreateStyleProps) =>\n (theme: Theme) => {\n return [\n getNormalizedStyles(as),\n transformStyleObject(__baseCSS)(theme),\n ...ensureArrayVariant(variant).map(v =>\n transformStyleObject({ variant: v })(theme)\n ),\n transformStyleObject(styles)(theme),\n transformStyleObject(css)(theme),\n ].filter(isNotEmpty);\n };\n\nexport const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'> = forwardRef(\n (\n {\n as = 'div',\n children,\n __baseCSS,\n variant,\n css = {},\n display,\n height,\n width,\n minWidth,\n maxWidth,\n position,\n top,\n bottom,\n right,\n left,\n zIndex,\n p,\n px,\n py,\n pt,\n pb,\n pl,\n pr,\n m,\n mx,\n my,\n mt,\n mb,\n ml,\n mr,\n flexDirection,\n flexWrap,\n flexShrink,\n flexGrow,\n alignItems,\n justifyContent,\n bg,\n border,\n borderRadius,\n boxShadow,\n opacity,\n overflow,\n transition,\n ...props\n },\n ref\n ) =>\n jsx(\n as,\n {\n ...props,\n css: createThemedStyle({\n as,\n __baseCSS,\n variant,\n css,\n styles: {\n display,\n height,\n width,\n minWidth,\n maxWidth,\n position,\n top,\n bottom,\n right,\n left,\n zIndex,\n p,\n px,\n py,\n pt,\n pb,\n pl,\n pr,\n m,\n mx,\n my,\n mt,\n mb,\n ml,\n mr,\n flexDirection,\n flexWrap,\n flexShrink,\n flexGrow,\n alignItems,\n justifyContent,\n bg,\n border,\n borderRadius,\n boxShadow,\n opacity,\n overflow,\n transition,\n },\n }),\n ref,\n },\n children\n )\n);\n","import React, {\n createContext,\n ReactNode,\n useCallback,\n useContext,\n} from 'react';\nimport { css as transformStyleObject } from '@theme-ui/css';\nimport { ThemeProvider as EmotionProvider } from '@emotion/react';\n\nimport { Theme } from './theme';\nimport { StyleObject } from './types';\n\n/**\n * @internal\n */\nexport const __defaultTheme: Theme = {};\n\nconst InternalContext = createContext<Theme>(__defaultTheme);\n\nexport const useTheme = () => {\n const theme = useContext(InternalContext);\n /**\n * We cast the theme here to `any` since our subset is not\n * compatible with the typings of `theme-ui`, since they\n * also support arrays as scale values, while we don't.\n */\n const css = useCallback(\n (style: StyleObject) => transformStyleObject(style)(theme as any),\n [theme]\n );\n return { theme, css };\n};\n\nexport type ThemeProviderProps<T extends Theme> = {\n theme: T;\n children: ReactNode;\n};\n\nexport function ThemeProvider<T extends Theme>({\n theme,\n children,\n}: ThemeProviderProps<T>) {\n return (\n <EmotionProvider theme={theme}>\n <InternalContext.Provider value={theme}>\n {children}\n </InternalContext.Provider>\n </EmotionProvider>\n );\n}\n","import React from 'react';\nimport { Global as EmotionGlobal } from '@emotion/react';\nimport { useTheme } from './useTheme';\n\n/**\n * CSS snippet and idea from:\n * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/\n */\nconst reduceMotionStyles = {\n '@media screen and (prefers-reduced-motion: reduce), (update: slow)': {\n '*': {\n animationDuration: '0.001ms !important',\n animationIterationCount: '1 !important',\n transitionDuration: '0.001ms !important',\n },\n },\n};\n\nexport const Global = () => {\n const { css } = useTheme();\n const styles = css({\n html: {\n height: '100%',\n variant: 'root.html',\n },\n body: {\n height: '100%',\n lineHeight: 1.5,\n WebkitFontSmoothing: 'antialiased',\n variant: 'root.body',\n },\n });\n return <EmotionGlobal styles={{ reduceMotionStyles, ...styles }} />;\n};\n","import React from 'react';\nimport { jsx } from '@emotion/react';\nimport { ComponentProps } from '@marigold/types';\nimport { getNormalizedStyles } from '@marigold/system';\n\nconst css = getNormalizedStyles('svg');\n\nexport type SVGProps = {\n size?: number;\n} & ComponentProps<'svg'>;\n\nexport const SVG: React.FC<SVGProps> = ({ size = 24, children, ...props }) =>\n jsx(\n 'svg',\n {\n width: size,\n height: size,\n viewBox: '0 0 24 24',\n fill: 'currentcolor',\n ...props,\n css,\n },\n children\n );\n"],"names":["base","boxSizing","margin","minWidth","a","textDecoration","text","overflowWrap","media","display","maxWidth","button","appearance","font","background","textAlign","input","WebkitAppearance","select","textarea","normalize","p","h1","h2","h3","h4","h5","h6","img","picture","video","canvas","svg","getNormalizedStyles","val","isNil","value","undefined","ensureArray","Array","isArray","ensureVariantDefault","replace","ensureArrayVariant","variant","map","appendVariantState","state","conditional","disabled","states","entries","Object","stateVariants","filter","Boolean","key","isNotEmpty","keys","length","constructor","createThemedStyle","as","__baseCSS","styles","css","theme","transformStyleObject","v","Box","forwardRef","ref","children","height","width","position","top","bottom","right","left","zIndex","px","py","pt","pb","pl","pr","m","mx","my","mt","mb","ml","mr","flexDirection","flexWrap","flexShrink","flexGrow","alignItems","justifyContent","bg","border","borderRadius","boxShadow","opacity","overflow","transition","props","jsx","__defaultTheme","InternalContext","createContext","useTheme","useContext","useCallback","style","ThemeProvider","React","EmotionProvider","Provider","reduceMotionStyles","animationDuration","animationIterationCount","transitionDuration","Global","html","body","lineHeight","WebkitFontSmoothing","EmotionGlobal","SVG","size","viewBox","fill"],"mappings":"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"}
|
package/dist/theme.d.ts
DELETED
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
import * as CSS from 'csstype';
|
|
2
|
-
import { NestedScaleDict } from '@theme-ui/css';
|
|
3
|
-
/**
|
|
4
|
-
* Value used to define a scale.
|
|
5
|
-
*
|
|
6
|
-
* Can be nested to support a default value.
|
|
7
|
-
*
|
|
8
|
-
* @example
|
|
9
|
-
* Given a theme
|
|
10
|
-
* ```
|
|
11
|
-
* {
|
|
12
|
-
* colors: {
|
|
13
|
-
* primary: { __default: '#00f', light: '#33f' }
|
|
14
|
-
* }
|
|
15
|
-
* }
|
|
16
|
-
* ```
|
|
17
|
-
* `css{{ color: 'primary' }}` resolves to `color: #00f`.
|
|
18
|
-
*/
|
|
19
|
-
export declare type ScaleValue<T> = T | T[] | NestedScaleDict<T> | undefined;
|
|
20
|
-
/**
|
|
21
|
-
* Scales are a set of named, pre-defined CSS values which are used
|
|
22
|
-
* to create consitency in sizing across visual elements. They give
|
|
23
|
-
* plain values semantics meaning.
|
|
24
|
-
*
|
|
25
|
-
* Marigold uses a plain object to define scales, where the key should be a
|
|
26
|
-
* descriptive name for the scale (e.g. `small`/`medium`/.. or `body`/`heading`/...),
|
|
27
|
-
* and the value is the CSS value.
|
|
28
|
-
*/
|
|
29
|
-
export declare type Scale<T> = {
|
|
30
|
-
[key: string]: ScaleValue<T>;
|
|
31
|
-
};
|
|
32
|
-
/**
|
|
33
|
-
* Predefined {@link Scale} scale which uses size values.
|
|
34
|
-
*/
|
|
35
|
-
export declare type SizeScale<T> = {
|
|
36
|
-
xxsmall?: ScaleValue<T>;
|
|
37
|
-
xsmall?: ScaleValue<T>;
|
|
38
|
-
small?: ScaleValue<T>;
|
|
39
|
-
medium?: ScaleValue<T>;
|
|
40
|
-
large?: ScaleValue<T>;
|
|
41
|
-
xlarge?: ScaleValue<T>;
|
|
42
|
-
xxlarge?: ScaleValue<T>;
|
|
43
|
-
};
|
|
44
|
-
/**
|
|
45
|
-
* A {@link SizeScale} that also includes a required `none` value, which is
|
|
46
|
-
* usually used to define the blank value (e.g `0`).
|
|
47
|
-
*/
|
|
48
|
-
export declare type ZeroScale<T> = {
|
|
49
|
-
none: ScaleValue<T>;
|
|
50
|
-
} & Scale<T>;
|
|
51
|
-
/**
|
|
52
|
-
* Base theme with typings for available scales properties.
|
|
53
|
-
*/
|
|
54
|
-
export interface Theme {
|
|
55
|
-
/**
|
|
56
|
-
* To configure the default breakpoints used in responsive array values,
|
|
57
|
-
* add a breakpoints array to your theme.
|
|
58
|
-
*
|
|
59
|
-
* Each breakpoint should be a string with a CSS length unit included or a
|
|
60
|
-
* string including a CSS media query. String values with a CSS length unit
|
|
61
|
-
* will be used to generate a mobile-first (i.e. min-width) media query.
|
|
62
|
-
*
|
|
63
|
-
* @example
|
|
64
|
-
* ```ts
|
|
65
|
-
* {
|
|
66
|
-
* breakpoints: [
|
|
67
|
-
* '40em', '@media (min-width: 56em) and (orientation: landscape)', '64em',
|
|
68
|
-
* ],
|
|
69
|
-
* }
|
|
70
|
-
* ```
|
|
71
|
-
*/
|
|
72
|
-
breakpoints?: Array<string>;
|
|
73
|
-
colors?: Scale<CSS.Property.Color | NestedScaleDict<CSS.Property.Color>>;
|
|
74
|
-
/**
|
|
75
|
-
* Used to define a scale for whitspace values,
|
|
76
|
-
* like `padding`, `margin`, `gap`, etc.
|
|
77
|
-
*/
|
|
78
|
-
space?: ZeroScale<CSS.Property.Margin<number | string>>;
|
|
79
|
-
/**
|
|
80
|
-
* Used to define a `font-size` scale.
|
|
81
|
-
*/
|
|
82
|
-
fontSizes?: Scale<CSS.Property.FontSize<number>>;
|
|
83
|
-
/**
|
|
84
|
-
* Used to define a `font-family` scale.
|
|
85
|
-
*/
|
|
86
|
-
fonts?: Scale<CSS.Property.FontFamily>;
|
|
87
|
-
/**
|
|
88
|
-
* Used to define a `font-weight` scale.
|
|
89
|
-
*/
|
|
90
|
-
fontWeights?: Scale<CSS.Property.FontWeight>;
|
|
91
|
-
/**
|
|
92
|
-
* Used to define a `line-height` scale.
|
|
93
|
-
*/
|
|
94
|
-
lineHeights?: Scale<CSS.Property.LineHeight<string | 0 | number>>;
|
|
95
|
-
/**
|
|
96
|
-
* Used to define a `letter-spacing` scale.
|
|
97
|
-
*/
|
|
98
|
-
letterSpacings?: ZeroScale<CSS.Property.LetterSpacing<string | 0 | number>>;
|
|
99
|
-
/**
|
|
100
|
-
* Used to define a scale for size values,
|
|
101
|
-
* like `height`, `width`, `flexBasis`, etc.
|
|
102
|
-
*/
|
|
103
|
-
sizes?: ZeroScale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>;
|
|
104
|
-
/**
|
|
105
|
-
* Used to define different `border` styles.
|
|
106
|
-
*/
|
|
107
|
-
borders?: ZeroScale<CSS.Property.Border<{}>>;
|
|
108
|
-
/**
|
|
109
|
-
* Used to define `border-style` styles.
|
|
110
|
-
*/
|
|
111
|
-
borderStyles?: Scale<CSS.Property.Border<{}>>;
|
|
112
|
-
/**
|
|
113
|
-
* Used to define `border-width` styles.
|
|
114
|
-
*/
|
|
115
|
-
borderWidths?: ZeroScale<CSS.Property.BorderWidth<string | 0 | number>>;
|
|
116
|
-
/**
|
|
117
|
-
* Used to define `border-radius` styles.
|
|
118
|
-
*/
|
|
119
|
-
radii?: ZeroScale<CSS.Property.BorderRadius<string | 0 | number>>;
|
|
120
|
-
/**
|
|
121
|
-
* Used to define `Shadow` styles.
|
|
122
|
-
*/
|
|
123
|
-
shadows?: ZeroScale<CSS.Property.BoxShadow>;
|
|
124
|
-
/**
|
|
125
|
-
* Used to define a `z-index` scake.
|
|
126
|
-
*/
|
|
127
|
-
zIndices?: Scale<CSS.Property.ZIndex>;
|
|
128
|
-
/**
|
|
129
|
-
* Used to define a `opacity` scale.
|
|
130
|
-
*/
|
|
131
|
-
opacities?: Scale<CSS.Property.Opacity>;
|
|
132
|
-
/**
|
|
133
|
-
* Used to define a `transition` styles.
|
|
134
|
-
*/
|
|
135
|
-
transitions?: ZeroScale<CSS.Property.Transition>;
|
|
136
|
-
}
|
package/dist/types.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Create type aliases for `theme-ui` so that it doesn't leak too much into our code.
|
|
3
|
-
*/
|
|
4
|
-
import { ThemeUIStyleObject, ThemeUICSSObject, ThemeUICSSProperties, ResponsiveStyleValue as RSV } from '@theme-ui/css';
|
|
5
|
-
export declare type ResponsiveStyleValue<T> = RSV<T>;
|
|
6
|
-
export declare type StyleObject = ThemeUIStyleObject;
|
|
7
|
-
export declare type CSSObject = ThemeUICSSObject;
|
|
8
|
-
export declare type CSSProperties = ThemeUICSSProperties;
|
package/dist/useTheme.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { Theme } from './theme';
|
|
3
|
-
import { StyleObject } from './types';
|
|
4
|
-
/**
|
|
5
|
-
* @internal
|
|
6
|
-
*/
|
|
7
|
-
export declare const __defaultTheme: Theme;
|
|
8
|
-
export declare const useTheme: () => {
|
|
9
|
-
theme: Theme;
|
|
10
|
-
css: (style: StyleObject) => import("@theme-ui/css").CSSObject;
|
|
11
|
-
};
|
|
12
|
-
export declare type ThemeProviderProps<T extends Theme> = {
|
|
13
|
-
theme: T;
|
|
14
|
-
children: ReactNode;
|
|
15
|
-
};
|
|
16
|
-
export declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): JSX.Element;
|
package/dist/variant.d.ts
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Ensures that the `val` is an array. Will return an empty array if `val` is falsy.
|
|
3
|
-
*/
|
|
4
|
-
export declare const ensureArray: <T>(val?: T | T[] | undefined) => T[];
|
|
5
|
-
/**
|
|
6
|
-
* Removes trailing dot from variant, if necessary. This is necessary to support
|
|
7
|
-
* `__default` styles. See https://github.com/system-ui/theme-ui/pull/951
|
|
8
|
-
*/
|
|
9
|
-
export declare const ensureVariantDefault: (val: string) => string;
|
|
10
|
-
/**
|
|
11
|
-
* Ensures that the `variant` is an array and supports the `__default` key.
|
|
12
|
-
*/
|
|
13
|
-
export declare const ensureArrayVariant: <T extends string>(variant?: T | T[] | undefined) => string[];
|
|
14
|
-
export declare type State = {
|
|
15
|
-
checked?: boolean;
|
|
16
|
-
focus?: boolean;
|
|
17
|
-
hover?: boolean;
|
|
18
|
-
disabled?: boolean;
|
|
19
|
-
error?: boolean;
|
|
20
|
-
};
|
|
21
|
-
/**
|
|
22
|
-
* Appends given `state` to a `variant`.
|
|
23
|
-
*/
|
|
24
|
-
export declare const appendVariantState: (variant: string, state: keyof State) => string;
|
|
25
|
-
/**
|
|
26
|
-
* Create a variant array from a `variant` and `state` containing
|
|
27
|
-
* passed states, if they are truthy.
|
|
28
|
-
*/
|
|
29
|
-
export declare const conditional: (variant: string, { disabled, ...states }: State) => string[];
|