@teamturing/react-kit 2.28.0 → 2.28.1

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 (4) hide show
  1. package/dist/index.js +58 -30
  2. package/esm/core/Button/index.js +26 -14
  3. package/esm/core/IconButton/index.js +32 -16
  4. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -16951,8 +16951,10 @@ const BaseButton = styled__default.default(UnstyledButton)(({
16951
16951
  '& svg': {
16952
16952
  color: theme.colors['icon/inverse']
16953
16953
  },
16954
- '&:hover:not(:disabled)': {
16955
- backgroundColor: theme.colors['bg/primary/hovered']
16954
+ '@media (hover: hover) and (pointer: fine)': {
16955
+ '&:hover:not(:disabled)': {
16956
+ backgroundColor: theme.colors['bg/primary/hovered']
16957
+ }
16956
16958
  },
16957
16959
  '&:active:not(:disabled)': {
16958
16960
  backgroundColor: theme.colors['bg/primary/pressed']
@@ -16977,8 +16979,10 @@ const BaseButton = styled__default.default(UnstyledButton)(({
16977
16979
  '& svg': {
16978
16980
  color: theme.colors['icon/primary']
16979
16981
  },
16980
- '&:hover:not(:disabled)': {
16981
- backgroundColor: theme.colors['bg/secondary/hovered']
16982
+ '@media (hover: hover) and (pointer: fine)': {
16983
+ '&:hover:not(:disabled)': {
16984
+ backgroundColor: theme.colors['bg/secondary/hovered']
16985
+ }
16982
16986
  },
16983
16987
  '&:active:not(:disabled)': {
16984
16988
  backgroundColor: theme.colors['bg/secondary/pressed']
@@ -17003,8 +17007,10 @@ const BaseButton = styled__default.default(UnstyledButton)(({
17003
17007
  '& svg': {
17004
17008
  color: theme.colors['icon/accent/gray']
17005
17009
  },
17006
- '&:hover:not(:disabled)': {
17007
- backgroundColor: theme.colors['bg/neutral/hovered']
17010
+ '@media (hover: hover) and (pointer: fine)': {
17011
+ '&:hover:not(:disabled)': {
17012
+ backgroundColor: theme.colors['bg/neutral/hovered']
17013
+ }
17008
17014
  },
17009
17015
  '&:active:not(:disabled)': {
17010
17016
  backgroundColor: theme.colors['bg/neutral/pressed']
@@ -17042,8 +17048,10 @@ const BaseButton = styled__default.default(UnstyledButton)(({
17042
17048
  borderRadius: theme.radii.full,
17043
17049
  boxSizing: 'border-box'
17044
17050
  },
17045
- '&:hover:not(:disabled)': {
17046
- backgroundColor: theme.colors['bg/neutral/subtler/hovered']
17051
+ '@media (hover: hover) and (pointer: fine)': {
17052
+ '&:hover:not(:disabled)': {
17053
+ backgroundColor: theme.colors['bg/neutral/subtler/hovered']
17054
+ }
17047
17055
  },
17048
17056
  '&:active:not(:disabled)': {
17049
17057
  backgroundColor: theme.colors['bg/neutral/subtler/pressed']
@@ -17071,10 +17079,12 @@ const BaseButton = styled__default.default(UnstyledButton)(({
17071
17079
  '& svg': {
17072
17080
  color: theme.colors['icon/neutral/bolder']
17073
17081
  },
17074
- '&:hover:not(:disabled)': {
17075
- 'color': theme.colors['text/neutral'],
17076
- '& svg': {
17077
- color: theme.colors['icon/accent/gray']
17082
+ '@media (hover: hover) and (pointer: fine)': {
17083
+ '&:hover:not(:disabled)': {
17084
+ 'color': theme.colors['text/neutral'],
17085
+ '& svg': {
17086
+ color: theme.colors['icon/accent/gray']
17087
+ }
17078
17088
  }
17079
17089
  },
17080
17090
  '&:active:not(:disabled)': {
@@ -17103,8 +17113,10 @@ const BaseButton = styled__default.default(UnstyledButton)(({
17103
17113
  '& svg': {
17104
17114
  color: theme.colors['icon/inverse']
17105
17115
  },
17106
- '&:hover:not(:disabled)': {
17107
- backgroundColor: theme.colors['bg/danger/bold/hovered']
17116
+ '@media (hover: hover) and (pointer: fine)': {
17117
+ '&:hover:not(:disabled)': {
17118
+ backgroundColor: theme.colors['bg/danger/bold/hovered']
17119
+ }
17108
17120
  },
17109
17121
  '&:active:not(:disabled)': {
17110
17122
  backgroundColor: theme.colors['bg/danger/bold/pressed']
@@ -17901,8 +17913,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
17901
17913
  'primary': {
17902
17914
  'backgroundColor': theme.colors['bg/primary'],
17903
17915
  'color': theme.colors['icon/inverse'],
17904
- '&:hover:not(:disabled)': {
17905
- backgroundColor: theme.colors['bg/primary/hovered']
17916
+ '@media (hover: hover) and (pointer: fine)': {
17917
+ '&:hover:not(:disabled)': {
17918
+ backgroundColor: theme.colors['bg/primary/hovered']
17919
+ }
17906
17920
  },
17907
17921
  '&:active:not(:disabled)': {
17908
17922
  backgroundColor: theme.colors['bg/primary/pressed']
@@ -17915,8 +17929,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
17915
17929
  'secondary': {
17916
17930
  'backgroundColor': theme.colors['bg/secondary'],
17917
17931
  'color': theme.colors['icon/primary'],
17918
- '&:hover:not(:disabled)': {
17919
- backgroundColor: theme.colors['bg/secondary/hovered']
17932
+ '@media (hover: hover) and (pointer: fine)': {
17933
+ '&:hover:not(:disabled)': {
17934
+ backgroundColor: theme.colors['bg/secondary/hovered']
17935
+ }
17920
17936
  },
17921
17937
  '&:active:not(:disabled)': {
17922
17938
  backgroundColor: theme.colors['bg/secondary/pressed']
@@ -17929,8 +17945,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
17929
17945
  'neutral': {
17930
17946
  'backgroundColor': theme.colors['bg/neutral'],
17931
17947
  'color': theme.colors['icon/accent/gray'],
17932
- '&:hover:not(:disabled)': {
17933
- backgroundColor: theme.colors['bg/neutral/hovered']
17948
+ '@media (hover: hover) and (pointer: fine)': {
17949
+ '&:hover:not(:disabled)': {
17950
+ backgroundColor: theme.colors['bg/neutral/hovered']
17951
+ }
17934
17952
  },
17935
17953
  '&:active:not(:disabled)': {
17936
17954
  backgroundColor: theme.colors['bg/neutral/pressed']
@@ -17956,8 +17974,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
17956
17974
  borderRadius: theme.radii.full,
17957
17975
  boxSizing: 'border-box'
17958
17976
  },
17959
- '&:hover:not(:disabled)': {
17960
- backgroundColor: theme.colors['bg/neutral/subtler/hovered']
17977
+ '@media (hover: hover) and (pointer: fine)': {
17978
+ '&:hover:not(:disabled)': {
17979
+ backgroundColor: theme.colors['bg/neutral/subtler/hovered']
17980
+ }
17961
17981
  },
17962
17982
  '&:active:not(:disabled)': {
17963
17983
  backgroundColor: theme.colors['bg/neutral/subtler/pressed']
@@ -17973,8 +17993,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
17973
17993
  'plain-bold': {
17974
17994
  'backgroundColor': theme.colors['bg/neutral/subtler'],
17975
17995
  'color': theme.colors['icon/neutral/bolder'],
17976
- '&:hover:not(:disabled)': {
17977
- color: theme.colors['icon/accent/gray']
17996
+ '@media (hover: hover) and (pointer: fine)': {
17997
+ '&:hover:not(:disabled)': {
17998
+ color: theme.colors['icon/accent/gray']
17999
+ }
17978
18000
  },
17979
18001
  '&:active:not(:disabled)': {
17980
18002
  color: theme.colors['icon/accent/gray']
@@ -17987,8 +18009,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
17987
18009
  'plain': {
17988
18010
  'backgroundColor': theme.colors['bg/neutral/subtler'],
17989
18011
  'color': theme.colors['icon/neutral/bold'],
17990
- '&:hover:not(:disabled)': {
17991
- color: theme.colors['icon/neutral/bolder']
18012
+ '@media (hover: hover) and (pointer: fine)': {
18013
+ '&:hover:not(:disabled)': {
18014
+ color: theme.colors['icon/neutral/bolder']
18015
+ }
17992
18016
  },
17993
18017
  '&:active:not(:disabled)': {
17994
18018
  color: theme.colors['icon/neutral/bolder']
@@ -18001,8 +18025,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
18001
18025
  'plain-subtle': {
18002
18026
  'backgroundColor': theme.colors['bg/neutral/subtler'],
18003
18027
  'color': theme.colors['icon/neutral'],
18004
- '&:hover:not(:disabled)': {
18005
- color: theme.colors['icon/neutral/bold']
18028
+ '@media (hover: hover) and (pointer: fine)': {
18029
+ '&:hover:not(:disabled)': {
18030
+ color: theme.colors['icon/neutral/bold']
18031
+ }
18006
18032
  },
18007
18033
  '&:active:not(:disabled)': {
18008
18034
  color: theme.colors['icon/neutral/bold']
@@ -18015,8 +18041,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
18015
18041
  'danger': {
18016
18042
  'backgroundColor': theme.colors['bg/danger/bold'],
18017
18043
  'color': theme.colors['icon/inverse'],
18018
- '&:hover:not(:disabled)': {
18019
- backgroundColor: theme.colors['bg/danger/bold/hovered']
18044
+ '@media (hover: hover) and (pointer: fine)': {
18045
+ '&:hover:not(:disabled)': {
18046
+ backgroundColor: theme.colors['bg/danger/bold/hovered']
18047
+ }
18020
18048
  },
18021
18049
  '&:active:not(:disabled)': {
18022
18050
  backgroundColor: theme.colors['bg/danger/bold/pressed']
package/esm/core/Button/index.js CHANGED
@@ -136,8 +136,10 @@ const BaseButton = styled(UnstyledButton)(({
136
136
  '& svg': {
137
137
  color: theme.colors['icon/inverse']
138
138
  },
139
- '&:hover:not(:disabled)': {
140
- backgroundColor: theme.colors['bg/primary/hovered']
139
+ '@media (hover: hover) and (pointer: fine)': {
140
+ '&:hover:not(:disabled)': {
141
+ backgroundColor: theme.colors['bg/primary/hovered']
142
+ }
141
143
  },
142
144
  '&:active:not(:disabled)': {
143
145
  backgroundColor: theme.colors['bg/primary/pressed']
@@ -162,8 +164,10 @@ const BaseButton = styled(UnstyledButton)(({
162
164
  '& svg': {
163
165
  color: theme.colors['icon/primary']
164
166
  },
165
- '&:hover:not(:disabled)': {
166
- backgroundColor: theme.colors['bg/secondary/hovered']
167
+ '@media (hover: hover) and (pointer: fine)': {
168
+ '&:hover:not(:disabled)': {
169
+ backgroundColor: theme.colors['bg/secondary/hovered']
170
+ }
167
171
  },
168
172
  '&:active:not(:disabled)': {
169
173
  backgroundColor: theme.colors['bg/secondary/pressed']
@@ -188,8 +192,10 @@ const BaseButton = styled(UnstyledButton)(({
188
192
  '& svg': {
189
193
  color: theme.colors['icon/accent/gray']
190
194
  },
191
- '&:hover:not(:disabled)': {
192
- backgroundColor: theme.colors['bg/neutral/hovered']
195
+ '@media (hover: hover) and (pointer: fine)': {
196
+ '&:hover:not(:disabled)': {
197
+ backgroundColor: theme.colors['bg/neutral/hovered']
198
+ }
193
199
  },
194
200
  '&:active:not(:disabled)': {
195
201
  backgroundColor: theme.colors['bg/neutral/pressed']
@@ -227,8 +233,10 @@ const BaseButton = styled(UnstyledButton)(({
227
233
  borderRadius: theme.radii.full,
228
234
  boxSizing: 'border-box'
229
235
  },
230
- '&:hover:not(:disabled)': {
231
- backgroundColor: theme.colors['bg/neutral/subtler/hovered']
236
+ '@media (hover: hover) and (pointer: fine)': {
237
+ '&:hover:not(:disabled)': {
238
+ backgroundColor: theme.colors['bg/neutral/subtler/hovered']
239
+ }
232
240
  },
233
241
  '&:active:not(:disabled)': {
234
242
  backgroundColor: theme.colors['bg/neutral/subtler/pressed']
@@ -256,10 +264,12 @@ const BaseButton = styled(UnstyledButton)(({
256
264
  '& svg': {
257
265
  color: theme.colors['icon/neutral/bolder']
258
266
  },
259
- '&:hover:not(:disabled)': {
260
- 'color': theme.colors['text/neutral'],
261
- '& svg': {
262
- color: theme.colors['icon/accent/gray']
267
+ '@media (hover: hover) and (pointer: fine)': {
268
+ '&:hover:not(:disabled)': {
269
+ 'color': theme.colors['text/neutral'],
270
+ '& svg': {
271
+ color: theme.colors['icon/accent/gray']
272
+ }
263
273
  }
264
274
  },
265
275
  '&:active:not(:disabled)': {
@@ -288,8 +298,10 @@ const BaseButton = styled(UnstyledButton)(({
288
298
  '& svg': {
289
299
  color: theme.colors['icon/inverse']
290
300
  },
291
- '&:hover:not(:disabled)': {
292
- backgroundColor: theme.colors['bg/danger/bold/hovered']
301
+ '@media (hover: hover) and (pointer: fine)': {
302
+ '&:hover:not(:disabled)': {
303
+ backgroundColor: theme.colors['bg/danger/bold/hovered']
304
+ }
293
305
  },
294
306
  '&:active:not(:disabled)': {
295
307
  backgroundColor: theme.colors['bg/danger/bold/pressed']
package/esm/core/IconButton/index.js CHANGED
@@ -82,8 +82,10 @@ const BaseIconButton = styled(UnstyledButton)(({
82
82
  'primary': {
83
83
  'backgroundColor': theme.colors['bg/primary'],
84
84
  'color': theme.colors['icon/inverse'],
85
- '&:hover:not(:disabled)': {
86
- backgroundColor: theme.colors['bg/primary/hovered']
85
+ '@media (hover: hover) and (pointer: fine)': {
86
+ '&:hover:not(:disabled)': {
87
+ backgroundColor: theme.colors['bg/primary/hovered']
88
+ }
87
89
  },
88
90
  '&:active:not(:disabled)': {
89
91
  backgroundColor: theme.colors['bg/primary/pressed']
@@ -96,8 +98,10 @@ const BaseIconButton = styled(UnstyledButton)(({
96
98
  'secondary': {
97
99
  'backgroundColor': theme.colors['bg/secondary'],
98
100
  'color': theme.colors['icon/primary'],
99
- '&:hover:not(:disabled)': {
100
- backgroundColor: theme.colors['bg/secondary/hovered']
101
+ '@media (hover: hover) and (pointer: fine)': {
102
+ '&:hover:not(:disabled)': {
103
+ backgroundColor: theme.colors['bg/secondary/hovered']
104
+ }
101
105
  },
102
106
  '&:active:not(:disabled)': {
103
107
  backgroundColor: theme.colors['bg/secondary/pressed']
@@ -110,8 +114,10 @@ const BaseIconButton = styled(UnstyledButton)(({
110
114
  'neutral': {
111
115
  'backgroundColor': theme.colors['bg/neutral'],
112
116
  'color': theme.colors['icon/accent/gray'],
113
- '&:hover:not(:disabled)': {
114
- backgroundColor: theme.colors['bg/neutral/hovered']
117
+ '@media (hover: hover) and (pointer: fine)': {
118
+ '&:hover:not(:disabled)': {
119
+ backgroundColor: theme.colors['bg/neutral/hovered']
120
+ }
115
121
  },
116
122
  '&:active:not(:disabled)': {
117
123
  backgroundColor: theme.colors['bg/neutral/pressed']
@@ -137,8 +143,10 @@ const BaseIconButton = styled(UnstyledButton)(({
137
143
  borderRadius: theme.radii.full,
138
144
  boxSizing: 'border-box'
139
145
  },
140
- '&:hover:not(:disabled)': {
141
- backgroundColor: theme.colors['bg/neutral/subtler/hovered']
146
+ '@media (hover: hover) and (pointer: fine)': {
147
+ '&:hover:not(:disabled)': {
148
+ backgroundColor: theme.colors['bg/neutral/subtler/hovered']
149
+ }
142
150
  },
143
151
  '&:active:not(:disabled)': {
144
152
  backgroundColor: theme.colors['bg/neutral/subtler/pressed']
@@ -154,8 +162,10 @@ const BaseIconButton = styled(UnstyledButton)(({
154
162
  'plain-bold': {
155
163
  'backgroundColor': theme.colors['bg/neutral/subtler'],
156
164
  'color': theme.colors['icon/neutral/bolder'],
157
- '&:hover:not(:disabled)': {
158
- color: theme.colors['icon/accent/gray']
165
+ '@media (hover: hover) and (pointer: fine)': {
166
+ '&:hover:not(:disabled)': {
167
+ color: theme.colors['icon/accent/gray']
168
+ }
159
169
  },
160
170
  '&:active:not(:disabled)': {
161
171
  color: theme.colors['icon/accent/gray']
@@ -168,8 +178,10 @@ const BaseIconButton = styled(UnstyledButton)(({
168
178
  'plain': {
169
179
  'backgroundColor': theme.colors['bg/neutral/subtler'],
170
180
  'color': theme.colors['icon/neutral/bold'],
171
- '&:hover:not(:disabled)': {
172
- color: theme.colors['icon/neutral/bolder']
181
+ '@media (hover: hover) and (pointer: fine)': {
182
+ '&:hover:not(:disabled)': {
183
+ color: theme.colors['icon/neutral/bolder']
184
+ }
173
185
  },
174
186
  '&:active:not(:disabled)': {
175
187
  color: theme.colors['icon/neutral/bolder']
@@ -182,8 +194,10 @@ const BaseIconButton = styled(UnstyledButton)(({
182
194
  'plain-subtle': {
183
195
  'backgroundColor': theme.colors['bg/neutral/subtler'],
184
196
  'color': theme.colors['icon/neutral'],
185
- '&:hover:not(:disabled)': {
186
- color: theme.colors['icon/neutral/bold']
197
+ '@media (hover: hover) and (pointer: fine)': {
198
+ '&:hover:not(:disabled)': {
199
+ color: theme.colors['icon/neutral/bold']
200
+ }
187
201
  },
188
202
  '&:active:not(:disabled)': {
189
203
  color: theme.colors['icon/neutral/bold']
@@ -196,8 +210,10 @@ const BaseIconButton = styled(UnstyledButton)(({
196
210
  'danger': {
197
211
  'backgroundColor': theme.colors['bg/danger/bold'],
198
212
  'color': theme.colors['icon/inverse'],
199
- '&:hover:not(:disabled)': {
200
- backgroundColor: theme.colors['bg/danger/bold/hovered']
213
+ '@media (hover: hover) and (pointer: fine)': {
214
+ '&:hover:not(:disabled)': {
215
+ backgroundColor: theme.colors['bg/danger/bold/hovered']
216
+ }
201
217
  },
202
218
  '&:active:not(:disabled)': {
203
219
  backgroundColor: theme.colors['bg/danger/bold/pressed']
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teamturing/react-kit",
3
- "version": "2.28.0",
3
+ "version": "2.28.1",
4
4
  "description": "React components, hooks for create teamturing web application",
5
5
  "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
6
6
  "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -66,5 +66,5 @@
66
66
  "react-textarea-autosize": "^8.5.3",
67
67
  "styled-system": "^5.1.5"
68
68
  },
69
- "gitHead": "56bd9e11df60092d7bad4459c2ce79a7d8fe0039"
69
+ "gitHead": "49e0faeb615a1860be291a9b7a60ec4201f9b877"
70
70
  }