Redesign dark theme (#646)

surrealdb · Jan 15, 2025 · 69f2638 · 69f2638
1 parent 57d5fb2
commit 69f2638
Show file tree

Hide file tree

Showing 26 changed files with 251 additions and 129 deletions.
diff --git a/src/assets/styles/override.scss b/src/assets/styles/override.scss
@@ -4,23 +4,25 @@
 }
 
 :root[data-mantine-color-scheme="light"] {
-	--surrealist-divider-color: var(--mantine-color-slate-0);
+	--mantine-color-body: var(--mantine-color-white);
+
 	--surrealist-glow: 0 3px 15px rgba(186, 0, 171, 0.5);
 	--surrealist-indent-color: var(--mantine-color-slate-1);
 	--surrealist-indent-active-color: var(--mantine-color-slate-2);
 	--surrealist-kind-color: #8d6bff;
 	--surrealist-divider-color: var(--mantine-color-slate-1);
-	--mantine-color-body: var(--mantine-color-white);
+	--surrealist-faint-body: hsla(0, 0%, 100%, 0.5);
 }
 
 :root[data-mantine-color-scheme="dark"] {
-	--surrealist-divider-color: var(--mantine-color-slate-9);
-	--surrealist-glow: 0 5px 20px -4px rgba(186, 0, 171, 1), 0 3px 15px rgba(186, 0, 171, 0.5);
+	--mantine-color-body: var(--mantine-color-slate-8);
+
+	--surrealist-glow: 0 3px 20px -4px rgba(186, 0, 171, 1), 0 3px 15px rgba(186, 0, 171, 0.5);
 	--surrealist-indent-color: var(--mantine-color-slate-7);
 	--surrealist-indent-active-color: var(--mantine-color-slate-6);
 	--surrealist-kind-color: #a79fff;
-	--surrealist-divider-color: var(--mantine-color-slate-7);
-	--mantine-color-body: var(--mantine-color-slate-8);
+	--surrealist-divider-color: var(--mantine-color-slate-6);
+	--surrealist-faint-body: hsla(253, 21%, 13%, 0.6);
 }
 
 .__dbk__container {
@@ -51,15 +53,47 @@ body.mod .cm-record-link:hover {
 
 .mantine-contextmenu-divider {
 	margin-block: var(--mantine-spacing-xs);
+	background-color: var(--surrealist-divider-color);
 }
 
 .mantine-contextmenu,
 .mantine-Popover-dropdown,
 .mantine-Menu-dropdown,
-.mantine-HoverCard-dropdown {
-	background-color: color-mix(in srgb, var(--mantine-color-body) 87.5%, transparent);
+.mantine-HoverCard-dropdown,
+.mantine-Dialog-root,
+.mantine-Notification-root {
+	background-color: hsla(253, 21%, 15%, 0.9);
+	border-color: hsla(253, 21%, 40%, 0.5);
 	backdrop-filter: blur(5px);
 	-webkit-backdrop-filter: blur(5px);
+	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
+
+	@include light {
+		background-color: hsla(0, 0%, 100%, 0.9);
+		border-color: var(--mantine-color-slate-2);
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+	}
+}
+
+.mantine-Menu-divider {
+	border-color: hsla(253, 21%, 40%, 0.5);
+
+	@include light {
+		border-color: var(--mantine-color-slate-2);
+	}
+}
+
+.mantine-Dialog-root,
+.mantine-Notification-root {
+	border-width: 1px;
+	border-style: solid;
+}
+
+.mantine-Notification-root::before {
+	left: 9px;
+	width: 4px;
+	top: var(--mantine-spacing-xs);
+	bottom: var(--mantine-spacing-xs);
 }
 
 .mantine-Button-root:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])),
@@ -71,6 +105,19 @@ body.mod .cm-record-link:hover {
 	}
 }
 
+.mantine-Button-root {
+	box-sizing: border-box;
+	background-origin: border-box;
+
+	&[data-variant="gradient"]:not(:disabled) {
+		border: 1px solid rgba(255, 255, 255, 0.3) !important;
+	}
+
+	@include light {
+		border: unset !important;
+	}
+}
+
 .mantine-Menu-itemSection {
 	color: var(--mantine-color-slate-2);
 
@@ -231,4 +278,37 @@ body.mod .cm-record-link:hover {
 
 .mantine-Divider-root {
 	--divider-color: var(--surrealist-divider-color);
+}
+
+.mantine-Paper-root[data-with-border],
+.mantine-HoverCard-arrow {
+	border-color: var(--mantine-color-slate-6);
+
+	@include light {
+		border-color: var(--mantine-color-slate-1);
+	}
+}
+
+.mantine-Accordion-control {
+	border-radius: var(--mantine-radius-md);
+
+	&:hover {
+		background-color: var(--mantine-color-slate-7);
+
+		@include light {
+			background-color: var(--mantine-color-slate-0);
+		}
+	}
+}
+
+.mantine-Accordion-item {
+	border-color: var(--surrealist-divider-color);
+}
+
+.mantine-Skeleton-root[data-visible]::after {
+	background-color: var(--mantine-color-slate-6);
+
+	@include light {
+		background-color: var(--mantine-color-slate-1);
+	}
 }
diff --git a/src/components/ActionButton/index.tsx b/src/components/ActionButton/index.tsx
@@ -6,50 +6,50 @@ import {
 	Text,
 	Tooltip,
 	type TooltipProps,
+	createPolymorphicComponent,
 } from "@mantine/core";
-import type { PropsWithChildren, ReactNode } from "react";
+import { type ReactNode, forwardRef } from "react";
 
 export interface ActionButtonProps extends ActionIconProps, ElementProps<"button", "color"> {
 	label: string;
 	description?: ReactNode;
 	tooltipProps?: TooltipProps;
 }
 
-/**
- * Combination of a Tooltip and an ActionIcon to create accessible icon buttons
- */
-export function ActionButton({
-	label,
-	description,
-	tooltipProps,
-	...other
-}: PropsWithChildren<ActionButtonProps>) {
-	const tooltipLabel = description ? (
-		<Stack gap={4}>
-			<Text>{label}</Text>
-			<Text
-				c="dimmed"
-				size="sm"
-			>
-				{description}
-			</Text>
-		</Stack>
-	) : label;
+export const ActionButton = createPolymorphicComponent<"button", ActionButtonProps>(
+	forwardRef<HTMLButtonElement, ActionButtonProps>(
+		({ label, description, tooltipProps, ...other }, ref) => {
+			const tooltipLabel = description ? (
+				<Stack gap={4}>
+					<Text>{label}</Text>
+					<Text
+						c="dimmed"
+						size="sm"
+					>
+						{description}
+					</Text>
+				</Stack>
+			) : (
+				label
+			);
 
-	return (
-		<Tooltip
-			maw={description ? 175 : undefined}
-			multiline={!!description}
-			label={tooltipLabel}
-			openDelay={300}
-			{...tooltipProps}
-		>
-			<ActionIcon
-				{...other}
-				aria-label={label}
-			>
-				{other.children}
-			</ActionIcon>
-		</Tooltip>
-	);
-}
+			return (
+				<Tooltip
+					maw={description ? 175 : undefined}
+					multiline={!!description}
+					label={tooltipLabel}
+					openDelay={300}
+					{...tooltipProps}
+				>
+					<ActionIcon
+						{...other}
+						ref={ref}
+						aria-label={label}
+					>
+						{other.children}
+					</ActionIcon>
+				</Tooltip>
+			);
+		},
+	),
+);
diff --git a/src/components/App/modals/provisioning.tsx b/src/components/App/modals/provisioning.tsx
@@ -55,7 +55,6 @@ export function ProvisioningDialog() {
 			size="lg"
 			shadow="sm"
 			withCloseButton
-			className={classes.provisionDialog}
 			position={{
 				bottom: "var(--mantine-spacing-xl)",
 				right: "var(--mantine-spacing-xl)",

diff --git a/src/components/App/style.module.scss b/src/components/App/style.module.scss
@@ -1,5 +1,5 @@
 .listing-modal {
-	background-color: hsla(240, 6%, 14%, 0.5);
+	background-color: hsla(253, 21%, 13%, 0.5);
 	backdrop-filter: blur(12px);
 	-webkit-backdrop-filter: blur(12px);
 	border: 1px solid var(--surrealist-divider-color);
@@ -34,6 +34,14 @@
 	}
 }
 
+.listing-active {
+	background-color: var(--mantine-color-slate-7);
+
+	@include light {
+		background-color: var(--mantine-color-slate-1);
+	}
+}
+
 .update-dialog {
 	background-color: var(--mantine-color-slate-9);
 	border: 1px solid var(--mantine-color-slate-6);
@@ -120,11 +128,6 @@
 	border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
-.provision-box {
-	border-radius: 50%;
-	box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
-}
-
 .provision-loader::after {
 	border: solid 3px transparent;
 	background-image: linear-gradient(var(--mantine-color-body), var(--mantine-color-body)), var(--surrealist-gradient);
@@ -142,12 +145,4 @@
 
 .docs-scroller :global(.mantine-ScrollArea-viewport)>div {
 	display: block !important;
-}
-
-.listing-active {
-	background-color: var(--mantine-color-slate-7);
-
-	@include light {
-		background-color: var(--mantine-color-slate-1);
-	}
 }
diff --git a/src/components/CodePreview/index.tsx b/src/components/CodePreview/index.tsx
@@ -73,8 +73,9 @@ export function CodePreview({
 			)}
 			<Paper
 				pos="relative"
-				bg={isLight ? "slate.0" : "slate.9"}
 				className={clsx(classes.root, className)}
+				shadow="none"
+				bg={isLight ? "slate.0" : "slate.9"}
 				fz="lg"
 				{...rest}
 			>

diff --git a/src/components/DataTable/style.module.scss b/src/components/DataTable/style.module.scss
@@ -15,23 +15,42 @@
 		top: 0;
 	}
 
-	tbody tr:nth-child(odd) {
-		background-color: rgba(255, 255, 255, 0.05);
+	tbody tr:nth-child(odd) td {
+		background-color: var(--mantine-color-slate-7);
+
+		&:first-child {
+			border-top-left-radius: var(--mantine-radius-xs);
+		}
+
+		&:last-child {
+			border-top-right-radius: var(--mantine-radius-xs);
+		}
+
+		&:first-child {
+			border-bottom-left-radius: var(--mantine-radius-xs);
+		}
+
+		&:last-child {
+			border-bottom-right-radius: var(--mantine-radius-xs);
+		}
 
 		@include light {
-			background-color: rgba(0, 0, 0, 0.025);
+			background-color: var(--mantine-color-slate-0);
 		}
 	}
 
-	th > *, td > * {
+	th>*,
+	td>* {
 		padding-inline: 8px !important;
 	}
 
-	th:first-child > *, td:first-child > * {
+	th:first-child>*,
+	td:first-child>* {
 		padding-inline-start: 0;
 	}
 
-	th:last-child > *, td:last-child > * {
+	th:last-child>*,
+	td:last-child>* {
 		padding-inline-end: 0;
 	}
 }

diff --git a/src/components/DriverSelector/index.tsx b/src/components/DriverSelector/index.tsx
@@ -41,7 +41,7 @@ export function DriverSelector({
 				return (
 					<Paper
 						key={lib.name}
-						radius="xl"
+						radius="md"
 						bg={isLight ? "slate.0" : "slate.9"}
 						className={clsx(
 							classes.library,

diff --git a/src/components/Entry/style.module.scss b/src/components/Entry/style.module.scss
@@ -30,7 +30,6 @@
 	}
 
 	&.active {
-		border: 1px solid rgba(255, 255, 255, 0.3);
 		box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.3);
 
 		:global(.mantine-Button-section),