@teamturing/react-kit 2.21.4 → 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 +83 -78
- package/esm/core/Button/index.js +83 -81
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -17183,10 +17183,11 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
17183
17183
|
const BaseButton = styled__default.default(UnstyledButton)(({
|
|
17184
17184
|
$loading,
|
|
17185
17185
|
$disabled,
|
|
17186
|
-
fillWidth
|
|
17186
|
+
fillWidth,
|
|
17187
|
+
theme
|
|
17187
17188
|
}) => ({
|
|
17188
17189
|
'position': 'relative',
|
|
17189
|
-
'borderRadius': radii.full,
|
|
17190
|
+
'borderRadius': theme.radii.full,
|
|
17190
17191
|
'backgroundColor': 'black',
|
|
17191
17192
|
'transition': 'background-color 100ms, color 100ms',
|
|
17192
17193
|
'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
|
|
@@ -17196,7 +17197,8 @@ const BaseButton = styled__default.default(UnstyledButton)(({
|
|
|
17196
17197
|
}
|
|
17197
17198
|
}), ({
|
|
17198
17199
|
leadingIcon,
|
|
17199
|
-
trailingIcon
|
|
17200
|
+
trailingIcon,
|
|
17201
|
+
theme
|
|
17200
17202
|
}) => variant({
|
|
17201
17203
|
prop: 'size',
|
|
17202
17204
|
variants: {
|
|
@@ -17206,9 +17208,9 @@ const BaseButton = styled__default.default(UnstyledButton)(({
|
|
|
17206
17208
|
'py': 3,
|
|
17207
17209
|
'height': 'initial',
|
|
17208
17210
|
'maxHeight': 'initial',
|
|
17209
|
-
'fontSize':
|
|
17210
|
-
'fontWeight':
|
|
17211
|
-
'lineHeight':
|
|
17211
|
+
'fontSize': theme.fontSizes.s,
|
|
17212
|
+
'fontWeight': theme.fontWeights.medium,
|
|
17213
|
+
'lineHeight': theme.lineHeights[2],
|
|
17212
17214
|
'& svg': {
|
|
17213
17215
|
width: 20,
|
|
17214
17216
|
height: 20
|
|
@@ -17220,9 +17222,9 @@ const BaseButton = styled__default.default(UnstyledButton)(({
|
|
|
17220
17222
|
'py': 2,
|
|
17221
17223
|
'height': 'initial',
|
|
17222
17224
|
'maxHeight': 'initial',
|
|
17223
|
-
'fontSize':
|
|
17224
|
-
'fontWeight':
|
|
17225
|
-
'lineHeight':
|
|
17225
|
+
'fontSize': theme.fontSizes.xs,
|
|
17226
|
+
'fontWeight': theme.fontWeights.medium,
|
|
17227
|
+
'lineHeight': theme.lineHeights[2],
|
|
17226
17228
|
'& svg': {
|
|
17227
17229
|
width: 16,
|
|
17228
17230
|
height: 16
|
|
@@ -17234,9 +17236,9 @@ const BaseButton = styled__default.default(UnstyledButton)(({
|
|
|
17234
17236
|
'py': 0,
|
|
17235
17237
|
'height': 32,
|
|
17236
17238
|
'maxHeight': 32,
|
|
17237
|
-
'fontSize':
|
|
17238
|
-
'fontWeight':
|
|
17239
|
-
'lineHeight':
|
|
17239
|
+
'fontSize': theme.fontSizes.xxs,
|
|
17240
|
+
'fontWeight': theme.fontWeights.medium,
|
|
17241
|
+
'lineHeight': theme.lineHeights[2],
|
|
17240
17242
|
'& svg': {
|
|
17241
17243
|
width: 12,
|
|
17242
17244
|
height: 12
|
|
@@ -17244,93 +17246,94 @@ const BaseButton = styled__default.default(UnstyledButton)(({
|
|
|
17244
17246
|
}
|
|
17245
17247
|
}
|
|
17246
17248
|
}), ({
|
|
17247
|
-
$disabled
|
|
17249
|
+
$disabled,
|
|
17250
|
+
theme
|
|
17248
17251
|
}) => variant({
|
|
17249
17252
|
prop: 'variant',
|
|
17250
17253
|
variants: {
|
|
17251
17254
|
primary: {
|
|
17252
|
-
'backgroundColor':
|
|
17253
|
-
'color':
|
|
17255
|
+
'backgroundColor': theme.colors['bg/primary'],
|
|
17256
|
+
'color': theme.colors['text/inverse'],
|
|
17254
17257
|
'& svg': {
|
|
17255
|
-
color:
|
|
17258
|
+
color: theme.colors['icon/inverse']
|
|
17256
17259
|
},
|
|
17257
17260
|
'&:hover:not(:disabled)': {
|
|
17258
|
-
backgroundColor:
|
|
17261
|
+
backgroundColor: theme.colors['bg/primary/hovered']
|
|
17259
17262
|
},
|
|
17260
17263
|
'&:active:not(:disabled)': {
|
|
17261
|
-
backgroundColor:
|
|
17264
|
+
backgroundColor: theme.colors['bg/primary/pressed']
|
|
17262
17265
|
},
|
|
17263
17266
|
'&:focus-visible': {
|
|
17264
|
-
outlineColor:
|
|
17267
|
+
outlineColor: theme.colors['border/focused'],
|
|
17265
17268
|
outlineStyle: 'solid',
|
|
17266
17269
|
outlineWidth: 2,
|
|
17267
17270
|
outlineOffset: 2
|
|
17268
17271
|
},
|
|
17269
17272
|
...($disabled ? {
|
|
17270
|
-
'backgroundColor':
|
|
17271
|
-
'color':
|
|
17273
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
17274
|
+
'color': theme.colors['text/disabled'],
|
|
17272
17275
|
'& svg': {
|
|
17273
|
-
color:
|
|
17276
|
+
color: theme.colors['icon/disabled']
|
|
17274
17277
|
}
|
|
17275
17278
|
} : {})
|
|
17276
17279
|
},
|
|
17277
17280
|
secondary: {
|
|
17278
|
-
'backgroundColor':
|
|
17279
|
-
'color':
|
|
17281
|
+
'backgroundColor': theme.colors['bg/secondary'],
|
|
17282
|
+
'color': theme.colors['text/primary'],
|
|
17280
17283
|
'& svg': {
|
|
17281
|
-
color:
|
|
17284
|
+
color: theme.colors['icon/primary']
|
|
17282
17285
|
},
|
|
17283
17286
|
'&:hover:not(:disabled)': {
|
|
17284
|
-
backgroundColor:
|
|
17287
|
+
backgroundColor: theme.colors['bg/secondary/hovered']
|
|
17285
17288
|
},
|
|
17286
17289
|
'&:active:not(:disabled)': {
|
|
17287
|
-
backgroundColor:
|
|
17290
|
+
backgroundColor: theme.colors['bg/secondary/pressed']
|
|
17288
17291
|
},
|
|
17289
17292
|
'&:focus-visible': {
|
|
17290
|
-
outlineColor:
|
|
17293
|
+
outlineColor: theme.colors['border/focused'],
|
|
17291
17294
|
outlineStyle: 'solid',
|
|
17292
17295
|
outlineWidth: 2,
|
|
17293
17296
|
outlineOffset: 2
|
|
17294
17297
|
},
|
|
17295
17298
|
...($disabled ? {
|
|
17296
|
-
'backgroundColor':
|
|
17297
|
-
'color':
|
|
17299
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
17300
|
+
'color': theme.colors['text/disabled'],
|
|
17298
17301
|
'& svg': {
|
|
17299
|
-
color:
|
|
17302
|
+
color: theme.colors['icon/disabled']
|
|
17300
17303
|
}
|
|
17301
17304
|
} : {})
|
|
17302
17305
|
},
|
|
17303
17306
|
neutral: {
|
|
17304
|
-
'backgroundColor':
|
|
17305
|
-
'color':
|
|
17307
|
+
'backgroundColor': theme.colors['bg/neutral'],
|
|
17308
|
+
'color': theme.colors['text/neutral'],
|
|
17306
17309
|
'& svg': {
|
|
17307
|
-
color:
|
|
17310
|
+
color: theme.colors['icon/accent/gray']
|
|
17308
17311
|
},
|
|
17309
17312
|
'&:hover:not(:disabled)': {
|
|
17310
|
-
backgroundColor:
|
|
17313
|
+
backgroundColor: theme.colors['bg/neutral/hovered']
|
|
17311
17314
|
},
|
|
17312
17315
|
'&:active:not(:disabled)': {
|
|
17313
|
-
backgroundColor:
|
|
17316
|
+
backgroundColor: theme.colors['bg/neutral/pressed']
|
|
17314
17317
|
},
|
|
17315
17318
|
'&:focus-visible': {
|
|
17316
|
-
outlineColor:
|
|
17319
|
+
outlineColor: theme.colors['border/focused'],
|
|
17317
17320
|
outlineStyle: 'solid',
|
|
17318
17321
|
outlineWidth: 2,
|
|
17319
17322
|
outlineOffset: 2
|
|
17320
17323
|
},
|
|
17321
17324
|
...($disabled ? {
|
|
17322
|
-
'backgroundColor':
|
|
17323
|
-
'color':
|
|
17325
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
17326
|
+
'color': theme.colors['text/disabled'],
|
|
17324
17327
|
'& svg': {
|
|
17325
|
-
color:
|
|
17328
|
+
color: theme.colors['icon/disabled']
|
|
17326
17329
|
}
|
|
17327
17330
|
} : {})
|
|
17328
17331
|
},
|
|
17329
17332
|
outlined: {
|
|
17330
|
-
'backgroundColor':
|
|
17331
|
-
'color':
|
|
17333
|
+
'backgroundColor': theme.colors['bg/neutral/subtler'],
|
|
17334
|
+
'color': theme.colors['text/neutral/subtle'],
|
|
17332
17335
|
'& svg': {
|
|
17333
|
-
color:
|
|
17336
|
+
color: theme.colors['icon/neutral/bolder']
|
|
17334
17337
|
},
|
|
17335
17338
|
'&:after': {
|
|
17336
17339
|
content: '""',
|
|
@@ -17341,27 +17344,27 @@ const BaseButton = styled__default.default(UnstyledButton)(({
|
|
|
17341
17344
|
left: 0,
|
|
17342
17345
|
borderWidth: 1,
|
|
17343
17346
|
borderStyle: 'solid',
|
|
17344
|
-
borderColor:
|
|
17345
|
-
borderRadius: radii.full,
|
|
17347
|
+
borderColor: theme.colors['border/neutral/bolder'],
|
|
17348
|
+
borderRadius: theme.radii.full,
|
|
17346
17349
|
boxSizing: 'border-box'
|
|
17347
17350
|
},
|
|
17348
17351
|
'&:hover:not(:disabled)': {
|
|
17349
|
-
backgroundColor:
|
|
17352
|
+
backgroundColor: theme.colors['bg/neutral/subtler/hovered']
|
|
17350
17353
|
},
|
|
17351
17354
|
'&:active:not(:disabled)': {
|
|
17352
|
-
backgroundColor:
|
|
17355
|
+
backgroundColor: theme.colors['bg/neutral/subtler/pressed']
|
|
17353
17356
|
},
|
|
17354
17357
|
'&:focus-visible': {
|
|
17355
|
-
outlineColor:
|
|
17358
|
+
outlineColor: theme.colors['border/focused'],
|
|
17356
17359
|
outlineStyle: 'solid',
|
|
17357
17360
|
outlineWidth: 2,
|
|
17358
17361
|
outlineOffset: 2
|
|
17359
17362
|
},
|
|
17360
17363
|
...($disabled ? {
|
|
17361
|
-
'backgroundColor':
|
|
17362
|
-
'color':
|
|
17364
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
17365
|
+
'color': theme.colors['text/disabled'],
|
|
17363
17366
|
'& svg': {
|
|
17364
|
-
color:
|
|
17367
|
+
color: theme.colors['icon/disabled']
|
|
17365
17368
|
},
|
|
17366
17369
|
'&:after': {
|
|
17367
17370
|
display: 'none'
|
|
@@ -17369,60 +17372,60 @@ const BaseButton = styled__default.default(UnstyledButton)(({
|
|
|
17369
17372
|
} : {})
|
|
17370
17373
|
},
|
|
17371
17374
|
plain: {
|
|
17372
|
-
'backgroundColor':
|
|
17373
|
-
'color':
|
|
17375
|
+
'backgroundColor': theme.colors['bg/neutral/subtler'],
|
|
17376
|
+
'color': theme.colors['text/neutral/subtle'],
|
|
17374
17377
|
'& svg': {
|
|
17375
|
-
color:
|
|
17378
|
+
color: theme.colors['icon/neutral/bolder']
|
|
17376
17379
|
},
|
|
17377
17380
|
'&:hover:not(:disabled)': {
|
|
17378
|
-
'color':
|
|
17381
|
+
'color': theme.colors['text/neutral'],
|
|
17379
17382
|
'& svg': {
|
|
17380
|
-
color:
|
|
17383
|
+
color: theme.colors['icon/accent/gray']
|
|
17381
17384
|
}
|
|
17382
17385
|
},
|
|
17383
17386
|
'&:active:not(:disabled)': {
|
|
17384
|
-
'color':
|
|
17387
|
+
'color': theme.colors['text/neutral'],
|
|
17385
17388
|
'& svg': {
|
|
17386
|
-
color:
|
|
17389
|
+
color: theme.colors['icon/accent/gray']
|
|
17387
17390
|
}
|
|
17388
17391
|
},
|
|
17389
17392
|
'&:focus-visible': {
|
|
17390
|
-
outlineColor:
|
|
17393
|
+
outlineColor: theme.colors['border/focused'],
|
|
17391
17394
|
outlineStyle: 'solid',
|
|
17392
17395
|
outlineWidth: 2,
|
|
17393
17396
|
outlineOffset: 2
|
|
17394
17397
|
},
|
|
17395
17398
|
...($disabled ? {
|
|
17396
|
-
'backgroundColor':
|
|
17397
|
-
'color':
|
|
17399
|
+
'backgroundColor': theme.colors['bg/disabled/subtlest'],
|
|
17400
|
+
'color': theme.colors['text/disabled'],
|
|
17398
17401
|
'& svg': {
|
|
17399
|
-
color:
|
|
17402
|
+
color: theme.colors['icon/disabled']
|
|
17400
17403
|
}
|
|
17401
17404
|
} : {})
|
|
17402
17405
|
},
|
|
17403
17406
|
danger: {
|
|
17404
|
-
'backgroundColor':
|
|
17405
|
-
'color':
|
|
17407
|
+
'backgroundColor': theme.colors['bg/danger/bold'],
|
|
17408
|
+
'color': theme.colors['text/inverse'],
|
|
17406
17409
|
'& svg': {
|
|
17407
|
-
color:
|
|
17410
|
+
color: theme.colors['icon/inverse']
|
|
17408
17411
|
},
|
|
17409
17412
|
'&:hover:not(:disabled)': {
|
|
17410
|
-
backgroundColor:
|
|
17413
|
+
backgroundColor: theme.colors['bg/danger/bold/hovered']
|
|
17411
17414
|
},
|
|
17412
17415
|
'&:active:not(:disabled)': {
|
|
17413
|
-
backgroundColor:
|
|
17416
|
+
backgroundColor: theme.colors['bg/danger/bold/pressed']
|
|
17414
17417
|
},
|
|
17415
17418
|
'&:focus-visible': {
|
|
17416
|
-
outlineColor:
|
|
17419
|
+
outlineColor: theme.colors['border/focused'],
|
|
17417
17420
|
outlineStyle: 'solid',
|
|
17418
17421
|
outlineWidth: 2,
|
|
17419
17422
|
outlineOffset: 2
|
|
17420
17423
|
},
|
|
17421
17424
|
...($disabled ? {
|
|
17422
|
-
'backgroundColor':
|
|
17423
|
-
'color':
|
|
17425
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
17426
|
+
'color': theme.colors['text/disabled'],
|
|
17424
17427
|
'& svg': {
|
|
17425
|
-
color:
|
|
17428
|
+
color: theme.colors['icon/disabled']
|
|
17426
17429
|
}
|
|
17427
17430
|
} : {})
|
|
17428
17431
|
}
|
|
@@ -17444,26 +17447,28 @@ const BaseSpinner = styled__default.default(Spinner)(variant({
|
|
|
17444
17447
|
height: 16
|
|
17445
17448
|
}
|
|
17446
17449
|
}
|
|
17447
|
-
}),
|
|
17450
|
+
}), ({
|
|
17451
|
+
theme
|
|
17452
|
+
}) => variant({
|
|
17448
17453
|
prop: 'variant',
|
|
17449
17454
|
variants: {
|
|
17450
17455
|
primary: {
|
|
17451
|
-
color:
|
|
17456
|
+
color: theme.colors['icon/inverse']
|
|
17452
17457
|
},
|
|
17453
17458
|
secondary: {
|
|
17454
|
-
color:
|
|
17459
|
+
color: theme.colors['icon/primary']
|
|
17455
17460
|
},
|
|
17456
17461
|
neutral: {
|
|
17457
|
-
color:
|
|
17462
|
+
color: theme.colors['icon/accent/gray']
|
|
17458
17463
|
},
|
|
17459
17464
|
outlined: {
|
|
17460
|
-
color:
|
|
17465
|
+
color: theme.colors['icon/neutral/bolder']
|
|
17461
17466
|
},
|
|
17462
17467
|
plain: {
|
|
17463
|
-
color:
|
|
17468
|
+
color: theme.colors['icon/neutral/bolder']
|
|
17464
17469
|
},
|
|
17465
17470
|
danger: {
|
|
17466
|
-
color:
|
|
17471
|
+
color: theme.colors['icon/inverse']
|
|
17467
17472
|
}
|
|
17468
17473
|
}
|
|
17469
17474
|
}));
|
package/esm/core/Button/index.js
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
import color from '../../packages/token-studio/esm/token/color/index.js';
|
|
2
|
-
import radii from '../../packages/token-studio/esm/token/radii/index.js';
|
|
3
|
-
import typography from '../../packages/token-studio/esm/token/typography/index.js';
|
|
4
1
|
import { forwardRef } from 'react';
|
|
5
2
|
import styled from 'styled-components';
|
|
6
3
|
import '../../node_modules/styled-system/dist/index.esm.js';
|
|
@@ -65,10 +62,11 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
65
62
|
const BaseButton = styled(UnstyledButton)(({
|
|
66
63
|
$loading,
|
|
67
64
|
$disabled,
|
|
68
|
-
fillWidth
|
|
65
|
+
fillWidth,
|
|
66
|
+
theme
|
|
69
67
|
}) => ({
|
|
70
68
|
'position': 'relative',
|
|
71
|
-
'borderRadius': radii.full,
|
|
69
|
+
'borderRadius': theme.radii.full,
|
|
72
70
|
'backgroundColor': 'black',
|
|
73
71
|
'transition': 'background-color 100ms, color 100ms',
|
|
74
72
|
'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
|
|
@@ -78,7 +76,8 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
78
76
|
}
|
|
79
77
|
}), ({
|
|
80
78
|
leadingIcon,
|
|
81
|
-
trailingIcon
|
|
79
|
+
trailingIcon,
|
|
80
|
+
theme
|
|
82
81
|
}) => variant({
|
|
83
82
|
prop: 'size',
|
|
84
83
|
variants: {
|
|
@@ -88,9 +87,9 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
88
87
|
'py': 3,
|
|
89
88
|
'height': 'initial',
|
|
90
89
|
'maxHeight': 'initial',
|
|
91
|
-
'fontSize':
|
|
92
|
-
'fontWeight':
|
|
93
|
-
'lineHeight':
|
|
90
|
+
'fontSize': theme.fontSizes.s,
|
|
91
|
+
'fontWeight': theme.fontWeights.medium,
|
|
92
|
+
'lineHeight': theme.lineHeights[2],
|
|
94
93
|
'& svg': {
|
|
95
94
|
width: 20,
|
|
96
95
|
height: 20
|
|
@@ -102,9 +101,9 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
102
101
|
'py': 2,
|
|
103
102
|
'height': 'initial',
|
|
104
103
|
'maxHeight': 'initial',
|
|
105
|
-
'fontSize':
|
|
106
|
-
'fontWeight':
|
|
107
|
-
'lineHeight':
|
|
104
|
+
'fontSize': theme.fontSizes.xs,
|
|
105
|
+
'fontWeight': theme.fontWeights.medium,
|
|
106
|
+
'lineHeight': theme.lineHeights[2],
|
|
108
107
|
'& svg': {
|
|
109
108
|
width: 16,
|
|
110
109
|
height: 16
|
|
@@ -116,9 +115,9 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
116
115
|
'py': 0,
|
|
117
116
|
'height': 32,
|
|
118
117
|
'maxHeight': 32,
|
|
119
|
-
'fontSize':
|
|
120
|
-
'fontWeight':
|
|
121
|
-
'lineHeight':
|
|
118
|
+
'fontSize': theme.fontSizes.xxs,
|
|
119
|
+
'fontWeight': theme.fontWeights.medium,
|
|
120
|
+
'lineHeight': theme.lineHeights[2],
|
|
122
121
|
'& svg': {
|
|
123
122
|
width: 12,
|
|
124
123
|
height: 12
|
|
@@ -126,93 +125,94 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
126
125
|
}
|
|
127
126
|
}
|
|
128
127
|
}), ({
|
|
129
|
-
$disabled
|
|
128
|
+
$disabled,
|
|
129
|
+
theme
|
|
130
130
|
}) => variant({
|
|
131
131
|
prop: 'variant',
|
|
132
132
|
variants: {
|
|
133
133
|
primary: {
|
|
134
|
-
'backgroundColor':
|
|
135
|
-
'color':
|
|
134
|
+
'backgroundColor': theme.colors['bg/primary'],
|
|
135
|
+
'color': theme.colors['text/inverse'],
|
|
136
136
|
'& svg': {
|
|
137
|
-
color:
|
|
137
|
+
color: theme.colors['icon/inverse']
|
|
138
138
|
},
|
|
139
139
|
'&:hover:not(:disabled)': {
|
|
140
|
-
backgroundColor:
|
|
140
|
+
backgroundColor: theme.colors['bg/primary/hovered']
|
|
141
141
|
},
|
|
142
142
|
'&:active:not(:disabled)': {
|
|
143
|
-
backgroundColor:
|
|
143
|
+
backgroundColor: theme.colors['bg/primary/pressed']
|
|
144
144
|
},
|
|
145
145
|
'&:focus-visible': {
|
|
146
|
-
outlineColor:
|
|
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':
|
|
153
|
-
'color':
|
|
152
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
153
|
+
'color': theme.colors['text/disabled'],
|
|
154
154
|
'& svg': {
|
|
155
|
-
color:
|
|
155
|
+
color: theme.colors['icon/disabled']
|
|
156
156
|
}
|
|
157
157
|
} : {})
|
|
158
158
|
},
|
|
159
159
|
secondary: {
|
|
160
|
-
'backgroundColor':
|
|
161
|
-
'color':
|
|
160
|
+
'backgroundColor': theme.colors['bg/secondary'],
|
|
161
|
+
'color': theme.colors['text/primary'],
|
|
162
162
|
'& svg': {
|
|
163
|
-
color:
|
|
163
|
+
color: theme.colors['icon/primary']
|
|
164
164
|
},
|
|
165
165
|
'&:hover:not(:disabled)': {
|
|
166
|
-
backgroundColor:
|
|
166
|
+
backgroundColor: theme.colors['bg/secondary/hovered']
|
|
167
167
|
},
|
|
168
168
|
'&:active:not(:disabled)': {
|
|
169
|
-
backgroundColor:
|
|
169
|
+
backgroundColor: theme.colors['bg/secondary/pressed']
|
|
170
170
|
},
|
|
171
171
|
'&:focus-visible': {
|
|
172
|
-
outlineColor:
|
|
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':
|
|
179
|
-
'color':
|
|
178
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
179
|
+
'color': theme.colors['text/disabled'],
|
|
180
180
|
'& svg': {
|
|
181
|
-
color:
|
|
181
|
+
color: theme.colors['icon/disabled']
|
|
182
182
|
}
|
|
183
183
|
} : {})
|
|
184
184
|
},
|
|
185
185
|
neutral: {
|
|
186
|
-
'backgroundColor':
|
|
187
|
-
'color':
|
|
186
|
+
'backgroundColor': theme.colors['bg/neutral'],
|
|
187
|
+
'color': theme.colors['text/neutral'],
|
|
188
188
|
'& svg': {
|
|
189
|
-
color:
|
|
189
|
+
color: theme.colors['icon/accent/gray']
|
|
190
190
|
},
|
|
191
191
|
'&:hover:not(:disabled)': {
|
|
192
|
-
backgroundColor:
|
|
192
|
+
backgroundColor: theme.colors['bg/neutral/hovered']
|
|
193
193
|
},
|
|
194
194
|
'&:active:not(:disabled)': {
|
|
195
|
-
backgroundColor:
|
|
195
|
+
backgroundColor: theme.colors['bg/neutral/pressed']
|
|
196
196
|
},
|
|
197
197
|
'&:focus-visible': {
|
|
198
|
-
outlineColor:
|
|
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':
|
|
205
|
-
'color':
|
|
204
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
205
|
+
'color': theme.colors['text/disabled'],
|
|
206
206
|
'& svg': {
|
|
207
|
-
color:
|
|
207
|
+
color: theme.colors['icon/disabled']
|
|
208
208
|
}
|
|
209
209
|
} : {})
|
|
210
210
|
},
|
|
211
211
|
outlined: {
|
|
212
|
-
'backgroundColor':
|
|
213
|
-
'color':
|
|
212
|
+
'backgroundColor': theme.colors['bg/neutral/subtler'],
|
|
213
|
+
'color': theme.colors['text/neutral/subtle'],
|
|
214
214
|
'& svg': {
|
|
215
|
-
color:
|
|
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:
|
|
227
|
-
borderRadius: radii.full,
|
|
226
|
+
borderColor: theme.colors['border/neutral/bolder'],
|
|
227
|
+
borderRadius: theme.radii.full,
|
|
228
228
|
boxSizing: 'border-box'
|
|
229
229
|
},
|
|
230
230
|
'&:hover:not(:disabled)': {
|
|
231
|
-
backgroundColor:
|
|
231
|
+
backgroundColor: theme.colors['bg/neutral/subtler/hovered']
|
|
232
232
|
},
|
|
233
233
|
'&:active:not(:disabled)': {
|
|
234
|
-
backgroundColor:
|
|
234
|
+
backgroundColor: theme.colors['bg/neutral/subtler/pressed']
|
|
235
235
|
},
|
|
236
236
|
'&:focus-visible': {
|
|
237
|
-
outlineColor:
|
|
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':
|
|
244
|
-
'color':
|
|
243
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
244
|
+
'color': theme.colors['text/disabled'],
|
|
245
245
|
'& svg': {
|
|
246
|
-
color:
|
|
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':
|
|
255
|
-
'color':
|
|
254
|
+
'backgroundColor': theme.colors['bg/neutral/subtler'],
|
|
255
|
+
'color': theme.colors['text/neutral/subtle'],
|
|
256
256
|
'& svg': {
|
|
257
|
-
color:
|
|
257
|
+
color: theme.colors['icon/neutral/bolder']
|
|
258
258
|
},
|
|
259
259
|
'&:hover:not(:disabled)': {
|
|
260
|
-
'color':
|
|
260
|
+
'color': theme.colors['text/neutral'],
|
|
261
261
|
'& svg': {
|
|
262
|
-
color:
|
|
262
|
+
color: theme.colors['icon/accent/gray']
|
|
263
263
|
}
|
|
264
264
|
},
|
|
265
265
|
'&:active:not(:disabled)': {
|
|
266
|
-
'color':
|
|
266
|
+
'color': theme.colors['text/neutral'],
|
|
267
267
|
'& svg': {
|
|
268
|
-
color:
|
|
268
|
+
color: theme.colors['icon/accent/gray']
|
|
269
269
|
}
|
|
270
270
|
},
|
|
271
271
|
'&:focus-visible': {
|
|
272
|
-
outlineColor:
|
|
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':
|
|
279
|
-
'color':
|
|
278
|
+
'backgroundColor': theme.colors['bg/disabled/subtlest'],
|
|
279
|
+
'color': theme.colors['text/disabled'],
|
|
280
280
|
'& svg': {
|
|
281
|
-
color:
|
|
281
|
+
color: theme.colors['icon/disabled']
|
|
282
282
|
}
|
|
283
283
|
} : {})
|
|
284
284
|
},
|
|
285
285
|
danger: {
|
|
286
|
-
'backgroundColor':
|
|
287
|
-
'color':
|
|
286
|
+
'backgroundColor': theme.colors['bg/danger/bold'],
|
|
287
|
+
'color': theme.colors['text/inverse'],
|
|
288
288
|
'& svg': {
|
|
289
|
-
color:
|
|
289
|
+
color: theme.colors['icon/inverse']
|
|
290
290
|
},
|
|
291
291
|
'&:hover:not(:disabled)': {
|
|
292
|
-
backgroundColor:
|
|
292
|
+
backgroundColor: theme.colors['bg/danger/bold/hovered']
|
|
293
293
|
},
|
|
294
294
|
'&:active:not(:disabled)': {
|
|
295
|
-
backgroundColor:
|
|
295
|
+
backgroundColor: theme.colors['bg/danger/bold/pressed']
|
|
296
296
|
},
|
|
297
297
|
'&:focus-visible': {
|
|
298
|
-
outlineColor:
|
|
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':
|
|
305
|
-
'color':
|
|
304
|
+
'backgroundColor': theme.colors['bg/disabled'],
|
|
305
|
+
'color': theme.colors['text/disabled'],
|
|
306
306
|
'& svg': {
|
|
307
|
-
color:
|
|
307
|
+
color: theme.colors['icon/disabled']
|
|
308
308
|
}
|
|
309
309
|
} : {})
|
|
310
310
|
}
|
|
@@ -326,26 +326,28 @@ const BaseSpinner = styled(Spinner)(variant({
|
|
|
326
326
|
height: 16
|
|
327
327
|
}
|
|
328
328
|
}
|
|
329
|
-
}),
|
|
329
|
+
}), ({
|
|
330
|
+
theme
|
|
331
|
+
}) => variant({
|
|
330
332
|
prop: 'variant',
|
|
331
333
|
variants: {
|
|
332
334
|
primary: {
|
|
333
|
-
color:
|
|
335
|
+
color: theme.colors['icon/inverse']
|
|
334
336
|
},
|
|
335
337
|
secondary: {
|
|
336
|
-
color:
|
|
338
|
+
color: theme.colors['icon/primary']
|
|
337
339
|
},
|
|
338
340
|
neutral: {
|
|
339
|
-
color:
|
|
341
|
+
color: theme.colors['icon/accent/gray']
|
|
340
342
|
},
|
|
341
343
|
outlined: {
|
|
342
|
-
color:
|
|
344
|
+
color: theme.colors['icon/neutral/bolder']
|
|
343
345
|
},
|
|
344
346
|
plain: {
|
|
345
|
-
color:
|
|
347
|
+
color: theme.colors['icon/neutral/bolder']
|
|
346
348
|
},
|
|
347
349
|
danger: {
|
|
348
|
-
color:
|
|
350
|
+
color: theme.colors['icon/inverse']
|
|
349
351
|
}
|
|
350
352
|
}
|
|
351
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
|
}
|