@spothero/ui 17.0.0-beta.1 → 17.0.0-beta.3
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/components/Accordion/Accordion.js +13 -0
- package/dist/components/Accordion/Accordion.stories.js +86 -0
- package/dist/components/Accordion/index.js +41 -0
- package/dist/components/Accordion/styles/button.js +23 -0
- package/dist/components/Accordion/styles/container.js +15 -0
- package/dist/components/Accordion/styles/index.js +32 -0
- package/dist/components/Accordion/styles/panel.js +13 -0
- package/dist/components/Alert/Alert.js +119 -0
- package/dist/components/Alert/Alert.stories.js +80 -0
- package/dist/components/Alert/index.js +15 -0
- package/dist/components/Alert/styles/index.js +192 -0
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +189 -0
- package/dist/components/AutoSuggestSelect/index.js +15 -0
- package/dist/components/Badge/Badge.js +13 -0
- package/dist/components/Badge/Badge.stories.js +38 -0
- package/dist/components/Badge/styles/index.js +40 -0
- package/dist/components/Button/Button.js +73 -0
- package/dist/components/Button/Button.spec.js +31 -0
- package/dist/components/Button/Button.styles.js +173 -0
- package/dist/components/Button/button-props.js +90 -0
- package/dist/components/Button/index.js +23 -0
- package/dist/components/Button/stories/button.js +59 -0
- package/dist/components/Button/stories/index.stories.js +124 -0
- package/dist/components/Button/stories/overview.js +96 -0
- package/dist/components/Card/Card.js +38 -0
- package/dist/components/Card/Card.stories.js +41 -0
- package/dist/components/Checkbox/Checkbox.js +13 -0
- package/dist/components/Checkbox/Checkbox.stories.js +44 -0
- package/dist/components/Checkbox/index.js +15 -0
- package/dist/components/Checkbox/styles/index.js +64 -0
- package/dist/components/Container/Container.js +34 -0
- package/dist/components/Container/Container.stories.js +74 -0
- package/dist/components/Container/Container.styles.js +17 -0
- package/dist/components/Divider/Divider.js +47 -0
- package/dist/components/Divider/Divider.stories.js +49 -0
- package/dist/components/Divider/Divider.styles.js +28 -0
- package/dist/components/FormControl/FormControl.js +79 -0
- package/dist/components/Grid/Grid.js +49 -0
- package/dist/components/Grid/Grid.stories.js +141 -0
- package/dist/components/Grid/Grid.styles.js +19 -0
- package/dist/components/Grid/GridItem.js +34 -0
- package/dist/components/Grid/GridItem.styles.js +13 -0
- package/dist/components/Grid/index.js +23 -0
- package/dist/components/Heading/Heading.js +49 -0
- package/dist/components/Heading/Heading.stories.js +54 -0
- package/dist/components/Heading/Heading.styles.js +79 -0
- package/dist/components/Icon/Icon.js +13 -0
- package/dist/components/Icon/Icon.stories.js +47 -0
- package/dist/components/Image/Image.js +106 -0
- package/dist/components/Image/Image.spec.js +83 -0
- package/dist/components/Image/Image.stories.js +92 -0
- package/dist/components/Input/Input.js +61 -0
- package/dist/components/Input/Input.stories.js +71 -0
- package/dist/components/Input/index.js +15 -0
- package/dist/components/Input/styles/index.js +71 -0
- package/dist/components/Link/Link.js +13 -0
- package/dist/components/Link/Link.stories.js +61 -0
- package/dist/components/Link/Link.styles.js +42 -0
- package/dist/components/List/List.js +88 -0
- package/dist/components/List/List.stories.js +124 -0
- package/dist/components/List/index.js +23 -0
- package/dist/components/List/styles/index.js +24 -0
- package/dist/components/List/styles/item.styles.js +11 -0
- package/dist/components/Loader/Loader.js +62 -0
- package/dist/components/Loader/Loader.stories.js +140 -0
- package/dist/components/Modal/Modal.js +52 -0
- package/dist/components/Modal/Modal.stories.js +236 -0
- package/dist/components/Modal/index.js +15 -0
- package/dist/components/Modal/styles/body.js +48 -0
- package/dist/components/Modal/styles/closeButton.js +27 -0
- package/dist/components/Modal/styles/dialog.js +25 -0
- package/dist/components/Modal/styles/dialogContainer.js +26 -0
- package/dist/components/Modal/styles/footer.js +12 -0
- package/dist/components/Modal/styles/header.js +20 -0
- package/dist/components/Modal/styles/index.js +70 -0
- package/dist/components/Modal/styles/overlay.js +12 -0
- package/dist/components/Popover/Popover.js +48 -0
- package/dist/components/Popover/Popover.stories.js +101 -0
- package/dist/components/Popover/PopoverArrow.js +34 -0
- package/dist/components/Popover/PopoverCloseButton.js +34 -0
- package/dist/components/Popover/PopoverContent.js +53 -0
- package/dist/components/Popover/index.js +37 -0
- package/dist/components/Popover/styles/index.js +38 -0
- package/dist/components/Popover/styles/popover-arrow.js +16 -0
- package/dist/components/Popover/styles/popover-body.js +15 -0
- package/dist/components/Popover/styles/popover-close-button.js +30 -0
- package/dist/components/Popover/styles/popover-content.js +29 -0
- package/dist/components/Popover/styles/popover-header.js +12 -0
- package/dist/components/Popover/styles/popper.js +11 -0
- package/dist/components/Radio/Radio.js +52 -0
- package/dist/components/Radio/Radio.stories.js +142 -0
- package/dist/components/Radio/RadioGroup.js +65 -0
- package/dist/components/Radio/index.js +23 -0
- package/dist/components/Radio/styles/index.js +65 -0
- package/dist/components/Select/Select.js +71 -0
- package/dist/components/Select/Select.stories.js +74 -0
- package/dist/components/Select/index.js +15 -0
- package/dist/components/Select/styles/index.js +57 -0
- package/dist/components/Skeleton/Skeleton.stories.js +41 -0
- package/dist/components/Skeleton/Skeleton.styles.js +13 -0
- package/dist/components/Skeleton/index.js +25 -0
- package/dist/components/Spinner/Spinner.js +47 -0
- package/dist/components/Spinner/Spinner.stories.js +134 -0
- package/dist/components/Spinner/Spinner.styles.js +76 -0
- package/dist/components/Switch/Switch.js +59 -0
- package/dist/components/Switch/Switch.stories.js +86 -0
- package/dist/components/Switch/index.js +15 -0
- package/dist/components/Switch/styles/index.js +46 -0
- package/dist/components/Table/Table.js +13 -0
- package/dist/components/Table/Table.stories.js +92 -0
- package/dist/components/Table/Table.styles.js +87 -0
- package/dist/components/Table/index.js +59 -0
- package/dist/components/Tabs/Tabs.js +48 -0
- package/dist/components/Tabs/Tabs.stories.js +51 -0
- package/dist/components/Tabs/combineSizeWithVariant.js +44 -0
- package/dist/components/Tabs/index.js +41 -0
- package/dist/components/Tabs/styles/index.js +52 -0
- package/dist/components/Text/Text.js +44 -0
- package/dist/components/Text/Text.stories.js +56 -0
- package/dist/components/Text/Text.styles.js +67 -0
- package/dist/components/Text/combineAsWithVariant.js +123 -0
- package/dist/components/Text/options.js +9 -0
- package/dist/components/ThemeProvider/ThemeProvider.js +66 -0
- package/dist/components/ThemeProvider/ThemeProvider.stories.js +63 -0
- package/dist/components/index.js +577 -0
- package/dist/components/styles.js +175 -0
- package/dist/theme/base/breakpoints.js +27 -0
- package/dist/theme/base/colors.js +148 -0
- package/dist/theme/base/index.js +59 -0
- package/dist/theme/base/sizes.js +88 -0
- package/dist/theme/base/typography.js +41 -0
- package/dist/theme/base/zindices.js +35 -0
- package/dist/theme/global.js +52 -0
- package/dist/theme/index.js +63 -0
- package/dist/utils/Spaces.js +27 -0
- package/package.json +1 -1
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "Accordion", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _styles2.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
Object.defineProperty(exports, "Alert", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function get() {
|
|
17
|
+
return _styles6.default;
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
Object.defineProperty(exports, "Badge", {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function get() {
|
|
23
|
+
return _styles12.default;
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
Object.defineProperty(exports, "Button", {
|
|
27
|
+
enumerable: true,
|
|
28
|
+
get: function get() {
|
|
29
|
+
return _Button.default;
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
Object.defineProperty(exports, "Checkbox", {
|
|
33
|
+
enumerable: true,
|
|
34
|
+
get: function get() {
|
|
35
|
+
return _styles5.default;
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
Object.defineProperty(exports, "Divider", {
|
|
39
|
+
enumerable: true,
|
|
40
|
+
get: function get() {
|
|
41
|
+
return _Divider.default;
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
Object.defineProperty(exports, "GridItem", {
|
|
45
|
+
enumerable: true,
|
|
46
|
+
get: function get() {
|
|
47
|
+
return _GridItem.default;
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
Object.defineProperty(exports, "Heading", {
|
|
51
|
+
enumerable: true,
|
|
52
|
+
get: function get() {
|
|
53
|
+
return _Heading.default;
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
Object.defineProperty(exports, "Input", {
|
|
57
|
+
enumerable: true,
|
|
58
|
+
get: function get() {
|
|
59
|
+
return _styles9.default;
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
Object.defineProperty(exports, "Link", {
|
|
63
|
+
enumerable: true,
|
|
64
|
+
get: function get() {
|
|
65
|
+
return _Link.default;
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
Object.defineProperty(exports, "List", {
|
|
69
|
+
enumerable: true,
|
|
70
|
+
get: function get() {
|
|
71
|
+
return _styles.default;
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
Object.defineProperty(exports, "Modal", {
|
|
75
|
+
enumerable: true,
|
|
76
|
+
get: function get() {
|
|
77
|
+
return _styles10.default;
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
Object.defineProperty(exports, "Popover", {
|
|
81
|
+
enumerable: true,
|
|
82
|
+
get: function get() {
|
|
83
|
+
return _styles8.default;
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
Object.defineProperty(exports, "Radio", {
|
|
87
|
+
enumerable: true,
|
|
88
|
+
get: function get() {
|
|
89
|
+
return _styles11.default;
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
Object.defineProperty(exports, "Select", {
|
|
93
|
+
enumerable: true,
|
|
94
|
+
get: function get() {
|
|
95
|
+
return _styles4.default;
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
Object.defineProperty(exports, "Skeleton", {
|
|
99
|
+
enumerable: true,
|
|
100
|
+
get: function get() {
|
|
101
|
+
return _Skeleton.default;
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
Object.defineProperty(exports, "Spinner", {
|
|
105
|
+
enumerable: true,
|
|
106
|
+
get: function get() {
|
|
107
|
+
return _Spinner.default;
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
Object.defineProperty(exports, "Switch", {
|
|
111
|
+
enumerable: true,
|
|
112
|
+
get: function get() {
|
|
113
|
+
return _styles7.default;
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
Object.defineProperty(exports, "Table", {
|
|
117
|
+
enumerable: true,
|
|
118
|
+
get: function get() {
|
|
119
|
+
return _Table.default;
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
Object.defineProperty(exports, "Tabs", {
|
|
123
|
+
enumerable: true,
|
|
124
|
+
get: function get() {
|
|
125
|
+
return _styles3.default;
|
|
126
|
+
}
|
|
127
|
+
});
|
|
128
|
+
Object.defineProperty(exports, "Text", {
|
|
129
|
+
enumerable: true,
|
|
130
|
+
get: function get() {
|
|
131
|
+
return _Text.default;
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
var _styles = _interopRequireDefault(require("./List/styles"));
|
|
136
|
+
|
|
137
|
+
var _Table = _interopRequireDefault(require("./Table/Table.styles"));
|
|
138
|
+
|
|
139
|
+
var _Text = _interopRequireDefault(require("./Text/Text.styles"));
|
|
140
|
+
|
|
141
|
+
var _Link = _interopRequireDefault(require("./Link/Link.styles"));
|
|
142
|
+
|
|
143
|
+
var _styles2 = _interopRequireDefault(require("./Accordion/styles"));
|
|
144
|
+
|
|
145
|
+
var _Button = _interopRequireDefault(require("./Button/Button.styles"));
|
|
146
|
+
|
|
147
|
+
var _GridItem = _interopRequireDefault(require("./Grid/GridItem.styles"));
|
|
148
|
+
|
|
149
|
+
var _Spinner = _interopRequireDefault(require("./Spinner/Spinner.styles"));
|
|
150
|
+
|
|
151
|
+
var _Heading = _interopRequireDefault(require("./Heading/Heading.styles"));
|
|
152
|
+
|
|
153
|
+
var _Divider = _interopRequireDefault(require("./Divider/Divider.styles"));
|
|
154
|
+
|
|
155
|
+
var _styles3 = _interopRequireDefault(require("./Tabs/styles"));
|
|
156
|
+
|
|
157
|
+
var _styles4 = _interopRequireDefault(require("./Select/styles"));
|
|
158
|
+
|
|
159
|
+
var _styles5 = _interopRequireDefault(require("./Checkbox/styles"));
|
|
160
|
+
|
|
161
|
+
var _styles6 = _interopRequireDefault(require("./Alert/styles"));
|
|
162
|
+
|
|
163
|
+
var _styles7 = _interopRequireDefault(require("./Switch/styles"));
|
|
164
|
+
|
|
165
|
+
var _styles8 = _interopRequireDefault(require("./Popover/styles"));
|
|
166
|
+
|
|
167
|
+
var _styles9 = _interopRequireDefault(require("./Input/styles"));
|
|
168
|
+
|
|
169
|
+
var _styles10 = _interopRequireDefault(require("./Modal/styles"));
|
|
170
|
+
|
|
171
|
+
var _styles11 = _interopRequireDefault(require("./Radio/styles"));
|
|
172
|
+
|
|
173
|
+
var _Skeleton = _interopRequireDefault(require("./Skeleton/Skeleton.styles"));
|
|
174
|
+
|
|
175
|
+
var _styles12 = _interopRequireDefault(require("./Badge/styles"));
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _themeTools = require("@chakra-ui/theme-tools");
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* The "base" breakpoint is Chakra's default non-responsive value (from 0 upwards).
|
|
12
|
+
* While we don't explicitly enable a "mobile" breakpoint, we can consider "base" and
|
|
13
|
+
* "mobile" the same for all intents and purposes for mobile-first responsive styling.
|
|
14
|
+
* @see https://chakra-ui.com/docs/features/responsive-styles#customizing-breakpoints
|
|
15
|
+
*/
|
|
16
|
+
var breakpoints = (0, _themeTools.createBreakpoints)({
|
|
17
|
+
mobileXL: '30rem',
|
|
18
|
+
// 480px
|
|
19
|
+
tablet: '48rem',
|
|
20
|
+
// 768px
|
|
21
|
+
desktop: '64rem',
|
|
22
|
+
// 1024px
|
|
23
|
+
desktopXL: '90rem' // 1440px
|
|
24
|
+
|
|
25
|
+
});
|
|
26
|
+
var _default = breakpoints;
|
|
27
|
+
exports.default = _default;
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
|
4
|
+
|
|
5
|
+
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
|
6
|
+
|
|
7
|
+
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
|
8
|
+
|
|
9
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
10
|
+
|
|
11
|
+
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
|
12
|
+
|
|
13
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
14
|
+
|
|
15
|
+
Object.defineProperty(exports, "__esModule", {
|
|
16
|
+
value: true
|
|
17
|
+
});
|
|
18
|
+
exports.default = void 0;
|
|
19
|
+
|
|
20
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
21
|
+
|
|
22
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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) { (0, _defineProperty2.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
|
+
|
|
26
|
+
var white = '#ffffff';
|
|
27
|
+
var black = '#000000';
|
|
28
|
+
var brandBlue = '#0082ff';
|
|
29
|
+
var gray = {
|
|
30
|
+
50: '#f6f7f9',
|
|
31
|
+
100: '#e1e6ec',
|
|
32
|
+
200: '#cbd4de',
|
|
33
|
+
300: '#afbdcc',
|
|
34
|
+
400: '#94a7ba',
|
|
35
|
+
500: '#7890a8',
|
|
36
|
+
600: '#537495',
|
|
37
|
+
700: '#3b5261',
|
|
38
|
+
800: '#2f3f4b',
|
|
39
|
+
900: '#26323c'
|
|
40
|
+
};
|
|
41
|
+
var blue = {
|
|
42
|
+
50: '#f6fbfd',
|
|
43
|
+
100: '#e6f8fd',
|
|
44
|
+
200: '#c0e9fb',
|
|
45
|
+
300: '#96d3fa',
|
|
46
|
+
400: '#5baafa',
|
|
47
|
+
500: '#1271eb',
|
|
48
|
+
600: '#1d58f2',
|
|
49
|
+
700: '#1b46da',
|
|
50
|
+
800: '#1735a6',
|
|
51
|
+
900: '#132b7f'
|
|
52
|
+
};
|
|
53
|
+
var navy = {
|
|
54
|
+
50: '#f4fafc',
|
|
55
|
+
100: '#e4f7fb',
|
|
56
|
+
200: '#bfebf6',
|
|
57
|
+
300: '#92d9f4',
|
|
58
|
+
400: '#51b7f0',
|
|
59
|
+
500: '#2590ea',
|
|
60
|
+
600: '#1a6cda',
|
|
61
|
+
700: '#1b55b6',
|
|
62
|
+
800: '#194185',
|
|
63
|
+
900: '#002d5b'
|
|
64
|
+
};
|
|
65
|
+
var green = {
|
|
66
|
+
50: '#ecf8f7',
|
|
67
|
+
100: '#d3f7ef',
|
|
68
|
+
200: '#a4f3d9',
|
|
69
|
+
300: '#65eabf',
|
|
70
|
+
400: '#1edb96',
|
|
71
|
+
500: '#09c66a',
|
|
72
|
+
600: '#08ad50',
|
|
73
|
+
700: '#008547',
|
|
74
|
+
800: '#11703e',
|
|
75
|
+
900: '#115a35'
|
|
76
|
+
};
|
|
77
|
+
var yellow = {
|
|
78
|
+
50: '#f9f5e5',
|
|
79
|
+
100: '#faf0bd',
|
|
80
|
+
200: '#f6e67c',
|
|
81
|
+
300: '#f1d439',
|
|
82
|
+
400: '#ffbf02',
|
|
83
|
+
500: '#e19706',
|
|
84
|
+
600: '#cf7404',
|
|
85
|
+
700: '#ae5708',
|
|
86
|
+
800: '#8e440e',
|
|
87
|
+
900: '#743710'
|
|
88
|
+
};
|
|
89
|
+
var red = {
|
|
90
|
+
50: '#fdf9f8',
|
|
91
|
+
100: '#fdeef3',
|
|
92
|
+
200: '#fbcee6',
|
|
93
|
+
300: '#fba4d1',
|
|
94
|
+
400: '#fc6bad',
|
|
95
|
+
500: '#fc4086',
|
|
96
|
+
600: '#f7265f',
|
|
97
|
+
700: '#e01438',
|
|
98
|
+
800: '#b4193c',
|
|
99
|
+
900: '#901530'
|
|
100
|
+
};
|
|
101
|
+
var colors = {
|
|
102
|
+
primary: _objectSpread(_objectSpread({}, blue), {}, {
|
|
103
|
+
default: blue['500']
|
|
104
|
+
}),
|
|
105
|
+
secondary: _objectSpread(_objectSpread({}, navy), {}, {
|
|
106
|
+
default: navy['900']
|
|
107
|
+
}),
|
|
108
|
+
gray: _objectSpread(_objectSpread({}, gray), {}, {
|
|
109
|
+
light: gray['50'],
|
|
110
|
+
medium: gray['200'],
|
|
111
|
+
dark: gray['600']
|
|
112
|
+
}),
|
|
113
|
+
red: _objectSpread(_objectSpread({}, red), {}, {
|
|
114
|
+
default: red['700']
|
|
115
|
+
}),
|
|
116
|
+
green: _objectSpread(_objectSpread({}, green), {}, {
|
|
117
|
+
default: green['700']
|
|
118
|
+
}),
|
|
119
|
+
yellow: _objectSpread(_objectSpread({}, yellow), {}, {
|
|
120
|
+
default: yellow['400']
|
|
121
|
+
}),
|
|
122
|
+
success: green['700'],
|
|
123
|
+
warning: yellow['400'],
|
|
124
|
+
error: red['700'],
|
|
125
|
+
accent: gray['200'],
|
|
126
|
+
text: {
|
|
127
|
+
primary: {
|
|
128
|
+
light: black,
|
|
129
|
+
dark: white
|
|
130
|
+
},
|
|
131
|
+
secondary: {
|
|
132
|
+
light: gray['600']
|
|
133
|
+
},
|
|
134
|
+
link: {
|
|
135
|
+
light: blue['500'],
|
|
136
|
+
dark: white
|
|
137
|
+
}
|
|
138
|
+
},
|
|
139
|
+
background: {
|
|
140
|
+
gray: gray['50'],
|
|
141
|
+
white: white
|
|
142
|
+
},
|
|
143
|
+
white: white,
|
|
144
|
+
black: black,
|
|
145
|
+
brandBlue: brandBlue
|
|
146
|
+
};
|
|
147
|
+
var _default = colors;
|
|
148
|
+
exports.default = _default;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "breakpoints", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _breakpoints.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
Object.defineProperty(exports, "colors", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function get() {
|
|
17
|
+
return _colors.default;
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
Object.defineProperty(exports, "fontSizes", {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function get() {
|
|
23
|
+
return _typography.fontSizes;
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
Object.defineProperty(exports, "fontWeights", {
|
|
27
|
+
enumerable: true,
|
|
28
|
+
get: function get() {
|
|
29
|
+
return _typography.fontWeights;
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
Object.defineProperty(exports, "fonts", {
|
|
33
|
+
enumerable: true,
|
|
34
|
+
get: function get() {
|
|
35
|
+
return _typography.fonts;
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
Object.defineProperty(exports, "sizes", {
|
|
39
|
+
enumerable: true,
|
|
40
|
+
get: function get() {
|
|
41
|
+
return _sizes.default;
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
Object.defineProperty(exports, "zIndices", {
|
|
45
|
+
enumerable: true,
|
|
46
|
+
get: function get() {
|
|
47
|
+
return _zindices.default;
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
var _sizes = _interopRequireDefault(require("./sizes"));
|
|
52
|
+
|
|
53
|
+
var _colors = _interopRequireDefault(require("./colors"));
|
|
54
|
+
|
|
55
|
+
var _zindices = _interopRequireDefault(require("./zindices"));
|
|
56
|
+
|
|
57
|
+
var _breakpoints = _interopRequireDefault(require("./breakpoints"));
|
|
58
|
+
|
|
59
|
+
var _typography = require("./typography");
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var container = {
|
|
8
|
+
base: '100%',
|
|
9
|
+
// 640px
|
|
10
|
+
tablet: '45rem',
|
|
11
|
+
// 720px
|
|
12
|
+
desktop: '72rem' // 1152px
|
|
13
|
+
|
|
14
|
+
};
|
|
15
|
+
var sizes = {
|
|
16
|
+
container: container,
|
|
17
|
+
0: '0',
|
|
18
|
+
0.5: '0.125rem',
|
|
19
|
+
// 2px
|
|
20
|
+
1: '0.25rem',
|
|
21
|
+
// 4px
|
|
22
|
+
1.5: '0.375rem',
|
|
23
|
+
// 6px
|
|
24
|
+
2: '0.5rem',
|
|
25
|
+
// 8px
|
|
26
|
+
2.5: '0.625rem',
|
|
27
|
+
// 10px
|
|
28
|
+
3: '0.75rem',
|
|
29
|
+
// 12px
|
|
30
|
+
3.5: '0.875rem',
|
|
31
|
+
// 14px
|
|
32
|
+
4: '1rem',
|
|
33
|
+
// 16px
|
|
34
|
+
5: '1.25rem',
|
|
35
|
+
// 20px
|
|
36
|
+
6: '1.5rem',
|
|
37
|
+
// 24px
|
|
38
|
+
7: '1.75rem',
|
|
39
|
+
// 28px
|
|
40
|
+
8: '2rem',
|
|
41
|
+
// 32px
|
|
42
|
+
9: '2.25rem',
|
|
43
|
+
// 36px
|
|
44
|
+
10: '2.5rem',
|
|
45
|
+
// 40px
|
|
46
|
+
12: '3rem',
|
|
47
|
+
// 48px
|
|
48
|
+
14: '3.5rem',
|
|
49
|
+
// 56px
|
|
50
|
+
16: '4rem',
|
|
51
|
+
// 64px
|
|
52
|
+
20: '5rem',
|
|
53
|
+
// 80px
|
|
54
|
+
24: '6rem',
|
|
55
|
+
// 96px
|
|
56
|
+
28: '7rem',
|
|
57
|
+
// 112px
|
|
58
|
+
32: '8rem',
|
|
59
|
+
// 128px
|
|
60
|
+
36: '9rem',
|
|
61
|
+
// 144px
|
|
62
|
+
40: '10rem',
|
|
63
|
+
// 160px
|
|
64
|
+
44: '11rem',
|
|
65
|
+
// 176px
|
|
66
|
+
48: '12rem',
|
|
67
|
+
// 192px
|
|
68
|
+
52: '13rem',
|
|
69
|
+
// 208px
|
|
70
|
+
56: '14rem',
|
|
71
|
+
// 224px
|
|
72
|
+
60: '15rem',
|
|
73
|
+
// 240px
|
|
74
|
+
64: '16rem',
|
|
75
|
+
// 256px
|
|
76
|
+
72: '18rem',
|
|
77
|
+
// 272px
|
|
78
|
+
80: '20rem',
|
|
79
|
+
// 288px
|
|
80
|
+
96: '24rem',
|
|
81
|
+
// 384px
|
|
82
|
+
px: '1px',
|
|
83
|
+
full: '100%',
|
|
84
|
+
max: 'max-content',
|
|
85
|
+
min: 'min-content'
|
|
86
|
+
};
|
|
87
|
+
var _default = sizes;
|
|
88
|
+
exports.default = _default;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.fonts = exports.fontWeights = exports.fontSizes = void 0;
|
|
7
|
+
var fonts = {
|
|
8
|
+
heading: "\"Open Sans\", sans-serif",
|
|
9
|
+
body: "\"Open Sans\", sans-serif"
|
|
10
|
+
};
|
|
11
|
+
exports.fonts = fonts;
|
|
12
|
+
var fontSizes = {
|
|
13
|
+
'5xl': '3.5rem',
|
|
14
|
+
// 56px
|
|
15
|
+
'4xl': '3rem',
|
|
16
|
+
// 48px
|
|
17
|
+
'3xl': '2.5rem',
|
|
18
|
+
// 40px
|
|
19
|
+
'2xl': '2rem',
|
|
20
|
+
// 32px
|
|
21
|
+
xl: '1.5rem',
|
|
22
|
+
// 24px
|
|
23
|
+
lg: '1.25rem',
|
|
24
|
+
// 20px
|
|
25
|
+
md: '1.125rem',
|
|
26
|
+
// 18px
|
|
27
|
+
base: '1rem',
|
|
28
|
+
// 16px
|
|
29
|
+
sm: '0.875rem',
|
|
30
|
+
// 14px
|
|
31
|
+
xs: '0.75rem' // 12px
|
|
32
|
+
|
|
33
|
+
};
|
|
34
|
+
exports.fontSizes = fontSizes;
|
|
35
|
+
var fontWeights = {
|
|
36
|
+
light: 300,
|
|
37
|
+
normal: 400,
|
|
38
|
+
semibold: 600,
|
|
39
|
+
bold: 700
|
|
40
|
+
};
|
|
41
|
+
exports.fontWeights = fontWeights;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var indices = {
|
|
8
|
+
hide: -100,
|
|
9
|
+
// equivalent to $z-index-negative in fe-core (https://github.com/spothero/fe-core/blob/main/utils/_defaults.scss)
|
|
10
|
+
auto: 'auto',
|
|
11
|
+
base: 0,
|
|
12
|
+
// equivalent to $z-index-back in fe-core
|
|
13
|
+
layer1: 100,
|
|
14
|
+
// equivalent to $z-index-mid in fe-core
|
|
15
|
+
layer2: 200,
|
|
16
|
+
// equivalent to $z-index-fore in fe-core
|
|
17
|
+
layer3: 300,
|
|
18
|
+
// equivalent to $z-index-layer1 in fe-core
|
|
19
|
+
layer4: 400,
|
|
20
|
+
// equivalent to $z-index-layer2 in fe-core
|
|
21
|
+
layer5: 500,
|
|
22
|
+
// equivalent to $z-index-layer3 in fe-core
|
|
23
|
+
layer6: 600,
|
|
24
|
+
// equivalent to $z-index-layer4 in fe-core
|
|
25
|
+
layer7: 700,
|
|
26
|
+
// equivalent to $z-index-modal-shim in fe-core
|
|
27
|
+
layer8: 800,
|
|
28
|
+
// equivalent to $z-index-modal in fe-core
|
|
29
|
+
layer9: 900,
|
|
30
|
+
// equivalent to $z-index-notification in fe-core
|
|
31
|
+
layer10: 1000 // equivalent to $z-index-top in fe-core
|
|
32
|
+
|
|
33
|
+
};
|
|
34
|
+
var _default = indices;
|
|
35
|
+
exports.default = _default;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = exports.LegacyOverrides = exports.Fonts = void 0;
|
|
9
|
+
|
|
10
|
+
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
|
|
14
|
+
var _react2 = require("@emotion/react");
|
|
15
|
+
|
|
16
|
+
var _base = require("./base");
|
|
17
|
+
|
|
18
|
+
var global = {
|
|
19
|
+
'html, body': {
|
|
20
|
+
color: 'text.primary.light'
|
|
21
|
+
},
|
|
22
|
+
// By default, Chakra has all svgs set to 'display: block',
|
|
23
|
+
// this breaks the layout of some older components, so now
|
|
24
|
+
// we set all svgs to 'display: inline-block;' and only set
|
|
25
|
+
// 'display: block;' on the components that need it
|
|
26
|
+
// (as of 3/9/2021 only the v1 AutoSuggestInput component
|
|
27
|
+
// needed this update)
|
|
28
|
+
svg: {
|
|
29
|
+
display: 'inline-block'
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
var _default = global;
|
|
33
|
+
exports.default = _default;
|
|
34
|
+
|
|
35
|
+
var Fonts = function Fonts() {
|
|
36
|
+
return /*#__PURE__*/_react.default.createElement(_react2.Global, {
|
|
37
|
+
styles: "\n @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');\n /* Copied from https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap */\n /* latin-ext */\n @font-face {\n font-family: 'Open Sans';\n font-style: normal;\n font-weight: 700;\n src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOXOhpKKSTj5PW.woff2) format('woff2');\n unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n }\n /* latin-ext */\n @font-face {\n font-family: 'Open Sans';\n font-style: normal;\n font-weight: 600;\n src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format('woff2');\n unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n }\n /* latin-ext */\n @font-face {\n font-family: 'Open Sans';\n font-style: normal;\n font-weight: 400;\n src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format('woff2');\n unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n }\n /* latin-ext */\n @font-face {\n font-family: 'Open Sans';\n font-style: normal;\n font-weight: 300;\n src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OXOhpKKSTj5PW.woff2) format('woff2');\n unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n }\n "
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
exports.Fonts = Fonts;
|
|
42
|
+
|
|
43
|
+
var LegacyOverrides = function LegacyOverrides(_ref) {
|
|
44
|
+
var _context, _context2, _context3, _context4, _context5, _context6;
|
|
45
|
+
|
|
46
|
+
var useLegacyOverrides = _ref.useLegacyOverrides;
|
|
47
|
+
return useLegacyOverrides ? /*#__PURE__*/_react.default.createElement(_react2.Global, {
|
|
48
|
+
styles: (0, _concat.default)(_context = (0, _concat.default)(_context2 = (0, _concat.default)(_context3 = (0, _concat.default)(_context4 = (0, _concat.default)(_context5 = (0, _concat.default)(_context6 = "\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-top: 0;\n font-weight: ".concat(_base.fontWeights.semibold, ";\n }\n\n .heading-sm {\n font-size: ")).call(_context6, _base.fontSizes.base, ";\n }\n .heading-md {\n font-size: ")).call(_context5, _base.fontSizes.md, ";\n }\n .heading-lg {\n font-size: ")).call(_context4, _base.fontSizes['5xl'], ";\n }\n\n p {\n line-height: 1.5;\n }\n\n a {\n outline: none;\n text-align: left;\n color: ")).call(_context3, _base.colors.primary.default, ";\n text-decoration: none;\n\n &:active,\n &:focus {\n outline: none;\n }\n\n &:hover {\n color: ")).call(_context2, _base.colors.primary['700'], ";\n }\n }\n\n small {\n font-size: ")).call(_context, _base.fontSizes.xs, ";\n }\n\n ")
|
|
49
|
+
}) : null;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
exports.LegacyOverrides = LegacyOverrides;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
+
|
|
5
|
+
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
|
6
|
+
|
|
7
|
+
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
|
8
|
+
|
|
9
|
+
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
|
10
|
+
|
|
11
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
12
|
+
|
|
13
|
+
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
|
14
|
+
|
|
15
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
16
|
+
|
|
17
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
18
|
+
|
|
19
|
+
Object.defineProperty(exports, "__esModule", {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
exports.default = void 0;
|
|
23
|
+
|
|
24
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
25
|
+
|
|
26
|
+
var _global = _interopRequireDefault(require("./global"));
|
|
27
|
+
|
|
28
|
+
var base = _interopRequireWildcard(require("./base"));
|
|
29
|
+
|
|
30
|
+
var _react = require("@chakra-ui/react");
|
|
31
|
+
|
|
32
|
+
var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
|
|
33
|
+
|
|
34
|
+
var components = _interopRequireWildcard(require("../components/styles"));
|
|
35
|
+
|
|
36
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
37
|
+
|
|
38
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
39
|
+
|
|
40
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
41
|
+
|
|
42
|
+
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) { (0, _defineProperty2.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; }
|
|
43
|
+
|
|
44
|
+
// use this to extend the base theme of chakra, this adds on top of what is defined in baseConfig
|
|
45
|
+
var extendedTheme = {
|
|
46
|
+
initialColorMode: 'light',
|
|
47
|
+
useSystemColorMode: false,
|
|
48
|
+
styles: {
|
|
49
|
+
global: _global.default
|
|
50
|
+
},
|
|
51
|
+
remToPixels: function remToPixels(rem) {
|
|
52
|
+
var baseSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
|
|
53
|
+
return !rem ? 0 : "".concat(baseSize * Number(rem.replace('rem', '')));
|
|
54
|
+
}
|
|
55
|
+
}; // use this to override base themes from Chakra
|
|
56
|
+
|
|
57
|
+
var baseConfig = _objectSpread(_objectSpread(_objectSpread({}, _theme.default), base), {}, {
|
|
58
|
+
components: components
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
var _default = (0, _react.extendTheme)(extendedTheme, baseConfig);
|
|
62
|
+
|
|
63
|
+
exports.default = _default;
|