Skip to content

Commit 13ee2d1

Browse files
ken-zlaiken-zlai
authored
light mode (#468)
## Summary https://github.com/user-attachments/assets/538bcac8-94bd-4620-a068-d6b91c2bf4ef ## Checklist - [ ] Added Unit Tests - [ ] Covered by existing CI - [ ] Integration tested - [ ] Documentation update <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a Mode Switcher allowing users to toggle between light, dark, and system themes. - Added a dedicated Logo component for consistent branding in the navigation bar. - Implemented a dynamic dark mode mechanism that adjusts based on user preferences. - **Style** - Enhanced the overall visual theme with updated color palettes for backgrounds, borders, charts, and UI elements. - Improved styling in expandable cells, badges, tabs, and navigational elements for a refreshed look. - Added a new color scale for "success" in the Tailwind CSS configuration. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent 0ea24ad commit 13ee2d1

File tree

17 files changed

+241
-44
lines changed

17 files changed

+241
-44
lines changed

‎frontend/package-lock.json

Lines changed: 18 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,11 @@
6868
"clsx": "^2.1.1",
6969
"d3": "^7.9.0",
7070
"dotenv": "^16.4.7",
71-
"layerchart": "^1.0.3",
71+
"layerchart": "^1.0.5",
7272
"lodash": "^4.17.21",
73+
"mode-watcher": "^0.5.1",
7374
"svelte-inspect-value": "0.3.0",
74-
"svelte-ux": "^1.0.0",
75+
"svelte-ux": "^1.0.1",
7576
"tailwind-merge": "^2.6.0",
7677
"tailwind-variants": "^0.3.1"
7778
},

‎frontend/src/app.css

Lines changed: 111 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,19 +40,21 @@
4040

4141
@layer base {
4242
:root {
43-
--background: 0 0% 100%;
43+
--background: var(--neutral-100);
4444
--foreground: 0 0% 3.9%;
4545

4646
--muted: 0 0% 96.1%;
47-
--muted-foreground: 0 0% 45.1%;
47+
--muted-foreground: var(--neutral-800);
48+
--muted-icon-neutral: var(--neutral-700);
49+
--muted-icon-primary: var(--primary-700);
4850

4951
--popover: 0 0% 100%;
5052
--popover-foreground: 0 0% 3.9%;
5153

5254
--card: 0 0% 100%;
5355
--card-foreground: 0 0% 3.9%;
5456

55-
--border: 0 0% 89.8%;
57+
--border: var(--neutral-300);
5658
--input: 0 0% 89.8%;
5759

5860
--primary: 0 0% 9%;
@@ -70,6 +72,101 @@
7072
--ring: 0 0% 3.9%;
7173

7274
--radius: 0.5rem;
75+
76+
--neutral-50: 0 0% 98%;
77+
--neutral-100: 0 0% 95%;
78+
--neutral-200: 0 0% 93%;
79+
--neutral-300: 0 0% 90%;
80+
--neutral-400: 0 0% 87%;
81+
--neutral-500: 0 0% 79%;
82+
--neutral-600: 0 0% 71%;
83+
--neutral-700: 0 0% 63%;
84+
--neutral-800: 0 0% 39%;
85+
--neutral-900: 0 0% 23%;
86+
--neutral-950: 0 0% 5%;
87+
88+
--primary-50: 351 100% 97%;
89+
--primary-100: 354 100% 93%;
90+
--primary-200: 349 100% 88%;
91+
--primary-300: 345 95% 84%;
92+
--primary-400: 345 90% 79%;
93+
--primary-500: 346 85% 73%;
94+
--primary-600: 347 80% 55%;
95+
--primary-700: 347 75% 44%;
96+
--primary-800: 345 70% 37%;
97+
--primary-900: 348 65% 30%;
98+
--primary-950: 352 60% 17%;
99+
100+
--warning-50: 41 66% 10%;
101+
--warning-100: 40 29% 8%;
102+
--warning-200: 41 66% 10%;
103+
--warning-300: 41 100% 12%;
104+
--warning-400: 42 100% 14%;
105+
--warning-500: 43 81% 19%;
106+
--warning-600: 42 58% 26%;
107+
--warning-700: 42 56% 34%;
108+
--warning-800: 44 100% 55%;
109+
--warning-900: 45 100% 60%;
110+
--warning-950: 40 100% 86%;
111+
112+
--success-50: 151 63% 92%;
113+
--success-100: 152 60% 85%;
114+
--success-200: 153 65% 75%;
115+
--success-300: 155 70% 65%;
116+
--success-400: 157 80% 50%;
117+
--success-500: 159 98% 23%;
118+
--success-600: 159 90% 20%;
119+
--success-700: 159 80% 17%;
120+
--success-800: 159 70% 14%;
121+
--success-900: 159 60% 12%;
122+
--success-950: 159 46% 11%;
123+
124+
/* Base colors for reuse */
125+
--color-failed: 10 35% 55%;
126+
--color-failed-border: 10 32% 48%;
127+
--color-failed-active: 10 80% 30%;
128+
129+
--color-running: 250 40% 60%;
130+
--color-running-border: 250 38% 52%;
131+
--color-running-active: 250 80% 30%;
132+
133+
/* Job status colors using base variables */
134+
--job-RUNNING-bg: var(--color-running);
135+
--job-RUNNING-border: var(--color-running-border);
136+
--job-RUNNING-active-border: var(--color-running-active);
137+
138+
--job-WAITING_FOR_UPSTREAM-bg: 210 40% 58%;
139+
--job-WAITING_FOR_UPSTREAM-border: 210 38% 50%;
140+
--job-WAITING_FOR_UPSTREAM-active-border: 210 80% 30%;
141+
142+
--job-FAILED-bg: var(--color-failed);
143+
--job-FAILED-border: var(--color-failed-border);
144+
--job-FAILED-active-border: var(--color-failed-active);
145+
146+
--job-SUCCESS-bg: 160 45% 52%;
147+
--job-SUCCESS-border: 160 42% 45%;
148+
--job-SUCCESS-active-border: 160 80% 30%;
149+
150+
--job-UPSTREAM_FAILED-bg: var(--color-failed);
151+
--job-UPSTREAM_FAILED-border: var(--color-failed-border);
152+
--job-UPSTREAM_FAILED-active-border: var(--color-failed-active);
153+
154+
--job-QUEUED-bg: 0 0% 52%;
155+
--job-QUEUED-border: 0 0% 46%;
156+
--job-QUEUED-active-border: 0 0% 20%; /* Back to 20% lightness */
157+
158+
--job-UPSTREAM_MISSING-bg: 38 40% 58%;
159+
--job-UPSTREAM_MISSING-border: 38 38% 50%;
160+
--job-UPSTREAM_MISSING-active-border: 38 80% 30%;
161+
162+
--job-WAITING_FOR_RESOURCES-bg: var(--color-running);
163+
--job-WAITING_FOR_RESOURCES-border: var(--color-running-border);
164+
--job-WAITING_FOR_RESOURCES-active-border: var(--color-running-active);
165+
166+
/* Scrollbar colors */
167+
--scrollcolor: hsla(0, 0%, 87%, 1);
168+
--scrollbackground: transparent;
169+
scrollbar-color: var(--scrollcolor) var(--scrollbackground);
73170
}
74171

75172
.dark {
@@ -114,17 +211,17 @@
114211
--primary-900: 348 100% 78%;
115212
--primary-950: 352 100% 91%;
116213

117-
--warning-50: 41 66% 10%;
118-
--warning-100: 40 29% 8%;
119-
--warning-200: 41 66% 10%;
120-
--warning-300: 41 100% 12%;
121-
--warning-400: 42 100% 14%;
122-
--warning-500: 43 81% 19%;
123-
--warning-600: 42 58% 26%;
124-
--warning-700: 42 56% 34%;
125-
--warning-800: 44 100% 55%;
126-
--warning-900: 45 100% 60%;
127-
--warning-950: 40 100% 86%;
214+
--success-50: 159 46% 11%;
215+
--success-100: 159 60% 12%;
216+
--success-200: 159 70% 14%;
217+
--success-300: 159 80% 17%;
218+
--success-400: 159 90% 20%;
219+
--success-500: 160 66% 38%;
220+
--success-600: 157 80% 50%;
221+
--success-700: 155 70% 65%;
222+
--success-800: 153 65% 75%;
223+
--success-900: 152 60% 85%;
224+
--success-950: 151 63% 92%;
128225

129226
--secondary: 0 0% 14.9%;
130227
--secondary-foreground: 0 0% 98%;

‎frontend/src/app.html

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
11
<!doctype html>
2-
<html lang="en" class="dark">
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/logo.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<script>
8+
const modeWatcherMode = localStorage.getItem('mode-watcher-mode');
9+
if (
10+
modeWatcherMode === 'dark' ||
11+
(modeWatcherMode !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches)
12+
) {
13+
document.documentElement.classList.add('dark');
14+
}
15+
</script>
716
%sveltekit.head%
817
</head>
918
<body data-sveltekit-preload-data="hover">

‎frontend/src/lib/components/ExpandableCell.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
<div class="flex items-center justify-center h-full relative">
4141
<CellDivider />
4242
<button
43-
class="flex items-center justify-between bg-neutral-300 border border-neutral-400 rounded-md p-[5px] pl-0 w-full mr-[18px] max-w-[440px] max-h-[32px]"
43+
class="flex items-center justify-between bg-neutral-50 dark:bg-neutral-300 border border-neutral-400 rounded-md p-[5px] pl-0 w-full mr-[18px] max-w-[440px] max-h-[32px]"
4444
style:margin-left={`calc(${depth * 0.75}rem)`}
4545
onclick={() => ($isExpanded = !$isExpanded)}
4646
title={name}

‎frontend/src/lib/components/Logo.svelte

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script lang="ts">
2+
const { class: className }: { class?: string } = $props();
3+
</script>
4+
5+
<svg
6+
class={className}
7+
width="240"
8+
height="240"
9+
viewBox="0 0 240 240"
10+
fill="none"
11+
xmlns="http://www.w3.org/2000/svg"
12+
>
13+
<path
14+
fill-rule="evenodd"
15+
clip-rule="evenodd"
16+
d="M51 120H0C29.5372 80 59.0743 40 63 0H114C110.074 40 80.5372 80 51 120Z"
17+
fill="currentColor"
18+
/>
19+
<path
20+
fill-rule="evenodd"
21+
clip-rule="evenodd"
22+
d="M189 120H240C210.463 160 180.926 200 177 240H126C129.926 200 159.463 160 189 120Z"
23+
fill="currentColor"
24+
/>
25+
<path
26+
fill-rule="evenodd"
27+
clip-rule="evenodd"
28+
d="M114 240H63C70.8513 160 181.149 79.9999 189 0H240C232.149 79.9999 121.851 160 114 240Z"
29+
fill="currentColor"
30+
/>
31+
<path
32+
fill-rule="evenodd"
33+
clip-rule="evenodd"
34+
d="M51 240H0C7.85135 160 118.149 79.9999 126 0H177C169.149 79.9999 58.8513 160 51 240Z"
35+
fill="currentColor"
36+
/>
37+
</svg>

‎frontend/src/lib/components/ModeSwitcher.svelte

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts">
2+
import IconSun from '~icons/heroicons/sun';
3+
import IconMoon from '~icons/heroicons/moon';
4+
5+
import { resetMode, setMode } from 'mode-watcher';
6+
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
7+
import { Button } from '$lib/components/ui/button/index.js';
8+
</script>
9+
10+
<DropdownMenu.Root>
11+
<DropdownMenu.Trigger asChild let:builder>
12+
<Button builders={[builder]} variant="outline" size="icon" class="h-[2rem] w-[2rem]">
13+
<IconSun
14+
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
15+
/>
16+
<IconMoon
17+
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
18+
/>
19+
<span class="sr-only">Toggle theme</span>
20+
</Button>
21+
</DropdownMenu.Trigger>
22+
<DropdownMenu.Content align="end">
23+
<DropdownMenu.Item on:click={() => setMode('light')}>Light</DropdownMenu.Item>
24+
<DropdownMenu.Item on:click={() => setMode('dark')}>Dark</DropdownMenu.Item>
25+
<DropdownMenu.Item on:click={() => resetMode()}>System</DropdownMenu.Item>
26+
</DropdownMenu.Content>
27+
</DropdownMenu.Root>

‎frontend/src/lib/components/NavigationBar.svelte

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
import { Separator } from '$lib/components/ui/separator';
4141
import IconChatBubbleOvalLeft16Solid from '~icons/heroicons/chat-bubble-oval-left-16-solid';
4242
import IconQuestionMarkCircle16Solid from '~icons/heroicons/question-mark-circle-16-solid';
43+
import Logo from '$lib/components/Logo.svelte';
4344
4445
type Props = {
4546
navItems: EntityConfig[];
@@ -105,7 +106,7 @@
105106
<nav class="w-60 p-3 flex flex-col">
106107
<div class="ml-2 mt-1 mb-10 flex items-center justify-between">
107108
<Button variant="link" href="/" class="p-0 h-6 w-6">
108-
<img src="/logo.svg" alt="Zipline Logo" />
109+
<Logo class="text-foreground" />
109110
</Button>
110111
</div>
111112
<Button

‎frontend/src/lib/components/NavigationSlider.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
{#if $navigating}
88
<div
9-
class="fixed w-full top-0 right-0 left-0 h-[1px] z-50 bg-white"
9+
class="fixed w-full top-0 right-0 left-0 h-[1px] z-50 bg-black dark:bg-white"
1010
in:slide={{ duration: 2000, axis: 'x', easing: expoOut }}
1111
></div>
1212
{/if}

‎frontend/src/lib/components/charts/PercentileLineChart.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
x="date"
2525
y="value"
2626
series={[
27-
{ label: 'p95', color: '#4B92FF', index: 2 },
28-
{ label: 'p50', color: '#7DFFB3', index: 1 },
29-
{ label: 'p5', color: '#FDDD61', index: 0 }
27+
{ label: 'p95', color: '#2976E6', index: 2 },
28+
{ label: 'p50', color: '#3DDC91', index: 1 },
29+
{ label: 'p5', color: '#E5B72D', index: 0 }
3030
].map((c) => {
3131
const timestamps = data.timestamps ?? [];
3232
const values = data.percentiles?.[c.index] ?? [];

‎frontend/src/lib/components/ui/badge/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const badgeVariants = tv({
1313
outline: 'text-foreground',
1414
key: '',
1515
'key-bg': 'border-transparent bg-neutral-400',
16-
success: 'bg-[#0F2920] text-[#21A378] border-transparent' // todo use our style guide when it is created
16+
success: 'bg-success-50 text-success-500 border-transparent' // todo use our style guide when it is created
1717
}
1818
},
1919
compoundVariants: [

‎frontend/src/lib/components/ui/tabs/tabs-trigger.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
export { className as class };
1616
1717
const _class = cn(
18-
'ring-offset-background focus-visible:ring-ring border-b-[3px] border-transparent data-[state=active]:border-b-[3px] data-[state=active]:border-primary-800 data-[state=active]:text-primary-800 inline-flex items-center justify-center whitespace-nowrap px-[10px] py-[5px] text-regular transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm z-10 not-first:ml-5',
18+
'ring-offset-background focus-visible:ring-ring border-b-[3px] border-transparent data-[state=active]:border-b-[3px] data-[state=active]:border-primary-600 dark:data-[state=active]:border-primary-800 data-[state=active]:text-primary-600 dark:data-[state=active]:text-primary-800 inline-flex items-center justify-center whitespace-nowrap px-[10px] py-[5px] text-regular transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 z-10 not-first:ml-5',
1919
className
2020
);
2121

0 commit comments

Comments
 (0)