run v4 beta migrate cool and fix default border colors

app/(blobs)/(setup)/_components/OnboardSteps/Documentation.tsx

@@ -45,7 +45,7 @@ function Documentation() {
             </Heading>
             Visit our documentation site to learn more about Fresco.
           </div>
-          <div className="flex min-w-32 flex-shrink-0 flex-col items-end justify-center">
+          <div className="flex min-w-32 shrink-0 flex-col items-end justify-center">
             <a
               href="https://documentation.networkcanvas.com/en/fresco"
               target="_blank"
@@ -64,7 +64,7 @@ function Documentation() {
             Read our guide on the basic workflow for using Fresco to conduct
             your study.
           </div>
-          <div className="flex min-w-32 flex-shrink-0 flex-col items-end justify-center">
+          <div className="flex min-w-32 shrink-0 flex-col items-end justify-center">
             <a
               href="https://documentation.networkcanvas.com/en/fresco/using-fresco"
               target="_blank"

app/(blobs)/(setup)/_components/Sidebar.tsx

@@ -12,7 +12,7 @@ function OnboardSteps({ steps }: { steps: string[] }) {
   );
 
   return (
-    <div className="flex flex-shrink-0 flex-grow-0 flex-col gap-6 rounded-xl bg-white px-8 py-12">
+    <div className="flex shrink-0 grow-0 flex-col gap-6 rounded-xl bg-white px-8 py-12">
       {steps.map((step, index) => (
         <div
           key={index}

app/(blobs)/layout.tsx

@@ -19,7 +19,7 @@ export default function Layout({ children }: PropsWithChildren) {
             />
           </Link>
         </div>
-        <main className="flex flex-grow items-center justify-center">
+        <main className="flex grow items-center justify-center">
           {children}
         </main>
       </div>

app/(interview)/interview/_components/SmallScreenOverlay.tsx

@@ -9,7 +9,7 @@ const SmallScreenOverlay = () => {
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex  items-center justify-center bg-[--nc-background]  lg:hidden">
+    <div className="fixed inset-0 z-50 flex  items-center justify-center bg-(--nc-background)  lg:hidden">
       <div className="flex max-w-[72ch] flex-col items-center justify-center p-6 text-center">
         <Image
           src="/images/too-small.svg"
@@ -23,7 +23,7 @@ const SmallScreenOverlay = () => {
           To complete this interview, please use a device with a larger screen,
           or maximize your browser window.
         </Paragraph>
-        <Paragraph className="!mt-16">
+        <Paragraph className="mt-16!">
           <strong>Note:</strong> it is not possible to complete this interview
           using a mobile phone.
         </Paragraph>

app/(interview)/interview/layout.tsx

@@ -8,7 +8,7 @@ export const metadata = {
 
 function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <main className="flex h-[100vh] max-h-[100vh] flex-col bg-[--nc-background] text-[--nc-text]">
+    <main className="flex h-[100vh] max-h-[100vh] flex-col bg-(--nc-background) text-(--nc-text)">
       <SmallScreenOverlay />
       {children}
     </main>

app/dashboard/_components/ProtocolUploader.tsx

@@ -58,7 +58,7 @@ function ProtocolUploader({
         className={cn(
           isActive &&
             cn(
-              'bg-gradient-to-r from-cyber-grape via-neon-coral to-cyber-grape text-white',
+              'bg-linear-to-r from-cyber-grape via-neon-coral to-cyber-grape text-white',
               'pointer-events-none animate-background-gradient cursor-wait bg-[length:400%]',
             ),
           className,

app/dashboard/_components/SummaryStatistics/Icons.tsx

@@ -1,5 +1,5 @@
 export const ProtocolIcon = () => (
-  <div className="flex aspect-[4/3] h-[40px] flex-col overflow-hidden rounded-[8px] bg-platinum">
+  <div className="flex aspect-4/3 h-[40px] flex-col overflow-hidden rounded-[8px] bg-platinum">
     <div className="flex h-2/3 w-full flex-col justify-center gap-[3px] px-[6px]">
       <div className="h-[4.5px] w-10/12 rounded-full bg-platinum-dark" />
       <div className="h-[2.5px] w-3/12 rounded-full bg-platinum-dark" />
@@ -11,7 +11,7 @@ export const ProtocolIcon = () => (
 );
 
 export const InterviewIcon = () => (
-  <div className="flex aspect-[4/3] h-[40px] flex-col overflow-hidden rounded-[8px] bg-platinum">
+  <div className="flex aspect-4/3 h-[40px] flex-col overflow-hidden rounded-[8px] bg-platinum">
     <div className="flex h-2/4 w-full flex-col justify-center gap-[3px] px-[6px]">
       <div className="h-[4.5px] w-10/12 rounded-full bg-platinum-dark" />
       <div className="h-[2.5px] w-3/12 rounded-full bg-platinum-dark" />

app/dashboard/interviews/_components/ExportInterviewsDialog.tsx

@@ -29,7 +29,7 @@ import ExportOptionsView from './ExportOptionsView';
 
 const ExportingStateAnimation = () => {
   return (
-    <div className="fixed inset-0 z-[99] flex flex-col items-center justify-center gap-3 bg-background/80 text-primary">
+    <div className="fixed inset-0 z-99 flex flex-col items-center justify-center gap-3 bg-background/80 text-primary">
       <div
         className={cn(
           cardClasses,

app/layout.tsx

@@ -1,6 +1,6 @@
 import { Quicksand } from 'next/font/google';
 import { Toaster } from '~/components/ui/toaster';
-import '~/styles/globals.scss';
+import '~/styles/globals.css';
 
 export const metadata = {
   title: 'Network Canvas Fresco',

components.json

@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.ts",
-    "css": "styles/globals.scss",
+    "css": "styles/globals.css",
     "baseColor": "slate",
     "cssVariables": true
   },

components/Feedback/FeedbackBanner.tsx

@@ -29,7 +29,7 @@ const FeedbackBanner = () => {
         aria-hidden="true"
       >
         <div
-          className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
+          className="aspect-577/310 w-[36.0625rem] bg-linear-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
           style={{
             clipPath:
               'polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)',
@@ -41,7 +41,7 @@ const FeedbackBanner = () => {
         aria-hidden="true"
       >
         <div
-          className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
+          className="aspect-577/310 w-[36.0625rem] bg-linear-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
           style={{
             clipPath:
               'polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)',
@@ -67,7 +67,7 @@ const FeedbackBanner = () => {
       )}
       <div
         className={cn(
-          'flex flex-grow items-center gap-4 text-sm',
+          'flex grow items-center gap-4 text-sm',
           isDashboard ? 'justify-center' : 'justify-end',
         )}
       >

components/Link.tsx

@@ -6,7 +6,7 @@ export default function Link(props: LinkProps<LinkRestProps>) {
       className="text-link group font-semibold transition-all duration-300 ease-in-out"
       {...props}
     >
-      <span className="from-link to-link bg-gradient-to-r bg-[length:0%_2px] bg-left-bottom bg-no-repeat pb-[2px] transition-all duration-200 ease-out group-hover:bg-[length:100%_2px]">
+      <span className="from-link to-link bg-linear-to-r bg-[length:0%_2px] bg-left-bottom bg-no-repeat pb-[2px] transition-all duration-200 ease-out group-hover:bg-[length:100%_2px]">
         {props.children}
       </span>
     </NextLink>

components/data-table/data-table-faceted-filter.tsx

@@ -147,7 +147,7 @@ export function DataTableFacetedFilter<TData, TValue>({
             name="filter"
             placeholder={title}
             autoFocus
-            className="focus-visible:ring-ring flex w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50"
+            className="focus-visible:ring-ring flex w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-2xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50"
           />
           <CommandList className="mt-1">
             <CommandEmpty>No results found.</CommandEmpty>

components/layout/SettingsSection.tsx

@@ -32,7 +32,7 @@ export default function SettingsSection({
         {children}
       </div>
       {controlArea && (
-        <div className="flex flex-shrink-0 flex-col items-end justify-center">
+        <div className="flex shrink-0 flex-col items-end justify-center">
           {controlArea}
         </div>
       )}
@@ -52,7 +52,7 @@ export function SettingsSectionSkeleton({
         <Skeleton className="h-12 w-3/4" />
       </div>
       {controlAreaSkelton && (
-        <div className="flex min-w-32 flex-shrink-0 flex-col items-end justify-center">
+        <div className="flex min-w-32 shrink-0 flex-col items-end justify-center">
           {controlAreaSkelton}
         </div>
       )}

components/ui/Button.tsx

@@ -5,7 +5,7 @@ import { cn } from '~/utils/shadcn';
 import { Skeleton } from './skeleton';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-full text-sm font-semibold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-nowrap truncate text-foreground',
+  'inline-flex items-center justify-center rounded-full text-sm font-semibold ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-nowrap truncate text-foreground',
   {
     variants: {
       variant: {

components/ui/CloseButton.tsx

@@ -12,7 +12,7 @@ export const CloseButton = ({
       type="button"
       onClick={onClick}
       className={cn(
-        'rounded-sm ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted',
+        'rounded-sm ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted',
         className,
       )}
     >

components/ui/Input.tsx

@@ -48,7 +48,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             id={id}
             type={type}
             className={cn(
-              'focus-visible:ring-ring flex h-10 w-full rounded-input border border-border bg-input px-3 py-2 text-sm text-input-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+              'focus-visible:ring-ring flex h-10 w-full rounded-input border border-border bg-input px-3 py-2 text-sm text-input-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
               !!leftAdornment && 'pl-10',
               !!rightAdornment && 'pr-10',
               !!error && 'border-destructive',

components/ui/badge.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '~/utils/shadcn';
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full 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 flex-shrink-1',
+  'inline-flex items-center rounded-full 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 flex-shrink-1',
   {
     variants: {
       variant: {

components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Root
       ref={ref}
       className={cn(
-        'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
         className,
       )}
       {...props}

components/ui/command.tsx

@@ -29,7 +29,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}
@@ -100,7 +100,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
       className,
     )}
     {...props}

components/ui/dialog.tsx

@@ -47,7 +47,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

components/ui/dropdown-menu.tsx

@@ -19,7 +19,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent',
       inset && 'pl-8',
       className,
     )}
@@ -75,7 +75,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       inset && 'pl-8',
       className,
     )}
@@ -91,7 +91,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       className,
     )}
     checked={checked}
@@ -115,7 +115,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       className,
     )}
     {...props}

components/ui/popover.tsx

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

components/ui/select.tsx

@@ -23,7 +23,7 @@ SelectValue.displayName = SelectPrimitive.Value.displayName;
 
 export const selectTriggerStyles = cn(
   'text-input-foreground bg-input rounded-input flex h-10 w-full items-center justify-between border border-border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
-  'focus:ring-ring focus:outline-none focus:ring-2 focus:ring-offset-2',
+  'focus:ring-ring focus:outline-hidden focus:ring-2 focus:ring-offset-2',
 );
 
 const SelectTrigger = React.forwardRef<
@@ -92,7 +92,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-default select-none items-center py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       className,
     )}
     {...props}

components/ui/sheet.tsx

@@ -61,7 +61,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <SheetPrimitive.Close className="focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>