fix(): Update colors.

.storybook/preview-head.html

@@ -3,7 +3,7 @@
 
 <!-- Or you can load custom head-tag JavaScript: -->
 
- <script
+<script
   src="dist/src/utils/syncTheme.js"
   type="application/javascript"
 ></script>

package.json

@@ -19,6 +19,10 @@
       {
         "name": "alpha",
         "prerelease": true
+      },
+      {
+        "name": "newcolors",
+        "prerelease": true
       }
     ]
   },
@@ -79,6 +83,7 @@
     "serve": "^14.2.1",
     "sonner": "^1.4.1",
     "storybook": "^7.6.5",
+    "tailwindcss": "^3.4.13",
     "tailwindcss-animate": "^1.0.7"
   },
   "dependencies": {

src/custom/docs/components/header/CodeCopy.tsx

@@ -1,32 +1,40 @@
-'use client'
-import React from "react"
+"use client";
+import React from "react";
 
-import {Button, cn} from 'src'
-import { Check, Copy } from "lucide-react"
-export const CodeCopy = (props: {textToCopy: string, className?: string}) => {
+import { Button, cn } from "src";
+import { Check, Copy } from "lucide-react";
+export const CodeCopy = (props: { textToCopy: string; className?: string }) => {
+  const [copied, setHasCopied] = React.useState(false);
 
-    const [copied, setHasCopied] = React.useState(false)
-
-    return <div className="dark:text-foreground text-background w-full flex  items-center justify-center self-start whitespace-nowrap rounded bg-gradient-to-r from-zinc-600 to-slate-600  py-0.5 pl-4 text-center text-sm font-semibold  dark:from-zinc-600 dark:to-slate-600">
-        <code className="font-mono">{props.textToCopy}</code>
+  return (
+    <div className='dark:text-foreground text-background w-full flex  items-center justify-center self-start whitespace-nowrap rounded bg-gradient-to-r from-zinc-600 to-slate-600  py-0.5 pl-4 text-center text-sm font-semibold  dark:from-zinc-600 dark:to-slate-600'>
+      <code className='font-mono'>{props.textToCopy}</code>
 
-        <Button
-        variant="ghost"
-        size="icon"
-        className={cn(`${copied ? ' hover:bg-transparent' : 'hover:bg-background/50 hover:text-foreground/75'} ml-1`, props.className)}
+      <Button
+        variant='ghost'
+        size='icon'
+        className={cn(
+          `${
+            copied
+              ? " hover:bg-card"
+              : "hover:bg-background/50 hover:text-foreground/75"
+          } ml-1`,
+          props.className
+        )}
         onClick={() => {
-          window.navigator.clipboard.writeText(props.textToCopy)
-          setHasCopied(true)
+          window.navigator.clipboard.writeText(props.textToCopy);
+          setHasCopied(true);
           setTimeout(() => {
-            setHasCopied(false)
-          }, 2500)
+            setHasCopied(false);
+          }, 2500);
         }}
       >
         {copied ? (
-          <Check className="text-background h-5 w-5"></Check>
+          <Check className='text-background h-5 w-5'></Check>
         ) : (
-          <Copy className="aspect-square h-4 w-4"></Copy>
+          <Copy className='aspect-square h-4 w-4'></Copy>
         )}
       </Button>
-      </div>
-}
+    </div>
+  );
+};

src/custom/docs/components/navmenu/index.tsx

@@ -1,59 +1,83 @@
-'use client'
-import { Navigation } from './NavigationMenu'
-import { ComponentProps } from 'react'
-import { Link } from './config'
-import { QuantinuumLogo } from './QuantinuumLogo'
-import { MobileMenu } from './MobileMenu'
-import { QuantinuumIdent } from './QuantinuumIdent'
-import { ModeSelector } from './ModeSelector'
-import { NavConfig } from './schema'
+"use client";
+import { Navigation } from "./NavigationMenu";
+import { ComponentProps } from "react";
+import { Link } from "./config";
+import { QuantinuumLogo } from "./QuantinuumLogo";
+import { MobileMenu } from "./MobileMenu";
+import { QuantinuumIdent } from "./QuantinuumIdent";
+import { ModeSelector } from "./ModeSelector";
+import { NavConfig } from "./schema";
 
-export const NavBar = (props: {
-  linkComponent?: Link
-  activePath: string
-  enableModeSelector?: boolean
-} & NavConfig) => {
+export const NavBar = (
+  props: {
+    linkComponent?: Link;
+    activePath: string;
+    enableModeSelector?: boolean;
+  } & NavConfig
+) => {
   const Link = props.linkComponent
     ? props.linkComponent
-    : (props: ComponentProps<'a'>) => <a {...props}></a>
+    : (props: ComponentProps<"a">) => <a {...props}></a>;
   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="mr-4 flex items-center">
+    <div className='bg-card text-foreground border-border sticky top-0 z-[100] w-full border-b text-sm'>
+      <div className=' bg-card 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 {...props}/>
+            <MobileMenu {...props} />
           </div>
-          <div className="whitespace-nowrap flex items-center gap-2">
-          <a href="https://docs.quantinuum.com/" aria-label='Quantinuum Docs' title="Quantinuum Docs"   className='hover:cursor-pointer hover:opacity-50 transition'>
-            <div className='hidden sm:block'><QuantinuumLogo />
-            </div>
-            <div className='block sm:hidden'>
-              <QuantinuumIdent/>
-            </div>
+          <div className='whitespace-nowrap flex items-center gap-2'>
+            <a
+              href='https://docs.quantinuum.com/'
+              aria-label='Quantinuum Docs'
+              title='Quantinuum Docs'
+              className='hover:cursor-pointer hover:opacity-50 transition'
+            >
+              <div className='hidden sm:block'>
+                <QuantinuumLogo />
+              </div>
+              <div className='block sm:hidden'>
+                <QuantinuumIdent />
+              </div>
             </a>
-            {props.navProductName !== '' ? <div className="text-muted-foreground text-xs font-medium flex items-center gap-1.5">
-              <div className='mx-0.5 text-muted-foreground/50'>|</div><div>{props.navProductName}</div>
-            </div> : null}
+            {props.navProductName !== "" ? (
+              <div className='text-muted-foreground text-xs font-medium flex items-center gap-1.5'>
+                <div className='mx-0.5 text-muted-foreground/50'>|</div>
+                <div>{props.navProductName}</div>
+              </div>
+            ) : null}
           </div>
-          <Link href="/" className="ml-4 mr-4 flex items-center space-x-2">
-            <span className="hidden font-bold">Quantinuum</span>
+          <Link href='/' className='ml-4 mr-4 flex items-center space-x-2'>
+            <span className='hidden font-bold'>Quantinuum</span>
           </Link>
-
         </div>
-        <div className="flex items-center gap-5">
-
-        <Navigation activePath={props.activePath} linkComponent={Link} navTextLinks={props.navTextLinks} />
-          <div className="flex items-center gap-2">
-            {props.navIconLinks.map(link => {
-                return <Link href={link.href} target='_blank' key={link.title}>
-               <img src={link.iconImageURL} className='dark:invert flex-shrink-0 min-w-6 max-w-6 min-h-6 max-h-6 hover:opacity-70 transition'></img>
-             </Link>
+        <div className='flex items-center gap-5'>
+          <Navigation
+            activePath={props.activePath}
+            linkComponent={Link}
+            navTextLinks={props.navTextLinks}
+          />
+          <div className='flex items-center gap-2'>
+            {props.navIconLinks.map((link) => {
+              return (
+                <Link href={link.href} target='_blank' key={link.title}>
+                  <img
+                    src={link.iconImageURL}
+                    className='dark:invert flex-shrink-0 min-w-6 max-w-6 min-h-6 max-h-6 hover:opacity-70 transition'
+                  ></img>
+                </Link>
+              );
             })}
           </div>
-
-          {props.enableModeSelector ?  <>     <div className='w-px h-6 bg-muted-foreground/50'></div><ModeSelector /> </>: null}
+
+          {props.enableModeSelector ? (
+            <>
+              {" "}
+              <div className='w-px h-6 bg-muted-foreground/50'></div>
+              <ModeSelector />{" "}
+            </>
+          ) : null}
         </div>
       </div>
     </div>
-  )
-}
+  );
+};

src/custom/docs/components/triplecard/Card.tsx

@@ -1,6 +1,6 @@
-import { LucideIcon } from 'lucide-react'
-import React from 'react'
-import { cn } from 'src'
+import { LucideIcon } from "lucide-react";
+import React from "react";
+import { cn } from "src";
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -9,31 +9,31 @@ const CardTitle = React.forwardRef<
   return (
     <p
       className={cn(
-        'mb-1 mt-4 text-[1.45rem] font-semibold tracking-tight',
+        "mb-1 mt-4 text-[1.45rem] font-semibold tracking-tight",
         className
       )}
       ref={ref}
     >
       {props.children}
     </p>
-  )
-})
-CardTitle.displayName = 'CardTitle'
+  );
+});
+CardTitle.displayName = "CardTitle";
 
 const CardSubtitle = React.forwardRef<
   HTMLParagraphElement,
   React.InputHTMLAttributes<HTMLParagraphElement>
 >(({ className, type, ...props }, ref) => {
   return (
     <p
-      className={cn('text-muted-foreground mb-6 mt-4 text-sm', className)}
+      className={cn("text-muted-foreground mb-6 mt-4 text-sm", className)}
       ref={ref}
     >
       {props.children}
     </p>
-  )
-})
-CardSubtitle.displayName = 'CardSubtitle'
+  );
+});
+CardSubtitle.displayName = "CardSubtitle";
 
 const Card = React.forwardRef<
   HTMLParagraphElement,
@@ -42,30 +42,30 @@ 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-card",
         className
       )}
       ref={ref}
     >
       <div> {props.children}</div>
     </div>
-  )
-})
-Card.displayName = 'Card'
+  );
+});
+Card.displayName = "Card";
 
 const IconBar = React.forwardRef<
   HTMLParagraphElement,
   React.InputHTMLAttributes<HTMLParagraphElement>
 >(({ className, type, ...props }, ref) => {
   return (
     <div
-      className={cn('mb-4 flex items-center justify-between', className)}
+      className={cn("mb-4 flex items-center justify-between", className)}
       ref={ref}
     >
       {props.children}
     </div>
-  )
-})
-IconBar.displayName = 'IconBar'
+  );
+});
+IconBar.displayName = "IconBar";
 
-export { Card, CardTitle, CardSubtitle }
+export { Card, CardTitle, CardSubtitle };