feat: big facelift

config/tailwind/package.json

@@ -0,0 +1,26 @@
+{
+	"name": "@pubpub/tailwind",
+	"type": "module",
+	"version": "0.0.0",
+	"private": true,
+	"license": "MIT",
+	"exports": {
+		"./style.css": "./style.css",
+		"./postcss-config": "./postcss.config.js"
+	},
+	"scripts": {},
+	"publishConfig": {
+		"access": "public"
+	},
+	"peerDependencies": {
+		"tailwindcss-animate": "catalog:",
+		"@tailwindcss/typography": "catalog:",
+		"@tailwindcss/forms": "catalog:"
+	},
+	"dependencies": {
+		"@tailwindcss/postcss": "catalog:",
+		"postcss": "catalog:",
+		"tailwindcss": "catalog:"
+	},
+	"devDependencies": {}
+}

config/tailwind/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+	plugins: {
+		"@tailwindcss/postcss": {},
+	},
+}

config/tailwind/style.css

@@ -0,0 +1,192 @@
+/** biome-ignore-all lint/suspicious/noDuplicateCustomProperties: biome doesn't understand tailwind */
+@import "tailwindcss";
+
+@plugin "tailwindcss-animate";
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@utility container {
+	margin-inline: auto;
+	padding-inline: 2rem;
+	@media (width >= --theme(--breakpoint-sm)) {
+		max-width: none;
+	}
+	@media (width >= 1400px) {
+		max-width: 1400px;
+	}
+}
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+
+	@variant dark {
+		--hwhite: oklch(89.763% 0.00435 15.946);
+
+		--background: oklch(17.304% 0.00002 271.152);
+		--foreground: var(--hwhite);
+		--card: oklch(0.205 0 0);
+		--card-foreground: var(--hwhite);
+		--popover: oklch(0.205 0 0);
+		--popover-foreground: var(--hwhite);
+		--primary: oklch(0.922 0 0);
+		--primary-foreground: oklch(0.205 0 0);
+		--secondary: oklch(0.269 0 0);
+		--secondary-foreground: var(--hwhite);
+		--muted: oklch(0.269 0 0);
+		--muted-foreground: oklch(0.708 0 0);
+		--accent: oklch(0.269 0 0);
+		--accent-foreground: var(--hwhite);
+		--destructive: oklch(0.704 0.191 22.216);
+		--border: oklch(1 0 0 / 10%);
+		--input: oklch(1 0 0 / 15%);
+		--ring: oklch(0.556 0 0);
+		--chart-1: oklch(0.488 0.243 264.376);
+		--chart-2: oklch(0.696 0.17 162.48);
+		--chart-3: oklch(0.769 0.188 70.08);
+		--chart-4: oklch(0.627 0.265 303.9);
+		--chart-5: oklch(0.645 0.246 16.439);
+		--sidebar: oklch(0.205 0 0);
+		--sidebar-foreground: var(--hwhite);
+		--sidebar-primary: oklch(0.488 0.243 264.376);
+		--sidebar-primary-foreground: var(--hwhite);
+		--sidebar-accent: oklch(0.269 0 0);
+		--sidebar-accent-foreground: var(--hwhite);
+		--sidebar-border: oklch(1 0 0 / 10%);
+		--sidebar-ring: oklch(0.556 0 0);
+	}
+}
+
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+	border-color: var(--border, currentColor);
+}
+
+@theme inline {
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-input: var(--input);
+	--color-border: var(--border);
+	--color-ring: var(--ring);
+
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-sidebar-active: var(--sidebar-active);
+
+	--animate-accordion-down: accordion-down 0.2s ease-out;
+	--animate-accordion-up: accordion-up 0.2s ease-out;
+	--animate-collapsible-down: collapsible-down 0.2s ease-out;
+	--animate-collapsible-up: collapsible-up 0.2s ease-out;
+
+	@keyframes accordion-down {
+		from {
+			height: 0;
+		}
+		to {
+			height: var(--radix-accordion-content-height);
+		}
+	}
+	@keyframes accordion-up {
+		from {
+			height: var(--radix-accordion-content-height);
+		}
+		to {
+			height: 0;
+		}
+	}
+	@keyframes collapsible-down {
+		from {
+			height: 0;
+		}
+		to {
+			height: var(--radix-collapsible-content-height);
+		}
+	}
+	@keyframes collapsible-up {
+		from {
+			height: var(--radix-collapsible-content-height);
+		}
+		to {
+			height: 0;
+		}
+	}
+}
+
+.editor .token {
+	font-size: 0.7rem;
+	color: #3b90f7;
+	font-family: monospace;
+	background-color: rgba(59, 144, 247, 0.2);
+	padding: 2px 1px;
+	box-shadow: 0px 0px 0px 1px rgba(59, 144, 247, 0.5);
+	border-radius: 3px;
+	margin: 0 1px;
+}
+.editor .jsonata-token {
+	font-size: 0.7rem;
+	color: #e7a316;
+	font-family: monospace;
+	background-color: rgba(231, 163, 22, 0.2);
+	padding: 2px 1px;
+	box-shadow: 0px 0px 0px 1px rgba(231, 163, 22, 0.5);
+	border-radius: 3px;
+	margin: 0 1px;
+}
+
+.editor.markdown {
+	min-height: 200px;
+}

core/actions/_lib/ActionField.tsx

@@ -132,11 +132,10 @@ const JSONataToggleButton = memo(
 				aria-label={`Toggle JSONata mode for ${fieldName}`}
 				data-testid={`toggle-jsonata-${fieldName}`}
 				className={cn(
-					"font-mono font-semibold text-gray-900 hover:bg-amber-50",
+					"font-mono font-semibold text-foreground hover:bg-amber-50",
 					"transition-colors duration-200",
 
-					inputState.state === "jsonata" &&
-						"border-orange-400 bg-orange-50 text-orange-900"
+					inputState.state === "jsonata" && "border-amber-400 bg-amber-600 text-amber-200"
 				)}
 				onClick={handleToggle}
 			>
@@ -241,7 +240,7 @@ const InnerActionField = memo(
 					<div className="flex flex-col space-y-1">
 						{label}
 
-						<FieldDescription className="text-pretty text-gray-500 text-xs">
+						<FieldDescription className="text-pretty text-xs">
 							{props.description ?? fieldSchema.description}
 						</FieldDescription>
 					</div>

core/actions/_lib/ActionFieldJsonataInput.tsx

@@ -36,7 +36,7 @@ export function ActionFieldJsonataInput(props: {
 							JSONata
 						</TooltipTrigger>
 						{/* TODO: write actual docs */}
-						<TooltipContent className="prose max-w-sm text-xs">
+						<TooltipContent className="prose dark:prose-invert max-w-sm text-xs">
 							You can write
 							<a
 								href="https://jsonata.org/"

core/actions/_lib/ActionFieldJsonataTestPanel.tsx

@@ -320,7 +320,7 @@ export function ActionFieldJsonataTestPanel(props: {
 									"h-7 gap-1.5 px-2 text-xs transition-colors",
 									autoEvaluate
 										? "text-amber-700 hover:bg-amber-50 hover:text-amber-800"
-										: "text-gray-500 hover:bg-gray-100 hover:text-gray-700"
+										: "text-muted-foreground hover:bg-gray-100 hover:text-gray-700"
 								)}
 							>
 								{autoEvaluate ? <Zap size={12} /> : <ZapOff size={12} />}
@@ -351,7 +351,7 @@ export function ActionFieldJsonataTestPanel(props: {
 			<div className="min-h-[60px] transition-all duration-200">
 				{/* to make it easier for screen readers to understand the output */}
 				{testResult.status === "pending" && (
-					<div className="flex items-center justify-center py-4 text-gray-500 text-xs">
+					<div className="flex items-center justify-center py-4 text-muted-foreground text-xs">
 						<Loader2 className="mr-2 h-3 w-3 animate-spin" />
 						Evaluating...
 					</div>
@@ -378,7 +378,7 @@ export function ActionFieldJsonataTestPanel(props: {
 								htmlFor={props.configKey}
 								aria-label="Success: JSONata test interpolated value"
 							>
-								<pre className="mt-2 max-h-[300px] overflow-auto whitespace-pre-wrap rounded bg-white p-2 font-mono text-gray-900 text-xs">
+								<pre className="mt-2 max-h-[300px] overflow-auto whitespace-pre-wrap rounded-sm bg-white p-2 font-mono text-gray-900 text-xs">
 									{JSON.stringify(testResult.interpolated, null, 2)}
 								</pre>
 							</output>
@@ -406,7 +406,7 @@ export function ActionFieldJsonataTestPanel(props: {
 									htmlFor={props.configKey}
 									aria-label="Error: JSONata test interpolated value"
 								>
-									<pre className="mt-2 max-h-[300px] overflow-auto whitespace-pre-wrap rounded bg-white p-2 font-mono text-gray-900 text-xs">
+									<pre className="mt-2 max-h-[300px] overflow-auto whitespace-pre-wrap rounded-sm bg-white p-2 font-mono text-gray-900 text-xs">
 										{JSON.stringify(testResult.interpolated, null, 2)}
 									</pre>
 								</output>

core/actions/_lib/ActionForm.tsx

@@ -77,8 +77,7 @@ export function ActionForm(props: ActionFormProps) {
 			return result.data
 		}
 
-		toast({
-			title: "Invalid initial values",
+		toast.error({
 			description: `Can't parse values ${JSON.stringify(props.values)}: ${result.error.issues.map((issue) => `${issue.path.join(".")}: ${issue.message}`).join("\n")}. This is likely an issue on our end, please report this.`,
 			variant: "destructive",
 		})

core/actions/_lib/triggers/PubInStageForDurationConfigForm.tsx

@@ -32,7 +32,6 @@ export const PubInStageForDurationConfigForm: AddionalConfigForm<typeof pubInSta
 									</FieldLabel>
 									<Input
 										type="number"
-										className="bg-white"
 										value={p.field.value}
 										onChange={(e) =>
 											p.field.onChange(

core/app/(user)/communities/AddCommunityForm.tsx

@@ -30,10 +30,7 @@ export const AddCommunityForm = (props: Props) => {
 		const result = await runCreateCommunity({ ...data })
 		if (didSucceed(result)) {
 			props.setOpen(false)
-			toast({
-				title: "Success",
-				description: "Community created",
-			})
+			toast.success("Community created")
 		}
 	}
 	const form = useForm<z.infer<typeof communityCreateFormSchema>>({

core/app/(user)/communities/RemoveCommunityButton.tsx

@@ -49,11 +49,7 @@ export const RemoveCommunityButton = ({ community }: { community: TableCommunity
 							onClick={async () => {
 								const response = await runRemoveCommunity({ community })
 								if (didSucceed(response)) {
-									toast({
-										title: "Success",
-										description: "Community successfully removed",
-										variant: "default",
-									})
+									toast.success("Community successfully removed")
 								}
 							}}
 						>

core/app/(user)/reset/page.tsx

@@ -12,7 +12,7 @@ export default async function Page() {
 
 	if (!user) {
 		return (
-			<div className="prose mx-auto max-w-sm">
+			<div className="prose dark:prose-invert mx-auto max-w-sm">
 				<h1>Invalid</h1>
 				<p>It looks like this link has expired. Please request a new one.</p>
 			</div>

core/app/(user)/settings/ResetPasswordButton.tsx

@@ -19,18 +19,10 @@ export const ResetPasswordButton = ({ user }: { user: UserLoginData }) => {
 		const result = await runResetPassword({ email: user.email })
 
 		if (result && "error" in result) {
-			toast({
-				title: "Error",
-				description: result.error,
-				variant: "destructive",
-			})
+			toast.error(result.error)
 		}
 
-		toast({
-			title: "Success",
-			description: "Password reset email sent! Please check your inbox.",
-			duration: 5000,
-		})
+		toast.success("Password reset email sent! Please check your inbox.")
 	}
 
 	return (

core/app/(user)/settings/UserInfoForm.tsx

@@ -47,10 +47,7 @@ export function UserInfoForm({ user }: { user: UserLoginData }) {
 	const onSubmit = async (data: z.infer<typeof userInfoFormSchema>) => {
 		const result = await runUpdateUserInfo({ data })
 		if (result && "success" in result) {
-			toast({
-				title: "Success",
-				description: "User information updated",
-			})
+			toast.success("User information updated")
 		}
 	}
 
@@ -139,7 +136,7 @@ export function UserInfoForm({ user }: { user: UserLoginData }) {
 						!form.formState.isValid ||
 						!form.formState.isDirty
 					}
-					className="w-min flex-grow-0"
+					className="w-min grow-0"
 				>
 					Save
 					{form.formState.isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}