feat: new light theme / inset theme for light and black theme (#1288)

Author: hiderr

apps/gitness/src/components-v2/breadcrumbs/breadcrumbs.tsx

@@ -16,7 +16,7 @@ function Breadcrumbs() {
         {!isMFE ? (
           <>
             <Sidebar.Trigger className="text-topbar-foreground-2 hover:text-topbar-foreground-1 hover:bg-topbar-background-1 -ml-1" />
-            <Separator orientation="vertical" className="bg-topbar-background-1 ml-1 mr-2 h-4" />
+            <Separator orientation="vertical" className="bg-sidebar-background-1 ml-1 mr-2 h-4" />
           </>
         ) : null}
         <Breadcrumb.Root className="select-none">
@@ -29,13 +29,13 @@ function Breadcrumbs() {
 
               return (
                 <Breadcrumb.Item key={match.pathname}>
-                  {!isFirst ? <Breadcrumb.Separator className="text-topbar-foreground-3" /> : null}
+                  {!isFirst && <Breadcrumb.Separator className="text-foreground-9" />}
                   {isLast || !asLink ? (
-                    <Breadcrumb.Page className={isLast ? 'text-topbar-foreground-4' : 'text-topbar-foreground-3'}>
+                    <Breadcrumb.Page className={isLast ? 'text-foreground-3' : 'text-foreground-1'}>
                       {breadcrumbContent}
                     </Breadcrumb.Page>
                   ) : (
-                    <Breadcrumb.Link className="text-topbar-foreground-3" asChild>
+                    <Breadcrumb.Link className="text-foreground-4 hover:text-foreground-2" asChild>
                       <Link to={match.pathname}>{breadcrumbContent}</Link>
                     </Breadcrumb.Link>
                   )}

packages/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@harnessio/ui",
   "description": "Harness Canary UI component library",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",

packages/ui/src/components/alert-dialog.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import { Button, Icon } from '@/components'
 import { buttonVariants } from '@/components/button'
-import { usePortal } from '@/context'
+import { usePortal, useTheme } from '@/context'
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
 import { cn } from '@utils/cn'
 
@@ -19,17 +19,22 @@ interface AlertDialogOverlayProps extends React.ComponentPropsWithoutRef<typeof
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
   AlertDialogOverlayProps
->(({ className, onClick, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-background-7/50 fixed inset-0 z-50',
-      className
-    )}
-    {...props}
-    ref={ref}
-    onClick={onClick}
-  />
-))
+>(({ className, onClick, ...props }, ref) => {
+  const { isLightTheme } = useTheme()
+
+  return (
+    <AlertDialogPrimitive.Overlay
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-background-7/80 fixed inset-0 z-50',
+        { 'bg-background-10/60': isLightTheme },
+        className
+      )}
+      {...props}
+      ref={ref}
+      onClick={onClick}
+    />
+  )
+})
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 
 interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {

packages/ui/src/components/app-sidebar/app-sidebar.tsx

@@ -120,7 +120,7 @@ export const AppSidebar = ({
                   <Sidebar.MenuButton asChild onClick={handleMoreMenu}>
                     <Sidebar.MenuItemText
                       text={t('component:navbar.more', 'More')}
-                      icon={<Icon name="ellipsis" size={12} />}
+                      icon={<Icon name="ellipsis" size={14} />}
                     />
                   </Sidebar.MenuButton>
                 </Sidebar.MenuItem>
@@ -158,7 +158,7 @@ export const AppSidebar = ({
                     <Sidebar.MenuButton asChild onClick={() => navigate('/admin/default-settings')}>
                       <Sidebar.MenuItemText
                         text={t('component:navbar.user-management', 'User Management')}
-                        icon={<Icon name="account" size={12} />}
+                        icon={<Icon name="account" size={14} />}
                       />
                     </Sidebar.MenuButton>
                   </Sidebar.MenuItem>
@@ -167,7 +167,7 @@ export const AppSidebar = ({
                   <Sidebar.MenuButton asChild onClick={handleSettingsMenu}>
                     <Sidebar.MenuItemText
                       text={t('component:navbar.settings', 'Settings')}
-                      icon={<Icon name="settings-1" size={12} />}
+                      icon={<Icon name="settings-1" size={14} />}
                     />
                   </Sidebar.MenuButton>
                 </Sidebar.MenuItem>

packages/ui/src/components/app-sidebar/sidebar-item.tsx

@@ -1,5 +1,6 @@
 import { DropdownMenu, Icon, IconProps, Sidebar, Text } from '@/components'
-import { useRouterContext } from '@/context'
+import { useRouterContext, useTheme } from '@/context'
+import { cn } from '@utils/cn'
 import { TFunction } from 'i18next'
 
 interface NavbarItemType {
@@ -29,6 +30,7 @@ export const SidebarItem = ({
   t
 }: NavbarItemProps) => {
   const { NavLink } = useRouterContext()
+  const { isInset } = useTheme()
 
   const iconName = item.iconName && (item.iconName.replace('-gradient', '') as IconProps['name'])
 
@@ -90,7 +92,7 @@ export const SidebarItem = ({
           <Sidebar.MenuButton asChild isActive={isActive}>
             <Sidebar.MenuItemText
               text={item.title}
-              icon={iconName && <Icon name={iconName} size={12} />}
+              icon={iconName && <Icon name={iconName} size={14} />}
               active={isActive}
             />
           </Sidebar.MenuButton>
@@ -99,7 +101,10 @@ export const SidebarItem = ({
 
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>
-          <Sidebar.MenuAction className="right-0 text-sidebar-icon-3 hover:text-sidebar-icon-1" showOnHover>
+          <Sidebar.MenuAction
+            className={cn('text-sidebar-icon-3 hover:text-sidebar-icon-1', isInset ? 'right-[3px]' : 'right-0')}
+            showOnHover
+          >
             <span>
               <Icon name="menu-dots" size={12} />
             </span>

packages/ui/src/components/app-sidebar/sidebar-search-legacy.tsx

@@ -25,7 +25,7 @@ function SidebarSearchLegacy({ logo, t }: ProjectProps) {
 
   return (
     <div className="flex w-full flex-col place-items-start pb-3 pt-1.5">
-      <div className="flex h-[58px] items-center pl-1">{logo}</div>
+      <div className="mb-5 mt-3.5 flex items-center pl-2">{logo}</div>
       <SearchBox.Root
         width="full"
         placeholder={`${t('component:navbar.search', 'Search')}...`}

packages/ui/src/components/app-sidebar/sidebar-search/sidebar-search.tsx

@@ -49,7 +49,7 @@ export function SidebarSearch(props: SidebarSearchProps) {
           <Button
             variant="custom"
             size="icon"
-            className="bg-sidebar-background-9 pointer-events-none absolute right-1.5 top-1/2 h-5 -translate-y-1/2 select-none rounded-sm border border-sidebar-border-5 p-0 px-1.5 text-sidebar-foreground-3"
+            className="pointer-events-none absolute right-1.5 top-1/2 h-5 -translate-y-1/2 select-none rounded-sm border border-sidebar-border-5 bg-sidebar-background-9 p-0 px-1.5 text-sidebar-foreground-3"
           >
             <span className="size-full text-12">⌘K</span>
           </Button>

packages/ui/src/components/button-with-options.tsx

@@ -103,7 +103,7 @@ export const ButtonWithOptions = <T extends string>({
             buttonVariants({ theme, variant }),
             'relative h-[inherit] w-8 p-0 flex-shrink-0 rounded-l-none before:absolute before:left-0 before:h-[calc(100%-8px)] before:w-px',
             theme !== 'primary' && 'border-y border-r',
-            separatorThemes[theme || 'default']
+            separatorThemes[disabled ? 'disabled' : theme || 'default']
           )}
           disabled={disabled || loading}
         >

packages/ui/src/components/dialog.tsx

@@ -1,7 +1,7 @@
 import { Children, ComponentPropsWithoutRef, ElementRef, forwardRef, HTMLAttributes, isValidElement } from 'react'
 
 import { Button, Icon } from '@/components'
-import { usePortal } from '@/context'
+import { usePortal, useTheme } from '@/context'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { cn } from '@utils/cn'
 
@@ -16,17 +16,22 @@ interface DialogOverlayProps extends ComponentPropsWithoutRef<typeof DialogPrimi
 }
 
 const DialogOverlay = forwardRef<ElementRef<typeof DialogPrimitive.Overlay>, DialogOverlayProps>(
-  ({ className, onClick, ...props }, ref) => (
-    <DialogPrimitive.Overlay
-      ref={ref}
-      className={cn(
-        'fixed inset-0 z-50 bg-background-7/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-        className
-      )}
-      {...props}
-      onClick={onClick}
-    />
-  )
+  ({ className, onClick, ...props }, ref) => {
+    const { isLightTheme } = useTheme()
+
+    return (
+      <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+          'fixed inset-0 z-50 bg-background-7/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+          { 'bg-background-10/60': isLightTheme },
+          className
+        )}
+        {...props}
+        onClick={onClick}
+      />
+    )
+  }
 )
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 

packages/ui/src/components/language-selector/language-dialog.tsx

@@ -44,7 +44,7 @@ const LanguageDialog: FC<LanguageDialogProps> = ({
                 onChange(lang)
               }}
             >
-              <div className="flex items-center gap-2">
+              <div className="relative z-[1] flex items-center gap-2">
                 <div className="flex size-6 items-center justify-center rounded bg-background-12 text-12 uppercase text-foreground-3">
                   {lang.code}
                 </div>
@@ -57,10 +57,10 @@ const LanguageDialog: FC<LanguageDialogProps> = ({
                   {lang.name}
                 </span>
               </div>
-              {selectedLanguage === lang.code && <Icon className="text-icons-2" name="tick" size={12} />}
+              {selectedLanguage === lang.code && <Icon className="relative z-[1] text-icons-2" name="tick" size={12} />}
               <span
                 className={cn(
-                  'absolute -inset-x-2 -inset-y-1 rounded group-hover:bg-background-4',
+                  'absolute -inset-x-2 -inset-y-1 rounded -z-[1] group-hover:bg-background-4',
                   selectedLanguage === lang.code && 'bg-background-4'
                 )}
                 aria-hidden

packages/ui/src/components/more-submenu.tsx

@@ -1,6 +1,7 @@
 import { Icon, NavbarSkeleton, ScrollArea, Sheet, Spacer } from '@/components'
-import { useRouterContext } from '@/context'
+import { useRouterContext, useTheme } from '@/context'
 import { MenuGroupType } from '@components/app-sidebar/types'
+import { cn } from '@utils/cn'
 
 interface MoreSubmenuProps {
   showMoreMenu: boolean
@@ -10,10 +11,15 @@ interface MoreSubmenuProps {
 
 export function MoreSubmenu({ showMoreMenu, handleMoreMenu, items }: MoreSubmenuProps) {
   const { NavLink } = useRouterContext()
+  const { isInset } = useTheme()
+
   return (
     <Sheet.Root modal={false} open={showMoreMenu}>
       <Sheet.Content
-        className="inset-y-0 left-[220px] z-40 h-screen w-[328px] bg-transparent p-0"
+        className={cn(
+          'inset-y-0 z-40 h-screen w-[328px] bg-transparent p-0',
+          isInset ? 'border-l left-[228px]' : 'left-[220px]'
+        )}
         closeClassName="text-sidebar-icon-3 hover:text-sidebar-icon-1"
         side="left"
         onClick={handleMoreMenu}
@@ -23,7 +29,7 @@ export function MoreSubmenu({ showMoreMenu, handleMoreMenu, items }: MoreSubmenu
         <NavbarSkeleton.Root className="w-[328px]" isSubMenu>
           <NavbarSkeleton.Content className="overflow-hidden">
             <ScrollArea scrollThumbClassName="bg-sidebar-background-8">
-              <Spacer size={9} />
+              <Spacer size={10} />
               {items.map((group, group_idx) => (
                 <NavbarSkeleton.Group
                   key={group.groupId}

packages/ui/src/components/navbar-skeleton/group.tsx

@@ -23,7 +23,7 @@ export function Group({
   return (
     <div
       className={cn(
-        'flex w-full flex-col px-3',
+        'flex w-full flex-col px-2',
         { 'border-borders-5 border-t pt-2.5': topBorder },
         { 'border-sidebar-border-1': topBorder && isMainNav },
         isSubMenu ? 'pb-2.5 gap-y-0.5' : 'gap-1 pb-3',

packages/ui/src/components/navbar-skeleton/item.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, ReactElement } from 'react'
 
 import { Icon, Text } from '@/components'
+import { useTheme } from '@/context/theme'
 import { cn } from '@utils/cn'
 
 export interface ItemProps {
@@ -16,12 +17,14 @@ export interface ItemProps {
 
 export const Item = forwardRef<HTMLDivElement, ItemProps>(
   ({ icon, text, description, active, submenuItem = false, className, isMainNav, ...props }, ref) => {
+    const { isInset, isLightTheme } = useTheme()
+
     if (submenuItem) {
       return (
         <div
           ref={ref}
           className={cn(
-            'group relative grid cursor-pointer select-none grid-cols-[auto_1fr] items-center gap-3 pb-[0.6875rem] pt-[0.5625rem] py-2 px-3 rounded-md',
+            'group relative grid cursor-pointer select-none grid-cols-[auto_1fr] items-center gap-3 pb-[0.6875rem] pt-[0.5625rem] py-2.5 px-3 rounded-md',
             { 'gap-0': !icon },
             className
           )}
@@ -41,6 +44,7 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(
                 className={cn(
                   'sub-menu-icon-bg relative flex size-8 place-content-center place-items-center rounded border border-borders-1 bg-background-2',
                   { 'border-sidebar-border-3 bg-sidebar-background-7': isMainNav }
+                  // { 'border-sidebar-border-6 bg-sidebar-background-8': active && isLightTheme }
                 )}
               >
                 <Icon
@@ -63,6 +67,8 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(
               weight="medium"
               className={cn(
                 'text-foreground-2 group-hover:text-foreground-1 z-10 w-full duration-0 ease-in-out',
+                // { 'text-sidebar-foreground-2': isMainNav && (!isInset || isLightTheme) },
+                // { 'text-sidebar-foreground-3': isMainNav && isInset && !isLightTheme },
                 { 'text-sidebar-foreground-2 group-hover:text-sidebar-foreground-1': isMainNav },
                 { 'text-foreground-1': active },
                 { 'text-sidebar-foreground-1': active && isMainNav }
@@ -90,18 +96,24 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(
       <div
         ref={ref}
         className={cn(
-          'group flex cursor-pointer select-none gap-2.5 py-1.5 px-3 rounded-md',
-          { 'bg-background-4': active },
-          { 'bg-sidebar-background-3': active && isMainNav },
+          'group relative grid cursor-pointer select-none grid-cols-[auto_1fr] gap-2.5 py-1.5 px-2.5 rounded-md',
           { 'gap-0': !icon },
           className
         )}
         {...props}
       >
+        <div
+          className={cn(
+            'absolute z-0 h-full w-full rounded-[4px] bg-transparent transition-colors',
+            { 'group-hover:bg-sidebar-background-2': isMainNav && (isLightTheme || isInset) },
+            { 'bg-background-4': active },
+            { 'bg-sidebar-background-3': active && isMainNav }
+          )}
+        />
         {icon && (
           <div
             className={cn(
-              'text-icons-4 group-hover:text-icons-2 relative z-10 mt-1 flex h-3 w-3 min-w-3 items-center duration-100 ease-in-out',
+              'text-icons-4 group-hover:text-icons-2 relative z-10 flex h-3.5 w-3.5 min-w-3.5 mt-0.5 items-center duration-100 ease-in-out',
               { 'text-sidebar-icon-3 group-hover:text-sidebar-icon-1': isMainNav },
               { 'text-icons-2': active },
               { 'text-sidebar-icon-1': active && isMainNav }
@@ -117,7 +129,7 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(
           size={2}
           weight="medium"
           className={cn(
-            'text-foreground-3 group-hover:text-foreground-1 z-10 text-left duration-100 ease-in-out',
+            'text-foreground-3 group-hover:text-foreground-1 relative z-10 text-left duration-100 ease-in-out',
             { 'text-sidebar-foreground-2 group-hover:text-sidebar-foreground-1': isMainNav },
             { 'text-foreground-1': active },
             { 'text-sidebar-foreground-1': active && isMainNav }