Skip to content

fix(appkit-ui): dark mode fixes for charts #452

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pkosiec merged 5 commits into from
Jun 16, 2026
Merged

fix(appkit-ui): dark mode fixes for charts #452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2d183f0
fix(appkit-ui): dark mode contrast for charts and native inputs
pkosiec Jun 15, 2026
e5770c5
refactor(appkit-ui): resolve chart chrome via useThemeColors
pkosiec Jun 15, 2026
bcda1bc
chore(appkit-ui): drop redundant comments from dark-mode chart code
pkosiec Jun 15, 2026
d3f153d
feat(appkit-ui): theme chart chrome via named tokens and a shared sub…
pkosiec Jun 15, 2026
7c12893
feat(appkit-ui): theme chart tooltips for dark mode
pkosiec Jun 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/dev-playground/client/src/components/lakebase/ActivityLogsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ export function ActivityLogsPanel() {
<CardContent>
{logsLoading && (
<div className="flex items-center gap-2 text-warning py-8">
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
<div className="w-2 h-2 bg-warning rounded-full animate-pulse" />
Loading activity logs...
</div>
)}
Expand Down
12 changes: 6 additions & 6 deletions apps/dev-playground/client/src/components/lakebase/OboProductsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,11 +100,11 @@ export function OboProductsPanel() {
return (
<div className="space-y-4">
{/* Header */}
<Card className="border-2 border-amber-200">
<Card className="border border-warning/30">
<CardHeader className="pb-0 gap-0">
<div className="flex items-center gap-3">
<div className="p-2 bg-amber-100 rounded-lg flex-shrink-0 self-start">
<ShieldCheck className="h-6 w-6 text-amber-600" />
<div className="p-2 bg-warning/10 rounded-lg flex-shrink-0 self-start">
<ShieldCheck className="h-6 w-6 text-warning" />
</div>
<div className="flex-1 min-w-0">
<CardTitle>Raw Driver — On-Behalf-Of (OBO)</CardTitle>
Expand Down Expand Up @@ -222,7 +222,7 @@ export function OboProductsPanel() {
{/* Side-by-side comparison */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{/* My products (OBO, RLS filtered) */}
<Card className="border-amber-200">
<Card className="border-warning/30">
<CardHeader>
<div className="flex items-center justify-between">
<div>
Expand All @@ -242,7 +242,7 @@ export function OboProductsPanel() {
<CardContent>
{myLoading && (
<div className="flex items-center gap-2 text-warning py-4">
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
<div className="w-2 h-2 bg-warning rounded-full animate-pulse" />
Loading...
</div>
)}
Expand Down Expand Up @@ -283,7 +283,7 @@ export function OboProductsPanel() {
<CardContent>
{allLoading && (
<div className="flex items-center gap-2 text-warning py-4">
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
<div className="w-2 h-2 bg-warning rounded-full animate-pulse" />
Loading...
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion apps/dev-playground/client/src/components/lakebase/OrdersPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,7 +338,7 @@ export function OrdersPanel() {
<CardContent>
{ordersLoading && (
<div className="flex items-center gap-2 text-warning py-8">
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
<div className="w-2 h-2 bg-warning rounded-full animate-pulse" />
Loading orders...
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion apps/dev-playground/client/src/components/lakebase/TasksPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ export function TasksPanel() {
<CardContent>
{tasksLoading && (
<div className="flex items-center gap-2 text-warning py-8">
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
<div className="w-2 h-2 bg-warning rounded-full animate-pulse" />
Loading tasks...
</div>
)}
Expand Down
67 changes: 62 additions & 5 deletions docs/static/appkit-ui/styles.gen.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -594,6 +594,9 @@
.h-3 {
height: calc(var(--spacing) * 3);
}
.h-3\.5 {
height: calc(var(--spacing) * 3.5);
}
.h-4 {
height: calc(var(--spacing) * 4);
}
Expand Down Expand Up @@ -726,6 +729,9 @@
.w-3 {
width: calc(var(--spacing) * 3);
}
.w-3\.5 {
width: calc(var(--spacing) * 3.5);
}
.w-3\/4 {
width: calc(3/4 * 100%);
}
Expand Down Expand Up @@ -1267,6 +1273,12 @@
border-color: color-mix(in oklab, var(--border) 50%, transparent);
}
}
.border-border\/60 {
border-color: var(--border);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--border) 60%, transparent);
}
}
.border-input {
border-color: var(--input);
}
Expand Down Expand Up @@ -1728,6 +1740,9 @@
.opacity-50 {
opacity: 50%;
}
.opacity-60 {
opacity: 60%;
}
.opacity-70 {
opacity: 70%;
}
Expand Down Expand Up @@ -5378,6 +5393,7 @@
}
:root {
--radius: 0.625rem;
color-scheme: light;
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0);
Expand Down Expand Up @@ -5425,6 +5441,10 @@
--chart-div-6: hsla(10, 60%, 65%, 1);
--chart-div-7: hsla(10, 72%, 50%, 1);
--chart-div-8: hsla(10, 80%, 40%, 1);
--chart-axis-label: hsla(240, 4%, 46%, 1);
--chart-axis-title: hsla(240, 6%, 10%, 1);
--chart-grid: hsla(240, 5%, 90%, 1);
--chart-tooltip-bg: hsla(0, 0%, 100%, 1);
--chart-1: var(--chart-cat-1);
--chart-2: var(--chart-cat-2);
--chart-3: var(--chart-cat-3);
Expand All @@ -5443,6 +5463,7 @@
--sidebar-ring: oklch(0.705 0.015 286.067);
}
.dark {
color-scheme: dark;
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885);
Expand All @@ -5466,11 +5487,42 @@
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.552 0.016 285.938);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--chart-cat-1: hsla(217, 91%, 65%, 1);
--chart-cat-2: hsla(160, 65%, 55%, 1);
--chart-cat-3: hsla(291, 60%, 65%, 1);
--chart-cat-4: hsla(38, 95%, 60%, 1);
--chart-cat-5: hsla(349, 80%, 62%, 1);
--chart-cat-6: hsla(189, 85%, 52%, 1);
--chart-cat-7: hsla(271, 65%, 70%, 1);
--chart-cat-8: hsla(142, 60%, 55%, 1);
--chart-seq-1: hsla(217, 50%, 25%, 1);
--chart-seq-2: hsla(217, 55%, 35%, 1);
--chart-seq-3: hsla(217, 60%, 45%, 1);
--chart-seq-4: hsla(217, 65%, 55%, 1);
--chart-seq-5: hsla(217, 70%, 62%, 1);
--chart-seq-6: hsla(217, 75%, 70%, 1);
--chart-seq-7: hsla(217, 80%, 78%, 1);
--chart-seq-8: hsla(217, 85%, 88%, 1);
--chart-div-1: hsla(217, 85%, 70%, 1);
--chart-div-2: hsla(217, 70%, 60%, 1);
--chart-div-3: hsla(217, 50%, 50%, 1);
--chart-div-4: hsla(217, 25%, 40%, 1);
--chart-div-5: hsla(10, 25%, 40%, 1);
--chart-div-6: hsla(10, 55%, 50%, 1);
--chart-div-7: hsla(10, 70%, 58%, 1);
--chart-div-8: hsla(10, 80%, 65%, 1);
--chart-1: var(--chart-cat-1);
--chart-2: var(--chart-cat-2);
--chart-3: var(--chart-cat-3);
--chart-4: var(--chart-cat-4);
--chart-5: var(--chart-cat-5);
--chart-6: var(--chart-cat-6);
--chart-7: var(--chart-cat-7);
--chart-8: var(--chart-cat-8);
--chart-axis-label: hsla(240, 5%, 65%, 1);
--chart-axis-title: hsla(0, 0%, 98%, 1);
--chart-grid: hsla(0, 0%, 100%, 0.1);
--chart-tooltip-bg: hsla(240, 6%, 13%, 1);
--sidebar: oklch(0.21 0.006 285.885);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
Expand All @@ -5482,6 +5534,7 @@
}
@media (prefers-color-scheme: dark) {
:root:not(.light) {
color-scheme: dark;
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885);
Expand Down Expand Up @@ -5534,6 +5587,10 @@
--chart-div-6: hsla(10, 55%, 50%, 1);
--chart-div-7: hsla(10, 70%, 58%, 1);
--chart-div-8: hsla(10, 80%, 65%, 1);
--chart-axis-label: hsla(240, 5%, 65%, 1);
--chart-axis-title: hsla(0, 0%, 98%, 1);
--chart-grid: hsla(0, 0%, 100%, 0.1);
--chart-tooltip-bg: hsla(240, 6%, 13%, 1);
--chart-1: var(--chart-cat-1);
--chart-2: var(--chart-cat-2);
--chart-3: var(--chart-cat-3);
Expand Down
Loading
Loading