Skip to content

Commit 3640949

Browse files
SaraVieiraskeptrunedev
authored andcommitted
fix: fix color vars for the outlines
1 parent c2483b8 commit 3640949

File tree

1 file changed

+62
-14
lines changed
  • clients/search-component/src/TrieveModal

1 file changed

+62
-14
lines changed

clients/search-component/src/TrieveModal/index.css

Lines changed: 62 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
--tv-zinc-700: rgb(63 63 70);
99
--tv-zinc-900: rgb(24, 24, 27);
1010
--tv-zinc-400: rgb(161, 161, 170);
11+
--tv-zinc-600: rgb(82 82 91);
1112
--tv-primary-500: rgb(163 62 181);
1213
}
1314

@@ -154,7 +155,8 @@ body {
154155
@apply flex gap-2 items-center flex-wrap;
155156

156157
> p {
157-
@apply text-xs text-zinc-600;
158+
@apply text-xs;
159+
color: var(--tv-zinc-600);
158160
}
159161
}
160162

@@ -219,13 +221,22 @@ body {
219221
@apply block w-full rounded-md border-0 py-1.5 pr-14 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset outline-none sm:text-sm sm:leading-6 px-4 pl-8 h-12 z-10 relative;
220222
color: var(--tv-zinc-900);
221223
background-color: var(--tv-zinc-50);
222-
224+
border: 1px solid var(--tv-zinc-300);
225+
box-shadow:
226+
rgb(255, 255, 255) 0px 0px 0px 0px inset,
227+
var(--tv-zinc-300) 0px 0px 1px inset,
228+
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
223229
&::placeholder {
224230
color: var(--tv-zinc-400);
225231
}
226232

227233
&:focus {
228-
outline-color: var(--tv-primary-500);
234+
outline: none;
235+
border: 1px solid var(--tv-primary-500);
236+
box-shadow:
237+
rgb(255, 255, 255) 0px 0px 0px 0px inset,
238+
var(--tv-primary-500) 0px 0px 1px inset,
239+
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
229240
}
230241
}
231242
ul {
@@ -268,7 +279,7 @@ body {
268279

269280
&:hover .arrow-link,
270281
&:focus .arrow-link {
271-
@apply text-zinc-600;
282+
color: var(--tv-zinc-600);
272283
}
273284

274285
.arrow-link {
@@ -280,7 +291,8 @@ body {
280291
}
281292

282293
.description {
283-
@apply font-normal text-xs text-zinc-600 m-0;
294+
color: var(--tv-zinc-600);
295+
@apply font-normal text-xs m-0;
284296
}
285297
}
286298

@@ -330,7 +342,7 @@ body {
330342
background-color: var(--tv-zinc-700);
331343

332344
&:hover {
333-
@apply text-white;
345+
color: var(--tv-zinc-50);
334346
}
335347
}
336348
}
@@ -352,9 +364,20 @@ body {
352364
input {
353365
background-color: var(--tv-zinc-900);
354366
color: var(--tv-zinc-50);
367+
outline: none;
368+
box-shadow:
369+
rgb(255, 255, 255) 0px 0px 0px 0px inset,
370+
var(--tv-zinc-600) 0px 0px 1px inset,
371+
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
372+
border: 1px solid var(--tv-zinc-600);
355373

356374
&:focus {
357-
outline-color: var(--tv-zinc-700);
375+
outline: none;
376+
border: 1px solid var(--tv-primary-500);
377+
box-shadow:
378+
rgb(255, 255, 255) 0px 0px 0px 0px inset,
379+
var(--tv-primary-500) 0px 0px 1px inset,
380+
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
358381
}
359382
}
360383

@@ -422,9 +445,20 @@ body {
422445
@apply w-full flex items-center text-sm leading-6 ring-1 shadow-sm justify-between rounded-md border-0 py-1.5 px-2 sm:text-sm truncate gap-2 min-w-[43px] max-w-[300px];
423446
color: var(--tv-zinc-400);
424447
background-color: var(--tv-zinc-50);
425-
426-
&:focus {
427-
outline-color: var(--tv-primary-500);
448+
outline: none;
449+
border: 1px solid var(--tv-zinc-300);
450+
box-shadow:
451+
rgb(255, 255, 255) 0px 0px 0px 0px inset,
452+
var(--tv-zinc-300) 0px 0px 1px inset,
453+
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
454+
455+
&:hover {
456+
outline: none;
457+
border: 1px solid var(--tv-primary-500);
458+
box-shadow:
459+
rgb(255, 255, 255) 0px 0px 0px 0px inset,
460+
var(--tv-primary-500) 0px 0px 1px inset,
461+
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
428462
}
429463

430464
> div {
@@ -468,16 +502,30 @@ body {
468502
}
469503
}
470504
&.dark {
471-
@apply text-white/50 hover:brightness-[1.25] ring-zinc-600/30;
505+
@apply hover:brightness-[1.25];
472506
background-color: var(--tv-zinc-900);
473-
507+
color: var(--tv-zinc-600);
508+
outline: none;
509+
border: 1px solid var(--tv-zinc-600);
510+
box-shadow:
511+
rgb(255, 255, 255) 0px 0px 0px 0px inset,
512+
var(--tv-zinc-600) 0px 0px 1px inset,
513+
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
474514
&:hover {
475-
outline-color: var(--tv-primary-500);
515+
outline: none;
516+
border: 1px solid var(--tv-primary-500);
517+
box-shadow:
518+
rgb(255, 255, 255) 0px 0px 0px 0px inset,
519+
var(--tv-primary-500) 0px 0px 1px inset,
520+
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
476521
}
477522

478523
svg {
479-
@apply hover:text-zinc-200;
480524
color: var(--tv-zinc-300);
525+
526+
&:hover {
527+
color: var(--tv-zinc-100);
528+
}
481529
}
482530

483531
span {

0 commit comments

Comments
 (0)