Unified sidebar header + 5 new themes (#95)
* 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:
GitHub
parent
a0afbf3d70
commit
2b95ae8f15
@ -160,32 +160,6 @@ export function AppSidebar({
|
|||||||
return (
|
return (
|
||||||
<Sidebar collapsible="icon" {...props}>
|
<Sidebar collapsible="icon" {...props}>
|
||||||
<SidebarHeader>
|
<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} />
|
<OrgSwitcher activeOrgId={activeOrgId} activeOrgName={activeOrgName} />
|
||||||
</SidebarHeader>
|
</SidebarHeader>
|
||||||
<SidebarContent>
|
<SidebarContent>
|
||||||
|
|||||||
@ -5,16 +5,18 @@ import { useRouter } from "next/navigation"
|
|||||||
import {
|
import {
|
||||||
IconBuilding,
|
IconBuilding,
|
||||||
IconCheck,
|
IconCheck,
|
||||||
IconChevronDown,
|
IconSelector,
|
||||||
IconUser,
|
IconUser,
|
||||||
} from "@tabler/icons-react"
|
} from "@tabler/icons-react"
|
||||||
|
|
||||||
import { getUserOrganizations, switchOrganization } from "@/app/actions/organizations"
|
import {
|
||||||
|
getUserOrganizations,
|
||||||
|
switchOrganization,
|
||||||
|
} from "@/app/actions/organizations"
|
||||||
import {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownMenuContent,
|
DropdownMenuContent,
|
||||||
DropdownMenuItem,
|
DropdownMenuItem,
|
||||||
DropdownMenuLabel,
|
|
||||||
DropdownMenuSeparator,
|
DropdownMenuSeparator,
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from "@/components/ui/dropdown-menu"
|
} from "@/components/ui/dropdown-menu"
|
||||||
@ -24,7 +26,6 @@ import {
|
|||||||
SidebarMenuItem,
|
SidebarMenuItem,
|
||||||
useSidebar,
|
useSidebar,
|
||||||
} from "@/components/ui/sidebar"
|
} from "@/components/ui/sidebar"
|
||||||
import { Badge } from "@/components/ui/badge"
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
type OrgInfo = {
|
type OrgInfo = {
|
||||||
@ -41,7 +42,7 @@ export function OrgSwitcher({
|
|||||||
}: {
|
}: {
|
||||||
readonly activeOrgId: string | null
|
readonly activeOrgId: string | null
|
||||||
readonly activeOrgName: string | null
|
readonly activeOrgName: string | null
|
||||||
}): React.ReactElement | null {
|
}): React.ReactElement {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const { isMobile } = useSidebar()
|
const { isMobile } = useSidebar()
|
||||||
const [orgs, setOrgs] = React.useState<readonly OrgInfo[]>([])
|
const [orgs, setOrgs] = React.useState<readonly OrgInfo[]>([])
|
||||||
@ -69,40 +70,41 @@ export function OrgSwitcher({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!activeOrgId || !activeOrgName) {
|
const displayName = activeOrgName ?? "Compass"
|
||||||
return null
|
const hasOrgs = orgs.length > 1
|
||||||
}
|
|
||||||
|
|
||||||
const activeOrg = orgs.find((org) => org.id === activeOrgId)
|
|
||||||
const orgInitial = activeOrgName[0]?.toUpperCase() ?? "O"
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SidebarMenu>
|
<SidebarMenu>
|
||||||
<SidebarMenuItem>
|
<SidebarMenuItem>
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild disabled={!hasOrgs}>
|
||||||
<SidebarMenuButton
|
<SidebarMenuButton
|
||||||
size="lg"
|
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">
|
<span
|
||||||
{activeOrg?.type === "personal" ? (
|
aria-label="Compass"
|
||||||
<IconUser className="size-4" />
|
className="!size-5 shrink-0 block bg-current"
|
||||||
) : (
|
style={{
|
||||||
<IconBuilding className="size-4" />
|
maskImage: "url(/logo-black.png)",
|
||||||
)}
|
maskSize: "contain",
|
||||||
</div>
|
maskRepeat: "no-repeat",
|
||||||
<div className="flex min-w-0 flex-1 flex-col items-start text-left">
|
WebkitMaskImage: "url(/logo-black.png)",
|
||||||
<span className="truncate text-sm font-medium text-sidebar-foreground">
|
WebkitMaskSize: "contain",
|
||||||
{activeOrgName}
|
WebkitMaskRepeat: "no-repeat",
|
||||||
</span>
|
}}
|
||||||
{activeOrg && (
|
/>
|
||||||
<span className="truncate text-xs text-sidebar-foreground/60">
|
<span className="truncate text-sm font-semibold">
|
||||||
{activeOrg.role}
|
{displayName}
|
||||||
</span>
|
</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>
|
</SidebarMenuButton>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent
|
<DropdownMenuContent
|
||||||
@ -111,46 +113,30 @@ export function OrgSwitcher({
|
|||||||
align="start"
|
align="start"
|
||||||
sideOffset={4}
|
sideOffset={4}
|
||||||
>
|
>
|
||||||
<DropdownMenuLabel className="text-xs text-muted-foreground">
|
{orgs.map((org, i) => {
|
||||||
Organizations
|
|
||||||
</DropdownMenuLabel>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
{orgs.map((org) => {
|
|
||||||
const isActive = org.id === activeOrgId
|
const isActive = org.id === activeOrgId
|
||||||
const orgIcon =
|
const OrgIcon =
|
||||||
org.type === "personal" ? IconUser : IconBuilding
|
org.type === "personal" ? IconUser : IconBuilding
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<React.Fragment key={org.id}>
|
||||||
|
{i > 0 && <DropdownMenuSeparator />}
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
key={org.id}
|
|
||||||
onClick={() => void handleOrgSwitch(org.id)}
|
onClick={() => void handleOrgSwitch(org.id)}
|
||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
className={cn(
|
className="gap-2 px-2 py-1.5"
|
||||||
"flex items-center gap-2 px-2 py-1.5",
|
|
||||||
isActive && "bg-accent"
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
<div className="flex size-6 shrink-0 items-center justify-center rounded-md bg-muted">
|
<OrgIcon className="size-4 shrink-0 opacity-60" />
|
||||||
{React.createElement(orgIcon, { className: "size-3" })}
|
<span className="truncate font-medium">
|
||||||
</div>
|
|
||||||
<div className="flex min-w-0 flex-1 flex-col">
|
|
||||||
<span className="truncate text-sm font-medium">
|
|
||||||
{org.name}
|
{org.name}
|
||||||
</span>
|
</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 && (
|
{isActive && (
|
||||||
<IconCheck className="ml-1 size-4 shrink-0 text-primary" />
|
<IconCheck
|
||||||
|
className="ml-auto size-4 shrink-0 text-primary"
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
|
|||||||
@ -1202,6 +1202,611 @@ export const THEME_PRESETS: ReadonlyArray<ThemeDefinition> = [
|
|||||||
foreground: "oklch(0.4063 0.0255 40.3627)",
|
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(
|
export function findPreset(
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user