Desktop App Tailwind 4

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}

apps/desktop/src/routes/(window-chrome).tsx

@@ -95,10 +95,10 @@ function Header() {
 			data-tauri-drag-region
 		>
 			{ctx.state()?.items}
-			{isWindows && <CaptionControlsWindows11 class="!ml-auto" />}
+			{isWindows && <CaptionControlsWindows11 class="ml-auto!" />}
 			{isMacOS && (
 				<CaptionControlsMacOS
-					class="!mr-auto ml-3"
+					class="mr-auto! ml-3"
 					showMinimize={false}
 					showZoom={false}
 				/>

apps/desktop/src/routes/(window-chrome)/new-main/CameraSelect.tsx

@@ -112,7 +112,7 @@ export default function CameraSelect(props: {
 	const isDisabled = () => !!currentRecording.data || props.disabled;
 
 	return (
-		<div class="flex flex-col items-stretch text-[--text-primary]">
+		<div class="flex flex-col items-stretch text-(--text-primary)">
 			<button
 				type="button"
 				disabled={isDisabled()}
@@ -262,7 +262,7 @@ export function CameraSelectBase(props: {
 		!props.hidePreviewButton;
 
 	return (
-		<div class="flex flex-col gap-[0.25rem] items-stretch text-[--text-primary]">
+		<div class="flex flex-col gap-1 items-stretch text-(--text-primary)">
 			<button
 				type="button"
 				disabled={!!currentRecording.data || props.disabled}

apps/desktop/src/routes/(window-chrome)/new-main/DeviceSelectOverlay.tsx

@@ -175,7 +175,7 @@ export default function DeviceSelectOverlay<T>(
 								placeholder="Search..."
 								value={searchQuery()}
 								onInput={(e) => setSearchQuery(e.currentTarget.value)}
-								class="w-full px-3 py-1.5 text-sm rounded-lg outline-none placeholder:text-white/40 text-white"
+								class="w-full px-3 py-1.5 text-sm rounded-lg outline-hidden placeholder:text-white/40 text-white"
 								style={{
 									"background-color": "rgba(255, 255, 255, 0.1)",
 									border: "1px solid rgba(255, 255, 255, 0.1)",

apps/desktop/src/routes/(window-chrome)/new-main/MicrophoneSelect.tsx

@@ -70,7 +70,7 @@ export default function MicrophoneSelect(props: {
 	const isDisabled = () => !!currentRecording.data || props.disabled;
 
 	return (
-		<div class="flex flex-col items-stretch text-[--text-primary]">
+		<div class="flex flex-col items-stretch text-(--text-primary)">
 			<button
 				type="button"
 				disabled={isDisabled()}
@@ -181,7 +181,7 @@ export function MicrophoneSelectBase(props: {
 		(1 - Math.max((dbs() ?? 0) + DB_SCALE, 0) / DB_SCALE) ** 0.5;
 
 	return (
-		<div class="flex flex-col gap-[0.25rem] items-stretch text-[--text-primary]">
+		<div class="flex flex-col gap-1 items-stretch text-(--text-primary)">
 			<button
 				type="button"
 				disabled={!!currentRecording.data || props.disabled}

apps/desktop/src/routes/(window-chrome)/new-main/ModeInfoPanel.tsx

@@ -49,7 +49,7 @@ export default function ModeInfoPanel(props: ModeInfoPanelProps) {
 					onClick={() => props.onBack()}
 					class="flex gap-1 items-center rounded-md px-1.5 text-xs cursor-pointer
 					text-gray-11 transition-opacity hover:opacity-70 hover:text-gray-12
-					focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1"
+					focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1"
 				>
 					<IconLucideArrowLeft class="size-3 text-gray-11" />
 					<span class="font-medium text-gray-12">Back</span>
@@ -89,7 +89,7 @@ export default function ModeInfoPanel(props: ModeInfoPanelProps) {
 													</div>
 												)}
 
-												<div class="flex-shrink-0">
+												<div class="shrink-0">
 													<option.icon
 														class={cx(
 															"size-5 invert dark:invert-0",

apps/desktop/src/routes/(window-chrome)/new-main/TargetCard.tsx

@@ -198,7 +198,7 @@ export default function TargetCard(props: TargetCardProps) {
 		return parts.map((part) => {
 			if (part.toLowerCase() === lowercaseQuery) {
 				return (
-					<span class="rounded bg-blue-9/20 px-[1px] text-gray-12">{part}</span>
+					<span class="rounded-sm bg-blue-9/20 px-px text-gray-12">{part}</span>
 				);
 			}
 			return part;
@@ -314,12 +314,12 @@ export default function TargetCard(props: TargetCardProps) {
 			disabled={local.disabled}
 			data-variant={local.variant}
 			class={cx(
-				"group flex flex-col overflow-hidden rounded-lg border border-transparent bg-gray-3 text-left outline-none transition-colors duration-100 hover:bg-gray-4 focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1",
+				"group flex flex-col overflow-hidden rounded-lg border border-transparent bg-gray-3 text-left outline-hidden transition-colors duration-100 hover:bg-gray-4 focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1",
 				local.disabled && "pointer-events-none opacity-60",
 				local.class,
 			)}
 		>
-			<div class="relative h-[4.75rem] w-full overflow-hidden bg-gray-4/40">
+			<div class="relative h-19 w-full overflow-hidden bg-gray-4/40">
 				<Show
 					when={imageExists() ? thumbnailSrc() : undefined}
 					fallback={
@@ -354,10 +354,10 @@ export default function TargetCard(props: TargetCardProps) {
 					)}
 				</Show>
 				<div class="absolute inset-0 border opacity-60 pointer-events-none border-black/5" />
-				<div class="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t to-transparent pointer-events-none from-black/40" />
+				<div class="absolute inset-x-0 bottom-0 h-10 bg-linear-to-t to-transparent pointer-events-none from-black/40" />
 				<Show when={recordingFailed() || recordingUploadFailed()}>
 					<div class="absolute inset-0 flex items-center justify-center bg-black/75">
-						<div class="flex items-center gap-1 px-1.5 py-0.5 rounded bg-red-9/20 text-red-11">
+						<div class="flex items-center gap-1 px-1.5 py-0.5 rounded-sm bg-red-9/20 text-red-11">
 							<IconPhWarningBold class="size-2.5" />
 							<span class="text-[10px] font-medium">
 								{recordingFailed() ? "Recording failed" : "Upload failed"}
@@ -391,7 +391,7 @@ export default function TargetCard(props: TargetCardProps) {
 								role="button"
 								tabIndex={-1}
 								onClick={handleOpenEditor}
-								class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+								class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 							>
 								<IconLucideEdit class="size-3.5" />
 							</div>
@@ -401,7 +401,7 @@ export default function TargetCard(props: TargetCardProps) {
 								role="button"
 								tabIndex={-1}
 								onClick={handleCopy}
-								class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+								class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 							>
 								<IconLucideCopy class="size-3.5" />
 							</div>
@@ -411,7 +411,7 @@ export default function TargetCard(props: TargetCardProps) {
 								role="button"
 								tabIndex={-1}
 								onClick={handleSave}
-								class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+								class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 							>
 								<IconLucideSave class="size-3.5" />
 							</div>
@@ -436,7 +436,7 @@ export default function TargetCard(props: TargetCardProps) {
 											role="button"
 											tabIndex={-1}
 											onClick={handleOpenRecordingEditor}
-											class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+											class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 										>
 											<IconLucideEdit class="size-3.5" />
 										</div>
@@ -453,7 +453,7 @@ export default function TargetCard(props: TargetCardProps) {
 													role="button"
 													tabIndex={-1}
 													onClick={handleReupload}
-													class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+													class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 												>
 													<IconLucideRotateCcw class="size-3.5" />
 												</div>
@@ -475,7 +475,7 @@ export default function TargetCard(props: TargetCardProps) {
 											role="button"
 											tabIndex={-1}
 											onClick={handleOpenRecordingLink}
-											class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+											class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 										>
 											<IconCapLink class="size-3.5" />
 										</div>
@@ -486,7 +486,7 @@ export default function TargetCard(props: TargetCardProps) {
 										role="button"
 										tabIndex={-1}
 										onClick={handleOpenRecordingFolder}
-										class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+										class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 									>
 										<IconLucideFolder class="size-3.5" />
 									</div>
@@ -496,7 +496,7 @@ export default function TargetCard(props: TargetCardProps) {
 										role="button"
 										tabIndex={-1}
 										onClick={handleDeleteRecording}
-										class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+										class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 									>
 										<IconCapTrash class="size-3.5" />
 									</div>
@@ -522,12 +522,12 @@ export function TargetCardSkeleton(props: { class?: string }) {
 				props.class,
 			)}
 		>
-			<div class="h-[4.75rem] w-full animate-pulse bg-gray-4" />
+			<div class="h-19 w-full animate-pulse bg-gray-4" />
 			<div class="flex flex-row items-start gap-2 px-2 py-1.5">
 				<div class="flex-1 space-y-1">
-					<div class="w-3/4 h-3 rounded bg-gray-4" />
-					<div class="h-2.5 w-1/2 rounded bg-gray-4" />
-					<div class="h-2.5 w-2/5 rounded bg-gray-4" />
+					<div class="w-3/4 h-3 rounded-sm bg-gray-4" />
+					<div class="h-2.5 w-1/2 rounded-sm bg-gray-4" />
+					<div class="h-2.5 w-2/5 rounded-sm bg-gray-4" />
 				</div>
 			</div>
 		</div>