@tanstack/hotkeys-devtools 1.3.2 → 1.3.4
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/styles/use-styles.js +28 -22
- package/package.json +2 -2
|
@@ -180,46 +180,50 @@ const stylesFactory = (theme) => {
|
|
|
180
180
|
flex-shrink: 0;
|
|
181
181
|
`,
|
|
182
182
|
searchInput: css`
|
|
183
|
+
/* !important: host page input and button styles outrank one class */
|
|
184
|
+
margin: 0 !important;
|
|
183
185
|
width: 100%;
|
|
184
|
-
padding: ${size[1.5]} ${size[2]};
|
|
185
|
-
padding-right: ${size[7]};
|
|
186
|
+
padding: ${size[1.5]} ${size[2]} !important;
|
|
187
|
+
padding-right: ${size[7]} !important;
|
|
186
188
|
font-size: ${fontSize.xs};
|
|
187
189
|
font-family: ${fontFamily.sans};
|
|
188
|
-
color: ${t(colors.gray[900], colors.gray[100])};
|
|
189
|
-
background: ${t(colors.gray[200], colors.darkGray[700])};
|
|
190
|
-
border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
|
|
191
|
-
border-radius: ${border.radius.md};
|
|
190
|
+
color: ${t(colors.gray[900], colors.gray[100])} !important;
|
|
191
|
+
background: ${t(colors.gray[200], colors.darkGray[700])} !important;
|
|
192
|
+
border: 1px solid ${t(colors.gray[300], colors.darkGray[600])} !important;
|
|
193
|
+
border-radius: ${border.radius.md} !important;
|
|
192
194
|
outline: none;
|
|
193
195
|
box-sizing: border-box;
|
|
194
196
|
|
|
195
197
|
&::placeholder {
|
|
196
|
-
color: ${t(colors.gray[500], colors.gray[500])};
|
|
198
|
+
color: ${t(colors.gray[500], colors.gray[500])} !important;
|
|
197
199
|
}
|
|
198
200
|
|
|
199
201
|
&:focus {
|
|
200
|
-
border-color: ${t(colors.blue[500], colors.blue[400])};
|
|
202
|
+
border-color: ${t(colors.blue[500], colors.blue[400])} !important;
|
|
201
203
|
box-shadow: 0 0 0 1px
|
|
202
204
|
${t(colors.blue[500] + alpha[30], colors.blue[400] + alpha[30])};
|
|
203
205
|
}
|
|
204
206
|
`,
|
|
205
207
|
searchClear: css`
|
|
208
|
+
/* !important: host page input and button styles outrank one class */
|
|
209
|
+
margin: 0 !important;
|
|
206
210
|
position: absolute;
|
|
207
211
|
right: ${size[3]};
|
|
208
212
|
top: 50%;
|
|
209
213
|
transform: translateY(-50%);
|
|
210
|
-
background: none;
|
|
211
|
-
border: none;
|
|
212
|
-
color: ${t(colors.gray[500], colors.gray[400])};
|
|
214
|
+
background: none !important;
|
|
215
|
+
border: none !important;
|
|
216
|
+
color: ${t(colors.gray[500], colors.gray[400])} !important;
|
|
213
217
|
font-size: ${fontSize.md};
|
|
214
218
|
cursor: pointer;
|
|
215
|
-
padding: ${size[1]};
|
|
219
|
+
padding: ${size[1]} !important;
|
|
216
220
|
line-height: 1;
|
|
217
221
|
display: flex;
|
|
218
222
|
align-items: center;
|
|
219
223
|
justify-content: center;
|
|
220
224
|
|
|
221
225
|
&:hover {
|
|
222
|
-
color: ${t(colors.gray[700], colors.gray[200])};
|
|
226
|
+
color: ${t(colors.gray[700], colors.gray[200])} !important;
|
|
223
227
|
}
|
|
224
228
|
`,
|
|
225
229
|
panelHeader: css`
|
|
@@ -425,14 +429,16 @@ const stylesFactory = (theme) => {
|
|
|
425
429
|
gap: ${size[2]};
|
|
426
430
|
`,
|
|
427
431
|
actionButton: css`
|
|
432
|
+
/* !important: host page input and button styles outrank one class */
|
|
433
|
+
margin: 0 !important;
|
|
428
434
|
display: inline-flex;
|
|
429
435
|
align-items: center;
|
|
430
436
|
gap: ${size[1]};
|
|
431
|
-
padding: ${size[1]} ${size[2]};
|
|
432
|
-
border-radius: ${border.radius.md};
|
|
433
|
-
border: 1px solid ${t(colors.gray[300], colors.darkGray[500])};
|
|
434
|
-
background: ${t(colors.gray[200], colors.darkGray[600])};
|
|
435
|
-
color: ${t(colors.gray[900], colors.gray[100])};
|
|
437
|
+
padding: ${size[1]} ${size[2]} !important;
|
|
438
|
+
border-radius: ${border.radius.md} !important;
|
|
439
|
+
border: 1px solid ${t(colors.gray[300], colors.darkGray[500])} !important;
|
|
440
|
+
background: ${t(colors.gray[200], colors.darkGray[600])} !important;
|
|
441
|
+
color: ${t(colors.gray[900], colors.gray[100])} !important;
|
|
436
442
|
font-size: ${fontSize.xs};
|
|
437
443
|
cursor: pointer;
|
|
438
444
|
user-select: none;
|
|
@@ -440,15 +446,15 @@ const stylesFactory = (theme) => {
|
|
|
440
446
|
background 0.15s,
|
|
441
447
|
border-color 0.15s;
|
|
442
448
|
&:hover {
|
|
443
|
-
background: ${t(colors.gray[300], colors.darkGray[500])};
|
|
444
|
-
border-color: ${t(colors.gray[400], colors.darkGray[400])};
|
|
449
|
+
background: ${t(colors.gray[300], colors.darkGray[500])} !important;
|
|
450
|
+
border-color: ${t(colors.gray[400], colors.darkGray[400])} !important;
|
|
445
451
|
}
|
|
446
452
|
&:disabled {
|
|
447
453
|
opacity: 0.5;
|
|
448
454
|
cursor: not-allowed;
|
|
449
455
|
&:hover {
|
|
450
|
-
background: ${t(colors.gray[200], colors.darkGray[600])};
|
|
451
|
-
border-color: ${t(colors.gray[300], colors.darkGray[500])};
|
|
456
|
+
background: ${t(colors.gray[200], colors.darkGray[600])} !important;
|
|
457
|
+
border-color: ${t(colors.gray[300], colors.darkGray[500])} !important;
|
|
452
458
|
}
|
|
453
459
|
}
|
|
454
460
|
`,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/hotkeys-devtools",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.4",
|
|
4
4
|
"description": "Devtools for TanStack Hotkeys",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"dist"
|
|
37
37
|
],
|
|
38
38
|
"peerDependencies": {
|
|
39
|
-
"@tanstack/hotkeys": "0.
|
|
39
|
+
"@tanstack/hotkeys": "0.14.0"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@tanstack/devtools-ui": "^0.7.1",
|