💄 Improve light theme palette and refactor design system (#402)

apps/expo/src/components/primitives/Text.tsx

@@ -47,7 +47,7 @@ export const textVariants = cva('', {
 		// 	danger: 'text-red-600 dark:text-red-400',
 		// 	default: 'dark:text-white text-black',
 		// 	label:
-		// 		'font-medium leading-none text-contrast-200 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+		// 		'font-medium leading-none text-foreground-subtle peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 		// 	muted: 'text-gray-400 dark:text-gray-300',
 		// },
 	},

docs/pages/guides/configuration/theming.md

@@ -8,16 +8,10 @@ For example, the default dark theme for Stump can be found [here](https://github
 
 ```ts
 // themes/midnight.ts
-export const midnight: ThemeDefinition = {
+export const midnight: StumpTheme = {
 	background: {
-		100: '#000000',
-		200: '#111111',
-		300: '#222222',
-		400: '#333333',
-		500: '#444444',
 		DEFAULT: '#000000',
-		danger: '#491B1C',
-		warning: '#412E19',
+		// ... other background colors
 	},
 	// ... other theme definitions
 }

packages/browser/package.json

@@ -37,8 +37,10 @@
 		"lodash.isequal": "^4.5.0",
 		"lodash.sortby": "^4.7.0",
 		"lodash.uniqby": "^4.7.0",
-		"lucide-react": "^0.368.0",
+		"lucide-react": "=0.428.0",
 		"nprogress": "^0.2.0",
+		"overlayscrollbars": "^2.10.0",
+		"overlayscrollbars-react": "^0.5.6",
 		"pluralize": "^8.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

packages/browser/src/components/BackgroundFetchIndicator.tsx

@@ -21,7 +21,7 @@ export default function BackgroundFetchIndicator() {
 
 	return (
 		<div className="fixed bottom-4 right-6 z-50">
-			<svg className="h-6 w-6 animate-spin stroke-contrast" viewBox="0 0 256 256">
+			<svg className="stroke-contrast h-6 w-6 animate-spin" viewBox="0 0 256 256">
 				<line
 					x1="128"
 					y1="32"

packages/browser/src/components/DirectoryPickerModal.tsx

@@ -98,8 +98,8 @@ export default function DirectoryPickerModal({
 						{directoryList.map((directory, i) => (
 							<button
 								key={directory.path}
-								className={cx('justify-start px-2 py-1.5 text-left hover:bg-background-200', {
-									'bg-background-200/40': i % 2 === 0,
+								className={cx('justify-start px-2 py-1.5 text-left hover:bg-background-surface', {
+									'bg-background-surface/40': i % 2 === 0,
 								})}
 								onClick={() => setPath(directory.path)}
 							>

packages/browser/src/components/ErrorFallback.tsx

@@ -29,8 +29,8 @@ export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
 			/>
 			<div className="max-w-sm sm:max-w-md md:max-w-xl">
 				<div className="text-left">
-					<h1 className="text-4xl font-semibold text-contrast">A critical error occurred</h1>
-					<p className="mt-1.5 text-lg text-contrast-300">
+					<h1 className="text-4xl font-semibold text-foreground">A critical error occurred</h1>
+					<p className="mt-1.5 text-lg text-foreground-subtle">
 						{error.message || 'The error message was empty.'}
 					</p>
 				</div>

packages/browser/src/components/GenericEmptyState.tsx

@@ -24,7 +24,7 @@ export default function GenericEmptyState({
 				containerClassName,
 			)}
 		>
-			<CircleSlash2 className="h-10 w-10 pb-2 pt-1 text-muted" />
+			<CircleSlash2 className="h-10 w-10 pb-2 pt-1 text-foreground-muted" />
 			<div className={cn('text-center', { 'md:text-left': leftAlign }, contentClassName)}>
 				<Heading size="sm">{title}</Heading>
 				{subtitle && (

packages/browser/src/components/ListItem.tsx

@@ -17,7 +17,7 @@ export default function ListItem({ id, title, subtitle, href }: Props) {
 			title={title}
 			key={id}
 			to={href}
-			className="flex h-[40px] w-full rounded-lg p-2 hover:bg-background-200"
+			className="flex h-[40px] w-full rounded-lg p-2 hover:bg-background-surface"
 		>
 			<Heading
 				size="sm"

packages/browser/src/components/Pagination.tsx

@@ -34,9 +34,9 @@ function PaginationArrow({ kind, isDisabled, onClick, onMouseEnter }: Pagination
 			>
 				<div
 					className={cx(
-						'inline-flex items-center border-t-2 border-transparent pt-4 text-xs font-medium hover:border-edge-200 md:text-sm',
-						!isDisabled && 'text-contrast-300',
-						isDisabled && 'pointer-events-none cursor-not-allowed text-muted',
+						'inline-flex items-center border-t-2 border-transparent pt-4 text-xs font-medium hover:border-edge-subtle md:text-sm',
+						!isDisabled && 'text-foreground-subtle',
+						isDisabled && 'pointer-events-none cursor-not-allowed text-foreground-muted',
 						{ 'pl-0 pr-1': kind === 'previous' },
 						{ 'pl-1 pr-0': kind === 'next' },
 					)}
@@ -47,7 +47,7 @@ function PaginationArrow({ kind, isDisabled, onClick, onMouseEnter }: Pagination
 							'h-4 w-4 md:h-5 md:w-5',
 							kind === 'previous' ? 'mr-3' : 'ml-3',
 							// TODO: dark different color?? idk, doesn't look THAT bad
-							isDisabled ? 'text-muted-200' : 'text-contrast-300',
+							isDisabled ? 'text-foreground-muted' : 'text-foreground-subtle',
 						)}
 						aria-hidden="true"
 					/>
@@ -71,12 +71,12 @@ function PaginationLink({ value, onClick, isActive, onMouseEnter }: PaginationLi
 			onClick={onClick}
 			onMouseEnter={onMouseEnter}
 			className={cn(
-				'inline-flex cursor-pointer items-center border-t-2 px-4 pt-4 text-xs font-medium text-muted md:text-sm',
+				'inline-flex cursor-pointer items-center border-t-2 px-4 pt-4 text-xs font-medium text-foreground-muted md:text-sm',
 				{
 					'border-brand text-brand hover:border-brand-600': isActive,
 				},
 				{
-					'border-transparent text-muted hover:border-edge-200': !isActive,
+					'border-transparent text-foreground-muted hover:border-edge-subtle': !isActive,
 				},
 			)}
 		>
@@ -131,7 +131,7 @@ export default function Pagination({
 	return (
 		<nav className="w-full">
 			<div
-				className={cx('w-full border-t border-edge-200', {
+				className={cx('w-full border-t border-edge-subtle', {
 					'mt-7': position === 'bottom',
 				})}
 			>
@@ -166,7 +166,7 @@ export default function Pagination({
 									onPageChange={handleEllipsisNavigate}
 									trigger={
 										<div className="-mt-1">
-											<button className="flex items-center border-t-2 border-transparent px-4 pt-4 text-xs font-medium text-muted hover:border-edge-200 focus:outline-none md:text-sm">
+											<button className="flex items-center border-t-2 border-transparent px-4 pt-4 text-xs font-medium text-foreground-muted hover:border-edge-subtle focus:outline-none md:text-sm">
 												<MoreHorizontal className="h-4 w-4" />
 											</button>
 										</div>

packages/browser/src/components/ReadMore.tsx

@@ -31,7 +31,7 @@ export default function ReadMore({ text }: Props) {
 			<MarkdownContainer {...markdownContainerProps}>
 				<Markdown>{showingAll ? resolvedText : resolvedText.slice(0, 250) + '...'}</Markdown>
 			</MarkdownContainer>
-			<button onClick={toggle} className="cursor-pointer font-semibold text-contrast">
+			<button onClick={toggle} className="cursor-pointer font-semibold text-foreground">
 				{showingAll ? ' Read less' : 'Read more'}
 			</button>
 		</div>

packages/browser/src/components/ServerStatusOverlay.tsx

@@ -31,7 +31,7 @@ export default function ServerStatusOverlay() {
 		<AnimatePresence>
 			{show && (
 				<motion.div
-					className="fixed bottom-[1rem] right-[1rem] flex w-64 flex-col items-center justify-center rounded-md bg-background-200 p-3 shadow"
+					className="fixed bottom-[1rem] right-[1rem] flex w-64 flex-col items-center justify-center rounded-md bg-background-surface p-3 shadow"
 					initial={{ opacity: 0, scale: 0.9, y: 100 }}
 					animate={{ opacity: 1, scale: 1, y: 0 }}
 					exit={{ opacity: 0, scale: 0.9, y: 100 }}

packages/browser/src/components/Spinner.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 export default function Spinner() {
 	return (
-		<svg className="h-6 w-6 animate-spin stroke-contrast" viewBox="0 0 256 256">
+		<svg className="stroke-contrast h-6 w-6 animate-spin" viewBox="0 0 256 256">
 			<line
 				x1="128"
 				y1="32"

packages/browser/src/components/TableOrGridLayout.tsx

@@ -14,7 +14,7 @@ export default function TableOrGridLayout({ layout, setLayout }: Props) {
 				<IconButton
 					variant="ghost"
 					size="xs"
-					className="hover:bg-background-300"
+					className="hover:bg-background-surface-hover"
 					pressEffect={false}
 					onClick={() => setLayout('GRID')}
 					disabled={layout === 'GRID'}
@@ -27,7 +27,7 @@ export default function TableOrGridLayout({ layout, setLayout }: Props) {
 				<IconButton
 					variant="ghost"
 					size="xs"
-					className="hover:bg-background-300"
+					className="hover:bg-background-surface-hover"
 					pressEffect={false}
 					onClick={() => setLayout('TABLE')}
 					disabled={layout === 'TABLE'}

packages/browser/src/components/UserMenu.tsx

@@ -29,9 +29,9 @@ export default function UserMenu({ variant = 'sidebar' }: Props) {
 						<Card
 							className={cn(
 								'flex h-[2.35rem] w-full cursor-pointer items-center border-transparent border-opacity-80 px-1 transition-all duration-150 hover:border-opacity-100',
-								{ 'border-edge-200 border-opacity-100': isOpen },
-								{ 'border-edge-200': isSidebar },
-								{ 'justify-center rounded-full hover:border-edge-200': !isSidebar },
+								{ 'border-edge-subtle border-opacity-100': isOpen },
+								{ 'border-edge-subtle': isSidebar },
+								{ 'justify-center rounded-full hover:border-edge-subtle': !isSidebar },
 							)}
 						>
 							<Avatar
@@ -56,7 +56,11 @@ export default function UserMenu({ variant = 'sidebar' }: Props) {
 					>
 						<div className="flex w-full flex-col">
 							<Link
-								className="pointer-events-none flex h-[2.35rem] w-full items-center bg-background-200 px-2  text-sm text-muted transition-colors duration-150"
+								className={cn(
+									linkClasses(isSidebar),
+									'pointer-events-none select-none',
+									isSidebar ? 'bg-sidebar-overlay opacity-40' : '',
+								)}
 								to={paths.notifications()}
 								onClick={() => setIsOpen(false)}
 							>
@@ -65,7 +69,7 @@ export default function UserMenu({ variant = 'sidebar' }: Props) {
 							</Link>
 
 							<Link
-								className="flex h-[2.35rem] w-full items-center px-2 text-sm text-contrast-200 transition-colors duration-150 hover:bg-background-200"
+								className={linkClasses(isSidebar)}
 								to={paths.settings('app/general')}
 								onClick={() => setIsOpen(false)}
 							>
@@ -83,3 +87,10 @@ export default function UserMenu({ variant = 'sidebar' }: Props) {
 		</AutoSizer>
 	)
 }
+
+const linkClasses = (isSidebar: boolean) =>
+	cn(
+		'text-foreground-subtle flex h-[2.35rem] w-full items-center px-2 text-sm transition-colors duration-150',
+		{ 'bg-sidebar-overlay hover:bg-sidebar-overlay-hover': isSidebar },
+		{ 'hover:bg-background-surface': !isSidebar },
+	)

packages/browser/src/components/book/table/CoverImageCell.tsx

@@ -37,7 +37,7 @@ export default function CoverImageCell({ id, title }: Props) {
 				className="flex aspect-[2/3] h-14 w-auto items-center justify-center rounded-sm border-[0.5px] border-edge bg-sidebar shadow-sm"
 				onClick={attemptReload}
 			>
-				<Book className="h-8 w-8 text-muted" />
+				<Book className="h-8 w-8 text-foreground-muted" />
 			</div>
 		)
 	}

packages/browser/src/components/explorer/FileExplorerFooter.tsx

@@ -22,7 +22,7 @@ export default function FileExplorerFooter() {
 	return (
 		<footer className="fixed bottom-0 z-10 h-10 w-full border-t border-edge bg-background px-4">
 			<div className="flex h-full w-full items-center gap-4">
-				<span className="rounded-md border border-dotted border-edge-200 px-2 py-0.5">
+				<span className="rounded-md border border-dotted border-edge-subtle px-2 py-0.5">
 					<Text variant="muted" size="sm">
 						{relativePath}
 					</Text>

packages/browser/src/components/explorer/FileThumbnail.tsx

@@ -86,15 +86,15 @@ export default function FileThumbnail({
 	if (isDirectory) {
 		return (
 			<div className={className}>
-				<Folder className={cn('text-muted', iconSizes)} />
+				<Folder className={cn('text-foreground-muted', iconSizes)} />
 			</div>
 		)
 	}
 
 	if (showFallback || !book) {
 		return (
 			<div className={className} onClick={attemptReload}>
-				<Book className={cn('text-muted', iconSizes)} />
+				<Book className={cn('text-foreground-muted', iconSizes)} />
 			</div>
 		)
 	}

packages/browser/src/components/explorer/LayoutButtons.tsx

@@ -13,7 +13,7 @@ export default function LayoutButtons() {
 				<IconButton
 					variant="ghost"
 					size="xs"
-					className="hover:bg-background-300"
+					className="hover:bg-background-surface-hover"
 					pressEffect={false}
 					onClick={() => setLayout('grid')}
 					disabled={layout === 'grid'}
@@ -26,7 +26,7 @@ export default function LayoutButtons() {
 				<IconButton
 					variant="ghost"
 					size="xs"
-					className="hover:bg-background-300"
+					className="hover:bg-background-surface-hover"
 					pressEffect={false}
 					onClick={() => setLayout('table')}
 					disabled={layout === 'table'}

packages/browser/src/components/explorer/grid/FileGridItem.tsx

@@ -45,12 +45,12 @@ export default function FileGridItem({ file }: Props) {
 				<FileThumbnail
 					path={path}
 					isDirectory={is_directory}
-					containerClassName="group-hover:bg-background-300/80 group-focus:bg-background-300"
+					containerClassName="group-hover:bg-background-surface-hover/80 group-focus:bg-background-surface"
 					size="md"
 				/>
 
 				<Text
-					className="line-clamp-2 max-w-full rounded-md p-1 group-hover:bg-background-300/80 group-focus:bg-background-300"
+					className="line-clamp-2 max-w-full rounded-md p-1 group-hover:bg-background-surface-hover/80 group-focus:bg-background-surface"
 					size="xs"
 				>
 					{name}

packages/browser/src/components/explorer/table/FileTable.tsx

@@ -133,7 +133,7 @@ export default function FileTable() {
 
 							<tbody>
 								{rows.map((row) => (
-									<tr key={row.id} className="odd:bg-background-200">
+									<tr key={row.id} className="odd:bg-background-surface">
 										{row.getVisibleCells().map((cell) => (
 											<td
 												className="py-1 pl-1.5 pr-1.5 first:pl-4 last:pr-4"

packages/browser/src/components/filters/OrderBy.tsx

@@ -33,10 +33,10 @@ export default function OrderBy({ entity }: Props) {
 				<Button
 					variant="ghost"
 					className={cx('shrink-0', {
-						'!bg-background-300': isOpen,
+						'!bg-background-surface': isOpen,
 					})}
 				>
-					<SortAsc className="mr-1.5 h-4 w-4 text-contrast-300" />
+					<SortAsc className="mr-1.5 h-4 w-4 text-foreground-subtle" />
 					Order By
 				</Button>
 			</Popover.Trigger>

packages/browser/src/components/filters/Search.tsx

@@ -72,7 +72,7 @@ export default function Search({
 			fullWidth
 			size="sm"
 			variant="activeGhost"
-			leftDecoration={<SearchIcon className="h-4 w-4 text-muted" />}
+			leftDecoration={<SearchIcon className="h-4 w-4 text-foreground-muted" />}
 			rightDecoration={showLoader ? <ProgressSpinner size="sm" /> : null}
 			className={cn(
 				'flex-grow transition-[width] duration-200 ease-in-out',

packages/browser/src/components/filters/URLFilterDrawer.tsx

@@ -53,7 +53,7 @@ export default function URLFilterDrawer({ entity }: Props) {
 						<IconButton
 							variant="ghost"
 							size="xs"
-							className="hover:bg-background-300"
+							className="hover:bg-background-surface-hover"
 							pressEffect={false}
 							onClick={() => setIsOpen(true)}
 						>

packages/browser/src/components/filters/URLOrdering.tsx

@@ -41,7 +41,7 @@ export default function URLOrdering({ entity }: Props) {
 					<IconButton
 						variant="ghost"
 						size="xs"
-						className="hover:bg-background-300"
+						className="hover:bg-background-surface-hover"
 						pressEffect={false}
 					>
 						<ArrowUpDown className="h-4 w-4" />

packages/browser/src/components/filters/form/OrderByDirection.tsx

@@ -15,7 +15,7 @@ export default function OrderByDirection({ value, onChange }: Props) {
 			onClick={() => onChange(value === 'desc' ? 'asc' : 'desc')}
 		>
 			<SortAsc
-				className={cx('mr-1.5 h-4 w-4 text-muted transition-all', {
+				className={cx('mr-1.5 h-4 w-4 text-foreground-muted transition-all', {
 					'rotate-180': value === 'desc',
 				})}
 			/>

packages/browser/src/components/jobs/JobOverlay.tsx

@@ -55,7 +55,7 @@ export default function JobOverlay() {
 		<AnimatePresence>
 			{firstRunningJob && (
 				<motion.div
-					className="fixed bottom-[1rem] right-[1rem] flex h-28 w-64 flex-col items-start justify-between rounded-md border border-edge-200 bg-background-200 p-4 shadow"
+					className="fixed bottom-[1rem] right-[1rem] flex h-28 w-64 flex-col items-start justify-between rounded-md border border-edge-subtle bg-background-surface p-4 shadow"
 					initial={{ opacity: 0, scale: 0.9, y: 100 }}
 					animate={{ opacity: 1, scale: 1, y: 0 }}
 					exit={{ opacity: 0, scale: 0.9, y: 100 }}

packages/browser/src/components/markdown/MarkdownEditor.tsx

@@ -38,7 +38,7 @@ export default function MarkdownEditor({ initialState = 'writing', initialConten
 			return (
 				<textarea
 					ref={editorRef}
-					className="w-full bg-transparent px-1 py-2 text-contrast-300 focus:outline-none"
+					className="w-full bg-transparent px-1 py-2 text-foreground-subtle focus:outline-none"
 					value={content}
 					onChange={(e) => setContent(e.target.value)}
 					rows={4}

packages/browser/src/components/markdown/MarkdownPreview.tsx

@@ -14,7 +14,7 @@ export default function MarkdownPreview({ children, className }: Props) {
 	return (
 		<ReactMarkdown
 			remarkPlugins={[remarkDirective, remarkDirectiveRehype]}
-			className={cn('text-contrast-200', className)}
+			className={cn('text-foreground-subtle', className)}
 			components={{
 				h1: ({ ref: _, ...props }) => (
 					<>

packages/browser/src/components/navigation/mobile/MobileTopBar.tsx

@@ -12,7 +12,7 @@ export const TOPBAR_HEIGHT_PX = 53
  */
 export default function TopBar() {
 	return (
-		<header className="sticky top-0 z-10 flex h-14 w-full shrink-0 border-b border-edge-200 bg-sidebar px-4 md:hidden">
+		<header className="sticky top-0 z-10 flex h-14 w-full shrink-0 border-b border-edge-subtle bg-sidebar px-4 md:hidden">
 			<div className="grid w-full grid-cols-8 items-center gap-2">
 				<div className="col-span-1">
 					<MobileSheet />