[ENG-761] Fix light theme colours & add light theme alpha bg (#974)

Fix light theme colors

interface/app/$libraryId/settings/client/appearance.tsx

@@ -164,31 +164,26 @@ export const Component = () => {
 						);
 					})}
 				</div>
-				<Setting
-					mini
-					title="Theme hue value"
-					toolTipLabel={
-						themeStore.theme === 'vanilla' &&
-						'Hue color changes visible in dark mode only'
-					}
-					description="Change the hue of the theme"
-				>
-					<div className="mr-3 w-full max-w-[200px] justify-between gap-5">
-						<div className="w-full">
-							<Slider
-								value={[themeStore.hueValue ?? 235]}
-								onValueChange={(val) => hueSliderHandler(val[0] ?? 235)}
-								min={0}
-								max={359}
-								step={1}
-								defaultValue={[235]}
-							/>
-							<p className="text-center text-xs text-ink-faint">
-								{themeStore.hueValue}
-							</p>
+
+				{themeStore.theme === 'dark' && (
+					<Setting mini title="Theme hue value" description="Change the hue of the theme">
+						<div className="mr-3 w-full max-w-[200px] justify-between gap-5">
+							<div className="w-full">
+								<Slider
+									value={[themeStore.hueValue ?? 235]}
+									onValueChange={(val) => hueSliderHandler(val[0] ?? 235)}
+									min={0}
+									max={359}
+									step={1}
+									defaultValue={[235]}
+								/>
+								<p className="text-center text-xs text-ink-faint">
+									{themeStore.hueValue}
+								</p>
+							</div>
 						</div>
-					</div>
-				</Setting>
+					</Setting>
+				)}
 
 				<Setting
 					mini
@@ -198,6 +193,7 @@ export const Component = () => {
 				>
 					<Switch disabled {...form.register('uiAnimations')} className="m-2 ml-4" />
 				</Setting>
+
 				<Setting
 					mini
 					title="Blur Effects"

interface/app/$libraryId/settings/library/locations/ListItem.tsx

@@ -5,6 +5,7 @@ import { useNavigate } from 'react-router';
 import { Location, Node, arraysEqual, useLibraryMutation, useOnlineLocations } from '@sd/client';
 import { Button, Card, Tooltip, dialogManager } from '@sd/ui';
 import { Folder } from '~/components/Folder';
+import { useIsDark } from '~/hooks';
 import DeleteDialog from './DeleteDialog';
 
 interface Props {
@@ -18,6 +19,8 @@ export default ({ location }: Props) => {
 	const fullRescan = useLibraryMutation('locations.fullRescan');
 	const onlineLocations = useOnlineLocations();
 
+	const isDark = useIsDark();
+
 	if (hide) return <></>;
 
 	const online = onlineLocations?.some((l) => arraysEqual(location.pub_id, l)) || false;
@@ -29,7 +32,7 @@ export default ({ location }: Props) => {
 				navigate(`${location.id}`);
 			}}
 		>
-			<Folder className="mr-3 h-10 w-10 self-center" />
+			<Folder white={!isDark} className="mr-3 h-10 w-10 self-center" />
 			<div className="grid min-w-[110px] grid-cols-1">
 				<h1 className="pt-0.5 text-sm font-semibold">{location.name}</h1>
 				<p className="mt-0.5 select-text truncate  text-sm text-ink-dull">

interface/app/$libraryId/settings/node/libraries/ListItem.tsx

@@ -1,55 +1,68 @@
-import { Database } from '@sd/assets/icons';
+import { Database, Database_Light } from '@sd/assets/icons';
 import { Pencil, Trash } from 'phosphor-react';
 import { LibraryConfigWrapped } from '@sd/client';
 import { Button, ButtonLink, Card, Tooltip, dialogManager, tw } from '@sd/ui';
+import { useIsDark } from '~/hooks';
 import DeleteDialog from './DeleteDialog';
 
-const Pill = tw.span`px-1.5 ml-2 py-[2px] rounded text-xs font-medium bg-accent`;
-
 interface Props {
 	library: LibraryConfigWrapped;
 	current: boolean;
 }
 
-export default (props: Props) => (
-	<Card className="items-center">
-		{/* <DotsSixVertical weight="bold" className="mt-[15px] mr-3 opacity-30" /> */}
-		<img className="mr-3" width={30} height={30} src={Database} alt="Database icon" />
-		<div className="my-0.5 flex-1">
-			<h3 className="font-semibold">
-				{props.library.config.name}
-				{props.current && <Pill>Current</Pill>}
-			</h3>
-			<p className="mt-0.5 text-xs text-ink-dull">{props.library.uuid}</p>
-		</div>
-		<div className="flex flex-row items-center space-x-2">
-			{/* <Button className="!p-1.5" variant="gray">
+export default (props: Props) => {
+	const isDark = useIsDark();
+
+	return (
+		<Card className="items-center">
+			{/* <DotsSixVertical weight="bold" className="mt-[15px] mr-3 opacity-30" /> */}
+			<img
+				className="mr-3"
+				width={30}
+				height={30}
+				src={isDark ? Database : Database_Light}
+				alt="Database icon"
+			/>
+			<div className="my-0.5 flex-1">
+				<h3 className="font-semibold">
+					{props.library.config.name}
+					{props.current && (
+						<span className="ml-2 rounded bg-accent px-1.5 py-[2px] text-xs font-medium text-white">
+							Current
+						</span>
+					)}
+				</h3>
+				<p className="mt-0.5 text-xs text-ink-dull">{props.library.uuid}</p>
+			</div>
+			<div className="flex flex-row items-center space-x-2">
+				{/* <Button className="!p-1.5" variant="gray">
 				<Tooltip label="TODO">
 					<Database className="h-4 w-4" />
 				</Tooltip>
 			</Button> */}
-			<ButtonLink
-				className="!p-1.5"
-				to={`/${props.library.uuid}/settings/library/general`}
-				variant="gray"
-			>
-				<Tooltip label="Edit Library">
-					<Pencil className="h-4 w-4" />
-				</Tooltip>
-			</ButtonLink>
-			<Button
-				className="!p-1.5"
-				variant="gray"
-				onClick={() => {
-					dialogManager.create((dp) => (
-						<DeleteDialog {...dp} libraryUuid={props.library.uuid} />
-					));
-				}}
-			>
-				<Tooltip label="Delete Library">
-					<Trash className="h-4 w-4" />
-				</Tooltip>
-			</Button>
-		</div>
-	</Card>
-);
+				<ButtonLink
+					className="!p-1.5"
+					to={`/${props.library.uuid}/settings/library/general`}
+					variant="gray"
+				>
+					<Tooltip label="Edit Library">
+						<Pencil className="h-4 w-4" />
+					</Tooltip>
+				</ButtonLink>
+				<Button
+					className="!p-1.5"
+					variant="gray"
+					onClick={() => {
+						dialogManager.create((dp) => (
+							<DeleteDialog {...dp} libraryUuid={props.library.uuid} />
+						));
+					}}
+				>
+					<Tooltip label="Delete Library">
+						<Trash className="h-4 w-4" />
+					</Tooltip>
+				</Button>
+			</div>
+		</Card>
+	);
+};

interface/app/$libraryId/settings/resources/about.tsx

@@ -46,7 +46,7 @@ export const Component = () => {
 					className="flex w-fit gap-2"
 					variant="accent"
 				>
-					<Github className="h-4 w-4 fill-ink" />
+					<Github className="h-4 w-4 fill-white" />
 					Star on GitHub
 				</Button>
 				<Button

interface/app/onboarding/alpha.tsx

@@ -1,18 +1,21 @@
-import { AlphaBg, AppLogo } from '@sd/assets/images';
+import { AlphaBg, AlphaBg_Light, AppLogo } from '@sd/assets/images';
 import { Discord } from '@sd/assets/svgs/brands';
 import { useNavigate } from 'react-router-dom';
 import { Button } from '@sd/ui';
+import { useIsDark } from '~/hooks';
 import { usePlatform } from '~/util/Platform';
 import { OnboardingContainer } from './Layout';
 
 export default function OnboardingAlpha() {
 	const navigate = useNavigate();
 	const platform = usePlatform();
+	const isDark = useIsDark();
+
 	return (
 		<OnboardingContainer>
 			<div className="relative w-screen text-center">
 				<img
-					src={AlphaBg}
+					src={isDark ? AlphaBg : AlphaBg_Light}
 					alt="Alpha Background"
 					className="absolute top-[-50px] z-0 w-full"
 				/>
@@ -38,7 +41,7 @@ export default function OnboardingAlpha() {
 							className="flex gap-2"
 							variant="gray"
 						>
-							<Discord className="h-4 w-4 fill-white" />
+							<Discord className="h-4 w-4 fill-ink" />
 							Join Discord
 						</Button>
 						<Button

packages/assets/images/index.ts

@@ -3,6 +3,7 @@
  * To regenerate this file, run: pnpm assets gen
  */
 import AlphaBg from './AlphaBg.png';
+import AlphaBg_Light from './AlphaBg_Light.png';
 import AppLogo from './AppLogo.png';
 import Ball from './Ball.png';
 import BloomOne from './BloomOne.png';
@@ -12,4 +13,15 @@ import GoogleDrive from './GoogleDrive.png';
 import Mega from './Mega.png';
 import iCloud from './iCloud.png';
 
-export { AlphaBg, AppLogo, Ball, BloomOne, BloomThree, BloomTwo, GoogleDrive, Mega, iCloud };
+export {
+	AlphaBg,
+	AlphaBg_Light,
+	AppLogo,
+	Ball,
+	BloomOne,
+	BloomThree,
+	BloomTwo,
+	GoogleDrive,
+	Mega,
+	iCloud
+};

packages/ui/src/CheckBox.tsx

@@ -27,11 +27,11 @@ export interface RadixCheckboxProps extends ComponentProps<typeof Checkbox.Root>
 export const RadixCheckbox = (props: RadixCheckboxProps) => (
 	<div className="flex items-center">
 		<Checkbox.Root
-			className="flex h-[17px] w-[17px] shrink-0 rounded-md bg-app-button"
+			className="flex h-[17px] w-[17px] shrink-0 items-center justify-center rounded-md border border-app-line bg-app-button radix-state-checked:bg-accent"
 			id={props.name}
 			{...props}
 		>
-			<Checkbox.Indicator className="flex h-[17px] w-[17px] items-center justify-center rounded-md bg-accent">
+			<Checkbox.Indicator className="text-white">
 				<Check weight="bold" size={14} />
 			</Checkbox.Indicator>
 		</Checkbox.Root>

packages/ui/src/ContextMenu.tsx

@@ -77,9 +77,9 @@ const contextMenuItemStyles = cva(
 	[
 		'flex h-[26px] items-center space-x-2 overflow-hidden rounded px-2',
 		'text-sm text-menu-ink',
-		'group-radix-highlighted:text-white dark:group-radix-highlighted:text-menu-ink',
+		'group-radix-highlighted:text-white',
 		'group-radix-disabled:pointer-events-none group-radix-disabled:text-menu-ink/50',
-		'group-radix-state-open:bg-accent group-radix-state-open:text-white dark:group-radix-state-open:text-menu-ink'
+		'group-radix-state-open:bg-accent group-radix-state-open:text-white'
 	],
 	{
 		variants: {

packages/ui/src/DropdownMenu.tsx

@@ -115,13 +115,13 @@ const Item = ({
 			{to ? (
 				<Link to={to} onClick={() => ref.current?.click()}>
 					<ContextMenuDivItem
-						className={clsx(selected && 'bg-accent')}
+						className={clsx(selected && 'bg-accent text-white')}
 						{...{ icon, iconProps, label, rightArrow, keybind, variant, children }}
 					/>
 				</Link>
 			) : (
 				<ContextMenuDivItem
-					className={clsx(selected && 'bg-accent')}
+					className={clsx(selected && 'bg-accent text-white')}
 					{...{ icon, iconProps, label, rightArrow, keybind, variant, children }}
 				/>
 			)}