Skip to content

Commit 1b9f4d3

Browse files
3em3em
committed
feat: new light theme / inset theme for light and black theme
1 parent ed8b1f7 commit 1b9f4d3

File tree

17 files changed

+117
-104
lines changed

17 files changed

+117
-104
lines changed

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

+3-5
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,13 @@ function Breadcrumbs() {
2929

3030
return (
3131
<Breadcrumb.Item key={match.pathname}>
32-
{!isFirst ? <Breadcrumb.Separator className="text-topbar-foreground-3" /> : null}
32+
{!isFirst && <Breadcrumb.Separator className="text-foreground-9" />}
3333
{isLast || !asLink ? (
34-
<Breadcrumb.Page
35-
className={isLast ? 'text-topbar-foreground-4 font-medium' : 'text-topbar-foreground-3'}
36-
>
34+
<Breadcrumb.Page className={isLast ? 'text-foreground-3' : 'text-foreground-1'}>
3735
{breadcrumbContent}
3836
</Breadcrumb.Page>
3937
) : (
40-
<Breadcrumb.Link className="text-topbar-foreground-3" asChild>
38+
<Breadcrumb.Link className="text-foreground-4 hover:text-foreground-2" asChild>
4139
<Link to={match.pathname}>{breadcrumbContent}</Link>
4240
</Breadcrumb.Link>
4341
)}

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

+17-12
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react'
22

33
import { Button, Icon } from '@/components'
44
import { buttonVariants } from '@/components/button'
5-
import { usePortal } from '@/context'
5+
import { usePortal, useTheme } from '@/context'
66
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
77
import { cn } from '@utils/cn'
88

@@ -19,17 +19,22 @@ interface AlertDialogOverlayProps extends React.ComponentPropsWithoutRef<typeof
1919
const AlertDialogOverlay = React.forwardRef<
2020
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
2121
AlertDialogOverlayProps
22-
>(({ className, onClick, ...props }, ref) => (
23-
<AlertDialogPrimitive.Overlay
24-
className={cn(
25-
'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',
26-
className
27-
)}
28-
{...props}
29-
ref={ref}
30-
onClick={onClick}
31-
/>
32-
))
22+
>(({ className, onClick, ...props }, ref) => {
23+
const { isLightTheme } = useTheme()
24+
25+
return (
26+
<AlertDialogPrimitive.Overlay
27+
className={cn(
28+
'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',
29+
{ 'bg-background-10/60': isLightTheme },
30+
className
31+
)}
32+
{...props}
33+
ref={ref}
34+
onClick={onClick}
35+
/>
36+
)
37+
})
3338
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
3439

3540
interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export function SidebarSearch(props: SidebarSearchProps) {
4949
<Button
5050
variant="custom"
5151
size="icon"
52-
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"
52+
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"
5353
>
5454
<span className="size-full text-12">⌘K</span>
5555
</Button>

‎packages/ui/src/components/dialog.tsx

+17-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Children, ComponentPropsWithoutRef, ElementRef, forwardRef, HTMLAttributes, isValidElement } from 'react'
22

33
import { Button, Icon } from '@/components'
4-
import { usePortal } from '@/context'
4+
import { usePortal, useTheme } from '@/context'
55
import * as DialogPrimitive from '@radix-ui/react-dialog'
66
import { cn } from '@utils/cn'
77

@@ -16,17 +16,22 @@ interface DialogOverlayProps extends ComponentPropsWithoutRef<typeof DialogPrimi
1616
}
1717

1818
const DialogOverlay = forwardRef<ElementRef<typeof DialogPrimitive.Overlay>, DialogOverlayProps>(
19-
({ className, onClick, ...props }, ref) => (
20-
<DialogPrimitive.Overlay
21-
ref={ref}
22-
className={cn(
23-
'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',
24-
className
25-
)}
26-
{...props}
27-
onClick={onClick}
28-
/>
29-
)
19+
({ className, onClick, ...props }, ref) => {
20+
const { isLightTheme } = useTheme()
21+
22+
return (
23+
<DialogPrimitive.Overlay
24+
ref={ref}
25+
className={cn(
26+
'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',
27+
{ 'bg-background-10/60': isLightTheme },
28+
className
29+
)}
30+
{...props}
31+
onClick={onClick}
32+
/>
33+
)
34+
}
3035
)
3136
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
3237

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const LanguageDialog: FC<LanguageDialogProps> = ({
4444
onChange(lang)
4545
}}
4646
>
47-
<div className="flex items-center gap-2 relative z-[1]">
47+
<div className="relative z-[1] flex items-center gap-2">
4848
<div className="flex size-6 items-center justify-center rounded bg-background-12 text-12 uppercase text-foreground-3">
4949
{lang.code}
5050
</div>
@@ -57,7 +57,7 @@ const LanguageDialog: FC<LanguageDialogProps> = ({
5757
{lang.name}
5858
</span>
5959
</div>
60-
{selectedLanguage === lang.code && <Icon className="text-icons-2 relative z-[1]" name="tick" size={12} />}
60+
{selectedLanguage === lang.code && <Icon className="relative z-[1] text-icons-2" name="tick" size={12} />}
6161
<span
6262
className={cn(
6363
'absolute -inset-x-2 -inset-y-1 rounded -z-[1] group-hover:bg-background-4',

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

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

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

+6-5
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(
4343
<div
4444
className={cn(
4545
'sub-menu-icon-bg relative flex size-8 place-content-center place-items-center rounded border border-borders-1 bg-background-2',
46-
{ 'border-sidebar-border-3 bg-sidebar-background-7': isMainNav },
47-
{ 'border-sidebar-border-6 bg-sidebar-background-8': active && isLightTheme }
46+
{ 'border-sidebar-border-3 bg-sidebar-background-7': isMainNav }
47+
// { 'border-sidebar-border-6 bg-sidebar-background-8': active && isLightTheme }
4848
)}
4949
>
5050
<Icon
@@ -67,8 +67,9 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(
6767
weight="medium"
6868
className={cn(
6969
'text-foreground-2 group-hover:text-foreground-1 z-10 w-full duration-0 ease-in-out',
70-
{ 'text-sidebar-foreground-2': isMainNav && (!isInset || isLightTheme) },
71-
{ 'text-sidebar-foreground-3': isMainNav && isInset && !isLightTheme },
70+
// { 'text-sidebar-foreground-2': isMainNav && (!isInset || isLightTheme) },
71+
// { 'text-sidebar-foreground-3': isMainNav && isInset && !isLightTheme },
72+
{ 'text-sidebar-foreground-2 group-hover:text-sidebar-foreground-1': isMainNav },
7273
{ 'text-foreground-1': active },
7374
{ 'text-sidebar-foreground-1': active && isMainNav }
7475
)}
@@ -119,7 +120,7 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(
119120
)}
120121
>
121122
{active && (
122-
<span className="bg-navbar-item-gradient absolute left-1/2 top-1/2 z-[-1] size-7 -translate-x-1/2 -translate-y-1/2" />
123+
<span className="absolute left-1/2 top-1/2 z-[-1] size-7 -translate-x-1/2 -translate-y-1/2 bg-navbar-item-gradient" />
123124
)}
124125
{icon}
125126
</div>

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

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

‎packages/ui/src/components/sheet.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,14 @@ interface SheetOverlayProps extends React.ComponentPropsWithoutRef<typeof SheetP
2121

2222
const SheetOverlay = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Overlay>, SheetOverlayProps>(
2323
({ className, modal, handleClose, ...props }, ref) => {
24+
const { isLightTheme } = useTheme()
25+
2426
if (modal) {
2527
return (
2628
<SheetPrimitive.Overlay
2729
className={cn(
28-
'bg-background-7/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50',
30+
'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 fixed inset-0 z-50',
31+
{ 'bg-background-10/60': isLightTheme },
2932
className
3033
)}
3134
{...props}
@@ -37,25 +40,25 @@ const SheetOverlay = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Ove
3740
return (
3841
<div
3942
aria-hidden="true"
40-
className={cn('bg-background-7/50 fixed left-0 top-0 h-full w-full', className)}
43+
className={cn(
44+
'layer-high bg-background-7/80 fixed left-0 top-0 h-full w-full',
45+
{ 'bg-background-10/60': isLightTheme },
46+
className
47+
)}
4148
onClick={e => handleClose?.(e)}
4249
/>
4350
)
4451
}
4552
)
4653
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
4754

48-
const sheetVariants = cva('bg-background fixed z-50 gap-4 p-6 transition ease-in-out', {
55+
const sheetVariants = cva('fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out', {
4956
variants: {
5057
side: {
5158
top: 'inset-x-0 top-0 border-b',
5259
bottom: 'inset-x-0 bottom-0 border-t',
5360
left: 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
5461
right: 'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm'
55-
},
56-
isLightTheme: {
57-
true: 'border-sidebar-border-1 border-l',
58-
false: 'shadow-lg'
5962
}
6063
},
6164
defaultVariants: {
@@ -89,10 +92,9 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
8992
ref
9093
) => {
9194
const { portalContainer } = usePortal()
92-
const { isLightTheme } = useTheme()
9395

9496
const content = (
95-
<SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side, isLightTheme }), className)} {...props}>
97+
<SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
9698
{children}
9799
{!hideCloseButton && (
98100
<SheetPrimitive.Close

‎packages/ui/src/components/topbar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const Topbar = {
1818
return (
1919
<div
2020
className={cx(
21-
`grid w-full ${gridCols} font-regular h-[58px] topbar-bottom-border items-center gap-6 px-5 text-sm`,
21+
`grid w-full ${gridCols} font-regular h-[55px] topbar-bottom-border items-center gap-6 px-5 text-sm`,
2222
className
2323
)}
2424
>

‎packages/ui/src/context/theme/types.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,4 @@ export interface IThemeStore {
3333

3434
export const defaultTheme = `${ModeType.Dark}-${ColorType.Standard}-${ContrastType.Standard}` as FullTheme
3535

36-
export const INSET_THEME_PADDING = 6
36+
export const INSET_THEME_PADDING = 8 // 6px + top and bottom borders

0 commit comments

Comments
 (0)