openstatus.dev
Openstatus
www.openstatus.dev
feat: theme sidebar (#1489)
* wip:
* wip:
* wip:
* refactor: folder structure
* fix: build
* wip:
* fix: try catch
* fix: tooltip
* fix: style
authored by
Maximilian Kaske
and committed by
GitHub
c0d3ebc2
dd2776f2
+963
-64
+55
-13
apps/status-page/src/app/(public)/client.tsx
+55
-13
apps/status-page/src/app/(public)/client.tsx
···
18
18
StatusTitle,
19
19
} from "@/components/status-page/status";
20
20
import { StatusBanner } from "@/components/status-page/status-banner";
21
+
import {
22
+
StatusEvent,
23
+
StatusEventAffected,
24
+
StatusEventAffectedBadge,
25
+
StatusEventContent,
26
+
StatusEventDate,
27
+
StatusEventTimelineReport,
28
+
StatusEventTitle,
29
+
} from "@/components/status-page/status-events";
21
30
import { StatusMonitor } from "@/components/status-page/status-monitor";
22
31
import { ThemePalettePicker } from "@/components/themes/theme-palette-picker";
23
32
import { ThemeSelect } from "@/components/themes/theme-select";
···
54
63
export function Client() {
55
64
const { resolvedTheme } = useTheme();
56
65
const [isMounted, setIsMounted] = useState(false);
57
-
const [searchParams, setSearchParams] = useQueryStates(searchParamsParsers);
58
-
const { q, t } = searchParams;
66
+
const [{ q, t }, setSearchParams] = useQueryStates(searchParamsParsers);
59
67
const theme = t ? THEMES[t as keyof typeof THEMES] : undefined;
60
68
61
69
useEffect(() => {
···
92
100
{theme?.name}
93
101
</div>
94
102
<div className="sm:p-8">
95
-
<ThemePlaygroundMonitor className="scale-80 sm:scale-100" />
103
+
<ThemePlaygroundStatus className="scale-80 sm:scale-100" />
96
104
</div>
97
105
</div>
98
106
</div>
···
110
118
/>
111
119
<ThemePalettePicker />
112
120
</div>
113
-
<ul className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
121
+
<ul className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
114
122
{THEME_KEYS.filter((k) => {
115
123
const theme = THEMES[k];
116
124
return (
···
147
155
style={style as React.CSSProperties}
148
156
inert
149
157
>
150
-
<ThemePlaygroundMonitor className="pointer-events-none scale-80" />
158
+
<ThemePlaygroundStatus className="pointer-events-none scale-80" />
151
159
</div>
152
160
) : (
153
161
<Skeleton className="absolute h-full w-full" />
154
162
)}
155
163
</div>
156
164
<div className="flex items-start justify-between gap-2">
157
-
<div className="space-y-0.5">
158
-
<div className="font-medium text-foreground text-sm leading-none">
165
+
<div className="space-y-0.5 truncate">
166
+
<div className="font-medium text-foreground text-sm leading-none truncate">
159
167
{theme.name}
160
168
</div>
161
169
<div className="font-mono text-xs">
···
248
256
<Separator />
249
257
<Section>
250
258
<div className="prose dark:prose-invert prose-sm max-w-none">
251
-
<blockquote>
252
-
Ideally, we would allow you to customize your theme with a{" "}
253
-
<code>ThemePalettePicker</code> component to easily test and export
254
-
your theme. Contributions are welcome!
255
-
</blockquote>
256
259
<p>
257
260
Why don't we allow custom css styles to be overridden and only
258
261
support themes?
···
273
276
);
274
277
}
275
278
276
-
function ThemePlaygroundMonitor({
279
+
function ThemePlaygroundStatus({
277
280
className,
278
281
...props
279
282
}: React.ComponentProps<"div"> & {}) {
···
307
310
</div>
308
311
);
309
312
}
313
+
314
+
// NOTE: we could add a tabs component here to switch between status and events
315
+
function ThemePlaygroundEvents({
316
+
className,
317
+
...props
318
+
}: React.ComponentProps<"div"> & {}) {
319
+
const trpc = useTRPC();
320
+
const { data: report } = useQuery(
321
+
trpc.statusPage.getNoopReport.queryOptions(),
322
+
);
323
+
const firstUpdate = report?.statusReportUpdates[0];
324
+
325
+
if (!firstUpdate || !report) return null;
326
+
327
+
return (
328
+
<div className={cn("h-full w-full", className)} {...props}>
329
+
<Status variant="success">
330
+
<StatusEvent>
331
+
<StatusEventDate date={firstUpdate.date} className="lg:flex-row" />
332
+
<StatusEventContent hoverable={false}>
333
+
<StatusEventTitle className="inline-flex gap-1">
334
+
{report.title}
335
+
</StatusEventTitle>
336
+
{report.monitorsToStatusReports.length > 0 ? (
337
+
<StatusEventAffected>
338
+
{report.monitorsToStatusReports.map((affected) => (
339
+
<StatusEventAffectedBadge key={affected.monitor.id}>
340
+
{affected.monitor.name}
341
+
</StatusEventAffectedBadge>
342
+
))}
343
+
</StatusEventAffected>
344
+
) : null}
345
+
<StatusEventTimelineReport updates={report.statusReportUpdates} />
346
+
</StatusEventContent>
347
+
</StatusEvent>
348
+
</Status>
349
+
</div>
350
+
);
351
+
}
+31
-6
apps/status-page/src/app/(public)/layout.tsx
+31
-6
apps/status-page/src/app/(public)/layout.tsx
···
1
1
import { Link } from "@/components/common/link";
2
2
import { ThemeProvider } from "@/components/themes/theme-provider";
3
+
import {
4
+
SidebarTrigger,
5
+
ThemeSidebar,
6
+
} from "@/components/themes/theme-sidebar";
7
+
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
3
8
import { Toaster } from "@/components/ui/sonner";
4
9
import { generateThemeStyles } from "@openstatus/theme-store";
5
10
import PlausibleProvider from "next-plausible";
11
+
import { Suspense } from "react";
12
+
13
+
const SIDEBAR_WIDTH = "20rem";
14
+
const SIDEBAR_WIDTH_MOBILE = "18rem";
6
15
7
16
export default async function Layout({
8
17
children,
···
17
26
dangerouslySetInnerHTML={{ __html: generateThemeStyles() }}
18
27
/>
19
28
<ThemeProvider attribute="class" enableSystem disableTransitionOnChange>
20
-
<main>{children}</main>
21
-
<footer className="flex items-center justify-center gap-4 p-4 text-center font-mono text-muted-foreground text-sm">
22
-
<p>
23
-
powered by <Link href="https://openstatus.dev">openstatus</Link>
24
-
</p>
25
-
</footer>
29
+
<SidebarProvider
30
+
defaultOpen={false}
31
+
style={
32
+
{
33
+
"--sidebar-width": SIDEBAR_WIDTH,
34
+
"--sidebar-width-mobile": SIDEBAR_WIDTH_MOBILE,
35
+
} as React.CSSProperties
36
+
}
37
+
>
38
+
<SidebarInset className="relative">
39
+
<SidebarTrigger className="absolute top-2 right-2" />
40
+
<main className="mx-auto">{children}</main>
41
+
<footer className="flex items-center justify-center gap-4 p-4 text-center font-mono text-muted-foreground text-sm">
42
+
<p>
43
+
powered by <Link href="https://openstatus.dev">openstatus</Link>
44
+
</p>
45
+
</footer>
46
+
</SidebarInset>
47
+
<Suspense>
48
+
<ThemeSidebar />
49
+
</Suspense>
50
+
</SidebarProvider>
26
51
<Toaster richColors expand />
27
52
</ThemeProvider>
28
53
</PlausibleProvider>
+4
-2
apps/status-page/src/app/(public)/search-params.ts
+4
-2
apps/status-page/src/app/(public)/search-params.ts
···
1
1
import { THEME_KEYS } from "@openstatus/theme-store";
2
2
import {
3
3
createSearchParamsCache,
4
+
parseAsBoolean,
4
5
parseAsString,
5
6
parseAsStringEnum,
6
7
} from "nuqs/server";
7
8
8
9
export const searchParamsParsers = {
9
-
q: parseAsString,
10
-
t: parseAsStringEnum(THEME_KEYS).withDefault("default"),
10
+
q: parseAsString, // q = query
11
+
t: parseAsStringEnum(THEME_KEYS).withDefault("default"), // t = theme
12
+
b: parseAsBoolean.withDefault(false), // b = builder
11
13
};
12
14
13
15
export const searchParamsCache = createSearchParamsCache(searchParamsParsers);
+23
-26
apps/status-page/src/components/themes/theme-palette-picker.tsx
+23
-26
apps/status-page/src/components/themes/theme-palette-picker.tsx
···
1
+
"use client";
2
+
3
+
import { Button } from "@/components/ui/button";
4
+
import { Kbd, KbdGroup } from "@/components/ui/kbd";
5
+
import { useSidebar } from "@/components/ui/sidebar";
1
6
import {
2
-
Popover,
3
-
PopoverContent,
4
-
PopoverTrigger,
5
-
} from "@/components/ui/popover";
7
+
Tooltip,
8
+
TooltipContent,
9
+
TooltipTrigger,
10
+
} from "@/components/ui/tooltip";
6
11
import { Palette } from "lucide-react";
7
-
import {
8
-
EmptyStateContainer,
9
-
EmptyStateDescription,
10
-
EmptyStateTitle,
11
-
} from "../content/empty-state";
12
-
import { Button } from "../ui/button";
13
12
14
13
export function ThemePalettePicker() {
14
+
const { toggleSidebar } = useSidebar();
15
15
return (
16
-
<Popover>
17
-
<PopoverTrigger asChild>
18
-
<Button size="icon" variant="outline">
16
+
<Tooltip>
17
+
<TooltipTrigger asChild>
18
+
<Button size="icon" variant="outline" onClick={toggleSidebar}>
19
19
<Palette className="size-4" />
20
20
</Button>
21
-
</PopoverTrigger>
22
-
<PopoverContent side="bottom" align="end" className="w-90">
23
-
<EmptyStateContainer>
24
-
<EmptyStateTitle>
25
-
Help us ship an epic palette picker!
26
-
</EmptyStateTitle>
27
-
<EmptyStateDescription>
28
-
We are looking for contributions to build an epic palette picker to
29
-
help others generate and export their own themes.
30
-
</EmptyStateDescription>
31
-
</EmptyStateContainer>
32
-
</PopoverContent>
33
-
</Popover>
21
+
</TooltipTrigger>
22
+
<TooltipContent className="flex items-center gap-2">
23
+
Toggle Sidebar{" "}
24
+
<KbdGroup>
25
+
<Kbd>⌘</Kbd>
26
+
<span>+</span>
27
+
<Kbd>B</Kbd>
28
+
</KbdGroup>
29
+
</TooltipContent>
30
+
</Tooltip>
34
31
);
35
32
}
+1
-1
apps/status-page/src/components/ui/checkbox.tsx
+1
-1
apps/status-page/src/components/ui/checkbox.tsx
···
14
14
<CheckboxPrimitive.Root
15
15
data-slot="checkbox"
16
16
className={cn(
17
-
"peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:ring-destructive/40",
17
+
"peer size-4 shrink-0 rounded-xs border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:ring-destructive/40",
18
18
className,
19
19
)}
20
20
{...props}
+170
apps/status-page/src/components/ui/input-group.tsx
+170
apps/status-page/src/components/ui/input-group.tsx
···
1
+
"use client";
2
+
3
+
import { type VariantProps, cva } from "class-variance-authority";
4
+
import type * as React from "react";
5
+
6
+
import { Button } from "@/components/ui/button";
7
+
import { Input } from "@/components/ui/input";
8
+
import { Textarea } from "@/components/ui/textarea";
9
+
import { cn } from "@/lib/utils";
10
+
11
+
function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
12
+
return (
13
+
<div
14
+
data-slot="input-group"
15
+
role="group"
16
+
className={cn(
17
+
"group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs outline-none transition-[color,box-shadow] dark:bg-input/30",
18
+
"h-9 min-w-0 has-[>textarea]:h-auto",
19
+
20
+
// Variants based on alignment.
21
+
"has-[>[data-align=inline-start]]:[&>input]:pl-2",
22
+
"has-[>[data-align=inline-end]]:[&>input]:pr-2",
23
+
"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
24
+
"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
25
+
26
+
// Focus state.
27
+
"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
28
+
29
+
// Error state.
30
+
"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
31
+
32
+
className,
33
+
)}
34
+
{...props}
35
+
/>
36
+
);
37
+
}
38
+
39
+
const inputGroupAddonVariants = cva(
40
+
"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
41
+
{
42
+
variants: {
43
+
align: {
44
+
"inline-start":
45
+
"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
46
+
"inline-end":
47
+
"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
48
+
"block-start":
49
+
"order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
50
+
"block-end":
51
+
"order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
52
+
},
53
+
},
54
+
defaultVariants: {
55
+
align: "inline-start",
56
+
},
57
+
},
58
+
);
59
+
60
+
function InputGroupAddon({
61
+
className,
62
+
align = "inline-start",
63
+
...props
64
+
}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
65
+
return (
66
+
<div
67
+
role="group"
68
+
data-slot="input-group-addon"
69
+
data-align={align}
70
+
className={cn(inputGroupAddonVariants({ align }), className)}
71
+
onClick={(e) => {
72
+
if ((e.target as HTMLElement).closest("button")) {
73
+
return;
74
+
}
75
+
e.currentTarget.parentElement?.querySelector("input")?.focus();
76
+
}}
77
+
{...props}
78
+
/>
79
+
);
80
+
}
81
+
82
+
const inputGroupButtonVariants = cva(
83
+
"text-sm shadow-none flex gap-2 items-center",
84
+
{
85
+
variants: {
86
+
size: {
87
+
xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
88
+
sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
89
+
"icon-xs":
90
+
"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
91
+
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
92
+
},
93
+
},
94
+
defaultVariants: {
95
+
size: "xs",
96
+
},
97
+
},
98
+
);
99
+
100
+
function InputGroupButton({
101
+
className,
102
+
type = "button",
103
+
variant = "ghost",
104
+
size = "xs",
105
+
...props
106
+
}: Omit<React.ComponentProps<typeof Button>, "size"> &
107
+
VariantProps<typeof inputGroupButtonVariants>) {
108
+
return (
109
+
<Button
110
+
type={type}
111
+
data-size={size}
112
+
variant={variant}
113
+
className={cn(inputGroupButtonVariants({ size }), className)}
114
+
{...props}
115
+
/>
116
+
);
117
+
}
118
+
119
+
function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
120
+
return (
121
+
<span
122
+
className={cn(
123
+
"flex items-center gap-2 text-muted-foreground text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
124
+
className,
125
+
)}
126
+
{...props}
127
+
/>
128
+
);
129
+
}
130
+
131
+
function InputGroupInput({
132
+
className,
133
+
...props
134
+
}: React.ComponentProps<"input">) {
135
+
return (
136
+
<Input
137
+
data-slot="input-group-control"
138
+
className={cn(
139
+
"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
140
+
className,
141
+
)}
142
+
{...props}
143
+
/>
144
+
);
145
+
}
146
+
147
+
function InputGroupTextarea({
148
+
className,
149
+
...props
150
+
}: React.ComponentProps<"textarea">) {
151
+
return (
152
+
<Textarea
153
+
data-slot="input-group-control"
154
+
className={cn(
155
+
"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
156
+
className,
157
+
)}
158
+
{...props}
159
+
/>
160
+
);
161
+
}
162
+
163
+
export {
164
+
InputGroup,
165
+
InputGroupAddon,
166
+
InputGroupButton,
167
+
InputGroupText,
168
+
InputGroupInput,
169
+
InputGroupTextarea,
170
+
};
+28
apps/status-page/src/components/ui/kbd.tsx
+28
apps/status-page/src/components/ui/kbd.tsx
···
1
+
import { cn } from "@/lib/utils";
2
+
3
+
function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
4
+
return (
5
+
<kbd
6
+
data-slot="kbd"
7
+
className={cn(
8
+
"pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm bg-muted px-1 font-medium font-sans text-muted-foreground text-xs",
9
+
"[&_svg:not([class*='size-'])]:size-3",
10
+
"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
11
+
className,
12
+
)}
13
+
{...props}
14
+
/>
15
+
);
16
+
}
17
+
18
+
function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
19
+
return (
20
+
<kbd
21
+
data-slot="kbd-group"
22
+
className={cn("inline-flex items-center gap-1", className)}
23
+
{...props}
24
+
/>
25
+
);
26
+
}
27
+
28
+
export { Kbd, KbdGroup };
+88
packages/api/src/router/statusPage.ts
+88
packages/api/src/router/statusPage.ts
···
413
413
return _report;
414
414
}),
415
415
416
+
getNoopReport: publicProcedure.query(async () => {
417
+
const date = new Date(new Date().setDate(new Date().getDate() - 4));
418
+
419
+
const resolvedDate = new Date(date.setMinutes(date.getMinutes() - 81));
420
+
const monitoringDate = new Date(date.setMinutes(date.getMinutes() - 54));
421
+
const identifiedDate = new Date(date.setMinutes(date.getMinutes() - 32));
422
+
const investigatingDate = new Date(date.setMinutes(date.getMinutes() - 4));
423
+
424
+
return {
425
+
id: 1,
426
+
pageId: 1,
427
+
status: "investigating" as const,
428
+
title: "API Latency Issues",
429
+
message: "We are currently investigating elevated API response times.",
430
+
createdAt: new Date(new Date().setDate(new Date().getDate() - 2)),
431
+
updatedAt: new Date(new Date().setDate(new Date().getDate() - 1)),
432
+
monitorsToStatusReports: [
433
+
{
434
+
monitorId: 1,
435
+
statusReportId: 1,
436
+
monitor: {
437
+
id: 1,
438
+
jobType: "http" as const,
439
+
periodicity: "30s" as const,
440
+
status: "active" as const,
441
+
active: true,
442
+
regions: ["ams", "fra"],
443
+
url: "https://api.example.com",
444
+
name: "API Monitor",
445
+
description: "Main API endpoint",
446
+
headers: null,
447
+
body: null,
448
+
method: "GET" as const,
449
+
public: true,
450
+
deletedAt: null,
451
+
createdAt: new Date(new Date().setDate(new Date().getDate() - 30)),
452
+
updatedAt: new Date(new Date().setDate(new Date().getDate() - 30)),
453
+
workspaceId: 1,
454
+
timeout: 30000,
455
+
degradedAfter: null,
456
+
assertions: null,
457
+
},
458
+
},
459
+
],
460
+
statusReportUpdates: [
461
+
{
462
+
id: 4,
463
+
statusReportId: 1,
464
+
status: "resolved" as const,
465
+
message:
466
+
"All systems are operating normally. The issue has been fully resolved.",
467
+
date: resolvedDate,
468
+
createdAt: resolvedDate,
469
+
updatedAt: resolvedDate,
470
+
},
471
+
{
472
+
id: 3,
473
+
statusReportId: 1,
474
+
status: "monitoring" as const,
475
+
message:
476
+
"We are continuing to monitor the situation to ensure that the issue is resolved.",
477
+
date: monitoringDate,
478
+
createdAt: monitoringDate,
479
+
updatedAt: monitoringDate,
480
+
},
481
+
{
482
+
id: 2,
483
+
statusReportId: 1,
484
+
status: "identified" as const,
485
+
message: "The issue has been identified and a fix is being deployed.",
486
+
date: identifiedDate,
487
+
createdAt: identifiedDate,
488
+
updatedAt: identifiedDate,
489
+
},
490
+
{
491
+
id: 1,
492
+
statusReportId: 1,
493
+
status: "investigating" as const,
494
+
message:
495
+
"We are investigating reports of increased latency on our API endpoints.",
496
+
date: investigatingDate,
497
+
createdAt: investigatingDate,
498
+
updatedAt: investigatingDate,
499
+
},
500
+
],
501
+
};
502
+
}),
503
+
416
504
getMonitors: publicProcedure
417
505
.input(z.object({ slug: z.string().toLowerCase() }))
418
506
.query(async (opts) => {
+5
-3
packages/theme-store/README.md
+5
-3
packages/theme-store/README.md
···
21
21
22
22
## Creating a New Theme
23
23
24
-
> **Help us ship an epic palette picker!**
25
-
> We are looking for contributions to build an epic [palette picker](https://github.com/openstatusHQ/openstatus/blob/main/apps/status-page/src/components/themes/theme-palette-picker.tsx) to help others generate and export their own themes.
24
+
Want to contribute a theme?
26
25
27
-
Want to contribute a theme? Follow these steps:
26
+
We only support themes via GitHub contributions to keep a certain version control. You can:
27
+
28
+
- Configure your [themes.openstatus.dev](https://themes.openstatus.dev/?b=true) and copy the configuration
29
+
- Directly test by running it locally
28
30
29
31
### 1. Run the project
30
32
+7
-4
packages/theme-store/src/index.ts
+7
-4
packages/theme-store/src/index.ts
···
2
2
import { GITHUB_HIGH_CONTRAST_THEME } from "./github";
3
3
import { OPENSTATUS_ROUNDED_THEME, OPENSTATUS_THEME } from "./openstatus";
4
4
import { SUPABASE_THEME } from "./supabase";
5
-
import type { Theme, ThemeMap } from "./types";
5
+
import type { Theme, ThemeDefinition, ThemeMap } from "./types";
6
6
import { assertUniqueThemeIds } from "./utils";
7
7
8
8
const THEMES_LIST = [
···
23
23
export const THEME_KEYS = THEMES_LIST.map((theme) => theme.id);
24
24
export type ThemeKey = (typeof THEME_KEYS)[number];
25
25
26
-
export function generateThemeStyles(themeKey?: string) {
26
+
export function generateThemeStyles(
27
+
themeKey?: string,
28
+
overrides?: Partial<ThemeDefinition>,
29
+
) {
27
30
let theme = themeKey ? THEMES[themeKey] : undefined;
28
31
29
32
if (!theme) {
···
31
34
theme = OPENSTATUS_THEME;
32
35
}
33
36
34
-
const lightVars = Object.entries(theme.light)
37
+
const lightVars = Object.entries({ ...theme.light, ...overrides?.light })
35
38
.map(([key, value]) => `${key}: ${value};`)
36
39
.join("\n ");
37
-
const darkVars = Object.entries(theme.dark)
40
+
const darkVars = Object.entries({ ...theme.dark, ...overrides?.dark })
38
41
.map(([key, value]) => `${key}: ${value};`)
39
42
.join("\n ");
40
43