jake/compassmock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unified sidebar header + 5 new themes (#95)

Browse Source 
* refactor(ui): unify org switcher with compass header

Merge the separate COMPASS branding and org switcher into a
single clean sidebar header element. The compass logo now lives
inside the org switcher trigger alongside the active org name.

Removes redundant SidebarMenu block from app-sidebar header.
Simplifies the org dropdown to just icon + name + checkmark.

* feat(themes): add 5 new presets

Warm Luxury, Black & White, Tweeter, Orang, and Catppuccin.

---------

Co-authored-by: Nicholai <nicholaivogelfilms@gmail.com>
This commit is contained in:
Nicholai 2026-02-16 00:00:42 -07:00 committed by GitHub
parent a0afbf3d70
commit 2b95ae8f15
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 656 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/app-sidebar.tsx
View File

@ -160,32 +160,6 @@ export function AppSidebar({
return (
<Sidebar collapsible="icon" {...props}>
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton
asChild
className="data-[slot=sidebar-menu-button]:!p-1.5"
>
<a href="/dashboard">
<span
aria-label="Compass"
className="!size-5 shrink-0 block bg-current"
style={{
maskImage: "url(/logo-black.png)",
maskSize: "contain",
maskRepeat: "no-repeat",
WebkitMaskImage: "url(/logo-black.png)",
WebkitMaskSize: "contain",
WebkitMaskRepeat: "no-repeat",
}}
/>
<span className="text-base font-semibold">
COMPASS
</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
<OrgSwitcher activeOrgId={activeOrgId} activeOrgName={activeOrgName} />
</SidebarHeader>
<SidebarContent>

98
src/components/org-switcher.tsx
View File

@ -5,16 +5,18 @@ import { useRouter } from "next/navigation"
import {
IconBuilding,
IconCheck,
IconChevronDown,
IconSelector,
IconUser,
} from "@tabler/icons-react"
import { getUserOrganizations, switchOrganization } from "@/app/actions/organizations"
import {
getUserOrganizations,
switchOrganization,
} from "@/app/actions/organizations"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
@ -24,7 +26,6 @@ import {
SidebarMenuItem,
useSidebar,
} from "@/components/ui/sidebar"
import { Badge } from "@/components/ui/badge"
import { cn } from "@/lib/utils"
type OrgInfo = {
@ -41,7 +42,7 @@ export function OrgSwitcher({
}: {
readonly activeOrgId: string | null
readonly activeOrgName: string | null
}): React.ReactElement | null {
}): React.ReactElement {
const router = useRouter()
const { isMobile } = useSidebar()
const [orgs, setOrgs] = React.useState<readonly OrgInfo[]>([])
@ -69,40 +70,41 @@ export function OrgSwitcher({
}
}
if (!activeOrgId || !activeOrgName) {
return null
}
const activeOrg = orgs.find((org) => org.id === activeOrgId)
const orgInitial = activeOrgName[0]?.toUpperCase() ?? "O"
const displayName = activeOrgName ?? "Compass"
const hasOrgs = orgs.length > 1
return (
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<DropdownMenuTrigger asChild disabled={!hasOrgs}>
<SidebarMenuButton
size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
className={cn(
"data-[state=open]:bg-sidebar-accent",
"data-[state=open]:text-sidebar-accent-foreground",
)}
>
<div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
{activeOrg?.type === "personal" ? (
<IconUser className="size-4" />
) : (
<IconBuilding className="size-4" />
)}
</div>
<div className="flex min-w-0 flex-1 flex-col items-start text-left">
<span className="truncate text-sm font-medium text-sidebar-foreground">
{activeOrgName}
</span>
{activeOrg && (
<span className="truncate text-xs text-sidebar-foreground/60">
{activeOrg.role}
<span
aria-label="Compass"
className="!size-5 shrink-0 block bg-current"
style={{
maskImage: "url(/logo-black.png)",
maskSize: "contain",
maskRepeat: "no-repeat",
WebkitMaskImage: "url(/logo-black.png)",
WebkitMaskSize: "contain",
WebkitMaskRepeat: "no-repeat",
}}
/>
<span className="truncate text-sm font-semibold">
{displayName}
</span>
{hasOrgs && (
<IconSelector
className="ml-auto size-4 shrink-0 opacity-50"
/>
)}
</div>
<IconChevronDown className="ml-auto size-4 shrink-0 text-sidebar-foreground/60" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
@ -111,46 +113,30 @@ export function OrgSwitcher({
align="start"
sideOffset={4}
>
<DropdownMenuLabel className="text-xs text-muted-foreground">
Organizations
</DropdownMenuLabel>
<DropdownMenuSeparator />
{orgs.map((org) => {
{orgs.map((org, i) => {
const isActive = org.id === activeOrgId
const orgIcon =
const OrgIcon =
org.type === "personal" ? IconUser : IconBuilding
return (
<React.Fragment key={org.id}>
{i > 0 && <DropdownMenuSeparator />}
<DropdownMenuItem
key={org.id}
onClick={() => void handleOrgSwitch(org.id)}
disabled={isLoading}
className={cn(
"flex items-center gap-2 px-2 py-1.5",
isActive && "bg-accent"
)}
className="gap-2 px-2 py-1.5"
>
<div className="flex size-6 shrink-0 items-center justify-center rounded-md bg-muted">
{React.createElement(orgIcon, { className: "size-3" })}
</div>
<div className="flex min-w-0 flex-1 flex-col">
<span className="truncate text-sm font-medium">
<OrgIcon className="size-4 shrink-0 opacity-60" />
<span className="truncate font-medium">
{org.name}
</span>
<span className="truncate text-xs text-muted-foreground">
{org.role}
</span>
</div>
<Badge
variant="secondary"
className="shrink-0 text-[10px] font-normal"
>
{org.type}
</Badge>
{isActive && (
<IconCheck className="ml-1 size-4 shrink-0 text-primary" />
<IconCheck
className="ml-auto size-4 shrink-0 text-primary"
/>
)}
</DropdownMenuItem>
</React.Fragment>
)
})}
</DropdownMenuContent>

605
src/lib/theme/presets.ts
View File

@ -1202,6 +1202,611 @@ export const THEME_PRESETS: ReadonlyArray<ThemeDefinition> = [
foreground: "oklch(0.4063 0.0255 40.3627)",
},
},
{
id: "warm-luxury",
name: "Warm Luxury",
description: "Rich burgundy and gold tones with warm neutrals",
light: {
"background": "oklch(0.9779 0.0042 56.3756)",
"foreground": "oklch(0.2178 0 0)",
"card": "oklch(0.9779 0.0042 56.3756)",
"card-foreground": "oklch(0.2178 0 0)",
"popover": "oklch(0.9779 0.0042 56.3756)",
"popover-foreground": "oklch(0.2178 0 0)",
"primary": "oklch(0.4650 0.1470 24.9381)",
"primary-foreground": "oklch(1.0000 0 0)",
"secondary": "oklch(0.9625 0.0385 89.0943)",
"secondary-foreground": "oklch(0.4847 0.1022 75.1153)",
"muted": "oklch(0.9431 0.0068 53.4442)",
"muted-foreground": "oklch(0.4444 0.0096 73.6390)",
"accent": "oklch(0.9619 0.0580 95.6174)",
"accent-foreground": "oklch(0.3958 0.1331 25.7230)",
"destructive": "oklch(0.4437 0.1613 26.8994)",
"destructive-foreground": "oklch(1.0000 0 0)",
"border": "oklch(0.9355 0.0324 80.9937)",
"input": "oklch(0.9355 0.0324 80.9937)",
"ring": "oklch(0.4650 0.1470 24.9381)",
"chart-1": "oklch(0.5054 0.1905 27.5181)",
"chart-2": "oklch(0.4650 0.1470 24.9381)",
"chart-3": "oklch(0.3958 0.1331 25.7230)",
"chart-4": "oklch(0.5553 0.1455 48.9975)",
"chart-5": "oklch(0.4732 0.1247 46.2007)",
"sidebar": "oklch(0.9431 0.0068 53.4442)",
"sidebar-foreground": "oklch(0.2178 0 0)",
"sidebar-primary": "oklch(0.4650 0.1470 24.9381)",
"sidebar-primary-foreground": "oklch(1.0000 0 0)",
"sidebar-accent": "oklch(0.9619 0.0580 95.6174)",
"sidebar-accent-foreground": "oklch(0.3958 0.1331 25.7230)",
"sidebar-border": "oklch(0.9355 0.0324 80.9937)",
"sidebar-ring": "oklch(0.4650 0.1470 24.9381)",
},
dark: {
"background": "oklch(0.2161 0.0061 56.0434)",
"foreground": "oklch(0.9699 0.0013 106.4238)",
"card": "oklch(0.2685 0.0063 34.2976)",
"card-foreground": "oklch(0.9699 0.0013 106.4238)",
"popover": "oklch(0.2685 0.0063 34.2976)",
"popover-foreground": "oklch(0.9699 0.0013 106.4238)",
"primary": "oklch(0.5054 0.1905 27.5181)",
"primary-foreground": "oklch(0.9779 0.0042 56.3756)",
"secondary": "oklch(0.4732 0.1247 46.2007)",
"secondary-foreground": "oklch(0.9619 0.0580 95.6174)",
"muted": "oklch(0.2291 0.0060 56.0708)",
"muted-foreground": "oklch(0.8687 0.0043 56.3660)",
"accent": "oklch(0.5553 0.1455 48.9975)",
"accent-foreground": "oklch(0.9619 0.0580 95.6174)",
"destructive": "oklch(0.6368 0.2078 25.3313)",
"destructive-foreground": "oklch(1.0000 0 0)",
"border": "oklch(0.3741 0.0087 67.5582)",
"input": "oklch(0.3741 0.0087 67.5582)",
"ring": "oklch(0.5054 0.1905 27.5181)",
"chart-1": "oklch(0.7106 0.1661 22.2162)",
"chart-2": "oklch(0.6368 0.2078 25.3313)",
"chart-3": "oklch(0.5771 0.2152 27.3250)",
"chart-4": "oklch(0.8369 0.1644 84.4286)",
"chart-5": "oklch(0.7686 0.1647 70.0804)",
"sidebar": "oklch(0.2161 0.0061 56.0434)",
"sidebar-foreground": "oklch(0.9699 0.0013 106.4238)",
"sidebar-primary": "oklch(0.5054 0.1905 27.5181)",
"sidebar-primary-foreground": "oklch(0.9779 0.0042 56.3756)",
"sidebar-accent": "oklch(0.5553 0.1455 48.9975)",
"sidebar-accent-foreground": "oklch(0.9619 0.0580 95.6174)",
"sidebar-border": "oklch(0.3741 0.0087 67.5582)",
"sidebar-ring": "oklch(0.5054 0.1905 27.5181)",
},
fonts: {
sans: "Poppins, sans-serif",
serif: "Libre Baskerville, serif",
mono: "IBM Plex Mono, monospace",
},
fontSources: {
googleFonts: ["Poppins", "Libre Baskerville", "IBM Plex Mono"],
},
tokens: {
radius: "0.375rem",
spacing: "0.25rem",
trackingNormal: "0em",
shadowColor: "hsl(0 63% 18%)",
shadowOpacity: "0.12",
shadowBlur: "16px",
shadowSpread: "-2px",
shadowOffsetX: "1px",
shadowOffsetY: "1px",
},
shadows: {
light: {
"2xs": "1px 1px 16px -2px hsl(0 63% 18% / 0.06)",
xs: "1px 1px 16px -2px hsl(0 63% 18% / 0.06)",
sm: "1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12)",
default: "1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12)",
md: "1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 2px 4px -3px hsl(0 63% 18% / 0.12)",
lg: "1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 4px 6px -3px hsl(0 63% 18% / 0.12)",
xl: "1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 8px 10px -3px hsl(0 63% 18% / 0.12)",
"2xl": "1px 1px 16px -2px hsl(0 63% 18% / 0.30)",
},
dark: {
"2xs": "1px 1px 16px -2px hsl(0 63% 18% / 0.06)",
xs: "1px 1px 16px -2px hsl(0 63% 18% / 0.06)",
sm: "1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12)",
default: "1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12)",
md: "1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 2px 4px -3px hsl(0 63% 18% / 0.12)",
lg: "1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 4px 6px -3px hsl(0 63% 18% / 0.12)",
xl: "1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 8px 10px -3px hsl(0 63% 18% / 0.12)",
"2xl": "1px 1px 16px -2px hsl(0 63% 18% / 0.30)",
},
},
isPreset: true,
previewColors: {
primary: "oklch(0.4650 0.1470 24.9381)",
background: "oklch(0.9779 0.0042 56.3756)",
foreground: "oklch(0.2178 0 0)",
},
},
{
id: "black-white",
name: "Black & White",
description: "Pure monochrome with zero chroma",
light: {
"background": "oklch(0.9900 0 0)",
"foreground": "oklch(0 0 0)",
"card": "oklch(1 0 0)",
"card-foreground": "oklch(0 0 0)",
"popover": "oklch(0.9900 0 0)",
"popover-foreground": "oklch(0 0 0)",
"primary": "oklch(0 0 0)",
"primary-foreground": "oklch(1 0 0)",
"secondary": "oklch(0.9400 0 0)",
"secondary-foreground": "oklch(0 0 0)",
"muted": "oklch(0.9700 0 0)",
"muted-foreground": "oklch(0.4400 0 0)",
"accent": "oklch(0.9400 0 0)",
"accent-foreground": "oklch(0 0 0)",
"destructive": "oklch(0.6300 0.1900 23.0300)",
"destructive-foreground": "oklch(1 0 0)",
"border": "oklch(0.9200 0 0)",
"input": "oklch(0.9400 0 0)",
"ring": "oklch(0 0 0)",
"chart-1": "oklch(0.8100 0.1700 75.3500)",
"chart-2": "oklch(0.5500 0.2200 264.5300)",
"chart-3": "oklch(0.7200 0 0)",
"chart-4": "oklch(0.9200 0 0)",
"chart-5": "oklch(0.5600 0 0)",
"sidebar": "oklch(0.9900 0 0)",
"sidebar-foreground": "oklch(0 0 0)",
"sidebar-primary": "oklch(0 0 0)",
"sidebar-primary-foreground": "oklch(1 0 0)",
"sidebar-accent": "oklch(0.9400 0 0)",
"sidebar-accent-foreground": "oklch(0 0 0)",
"sidebar-border": "oklch(0.9400 0 0)",
"sidebar-ring": "oklch(0 0 0)",
},
dark: {
"background": "oklch(0 0 0)",
"foreground": "oklch(1 0 0)",
"card": "oklch(0.1400 0 0)",
"card-foreground": "oklch(1 0 0)",
"popover": "oklch(0.1800 0 0)",
"popover-foreground": "oklch(1 0 0)",
"primary": "oklch(1 0 0)",
"primary-foreground": "oklch(0 0 0)",
"secondary": "oklch(0.2500 0 0)",
"secondary-foreground": "oklch(1 0 0)",
"muted": "oklch(0.2300 0 0)",
"muted-foreground": "oklch(0.7200 0 0)",
"accent": "oklch(0.3200 0 0)",
"accent-foreground": "oklch(1 0 0)",
"destructive": "oklch(0.6900 0.2000 23.9100)",
"destructive-foreground": "oklch(0 0 0)",
"border": "oklch(0.2600 0 0)",
"input": "oklch(0.3200 0 0)",
"ring": "oklch(0.7200 0 0)",
"chart-1": "oklch(0.8100 0.1700 75.3500)",
"chart-2": "oklch(0.5800 0.2100 260.8400)",
"chart-3": "oklch(0.5600 0 0)",
"chart-4": "oklch(0.4400 0 0)",
"chart-5": "oklch(0.9200 0 0)",
"sidebar": "oklch(0.1800 0 0)",
"sidebar-foreground": "oklch(1 0 0)",
"sidebar-primary": "oklch(1 0 0)",
"sidebar-primary-foreground": "oklch(0 0 0)",
"sidebar-accent": "oklch(0.3200 0 0)",
"sidebar-accent-foreground": "oklch(1 0 0)",
"sidebar-border": "oklch(0.3200 0 0)",
"sidebar-ring": "oklch(0.7200 0 0)",
},
fonts: {
sans: "Geist, sans-serif",
serif: "Georgia, serif",
mono: "Geist Mono, monospace",
},
fontSources: {
googleFonts: ["Geist", "Geist Mono"],
},
tokens: {
radius: "0.5rem",
spacing: "0.25rem",
trackingNormal: "0em",
shadowColor: "hsl(0 0% 0%)",
shadowOpacity: "0.18",
shadowBlur: "2px",
shadowSpread: "0px",
shadowOffsetX: "0px",
shadowOffsetY: "1px",
},
shadows: {
light: {
"2xs": "0px 1px 2px 0px hsl(0 0% 0% / 0.09)",
xs: "0px 1px 2px 0px hsl(0 0% 0% / 0.09)",
sm: "0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18)",
default: "0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18)",
md: "0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18)",
lg: "0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18)",
xl: "0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18)",
"2xl": "0px 1px 2px 0px hsl(0 0% 0% / 0.45)",
},
dark: {
"2xs": "0px 1px 2px 0px hsl(0 0% 0% / 0.09)",
xs: "0px 1px 2px 0px hsl(0 0% 0% / 0.09)",
sm: "0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18)",
default: "0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18)",
md: "0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18)",
lg: "0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18)",
xl: "0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18)",
"2xl": "0px 1px 2px 0px hsl(0 0% 0% / 0.45)",
},
},
isPreset: true,
previewColors: {
primary: "oklch(0 0 0)",
background: "oklch(0.9900 0 0)",
foreground: "oklch(0 0 0)",
},
},
{
id: "tweeter",
name: "Tweeter",
description: "Twitter-inspired blue with clean, shadowless surfaces",
light: {
"background": "oklch(1.0000 0 0)",
"foreground": "oklch(0.1884 0.0128 248.5103)",
"card": "oklch(0.9784 0.0011 197.1387)",
"card-foreground": "oklch(0.1884 0.0128 248.5103)",
"popover": "oklch(1.0000 0 0)",
"popover-foreground": "oklch(0.1884 0.0128 248.5103)",
"primary": "oklch(0.6723 0.1606 244.9955)",
"primary-foreground": "oklch(1.0000 0 0)",
"secondary": "oklch(0.1884 0.0128 248.5103)",
"secondary-foreground": "oklch(1.0000 0 0)",
"muted": "oklch(0.9222 0.0013 286.3737)",
"muted-foreground": "oklch(0.1884 0.0128 248.5103)",
"accent": "oklch(0.9392 0.0166 250.8453)",
"accent-foreground": "oklch(0.6723 0.1606 244.9955)",
"destructive": "oklch(0.6188 0.2376 25.7658)",
"destructive-foreground": "oklch(1.0000 0 0)",
"border": "oklch(0.9317 0.0118 231.6594)",
"input": "oklch(0.9809 0.0025 228.7836)",
"ring": "oklch(0.6818 0.1584 243.3540)",
"chart-1": "oklch(0.6723 0.1606 244.9955)",
"chart-2": "oklch(0.6907 0.1554 160.3454)",
"chart-3": "oklch(0.8214 0.1600 82.5337)",
"chart-4": "oklch(0.7064 0.1822 151.7125)",
"chart-5": "oklch(0.5919 0.2186 10.5826)",
"sidebar": "oklch(0.9784 0.0011 197.1387)",
"sidebar-foreground": "oklch(0.1884 0.0128 248.5103)",
"sidebar-primary": "oklch(0.6723 0.1606 244.9955)",
"sidebar-primary-foreground": "oklch(1.0000 0 0)",
"sidebar-accent": "oklch(0.9392 0.0166 250.8453)",
"sidebar-accent-foreground": "oklch(0.6723 0.1606 244.9955)",
"sidebar-border": "oklch(0.9271 0.0101 238.5177)",
"sidebar-ring": "oklch(0.6818 0.1584 243.3540)",
},
dark: {
"background": "oklch(0 0 0)",
"foreground": "oklch(0.9328 0.0025 228.7857)",
"card": "oklch(0.2097 0.0080 274.5332)",
"card-foreground": "oklch(0.8853 0 0)",
"popover": "oklch(0 0 0)",
"popover-foreground": "oklch(0.9328 0.0025 228.7857)",
"primary": "oklch(0.6692 0.1607 245.0110)",
"primary-foreground": "oklch(1.0000 0 0)",
"secondary": "oklch(0.9622 0.0035 219.5331)",
"secondary-foreground": "oklch(0.1884 0.0128 248.5103)",
"muted": "oklch(0.2090 0 0)",
"muted-foreground": "oklch(0.5637 0.0078 247.9662)",
"accent": "oklch(0.1928 0.0331 242.5459)",
"accent-foreground": "oklch(0.6692 0.1607 245.0110)",
"destructive": "oklch(0.6188 0.2376 25.7658)",
"destructive-foreground": "oklch(1.0000 0 0)",
"border": "oklch(0.2674 0.0047 248.0045)",
"input": "oklch(0.3020 0.0288 244.8244)",
"ring": "oklch(0.6818 0.1584 243.3540)",
"chart-1": "oklch(0.6723 0.1606 244.9955)",
"chart-2": "oklch(0.6907 0.1554 160.3454)",
"chart-3": "oklch(0.8214 0.1600 82.5337)",
"chart-4": "oklch(0.7064 0.1822 151.7125)",
"chart-5": "oklch(0.5919 0.2186 10.5826)",
"sidebar": "oklch(0.2097 0.0080 274.5332)",
"sidebar-foreground": "oklch(0.8853 0 0)",
"sidebar-primary": "oklch(0.6818 0.1584 243.3540)",
"sidebar-primary-foreground": "oklch(1.0000 0 0)",
"sidebar-accent": "oklch(0.1928 0.0331 242.5459)",
"sidebar-accent-foreground": "oklch(0.6692 0.1607 245.0110)",
"sidebar-border": "oklch(0.3795 0.0220 240.5943)",
"sidebar-ring": "oklch(0.6818 0.1584 243.3540)",
},
fonts: {
sans: "Open Sans, sans-serif",
serif: "Georgia, serif",
mono: "Menlo, monospace",
},
fontSources: {
googleFonts: ["Open Sans"],
},
tokens: {
radius: "1.3rem",
spacing: "0.25rem",
trackingNormal: "0em",
shadowColor: "rgba(29,161,242,0.15)",
shadowOpacity: "0",
shadowBlur: "0px",
shadowSpread: "0px",
shadowOffsetX: "0px",
shadowOffsetY: "2px",
},
shadows: {
light: {
"2xs": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00)",
xs: "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00)",
sm: "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)",
default: "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)",
md: "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)",
lg: "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)",
xl: "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)",
"2xl": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00)",
},
dark: {
"2xs": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00)",
xs: "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00)",
sm: "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)",
default: "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)",
md: "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)",
lg: "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)",
xl: "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)",
"2xl": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00)",
},
},
isPreset: true,
previewColors: {
primary: "oklch(0.6723 0.1606 244.9955)",
background: "oklch(1.0000 0 0)",
foreground: "oklch(0.1884 0.0128 248.5103)",
},
},
{
id: "orang",
name: "Orang",
description: "Vibrant orange with warm, earthy undertones",
light: {
"background": "oklch(0.9856 0.0084 56.3169)",
"foreground": "oklch(0.3353 0.0132 2.7676)",
"card": "oklch(1.0000 0 0)",
"card-foreground": "oklch(0.3353 0.0132 2.7676)",
"popover": "oklch(1.0000 0 0)",
"popover-foreground": "oklch(0.3353 0.0132 2.7676)",
"primary": "oklch(0.7357 0.1641 34.7091)",
"primary-foreground": "oklch(1.0000 0 0)",
"secondary": "oklch(0.9596 0.0200 28.9029)",
"secondary-foreground": "oklch(0.5587 0.1294 32.7364)",
"muted": "oklch(0.9656 0.0176 39.4009)",
"muted-foreground": "oklch(0.5534 0.0116 58.0708)",
"accent": "oklch(0.8278 0.1131 57.9984)",
"accent-foreground": "oklch(0.3353 0.0132 2.7676)",
"destructive": "oklch(0.6122 0.2082 22.2410)",
"destructive-foreground": "oklch(1.0000 0 0)",
"border": "oklch(0.9296 0.0370 38.6868)",
"input": "oklch(0.9296 0.0370 38.6868)",
"ring": "oklch(0.7357 0.1641 34.7091)",
"chart-1": "oklch(0.7357 0.1641 34.7091)",
"chart-2": "oklch(0.8278 0.1131 57.9984)",
"chart-3": "oklch(0.8773 0.0763 54.9314)",
"chart-4": "oklch(0.8200 0.1054 40.8859)",
"chart-5": "oklch(0.6368 0.1306 32.0721)",
"sidebar": "oklch(0.9656 0.0176 39.4009)",
"sidebar-foreground": "oklch(0.3353 0.0132 2.7676)",
"sidebar-primary": "oklch(0.7357 0.1641 34.7091)",
"sidebar-primary-foreground": "oklch(1.0000 0 0)",
"sidebar-accent": "oklch(0.8278 0.1131 57.9984)",
"sidebar-accent-foreground": "oklch(0.3353 0.0132 2.7676)",
"sidebar-border": "oklch(0.9296 0.0370 38.6868)",
"sidebar-ring": "oklch(0.7357 0.1641 34.7091)",
},
dark: {
"background": "oklch(0.2569 0.0169 352.4042)",
"foreground": "oklch(0.9397 0.0119 51.3156)",
"card": "oklch(0.3184 0.0176 341.4465)",
"card-foreground": "oklch(0.9397 0.0119 51.3156)",
"popover": "oklch(0.3184 0.0176 341.4465)",
"popover-foreground": "oklch(0.9397 0.0119 51.3156)",
"primary": "oklch(0.7357 0.1641 34.7091)",
"primary-foreground": "oklch(1.0000 0 0)",
"secondary": "oklch(0.3637 0.0203 342.2664)",
"secondary-foreground": "oklch(0.9397 0.0119 51.3156)",
"muted": "oklch(0.2848 0.0159 343.6554)",
"muted-foreground": "oklch(0.8378 0.0237 52.6346)",
"accent": "oklch(0.8278 0.1131 57.9984)",
"accent-foreground": "oklch(0.2569 0.0169 352.4042)",
"destructive": "oklch(0.6122 0.2082 22.2410)",
"destructive-foreground": "oklch(1.0000 0 0)",
"border": "oklch(0.3637 0.0203 342.2664)",
"input": "oklch(0.3637 0.0203 342.2664)",
"ring": "oklch(0.7357 0.1641 34.7091)",
"chart-1": "oklch(0.7357 0.1641 34.7091)",
"chart-2": "oklch(0.8278 0.1131 57.9984)",
"chart-3": "oklch(0.8773 0.0763 54.9314)",
"chart-4": "oklch(0.8200 0.1054 40.8859)",
"chart-5": "oklch(0.6368 0.1306 32.0721)",
"sidebar": "oklch(0.2569 0.0169 352.4042)",
"sidebar-foreground": "oklch(0.9397 0.0119 51.3156)",
"sidebar-primary": "oklch(0.7357 0.1641 34.7091)",
"sidebar-primary-foreground": "oklch(1.0000 0 0)",
"sidebar-accent": "oklch(0.8278 0.1131 57.9984)",
"sidebar-accent-foreground": "oklch(0.2569 0.0169 352.4042)",
"sidebar-border": "oklch(0.3637 0.0203 342.2664)",
"sidebar-ring": "oklch(0.7357 0.1641 34.7091)",
},
fonts: {
sans: "Montserrat, sans-serif",
serif: "Merriweather, serif",
mono: "Ubuntu Mono, monospace",
},
fontSources: {
googleFonts: ["Montserrat", "Merriweather", "Ubuntu Mono"],
},
tokens: {
radius: "0.625rem",
spacing: "0.25rem",
trackingNormal: "0em",
shadowColor: "hsl(0 0% 0%)",
shadowOpacity: "0.09",
shadowBlur: "12px",
shadowSpread: "-3px",
shadowOffsetX: "0px",
shadowOffsetY: "6px",
},
shadows: {
light: {
"2xs": "0px 6px 12px -3px hsl(0 0% 0% / 0.04)",
xs: "0px 6px 12px -3px hsl(0 0% 0% / 0.04)",
sm: "0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09)",
default: "0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09)",
md: "0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 2px 4px -4px hsl(0 0% 0% / 0.09)",
lg: "0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 4px 6px -4px hsl(0 0% 0% / 0.09)",
xl: "0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 8px 10px -4px hsl(0 0% 0% / 0.09)",
"2xl": "0px 6px 12px -3px hsl(0 0% 0% / 0.22)",
},
dark: {
"2xs": "0px 6px 12px -3px hsl(0 0% 0% / 0.04)",
xs: "0px 6px 12px -3px hsl(0 0% 0% / 0.04)",
sm: "0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09)",
default: "0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09)",
md: "0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 2px 4px -4px hsl(0 0% 0% / 0.09)",
lg: "0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 4px 6px -4px hsl(0 0% 0% / 0.09)",
xl: "0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 8px 10px -4px hsl(0 0% 0% / 0.09)",
"2xl": "0px 6px 12px -3px hsl(0 0% 0% / 0.22)",
},
},
isPreset: true,
previewColors: {
primary: "oklch(0.7357 0.1641 34.7091)",
background: "oklch(0.9856 0.0084 56.3169)",
foreground: "oklch(0.3353 0.0132 2.7676)",
},
},
{
id: "catppuccin",
name: "Catppuccin",
description: "Pastel purple and teal inspired by Catppuccin Mocha",
light: {
"background": "oklch(0.9578 0.0058 264.5321)",
"foreground": "oklch(0.4355 0.0430 279.3250)",
"card": "oklch(1.0000 0 0)",
"card-foreground": "oklch(0.4355 0.0430 279.3250)",
"popover": "oklch(0.8575 0.0145 268.4756)",
"popover-foreground": "oklch(0.4355 0.0430 279.3250)",
"primary": "oklch(0.5547 0.2503 297.0156)",
"primary-foreground": "oklch(1.0000 0 0)",
"secondary": "oklch(0.8575 0.0145 268.4756)",
"secondary-foreground": "oklch(0.4355 0.0430 279.3250)",
"muted": "oklch(0.9060 0.0117 264.5071)",
"muted-foreground": "oklch(0.5471 0.0343 279.0837)",
"accent": "oklch(0.6820 0.1448 235.3822)",
"accent-foreground": "oklch(1.0000 0 0)",
"destructive": "oklch(0.5505 0.2155 19.8095)",
"destructive-foreground": "oklch(1.0000 0 0)",
"border": "oklch(0.8083 0.0174 271.1982)",
"input": "oklch(0.8575 0.0145 268.4756)",
"ring": "oklch(0.5547 0.2503 297.0156)",
"chart-1": "oklch(0.5547 0.2503 297.0156)",
"chart-2": "oklch(0.6820 0.1448 235.3822)",
"chart-3": "oklch(0.6250 0.1772 140.4448)",
"chart-4": "oklch(0.6920 0.2041 42.4293)",
"chart-5": "oklch(0.7141 0.1045 33.0967)",
"sidebar": "oklch(0.9335 0.0087 264.5206)",
"sidebar-foreground": "oklch(0.4355 0.0430 279.3250)",
"sidebar-primary": "oklch(0.5547 0.2503 297.0156)",
"sidebar-primary-foreground": "oklch(1.0000 0 0)",
"sidebar-accent": "oklch(0.6820 0.1448 235.3822)",
"sidebar-accent-foreground": "oklch(1.0000 0 0)",
"sidebar-border": "oklch(0.8083 0.0174 271.1982)",
"sidebar-ring": "oklch(0.5547 0.2503 297.0156)",
},
dark: {
"background": "oklch(0.2155 0.0254 284.0647)",
"foreground": "oklch(0.8787 0.0426 272.2767)",
"card": "oklch(0.2429 0.0304 283.9110)",
"card-foreground": "oklch(0.8787 0.0426 272.2767)",
"popover": "oklch(0.4037 0.0320 280.1520)",
"popover-foreground": "oklch(0.8787 0.0426 272.2767)",
"primary": "oklch(0.7871 0.1187 304.7693)",
"primary-foreground": "oklch(0.2429 0.0304 283.9110)",
"secondary": "oklch(0.4765 0.0340 278.6430)",
"secondary-foreground": "oklch(0.8787 0.0426 272.2767)",
"muted": "oklch(0.2973 0.0294 276.2144)",
"muted-foreground": "oklch(0.7510 0.0396 273.9320)",
"accent": "oklch(0.8467 0.0833 210.2545)",
"accent-foreground": "oklch(0.2429 0.0304 283.9110)",
"destructive": "oklch(0.7556 0.1297 2.7642)",
"destructive-foreground": "oklch(0.2429 0.0304 283.9110)",
"border": "oklch(0.3240 0.0319 281.9784)",
"input": "oklch(0.3240 0.0319 281.9784)",
"ring": "oklch(0.7871 0.1187 304.7693)",
"chart-1": "oklch(0.7871 0.1187 304.7693)",
"chart-2": "oklch(0.8467 0.0833 210.2545)",
"chart-3": "oklch(0.8577 0.1092 142.7153)",
"chart-4": "oklch(0.8237 0.1015 52.6294)",
"chart-5": "oklch(0.9226 0.0238 30.4919)",
"sidebar": "oklch(0.1828 0.0204 284.2039)",
"sidebar-foreground": "oklch(0.8787 0.0426 272.2767)",
"sidebar-primary": "oklch(0.7871 0.1187 304.7693)",
"sidebar-primary-foreground": "oklch(0.2429 0.0304 283.9110)",
"sidebar-accent": "oklch(0.8467 0.0833 210.2545)",
"sidebar-accent-foreground": "oklch(0.2429 0.0304 283.9110)",
"sidebar-border": "oklch(0.4037 0.0320 280.1520)",
"sidebar-ring": "oklch(0.7871 0.1187 304.7693)",
},
fonts: {
sans: "Montserrat, sans-serif",
serif: "Georgia, serif",
mono: "Fira Code, monospace",
},
fontSources: {
googleFonts: ["Montserrat", "Fira Code"],
},
tokens: {
radius: "0.35rem",
spacing: "0.25rem",
trackingNormal: "0em",
shadowColor: "hsl(240 30% 25%)",
shadowOpacity: "0.12",
shadowBlur: "6px",
shadowSpread: "0px",
shadowOffsetX: "0px",
shadowOffsetY: "4px",
},
shadows: {
light: {
"2xs": "0px 4px 6px 0px hsl(240 30% 25% / 0.06)",
xs: "0px 4px 6px 0px hsl(240 30% 25% / 0.06)",
sm: "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12)",
default: "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12)",
md: "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12)",
lg: "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12)",
xl: "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12)",
"2xl": "0px 4px 6px 0px hsl(240 30% 25% / 0.30)",
},
dark: {
"2xs": "0px 4px 6px 0px hsl(240 30% 25% / 0.06)",
xs: "0px 4px 6px 0px hsl(240 30% 25% / 0.06)",
sm: "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12)",
default: "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12)",
md: "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12)",
lg: "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12)",
xl: "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12)",
"2xl": "0px 4px 6px 0px hsl(240 30% 25% / 0.30)",
},
},
isPreset: true,
previewColors: {
primary: "oklch(0.5547 0.2503 297.0156)",
background: "oklch(0.9578 0.0058 264.5321)",
foreground: "oklch(0.4355 0.0430 279.3250)",
},
},
]
export function findPreset(