Skip to content

Commit 4ed67bb

Browse files
G07chaG07cha
committed
refactor: consistent colors
1 parent 4bdb06f commit 4ed67bb

7 files changed

Lines changed: 47 additions & 111 deletions

File tree

‎packages/web-extension/assets/tailwind.css‎

Lines changed: 5 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
@import "tailwindcss";
22

33
@theme {
4-
/* Abstract colors */
54
--color-primary: #000000;
6-
--color-primary-inverted: #ffffff;
75
--color-secondary: #666666;
86
--color-tertiary: #9ca3af;
97

@@ -17,44 +15,21 @@
1715
/* Tertiary Borders - Subtle borders, light separators */
1816
--color-border-tertiary: var(--color-tertiary);
1917
--color-border-tertiary-hover: #374151;
20-
/* Component colors */
21-
22-
/*
23-
* Next Network Design System
24-
* Three-tier semantic color system organized by context and hierarchy
25-
*/
26-
27-
/* ===== TEXT COLORS ===== */
2818

2919
/* Primary Text - Main content, headers, important elements */
30-
--color-text-primary: #ffffff;
31-
--color-text-primary-hover: #f8f9fa;
20+
--color-text-primary: #242424;
3221

3322
/* Secondary Text - Supporting content, labels, descriptions */
34-
--color-text-secondary: #d1d5db; /* gray-300 */
35-
--color-text-secondary-hover: #e5e7eb;
23+
--color-text-secondary: #d1d5db;
3624

3725
/* Tertiary Text - Subtle content, placeholders, disabled states */
38-
--color-text-tertiary: #9ca3af; /* gray-400 */
39-
--color-text-tertiary-hover: #6b7280;
26+
--color-text-tertiary: #9ca3af;
4027

4128
/* ===== CONTAINER COLORS ===== */
4229

4330
/* Primary Containers - Main panels, cards, primary backgrounds */
44-
--color-container-primary: #242424; /* dark */
45-
--color-container-primary-hover: #2d2d2d;
46-
47-
/* Secondary Containers - Secondary panels, nested containers */
48-
--color-container-secondary: #222222; /* panel */
49-
--color-container-secondary-hover: #2a2a2a;
50-
51-
/* Tertiary Containers - Subtle backgrounds, overlays, code blocks */
52-
--color-container-tertiary: #181818; /* code */
53-
--color-container-tertiary-hover: #1f1f1f;
54-
55-
/* ===== BORDER COLORS ===== */
56-
57-
/* Primary Borders - Main borders, dividers, strong emphasis */
31+
--color-container-primary: #ffffff;
32+
--color-container-primary-hover: #f8f9fa;
5833

5934
/* ===== STATUS COLORS ===== */
6035

@@ -92,53 +67,6 @@
9267
--color-neutral-bg: var(--color-gray-100);
9368
--color-neutral-bg-hover: var(--color-gray-200);
9469
--color-neutral-border: rgb(156 163 175 / 0.3);
95-
96-
/* ===== INTERACTIVE COLORS ===== */
97-
98-
/* Button Colors */
99-
--color-button-primary: #1a1a1a;
100-
--color-button-primary-hover: #2d2d2d;
101-
--color-button-secondary: #374151;
102-
--color-button-secondary-hover: #4b5563;
103-
104-
/* Surface Colors for different hierarchy levels */
105-
--color-surface-elevated: #2d2d2d;
106-
--color-surface-elevated-hover: #3a3a3a;
107-
108-
/* ===== UTILITY OVERRIDES ===== */
109-
110-
/* Override existing custom colors to use semantic tokens */
111-
--color-blue: var(--color-info);
112-
--color-dark: var(--color-container-primary);
113-
--color-panel: var(--color-container-secondary);
114-
--color-code: var(--color-container-tertiary);
115-
--color-button: var(--color-button-primary);
116-
}
117-
118-
/* Custom utility classes for semantic color usage */
119-
@layer utilities {
120-
/* Interactive States */
121-
.bg-button-primary {
122-
background-color: var(--color-button-primary);
123-
}
124-
.bg-button-secondary {
125-
background-color: var(--color-button-secondary);
126-
}
127-
128-
.hover\:bg-button-primary:hover {
129-
background-color: var(--color-button-primary-hover);
130-
}
131-
.hover\:bg-button-secondary:hover {
132-
background-color: var(--color-button-secondary-hover);
133-
}
134-
135-
/* Surface Utilities */
136-
.bg-surface-elevated {
137-
background-color: var(--color-surface-elevated);
138-
}
139-
.hover\:bg-surface-elevated:hover {
140-
background-color: var(--color-surface-elevated-hover);
141-
}
14270
}
14371

14472
@layer base {

‎packages/web-extension/entrypoints/devtools-panel/App.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useMemo, useRef, useState } from "react";
1+
import { useMemo, useState } from "react";
22
import {
33
filterInBetweenSpans,
44
filterServerSpans,
@@ -103,7 +103,7 @@ export default function App() {
103103
: undefined;
104104

105105
return (
106-
<div className="flex flex-col h-full overflow-hidden bg-white">
106+
<div className="flex flex-col h-full overflow-hidden bg-container-primary">
107107
{(wsStatus === ConnectionStatus.Error ||
108108
(reconnectAttempt > 5 &&
109109
(wsStatus === ConnectionStatus.Connecting ||
@@ -115,15 +115,15 @@ export default function App() {
115115
<button
116116
type="button"
117117
onClick={handleClearData}
118-
className="px-4 py-1 text-xs font-medium text-gray-600 bg-white border border-gray-300 rounded hover:bg-gray-50 hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
118+
className="px-4 py-1 text-xs font-medium border border-border-primary rounded hover:bg-container-primary-hover bg-container-primary"
119119
title="Clear all recorded requests and spans"
120120
>
121121
Clear All
122122
</button>
123123
<label className="flex gap-2 items-center">
124124
View:
125125
<select
126-
className="border p-2 border-gray-300 rounded hover:bg-gray-50"
126+
className="border p-2 border-border-primary rounded hover:bg-container-primary-hover bg-container-primary text-primary"
127127
name="Span filter"
128128
onChange={(event) =>
129129
setSpanFilter(event.currentTarget.value as SpanFilter)

‎packages/web-extension/entrypoints/devtools-panel/components/card.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ export const Card = ({ children, className, ...props }: CardProps) => {
99
return (
1010
<div
1111
{...props}
12-
className={cn("p-4 mb-4 rounded-lg border border-gray-700", className)}
12+
className={cn(
13+
"p-4 mb-4 rounded-lg border border-border-primary",
14+
className,
15+
)}
1316
>
1417
{children}
1518
</div>

‎packages/web-extension/entrypoints/devtools-panel/components/connection-indicator.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export function ConnectionIndicator({ status }: { status: ConnectionStatus }) {
3434

3535
return (
3636
<div className="flex items-center relative group">
37-
<span className="absolute right-6 w-max bg-white text-dark px-2.5 py-1 rounded-lg text-sm font-medium shadow-lg z-10 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
37+
<span className="absolute right-6 w-max bg-container-primary text-text-primary px-2.5 py-1 rounded-lg text-sm font-medium shadow-lg z-10 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
3838
{statusText}
3939
</span>
4040
<button

‎packages/web-extension/entrypoints/devtools-panel/components/panel.tsx‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,10 @@ const PropertyList = ({
4949
}) => {
5050
return (
5151
<div
52-
className={cn("gap-2 text-sm grid grid-cols-2 text-gray-400", className)}
52+
className={cn(
53+
"gap-2 text-sm grid grid-cols-2 text-text-tertiary",
54+
className,
55+
)}
5356
>
5457
{data.map(({ label, value, valueContainerClassName }) => (
5558
<Fragment key={label}>
@@ -75,7 +78,7 @@ function HeadersDisplay({ headers, title }: HeadersDisplayProps) {
7578

7679
if (headerEntries.length === 0) {
7780
return (
78-
<Card className="text-gray-400 text-sm italic">
81+
<Card className="text-text-tertiary text-sm italic">
7982
No {title.toLowerCase()}
8083
</Card>
8184
);
@@ -115,7 +118,7 @@ function RequestTab({ requestData }: { requestData?: RequestSpan }) {
115118
const getMethodColor = (method: string) => {
116119
switch (method?.toUpperCase()) {
117120
case "GET":
118-
return "text-blue bg-blue/10";
121+
return "text-info bg-info/10";
119122
case "POST":
120123
return "text-primary bg-primary/10";
121124
case "PUT":
@@ -125,13 +128,13 @@ function RequestTab({ requestData }: { requestData?: RequestSpan }) {
125128
case "PATCH":
126129
return "text-warning bg-warning/10";
127130
default:
128-
return "text-gray-400 bg-gray-400/10";
131+
return "text-text-tertiary bg-tertiary/10";
129132
}
130133
};
131134

132135
if (!requestData) {
133136
return (
134-
<div className="flex items-center justify-center h-64 text-gray-400">
137+
<div className="flex items-center justify-center h-64 text-text-tertiary">
135138
<div className="text-center">
136139
<div className="text-lg font-semibold mb-2">No Request Data</div>
137140
<div className="text-sm">Request information is not available</div>
@@ -150,7 +153,7 @@ function RequestTab({ requestData }: { requestData?: RequestSpan }) {
150153
>
151154
{requestData.method}
152155
</span>
153-
<span className="text-gray-400 text-xs">
156+
<span className="text-text-tertiary text-xs">
154157
{new Date(requestData.start).toLocaleString()}
155158
</span>
156159
</div>
@@ -184,15 +187,15 @@ function ResponseTab({ responseData }: { responseData?: ResponseSpan }) {
184187
if (status >= 300 && status < 400) return "text-warning";
185188
if (status >= 400 && status < 500) return "text-error";
186189
if (status >= 500) return "text-error";
187-
return "text-gray-400";
190+
return "text-text-tertiary";
188191
};
189192

190193
const getStatusBadgeColor = (status: number) => {
191194
if (status >= 200 && status < 300) return "bg-primary/20 text-primary";
192195
if (status >= 300 && status < 400) return "bg-warning/20 text-warning";
193196
if (status >= 400 && status < 500) return "bg-error/20 text-error";
194197
if (status >= 500) return "bg-error/20 text-error";
195-
return "bg-gray-400/20 text-gray-400";
198+
return "bg-tertiary/20 text-text-tertiary";
196199
};
197200

198201
const responseTime = useMemo(() => {
@@ -205,7 +208,7 @@ function ResponseTab({ responseData }: { responseData?: ResponseSpan }) {
205208

206209
if (!responseData) {
207210
return (
208-
<div className="flex items-center justify-center h-64 text-gray-400">
211+
<div className="flex items-center justify-center h-64 text-text-tertiary">
209212
<div className="text-center">
210213
<div className="text-lg font-semibold mb-2">No Response Data</div>
211214
<div className="text-sm">Response information is not available</div>
@@ -232,19 +235,19 @@ function ResponseTab({ responseData }: { responseData?: ResponseSpan }) {
232235
</span>
233236
</div>
234237
{responseTime && (
235-
<span className="text-gray-400 text-sm">
238+
<span className="text-text-tertiary text-sm">
236239
{formatDuration(responseTime)}
237240
</span>
238241
)}
239242
</div>
240243
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
241244
<div className="flex justify-between">
242-
<span className="text-gray-400">Content-Type:</span>
245+
<span className="text-text-tertiary">Content-Type:</span>
243246
<span className="font-mono">{contentType}</span>
244247
</div>
245248
{contentLength && (
246249
<div className="flex justify-between">
247-
<span className="text-gray-400">Content-Length:</span>
250+
<span className="text-text-tertiary">Content-Length:</span>
248251
<span className="font-mono">{contentLength} bytes</span>
249252
</div>
250253
)}
@@ -266,19 +269,19 @@ function ResponseTab({ responseData }: { responseData?: ResponseSpan }) {
266269
<div className="space-y-2 text-sm">
267270
{responseTime && (
268271
<div className="flex justify-between">
269-
<span className="text-gray-400">Response Time:</span>
272+
<span className="text-text-tertiary">Response Time:</span>
270273
<span className="font-mono">{formatDuration(responseTime)}</span>
271274
</div>
272275
)}
273276
<div className="flex justify-between">
274-
<span className="text-gray-400">Start Time:</span>
277+
<span className="text-text-tertiary">Start Time:</span>
275278
<span className="font-mono">
276279
{new Date(responseData.start).toLocaleString()}
277280
</span>
278281
</div>
279282
{responseData.end && (
280283
<div className="flex justify-between">
281-
<span className="text-gray-400">End Time:</span>
284+
<span className="text-text-tertiary">End Time:</span>
282285
<span className="font-mono">
283286
{new Date(responseData.end).toLocaleString()}
284287
</span>
@@ -297,7 +300,7 @@ function ServerSpanTab({
297300
}) {
298301
if (!serverSpanData) {
299302
return (
300-
<div className="flex items-center justify-center h-64 text-gray-400">
303+
<div className="flex items-center justify-center h-64 text-text-tertiary">
301304
<div className="text-center">
302305
<div className="text-lg font-semibold mb-2">No Server Span Data</div>
303306
<div className="text-sm">
@@ -329,7 +332,7 @@ function ServerSpanTab({
329332
{serverSpanData.isActive ? "ACTIVE" : "COMPLETED"}
330333
</span>
331334
{duration && (
332-
<span className="text-gray-400 text-sm">
335+
<span className="text-text-tertiary text-sm">
333336
{formatDuration(duration)}
334337
</span>
335338
)}
@@ -399,7 +402,7 @@ function Tab({
399402
${
400403
isActive
401404
? "text-primary border-primary"
402-
: "text-gray-400 hover:text-gray-300 border-transparent"
405+
: "text-text-tertiary hover:text-gray-300 border-transparent"
403406
}
404407
`}
405408
role="tab"
@@ -536,7 +539,7 @@ export default function SidePanel({
536539
ref={panelRef}
537540
className={`
538541
absolute right-0 top-0 bottom-0 left-auto inset-0 z-50 items-stretch justify-end
539-
bg-white border-l border-gray-600 shadow-2xl
542+
bg-container-primary border-l border-border-primary shadow-2xl
540543
h-full overflow-hidden flex max-w-11/12 min-w-60
541544
transform transition-transform duration-300 ease-in-out
542545
${isOpen ? "translate-x-0" : "translate-x-full"}
@@ -564,11 +567,11 @@ export default function SidePanel({
564567
{/* Panel Content */}
565568
<div className="flex-1 flex flex-col min-w-0">
566569
{/* Tab Navigation */}
567-
<div className="flex border-b border-gray-600">
570+
<div className="flex border-b border-border-primary">
568571
<button
569572
type="button"
570573
onClick={onClose}
571-
className="p-2 hover:text-gray-700 rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer text-gray-400"
574+
className="p-2 hover:text-text-secondary rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer text-text-tertiary"
572575
aria-label="Close panel"
573576
title="Close panel"
574577
>
@@ -590,7 +593,7 @@ export default function SidePanel({
590593
>
591594
Request
592595
{!requestData && (
593-
<span className="ml-1 text-xs text-gray-500">(N/A)</span>
596+
<span className="ml-1 text-xs text-text-tertiary">(N/A)</span>
594597
)}
595598
</Tab>
596599
<Tab
@@ -600,7 +603,7 @@ export default function SidePanel({
600603
>
601604
Response
602605
{!responseData && (
603-
<span className="ml-1 text-xs text-gray-500">(N/A)</span>
606+
<span className="ml-1 text-xs text-text-tertiary">(N/A)</span>
604607
)}
605608
</Tab>
606609
</div>

‎packages/web-extension/entrypoints/devtools-panel/components/table.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,9 @@ export function HttpRequestsTable({
297297
key={request.id}
298298
className={cn(
299299
"border-b border-border-primary px-4 py-3 cursor-pointer transition-colors text-primary focus:outline-none",
300-
selectedRowId === request.id ? "bg-primary/10" : "hover:bg-gray-50",
300+
selectedRowId === request.id
301+
? "bg-primary/10"
302+
: "hover:bg-container-primary-hover",
301303
)}
302304
onClick={(e) => handleRowClick(request, e)}
303305
// biome-ignore lint/a11y/noNoninteractiveTabindex: the element is interactive
@@ -322,7 +324,7 @@ export function HttpRequestsTable({
322324
handleGroupToggle(request.id);
323325
}}
324326
>
325-
{groupState[request.id] ? ">" : "▼"}
327+
{groupState[request.id] ? "▶" : "▼"}
326328
</button>
327329
)}
328330
{truncateUrl(request.url)}
@@ -347,7 +349,7 @@ export function HttpRequestsTable({
347349
handleGroupToggle(request.id);
348350
}}
349351
>
350-
{groupState[request.id] ? ">" : "▼"}
352+
{groupState[request.id] ? "▶" : "▼"}
351353
</button>
352354
)}
353355
{truncateUrl(request.url)}

0 commit comments

Comments
 (0)