@via-profit/ui-kit 0.1.0-rc.20 → 0.1.0-rc.22

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 (8) hide show
  1. package/Button/ButtonPlain.js +14 -26
  2. package/Button/ButtonStandard.js +2 -2
  3. package/Modal/ModalConfirmBox.js +26 -27
  4. package/Modal/ModalDialog.js +26 -26
  5. package/Modal/ModalDrawer.js +20 -22
  6. package/Modal/ModalMessageBox.js +25 -26
  7. package/Typography/Paragraph.js +1 -1
  8. package/package.json +1 -1
package/Button/ButtonPlain.js CHANGED
@@ -29,24 +29,19 @@ const StyledPlainButton = (0, styled_1.default)(ButtonBase_1.default) `
29
29
  return $color.toString();
30
30
  }
31
31
  }};
32
- background-color: ${({ $background, disabled }) => {
33
- switch (true) {
34
- case disabled:
35
- return $background.darken(10).toString();
36
- default:
37
- return $background.toString();
38
- }
39
- }};
40
- ${({ disabled, $background, theme }) => !disabled &&
32
+ background: none;
33
+ ${({ disabled, theme, $color }) => !disabled &&
41
34
  (0, react_2.css) `
42
35
  &:hover {
43
- background-color: ${$background.darken(30).toString()};
36
+ color: ${$color.darken(30).toString()};
37
+ background-color: ${$color.alpha(0.1).toString()};
44
38
  }
45
39
  &:active {
46
- background-color: ${$background.darken(80).toString()};
40
+ color: ${$color.darken(80).toString()};
41
+ background-color: ${$color.alpha(0.3).toString()};
47
42
  }
48
43
  &:focus-visible {
49
- outline-color: ${$background.rgbString() === theme.color.accentPrimary.rgbString()
44
+ outline-color: ${$color.rgbString() === theme.color.accentPrimary.rgbString()
50
45
  ? theme.color.textPrimary.toString()
51
46
  : theme.color.accentPrimary.toString()};
52
47
  }
@@ -55,48 +50,41 @@ const StyledPlainButton = (0, styled_1.default)(ButtonBase_1.default) `
55
50
  const ButtonPlain = (props, ref) => {
56
51
  const { children, disabled, color } = props, restProps = __rest(props, ["children", "disabled", "color"]);
57
52
  const theme = (0, react_2.useTheme)();
58
- const { $background, $color } = react_1.default.useMemo(() => {
53
+ const { $color } = react_1.default.useMemo(() => {
59
54
  switch (true) {
60
55
  case color === 'primary':
61
56
  return {
62
- $color: theme.color.accentPrimaryContrast,
63
- $background: theme.color.accentPrimary,
57
+ $color: theme.color.accentPrimary,
64
58
  };
65
59
  case color === 'secondary':
66
60
  return {
67
- $color: theme.color.accentSecondaryContrast,
68
- $background: theme.color.accentSecondary,
61
+ $color: theme.color.accentSecondary,
69
62
  };
70
63
  case typeof color === 'undefined':
71
64
  case color === 'default':
72
65
  return {
73
- $background: theme.color.surface,
74
66
  $color: theme.color.textPrimary,
75
67
  };
76
68
  case typeof color === 'string': {
77
- let $background = theme.color.surface;
69
+ let $color = theme.color.textPrimary;
78
70
  try {
79
71
  if (color) {
80
- $background = new Color_1.default(color);
72
+ $color = new Color_1.default(color);
81
73
  }
82
74
  }
83
75
  catch (err) {
84
76
  console.error(`invalid color value «${color}»`);
85
77
  }
86
78
  return {
87
- $background,
88
- $color: $background.contrast(theme.color.textPrimary.rgbString()) > 5
89
- ? theme.color.textPrimary
90
- : theme.color.surface,
79
+ $color,
91
80
  };
92
81
  }
93
82
  default:
94
83
  return {
95
- $background: theme.color.surface,
96
84
  $color: theme.color.textPrimary,
97
85
  };
98
86
  }
99
87
  }, [color, theme.color]);
100
- return (react_1.default.createElement(StyledPlainButton, Object.assign({ "$color": $color, "$background": $background, disabled: disabled }, restProps, { ref: ref }), children));
88
+ return (react_1.default.createElement(StyledPlainButton, Object.assign({ "$color": $color, disabled: disabled }, restProps, { ref: ref }), children));
101
89
  };
102
90
  exports.default = react_1.default.forwardRef(ButtonPlain);
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,49 @@ 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
+ position: absolute !important;
122
+ top: 50% !important;
123
+ padding: 0 !important;
124
+ left: 50% !important;
125
+ opacity: 0 !important;
126
+ overflow: auto !important;
127
+ -webkit-overflow-scrolling: touch !important;
128
+ outline: none !important;
129
+ background: ${theme.color.surface.toString()} !important;
130
+ border-radius: 1em !important;
131
+ transform: translate(-50%, -40%) !important;
132
+ transition: transform 100ms ease-in-out, opacity 100ms ease-in-out !important;
134
133
  }
135
134
 
136
135
  .modal-confirmbox .ReactModal__Content--after-open {
137
- opacity: 1;
138
- transform: translate(-50%, -50%);
139
- transition-duration: 160ms;
136
+ opacity: 1 !important;
137
+ transform: translate(-50%, -50%) !important;
138
+ transition-duration: 160ms !important;
140
139
  }
141
140
 
142
141
  .modal-confirmbox .ReactModal__Content--before-close {
143
- opacity: 0;
144
- transform: translate(-50%, 300px);
142
+ opacity: 0 !important;
143
+ transform: translate(-50%, 300px) !important;
145
144
  }
146
145
  ` })));
147
146
  };
package/Modal/ModalDialog.js CHANGED
@@ -52,47 +52,47 @@ const ModalDialog = (props, ref) => {
52
52
  React.createElement(Container, null, children)),
53
53
  React.createElement(react_1.Global, { styles: (0, react_1.css) `
54
54
  .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);
55
+ position: fixed !important;
56
+ inset: 0 !important;
57
+ z-index: ${theme.zIndex.modal} !important;
58
+ transition: background-color 120ms ease-in-out !important;
59
+ background-color: ${theme.color.textPrimary.alpha(0).toString()}!important;
63
60
  }
64
61
 
65
62
  .modal-dialog .ReactModal__Overlay--after-open {
66
- background-color: rgba(0, 0, 0, 0.6);
63
+ background-color: ${theme.color.textPrimary.alpha(0.5).toString()}!important;
67
64
  }
68
65
 
69
66
  .modal-dialog .ReactModal__Overlay--before-close {
70
- background-color: rgba(0, 0, 0, 0);
67
+ background-color: ${theme.color.textPrimary.alpha(0).toString()}!important;
71
68
  }
72
69
 
73
70
  .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;
71
+ inset: initial !important;
72
+ position: absolute !important;
73
+ top: 50% !important;
74
+ left: 50% !important;
75
+ opacity: 0 !important;
76
+ padding: 0 !important;
77
+ overflow: auto !important;
78
+ -webkit-overflow-scrolling: touch !important;
79
+ outline: none !important;
80
+ padding: 1em !important;
81
+ background: ${theme.color.surface.toString()} !important;
82
+ border-radius: 1em !important;
83
+ transform: translate(-50%, -40%) !important;
84
+ transition: transform 100ms ease-in-out, opacity 100ms ease-in-out !important;
85
85
  }
86
86
 
87
87
  .modal-dialog .ReactModal__Content--after-open {
88
- opacity: 1;
89
- transform: translate(-50%, -50%);
90
- transition-duration: 160ms;
88
+ opacity: 1 !important;
89
+ transform: translate(-50%, -50%) !important;
90
+ transition-duration: 160ms !important;
91
91
  }
92
92
 
93
93
  .modal-dialog .ReactModal__Content--before-close {
94
- opacity: 0;
95
- transform: translate(-50%, 300px);
94
+ opacity: 0 !important;
95
+ transform: translate(-50%, 300px) !important;
96
96
  }
97
97
  ` })));
98
98
  };
package/Modal/ModalDrawer.js CHANGED
@@ -106,44 +106,42 @@ const ModalDrawer = (props, ref) => {
106
106
  React.createElement(react_1.Global, { styles: (0, react_1.css) `
107
107
  .modal-drawer .ReactModal__Overlay {
108
108
  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);
109
+ inset: 0;
110
+ z-index: ${theme.zIndex.modal}!important;
111
+ background-color: ${theme.color.textPrimary.alpha(0).toString()}!important;
115
112
  transition: background-color 240ms ease-out;
116
113
  }
117
114
 
118
115
  .modal-drawer .ReactModal__Overlay--after-open {
119
- background-color: rgba(0, 0, 0, 0.4);
116
+ background-color: ${theme.color.textPrimary.alpha(0.5).toString()}!important;
120
117
  }
121
118
 
122
119
  .modal-drawer .ReactModal__Overlay--before-close {
123
- background-color: rgba(0, 0, 0, 0);
120
+ background-color: ${theme.color.textPrimary.alpha(0).toString()}!important;
124
121
  }
125
122
 
126
123
  .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;
124
+ position: absolute !important;
125
+ bottom: 0 !important;
126
+ padding: 0 !important;
127
+ left: 0 !important;
128
+ right: 0 !important;
129
+ overflow: auto !important;
130
+ -webkit-overflow-scrolling: touch !important;
131
+ outline: none !important;
132
+ background: ${theme.color.surface.toString()}!important;
133
+ border-radius: 1em 1em 0 0 !important;
134
+ transform: translate(0, 100%) !important;
135
+ transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
138
136
  }
139
137
 
140
138
  .modal-drawer .ReactModal__Content--after-open {
141
- transform: translate(0, 0);
139
+ transform: translate(0, 0) !important;
142
140
  }
143
141
 
144
142
  .modal-drawer .ReactModal__Content--before-close {
145
- transform: translate(0, 100%);
146
- transition-duration: 160ms;
143
+ transform: translate(0, 100%) !important;
144
+ transition-duration: 160ms !important;
147
145
  }
148
146
  ` })));
149
147
  };
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.20",
3
+ "version": "0.1.0-rc.22",
4
4
  "description": "UI Kit",
5
5
  "repository": {
6
6
  "type": "git",