added colors to side bar

src/components/application/app-navigation/base-components/nav-account-card.tsx

@@ -145,7 +145,7 @@ export const NavAccountCard = ({
     }
 
     return (
-        <div ref={triggerRef} className="relative flex items-center gap-3 rounded-xl p-3 ring-1 ring-secondary ring-inset">
+        <div ref={triggerRef} className="relative flex items-center gap-3 rounded-xl p-3">
             <AvatarLabelGroup
                 size="md"
                 src={selectedAccount.avatar}

src/components/application/app-navigation/base-components/nav-item.tsx

@@ -6,8 +6,8 @@ import { Badge } from "@/components/base/badges/badges";
 import { cx, sortCx } from "@/utils/cx";
 
 const styles = sortCx({
-    root: "group relative flex w-full cursor-pointer items-center rounded-md bg-primary outline-focus-ring transition duration-100 ease-linear select-none hover:bg-primary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
-    rootSelected: "bg-active hover:bg-secondary_hover border-l-2 border-l-brand-600 text-brand-secondary",
+    root: "group relative flex w-full cursor-pointer items-center rounded-md outline-focus-ring transition duration-100 ease-linear select-none focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
+    rootSelected: "bg-sidebar-active hover:bg-sidebar-active border-l-2 border-l-brand-600",
 });
 
 interface NavItemBaseProps {
@@ -48,9 +48,9 @@ export const NavItemBase = ({ current, type, badge, href, icon: Icon, children,
     const labelElement = (
         <span
             className={cx(
-                "flex-1 text-md font-semibold text-secondary transition-inherit-all group-hover:text-secondary_hover",
+                "flex-1 text-md font-semibold text-white transition-inherit-all",
                 truncate && "truncate",
-                current && "text-secondary_hover",
+                current ? "text-sidebar-active" : "group-hover:text-sidebar-hover",
             )}
         >
             {children}
@@ -62,7 +62,9 @@ export const NavItemBase = ({ current, type, badge, href, icon: Icon, children,
 
     if (type === "collapsible") {
         return (
-            <summary className={cx("px-3 py-2", styles.root, current && styles.rootSelected)} onClick={onClick}>
+            <summary 
+                className={cx("px-3 py-2 bg-sidebar", !current && "hover:bg-sidebar-hover", styles.root, current && styles.rootSelected)} 
+                onClick={onClick}>
                 {iconElement}
 
                 {labelElement}
@@ -80,7 +82,7 @@ export const NavItemBase = ({ current, type, badge, href, icon: Icon, children,
                 href={href!}
                 target={isExternal ? "_blank" : "_self"}
                 rel="noopener noreferrer"
-                className={cx("py-2 pr-3 pl-10", styles.root, current && styles.rootSelected)}
+                className={cx("py-2 pr-3 pl-10 bg-sidebar", !current && "hover:bg-sidebar-hover", styles.root, current && styles.rootSelected)}
                 onClick={onClick}
                 aria-current={current ? "page" : undefined}
             >
@@ -96,7 +98,7 @@ export const NavItemBase = ({ current, type, badge, href, icon: Icon, children,
             href={href!}
             target={isExternal ? "_blank" : "_self"}
             rel="noopener noreferrer"
-            className={cx("px-3 py-2", styles.root, current && styles.rootSelected)}
+            className={cx("px-3 py-2 bg-sidebar", !current && "hover:bg-sidebar-hover", styles.root, current && styles.rootSelected)}
             onClick={onClick}
             aria-current={current ? "page" : undefined}
         >

src/components/base/avatar/avatar-label-group.tsx

@@ -20,8 +20,8 @@ export const AvatarLabelGroup = ({ title, subtitle, className, ...props }: Avata
         <figure className={cx("group flex min-w-0 flex-1 items-center", styles[props.size].root, className)}>
             <Avatar {...props} />
             <figcaption className="min-w-0 flex-1">
-                <p className={cx("text-primary", styles[props.size].title)}>{title}</p>
-                <p className={cx("truncate text-tertiary", styles[props.size].subtitle)}>{subtitle}</p>
+                <p className={cx("text-white", styles[props.size].title)}>{title}</p>
+                <p className={cx("truncate text-white opacity-70", styles[props.size].subtitle)}>{subtitle}</p>
             </figcaption>
         </figure>
     );

src/components/layout/sidebar.tsx

@@ -153,7 +153,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
         <aside
             style={{ "--width": `${width}px` } as React.CSSProperties}
             className={cx(
-                "flex h-full w-full max-w-full flex-col justify-between overflow-auto border-secondary bg-primary pt-4 shadow-xs transition-all duration-200 ease-linear md:border-r lg:w-(--width) lg:rounded-xl lg:border lg:pt-5",
+                "flex h-full w-full max-w-full flex-col justify-between overflow-auto bg-sidebar pt-4 shadow-xs transition-all duration-200 ease-linear lg:w-(--width) lg:pt-5",
             )}
         >
             {/* Logo + collapse toggle */}
@@ -162,8 +162,8 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
                     <img src="/favicon-32.png" alt="Helix Engage" className="size-8 rounded-lg shrink-0" />
                 ) : (
                     <div className="flex flex-col gap-1">
-                        <span className="text-md font-bold text-primary">Helix Engage</span>
-                        <span className="text-xs text-tertiary">Global Hospital &middot; {getRoleSubtitle(user.role)}</span>
+                        <span className="text-md font-bold text-white">Helix Engage</span>
+                        <span className="text-xs text-white opacity-70">Global Hospital &middot; {getRoleSubtitle(user.role)}</span>
                     </div>
                 )}
                 <button
@@ -180,7 +180,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
                 {navSections.map((group) => (
                     <li key={group.label}>
                         {!collapsed && (
-                            <div className="px-5 pb-1">
+                            <div className="px-5 pb-1 bg-sidebar">
                                 <p className="text-xs font-bold text-quaternary uppercase">{group.label}</p>
                             </div>
                         )}
@@ -191,11 +191,19 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
                                         <Link
                                             to={item.href ?? '/'}
                                             title={item.label}
+                                            style={
+                                                item.href !== activeUrl
+                                                    ? {
+                                                          "--hover-bg": "var(--color-sidebar-nav-item-hover-bg)",
+                                                          "--hover-text": "var(--color-sidebar-nav-item-hover-text)",
+                                                      } as React.CSSProperties
+                                                    : undefined
+                                            }
                                             className={cx(
                                                 "flex size-10 items-center justify-center rounded-lg transition duration-100 ease-linear",
                                                 item.href === activeUrl
                                                     ? "bg-active text-fg-brand-primary"
-                                                    : "text-fg-quaternary hover:bg-primary_hover hover:text-fg-secondary",
+                                                    : "text-fg-quaternary hover:bg-(--hover-bg) hover:text-(--hover-text)",
                                             )}
                                         >
                                             {item.icon && <item.icon className="size-5" />}
@@ -224,7 +232,8 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
                     <button
                         onClick={handleSignOut}
                         title={`${user.name}\nSign out`}
-                        className="rounded-lg p-1 hover:bg-primary_hover transition duration-100 ease-linear"
+                        style={{ "--hover-bg": "var(--color-sidebar-nav-item-hover-bg)" } as React.CSSProperties}
+                        className="rounded-lg p-1 hover:bg-(--hover-bg) transition duration-100 ease-linear"
                     >
                         <Avatar size="sm" initials={user.initials} status="online" />
                     </button>
@@ -249,9 +258,9 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
     return (
         <>
             <MobileNavigationHeader>{content}</MobileNavigationHeader>
-            <div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:py-1 lg:pl-1">{content}</div>
+            <div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex">{content}</div>
             <div
-                style={{ paddingLeft: width + 4 }}
+                style={{ paddingLeft: width }}
                 className="invisible hidden lg:sticky lg:top-0 lg:bottom-0 lg:left-0 lg:block transition-all duration-200 ease-linear"
             />
 

src/styles/globals.css

@@ -29,6 +29,26 @@
     transition-timing-function: inherit;
 }
 
+@utility bg-sidebar {
+    background-color: var(--color-sidebar-bg);
+}
+
+@utility bg-sidebar-active {
+    background-color: var(--color-sidebar-nav-item-active-bg);
+}
+
+@utility bg-sidebar-hover {
+    background-color: var(--color-sidebar-nav-item-hover-bg);
+}
+
+@utility text-sidebar-active {
+    color: var(--color-sidebar-nav-item-active-text);
+}
+
+@utility text-sidebar-hover {
+    color: var(--color-sidebar-nav-item-hover-text);
+}
+
 /* FontAwesome duotone — icons inherit color from parent via currentColor.
    Secondary layer opacity controls the duotone effect. */
 :root {

src/styles/theme.css

@@ -761,6 +761,13 @@
     --color-bg-brand-section: var(--color-brand-600);
     --color-bg-brand-section_subtle: var(--color-brand-500);
 
+    /* SIDEBAR-SPECIFIC COLORS (Light Mode Only) */
+    --color-sidebar-bg: rgb(28, 33, 44);
+    --color-sidebar-nav-item-hover-bg: rgb(42, 48, 60);
+    --color-sidebar-nav-item-hover-text: rgb(73, 160, 225);
+    --color-sidebar-nav-item-active-bg: rgb(42, 48, 60);
+    --color-sidebar-nav-item-active-text: rgb(73, 160, 225);
+
     /* COMPONENT COLORS */
     --color-app-store-badge-border: rgb(166 166 166);
     --color-avatar-bg: var(--color-gray-100);