fix: add design token for navbar

Author: apsinghdev

apps/web/src/components/landing-sections/navbar.tsx

@@ -46,7 +46,7 @@ const Navbar = () => {
   return (
     <motion.nav
       initial={{ opacity: 0 }}
-      animate={showNavbar ? { opacity: 1 } : { opacity: 0, display: 'none' }}
+      animate={showNavbar ? { opacity: 1 } : { opacity: 0, display: "none" }}
       transition={{ duration: 0.3 }}
       className={cn(
         " z-40  flex items-center justify-between px-4 py-3  bg-neutral-900/5 backdrop-blur-xl  border-white/10",
@@ -76,9 +76,7 @@ const Navbar = () => {
           <span>Opensox AI</span>
         </div>
       </div>
-      <div
-        className="hidden min-[1115px]:flex items-center gap-5 max-[1270px]:gap-4 max-[1173px]:gap-3 tracking-tight text-lg max-[1270px]:text-base max-[1173px]:text-sm font-light max-[1173px]:font-normal text-[#d1d1d1]"
-      >
+      <div className="hidden min-[1115px]:flex items-center gap-5 max-[1270px]:gap-4 max-[1173px]:gap-3 tracking-tight text-lg max-[1270px]:text-base max-[1173px]:text-sm font-light max-[1173px]:font-normal text-[#d1d1d1]">
         {links.map((link, index) => {
           const isActive = pathname === link.href;
           return (
@@ -100,7 +98,7 @@ const Navbar = () => {
           href="https://github.com/apsinghdev/opensox"
           target="_blank"
           rel="noopener noreferrer"
-          className="hidden min-[1115px]:flex items-center gap-2 px-4 py-2.5 bg-[#0d1117] hover:bg-[#161b22] transition-colors rounded-lg border border-[#30363d] text-white"
+          className="hidden min-[1115px]:flex items-center gap-2 px-4 py-2.5 bg-github-bg hover:bg-github-hover transition-colors rounded-lg border border-github-border text-white"
         >
           <Github className="w-5 h-5" />
           <span className="text-sm font-medium">Contribute</span>
@@ -134,7 +132,7 @@ const Navbar = () => {
             target="_blank"
             rel="noopener noreferrer"
             onClick={() => setIsOpen(false)}
-            className="flex items-center gap-2 px-4 py-2 bg-[#0d1117] hover:bg-[#161b22] rounded-lg border border-[#30363d] text-white transition-colors"
+            className="flex items-center gap-2 px-4 py-2 bg-github-bg hover:bg-github-hover rounded-lg border border-github-border text-white transition-colors"
           >
             <Github className="w-5 h-5" />
             <span className="text-sm font-medium">Contribute</span>

apps/web/tailwind.config.ts

@@ -72,6 +72,13 @@ const config: Config = {
         warning: colors.status.warning,
         info: colors.status.info,
 
+        // External brand colors
+        github: {
+          bg: colors.external.github.bg,
+          hover: colors.external.github.hover,
+          border: colors.external.github.border,
+        },
+
         // Legacy ox-* colors (for gradual migration) - will be deprecated
         "ox-purple": colors.brand.purple.DEFAULT,
         "ox-purple-2": colors.brand.purple.dark,