refactor: update ui theme

hivemq · Feb 6, 2025 · f28303b · f28303b
1 parent e0be33a
commit f28303b
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 21 deletions.
diff --git a/src/modules/Header/HeaderDivider.tsx b/src/modules/Header/HeaderDivider.tsx
@@ -24,7 +24,7 @@ export function HeaderDivider({ ...props }: HeaderDividerProps) {
       orientation="vertical"
       height="auto"
       borderLeft="2px solid"
-      borderColor="surface.400"
+      borderColor="neutrals.700"
       margin={4}
       {...props}
     />

diff --git a/src/modules/Header/HeaderLogo.tsx b/src/modules/Header/HeaderLogo.tsx
@@ -48,15 +48,15 @@ export const HeaderLogo = forwardRef<HeaderLogoProps, 'button'>(
         pl={2}
         pr={4}
         _hover={{
-          backgroundColor: 'surface.800',
+          backgroundColor: 'neutrals.800',
         }}
         as={as}
         ref={ref}
         {...props}
       >
         <Image src={src} alt={alt} />
         {showHiveMQText && (
-          <Text as="span" color="white" fontSize="1.2rem">
+          <Text as="span" color="white" fontWeight={700} fontSize="1.2rem">
             HiveMQ
           </Text>
         )}

diff --git a/src/modules/Header/HeaderMenuButton.tsx b/src/modules/Header/HeaderMenuButton.tsx
@@ -37,17 +37,17 @@ export const HeaderMenuButton = forwardRef<HeaderMenuButtonProps, 'button'>((pro
   return (
     <MenuButton
       _hover={{
-        backgroundColor: 'surface.800',
+        backgroundColor: 'neutrals.800',
       }}
       _focusVisible={{
-        backgroundColor: 'surface.800',
+        backgroundColor: 'neutrals.800',
       }}
       lineHeight={1}
       sx={{
         width: containerSize,
         height: containerSize,
         border: `${BORDER_WIDTH_IN_PIXEL}px solid`,
-        borderColor: isOpen ? 'surface.400' : 'transparent',
+        borderColor: isOpen ? 'neutrals.400' : 'transparent',
         margin: isOpen ? `${OPEN_MARGIN_IN_PIXEL}px` : '0px',
         borderRadius: '2px',
       }}

diff --git a/src/modules/Header/HeaderMenuContentDetails.tsx b/src/modules/Header/HeaderMenuContentDetails.tsx
@@ -24,7 +24,7 @@ export function HeaderMenuContentDetails({ children, ...props }: HeaderMenuConte
       <Box backgroundColor="black" px={3} py={2} {...props}>
         {children}
       </Box>
-      <MenuDivider borderColor="surface.500" />
+      <MenuDivider borderColor="neutrals.600" />
     </>
   )
 }
diff --git a/src/modules/Header/HeaderMenuContentItem.tsx b/src/modules/Header/HeaderMenuContentItem.tsx
@@ -24,10 +24,10 @@ export const HeaderMenuContentItem = forwardRef<HeaderMenuContentItemProps, 'but
       <MenuItem
         backgroundColor="black"
         _hover={{
-          backgroundColor: 'surface.800',
+          backgroundColor: 'neutrals.800',
         }}
         _focusVisible={{
-          backgroundColor: 'surface.800',
+          backgroundColor: 'neutrals.800',
         }}
         ref={ref}
         {...props}

diff --git a/src/modules/Header/HeaderNavigationItem.tsx b/src/modules/Header/HeaderNavigationItem.tsx
@@ -33,12 +33,12 @@ export function HeaderNavigationItem({ children, isActive, ...props }: HeaderNav
       borderBottom="4px solid"
       px={4}
       pt="4px"
-      borderColor={isActive ? 'primary.500' : 'transparent'}
+      borderColor={isActive ? 'border.border-brand' : 'transparent'}
       _hover={{
-        backgroundColor: 'surface.800',
+        backgroundColor: 'neutrals.800',
       }}
       _focusVisible={{
-        backgroundColor: 'surface.800',
+        backgroundColor: 'neutrals.800',
       }}
       fontSize="1.1rem"
       fontWeight={500}

diff --git a/src/modules/Header/HeaderSidebarToggle.tsx b/src/modules/Header/HeaderSidebarToggle.tsx
@@ -29,10 +29,10 @@ export function HeaderSidebarToggle({ onClick, ...props }: HeaderSidebarTogglePr
   return (
     <Box
       _hover={{
-        backgroundColor: 'surface.800',
+        backgroundColor: 'neutrals.800',
       }}
       _focusVisible={{
-        backgroundColor: 'surface.800',
+        backgroundColor: 'neutrals.800',
       }}
       type="button"
       as="button"

diff --git a/src/modules/Sidebar/SidebarGroup.tsx b/src/modules/Sidebar/SidebarGroup.tsx
@@ -31,7 +31,7 @@ export function SidebarGroup({ Title, children, ...props }: SidebarGroupProps) {
         mb={1}
         fontWeight={700}
         textTransform="uppercase"
-        color="surface.600"
+        color="text.text-subtle"
         fontSize="sm"
       >
         {Title}

diff --git a/src/modules/Sidebar/SidebarListItem.tsx b/src/modules/Sidebar/SidebarListItem.tsx
@@ -31,16 +31,17 @@ export const SidebarListItem = forwardRef<SidebarListItemProps, 'button'>(
           as="button"
           type="button"
           borderLeft="6px solid"
-          borderColor={isActive ? 'primary.400' : 'transparent'}
+          borderColor={isActive ? 'border.border-brand' : 'transparent'}
+          fontWeight={isActive ? 'border.border-brand' : 'transparent'}
           textAlign="left"
-          backgroundColor={isActive ? 'surface.100' : 'transparent'}
+          backgroundColor={isActive ? 'background.bg-active-hover' : 'transparent'}
           p={2}
           pl={4}
           _hover={{
-            backgroundColor: 'surface.200',
+            backgroundColor: 'background.bg-active-hover',
           }}
           _focusVisible={{
-            backgroundColor: 'surface.200',
+            backgroundColor: 'background.bg-active-hover',
           }}
           display="block"
           w="100%"

diff --git a/src/modules/Sidebar/SidebarRoot.tsx b/src/modules/Sidebar/SidebarRoot.tsx
@@ -31,9 +31,9 @@ export function SidebarRoot({ children, ...props }: React.PropsWithChildren<Side
         width="100%"
         top="0"
         left="0"
-        backgroundColor="white"
+        backgroundColor="background.bg-base"
         borderRight="1px solid"
-        borderColor="surface.200"
+        borderColor="border.border-subtle"
         gridArea="sidebar"
         display="flex"
         flexDirection="column"