@connectif/ui-components 4.0.3 → 4.0.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.0.4] - 2026-01-21
+
+### Changed
+
+- Added support for custom theme to `NavbarButton`
+
 ## [4.0.3] - 2026-01-13
 
 ### Changed

package/dist/components/navbar/NavbarButton.d.ts

@@ -23,7 +23,7 @@ export type NavbarButtonProps = {
      */
     sx?: SxProps;
     /**
-     * Badge component to be positionanted at the bottom-right corner
+     * Badge component to be positioned at the bottom-right corner
      */
     badgeIconProps?: IconProps;
     /**

package/dist/index.js

@@ -25636,6 +25636,7 @@ var NavbarButton = React80.forwardRef(
     highlighted = false,
     ...rest
   }, ref) {
+    const { palette: palette2 } = useCustomTheme();
     const getButtonContent = (element) => {
       if (!highlighted) {
         return element;
@@ -25644,7 +25645,7 @@ var NavbarButton = React80.forwardRef(
         Box6,
         {
           sx: {
-            backgroundImage: `linear-gradient(to left, ${cornflowerBlue}, ${electricLavender})`,
+            backgroundImage: `linear-gradient(to left, ${palette2.cornflowerBlue}, ${palette2.electricLavender})`,
             padding: "2px",
             borderRadius: "100%",
             position: "relative"
@@ -25657,9 +25658,9 @@ var NavbarButton = React80.forwardRef(
                   position: "absolute",
                   width: "8px",
                   height: "8px",
-                  background: primary600,
+                  background: palette2.primary.main,
                   borderRadius: "100%",
-                  border: `4px solid ${white}`,
+                  border: `4px solid ${palette2.common.white}`,
                   right: "-2px",
                   top: "1px",
                   boxSizing: "content-box"
@@ -25670,7 +25671,7 @@ var NavbarButton = React80.forwardRef(
               Box6,
               {
                 sx: {
-                  backgroundColor: white,
+                  backgroundColor: palette2.common.white,
                   borderRadius: "100%",
                   padding: "2px"
                 },
@@ -25692,8 +25693,8 @@ var NavbarButton = React80.forwardRef(
           width: "100%",
           height: "44px",
           "&:hover > .NavbarButton-icon": {
-            backgroundColor: grey100,
-            color: primaryMain
+            backgroundColor: palette2.grey[100],
+            color: palette2.primary.main
           },
           ...sx
         },
@@ -25717,10 +25718,10 @@ var NavbarButton = React80.forwardRef(
                 sx: {
                   boxSizing: "initial",
                   padding: "8px",
-                  color: isActive ? primaryMain : grey700,
+                  color: isActive ? palette2.primary.main : palette2.grey[700],
                   borderRadius: "50%",
                   overflow: "visible",
-                  backgroundColor: isActive ? primaryOpacity32 : "transparent"
+                  backgroundColor: isActive ? palette2.primary.opacity32 : "transparent"
                 }
               }
             )
@@ -25731,7 +25732,7 @@ var NavbarButton = React80.forwardRef(
               ...badgeIconProps,
               className: `NavbarButton-badge ${badgeIconProps.className}`,
               sx: {
-                color: primaryMain,
+                color: palette2.primary.main,
                 position: "absolute",
                 bottom: 0,
                 right: "8px",