-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Theming changes for the new architecture
- Loading branch information
1 parent
65fd025
commit 4090f2e
Showing
16 changed files
with
1,320 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import { useEffect } from 'react' | ||
| import { ColorType, ContrastType, FullTheme, ModeType, ThemeState } from '@harnessio/ui/components' | ||
| import { create } from 'zustand' | ||
| import { persist } from 'zustand/middleware' | ||
|
|
||
| const useThemeStore = create<ThemeState>()( | ||
| persist( | ||
| set => ({ | ||
| theme: 'system-std-std' as FullTheme, // Default theme | ||
| setTheme: (newTheme: FullTheme) => set({ theme: newTheme }) | ||
| }), | ||
| { | ||
| name: 'canary-ui-theme' // LocalStorage key | ||
| } | ||
| ) | ||
| ) | ||
|
|
||
| export const useTheme = () => { | ||
| const { theme, setTheme } = useThemeStore(state => ({ theme: state.theme, setTheme: state.setTheme })) | ||
| return { theme, setTheme } | ||
| } | ||
|
|
||
| export function ThemeProvider({ children }: { children: React.ReactNode }) { | ||
| const { theme, setTheme } = useThemeStore(state => ({ | ||
| theme: state.theme, | ||
| setTheme: state.setTheme | ||
| })) | ||
|
|
||
| useEffect(() => { | ||
| const root = window.document.documentElement | ||
|
|
||
| const getMediaQuery = () => window.matchMedia('(prefers-color-scheme: dark)') | ||
| const [mode, color, contrast] = theme.split('-') as [ModeType, ColorType, ContrastType] | ||
|
|
||
| // Compute the effective theme based on system preference if set to "system" | ||
| const effectiveMode = mode === ModeType.System ? (getMediaQuery().matches ? ModeType.Dark : ModeType.Light) : mode | ||
| const effectiveTheme: FullTheme = `${effectiveMode}-${color}-${contrast}` | ||
|
|
||
| root.className = '' // Clear existing classes | ||
| root.classList.add(effectiveTheme) // Apply the computed theme class | ||
|
|
||
| const updateSystemTheme = () => { | ||
| if (theme.startsWith(ModeType.System)) { | ||
| setTheme(`${getMediaQuery().matches ? ModeType.Dark : ModeType.Light}-${color}-${contrast}` as FullTheme) | ||
| } | ||
| } | ||
|
|
||
| getMediaQuery().addEventListener('change', updateSystemTheme) | ||
|
|
||
| return () => { | ||
| getMediaQuery().removeEventListener('change', updateSystemTheme) | ||
| } | ||
| }, [theme, setTheme]) | ||
|
|
||
| return <>{children}</> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
20 changes: 20 additions & 0 deletions
20
apps/gitness/src/pages/profile-settings/profile-settings-theme-page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { Spacer, Text, ThemeSelector } from '@harnessio/ui/components' | ||
| import { SandboxLayout } from '@harnessio/ui/views' | ||
| import { useTheme } from '../../framework/context/ThemeContext' | ||
|
|
||
| const ProfileSettingsThemePage: React.FC = () => { | ||
| return ( | ||
| <SandboxLayout.Main hasLeftPanel hasHeader hasSubHeader> | ||
| <SandboxLayout.Content> | ||
| <Spacer size={10} /> | ||
| <Text size={5} weight={'medium'}> | ||
| Theme Selector | ||
| </Text> | ||
| <Spacer size={6} /> | ||
| <ThemeSelector useTheme={useTheme} /> | ||
| </SandboxLayout.Content> | ||
| </SandboxLayout.Main> | ||
| ) | ||
| } | ||
|
|
||
| export { ProfileSettingsThemePage } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import * as React from 'react' | ||
|
|
||
| import { cn } from '@utils/cn' | ||
| import * as LabelPrimitive from '@radix-ui/react-label' | ||
| import { cva, type VariantProps } from 'class-variance-authority' | ||
|
|
||
| const labelVariants = cva('leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', { | ||
| variants: { | ||
| variant: { | ||
| default: 'text-sm font-light', | ||
| sm: 'text-xs font-light' | ||
| } | ||
| }, | ||
| defaultVariants: { | ||
| variant: 'default' | ||
| } | ||
| }) | ||
|
|
||
| const Label = React.forwardRef< | ||
| React.ElementRef<typeof LabelPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants> | ||
| >(({ className, variant, ...props }, ref) => ( | ||
| <LabelPrimitive.Root ref={ref} className={cn(labelVariants({ variant }), className)} {...props} /> | ||
| )) | ||
| Label.displayName = LabelPrimitive.Root.displayName | ||
|
|
||
| export { Label } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| import * as React from 'react' | ||
|
|
||
| import { cn } from '@utils/cn' | ||
| import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons' | ||
| import * as SelectPrimitive from '@radix-ui/react-select' | ||
|
|
||
| const Select = SelectPrimitive.Root | ||
|
|
||
| const SelectGroup = SelectPrimitive.Group | ||
|
|
||
| const SelectValue = SelectPrimitive.Value | ||
|
|
||
| const SelectTrigger = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Trigger>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { iconClassName?: string } | ||
| >(({ className, children, iconClassName, ...props }, ref) => ( | ||
| <SelectPrimitive.Trigger | ||
| ref={ref} | ||
| className={cn( | ||
| 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', | ||
| className | ||
| )} | ||
| {...props}> | ||
| {children} | ||
| <SelectPrimitive.Icon asChild> | ||
| <CaretSortIcon className={cn('h-4 w-4 opacity-50', iconClassName)} /> | ||
| </SelectPrimitive.Icon> | ||
| </SelectPrimitive.Trigger> | ||
| )) | ||
| SelectTrigger.displayName = SelectPrimitive.Trigger.displayName | ||
|
|
||
| const SelectScrollUpButton = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.ScrollUpButton>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.ScrollUpButton | ||
| ref={ref} | ||
| className={cn('flex cursor-default items-center justify-center py-1', className)} | ||
| {...props}> | ||
| <ChevronUpIcon /> | ||
| </SelectPrimitive.ScrollUpButton> | ||
| )) | ||
| SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName | ||
|
|
||
| const SelectScrollDownButton = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.ScrollDownButton>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.ScrollDownButton | ||
| ref={ref} | ||
| className={cn('flex cursor-default items-center justify-center py-1', className)} | ||
| {...props}> | ||
| <ChevronDownIcon /> | ||
| </SelectPrimitive.ScrollDownButton> | ||
| )) | ||
| SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName | ||
|
|
||
| const SelectContent = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> | ||
| >(({ className, children, position = 'popper', ...props }, ref) => ( | ||
| <SelectPrimitive.Portal> | ||
| <SelectPrimitive.Content | ||
| ref={ref} | ||
| className={cn( | ||
| 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md', | ||
| position === 'popper' && | ||
| 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', | ||
| className | ||
| )} | ||
| position={position} | ||
| {...props}> | ||
| <SelectScrollUpButton /> | ||
| <SelectPrimitive.Viewport | ||
| className={cn( | ||
| 'p-1', | ||
| position === 'popper' && | ||
| 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]' | ||
| )}> | ||
| {children} | ||
| </SelectPrimitive.Viewport> | ||
| <SelectScrollDownButton /> | ||
| </SelectPrimitive.Content> | ||
| </SelectPrimitive.Portal> | ||
| )) | ||
| SelectContent.displayName = SelectPrimitive.Content.displayName | ||
|
|
||
| const SelectLabel = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Label>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.Label ref={ref} className={cn('px-2 py-1.5 text-sm font-semibold', className)} {...props} /> | ||
| )) | ||
| SelectLabel.displayName = SelectPrimitive.Label.displayName | ||
|
|
||
| const SelectItem = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Item>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <SelectPrimitive.Item | ||
| ref={ref} | ||
| className={cn( | ||
| 'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50', | ||
| className | ||
| )} | ||
| {...props}> | ||
| <span className="absolute right-2 flex size-3.5 items-center justify-center"> | ||
| <SelectPrimitive.ItemIndicator> | ||
| <CheckIcon className="size-4" /> | ||
| </SelectPrimitive.ItemIndicator> | ||
| </span> | ||
| <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> | ||
| </SelectPrimitive.Item> | ||
| )) | ||
| SelectItem.displayName = SelectPrimitive.Item.displayName | ||
|
|
||
| const SelectSeparator = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Separator>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.Separator ref={ref} className={cn('bg-muted -mx-1 my-1 h-px', className)} {...props} /> | ||
| )) | ||
| SelectSeparator.displayName = SelectPrimitive.Separator.displayName | ||
|
|
||
| export { | ||
| Select, | ||
| SelectGroup, | ||
| SelectValue, | ||
| SelectTrigger, | ||
| SelectContent, | ||
| SelectLabel, | ||
| SelectItem, | ||
| SelectSeparator, | ||
| SelectScrollUpButton, | ||
| SelectScrollDownButton | ||
| } |
48 changes: 48 additions & 0 deletions
48
packages/ui/src/components/theme-selector/color-select.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { | ||
| Label, | ||
| Select, | ||
| SelectContent, | ||
| SelectGroup, | ||
| SelectItem, | ||
| SelectLabel, | ||
| SelectSeparator, | ||
| SelectTrigger, | ||
| SelectValue | ||
| } from '..' | ||
| import { ColorType, ContrastType, FullTheme, ModeType } from './types' | ||
|
|
||
| export function ColorSelect({ | ||
| setTheme, | ||
| mode, | ||
| color, | ||
| contrast | ||
| }: { | ||
| setTheme: (theme: FullTheme) => void | ||
| color: ColorType | ||
| mode: ModeType | ||
| contrast: ContrastType | ||
| }) { | ||
| return ( | ||
| <div> | ||
| <Label className="text-xs">Color</Label> | ||
| <Select | ||
| value={color} | ||
| onValueChange={(color: ColorType) => { | ||
| setTheme(`${mode}-${color}-${contrast}`) | ||
| }}> | ||
| <SelectTrigger> | ||
| <SelectValue placeholder="Select a color theme" /> | ||
| </SelectTrigger> | ||
| <SelectContent defaultValue={color}> | ||
| <SelectItem value={ColorType.Standard}>Standard</SelectItem> | ||
| <SelectSeparator /> | ||
| <SelectGroup> | ||
| <SelectLabel>Vision Assistive</SelectLabel> | ||
| <SelectItem value={ColorType.Tritanopia}>Tritanopia</SelectItem> | ||
| <SelectItem value={ColorType.ProtanopiaAndDeuteranopia}>Protanopia & Deuteranopia</SelectItem> | ||
| </SelectGroup> | ||
| </SelectContent> | ||
| </Select> | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.