docs: dark mode redesign (#353)

* Dark theme colors

* complicated components

* format

src/components/component-preview.svelte

@@ -21,7 +21,7 @@
 >
 	<Tabs.Root class="relative mr-auto w-full" let:value>
 		<Tabs.List
-			class="absolute right-2.5 top-2.5 z-20 flex h-input-sm items-center justify-center rounded-card-sm bg-neutral-200 px-[5px] shadow-mini-inset dark:bg-neutral-800"
+			class="absolute right-2.5 top-2.5 z-20 flex h-input-sm items-center justify-center rounded-card-sm bg-neutral-200 px-[4px] shadow-mini-inset dark:border dark:border-neutral-600/30 dark:bg-neutral-950"
 		>
 			<Tabs.Trigger
 				value="preview"
@@ -40,7 +40,7 @@
 				</span>
 				{#if value === "preview"}
 					<div
-						class="absolute left-0 top-0 h-8 w-full rounded-[7px] bg-background"
+						class="absolute left-0 top-0 h-8 w-full rounded-[7px] bg-background dark:bg-muted"
 						in:send={{ key: "active" }}
 						out:receive={{ key: "active" }}
 					/>
@@ -63,7 +63,7 @@
 				</span>
 				{#if value === "code"}
 					<div
-						class="absolute left-0 top-0 h-8 w-full rounded-[7px] bg-background"
+						class="absolute left-0 top-0 h-8 w-full rounded-[7px] bg-background dark:bg-muted"
 						in:send={{ key: "active" }}
 						out:receive={{ key: "active" }}
 					/>

src/components/demos/calendar-demo.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <Calendar.Root
-	class="mt-6 rounded-[15px] border border-dark-10 bg-background p-[22px] shadow-card"
+	class="mt-6 rounded-[15px] border border-dark-10 bg-background-alt p-[22px] shadow-card"
 	let:months
 	let:weekdays
 	{isDateUnavailable}
@@ -17,13 +17,13 @@
 >
 	<Calendar.Header class="flex items-center justify-between">
 		<Calendar.PrevButton
-			class="inline-flex size-10 items-center justify-center rounded-9px bg-background hover:bg-muted active:scale-98 active:transition-all"
+			class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt hover:bg-muted active:scale-98 active:transition-all"
 		>
 			<CaretLeft class="size-6" />
 		</Calendar.PrevButton>
 		<Calendar.Heading class="text-[15px] font-medium" />
 		<Calendar.NextButton
-			class="inline-flex size-10 items-center justify-center rounded-9px bg-background hover:bg-muted active:scale-98 active:transition-all"
+			class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt hover:bg-muted active:scale-98 active:transition-all"
 		>
 			<CaretRight class="size-6" />
 		</Calendar.NextButton>

src/components/demos/collapsible-demo.svelte

@@ -8,7 +8,7 @@
 	<div class="flex items-center justify-between space-x-10">
 		<h4 class="text-[15px] font-medium">@huntabyte starred 3 repositories</h4>
 		<Collapsible.Trigger
-			class="inline-flex h-10 w-10 items-center justify-center rounded-9px border border-border-input bg-background text-foreground shadow-btn transition-all hover:bg-muted active:scale-98"
+			class="inline-flex h-10 w-10 items-center justify-center rounded-9px border border-border-input bg-background-alt text-foreground shadow-btn transition-all hover:bg-muted active:scale-98"
 		>
 			<CaretUpDown class="size-4 " weight="bold" />
 			<span class="sr-only">Toggle</span>

src/components/demos/dropdown-menu-demo.svelte

@@ -14,7 +14,7 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger
-		class="focus-visible inline-flex h-10 w-10 items-center justify-center rounded-full border border-border-input bg-background text-sm font-medium text-foreground shadow-btn hover:bg-muted focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+		class="focus-visible inline-flex h-10 w-10 items-center justify-center rounded-full border border-border-input bg-background-alt text-sm font-medium text-foreground shadow-btn hover:bg-muted focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		<DotsThree class="h-6 w-6 text-foreground" />
 	</DropdownMenu.Trigger>

src/components/demos/menubar-demo.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <Menubar.Root
-	class="flex h-12 items-center gap-1 rounded-10px border border-dark-10 bg-background px-[3px] shadow-mini"
+	class="flex h-12 items-center gap-1 rounded-10px border border-dark-10 bg-background-alt px-[3px] shadow-mini"
 >
 	<div class="px-2.5">
 		<Cat class="size-6" />

src/components/demos/range-calendar-demo.svelte

@@ -5,21 +5,21 @@
 </script>
 
 <RangeCalendar.Root
-	class="mt-6 rounded-15px border border-dark-10 bg-background p-[22px] shadow-card"
+	class="mt-6 rounded-15px border border-dark-10 bg-background-alt p-[22px] shadow-card"
 	let:months
 	let:weekdays
 	weekdayFormat="short"
 	fixedWeeks={true}
 >
 	<RangeCalendar.Header class="flex items-center justify-between">
 		<RangeCalendar.PrevButton
-			class="inline-flex size-10 items-center justify-center rounded-9px bg-background hover:bg-muted active:scale-98"
+			class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt hover:bg-muted active:scale-98"
 		>
 			<CaretLeft class="size-6" />
 		</RangeCalendar.PrevButton>
 		<RangeCalendar.Heading class="text-[15px] font-medium" />
 		<RangeCalendar.NextButton
-			class="inline-flex size-10 items-center justify-center rounded-9px bg-background hover:bg-muted active:scale-98"
+			class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt hover:bg-muted active:scale-98"
 		>
 			<CaretRight class="size-6" />
 		</RangeCalendar.NextButton>

src/components/demos/slider-demo.svelte

@@ -16,7 +16,7 @@
 		{#each thumbs as thumb}
 			<Slider.Thumb
 				{thumb}
-				class="block size-[27px] cursor-pointer rounded-full border border-border-input bg-background shadow transition-colors hover:border-dark-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 active:scale-98 disabled:pointer-events-none disabled:opacity-50"
+				class="block size-[25px] cursor-pointer rounded-full border border-border-input bg-background shadow  transition-colors hover:border-dark-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 active:scale-98 disabled:pointer-events-none disabled:opacity-50 dark:bg-foreground dark:shadow-card"
 			/>
 		{/each}
 	</Slider.Root>

src/components/demos/switch-demo.svelte

@@ -5,10 +5,10 @@
 <div class="flex items-center space-x-3">
 	<Switch.Root
 		id="marketing"
-		class="peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer items-center rounded-full bg-dark-10 px-[3px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-dark-10 data-[state=unchecked]:shadow-mini-inset"
+		class="peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer items-center rounded-full px-[3px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted data-[state=unchecked]:shadow-mini-inset"
 	>
 		<Switch.Thumb
-			class="pointer-events-none block size-[30px] shrink-0 rounded-full bg-background transition-transform data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini dark:border-border-input dark:shadow-mini dark:data-[state=unchecked]:border"
+			class="pointer-events-none block size-[30px] shrink-0 rounded-full bg-background transition-transform data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini dark:border-background dark:shadow-mini dark:data-[state=unchecked]:border data-[state=unchecked]:dark:bg-background"
 		/>
 	</Switch.Root>
 	<Label.Root for="marketing" class="text-sm font-medium">Do not disturb</Label.Root>

src/components/demos/tabs-demo.svelte

@@ -6,19 +6,19 @@
 <div class="pt-6">
 	<Tabs.Root
 		value="outbound"
-		class="w-[390px] rounded-card border border-muted bg-background p-3 shadow-card"
+		class="w-[390px] rounded-card border border-muted bg-background-alt p-3 shadow-card"
 	>
 		<Tabs.List
-			class="grid w-full grid-cols-2 gap-1 rounded-9px bg-dark-10 p-1 text-sm font-semibold leading-[0.01em] shadow-mini-inset"
+			class="grid w-full grid-cols-2 gap-1 rounded-9px bg-dark-10 p-1 text-sm font-semibold leading-[0.01em] shadow-mini-inset dark:border dark:border-neutral-600/30 dark:bg-background"
 		>
 			<Tabs.Trigger
 				value="outbound"
-				class="h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
+				class="h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-muted"
 				>Outbound</Tabs.Trigger
 			>
 			<Tabs.Trigger
 				value="inbound"
-				class="h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
+				class="h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-muted"
 				>Inbound</Tabs.Trigger
 			>
 		</Tabs.List>
@@ -38,7 +38,7 @@
 				<div class="relative col-span-3">
 					<hr class="border-1 relative top-4 h-px border-dashed border-border-input" />
 
-					<div class="absolute left-1/2 -translate-x-1/2 bg-background p-1">
+					<div class="absolute left-1/2 -translate-x-1/2 bg-background-alt p-1">
 						<Airplane class="size-6 rotate-90 text-muted-foreground" />
 					</div>
 				</div>
@@ -60,7 +60,7 @@
 				<div class="relative col-span-3">
 					<hr class="border-1 relative top-4 h-px border-dashed border-border-input" />
 
-					<div class="absolute left-1/2 -translate-x-1/2 bg-background p-1">
+					<div class="absolute left-1/2 -translate-x-1/2 bg-background-alt p-1">
 						<Airplane class="size-6 rotate-90 text-muted-foreground" />
 					</div>
 				</div>

src/components/demos/toggle-demo.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <div
-	class="min-h-input flex h-full w-[176px] items-center gap-2 rounded-card-sm border border-border bg-background py-1 pl-[18px] pr-1.5 shadow-mini"
+	class="min-h-input flex h-full w-[176px] items-center gap-2 rounded-card-sm border border-border bg-background-alt py-1 pl-[18px] pr-1.5 shadow-mini"
 >
 	<div
 		class="text-end font-alt text-[19px] tracking-[13.87px] {unlocked
@@ -18,7 +18,7 @@
 	</div>
 	<Toggle.Root
 		aria-label="toggle code visibility"
-		class="inline-flex size-10 items-center justify-center rounded-[9px] bg-background transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
+		class="inline-flex size-10 items-center justify-center rounded-[9px] bg-background-alt transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
 		bind:pressed={unlocked}
 	>
 		<LockKeyOpen class="size-6" />

src/components/demos/toggle-group-demo.svelte

@@ -8,26 +8,26 @@
 <ToggleGroup.Root
 	bind:value
 	type="multiple"
-	class="flex h-input items-center gap-x-0.5 rounded-card-sm border border-border bg-background px-[4px] py-1 shadow-mini"
+	class="flex h-input items-center gap-x-0.5 rounded-card-sm border border-border bg-background-alt px-[4px] py-1 shadow-mini"
 >
 	<ToggleGroup.Item
 		aria-label="toggle bold"
 		value="bold"
-		class="inline-flex size-10 items-center justify-center rounded-9px bg-background transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
+		class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
 	>
 		<TextB class="size-6" />
 	</ToggleGroup.Item>
 	<ToggleGroup.Item
 		aria-label="toggle italic"
 		value="italic"
-		class="inline-flex size-10 items-center justify-center rounded-9px bg-background transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
+		class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
 	>
 		<TextItalic class="size-6" />
 	</ToggleGroup.Item>
 	<ToggleGroup.Item
 		aria-label="toggle strikethrough"
 		value="strikethrough"
-		class="inline-flex size-10 items-center justify-center rounded-9px bg-background transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
+		class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
 	>
 		<TextStrikethrough class="size-6" />
 	</ToggleGroup.Item>

src/components/demos/toolbar-demo.svelte

@@ -15,27 +15,27 @@
 </script>
 
 <Toolbar.Root
-	class="flex h-12 min-w-max items-center justify-center rounded-10px border border-border bg-background px-[4px] py-1 shadow-mini"
+	class="flex h-12 min-w-max items-center justify-center rounded-10px border border-border bg-background-alt px-[4px] py-1 shadow-mini"
 >
 	<Toolbar.Group bind:value={text} type="multiple" class="flex items-center gap-x-0.5">
 		<Toolbar.GroupItem
 			aria-label="toggle bold"
 			value="bold"
-			class="inline-flex size-10 items-center justify-center rounded-9px bg-background text-foreground/60 transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
+			class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt text-foreground/60 transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
 		>
 			<TextB class="size-6" />
 		</Toolbar.GroupItem>
 		<Toolbar.GroupItem
 			aria-label="toggle italic"
 			value="italic"
-			class="inline-flex size-10 items-center justify-center rounded-9px bg-background text-foreground/60 transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
+			class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt text-foreground/60 transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
 		>
 			<TextItalic class="size-6" />
 		</Toolbar.GroupItem>
 		<Toolbar.GroupItem
 			aria-label="toggle strikethrough"
 			value="strikethrough"
-			class="inline-flex size-10 items-center justify-center rounded-9px bg-background text-foreground/60 transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
+			class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt text-foreground/60 transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
 		>
 			<TextStrikethrough class="size-6" />
 		</Toolbar.GroupItem>
@@ -47,21 +47,21 @@
 		<Toolbar.GroupItem
 			aria-label="align left"
 			value="left"
-			class="inline-flex size-10 items-center justify-center rounded-9px bg-background text-foreground/60 transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
+			class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt text-foreground/60 transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
 		>
 			<TextAlignLeft class="size-6" />
 		</Toolbar.GroupItem>
 		<Toolbar.GroupItem
 			aria-label="align center"
 			value="center"
-			class="inline-flex size-10 items-center justify-center rounded-9px bg-background text-foreground/60 transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
+			class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt text-foreground/60 transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
 		>
 			<TextAlignCenter class="size-6" />
 		</Toolbar.GroupItem>
 		<Toolbar.GroupItem
 			aria-label="align right"
 			value="right"
-			class="inline-flex size-10 items-center justify-center rounded-9px bg-background text-foreground/60 transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
+			class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt text-foreground/60 transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
 		>
 			<TextAlignRight class="size-6" />
 		</Toolbar.GroupItem>

src/components/demos/tooltip-demo.svelte

@@ -7,7 +7,7 @@
 <Tooltip.Root openDelay={0}>
 	<Tooltip.Trigger
 		class="inline-flex size-10 items-center justify-center rounded-full
-	border border-border-input bg-background shadow-btn ring-dark ring-offset-background hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+	border border-border-input bg-background-alt shadow-btn ring-dark ring-offset-background hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 	>
 		<MagicWand class="size-5" />
 	</Tooltip.Trigger>

src/styles/app.postcss

@@ -8,6 +8,7 @@
 	:root {
 		/* Colors */
 		--background: 0 0% 100%;
+		--background-alt: 0 0% 100%;
 		--foreground: 0 0% 9%;
 		--foreground-alt: 0 0% 32%;
 		--muted: 240 5% 96%;
@@ -40,8 +41,9 @@
 	.dark {
 		/* Colors */
 		--background: 0 0% 4%;
-		--foreground: 0 0% 100%;
-		--foreground-alt: 0 0% 100%;
+		--background-alt: 0 0% 8%;
+		--foreground: 0 0% 96%;
+		--foreground-alt: 0 0% 70%;
 		--muted: 240 4% 16%;
 		--muted-foreground: 0 0% 100% / 0.4;
 		--border: 0 0% 96%;
@@ -60,10 +62,13 @@
 		--constrast: 0 0% 100%;
 
 		/* Shadows */
+		--shadow-mini: 0px 1px 0px 1px rgba(0, 0, 0, 0.3);
+		--shadow-mini-inset: 0px 1px 0px 0px rgba(0, 0, 0, 0.5) inset;
+
 		--shadow-popover: 0px 7px 12px 3px rbga(0, 0, 0, 0.2);
 		--shadow-kbd: 0px 2px 0px 0px rgba(255, 255, 255, 0.07);
 		--shadow-btn: 0px 1px 0px 1px rgba(0, 0, 0, 0.2);
-		--shadow-card: 0px 2px 0px 1px rgba(0, 0, 0, 0.2);
+		--shadow-card: 0px 2px 0px 1px rgba(0, 0, 0, 0.4);
 		--shadow-date-field-focus: 0px 0px 0px 3px rgba(244, 244, 245, 0.1);
 	}
 }

tailwind.config.ts

@@ -21,6 +21,7 @@ export default {
 				},
 				background: {
 					DEFAULT: "hsl(var(--background) / <alpha-value>)",
+					alt: "hsl(var(--background-alt) / <alpha-value>)",
 				},
 				foreground: {
 					DEFAULT: "hsl(var(--foreground) / <alpha-value>)",