Skip to content

Commit 0fd25ce

Browse files
maiieulmaiieul
committed
docs(make-it-yours): improve UX on choosing colors
1 parent 498322e commit 0fd25ce

File tree

2 files changed

+72
-32
lines changed

2 files changed

+72
-32
lines changed

‎apps/website/src/components/make-it-yours/make-it-yours.tsx‎

Lines changed: 52 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -105,17 +105,17 @@ export default component$(() => {
105105
<Modal
106106
closeOnBackdropClick={false}
107107
bind:show={showSig}
108-
class="make-it-yours bg-background text-foreground rounded-l-base mr-0 h-screen max-w-lg border-y border-l p-8 shadow-md"
108+
class="make-it-yours bg-background text-foreground rounded-l-base mr-0 h-screen max-w-sm border-y border-l p-8 shadow-md sm:w-full"
109109
>
110-
<div class="flex h-full flex-col justify-between">
110+
<div class="flex h-full flex-col items-center justify-center">
111111
<div>
112112
<ModalHeader>
113113
<h2 class="text-lg font-bold">Edit Profile</h2>
114114
</ModalHeader>
115115
<ModalContent class="mb-2 py-4">
116116
<label class="mb-1 block font-medium">Preset</label>
117117
<select
118-
class="bg-background rounded-base h-12 min-w-80 border p-2"
118+
class="bg-background rounded-base h-12 w-full border p-2"
119119
value={themeComputedObjectSig.value.style}
120120
onChange$={async (e, el) => {
121121
themeComputedObjectSig.value.style = el.value;
@@ -144,13 +144,13 @@ export default component$(() => {
144144
setTheme(await themeStoreToThemeClasses$());
145145
}}
146146
class={cn(
147-
'flex h-4 w-4 items-center justify-center rounded-none',
147+
'flex h-3 w-3 items-center justify-center rounded-none',
148148
isActive && 'border-ring border-2',
149149
)}
150150
>
151151
<span
152152
class={cn(
153-
'flex h-3 w-3 shrink-0 rounded-none',
153+
'flex h-[10px] w-[10px] shrink-0 rounded-none',
154154
base === 'base-slate' && 'bg-slate-500',
155155
base === 'base-gray' && 'bg-gray-500',
156156
base === 'base-neutral' && 'bg-neutral-500',
@@ -164,10 +164,25 @@ export default component$(() => {
164164
</div>
165165

166166
<label class="mb-1 mt-8 block font-medium">Primary</label>
167-
<div class="grid grid-cols-[repeat(22,1fr)]">
167+
<div class="grid grid-cols-[repeat(22,0fr)]">
168168
{primaryOptions.map((primary) => {
169169
const isActive = themeComputedObjectSig.value.primary === primary;
170170

171+
if (
172+
primary.includes('slate-100') ||
173+
primary.includes('gray-100') ||
174+
primary.includes('zinc-100') ||
175+
primary.includes('neutral-100') ||
176+
primary.includes('stone-100') ||
177+
primary.includes('slate-200') ||
178+
primary.includes('gray-200') ||
179+
primary.includes('zinc-200') ||
180+
primary.includes('neutral-200') ||
181+
primary.includes('stone-200')
182+
) {
183+
return <span key={primary}></span>;
184+
}
185+
171186
return (
172187
<Button
173188
key={primary}
@@ -178,21 +193,40 @@ export default component$(() => {
178193
setTheme(await themeStoreToThemeClasses$());
179194
}}
180195
class={cn(
181-
'flex h-4 w-4 items-center justify-center rounded-none',
182-
isActive && 'border-ring border-2',
196+
'h-3 w-3 rounded-none',
197+
isActive && 'border-ring border-[1px]',
183198
)}
184199
>
185-
{(primary === 'primary-slate-900' ||
200+
{(primary === 'primary-slate-800' ||
201+
primary === 'primary-gray-800' ||
202+
primary === 'primary-zinc-800' ||
203+
primary === 'primary-neutral-800' ||
204+
primary === 'primary-stone-800' ||
205+
primary === 'primary-slate-900' ||
186206
primary === 'primary-gray-900' ||
187207
primary === 'primary-zinc-900' ||
188208
primary === 'primary-neutral-900' ||
189209
primary === 'primary-stone-900') &&
190210
theme?.includes('dark') ? (
191-
<span class={cn('flex h-3 w-3 shrink-0 rounded-none')} />
211+
<span
212+
class={cn(
213+
'flex h-[10px] w-[10px] shrink-0 rounded-none',
214+
primary === 'primary-slate-800' && 'bg-slate-200',
215+
primary === 'primary-gray-800' && 'bg-gray-200',
216+
primary === 'primary-zinc-800' && 'bg-zinc-200',
217+
primary === 'primary-neutral-800' && 'bg-neutral-200',
218+
primary === 'primary-stone-800' && 'bg-stone-200',
219+
primary === 'primary-slate-900' && 'bg-slate-100',
220+
primary === 'primary-gray-900' && 'bg-gray-100',
221+
primary === 'primary-zinc-900' && 'bg-zinc-100',
222+
primary === 'primary-neutral-900' && 'bg-neutral-100',
223+
primary === 'primary-stone-900' && 'bg-stone-100',
224+
)}
225+
/>
192226
) : (
193227
<span
194228
class={cn(
195-
'flex h-3 w-3 shrink-0 rounded-none',
229+
'flex h-[10px] w-[10px] shrink-0 rounded-none',
196230
primary === 'primary-slate-100' && 'bg-slate-100',
197231
primary === 'primary-gray-100' && 'bg-gray-100',
198232
primary === 'primary-zinc-100' && 'bg-zinc-100',
@@ -457,18 +491,14 @@ export default component$(() => {
457491
</div>
458492
</ModalContent>
459493
</div>
460-
<div>
461-
<ModalFooter class="flex justify-end gap-4">
462-
<CopyCssConfig />
463-
</ModalFooter>
464-
<button
465-
onClick$={() => (showSig.value = false)}
466-
class="absolute right-6 top-[26px]"
467-
>
468-
<LuX class="h-8 w-8" />
469-
</button>
470-
</div>
471494
</div>
495+
496+
<ModalFooter class="flex justify-end gap-4">
497+
<CopyCssConfig />
498+
</ModalFooter>
499+
<button onClick$={() => (showSig.value = false)} class="absolute right-6 top-7">
500+
<LuX class="h-8 w-8" />
501+
</button>
472502
</Modal>
473503
</section>
474504
);

‎apps/website/src/global.css‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -375,11 +375,13 @@
375375
--ring: 24 5.7% 82.9%;
376376
}
377377

378-
.primary-slate-100 {
378+
.primary-slate-100,
379+
.dark.primary-slate-900 {
379380
--primary: 210 40% 96.1%;
380381
--primary-foreground: 0 0% 0%;
381382
}
382-
.primary-slate-200 {
383+
.primary-slate-200,
384+
.dark.primary-slate-800 {
383385
--primary: 214.3 31.8% 91.4%;
384386
--primary-foreground: 0 0% 0%;
385387
}
@@ -412,11 +414,13 @@
412414
--primary-foreground: 0 0% 100%;
413415
}
414416

415-
.primary-gray-100 {
417+
.primary-gray-100,
418+
.dark.primary-gray-900 {
416419
--primary: 220 14.3% 95.9%;
417420
--primary-foreground: 0 0% 0%;
418421
}
419-
.primary-gray-200 {
422+
.primary-gray-200,
423+
.dark.primary-gray-800 {
420424
--primary: 220 13% 91%;
421425
--primary-foreground: 0 0% 0%;
422426
}
@@ -449,11 +453,13 @@
449453
--primary-foreground: 0 0% 100%;
450454
}
451455

452-
.primary-zinc-100 {
456+
.primary-zinc-100,
457+
.dark.primary-zinc-900 {
453458
--primary: 240 4.8% 95.9%;
454459
--primary-foreground: 0 0% 0%;
455460
}
456-
.primary-zinc-200 {
461+
.primary-zinc-200,
462+
.dark.primary-zinc-800 {
457463
--primary: 240 5.9% 90%;
458464
--primary-foreground: 0 0% 0%;
459465
}
@@ -486,11 +492,13 @@
486492
--primary-foreground: 0 0% 100%;
487493
}
488494

489-
.primary-neutral-100 {
495+
.primary-neutral-100,
496+
.dark.primary-neutral-900 {
490497
--primary: 0 0% 96.1%;
491498
--primary-foreground: 0 0% 0%;
492499
}
493-
.primary-neutral-200 {
500+
.primary-neutral-200,
501+
.dark.primary-neutral-800 {
494502
--primary: 0 0% 89.8%;
495503
--primary-foreground: 0 0% 0%;
496504
}
@@ -523,11 +531,13 @@
523531
--primary-foreground: 0 0% 100%;
524532
}
525533

526-
.primary-stone-100 {
534+
.primary-stone-100,
535+
.dark.primary-stone-900 {
527536
--primary: 60 4.8% 95.9%;
528537
--primary-foreground: 0 0% 0%;
529538
}
530-
.primary-stone-200 {
539+
.primary-stone-200,
540+
.dark.primary-stone-800 {
531541
--primary: 20 5.9% 90%;
532542
--primary-foreground: 0 0% 0%;
533543
}

0 commit comments

Comments
 (0)