feat: new light theme / inset theme for light and black theme

Author: 3em

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

@@ -18,7 +18,7 @@ export function MoreSubmenu({ showMoreMenu, handleMoreMenu, items }: MoreSubmenu
       <Sheet.Content
         className={cn(
           'inset-y-0 z-40 h-screen w-[328px] bg-transparent p-0',
-          isInset ? 'left-[228px]' : 'left-[220px]'
+          isInset ? 'border-l left-[228px]' : 'left-[220px]'
         )}
         closeClassName="text-sidebar-icon-3 hover:text-sidebar-icon-1"
         side="left"

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

@@ -43,8 +43,8 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(
               <div
                 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 }
+                  { 'border-sidebar-border-3 bg-sidebar-background-7': isMainNav }
+                  // { 'border-sidebar-border-6 bg-sidebar-background-8': active && isLightTheme }
                 )}
               >
                 <Icon
@@ -67,8 +67,9 @@ 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': 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 }
               )}

packages/ui/src/components/settings-menu.tsx

@@ -18,7 +18,7 @@ export const SettingsMenu = ({ showSettingMenu, handleSettingsMenu, items }: Sys
       <Sheet.Content
         className={cn(
           'inset-y-0 z-40 h-screen w-[364px] bg-transparent p-0',
-          isInset ? 'left-[228px]' : 'left-[220px]'
+          isInset ? 'border-l left-[228px]' : 'left-[220px]'
         )}
         closeClassName="text-sidebar-icon-3 hover:text-sidebar-icon-1"
         side="left"

packages/ui/src/components/sheet.tsx

@@ -52,17 +52,13 @@ const SheetOverlay = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Ove
 )
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
-const sheetVariants = cva('fixed z-50 gap-4 bg-background p-6 transition ease-in-out', {
+const sheetVariants = cva('fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out', {
   variants: {
     side: {
       top: 'inset-x-0 top-0 border-b',
       bottom: 'inset-x-0 bottom-0 border-t',
       left: 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
       right: 'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm'
-    },
-    isLightTheme: {
-      true: 'border-l border-sidebar-border-1',
-      false: 'shadow-lg'
     }
   },
   defaultVariants: {
@@ -96,10 +92,9 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
     ref
   ) => {
     const { portalContainer } = usePortal()
-    const { isLightTheme } = useTheme()
 
     const content = (
-      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side, isLightTheme }), className)} {...props}>
+      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
         {children}
         {!hideCloseButton && (
           <SheetPrimitive.Close

packages/ui/src/components/topbar.tsx

@@ -18,7 +18,7 @@ const Topbar = {
     return (
       <div
         className={cx(
-          `grid w-full ${gridCols} font-regular h-[58px] topbar-bottom-border items-center gap-6 px-5 text-sm`,
+          `grid w-full ${gridCols} font-regular h-[55px] topbar-bottom-border items-center gap-6 px-5 text-sm`,
           className
         )}
       >

packages/ui/src/shared-style-variables.css

@@ -2035,7 +2035,7 @@
       --canary-sidebar-background-07: 240 7% 8%; /* icons background inside menu */
       --canary-sidebar-background-08: 240 6% 15%; /* scrollbar */
       --canary-sidebar-background-09: 240 6% 10%; /* letter K in search background */
-      --canary-sidebar-border-01: 240 6% 15%; /* menu items divider */
+      --canary-sidebar-border-01: 240 6% 20%; /* menu items divider */
       --canary-sidebar-border-02: 240 6% 20%; /* search border */
       --canary-sidebar-border-03: 240 6% 15%; /* menu items group hover */
       --canary-sidebar-border-04: 240 6% 20%; /* searchbar border */

packages/ui/src/views/repo/repo-files/index.tsx

@@ -145,7 +145,7 @@ export const RepoFiles: FC<RepoFilesProps> = ({
   ])
 
   return (
-    <SandboxLayout.Main fullWidth>
+    <SandboxLayout.Main className="bg-transparent" fullWidth>
       <SandboxLayout.Content className="flex h-full flex-col pt-4">
         {isView && !isRepoEmpty && (
           <PathActionBar

packages/ui/src/views/repo/repo-sidebar/index.tsx

@@ -73,7 +73,7 @@ export const RepoSidebar = ({
         </SandboxLayout.LeftSubPanel>
       </div>
       {/* Sticky right border */}
-      <div className="sticky top-0 h-screen w-px border-r border-borders-4" />
+      <div className="sticky top-0 w-px border-r border-borders-4" />
     </>
   )
 }