@mirai/ui 1.0.17 → 1.0.20
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/build/components/Notification/Notification.js +69 -0
- package/build/components/Notification/Notification.js.map +1 -0
- package/build/components/Notification/Notification.module.css +65 -0
- package/build/components/Notification/__tests__/__snapshots__/Notification.test.js.snap +351 -0
- package/build/components/Notification/index.js +19 -0
- package/build/components/Notification/index.js.map +1 -0
- package/build/components/index.js +13 -0
- package/build/components/index.js.map +1 -1
- package/build/primitives/Icon/Icon.constants.js +8 -1
- package/build/primitives/Icon/Icon.constants.js.map +1 -1
- package/build/theme/default.theme.css +9 -8
- package/build/theme/helpers/colorShade.js +34 -0
- package/build/theme/helpers/colorShade.js.map +1 -0
- package/build/theme/helpers/index.js +13 -0
- package/build/theme/helpers/index.js.map +1 -1
- package/build/theme/theme.js +13 -0
- package/build/theme/theme.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Notification = void 0;
|
|
7
|
+
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _helpers = require("../../helpers");
|
|
13
|
+
|
|
14
|
+
var _primitives = require("../../primitives");
|
|
15
|
+
|
|
16
|
+
var _NotificationModule = _interopRequireDefault(require("./Notification.module.css"));
|
|
17
|
+
|
|
18
|
+
var _excluded = ["children", "error", "success", "title", "warning", "onClose"];
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
|
|
22
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
23
|
+
|
|
24
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
25
|
+
|
|
26
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
27
|
+
|
|
28
|
+
var Notification = function Notification(_ref) {
|
|
29
|
+
var children = _ref.children,
|
|
30
|
+
error = _ref.error,
|
|
31
|
+
success = _ref.success,
|
|
32
|
+
title = _ref.title,
|
|
33
|
+
warning = _ref.warning,
|
|
34
|
+
onClose = _ref.onClose,
|
|
35
|
+
others = _objectWithoutProperties(_ref, _excluded);
|
|
36
|
+
|
|
37
|
+
return /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
|
|
38
|
+
row: true,
|
|
39
|
+
className: (0, _helpers.styles)(_NotificationModule.default.notification, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : undefined, others.className)
|
|
40
|
+
}), /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
41
|
+
name: error ? 'Error' : warning ? 'Warning' : success ? 'Success' : 'Info',
|
|
42
|
+
className: _NotificationModule.default.icon
|
|
43
|
+
}), /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
44
|
+
className: _NotificationModule.default.text
|
|
45
|
+
}, title && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
46
|
+
bold: true,
|
|
47
|
+
small: true
|
|
48
|
+
}, "Title"), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
49
|
+
small: true
|
|
50
|
+
}, children)), onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
51
|
+
className: _NotificationModule.default.pressable,
|
|
52
|
+
onPress: onClose
|
|
53
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
54
|
+
name: "Close",
|
|
55
|
+
className: _NotificationModule.default.icon
|
|
56
|
+
})));
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
exports.Notification = Notification;
|
|
60
|
+
Notification.displayName = 'Component:Notification';
|
|
61
|
+
Notification.propTypes = {
|
|
62
|
+
children: _propTypes.default.string.isRequired,
|
|
63
|
+
error: _propTypes.default.bool,
|
|
64
|
+
success: _propTypes.default.bool,
|
|
65
|
+
title: _propTypes.default.string,
|
|
66
|
+
warning: _propTypes.default.bool,
|
|
67
|
+
onClose: _propTypes.default.func
|
|
68
|
+
};
|
|
69
|
+
//# sourceMappingURL=Notification.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Notification.js","names":["Notification","children","error","success","title","warning","onClose","others","style","notification","undefined","className","icon","text","pressable","displayName","propTypes","PropTypes","string","isRequired","bool","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({ children, error, success, title, warning, onClose, ...others }) => (\n <View\n {...others}\n row\n className={styles(\n style.notification,\n error ? style.error : warning ? style.warning : success ? style.success : undefined,\n others.className,\n )}\n >\n <Icon name={error ? 'Error' : warning ? 'Warning' : success ? 'Success' : 'Info'} className={style.icon} />\n <View className={style.text}>\n {title && (\n <Text bold small>\n Title\n </Text>\n )}\n <Text small>{children}</Text>\n </View>\n {onClose && (\n <Pressable className={style.pressable} onPress={onClose}>\n <Icon name=\"Close\" className={style.icon} />\n </Pressable>\n )}\n </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n children: PropTypes.string.isRequired,\n error: PropTypes.bool,\n success: PropTypes.bool,\n title: PropTypes.string,\n warning: PropTypes.bool,\n onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe;EAAA,IAAGC,QAAH,QAAGA,QAAH;EAAA,IAAaC,KAAb,QAAaA,KAAb;EAAA,IAAoBC,OAApB,QAAoBA,OAApB;EAAA,IAA6BC,KAA7B,QAA6BA,KAA7B;EAAA,IAAoCC,OAApC,QAAoCA,OAApC;EAAA,IAA6CC,OAA7C,QAA6CA,OAA7C;EAAA,IAAyDC,MAAzD;;EAAA,oBACnB,6BAAC,gBAAD,eACMA,MADN;IAEE,GAAG,MAFL;IAGE,SAAS,EAAE,qBACTC,4BAAMC,YADG,EAETP,KAAK,GAAGM,4BAAMN,KAAT,GAAiBG,OAAO,GAAGG,4BAAMH,OAAT,GAAmBF,OAAO,GAAGK,4BAAML,OAAT,GAAmBO,SAFjE,EAGTH,MAAM,CAACI,SAHE;EAHb,iBASE,6BAAC,gBAAD;IAAM,IAAI,EAAET,KAAK,GAAG,OAAH,GAAaG,OAAO,GAAG,SAAH,GAAeF,OAAO,GAAG,SAAH,GAAe,MAA1E;IAAkF,SAAS,EAAEK,4BAAMI;EAAnG,EATF,eAUE,6BAAC,gBAAD;IAAM,SAAS,EAAEJ,4BAAMK;EAAvB,GACGT,KAAK,iBACJ,6BAAC,gBAAD;IAAM,IAAI,MAAV;IAAW,KAAK;EAAhB,WAFJ,eAME,6BAAC,gBAAD;IAAM,KAAK;EAAX,GAAaH,QAAb,CANF,CAVF,EAkBGK,OAAO,iBACN,6BAAC,qBAAD;IAAW,SAAS,EAAEE,4BAAMM,SAA5B;IAAuC,OAAO,EAAER;EAAhD,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC,OAAX;IAAmB,SAAS,EAAEE,4BAAMI;EAApC,EADF,CAnBJ,CADmB;AAAA,CAArB;;;AA2BAZ,YAAY,CAACe,WAAb,GAA2B,wBAA3B;AAEAf,YAAY,CAACgB,SAAb,GAAyB;EACvBf,QAAQ,EAAEgB,mBAAUC,MAAV,CAAiBC,UADJ;EAEvBjB,KAAK,EAAEe,mBAAUG,IAFM;EAGvBjB,OAAO,EAAEc,mBAAUG,IAHI;EAIvBhB,KAAK,EAAEa,mBAAUC,MAJM;EAKvBb,OAAO,EAAEY,mBAAUG,IALI;EAMvBd,OAAO,EAAEW,mBAAUI;AANI,CAAzB"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--mirai-ui-notification-border-radius: var(--mirai-ui-border-radius);
|
|
3
|
+
--mirai-ui-notification-padding: var(--mirai-ui-space-XS);
|
|
4
|
+
--mirai-ui-notification-icon: var(--mirai-ui-font-size-headline);
|
|
5
|
+
/* colors */
|
|
6
|
+
--mirai-ui-notification-error: var(--mirai-ui-error-300);
|
|
7
|
+
--mirai-ui-notification-error-color: var(--mirai-ui-error);
|
|
8
|
+
--mirai-ui-notification-default: var(--mirai-ui-accent-200);
|
|
9
|
+
--mirai-ui-notification-default-color: var(--mirai-ui-accent);
|
|
10
|
+
--mirai-ui-notification-success: var(--mirai-ui-success-300);
|
|
11
|
+
--mirai-ui-notification-success-color: var(--mirai-ui-success);
|
|
12
|
+
--mirai-ui-notification-warning: var(--mirai-ui-warning-300);
|
|
13
|
+
--mirai-ui-notification-warning-color: var(--mirai-ui-warning);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.notification {
|
|
17
|
+
background-color: var(--mirai-ui-notification-default);
|
|
18
|
+
border-radius: var(--mirai-ui-notification-border-radius);
|
|
19
|
+
padding: var(--mirai-ui-notification-padding);
|
|
20
|
+
border: solid 1px var(--mirai-ui-notification-default-color);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.notification * {
|
|
24
|
+
color: var(--mirai-ui-notification-default-color);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.notification.success {
|
|
28
|
+
background-color: var(--mirai-ui-notification-success);
|
|
29
|
+
border-color: var(--mirai-ui-notification-success-color);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.notification.success * {
|
|
33
|
+
color: var(--mirai-ui-notification-success-color);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.notification.error {
|
|
37
|
+
background-color: var(--mirai-ui-notification-error);
|
|
38
|
+
border-color: var(--mirai-ui-notification-error-color);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.notification.error * {
|
|
42
|
+
color: var(--mirai-ui-notification-error-color);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.notification.warning {
|
|
46
|
+
background-color: var(--mirai-ui-notification-warning);
|
|
47
|
+
border-color: var(--mirai-ui-notification-warning-color);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.notification.warning * {
|
|
51
|
+
color: var(--mirai-ui-notification-warning-color);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.icon {
|
|
55
|
+
line-height: var(--mirai-ui-notification-icon);
|
|
56
|
+
height: var(--mirai-ui-notification-icon);
|
|
57
|
+
width: var(--mirai-ui-notification-icon);
|
|
58
|
+
font-size: var(--mirai-ui-notification-icon);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.text {
|
|
62
|
+
flex: 1;
|
|
63
|
+
padding-left: var(--mirai-ui-notification-padding);
|
|
64
|
+
padding-right: var(--mirai-ui-notification-padding);
|
|
65
|
+
}
|
|
@@ -0,0 +1,351 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`component:<Notification> inherit:className 1`] = `
|
|
4
|
+
<DocumentFragment>
|
|
5
|
+
<div
|
|
6
|
+
class="view row notification mirai"
|
|
7
|
+
>
|
|
8
|
+
<span
|
|
9
|
+
class="icon icon"
|
|
10
|
+
>
|
|
11
|
+
<svg
|
|
12
|
+
fill="currentColor"
|
|
13
|
+
height="1em"
|
|
14
|
+
stroke="currentColor"
|
|
15
|
+
stroke-width="0"
|
|
16
|
+
viewBox="0 0 24 24"
|
|
17
|
+
width="1em"
|
|
18
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
19
|
+
>
|
|
20
|
+
<path
|
|
21
|
+
d="M0 0h24v24H0z"
|
|
22
|
+
fill="none"
|
|
23
|
+
/>
|
|
24
|
+
<path
|
|
25
|
+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
|
|
26
|
+
/>
|
|
27
|
+
</svg>
|
|
28
|
+
</span>
|
|
29
|
+
<div
|
|
30
|
+
class="view text"
|
|
31
|
+
>
|
|
32
|
+
<span
|
|
33
|
+
class="text small"
|
|
34
|
+
>
|
|
35
|
+
Lorem Ipsum...
|
|
36
|
+
</span>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
</DocumentFragment>
|
|
40
|
+
`;
|
|
41
|
+
|
|
42
|
+
exports[`component:<Notification> prop:error 1`] = `
|
|
43
|
+
<DocumentFragment>
|
|
44
|
+
<div
|
|
45
|
+
class="view row notification error"
|
|
46
|
+
>
|
|
47
|
+
<span
|
|
48
|
+
class="icon icon"
|
|
49
|
+
>
|
|
50
|
+
<svg
|
|
51
|
+
fill="currentColor"
|
|
52
|
+
height="1em"
|
|
53
|
+
stroke="currentColor"
|
|
54
|
+
stroke-width="0"
|
|
55
|
+
viewBox="0 0 24 24"
|
|
56
|
+
width="1em"
|
|
57
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
58
|
+
>
|
|
59
|
+
<path
|
|
60
|
+
d="M0 0h24v24H0z"
|
|
61
|
+
fill="none"
|
|
62
|
+
/>
|
|
63
|
+
<path
|
|
64
|
+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
|
|
65
|
+
/>
|
|
66
|
+
</svg>
|
|
67
|
+
</span>
|
|
68
|
+
<div
|
|
69
|
+
class="view text"
|
|
70
|
+
>
|
|
71
|
+
<span
|
|
72
|
+
class="text small"
|
|
73
|
+
>
|
|
74
|
+
Lorem Ipsum...
|
|
75
|
+
</span>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</DocumentFragment>
|
|
79
|
+
`;
|
|
80
|
+
|
|
81
|
+
exports[`component:<Notification> prop:onClose 1`] = `
|
|
82
|
+
<DocumentFragment>
|
|
83
|
+
<div
|
|
84
|
+
class="view row notification"
|
|
85
|
+
>
|
|
86
|
+
<span
|
|
87
|
+
class="icon icon"
|
|
88
|
+
>
|
|
89
|
+
<svg
|
|
90
|
+
fill="currentColor"
|
|
91
|
+
height="1em"
|
|
92
|
+
stroke="currentColor"
|
|
93
|
+
stroke-width="0"
|
|
94
|
+
viewBox="0 0 24 24"
|
|
95
|
+
width="1em"
|
|
96
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
97
|
+
>
|
|
98
|
+
<path
|
|
99
|
+
d="M0 0h24v24H0z"
|
|
100
|
+
fill="none"
|
|
101
|
+
/>
|
|
102
|
+
<path
|
|
103
|
+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
|
|
104
|
+
/>
|
|
105
|
+
</svg>
|
|
106
|
+
</span>
|
|
107
|
+
<div
|
|
108
|
+
class="view text"
|
|
109
|
+
>
|
|
110
|
+
<span
|
|
111
|
+
class="text small"
|
|
112
|
+
>
|
|
113
|
+
Lorem Ipsum...
|
|
114
|
+
</span>
|
|
115
|
+
</div>
|
|
116
|
+
<button
|
|
117
|
+
class="pressable pressable"
|
|
118
|
+
>
|
|
119
|
+
<span
|
|
120
|
+
class="icon icon"
|
|
121
|
+
>
|
|
122
|
+
<svg
|
|
123
|
+
fill="none"
|
|
124
|
+
height="1em"
|
|
125
|
+
stroke="currentColor"
|
|
126
|
+
stroke-linecap="round"
|
|
127
|
+
stroke-linejoin="round"
|
|
128
|
+
stroke-width="2"
|
|
129
|
+
viewBox="0 0 24 24"
|
|
130
|
+
width="1em"
|
|
131
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
132
|
+
>
|
|
133
|
+
<line
|
|
134
|
+
x1="18"
|
|
135
|
+
x2="6"
|
|
136
|
+
y1="6"
|
|
137
|
+
y2="18"
|
|
138
|
+
/>
|
|
139
|
+
<line
|
|
140
|
+
x1="6"
|
|
141
|
+
x2="18"
|
|
142
|
+
y1="6"
|
|
143
|
+
y2="18"
|
|
144
|
+
/>
|
|
145
|
+
</svg>
|
|
146
|
+
</span>
|
|
147
|
+
</button>
|
|
148
|
+
</div>
|
|
149
|
+
</DocumentFragment>
|
|
150
|
+
`;
|
|
151
|
+
|
|
152
|
+
exports[`component:<Notification> prop:success 1`] = `
|
|
153
|
+
<DocumentFragment>
|
|
154
|
+
<div
|
|
155
|
+
class="view row notification success"
|
|
156
|
+
>
|
|
157
|
+
<span
|
|
158
|
+
class="icon icon"
|
|
159
|
+
>
|
|
160
|
+
<svg
|
|
161
|
+
fill="currentColor"
|
|
162
|
+
height="1em"
|
|
163
|
+
stroke="currentColor"
|
|
164
|
+
stroke-width="0"
|
|
165
|
+
viewBox="0 0 24 24"
|
|
166
|
+
width="1em"
|
|
167
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
168
|
+
>
|
|
169
|
+
<path
|
|
170
|
+
d="M0 0h24v24H0z"
|
|
171
|
+
fill="none"
|
|
172
|
+
/>
|
|
173
|
+
<path
|
|
174
|
+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
|
175
|
+
/>
|
|
176
|
+
</svg>
|
|
177
|
+
</span>
|
|
178
|
+
<div
|
|
179
|
+
class="view text"
|
|
180
|
+
>
|
|
181
|
+
<span
|
|
182
|
+
class="text small"
|
|
183
|
+
>
|
|
184
|
+
Lorem Ipsum...
|
|
185
|
+
</span>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
</DocumentFragment>
|
|
189
|
+
`;
|
|
190
|
+
|
|
191
|
+
exports[`component:<Notification> prop:title 1`] = `
|
|
192
|
+
<DocumentFragment>
|
|
193
|
+
<div
|
|
194
|
+
class="view row notification"
|
|
195
|
+
>
|
|
196
|
+
<span
|
|
197
|
+
class="icon icon"
|
|
198
|
+
>
|
|
199
|
+
<svg
|
|
200
|
+
fill="currentColor"
|
|
201
|
+
height="1em"
|
|
202
|
+
stroke="currentColor"
|
|
203
|
+
stroke-width="0"
|
|
204
|
+
viewBox="0 0 24 24"
|
|
205
|
+
width="1em"
|
|
206
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
207
|
+
>
|
|
208
|
+
<path
|
|
209
|
+
d="M0 0h24v24H0z"
|
|
210
|
+
fill="none"
|
|
211
|
+
/>
|
|
212
|
+
<path
|
|
213
|
+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
|
|
214
|
+
/>
|
|
215
|
+
</svg>
|
|
216
|
+
</span>
|
|
217
|
+
<div
|
|
218
|
+
class="view text"
|
|
219
|
+
>
|
|
220
|
+
<span
|
|
221
|
+
class="text bold small"
|
|
222
|
+
>
|
|
223
|
+
Title
|
|
224
|
+
</span>
|
|
225
|
+
<span
|
|
226
|
+
class="text small"
|
|
227
|
+
>
|
|
228
|
+
Lorem Ipsum...
|
|
229
|
+
</span>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</DocumentFragment>
|
|
233
|
+
`;
|
|
234
|
+
|
|
235
|
+
exports[`component:<Notification> prop:warning 1`] = `
|
|
236
|
+
<DocumentFragment>
|
|
237
|
+
<div
|
|
238
|
+
class="view row notification warning"
|
|
239
|
+
>
|
|
240
|
+
<span
|
|
241
|
+
class="icon icon"
|
|
242
|
+
>
|
|
243
|
+
<svg
|
|
244
|
+
fill="currentColor"
|
|
245
|
+
height="1em"
|
|
246
|
+
stroke="currentColor"
|
|
247
|
+
stroke-width="0"
|
|
248
|
+
viewBox="0 0 24 24"
|
|
249
|
+
width="1em"
|
|
250
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
251
|
+
>
|
|
252
|
+
<path
|
|
253
|
+
d="M0 0h24v24H0z"
|
|
254
|
+
fill="none"
|
|
255
|
+
/>
|
|
256
|
+
<path
|
|
257
|
+
d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
|
|
258
|
+
/>
|
|
259
|
+
</svg>
|
|
260
|
+
</span>
|
|
261
|
+
<div
|
|
262
|
+
class="view text"
|
|
263
|
+
>
|
|
264
|
+
<span
|
|
265
|
+
class="text small"
|
|
266
|
+
>
|
|
267
|
+
Lorem Ipsum...
|
|
268
|
+
</span>
|
|
269
|
+
</div>
|
|
270
|
+
</div>
|
|
271
|
+
</DocumentFragment>
|
|
272
|
+
`;
|
|
273
|
+
|
|
274
|
+
exports[`component:<Notification> renders 1`] = `
|
|
275
|
+
<DocumentFragment>
|
|
276
|
+
<div
|
|
277
|
+
class="view row notification"
|
|
278
|
+
>
|
|
279
|
+
<span
|
|
280
|
+
class="icon icon"
|
|
281
|
+
>
|
|
282
|
+
<svg
|
|
283
|
+
fill="currentColor"
|
|
284
|
+
height="1em"
|
|
285
|
+
stroke="currentColor"
|
|
286
|
+
stroke-width="0"
|
|
287
|
+
viewBox="0 0 24 24"
|
|
288
|
+
width="1em"
|
|
289
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
290
|
+
>
|
|
291
|
+
<path
|
|
292
|
+
d="M0 0h24v24H0z"
|
|
293
|
+
fill="none"
|
|
294
|
+
/>
|
|
295
|
+
<path
|
|
296
|
+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
|
|
297
|
+
/>
|
|
298
|
+
</svg>
|
|
299
|
+
</span>
|
|
300
|
+
<div
|
|
301
|
+
class="view text"
|
|
302
|
+
>
|
|
303
|
+
<span
|
|
304
|
+
class="text small"
|
|
305
|
+
>
|
|
306
|
+
Lorem Ipsum...
|
|
307
|
+
</span>
|
|
308
|
+
</div>
|
|
309
|
+
</div>
|
|
310
|
+
</DocumentFragment>
|
|
311
|
+
`;
|
|
312
|
+
|
|
313
|
+
exports[`component:<Notification> testID 1`] = `
|
|
314
|
+
<DocumentFragment>
|
|
315
|
+
<div
|
|
316
|
+
class="view row notification"
|
|
317
|
+
data-testid="mirai"
|
|
318
|
+
>
|
|
319
|
+
<span
|
|
320
|
+
class="icon icon"
|
|
321
|
+
>
|
|
322
|
+
<svg
|
|
323
|
+
fill="currentColor"
|
|
324
|
+
height="1em"
|
|
325
|
+
stroke="currentColor"
|
|
326
|
+
stroke-width="0"
|
|
327
|
+
viewBox="0 0 24 24"
|
|
328
|
+
width="1em"
|
|
329
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
330
|
+
>
|
|
331
|
+
<path
|
|
332
|
+
d="M0 0h24v24H0z"
|
|
333
|
+
fill="none"
|
|
334
|
+
/>
|
|
335
|
+
<path
|
|
336
|
+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
|
|
337
|
+
/>
|
|
338
|
+
</svg>
|
|
339
|
+
</span>
|
|
340
|
+
<div
|
|
341
|
+
class="view text"
|
|
342
|
+
>
|
|
343
|
+
<span
|
|
344
|
+
class="text small"
|
|
345
|
+
>
|
|
346
|
+
Lorem Ipsum...
|
|
347
|
+
</span>
|
|
348
|
+
</div>
|
|
349
|
+
</div>
|
|
350
|
+
</DocumentFragment>
|
|
351
|
+
`;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
|
|
7
|
+
var _Notification = require("./Notification");
|
|
8
|
+
|
|
9
|
+
Object.keys(_Notification).forEach(function (key) {
|
|
10
|
+
if (key === "default" || key === "__esModule") return;
|
|
11
|
+
if (key in exports && exports[key] === _Notification[key]) return;
|
|
12
|
+
Object.defineProperty(exports, key, {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _Notification[key];
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Notification/index.js"],"sourcesContent":["export * from './Notification';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
@@ -121,6 +121,19 @@ Object.keys(_Modal).forEach(function (key) {
|
|
|
121
121
|
});
|
|
122
122
|
});
|
|
123
123
|
|
|
124
|
+
var _Notification = require("./Notification");
|
|
125
|
+
|
|
126
|
+
Object.keys(_Notification).forEach(function (key) {
|
|
127
|
+
if (key === "default" || key === "__esModule") return;
|
|
128
|
+
if (key in exports && exports[key] === _Notification[key]) return;
|
|
129
|
+
Object.defineProperty(exports, key, {
|
|
130
|
+
enumerable: true,
|
|
131
|
+
get: function get() {
|
|
132
|
+
return _Notification[key];
|
|
133
|
+
}
|
|
134
|
+
});
|
|
135
|
+
});
|
|
136
|
+
|
|
124
137
|
var _Table = require("./Table");
|
|
125
138
|
|
|
126
139
|
Object.keys(_Table).forEach(function (key) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/components/index.js"],"sourcesContent":["export * from './Button';\nexport * from './Calendar';\nexport * from './Form';\nexport * from './InputNumber';\nexport * from './InputOption';\nexport * from './InputSelect';\nexport * from './InputText';\nexport * from './Menu';\nexport * from './Modal';\nexport * from './Table';\nexport * from './Tooltip';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/components/index.js"],"sourcesContent":["export * from './Button';\nexport * from './Calendar';\nexport * from './Form';\nexport * from './InputNumber';\nexport * from './InputOption';\nexport * from './InputSelect';\nexport * from './InputText';\nexport * from './Menu';\nexport * from './Modal';\nexport * from './Notification';\nexport * from './Table';\nexport * from './Tooltip';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
@@ -7,6 +7,8 @@ exports.ICONS = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _fi = require("react-icons/fi");
|
|
9
9
|
|
|
10
|
+
var _md = require("react-icons/md");
|
|
11
|
+
|
|
10
12
|
var ICONS = {
|
|
11
13
|
Empty: undefined,
|
|
12
14
|
// directions
|
|
@@ -24,7 +26,12 @@ var ICONS = {
|
|
|
24
26
|
EyeOpen: _fi.FiEye,
|
|
25
27
|
EyeClose: _fi.FiEyeOff,
|
|
26
28
|
// Check
|
|
27
|
-
Check: _fi.FiCheck
|
|
29
|
+
Check: _fi.FiCheck,
|
|
30
|
+
// Notification,
|
|
31
|
+
Error: _md.MdError,
|
|
32
|
+
Info: _md.MdInfo,
|
|
33
|
+
Success: _md.MdCheckCircle,
|
|
34
|
+
Warning: _md.MdWarning
|
|
28
35
|
};
|
|
29
36
|
exports.ICONS = ICONS;
|
|
30
37
|
//# sourceMappingURL=Icon.constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.constants.js","names":["ICONS","Empty","undefined","Left","Right","Up","Down","Close","CloseArrow","Plus","Minus","EyeOpen","EyeClose","Check"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import {\n FiArrowUp as Up,\n FiArrowDown as Down,\n FiArrowLeft as Left,\n FiArrowRight as Right,\n FiChevronDown as CloseArrow,\n FiX as Close,\n FiEye as EyeOpen,\n FiEyeOff as EyeClose,\n
|
|
1
|
+
{"version":3,"file":"Icon.constants.js","names":["ICONS","Empty","undefined","Left","Right","Up","Down","Close","CloseArrow","Plus","Minus","EyeOpen","EyeClose","Check","Error","Info","Success","Warning"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import {\n // directions\n FiArrowUp as Up,\n FiArrowDown as Down,\n FiArrowLeft as Left,\n FiArrowRight as Right,\n // Close\n FiChevronDown as CloseArrow,\n FiX as Close,\n // Calc\n FiMinus as Minus,\n FiPlus as Plus,\n // Eye\n FiEye as EyeOpen,\n FiEyeOff as EyeClose,\n // Check\n FiCheck as Check,\n} from 'react-icons/fi';\nimport {\n // Notification\n MdError as Error,\n MdInfo as Info,\n MdCheckCircle as Success,\n MdWarning as Warning,\n} from 'react-icons/md';\n\nconst ICONS = {\n Empty: undefined,\n // directions\n Left,\n Right,\n Up,\n Down,\n // Close\n Close,\n CloseArrow,\n // Calc\n Plus,\n Minus,\n // Eye\n EyeOpen,\n EyeClose,\n // Check\n Check,\n // Notification,\n Error,\n Info,\n Success,\n Warning,\n};\n\nexport { ICONS };\n"],"mappings":";;;;;;;AAAA;;AAkBA;;AAQA,IAAMA,KAAK,GAAG;EACZC,KAAK,EAAEC,SADK;EAEZ;EACAC,IAAI,EAAJA,eAHY;EAIZC,KAAK,EAALA,gBAJY;EAKZC,EAAE,EAAFA,aALY;EAMZC,IAAI,EAAJA,eANY;EAOZ;EACAC,KAAK,EAALA,OARY;EASZC,UAAU,EAAVA,iBATY;EAUZ;EACAC,IAAI,EAAJA,UAXY;EAYZC,KAAK,EAALA,WAZY;EAaZ;EACAC,OAAO,EAAPA,SAdY;EAeZC,QAAQ,EAARA,YAfY;EAgBZ;EACAC,KAAK,EAALA,WAjBY;EAkBZ;EACAC,KAAK,EAALA,WAnBY;EAoBZC,IAAI,EAAJA,UApBY;EAqBZC,OAAO,EAAPA,iBArBY;EAsBZC,OAAO,EAAPA;AAtBY,CAAd"}
|
|
@@ -22,14 +22,15 @@
|
|
|
22
22
|
/* !TODO ------------------------------------------------------------------ */
|
|
23
23
|
|
|
24
24
|
--mirai-ui-accent: #3978c5;
|
|
25
|
-
--mirai-ui-accent-400: #
|
|
26
|
-
--mirai-ui-accent-300: #
|
|
27
|
-
--mirai-ui-accent-200: #
|
|
28
|
-
|
|
29
|
-
--mirai-ui-error: #
|
|
30
|
-
--mirai-ui-
|
|
31
|
-
--mirai-ui-success: #
|
|
32
|
-
--mirai-ui-
|
|
25
|
+
--mirai-ui-accent-400: #61a0ed;
|
|
26
|
+
--mirai-ui-accent-300: #89c8ff;
|
|
27
|
+
--mirai-ui-accent-200: #edffff;
|
|
28
|
+
--mirai-ui-error: #f44336;
|
|
29
|
+
--mirai-ui-error-300: #fde3e1;
|
|
30
|
+
--mirai-ui-success: #4caf50;
|
|
31
|
+
--mirai-ui-success-300: #e4f3e5;
|
|
32
|
+
--mirai-ui-warning: #ff9800;
|
|
33
|
+
--mirai-ui-warning-300: #fff0d9;
|
|
33
34
|
|
|
34
35
|
/* spacing */
|
|
35
36
|
--mirai-ui-space-XS: 8px;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.colorShade = void 0;
|
|
7
|
+
var R = 0;
|
|
8
|
+
var G = 8;
|
|
9
|
+
var B = 16;
|
|
10
|
+
var SCALE = {
|
|
11
|
+
400: 40,
|
|
12
|
+
300: 80,
|
|
13
|
+
200: 180
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
var colorShade = function colorShade() {
|
|
17
|
+
var hexColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#000000';
|
|
18
|
+
var magnitude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
19
|
+
if (!hexColor.charAt(0) === '#' || hexColor.length !== 7) return hexColor;
|
|
20
|
+
var decimalColor = parseInt(hexColor.slice(1), 16);
|
|
21
|
+
|
|
22
|
+
var range = function range(value) {
|
|
23
|
+
return value < 0 ? 0 : value > 255 ? 255 : value;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
return '#' + [R, G, B].map(function (item) {
|
|
27
|
+
return range((decimalColor >> item & 0xff) + (SCALE[magnitude] || 0)) << item;
|
|
28
|
+
}).reduce(function (previous, current) {
|
|
29
|
+
return previous + current;
|
|
30
|
+
}, 0).toString(16).padStart(6, '0');
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
exports.colorShade = colorShade;
|
|
34
|
+
//# sourceMappingURL=colorShade.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colorShade.js","names":["R","G","B","SCALE","colorShade","hexColor","magnitude","charAt","length","decimalColor","parseInt","slice","range","value","map","item","reduce","previous","current","toString","padStart"],"sources":["../../../src/theme/helpers/colorShade.js"],"sourcesContent":["const R = 0;\nconst G = 8;\nconst B = 16;\n\nconst SCALE = {\n 400: 40,\n 300: 80,\n 200: 180,\n};\n\nexport const colorShade = (hexColor = '#000000', magnitude = 0) => {\n if (!hexColor.charAt(0) === '#' || hexColor.length !== 7) return hexColor;\n\n const decimalColor = parseInt(hexColor.slice(1), 16);\n const range = (value) => (value < 0 ? 0 : value > 255 ? 255 : value);\n\n return (\n '#' +\n [R, G, B]\n .map((item) => range(((decimalColor >> item) & 0xff) + (SCALE[magnitude] || 0)) << item)\n .reduce((previous, current) => previous + current, 0)\n .toString(16)\n .padStart(6, '0')\n );\n};\n"],"mappings":";;;;;;AAAA,IAAMA,CAAC,GAAG,CAAV;AACA,IAAMC,CAAC,GAAG,CAAV;AACA,IAAMC,CAAC,GAAG,EAAV;AAEA,IAAMC,KAAK,GAAG;EACZ,KAAK,EADO;EAEZ,KAAK,EAFO;EAGZ,KAAK;AAHO,CAAd;;AAMO,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAyC;EAAA,IAAxCC,QAAwC,uEAA7B,SAA6B;EAAA,IAAlBC,SAAkB,uEAAN,CAAM;EACjE,IAAI,CAACD,QAAQ,CAACE,MAAT,CAAgB,CAAhB,CAAD,KAAwB,GAAxB,IAA+BF,QAAQ,CAACG,MAAT,KAAoB,CAAvD,EAA0D,OAAOH,QAAP;EAE1D,IAAMI,YAAY,GAAGC,QAAQ,CAACL,QAAQ,CAACM,KAAT,CAAe,CAAf,CAAD,EAAoB,EAApB,CAA7B;;EACA,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;IAAA,OAAYA,KAAK,GAAG,CAAR,GAAY,CAAZ,GAAgBA,KAAK,GAAG,GAAR,GAAc,GAAd,GAAoBA,KAAhD;EAAA,CAAd;;EAEA,OACE,MACA,CAACb,CAAD,EAAIC,CAAJ,EAAOC,CAAP,EACGY,GADH,CACO,UAACC,IAAD;IAAA,OAAUH,KAAK,CAAC,CAAEH,YAAY,IAAIM,IAAjB,GAAyB,IAA1B,KAAmCZ,KAAK,CAACG,SAAD,CAAL,IAAoB,CAAvD,CAAD,CAAL,IAAoES,IAA9E;EAAA,CADP,EAEGC,MAFH,CAEU,UAACC,QAAD,EAAWC,OAAX;IAAA,OAAuBD,QAAQ,GAAGC,OAAlC;EAAA,CAFV,EAEqD,CAFrD,EAGGC,QAHH,CAGY,EAHZ,EAIGC,QAJH,CAIY,CAJZ,EAIe,GAJf,CAFF;AAQD,CAdM"}
|
|
@@ -16,4 +16,17 @@ Object.keys(_camelcase).forEach(function (key) {
|
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
});
|
|
19
|
+
|
|
20
|
+
var _colorShade = require("./colorShade");
|
|
21
|
+
|
|
22
|
+
Object.keys(_colorShade).forEach(function (key) {
|
|
23
|
+
if (key === "default" || key === "__esModule") return;
|
|
24
|
+
if (key in exports && exports[key] === _colorShade[key]) return;
|
|
25
|
+
Object.defineProperty(exports, key, {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function get() {
|
|
28
|
+
return _colorShade[key];
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
});
|
|
19
32
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/theme/helpers/index.js"],"sourcesContent":["export * from './camelcase';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/theme/helpers/index.js"],"sourcesContent":["export * from './camelcase';\nexport * from './colorShade';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
package/build/theme/theme.js
CHANGED
|
@@ -20,6 +20,8 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
|
|
|
20
20
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
21
21
|
|
|
22
22
|
var VAR_DOMAIN = '--mirai-ui-';
|
|
23
|
+
var COLORS = ['accent'];
|
|
24
|
+
var MAGNITUDES = [400, 300, 200];
|
|
23
25
|
var Theme = {
|
|
24
26
|
get: function get() {
|
|
25
27
|
var domain = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : VAR_DOMAIN;
|
|
@@ -47,6 +49,17 @@ var Theme = {
|
|
|
47
49
|
style = _document$querySelect.style;
|
|
48
50
|
|
|
49
51
|
style.setProperty("".concat(domain).concat(variable), value);
|
|
52
|
+
Theme.shadeColors();
|
|
53
|
+
},
|
|
54
|
+
shadeColors: function shadeColors() {
|
|
55
|
+
var theme = Theme.get();
|
|
56
|
+
COLORS.filter(function (color) {
|
|
57
|
+
return theme[color] !== undefined;
|
|
58
|
+
}).forEach(function (color) {
|
|
59
|
+
return MAGNITUDES.forEach(function (magnitude) {
|
|
60
|
+
return Theme.setVariable("".concat(color, "-").concat(magnitude), (0, _helpers.colorShade)(theme[color], magnitude));
|
|
61
|
+
});
|
|
62
|
+
});
|
|
50
63
|
}
|
|
51
64
|
};
|
|
52
65
|
exports.Theme = Theme;
|
package/build/theme/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","names":["VAR_DOMAIN","Theme","get","domain","style","getComputedStyle","document","querySelector","variables","styleSheets","forEach","stylesheet","cssRules","filter","rule","type","name","includes","replace","getPropertyValue","trim","setVariable","variable","value","setProperty"],"sources":["../../src/theme/theme.js"],"sourcesContent":["const VAR_DOMAIN = '--mirai-ui-';\n\nimport { camelcase } from './helpers';\n\nexport const Theme = {\n get: (domain = VAR_DOMAIN) => {\n const style = getComputedStyle(document.querySelector(':root'));\n\n const variables = {};\n [...document.styleSheets].forEach((stylesheet) => {\n [...stylesheet.cssRules]\n .filter((rule) => rule.type === 1)\n .forEach((rule) => {\n [...rule.style]\n .filter((name) => name.includes(domain))\n .forEach((name) => (variables[camelcase(name.replace(domain, ''))] = style.getPropertyValue(name).trim()));\n });\n });\n\n return variables;\n },\n\n setVariable: (variable, value, domain = VAR_DOMAIN) => {\n const { style } = document.querySelector(':root');\n\n style.setProperty(`${domain}${variable}`, value);\n },\n};\n"],"mappings":";;;;;;;AAEA;;;;;;;;;;;;;;AAFA,IAAMA,UAAU,GAAG,aAAnB;
|
|
1
|
+
{"version":3,"file":"theme.js","names":["VAR_DOMAIN","COLORS","MAGNITUDES","Theme","get","domain","style","getComputedStyle","document","querySelector","variables","styleSheets","forEach","stylesheet","cssRules","filter","rule","type","name","includes","replace","getPropertyValue","trim","setVariable","variable","value","setProperty","shadeColors","theme","color","undefined","magnitude"],"sources":["../../src/theme/theme.js"],"sourcesContent":["const VAR_DOMAIN = '--mirai-ui-';\n\nimport { camelcase, colorShade } from './helpers';\n\nconst COLORS = ['accent'];\nconst MAGNITUDES = [400, 300, 200];\n\nexport const Theme = {\n get: (domain = VAR_DOMAIN) => {\n const style = getComputedStyle(document.querySelector(':root'));\n\n const variables = {};\n [...document.styleSheets].forEach((stylesheet) => {\n [...stylesheet.cssRules]\n .filter((rule) => rule.type === 1)\n .forEach((rule) => {\n [...rule.style]\n .filter((name) => name.includes(domain))\n .forEach((name) => (variables[camelcase(name.replace(domain, ''))] = style.getPropertyValue(name).trim()));\n });\n });\n\n return variables;\n },\n\n setVariable: (variable, value, domain = VAR_DOMAIN) => {\n const { style } = document.querySelector(':root');\n\n style.setProperty(`${domain}${variable}`, value);\n\n Theme.shadeColors();\n },\n\n shadeColors: () => {\n const theme = Theme.get();\n\n COLORS.filter((color) => theme[color] !== undefined).forEach((color) =>\n MAGNITUDES.forEach((magnitude) =>\n Theme.setVariable(`${color}-${magnitude}`, colorShade(theme[color], magnitude)),\n ),\n );\n },\n};\n"],"mappings":";;;;;;;AAEA;;;;;;;;;;;;;;AAFA,IAAMA,UAAU,GAAG,aAAnB;AAIA,IAAMC,MAAM,GAAG,CAAC,QAAD,CAAf;AACA,IAAMC,UAAU,GAAG,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX,CAAnB;AAEO,IAAMC,KAAK,GAAG;EACnBC,GAAG,EAAE,eAAyB;IAAA,IAAxBC,MAAwB,uEAAfL,UAAe;IAC5B,IAAMM,KAAK,GAAGC,gBAAgB,CAACC,QAAQ,CAACC,aAAT,CAAuB,OAAvB,CAAD,CAA9B;IAEA,IAAMC,SAAS,GAAG,EAAlB;;IACA,mBAAIF,QAAQ,CAACG,WAAb,EAA0BC,OAA1B,CAAkC,UAACC,UAAD,EAAgB;MAChD,mBAAIA,UAAU,CAACC,QAAf,EACGC,MADH,CACU,UAACC,IAAD;QAAA,OAAUA,IAAI,CAACC,IAAL,KAAc,CAAxB;MAAA,CADV,EAEGL,OAFH,CAEW,UAACI,IAAD,EAAU;QACjB,mBAAIA,IAAI,CAACV,KAAT,EACGS,MADH,CACU,UAACG,IAAD;UAAA,OAAUA,IAAI,CAACC,QAAL,CAAcd,MAAd,CAAV;QAAA,CADV,EAEGO,OAFH,CAEW,UAACM,IAAD;UAAA,OAAWR,SAAS,CAAC,wBAAUQ,IAAI,CAACE,OAAL,CAAaf,MAAb,EAAqB,EAArB,CAAV,CAAD,CAAT,GAAiDC,KAAK,CAACe,gBAAN,CAAuBH,IAAvB,EAA6BI,IAA7B,EAA5D;QAAA,CAFX;MAGD,CANH;IAOD,CARD;;IAUA,OAAOZ,SAAP;EACD,CAhBkB;EAkBnBa,WAAW,EAAE,qBAACC,QAAD,EAAWC,KAAX,EAA0C;IAAA,IAAxBpB,MAAwB,uEAAfL,UAAe;;IACrD,4BAAkBQ,QAAQ,CAACC,aAAT,CAAuB,OAAvB,CAAlB;IAAA,IAAQH,KAAR,yBAAQA,KAAR;;IAEAA,KAAK,CAACoB,WAAN,WAAqBrB,MAArB,SAA8BmB,QAA9B,GAA0CC,KAA1C;IAEAtB,KAAK,CAACwB,WAAN;EACD,CAxBkB;EA0BnBA,WAAW,EAAE,uBAAM;IACjB,IAAMC,KAAK,GAAGzB,KAAK,CAACC,GAAN,EAAd;IAEAH,MAAM,CAACc,MAAP,CAAc,UAACc,KAAD;MAAA,OAAWD,KAAK,CAACC,KAAD,CAAL,KAAiBC,SAA5B;IAAA,CAAd,EAAqDlB,OAArD,CAA6D,UAACiB,KAAD;MAAA,OAC3D3B,UAAU,CAACU,OAAX,CAAmB,UAACmB,SAAD;QAAA,OACjB5B,KAAK,CAACoB,WAAN,WAAqBM,KAArB,cAA8BE,SAA9B,GAA2C,yBAAWH,KAAK,CAACC,KAAD,CAAhB,EAAyBE,SAAzB,CAA3C,CADiB;MAAA,CAAnB,CAD2D;IAAA,CAA7D;EAKD;AAlCkB,CAAd"}
|