refactor / update ui theme

.gitignore

@@ -133,3 +133,6 @@ dist
 .idea
 
 storybook-static
+
+# test results
+test-results

.npmrc

@@ -1,2 +1 @@
-//npm.pkg.github.com/:_authToken=${GH_NPM_TOKEN}
 @hivemq:registry=https://npm.pkg.github.com

package.json

@@ -1,14 +1,16 @@
 {
   "name": "@hivemq/ui-library",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
   "publishConfig": {
     "types": "./dist/index.d.ts",
     "module": "./dist/index.es.js"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "engines": {
     "node": "20",
     "pnpm": "9"

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}
     />

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>
         )}

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',
       }}

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" />
     </>
   )
 }

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}

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}

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"

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}

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%"

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"