From 6514207631e87e9fc2808647108e84970eec82cd Mon Sep 17 00:00:00 2001
From: aidanCQ <aidan.keay@quantinuum.com>
Date: Wed, 11 Dec 2024 22:02:25 +0000
Subject: [PATCH] fix(): Use paper everywhere.

---
 src/custom/docs/components/header/CodeCopy.tsx | 2 +-
 src/custom/docs/components/navmenu/index.tsx   | 4 ++--
 src/custom/docs/components/triplecard/Card.tsx | 2 +-
 src/shadcn/ui/alert-dialog.tsx                 | 4 ++--
 src/shadcn/ui/alert.tsx                        | 2 +-
 src/shadcn/ui/button.tsx                       | 2 +-
 src/shadcn/ui/dialog.tsx                       | 4 ++--
 src/shadcn/ui/drawer.tsx                       | 2 +-
 src/shadcn/ui/menubar.tsx                      | 2 +-
 src/shadcn/ui/navigation-menu.tsx              | 2 +-
 src/shadcn/ui/sheet.tsx                        | 4 ++--
 src/shadcn/ui/sidebar.tsx                      | 6 +++---
 src/shadcn/ui/slider.tsx                       | 2 +-
 src/shadcn/ui/sonner.tsx                       | 2 +-
 src/shadcn/ui/switch.tsx                       | 2 +-
 src/shadcn/ui/tabs.tsx                         | 2 +-
 src/shadcn/ui/toast.tsx                        | 2 +-
 stories/custom/docs-header.stories.tsx         | 2 +-
 18 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/custom/docs/components/header/CodeCopy.tsx b/src/custom/docs/components/header/CodeCopy.tsx
index d83aa1b..d374505 100644
--- a/src/custom/docs/components/header/CodeCopy.tsx
+++ b/src/custom/docs/components/header/CodeCopy.tsx
@@ -13,7 +13,7 @@ export const CodeCopy = (props: {textToCopy: string, className?: string}) => {
         <Button
         variant="ghost"
         size="icon"
-        className={cn(`${copied ? ' hover:bg-paper' : 'hover:bg-background/50 hover:text-foreground/75'} ml-1`, props.className)}
+        className={cn(`${copied ? ' hover:bg-paper' : 'hover:bg-paper/50 hover:text-foreground/75'} ml-1`, props.className)}
         onClick={() => {
           window.navigator.clipboard.writeText(props.textToCopy)
           setHasCopied(true)
diff --git a/src/custom/docs/components/navmenu/index.tsx b/src/custom/docs/components/navmenu/index.tsx
index e98ca9c..6f3e427 100644
--- a/src/custom/docs/components/navmenu/index.tsx
+++ b/src/custom/docs/components/navmenu/index.tsx
@@ -132,8 +132,8 @@ export const NavBar = (props: {
   enableModeSelector?: boolean
 }) => {
   return (
-    <div className="bg-background text-foreground border-border sticky top-0 z-[100] w-full border-b text-sm">
-      <div className=" bg-background px-3 md:px-4 mx-auto max-w-[90rem] flex h-14 items-center justify-between">
+    <div className="bg-paper text-foreground border-border sticky top-0 z-[100] w-full border-b text-sm">
+      <div className=" bg-paper px-3 md:px-4 mx-auto max-w-[90rem] flex h-14 items-center justify-between">
         <div className="mr-4 flex items-center">
           <div className='block md:hidden mr-3'>
             <MobileMenu {...navConfig}/>
diff --git a/src/custom/docs/components/triplecard/Card.tsx b/src/custom/docs/components/triplecard/Card.tsx
index 95f01df..57c2c54 100644
--- a/src/custom/docs/components/triplecard/Card.tsx
+++ b/src/custom/docs/components/triplecard/Card.tsx
@@ -42,7 +42,7 @@ const Card = React.forwardRef<
   return (
     <div
       className={cn(
-        ' border-border flex w-full flex-col justify-between rounded-xl overflow-hidden border p-7 pb-9 dark:bg-muted/25 bg-background',
+        ' border-border flex w-full flex-col justify-between rounded-xl overflow-hidden border p-7 pb-9 dark:bg-muted/25 bg-paper',
         className
       )}
       ref={ref}
diff --git a/src/shadcn/ui/alert-dialog.tsx b/src/shadcn/ui/alert-dialog.tsx
index e989674..68efa4c 100644
--- a/src/shadcn/ui/alert-dialog.tsx
+++ b/src/shadcn/ui/alert-dialog.tsx
@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-paper/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-paper p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
diff --git a/src/shadcn/ui/alert.tsx b/src/shadcn/ui/alert.tsx
index ae2915d..70558eb 100644
--- a/src/shadcn/ui/alert.tsx
+++ b/src/shadcn/ui/alert.tsx
@@ -8,7 +8,7 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: "bg-paper text-foreground",
         destructive:
           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
       },
diff --git a/src/shadcn/ui/button.tsx b/src/shadcn/ui/button.tsx
index 54df553..4f1a0dd 100644
--- a/src/shadcn/ui/button.tsx
+++ b/src/shadcn/ui/button.tsx
@@ -14,7 +14,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-paper shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
diff --git a/src/shadcn/ui/dialog.tsx b/src/shadcn/ui/dialog.tsx
index e07ea8a..1f5cce5 100644
--- a/src/shadcn/ui/dialog.tsx
+++ b/src/shadcn/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-paper/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-paper p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
diff --git a/src/shadcn/ui/drawer.tsx b/src/shadcn/ui/drawer.tsx
index 3884dc4..d90b756 100644
--- a/src/shadcn/ui/drawer.tsx
+++ b/src/shadcn/ui/drawer.tsx
@@ -43,7 +43,7 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-paper",
         className
       )}
       {...props}
diff --git a/src/shadcn/ui/menubar.tsx b/src/shadcn/ui/menubar.tsx
index 73c081a..bc68ccf 100644
--- a/src/shadcn/ui/menubar.tsx
+++ b/src/shadcn/ui/menubar.tsx
@@ -27,7 +27,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+      "flex h-9 items-center space-x-1 rounded-md border bg-paper p-1 shadow-sm",
       className
     )}
     {...props}
diff --git a/src/shadcn/ui/navigation-menu.tsx b/src/shadcn/ui/navigation-menu.tsx
index e4fc352..d41b2c7 100644
--- a/src/shadcn/ui/navigation-menu.tsx
+++ b/src/shadcn/ui/navigation-menu.tsx
@@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-paper px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
 );
 
 const NavigationMenuTrigger = React.forwardRef<
diff --git a/src/shadcn/ui/sheet.tsx b/src/shadcn/ui/sheet.tsx
index e5eed5b..f02bcfe 100644
--- a/src/shadcn/ui/sheet.tsx
+++ b/src/shadcn/ui/sheet.tsx
@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-paper/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-50 gap-4 bg-paper p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
       side: {
diff --git a/src/shadcn/ui/sidebar.tsx b/src/shadcn/ui/sidebar.tsx
index 250ffcd..852e210 100644
--- a/src/shadcn/ui/sidebar.tsx
+++ b/src/shadcn/ui/sidebar.tsx
@@ -322,7 +322,7 @@ const SidebarInset = React.forwardRef<
     <main
       ref={ref}
       className={cn(
-        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "relative flex min-h-svh flex-1 flex-col bg-paper",
         "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
         className
       )}
@@ -341,7 +341,7 @@ const SidebarInput = React.forwardRef<
       ref={ref}
       data-sidebar="input"
       className={cn(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        "h-8 w-full bg-paper shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
         className
       )}
       {...props}
@@ -518,7 +518,7 @@ const sidebarMenuButtonVariants = cva(
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          "bg-paper shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
         default: "h-8 text-sm",
diff --git a/src/shadcn/ui/slider.tsx b/src/shadcn/ui/slider.tsx
index 8dc0535..d6fc13b 100644
--- a/src/shadcn/ui/slider.tsx
+++ b/src/shadcn/ui/slider.tsx
@@ -20,7 +20,7 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
       <SliderPrimitive.Range className="absolute h-full bg-primary" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-paper shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ))
 Slider.displayName = SliderPrimitive.Root.displayName
diff --git a/src/shadcn/ui/sonner.tsx b/src/shadcn/ui/sonner.tsx
index d257c5b..0dc5ade 100644
--- a/src/shadcn/ui/sonner.tsx
+++ b/src/shadcn/ui/sonner.tsx
@@ -14,7 +14,7 @@ export const SonnerToast = ({ theme, className, toastOptions, ...props }: Toaste
         ...toastOptions,
         classNames: {
           toast: cn(
-              "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+              "group toast group-[.toaster]:bg-paper group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
               toastOptions?.classNames?.toast
           ),
           description: cn("group-[.toast]:text-muted-foreground", toastOptions?.classNames?.description),
diff --git a/src/shadcn/ui/switch.tsx b/src/shadcn/ui/switch.tsx
index 712cf6b..61db30e 100644
--- a/src/shadcn/ui/switch.tsx
+++ b/src/shadcn/ui/switch.tsx
@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-4 w-4 rounded-full bg-paper shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/src/shadcn/ui/tabs.tsx b/src/shadcn/ui/tabs.tsx
index eed12a0..6b23b57 100644
--- a/src/shadcn/ui/tabs.tsx
+++ b/src/shadcn/ui/tabs.tsx
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-6 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow data-[state=inactive]:hover:brightness-50 data-[state=inactive]:dark:hover:brightness-150",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-6 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-paper data-[state=active]:text-foreground data-[state=active]:shadow data-[state=inactive]:hover:brightness-50 data-[state=inactive]:dark:hover:brightness-150",
       className
     )}
     {...props}
diff --git a/src/shadcn/ui/toast.tsx b/src/shadcn/ui/toast.tsx
index 801861a..6bb8274 100644
--- a/src/shadcn/ui/toast.tsx
+++ b/src/shadcn/ui/toast.tsx
@@ -27,7 +27,7 @@ const toastVariants = cva(
   {
     variants: {
       variant: {
-        default: "border bg-background text-foreground",
+        default: "border bg-paper text-foreground",
         destructive:
           "destructive group border-destructive bg-destructive text-destructive-foreground",
       },
diff --git a/stories/custom/docs-header.stories.tsx b/stories/custom/docs-header.stories.tsx
index 189ff16..62ffd59 100644
--- a/stories/custom/docs-header.stories.tsx
+++ b/stories/custom/docs-header.stories.tsx
@@ -17,7 +17,7 @@ export function DocsHeaderDemo() {
         <CodeCopy textToCopy="pip install qnexus"></CodeCopy>
         <Button
             variant="secondary"
-            className="-mt-px flex-grow py-[1.38rem] border-border border bg-background"
+            className="-mt-px flex-grow py-[1.38rem] border-border border bg-paper"
             asChild
         >
             <a href="user_guide/sign_up.html">