@rovula/ui 0.1.31 → 0.1.33

package/dist/src/theme/global.css

@@ -2993,9 +2993,9 @@
   --loading-track-color: var(--transparent-grey-32);
   /* Navbar */
   --navbar-height: 58px;
-  --navbar-bg-color: var(--primary-default);
-  --navbar-text-color: var(--primary-foreground);
-  --navbar-border-color: var(--primary-foreground);
+  --navbar-bg-color: var(--bg-bg1);
+  --navbar-text-color: var(--text-contrast-max);
+  --navbar-border-color: var(--bg-stroke1);
   --navbar-gap: 16px;
   --navbar-shadow-scrolled: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   /* Footer */
@@ -5358,10 +5358,6 @@ input[type=number] {
   border-style: solid;
 }
 
-.border-none {
-  border-style: none;
-}
-
 .\!border-action-button-solid-active-hover {
   --tw-border-opacity: 1 !important;
   border-color: color-mix(in srgb, var(--action-button-solid-active-hover-border) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
@@ -5686,8 +5682,8 @@ input[type=number] {
   border-color: rgb(255 255 255 / 0.2);
 }
 
-.border-b-\[rgb\(var\(--navbar-border-color\)\)\] {
-  border-bottom-color: rgb(var(--navbar-border-color));
+.border-b-\[var\(--navbar-border-color\)\] {
+  border-bottom-color: var(--navbar-border-color);
 }
 
 .border-l-input-default-stroke {
@@ -5794,10 +5790,6 @@ input[type=number] {
   background-color: rgb(var(--base-bg-2));
 }
 
-.bg-\[rgb\(var\(--navbar-bg-color\)\)\] {
-  background-color: rgb(var(--navbar-bg-color));
-}
-
 .bg-\[var\(--badge-default-bg\)\] {
   background-color: var(--badge-default-bg);
 }
@@ -5866,6 +5858,10 @@ input[type=number] {
   background-color: var(--footer-bg-color);
 }
 
+.bg-\[var\(--navbar-bg-color\)\] {
+  background-color: var(--navbar-bg-color);
+}
+
 .bg-action-button-icon-active {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--action-button-icon-active-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -8346,10 +8342,6 @@ input[type=number] {
   color: color-mix(in srgb, var(--state-primary-text-solid) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
 }
 
-.text-\[rgb\(var\(--navbar-text-color\)\)\] {
-  color: rgb(var(--navbar-text-color));
-}
-
 .text-\[var\(--badge-default-text\)\] {
   color: var(--badge-default-text);
 }
@@ -8410,6 +8402,10 @@ input[type=number] {
   color: var(--loading-track-color);
 }
 
+.text-\[var\(--navbar-text-color\)\] {
+  color: var(--navbar-text-color);
+}
+
 .text-action-button-icon-active {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--action-button-icon-active-text) calc(100% * var(--tw-text-opacity, 1)), transparent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Navbar/Navbar.tsx

@@ -57,16 +57,17 @@ const Navbar: FC<NavbarProps> = ({
   return (
     <header
       className={cn(
-        "relative w-full px-4 py-6 h-[var(--navbar-height)] box-border overflow-hidden typography-subtitle2 border-solid border-b-2 text-[rgb(var(--navbar-text-color))] border-b-[rgb(var(--navbar-border-color))] transition-shadow duration-200",
+        "relative w-full px-4 py-6 h-[var(--navbar-height)] box-border overflow-hidden typography-subtitle2 border-solid border-b-2 border-b-[var(--navbar-border-color)] transition-shadow duration-200",
+        isTransparent ? "text-inherit" : "text-[var(--navbar-text-color)]",
         { position },
         scrollShadow && isScrolled && "shadow-[var(--navbar-shadow-scrolled)]",
-        className
+        className,
       )}
     >
       {/* Default bg (z:-10) + overlay for className override - hidden when transparent */}
       {!isTransparent && (
         <div
-          className="absolute inset-0 -z-10 bg-[rgb(var(--navbar-bg-color))]"
+          className="absolute inset-0 -z-10 bg-[var(--navbar-bg-color)]"
           aria-hidden
         />
       )}
@@ -80,7 +81,7 @@ const Navbar: FC<NavbarProps> = ({
           {
             container,
           },
-          containerClassName
+          containerClassName,
         )}
       >
         {children || (
@@ -88,7 +89,7 @@ const Navbar: FC<NavbarProps> = ({
             <nav
               className={cn(
                 "flex w-1/2 gap-x-[var(--navbar-gap)] text-xl",
-                leftNavClassName
+                leftNavClassName,
               )}
             >
               {leftNav}
@@ -97,7 +98,7 @@ const Navbar: FC<NavbarProps> = ({
             <div
               className={cn(
                 "flex flex-shrink-0 flex-wrap justify-center",
-                centerClassName
+                centerClassName,
               )}
             >
               {center}
@@ -106,7 +107,7 @@ const Navbar: FC<NavbarProps> = ({
             <nav
               className={cn(
                 "flex w-1/2 justify-end gap-x-[var(--navbar-gap)] text-xl",
-                rightNavClassName
+                rightNavClassName,
               )}
             >
               {rightNav}

package/src/components/Popover/Popover.tsx

@@ -19,8 +19,8 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-72 rounded-md border bg-bg-bg1 border-none overflow-hidden p-0 text-common-black 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",
-        className
+        "z-50 min-w-72 rounded-md border bg-modal-surface border-bg-stroke3 overflow-hidden p-0 text-text-g-contrast-medium 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",
+        className,
       )}
       {...props}
     />

package/src/theme/tokens/components/navbar.css

@@ -1,9 +1,9 @@
 :root {
   /* Navbar */
   --navbar-height: 58px;
-  --navbar-bg-color: var(--primary-default);
-  --navbar-text-color: var(--primary-foreground);
-  --navbar-border-color: var(--primary-foreground);
+  --navbar-bg-color: var(--bg-bg1);
+  --navbar-text-color: var(--text-contrast-max);
+  --navbar-border-color: var(--bg-stroke1);
   --navbar-gap: 16px;
   --navbar-shadow-scrolled: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }