@via-profit/ui-kit 0.1.0-rc.21 → 0.1.0-rc.23

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.
Files changed (7) hide show
  1. package/Button/ButtonStandard.js +2 -2
  2. package/Modal/ModalConfirmBox.js +27 -27
  3. package/Modal/ModalDialog.js +28 -29
  4. package/Modal/ModalDrawer.js +24 -27
  5. package/Modal/ModalMessageBox.js +25 -26
  6. package/Typography/Paragraph.js +1 -1
  7. package/package.json +1 -1
package/Button/ButtonStandard.js CHANGED
@@ -36,8 +36,8 @@ const StyledStandardButton = (0, styled_1.default)(ButtonBase_1.default) `
36
36
  return $background.toString();
37
37
  }
38
38
  }};
39
- box-shadow: 0 0.125em 0.75em
40
- ${({ $background }) => {
39
+ box-shadow: 0 0.125em 0.25em ${({ $background }) => $background.darken(100).alpha(0.5).toString()};
40
+ ${({ $background }) => {
41
41
  switch (true) {
42
42
  case $background.luminance() > 0.49:
43
43
  return $background.darken(40).alpha(0.8).toString();
package/Modal/ModalConfirmBox.js CHANGED
@@ -98,50 +98,50 @@ const ModalConfirmBox = (props, ref) => {
98
98
  React.createElement(Content, { id: `${dialogID}-description` }, message),
99
99
  React.createElement(Footer, null,
100
100
  React.createElement(Button_1.default, { onClick: onRequestClose }, "Dismiss"),
101
- "Confirm"))),
101
+ React.createElement(Button_1.default, { color: "primary", onClick: onRequestYes }, "Confirm")))),
102
102
  React.createElement(react_1.Global, { styles: (0, react_1.css) `
103
103
  .modal-confirmbox .ReactModal__Overlay {
104
- position: fixed;
105
- top: 0;
106
- left: 0;
107
- right: 0;
108
- bottom: 0;
109
- z-index: ${theme.zIndex.modal};
110
- transition: background-color 120ms ease-in-out;
111
- background-color: rgba(0, 0, 0, 0);
104
+ position: fixed !important;
105
+ inset: 0 !important;
106
+ z-index: ${theme.zIndex.modal} !important;
107
+ transition: background-color 120ms ease-in-out !important;
108
+ background-color: ${theme.color.textPrimary.alpha(0).toString()}!important;
112
109
  }
113
110
 
114
111
  .modal-confirmbox .ReactModal__Overlay--after-open {
115
- background-color: rgba(0, 0, 0, 0.6);
112
+ background-color: ${theme.color.textPrimary.alpha(0.5).toString()}!important;
116
113
  }
117
114
 
118
115
  .modal-confirmbox .ReactModal__Overlay--before-close {
119
- background-color: rgba(0, 0, 0, 0);
116
+ background-color: ${theme.color.textPrimary.alpha(0).toString()}!important;
120
117
  }
121
118
 
122
119
  .modal-confirmbox .ReactModal__Content {
123
- position: absolute;
124
- top: 50%;
125
- left: 50%;
126
- opacity: 0;
127
- overflow: auto;
128
- -webkit-overflow-scrolling: touch;
129
- outline: none;
130
- background: ${theme.color.surface.toString()};
131
- border-radius: 1em;
132
- transform: translate(-50%, -40%);
133
- transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
120
+ inset: initial !important;
121
+ border: none !important;
122
+ position: absolute !important;
123
+ top: 50% !important;
124
+ padding: 0 !important;
125
+ left: 50% !important;
126
+ opacity: 0 !important;
127
+ overflow: auto !important;
128
+ -webkit-overflow-scrolling: touch !important;
129
+ outline: none !important;
130
+ background: ${theme.color.surface.toString()} !important;
131
+ border-radius: 1em !important;
132
+ transform: translate(-50%, -40%) !important;
133
+ transition: transform 100ms ease-in-out, opacity 100ms ease-in-out !important;
134
134
  }
135
135
 
136
136
  .modal-confirmbox .ReactModal__Content--after-open {
137
- opacity: 1;
138
- transform: translate(-50%, -50%);
139
- transition-duration: 160ms;
137
+ opacity: 1 !important;
138
+ transform: translate(-50%, -50%) !important;
139
+ transition-duration: 160ms !important;
140
140
  }
141
141
 
142
142
  .modal-confirmbox .ReactModal__Content--before-close {
143
- opacity: 0;
144
- transform: translate(-50%, 300px);
143
+ opacity: 0 !important;
144
+ transform: translate(-50%, 300px) !important;
145
145
  }
146
146
  ` })));
147
147
  };
package/Modal/ModalDialog.js CHANGED
@@ -41,9 +41,7 @@ const React = __importStar(require("react"));
41
41
  const styled_1 = __importDefault(require("@emotion/styled"));
42
42
  const react_1 = require("@emotion/react");
43
43
  const react_modal_1 = __importDefault(require("react-modal"));
44
- const Container = styled_1.default.div `
45
- padding: 1em;
46
- `;
44
+ const Container = styled_1.default.div ``;
47
45
  const ModalDialog = (props, ref) => {
48
46
  const { children } = props, otherProps = __rest(props, ["children"]);
49
47
  const theme = (0, react_1.useTheme)();
@@ -52,47 +50,48 @@ const ModalDialog = (props, ref) => {
52
50
  React.createElement(Container, null, children)),
53
51
  React.createElement(react_1.Global, { styles: (0, react_1.css) `
54
52
  .modal-dialog .ReactModal__Overlay {
55
- position: fixed;
56
- top: 0;
57
- left: 0;
58
- right: 0;
59
- bottom: 0;
60
- z-index: ${theme.zIndex.modal};
61
- transition: background-color 120ms ease-in-out;
62
- background-color: rgba(0, 0, 0, 0);
53
+ position: fixed !important;
54
+ inset: 0 !important;
55
+ z-index: ${theme.zIndex.modal} !important;
56
+ transition: background-color 120ms ease-in-out !important;
57
+ background-color: ${theme.color.textPrimary.alpha(0).toString()}!important;
63
58
  }
64
59
 
65
60
  .modal-dialog .ReactModal__Overlay--after-open {
66
- background-color: rgba(0, 0, 0, 0.6);
61
+ background-color: ${theme.color.textPrimary.alpha(0.5).toString()}!important;
67
62
  }
68
63
 
69
64
  .modal-dialog .ReactModal__Overlay--before-close {
70
- background-color: rgba(0, 0, 0, 0);
65
+ background-color: ${theme.color.textPrimary.alpha(0).toString()}!important;
71
66
  }
72
67
 
73
68
  .modal-dialog .ReactModal__Content {
74
- position: absolute;
75
- top: 50%;
76
- left: 50%;
77
- opacity: 0;
78
- overflow: auto;
79
- -webkit-overflow-scrolling: touch;
80
- outline: none;
81
- background: ${theme.color.surface.toString()};
82
- border-radius: 1em;
83
- transform: translate(-50%, -40%);
84
- transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
69
+ inset: initial !important;
70
+ border: none !important;
71
+ position: absolute !important;
72
+ top: 50% !important;
73
+ left: 50% !important;
74
+ opacity: 0 !important;
75
+ padding: 0 !important;
76
+ overflow: auto !important;
77
+ -webkit-overflow-scrolling: touch !important;
78
+ outline: none !important;
79
+ padding: 1em !important;
80
+ background: ${theme.color.surface.toString()} !important;
81
+ border-radius: 1em !important;
82
+ transform: translate(-50%, -40%) !important;
83
+ transition: transform 100ms ease-in-out, opacity 100ms ease-in-out !important;
85
84
  }
86
85
 
87
86
  .modal-dialog .ReactModal__Content--after-open {
88
- opacity: 1;
89
- transform: translate(-50%, -50%);
90
- transition-duration: 160ms;
87
+ opacity: 1 !important;
88
+ transform: translate(-50%, -50%) !important;
89
+ transition-duration: 160ms !important;
91
90
  }
92
91
 
93
92
  .modal-dialog .ReactModal__Content--before-close {
94
- opacity: 0;
95
- transform: translate(-50%, 300px);
93
+ opacity: 0 !important;
94
+ transform: translate(-50%, 300px) !important;
96
95
  }
97
96
  ` })));
98
97
  };
package/Modal/ModalDrawer.js CHANGED
@@ -45,7 +45,7 @@ const Button_1 = __importDefault(require("../Button"));
45
45
  const CloseIcon_1 = __importDefault(require("./CloseIcon"));
46
46
  const Container = styled_1.default.div `
47
47
  min-height: 2rem;
48
- max-height: calc(100vh - 3rem);
48
+ height: 100%;
49
49
  display: flex;
50
50
  flex-flow: column;
51
51
  `;
@@ -66,13 +66,11 @@ const Title = styled_1.default.div `
66
66
  font-weight: 600;
67
67
  margin-right: 1em;
68
68
  `;
69
- const Footer = styled_1.default.div `
70
- padding: 1em;
71
- `;
69
+ const Footer = styled_1.default.div ``;
72
70
  const Inner = styled_1.default.div `
73
- padding: 1em;
74
71
  overflow-y: auto;
75
72
  flex: 1;
73
+ display: flex;
76
74
  `;
77
75
  const CloseButton = (0, styled_1.default)(Button_1.default) `
78
76
  margin-left: ${props => (props.$withToolbar ? '1em' : 0)};
@@ -106,44 +104,43 @@ const ModalDrawer = (props, ref) => {
106
104
  React.createElement(react_1.Global, { styles: (0, react_1.css) `
107
105
  .modal-drawer .ReactModal__Overlay {
108
106
  position: fixed;
109
- top: 0;
110
- left: 0;
111
- right: 0;
112
- bottom: 0;
113
- z-index: ${theme.zIndex.modal};
114
- background-color: rgba(0, 0, 0, 0);
107
+ inset: 0;
108
+ z-index: ${theme.zIndex.modal}!important;
109
+ background-color: ${theme.color.textPrimary.alpha(0).toString()}!important;
115
110
  transition: background-color 240ms ease-out;
116
111
  }
117
112
 
118
113
  .modal-drawer .ReactModal__Overlay--after-open {
119
- background-color: rgba(0, 0, 0, 0.4);
114
+ background-color: ${theme.color.textPrimary.alpha(0.5).toString()}!important;
120
115
  }
121
116
 
122
117
  .modal-drawer .ReactModal__Overlay--before-close {
123
- background-color: rgba(0, 0, 0, 0);
118
+ background-color: ${theme.color.textPrimary.alpha(0).toString()}!important;
124
119
  }
125
120
 
126
121
  .modal-drawer .ReactModal__Content {
127
- position: absolute;
128
- bottom: 0;
129
- left: 0;
130
- right: 0;
131
- overflow: auto;
132
- -webkit-overflow-scrolling: touch;
133
- outline: none;
134
- background: ${theme.color.surface.toString()};
135
- border-radius: 1em 1em 0 0;
136
- transform: translate(0, 100%);
137
- transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
122
+ border: none !important;
123
+ position: absolute !important;
124
+ bottom: 0 !important;
125
+ padding: 0 !important;
126
+ left: 0 !important;
127
+ right: 0 !important;
128
+ overflow: auto !important;
129
+ -webkit-overflow-scrolling: touch !important;
130
+ outline: none !important;
131
+ background: ${theme.color.surface.toString()}!important;
132
+ border-radius: 1em 1em 0 0 !important;
133
+ transform: translate(0, 100%) !important;
134
+ transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
138
135
  }
139
136
 
140
137
  .modal-drawer .ReactModal__Content--after-open {
141
- transform: translate(0, 0);
138
+ transform: translate(0, 0) !important;
142
139
  }
143
140
 
144
141
  .modal-drawer .ReactModal__Content--before-close {
145
- transform: translate(0, 100%);
146
- transition-duration: 160ms;
142
+ transform: translate(0, 100%) !important;
143
+ transition-duration: 160ms !important;
147
144
  }
148
145
  ` })));
149
146
  };
package/Modal/ModalMessageBox.js CHANGED
@@ -100,47 +100,46 @@ const ModalMessageBox = (props, ref) => {
100
100
  React.createElement(Button_1.default, { onClick: onRequestClose, ref: buttonRef }, "OK")))),
101
101
  React.createElement(react_1.Global, { styles: (0, react_1.css) `
102
102
  .modal-messagebox .ReactModal__Overlay {
103
- position: fixed;
104
- top: 0;
105
- left: 0;
106
- right: 0;
107
- bottom: 0;
108
- z-index: ${theme.zIndex.modal};
109
- transition: background-color 120ms ease-in-out;
110
- background-color: rgba(0, 0, 0, 0);
103
+ position: fixed !important;
104
+ inset: 0 !important;
105
+ z-index: ${theme.zIndex.modal} !important;
106
+ transition: background-color 120ms ease-in-out !important;
107
+ background-color: ${theme.color.textPrimary.alpha(0).toString()}!important;
111
108
  }
112
109
 
113
110
  .modal-messagebox .ReactModal__Overlay--after-open {
114
- background-color: rgba(0, 0, 0, 0.6);
111
+ background-color: ${theme.color.textPrimary.alpha(0.5).toString()}!important;
115
112
  }
116
113
 
117
114
  .modal-messagebox .ReactModal__Overlay--before-close {
118
- background-color: rgba(0, 0, 0, 0);
115
+ background-color: ${theme.color.textPrimary.alpha(0).toString()}!important;
119
116
  }
120
117
 
121
118
  .modal-messagebox .ReactModal__Content {
122
- position: absolute;
123
- top: 50%;
124
- left: 50%;
125
- opacity: 0;
126
- overflow: auto;
127
- -webkit-overflow-scrolling: touch;
128
- outline: none;
129
- background: ${theme.color.surface.toString()};
130
- border-radius: 1em;
131
- transform: translate(-50%, -40%);
132
- transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
119
+ inset: initial !important;
120
+ padding: 0 !important;
121
+ position: absolute !important;
122
+ top: 50% !important;
123
+ left: 50% !important;
124
+ opacity: 0 !important;
125
+ overflow: auto !important;
126
+ -webkit-overflow-scrolling: touch !important;
127
+ outline: none !important;
128
+ background: ${theme.color.surface.toString()} !important;
129
+ border-radius: 1em !important;
130
+ transform: translate(-50%, -40%) !important;
131
+ transition: transform 100ms ease-in-out, opacity 100ms ease-in-out !important;
133
132
  }
134
133
 
135
134
  .modal-messagebox .ReactModal__Content--after-open {
136
- opacity: 1;
137
- transform: translate(-50%, -50%);
138
- transition-duration: 160ms;
135
+ opacity: 1 !important;
136
+ transform: translate(-50%, -50%) !important;
137
+ transition-duration: 160ms !important;
139
138
  }
140
139
 
141
140
  .modal-messagebox .ReactModal__Content--before-close {
142
- opacity: 0;
143
- transform: translate(-50%, 300px);
141
+ opacity: 0 !important;
142
+ transform: translate(-50%, 300px) !important;
144
143
  }
145
144
  ` })));
146
145
  };
package/Typography/Paragraph.js CHANGED
@@ -47,6 +47,6 @@ const StyledParagraph = styled_1.default.p `
47
47
  `;
48
48
  const Paragraph = (props, ref) => {
49
49
  const { noMargin, children } = props, restProps = __rest(props, ["noMargin", "children"]);
50
- return (React.createElement(StyledParagraph, Object.assign({}, restProps, { ref: ref }), children));
50
+ return (React.createElement(StyledParagraph, Object.assign({}, restProps, { "$noMargin": noMargin, ref: ref }), children));
51
51
  };
52
52
  exports.default = React.forwardRef(Paragraph);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@via-profit/ui-kit",
3
- "version": "0.1.0-rc.21",
3
+ "version": "0.1.0-rc.23",
4
4
  "description": "UI Kit",
5
5
  "repository": {
6
6
  "type": "git",