@teamturing/react-kit 2.21.5 → 2.21.6
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/index.js +63 -63
- package/esm/core/Button/index.js +63 -63
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -17252,88 +17252,88 @@ const BaseButton = styled__default.default(UnstyledButton)(({
|
|
|
17252
17252
|
prop: 'variant',
|
|
17253
17253
|
variants: {
|
|
17254
17254
|
primary: {
|
|
17255
|
-
'backgroundColor': theme.
|
|
17256
|
-
'color': theme.
|
|
17255
|
+
'backgroundColor': theme.colors['bg/primary'],
|
|
17256
|
+
'color': theme.colors['text/inverse'],
|
|
17257
17257
|
'& svg': {
|
|
17258
|
-
color: theme.
|
|
17258
|
+
color: theme.colors['icon/inverse']
|
|
17259
17259
|
},
|
|
17260
17260
|
'&:hover:not(:disabled)': {
|
|
17261
|
-
backgroundColor: theme.
|
|
17261
|
+
backgroundColor: theme.colors['bg/primary/hovered']
|
|
17262
17262
|
},
|
|
17263
17263
|
'&:active:not(:disabled)': {
|
|
17264
|
-
backgroundColor: theme.
|
|
17264
|
+
backgroundColor: theme.colors['bg/primary/pressed']
|
|
17265
17265
|
},
|
|
17266
17266
|
'&:focus-visible': {
|
|
17267
|
-
outlineColor: theme.
|
|
17267
|
+
outlineColor: theme.colors['border/focused'],
|
|
17268
17268
|
outlineStyle: 'solid',
|
|
17269
17269
|
outlineWidth: 2,
|
|
17270
17270
|
outlineOffset: 2
|
|
17271
17271
|
},
|
|
17272
17272
|
...($disabled ? {
|
|
17273
|
-
'backgroundColor': theme.
|
|
17274
|
-
'color': theme.
|
|
17273
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
17274
|
+
'color': theme.colors['text/disabled'],
|
|
17275
17275
|
'& svg': {
|
|
17276
|
-
color: theme.
|
|
17276
|
+
color: theme.colors['icon/disabled']
|
|
17277
17277
|
}
|
|
17278
17278
|
} : {})
|
|
17279
17279
|
},
|
|
17280
17280
|
secondary: {
|
|
17281
|
-
'backgroundColor': theme.
|
|
17282
|
-
'color': theme.
|
|
17281
|
+
'backgroundColor': theme.colors['bg/secondary'],
|
|
17282
|
+
'color': theme.colors['text/primary'],
|
|
17283
17283
|
'& svg': {
|
|
17284
|
-
color: theme.
|
|
17284
|
+
color: theme.colors['icon/primary']
|
|
17285
17285
|
},
|
|
17286
17286
|
'&:hover:not(:disabled)': {
|
|
17287
|
-
backgroundColor: theme.
|
|
17287
|
+
backgroundColor: theme.colors['bg/secondary/hovered']
|
|
17288
17288
|
},
|
|
17289
17289
|
'&:active:not(:disabled)': {
|
|
17290
|
-
backgroundColor: theme.
|
|
17290
|
+
backgroundColor: theme.colors['bg/secondary/pressed']
|
|
17291
17291
|
},
|
|
17292
17292
|
'&:focus-visible': {
|
|
17293
|
-
outlineColor: theme.
|
|
17293
|
+
outlineColor: theme.colors['border/focused'],
|
|
17294
17294
|
outlineStyle: 'solid',
|
|
17295
17295
|
outlineWidth: 2,
|
|
17296
17296
|
outlineOffset: 2
|
|
17297
17297
|
},
|
|
17298
17298
|
...($disabled ? {
|
|
17299
|
-
'backgroundColor': theme.
|
|
17300
|
-
'color': theme.
|
|
17299
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
17300
|
+
'color': theme.colors['text/disabled'],
|
|
17301
17301
|
'& svg': {
|
|
17302
|
-
color: theme.
|
|
17302
|
+
color: theme.colors['icon/disabled']
|
|
17303
17303
|
}
|
|
17304
17304
|
} : {})
|
|
17305
17305
|
},
|
|
17306
17306
|
neutral: {
|
|
17307
|
-
'backgroundColor': theme.
|
|
17308
|
-
'color': theme.
|
|
17307
|
+
'backgroundColor': theme.colors['bg/neutral'],
|
|
17308
|
+
'color': theme.colors['text/neutral'],
|
|
17309
17309
|
'& svg': {
|
|
17310
|
-
color: theme.
|
|
17310
|
+
color: theme.colors['icon/accent/gray']
|
|
17311
17311
|
},
|
|
17312
17312
|
'&:hover:not(:disabled)': {
|
|
17313
|
-
backgroundColor: theme.
|
|
17313
|
+
backgroundColor: theme.colors['bg/neutral/hovered']
|
|
17314
17314
|
},
|
|
17315
17315
|
'&:active:not(:disabled)': {
|
|
17316
|
-
backgroundColor: theme.
|
|
17316
|
+
backgroundColor: theme.colors['bg/neutral/pressed']
|
|
17317
17317
|
},
|
|
17318
17318
|
'&:focus-visible': {
|
|
17319
|
-
outlineColor: theme.
|
|
17319
|
+
outlineColor: theme.colors['border/focused'],
|
|
17320
17320
|
outlineStyle: 'solid',
|
|
17321
17321
|
outlineWidth: 2,
|
|
17322
17322
|
outlineOffset: 2
|
|
17323
17323
|
},
|
|
17324
17324
|
...($disabled ? {
|
|
17325
|
-
'backgroundColor': theme.
|
|
17326
|
-
'color': theme.
|
|
17325
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
17326
|
+
'color': theme.colors['text/disabled'],
|
|
17327
17327
|
'& svg': {
|
|
17328
|
-
color: theme.
|
|
17328
|
+
color: theme.colors['icon/disabled']
|
|
17329
17329
|
}
|
|
17330
17330
|
} : {})
|
|
17331
17331
|
},
|
|
17332
17332
|
outlined: {
|
|
17333
|
-
'backgroundColor': theme.
|
|
17334
|
-
'color': theme.
|
|
17333
|
+
'backgroundColor': theme.colors['bg/neutral/subtler'],
|
|
17334
|
+
'color': theme.colors['text/neutral/subtle'],
|
|
17335
17335
|
'& svg': {
|
|
17336
|
-
color: theme.
|
|
17336
|
+
color: theme.colors['icon/neutral/bolder']
|
|
17337
17337
|
},
|
|
17338
17338
|
'&:after': {
|
|
17339
17339
|
content: '""',
|
|
@@ -17344,27 +17344,27 @@ const BaseButton = styled__default.default(UnstyledButton)(({
|
|
|
17344
17344
|
left: 0,
|
|
17345
17345
|
borderWidth: 1,
|
|
17346
17346
|
borderStyle: 'solid',
|
|
17347
|
-
borderColor: theme.
|
|
17347
|
+
borderColor: theme.colors['border/neutral/bolder'],
|
|
17348
17348
|
borderRadius: theme.radii.full,
|
|
17349
17349
|
boxSizing: 'border-box'
|
|
17350
17350
|
},
|
|
17351
17351
|
'&:hover:not(:disabled)': {
|
|
17352
|
-
backgroundColor: theme.
|
|
17352
|
+
backgroundColor: theme.colors['bg/neutral/subtler/hovered']
|
|
17353
17353
|
},
|
|
17354
17354
|
'&:active:not(:disabled)': {
|
|
17355
|
-
backgroundColor: theme.
|
|
17355
|
+
backgroundColor: theme.colors['bg/neutral/subtler/pressed']
|
|
17356
17356
|
},
|
|
17357
17357
|
'&:focus-visible': {
|
|
17358
|
-
outlineColor: theme.
|
|
17358
|
+
outlineColor: theme.colors['border/focused'],
|
|
17359
17359
|
outlineStyle: 'solid',
|
|
17360
17360
|
outlineWidth: 2,
|
|
17361
17361
|
outlineOffset: 2
|
|
17362
17362
|
},
|
|
17363
17363
|
...($disabled ? {
|
|
17364
|
-
'backgroundColor': theme.
|
|
17365
|
-
'color': theme.
|
|
17364
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
17365
|
+
'color': theme.colors['text/disabled'],
|
|
17366
17366
|
'& svg': {
|
|
17367
|
-
color: theme.
|
|
17367
|
+
color: theme.colors['icon/disabled']
|
|
17368
17368
|
},
|
|
17369
17369
|
'&:after': {
|
|
17370
17370
|
display: 'none'
|
|
@@ -17372,60 +17372,60 @@ const BaseButton = styled__default.default(UnstyledButton)(({
|
|
|
17372
17372
|
} : {})
|
|
17373
17373
|
},
|
|
17374
17374
|
plain: {
|
|
17375
|
-
'backgroundColor': theme.
|
|
17376
|
-
'color': theme.
|
|
17375
|
+
'backgroundColor': theme.colors['bg/neutral/subtler'],
|
|
17376
|
+
'color': theme.colors['text/neutral/subtle'],
|
|
17377
17377
|
'& svg': {
|
|
17378
|
-
color: theme.
|
|
17378
|
+
color: theme.colors['icon/neutral/bolder']
|
|
17379
17379
|
},
|
|
17380
17380
|
'&:hover:not(:disabled)': {
|
|
17381
|
-
'color': theme.
|
|
17381
|
+
'color': theme.colors['text/neutral'],
|
|
17382
17382
|
'& svg': {
|
|
17383
|
-
color: theme.
|
|
17383
|
+
color: theme.colors['icon/accent/gray']
|
|
17384
17384
|
}
|
|
17385
17385
|
},
|
|
17386
17386
|
'&:active:not(:disabled)': {
|
|
17387
|
-
'color': theme.
|
|
17387
|
+
'color': theme.colors['text/neutral'],
|
|
17388
17388
|
'& svg': {
|
|
17389
|
-
color: theme.
|
|
17389
|
+
color: theme.colors['icon/accent/gray']
|
|
17390
17390
|
}
|
|
17391
17391
|
},
|
|
17392
17392
|
'&:focus-visible': {
|
|
17393
|
-
outlineColor: theme.
|
|
17393
|
+
outlineColor: theme.colors['border/focused'],
|
|
17394
17394
|
outlineStyle: 'solid',
|
|
17395
17395
|
outlineWidth: 2,
|
|
17396
17396
|
outlineOffset: 2
|
|
17397
17397
|
},
|
|
17398
17398
|
...($disabled ? {
|
|
17399
|
-
'backgroundColor': theme.
|
|
17400
|
-
'color': theme.
|
|
17399
|
+
'backgroundColor': theme.colors['bg/disabled/subtlest'],
|
|
17400
|
+
'color': theme.colors['text/disabled'],
|
|
17401
17401
|
'& svg': {
|
|
17402
|
-
color: theme.
|
|
17402
|
+
color: theme.colors['icon/disabled']
|
|
17403
17403
|
}
|
|
17404
17404
|
} : {})
|
|
17405
17405
|
},
|
|
17406
17406
|
danger: {
|
|
17407
|
-
'backgroundColor': theme.
|
|
17408
|
-
'color': theme.
|
|
17407
|
+
'backgroundColor': theme.colors['bg/danger/bold'],
|
|
17408
|
+
'color': theme.colors['text/inverse'],
|
|
17409
17409
|
'& svg': {
|
|
17410
|
-
color: theme.
|
|
17410
|
+
color: theme.colors['icon/inverse']
|
|
17411
17411
|
},
|
|
17412
17412
|
'&:hover:not(:disabled)': {
|
|
17413
|
-
backgroundColor: theme.
|
|
17413
|
+
backgroundColor: theme.colors['bg/danger/bold/hovered']
|
|
17414
17414
|
},
|
|
17415
17415
|
'&:active:not(:disabled)': {
|
|
17416
|
-
backgroundColor: theme.
|
|
17416
|
+
backgroundColor: theme.colors['bg/danger/bold/pressed']
|
|
17417
17417
|
},
|
|
17418
17418
|
'&:focus-visible': {
|
|
17419
|
-
outlineColor: theme.
|
|
17419
|
+
outlineColor: theme.colors['border/focused'],
|
|
17420
17420
|
outlineStyle: 'solid',
|
|
17421
17421
|
outlineWidth: 2,
|
|
17422
17422
|
outlineOffset: 2
|
|
17423
17423
|
},
|
|
17424
17424
|
...($disabled ? {
|
|
17425
|
-
'backgroundColor': theme.
|
|
17426
|
-
'color': theme.
|
|
17425
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
17426
|
+
'color': theme.colors['text/disabled'],
|
|
17427
17427
|
'& svg': {
|
|
17428
|
-
color: theme.
|
|
17428
|
+
color: theme.colors['icon/disabled']
|
|
17429
17429
|
}
|
|
17430
17430
|
} : {})
|
|
17431
17431
|
}
|
|
@@ -17453,22 +17453,22 @@ const BaseSpinner = styled__default.default(Spinner)(variant({
|
|
|
17453
17453
|
prop: 'variant',
|
|
17454
17454
|
variants: {
|
|
17455
17455
|
primary: {
|
|
17456
|
-
color: theme.
|
|
17456
|
+
color: theme.colors['icon/inverse']
|
|
17457
17457
|
},
|
|
17458
17458
|
secondary: {
|
|
17459
|
-
color: theme.
|
|
17459
|
+
color: theme.colors['icon/primary']
|
|
17460
17460
|
},
|
|
17461
17461
|
neutral: {
|
|
17462
|
-
color: theme.
|
|
17462
|
+
color: theme.colors['icon/accent/gray']
|
|
17463
17463
|
},
|
|
17464
17464
|
outlined: {
|
|
17465
|
-
color: theme.
|
|
17465
|
+
color: theme.colors['icon/neutral/bolder']
|
|
17466
17466
|
},
|
|
17467
17467
|
plain: {
|
|
17468
|
-
color: theme.
|
|
17468
|
+
color: theme.colors['icon/neutral/bolder']
|
|
17469
17469
|
},
|
|
17470
17470
|
danger: {
|
|
17471
|
-
color: theme.
|
|
17471
|
+
color: theme.colors['icon/inverse']
|
|
17472
17472
|
}
|
|
17473
17473
|
}
|
|
17474
17474
|
}));
|
package/esm/core/Button/index.js
CHANGED
|
@@ -131,88 +131,88 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
131
131
|
prop: 'variant',
|
|
132
132
|
variants: {
|
|
133
133
|
primary: {
|
|
134
|
-
'backgroundColor': theme.
|
|
135
|
-
'color': theme.
|
|
134
|
+
'backgroundColor': theme.colors['bg/primary'],
|
|
135
|
+
'color': theme.colors['text/inverse'],
|
|
136
136
|
'& svg': {
|
|
137
|
-
color: theme.
|
|
137
|
+
color: theme.colors['icon/inverse']
|
|
138
138
|
},
|
|
139
139
|
'&:hover:not(:disabled)': {
|
|
140
|
-
backgroundColor: theme.
|
|
140
|
+
backgroundColor: theme.colors['bg/primary/hovered']
|
|
141
141
|
},
|
|
142
142
|
'&:active:not(:disabled)': {
|
|
143
|
-
backgroundColor: theme.
|
|
143
|
+
backgroundColor: theme.colors['bg/primary/pressed']
|
|
144
144
|
},
|
|
145
145
|
'&:focus-visible': {
|
|
146
|
-
outlineColor: theme.
|
|
146
|
+
outlineColor: theme.colors['border/focused'],
|
|
147
147
|
outlineStyle: 'solid',
|
|
148
148
|
outlineWidth: 2,
|
|
149
149
|
outlineOffset: 2
|
|
150
150
|
},
|
|
151
151
|
...($disabled ? {
|
|
152
|
-
'backgroundColor': theme.
|
|
153
|
-
'color': theme.
|
|
152
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
153
|
+
'color': theme.colors['text/disabled'],
|
|
154
154
|
'& svg': {
|
|
155
|
-
color: theme.
|
|
155
|
+
color: theme.colors['icon/disabled']
|
|
156
156
|
}
|
|
157
157
|
} : {})
|
|
158
158
|
},
|
|
159
159
|
secondary: {
|
|
160
|
-
'backgroundColor': theme.
|
|
161
|
-
'color': theme.
|
|
160
|
+
'backgroundColor': theme.colors['bg/secondary'],
|
|
161
|
+
'color': theme.colors['text/primary'],
|
|
162
162
|
'& svg': {
|
|
163
|
-
color: theme.
|
|
163
|
+
color: theme.colors['icon/primary']
|
|
164
164
|
},
|
|
165
165
|
'&:hover:not(:disabled)': {
|
|
166
|
-
backgroundColor: theme.
|
|
166
|
+
backgroundColor: theme.colors['bg/secondary/hovered']
|
|
167
167
|
},
|
|
168
168
|
'&:active:not(:disabled)': {
|
|
169
|
-
backgroundColor: theme.
|
|
169
|
+
backgroundColor: theme.colors['bg/secondary/pressed']
|
|
170
170
|
},
|
|
171
171
|
'&:focus-visible': {
|
|
172
|
-
outlineColor: theme.
|
|
172
|
+
outlineColor: theme.colors['border/focused'],
|
|
173
173
|
outlineStyle: 'solid',
|
|
174
174
|
outlineWidth: 2,
|
|
175
175
|
outlineOffset: 2
|
|
176
176
|
},
|
|
177
177
|
...($disabled ? {
|
|
178
|
-
'backgroundColor': theme.
|
|
179
|
-
'color': theme.
|
|
178
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
179
|
+
'color': theme.colors['text/disabled'],
|
|
180
180
|
'& svg': {
|
|
181
|
-
color: theme.
|
|
181
|
+
color: theme.colors['icon/disabled']
|
|
182
182
|
}
|
|
183
183
|
} : {})
|
|
184
184
|
},
|
|
185
185
|
neutral: {
|
|
186
|
-
'backgroundColor': theme.
|
|
187
|
-
'color': theme.
|
|
186
|
+
'backgroundColor': theme.colors['bg/neutral'],
|
|
187
|
+
'color': theme.colors['text/neutral'],
|
|
188
188
|
'& svg': {
|
|
189
|
-
color: theme.
|
|
189
|
+
color: theme.colors['icon/accent/gray']
|
|
190
190
|
},
|
|
191
191
|
'&:hover:not(:disabled)': {
|
|
192
|
-
backgroundColor: theme.
|
|
192
|
+
backgroundColor: theme.colors['bg/neutral/hovered']
|
|
193
193
|
},
|
|
194
194
|
'&:active:not(:disabled)': {
|
|
195
|
-
backgroundColor: theme.
|
|
195
|
+
backgroundColor: theme.colors['bg/neutral/pressed']
|
|
196
196
|
},
|
|
197
197
|
'&:focus-visible': {
|
|
198
|
-
outlineColor: theme.
|
|
198
|
+
outlineColor: theme.colors['border/focused'],
|
|
199
199
|
outlineStyle: 'solid',
|
|
200
200
|
outlineWidth: 2,
|
|
201
201
|
outlineOffset: 2
|
|
202
202
|
},
|
|
203
203
|
...($disabled ? {
|
|
204
|
-
'backgroundColor': theme.
|
|
205
|
-
'color': theme.
|
|
204
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
205
|
+
'color': theme.colors['text/disabled'],
|
|
206
206
|
'& svg': {
|
|
207
|
-
color: theme.
|
|
207
|
+
color: theme.colors['icon/disabled']
|
|
208
208
|
}
|
|
209
209
|
} : {})
|
|
210
210
|
},
|
|
211
211
|
outlined: {
|
|
212
|
-
'backgroundColor': theme.
|
|
213
|
-
'color': theme.
|
|
212
|
+
'backgroundColor': theme.colors['bg/neutral/subtler'],
|
|
213
|
+
'color': theme.colors['text/neutral/subtle'],
|
|
214
214
|
'& svg': {
|
|
215
|
-
color: theme.
|
|
215
|
+
color: theme.colors['icon/neutral/bolder']
|
|
216
216
|
},
|
|
217
217
|
'&:after': {
|
|
218
218
|
content: '""',
|
|
@@ -223,27 +223,27 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
223
223
|
left: 0,
|
|
224
224
|
borderWidth: 1,
|
|
225
225
|
borderStyle: 'solid',
|
|
226
|
-
borderColor: theme.
|
|
226
|
+
borderColor: theme.colors['border/neutral/bolder'],
|
|
227
227
|
borderRadius: theme.radii.full,
|
|
228
228
|
boxSizing: 'border-box'
|
|
229
229
|
},
|
|
230
230
|
'&:hover:not(:disabled)': {
|
|
231
|
-
backgroundColor: theme.
|
|
231
|
+
backgroundColor: theme.colors['bg/neutral/subtler/hovered']
|
|
232
232
|
},
|
|
233
233
|
'&:active:not(:disabled)': {
|
|
234
|
-
backgroundColor: theme.
|
|
234
|
+
backgroundColor: theme.colors['bg/neutral/subtler/pressed']
|
|
235
235
|
},
|
|
236
236
|
'&:focus-visible': {
|
|
237
|
-
outlineColor: theme.
|
|
237
|
+
outlineColor: theme.colors['border/focused'],
|
|
238
238
|
outlineStyle: 'solid',
|
|
239
239
|
outlineWidth: 2,
|
|
240
240
|
outlineOffset: 2
|
|
241
241
|
},
|
|
242
242
|
...($disabled ? {
|
|
243
|
-
'backgroundColor': theme.
|
|
244
|
-
'color': theme.
|
|
243
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
244
|
+
'color': theme.colors['text/disabled'],
|
|
245
245
|
'& svg': {
|
|
246
|
-
color: theme.
|
|
246
|
+
color: theme.colors['icon/disabled']
|
|
247
247
|
},
|
|
248
248
|
'&:after': {
|
|
249
249
|
display: 'none'
|
|
@@ -251,60 +251,60 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
251
251
|
} : {})
|
|
252
252
|
},
|
|
253
253
|
plain: {
|
|
254
|
-
'backgroundColor': theme.
|
|
255
|
-
'color': theme.
|
|
254
|
+
'backgroundColor': theme.colors['bg/neutral/subtler'],
|
|
255
|
+
'color': theme.colors['text/neutral/subtle'],
|
|
256
256
|
'& svg': {
|
|
257
|
-
color: theme.
|
|
257
|
+
color: theme.colors['icon/neutral/bolder']
|
|
258
258
|
},
|
|
259
259
|
'&:hover:not(:disabled)': {
|
|
260
|
-
'color': theme.
|
|
260
|
+
'color': theme.colors['text/neutral'],
|
|
261
261
|
'& svg': {
|
|
262
|
-
color: theme.
|
|
262
|
+
color: theme.colors['icon/accent/gray']
|
|
263
263
|
}
|
|
264
264
|
},
|
|
265
265
|
'&:active:not(:disabled)': {
|
|
266
|
-
'color': theme.
|
|
266
|
+
'color': theme.colors['text/neutral'],
|
|
267
267
|
'& svg': {
|
|
268
|
-
color: theme.
|
|
268
|
+
color: theme.colors['icon/accent/gray']
|
|
269
269
|
}
|
|
270
270
|
},
|
|
271
271
|
'&:focus-visible': {
|
|
272
|
-
outlineColor: theme.
|
|
272
|
+
outlineColor: theme.colors['border/focused'],
|
|
273
273
|
outlineStyle: 'solid',
|
|
274
274
|
outlineWidth: 2,
|
|
275
275
|
outlineOffset: 2
|
|
276
276
|
},
|
|
277
277
|
...($disabled ? {
|
|
278
|
-
'backgroundColor': theme.
|
|
279
|
-
'color': theme.
|
|
278
|
+
'backgroundColor': theme.colors['bg/disabled/subtlest'],
|
|
279
|
+
'color': theme.colors['text/disabled'],
|
|
280
280
|
'& svg': {
|
|
281
|
-
color: theme.
|
|
281
|
+
color: theme.colors['icon/disabled']
|
|
282
282
|
}
|
|
283
283
|
} : {})
|
|
284
284
|
},
|
|
285
285
|
danger: {
|
|
286
|
-
'backgroundColor': theme.
|
|
287
|
-
'color': theme.
|
|
286
|
+
'backgroundColor': theme.colors['bg/danger/bold'],
|
|
287
|
+
'color': theme.colors['text/inverse'],
|
|
288
288
|
'& svg': {
|
|
289
|
-
color: theme.
|
|
289
|
+
color: theme.colors['icon/inverse']
|
|
290
290
|
},
|
|
291
291
|
'&:hover:not(:disabled)': {
|
|
292
|
-
backgroundColor: theme.
|
|
292
|
+
backgroundColor: theme.colors['bg/danger/bold/hovered']
|
|
293
293
|
},
|
|
294
294
|
'&:active:not(:disabled)': {
|
|
295
|
-
backgroundColor: theme.
|
|
295
|
+
backgroundColor: theme.colors['bg/danger/bold/pressed']
|
|
296
296
|
},
|
|
297
297
|
'&:focus-visible': {
|
|
298
|
-
outlineColor: theme.
|
|
298
|
+
outlineColor: theme.colors['border/focused'],
|
|
299
299
|
outlineStyle: 'solid',
|
|
300
300
|
outlineWidth: 2,
|
|
301
301
|
outlineOffset: 2
|
|
302
302
|
},
|
|
303
303
|
...($disabled ? {
|
|
304
|
-
'backgroundColor': theme.
|
|
305
|
-
'color': theme.
|
|
304
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
305
|
+
'color': theme.colors['text/disabled'],
|
|
306
306
|
'& svg': {
|
|
307
|
-
color: theme.
|
|
307
|
+
color: theme.colors['icon/disabled']
|
|
308
308
|
}
|
|
309
309
|
} : {})
|
|
310
310
|
}
|
|
@@ -332,22 +332,22 @@ const BaseSpinner = styled(Spinner)(variant({
|
|
|
332
332
|
prop: 'variant',
|
|
333
333
|
variants: {
|
|
334
334
|
primary: {
|
|
335
|
-
color: theme.
|
|
335
|
+
color: theme.colors['icon/inverse']
|
|
336
336
|
},
|
|
337
337
|
secondary: {
|
|
338
|
-
color: theme.
|
|
338
|
+
color: theme.colors['icon/primary']
|
|
339
339
|
},
|
|
340
340
|
neutral: {
|
|
341
|
-
color: theme.
|
|
341
|
+
color: theme.colors['icon/accent/gray']
|
|
342
342
|
},
|
|
343
343
|
outlined: {
|
|
344
|
-
color: theme.
|
|
344
|
+
color: theme.colors['icon/neutral/bolder']
|
|
345
345
|
},
|
|
346
346
|
plain: {
|
|
347
|
-
color: theme.
|
|
347
|
+
color: theme.colors['icon/neutral/bolder']
|
|
348
348
|
},
|
|
349
349
|
danger: {
|
|
350
|
-
color: theme.
|
|
350
|
+
color: theme.colors['icon/inverse']
|
|
351
351
|
}
|
|
352
352
|
}
|
|
353
353
|
}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teamturing/react-kit",
|
|
3
|
-
"version": "2.21.
|
|
3
|
+
"version": "2.21.6",
|
|
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": "
|
|
69
|
+
"gitHead": "75256eb184a6e69f6e8c61d6d4927ba0ee501e26"
|
|
70
70
|
}
|