From c8225a0d88bcaa431891aadfc5ce17fcc21a0823 Mon Sep 17 00:00:00 2001 From: Danny Fuhriman Date: Mon, 17 Nov 2025 13:26:18 -0800 Subject: [PATCH 1/3] run tailwind upgrade script --- app/dashboard/account/layout.tsx | 2 +- app/dashboard/organization/layout.tsx | 2 +- .../security-policies/mfa-policy-form.tsx | 2 +- .../sso/components/sso-nav-link.tsx | 2 +- app/dashboard/page.tsx | 4 +- app/globals.css | 97 +- components/organization-switcher.tsx | 4 +- components/ui/badge.tsx | 6 +- components/ui/button.tsx | 10 +- components/ui/checkbox.tsx | 2 +- components/ui/command.tsx | 8 +- components/ui/dialog.tsx | 2 +- components/ui/dropdown-menu.tsx | 12 +- components/ui/input.tsx | 2 +- components/ui/popover.tsx | 2 +- components/ui/radio-group.tsx | 2 +- components/ui/select.tsx | 8 +- components/ui/separator.tsx | 2 +- components/ui/switch.tsx | 2 +- components/ui/table.tsx | 6 +- components/ui/textarea.tsx | 2 +- package-lock.json | 1572 ++++++++--------- package.json | 5 +- postcss.config.mjs | 2 +- scripts/bootstrap.mjs | 2 +- tailwind.config.ts | 87 - 26 files changed, 837 insertions(+), 1010 deletions(-) delete mode 100644 tailwind.config.ts diff --git a/app/dashboard/account/layout.tsx b/app/dashboard/account/layout.tsx index c4905e900..52a622a2d 100644 --- a/app/dashboard/account/layout.tsx +++ b/app/dashboard/account/layout.tsx @@ -22,7 +22,7 @@ export default async function AccountLayout({ children }: AccountLayoutProps) { -
+
{children}
diff --git a/app/dashboard/organization/layout.tsx b/app/dashboard/organization/layout.tsx index e19150591..944271893 100644 --- a/app/dashboard/organization/layout.tsx +++ b/app/dashboard/organization/layout.tsx @@ -81,7 +81,7 @@ export default async function AccountLayout({ children }: AccountLayoutProps) { -
+
{children}
diff --git a/app/dashboard/organization/security-policies/mfa-policy-form.tsx b/app/dashboard/organization/security-policies/mfa-policy-form.tsx index 38cf2ed0e..83747c26a 100644 --- a/app/dashboard/organization/security-policies/mfa-policy-form.tsx +++ b/app/dashboard/organization/security-policies/mfa-policy-form.tsx @@ -51,7 +51,7 @@ export function MfaPolicyForm({ organization }: Props) { -
+
diff --git a/app/dashboard/organization/sso/components/sso-nav-link.tsx b/app/dashboard/organization/sso/components/sso-nav-link.tsx index af942e60d..2888cf032 100644 --- a/app/dashboard/organization/sso/components/sso-nav-link.tsx +++ b/app/dashboard/organization/sso/components/sso-nav-link.tsx @@ -21,7 +21,7 @@ export default function SsoNavLink({ href={`/dashboard/organization/sso/oidc/edit/${connectionId}/${slug}`} className={cn( isActive - ? "font-semibold text-primary underline underline-offset-[12px]" + ? "font-semibold text-primary underline underline-offset-12" : "font-normal text-muted-foreground transition-colors hover:text-foreground" )} > diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx index 63ffe33bb..079bb3fce 100644 --- a/app/dashboard/page.tsx +++ b/app/dashboard/page.tsx @@ -5,8 +5,8 @@ import { Button } from "@/components/ui/button" export default async function DashboardHome() { return ( -
-
+
+

Explore the SaaS Starter diff --git a/app/globals.css b/app/globals.css index e82908f23..f2c613b0b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,6 +1,97 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; + +@custom-variant dark (&:is(.dark *)); + +@utility container { + margin-inline: auto; + padding-inline: 2rem; + @media (width >= --theme(--breakpoint-sm)) { + max-width: none; + } + @media (width >= 1400px) { + max-width: 1400px; + } +} + +@theme { + --font-sans: + var(--font-inter-sans), ui-sans-serif, system-ui, sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-mono: + ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', + 'Courier New', monospace; + + --color-field: hsl(var(--field)); + --color-hover: hsl(var(--hover)); + --color-border: hsl(var(--border)); + --color-input: hsl(var(--input)); + --color-ring: hsl(var(--ring)); + --color-background: hsl(var(--background)); + --color-foreground: hsl(var(--foreground)); + + --color-primary: hsl(var(--primary)); + --color-primary-foreground: hsl(var(--primary-foreground)); + + --color-secondary: hsl(var(--secondary)); + --color-secondary-foreground: hsl(var(--secondary-foreground)); + + --color-destructive: hsl(var(--destructive)); + --color-destructive-foreground: hsl(var(--destructive-foreground)); + + --color-muted: hsl(var(--muted)); + --color-muted-foreground: hsl(var(--muted-foreground)); + + --color-accent: hsl(var(--accent)); + --color-accent-foreground: hsl(var(--accent-foreground)); + + --color-popover: hsl(var(--popover)); + --color-popover-foreground: hsl(var(--popover-foreground)); + + --color-card: hsl(var(--card)); + --color-card-foreground: hsl(var(--card-foreground)); + + --radius-lg: var(--radius); + --radius-md: calc(var(--radius) - 2px); + --radius-sm: calc(var(--radius) - 4px); + + --animate-accordion-down: accordion-down 0.2s ease-out; + --animate-accordion-up: accordion-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; + } + } +} + +/* + The default border color has changed to `currentcolor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentcolor); + } +} @layer base { :root { diff --git a/components/organization-switcher.tsx b/components/organization-switcher.tsx index f238a9125..bed9eecee 100644 --- a/components/organization-switcher.tsx +++ b/components/organization-switcher.tsx @@ -56,7 +56,7 @@ export function OrganizationSwitcher({ aria-expanded={open} aria-label="Select an organization" className={cn( - "flex h-12 w-full min-w-[240px] justify-between rounded-xl border border-border bg-field p-2", + "flex h-12 w-full min-w-60 justify-between rounded-xl border border-border bg-field p-2", "hover:border-accent hover:bg-accent/15" )} > @@ -75,7 +75,7 @@ export function OrganizationSwitcher({ - + diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx index 54b4dcc7e..75c5fba22 100644 --- a/components/ui/badge.tsx +++ b/components/ui/badge.tsx @@ -4,16 +4,16 @@ import { cva, VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( - "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: - "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", + "border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: - "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", + "border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80", outline: "text-foreground", }, }, diff --git a/components/ui/button.tsx b/components/ui/button.tsx index 7db9019d2..23c0ec347 100644 --- a/components/ui/button.tsx +++ b/components/ui/button.tsx @@ -5,18 +5,18 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( - "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", + "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: - "bg-primary text-primary-foreground shadow hover:bg-primary/90", + "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90", destructive: - "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", + "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90", outline: - "border border-input bg-field shadow-sm hover:bg-primary-foreground/5 hover:text-accent-foreground", + "border border-input bg-field shadow-xs hover:bg-primary-foreground/5 hover:text-accent-foreground", secondary: - "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", + "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", ghost: "text-secondary-foreground hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx index 372f11efe..8b22e2698 100644 --- a/components/ui/checkbox.tsx +++ b/components/ui/checkbox.tsx @@ -13,7 +13,7 @@ const Checkbox = React.forwardRef< { return ( - + {children} @@ -46,7 +46,7 @@ const CommandInput = React.forwardRef< {children} - + Close diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx index 530447b6b..3191a49d3 100644 --- a/components/ui/dropdown-menu.tsx +++ b/components/ui/dropdown-menu.tsx @@ -31,7 +31,7 @@ const DropdownMenuSubTrigger = React.forwardRef< ( span]:line-clamp-1", + "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-field px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className )} {...props} @@ -80,7 +80,7 @@ const SelectContent = React.forwardRef< {children} @@ -123,7 +123,7 @@ const SelectItem = React.forwardRef< (({ className, ...props }, ref) => ( tr]:last:border-b-0", + "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0", className )} {...props} @@ -73,7 +73,7 @@ const TableHead = React.forwardRef< [role=checkbox]]:translate-y-[2px]", + "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className )} {...props} @@ -88,7 +88,7 @@ const TableCell = React.forwardRef< [role=checkbox]]:translate-y-[2px]", + "p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className )} {...props} diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx index 477a8fd2f..4c8aea614 100644 --- a/components/ui/textarea.tsx +++ b/components/ui/textarea.tsx @@ -10,7 +10,7 @@ const Textarea = React.forwardRef( return (