Merge pull request #1771 from ItsEeleeya/desktop-tailwind-v4

Desktop App Tailwind 4

Author: richiemcilroy

apps/desktop/package.json

@@ -19,7 +19,7 @@
 		"@cap/utils": "workspace:*",
 		"@cap/web-api-contract": "workspace:*",
 		"@corvu/tooltip": "^0.2.1",
-		"@kobalte/core": "^0.13.7",
+		"@kobalte/core": "^0.13.11",
 		"@radix-ui/colors": "^3.0.0",
 		"@rive-app/canvas": "^2.32.2",
 		"@solid-primitives/bounds": "^0.0.122",
@@ -75,13 +75,16 @@
 	},
 	"devDependencies": {
 		"@fontsource/geist-sans": "^5.0.3",
-		"@webgpu/types": "^0.1.44",
 		"@iconify/json": "^2.2.239",
+		"@tailwindcss/postcss": "^4.2.2",
+		"@tailwindcss/typography": "^0.5.9",
 		"@tauri-apps/cli": ">=2.1.0",
 		"@total-typescript/ts-reset": "^0.6.1",
 		"@types/dom-webcodecs": "^0.1.11",
 		"@types/uuid": "^9.0.8",
+		"@webgpu/types": "^0.1.44",
 		"cross-env": "^7.0.3",
+		"tailwind-scrollbar": "^3.1.0",
 		"typescript": "^5.8.3",
 		"vite": "^6.3.5",
 		"vite-plugin-top-level-await": "^1.4.4",

apps/desktop/postcss.config.cjs

@@ -1 +1,6 @@
-module.exports = require("@cap/ui/postcss");
+module.exports = {
+	plugins: {
+		"@tailwindcss/postcss": {},
+		autoprefixer: {},
+	},
+};

apps/desktop/src/components/CapErrorBoundary.tsx

@@ -9,9 +9,9 @@ export function CapErrorBoundary(props: ParentProps) {
 			fallback={(e: Error) => {
 				console.error(e);
 				return (
-					<div class="w-full h-full flex flex-col justify-center items-center bg-gray-2 border-gray-3 max-h-screen overflow-hidden transition-[border-radius] duration-200 text-[--text-secondary] gap-y-4 max-sm:gap-y-2 px-8 text-center">
+					<div class="w-full h-full flex flex-col justify-center items-center bg-gray-2 border-gray-3 max-h-screen overflow-hidden transition-[border-radius] duration-200 text-(--text-secondary) gap-y-4 max-sm:gap-y-2 px-8 text-center">
 						<IconCapLogo class="max-sm:size-16" />
-						<h1 class="text-[--text-primary] text-3xl max-sm:text-xl font-bold">
+						<h1 class="text-(--text-primary) text-3xl max-sm:text-xl font-bold">
 							An Error Occured
 						</h1>
 						<p class="mb-2 max-sm:text-sm">

apps/desktop/src/components/Cropper.tsx

@@ -1018,7 +1018,7 @@ export function Cropper(
 	return (
 		<div
 			ref={containerRef}
-			class="relative w-full h-full select-none overscroll-contain focus:outline-none touch-none"
+			class="relative w-full h-full select-none overscroll-contain focus:outline-hidden touch-none"
 			style={{
 				cursor: cursorStyle() ?? (props.aspectRatio ? "default" : "crosshair"),
 			}}
@@ -1031,11 +1031,11 @@ export function Cropper(
 			<Transition
 				appear
 				enterActiveClass="transition-opacity duration-300 ease-in-out"
-				enterClass="opacity-0 blur-sm"
+				enterClass="opacity-0 blur-xs"
 				enterToClass="opacity-100 blur-none"
 				exitActiveClass="transition-opacity duration-300 ease-in-out"
 				exitClass="opacity-100 blur-none"
-				exitToClass="opacity-0 blur-sm"
+				exitToClass="opacity-0 blur-xs"
 			>
 				<Show when={props.showBounds && labelTransform()}>
 					{(transform) => (
@@ -1110,7 +1110,7 @@ export function Cropper(
 							handle.isCorner ? (
 								<button
 									type="button"
-									class="fixed z-50 flex h-[30px] w-[30px] focus:ring-0 outline-none"
+									class="fixed z-50 flex h-[30px] w-[30px] focus:ring-0 outline-hidden"
 									tabIndex={-1}
 									classList={{ "opacity-0": mouseState.drag === "overlay" }}
 									style={{
@@ -1136,7 +1136,7 @@ export function Cropper(
 								>
 									<svg
 										aria-hidden="true"
-										class="absolute pointer-events-none drop-shadow-sm shadow-black"
+										class="absolute pointer-events-none drop-shadow-xs shadow-black"
 										classList={{
 											"size-1": boundsTooSmall(),
 											"size-6": !boundsTooSmall(),
@@ -1172,7 +1172,7 @@ export function Cropper(
 							) : (
 								<button
 									type="button"
-									class="absolute focus:outline-none focus:ring-0 outline-none"
+									class="absolute focus:outline-hidden focus:ring-0 outline-hidden"
 									tabIndex={-1}
 									style={{
 										visibility:
@@ -1239,9 +1239,9 @@ export function Cropper(
 								aria-live="polite"
 							>
 								<div
-									class="h-[18px] w-11 rounded-full text-center text-xs text-gray-12 border border-white/70 dark:border-white/20 drop-shadow-md outline-1 outline outline-black/80"
+									class="h-[18px] w-11 rounded-full text-center text-xs text-gray-12 border border-white/70 dark:border-white/20 drop-shadow-md outline-1 outline-solid outline-black/80"
 									classList={{
-										"backdrop-blur-sm bg-white/50 dark:bg-black/50 dark:backdrop-brightness-90 backdrop-brightness-200":
+										"backdrop-blur-xs bg-white/50 dark:bg-black/50 dark:backdrop-brightness-90 backdrop-brightness-200":
 											props.useBackdropFilter,
 										"bg-gray-3 opacity-80": !props.useBackdropFilter,
 									}}

apps/desktop/src/components/Loader.tsx

@@ -2,7 +2,7 @@ export function AbsoluteInsetLoader() {
 	return (
 		<div class="w-full h-full flex items-center justify-center">
 			<div class="animate-spin">
-				<IconCapLogo class="size-[4rem]" />
+				<IconCapLogo class="size-16" />
 			</div>
 		</div>
 	);

apps/desktop/src/components/SignInButton.tsx

@@ -11,7 +11,7 @@ export function SignInButton(
 	return (
 		<Button
 			size="md"
-			class="flex flex-grow justify-center items-center"
+			class="flex grow justify-center items-center"
 			{...props}
 			variant={signIn.isPending ? "gray" : "primary"}
 			onClick={() => {

apps/desktop/src/components/Toggle.tsx

@@ -3,13 +3,13 @@ import { cva } from "cva";
 import { type ComponentProps, splitProps } from "solid-js";
 
 const toggleControlStyles = cva(
-	"rounded-full bg-gray-6 ui-disabled:bg-gray-3 ui-checked:bg-blue-500 transition-colors outline-2 outline-offset-2 outline-blue-300",
+	"rounded-full bg-gray-6 data-disabled:bg-gray-3 data-checked:bg-blue-500 transition-colors",
 	{
 		variants: {
 			size: {
-				sm: "w-9 h-[1.25rem] p-[0.125rem]",
-				md: "w-11 h-[1.5rem] p-[0.125rem]",
-				lg: "w-14 h-[1.75rem] p-[0.1875rem]",
+				sm: "w-9 h-5 p-0.5",
+				md: "w-11 h-6 p-0.5",
+				lg: "w-14 h-7 p-0.75",
 			},
 		},
 		defaultVariants: {
@@ -19,13 +19,13 @@ const toggleControlStyles = cva(
 );
 
 const toggleThumbStyles = cva(
-	"bg-white rounded-full transition-transform ui-checked:translate-x-[calc(100%)]",
+	"bg-white rounded-full transition-transform data-checked:translate-x-[calc(100%)]",
 	{
 		variants: {
 			size: {
-				sm: "size-[1rem]",
-				md: "size-[1.25rem]",
-				lg: "size-[1.5rem]",
+				sm: "size-4",
+				md: "size-5",
+				lg: "size-6",
 			},
 		},
 		defaultVariants: {

apps/desktop/src/components/titlebar/Titlebar.tsx

@@ -29,13 +29,13 @@ export default function Titlebar() {
 		>
 			{left() ? (
 				<>
-					<WindowControls class="!ml-0" />
-					<div class="!ml-auto">{titlebarState.items}</div>
+					<WindowControls class="ml-0!" />
+					<div class="ml-auto!">{titlebarState.items}</div>
 				</>
 			) : (
 				<>
 					{titlebarState.items}
-					<WindowControls class="!ml-auto" />
+					<WindowControls class="ml-auto!" />
 				</>
 			)}
 		</header>

apps/desktop/src/components/titlebar/controls/CaptionControlsWindows11.tsx

@@ -34,7 +34,7 @@ export default function (
 	return (
 		<div
 			class={cx(
-				"flex flex-row items-stretch h-full align-baseline cursor-default rounded-none select-none *:outline-none *:transition-all *:duration-200",
+				"flex flex-row items-stretch h-full align-baseline cursor-default rounded-none select-none *:outline-hidden *:transition-all *:duration-200",
 				local.class,
 				focused()
 					? "*:text-black-transparent-80"

apps/desktop/src/entry-server.tsx

@@ -23,7 +23,7 @@ export default createHandler(() => (
 					{assets}
 				</head>
 				<body class="w-screen h-screen cursor-default select-none">
-					<div id="app" class="h-full text-[--text-primary]">
+					<div id="app" class="h-full text-(--text-primary)">
 						{children}
 					</div>
 					{scripts}