lynx-console 0.2.0 → 0.2.2

package/dist/index.mjs

@@ -1,7 +1,104 @@
 import "./index.css";
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "@lynx-js/react";
+import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "@lynx-js/react";
 import { stringify } from "javascript-stringify";
 
+//#region src/styles/theme.ts
+const colorMap = {
+	light: {
+		palette: {
+			blue100: "#eff6ff",
+			blue600: "#5e98fe",
+			gray100: "#f7f8f9",
+			gray400: "#dcdee3",
+			green100: "#edfaf6",
+			green600: "#10ab7d",
+			purple100: "#f5f3fe",
+			purple600: "#9f84fb",
+			red100: "#fdf0f0",
+			red600: "#fc6a66",
+			red900: "#921708",
+			staticWhite: "#ffffff",
+			yellow100: "#fff7de",
+			yellow600: "#c49725",
+			yellow900: "#4f3e1f"
+		},
+		fg: {
+			neutral: "#1a1c20",
+			placeholder: "#b0b3ba",
+			disabled: "#d1d3d8",
+			neutralMuted: "#555d6d",
+			neutralSubtle: "#868b94"
+		},
+		bg: {
+			overlay: "#00000074",
+			layerDefault: "#ffffff",
+			layerFloating: "#ffffff",
+			neutralWeak: "#f3f4f5"
+		},
+		stroke: {
+			neutralSubtle: "#0000000c",
+			neutralWeak: "#dcdee3"
+		}
+	},
+	dark: {
+		palette: {
+			blue100: "#202742",
+			blue600: "#1e82eb",
+			gray100: "#16171b",
+			gray400: "#393d46",
+			green100: "#202926",
+			green600: "#1b946d",
+			purple100: "#28213b",
+			purple600: "#8e6bee",
+			red100: "#322323",
+			red600: "#f73526",
+			red900: "#f8c5c3",
+			staticWhite: "#ffffff",
+			yellow100: "#302819",
+			yellow600: "#b6720d",
+			yellow900: "#e5d49b"
+		},
+		fg: {
+			neutral: "#f3f4f5",
+			placeholder: "#868b94",
+			disabled: "#5b606a",
+			neutralMuted: "#dcdee3",
+			neutralSubtle: "#b0b3ba"
+		},
+		bg: {
+			overlay: "#00000074",
+			layerDefault: "#16171b",
+			layerFloating: "#1d2025",
+			neutralWeak: "#2b2e35"
+		},
+		stroke: {
+			neutralSubtle: "#ffffff0d",
+			neutralWeak: "#393d46"
+		}
+	}
+};
+const fontWeight = {
+	regular: "400",
+	medium: "500",
+	bold: "700"
+};
+const duration = {
+	d4: "200ms",
+	d6: "300ms"
+};
+function getColors(theme) {
+	return colorMap[theme];
+}
+
+//#endregion
+//#region src/styles/ThemeContext.ts
+const ThemeContext = createContext(getColors("light"));
+const ThemeProvider = ThemeContext.Provider;
+function useThemeColors() {
+	return useContext(ThemeContext);
+}
+
+//#endregion
 //#region src/components/BottomSheet.tsx
 const MIN_HEIGHT = 200;
 const MAX_HEIGHT = 700;
@@ -9,6 +106,7 @@ const DEFAULT_HEIGHT = 500;
 const CLOSE_DRAG_THRESHOLD = 30;
 let savedHeight = null;
 function BottomSheet({ children, title, footer, onClose, isOpen, shouldClose = false, safeAreaInsetBottom = "25px" }) {
+	const colors = useThemeColors();
 	const [sheetHeight, setSheetHeight] = useState(savedHeight ?? DEFAULT_HEIGHT);
 	const [tempHeight, setTempHeight] = useState(savedHeight ?? DEFAULT_HEIGHT);
 	const [isDragging, setIsDragging] = useState(false);
@@ -51,19 +149,29 @@ function BottomSheet({ children, title, footer, onClose, isOpen, shouldClose = f
 		setSheetHeight(tempHeight);
 		if (dragDistance > CLOSE_DRAG_THRESHOLD) handleClose();
 	};
-	return <scroll-view className="bs-backdrop" style={{ opacity: isOpening || isClosing ? 0 : 1 }}>
+	return <scroll-view className="bs-backdrop" style={{
+		background: colors.bg.overlay,
+		opacity: isOpening || isClosing ? 0 : 1,
+		transition: `opacity ${duration.d6} cubic-bezier(0.4, 0, 0.2, 1)`
+	}}>
       <view className="bs-overlay" bindtap={handleClose}>
         <view className="bs-content" catchtap={() => {}} style={{
+		background: colors.bg.layerFloating,
 		height: `${isDragging ? tempHeight : sheetHeight}px`,
 		transform: isOpening || isClosing ? "translateY(100%)" : "translateY(0)",
-		transition: isDragging ? "none" : void 0
+		transition: isDragging ? "none" : `transform ${duration.d6} cubic-bezier(0.4, 0, 0.2, 1)`
 	}}>
           {}
           <view className="bs-handleContainer" bindtouchstart={handleTouchStart} bindtouchmove={handleTouchMove} bindtouchend={handleTouchEnd}>
-            <view className="bs-handle" />
+            <view className="bs-handle" style={{ backgroundColor: colors.palette.gray400 }} />
           </view>
           <view className="bs-header">
-            {title && <text className="bs-title">{title}</text>}
+            {title && <text className="bs-title" style={{
+		fontWeight: fontWeight.bold,
+		color: colors.fg.neutral
+	}}>
+                {title}
+              </text>}
           </view>
           <view className="bs-body" style={{ paddingBottom: safeAreaInsetBottom }}>
             {children}
@@ -193,7 +301,37 @@ const runCode = (code) => {
 		console.error(e);
 	}
 };
+function getLevelColor(colors, level) {
+	switch (level) {
+		case "log": return colors.palette.green600;
+		case "info": return colors.palette.blue600;
+		case "warn": return colors.palette.yellow600;
+		case "error": return colors.palette.red600;
+	}
+}
+function getLogItemBg(colors, level) {
+	switch (level) {
+		case "warn": return colors.palette.yellow100;
+		case "error": return colors.palette.red100;
+		default: return;
+	}
+}
+function getStringColor(colors, level) {
+	switch (level) {
+		case "warn": return colors.palette.yellow900;
+		case "error": return colors.palette.red900;
+		default: return colors.fg.neutral;
+	}
+}
+function getPrimitiveColor(colors, level) {
+	switch (level) {
+		case "warn": return colors.palette.yellow900;
+		case "error": return colors.palette.red900;
+		default: return colors.palette.blue600;
+	}
+}
 const LogPanel = ({ logs, clearLogs }) => {
+	const colors = useThemeColors();
 	const [expandedArgs, setExpandedArgs] = useState(/* @__PURE__ */ new Set());
 	const [code, setCode] = useState("");
 	const [enabledLevels, setEnabledLevels] = useState(() => savedEnabledLevels ?? new Set(LOG_LEVELS));
@@ -277,23 +415,51 @@ const LogPanel = ({ logs, clearLogs }) => {
 	const renderArg = (arg, parentKey, level) => {
 		const key = parentKey;
 		const isExpanded = expandedArgs.has(key);
-		if (arg === null) return <text className={"cp-argNull"}>null</text>;
-		if (arg === void 0) return <text className={"cp-argUndefined"}>undefined</text>;
+		if (arg === null) return <text style={{
+			color: colors.fg.neutralSubtle,
+			fontWeight: fontWeight.regular
+		}}>
+          null
+        </text>;
+		if (arg === void 0) return <text style={{
+			color: colors.fg.neutralSubtle,
+			fontWeight: fontWeight.regular
+		}}>
+          undefined
+        </text>;
 		if (typeof arg === "string") {
 			const MAX_LENGTH = 80;
-			if (!(arg.length > MAX_LENGTH)) return <text className={`cp-argString cp-argString--${level}`}>{arg}</text>;
+			const shouldTruncate = arg.length > MAX_LENGTH;
+			const strColor = getStringColor(colors, level);
+			if (!shouldTruncate) return <text className={"cp-argString"} style={{
+				color: strColor,
+				fontWeight: fontWeight.regular
+			}}>
+            {arg}
+          </text>;
 			return <view className={"cp-argObject"}>
           <view className={"cp-argObjectHeader"} bindtap={() => toggleArg(key)}>
-            <text className={"cp-toggleIndicator"}>
+            <text className={"cp-toggleIndicator"} style={{
+				color: colors.fg.neutralSubtle,
+				fontWeight: fontWeight.regular
+			}}>
               {isExpanded ? "▼" : "▶"}
             </text>
-            <text className={`cp-argString cp-argString--${level}`}>
+            <text className={"cp-argString"} style={{
+				color: strColor,
+				fontWeight: fontWeight.regular
+			}}>
               {isExpanded ? arg : `${arg.slice(0, MAX_LENGTH)}...`}
             </text>
           </view>
         </view>;
 		}
-		if (typeof arg === "number" || typeof arg === "boolean") return <text className={`cp-argPrimitive cp-argPrimitive--${level}`}>{String(arg)}</text>;
+		if (typeof arg === "number" || typeof arg === "boolean") return <text className={"cp-argPrimitive"} style={{
+			color: getPrimitiveColor(colors, level),
+			fontWeight: fontWeight.regular
+		}}>
+          {String(arg)}
+        </text>;
 		if (typeof arg === "object") {
 			let preview = "Object";
 			if (Array.isArray(arg)) preview = `Array(${arg.length})`;
@@ -309,40 +475,81 @@ const LogPanel = ({ logs, clearLogs }) => {
 			else jsonString = stringify(arg, null, 2, { references: true }) ?? String(arg);
 			return <view className={"cp-argObject"}>
           <view className={"cp-argObjectHeader"} bindtap={() => toggleArg(key)}>
-            <text className={"cp-toggleIndicator"}>
+            <text className={"cp-toggleIndicator"} style={{
+				color: colors.fg.neutralSubtle,
+				fontWeight: fontWeight.regular
+			}}>
               {isExpanded ? "▼" : "▶"}
             </text>
-            <text className={"cp-argObjectPreview"}>{preview}</text>
+            <text className={"cp-argObjectPreview"} style={{
+				fontWeight: fontWeight.medium,
+				color: colors.fg.neutral
+			}}>
+              {preview}
+            </text>
           </view>
           {isExpanded && <view className={"cp-argObjectContent"}>
-              <text className={"cp-argObjectJson"}>{jsonString}</text>
+              <text className={"cp-argObjectJson"} style={{
+				fontWeight: fontWeight.regular,
+				color: colors.fg.neutral
+			}}>
+                {jsonString}
+              </text>
             </view>}
         </view>;
 		}
-		return <text className={`cp-argPrimitive cp-argPrimitive--${level}`}>{String(arg)}</text>;
+		return <text className={"cp-argPrimitive"} style={{
+			color: getPrimitiveColor(colors, level),
+			fontWeight: fontWeight.regular
+		}}>
+        {String(arg)}
+      </text>;
 	};
 	return <view className={"cp-logContainer"} bindtap={() => {
 		if (filterOpen) setFilterOpen(false);
 	}}>
       <view className={"cp-logHeader"}>
         <view className={"cp-filterWrapper"}>
-          <view className={"cp-filterButton"} catchtap={() => setFilterOpen((v) => !v)}>
-            <text className={"cp-filterButtonText"}>Filter  ▼</text>
+          <view className={"cp-filterButton"} style={{ backgroundColor: colors.bg.neutralWeak }} catchtap={() => setFilterOpen((v) => !v)}>
+            <text className={"cp-filterButtonText"} style={{
+		fontWeight: fontWeight.medium,
+		color: colors.fg.neutralMuted
+	}}>
+              Filter  ▼
+            </text>
           </view>
-          {filterOpen && <view className={"cp-filterDropdown"} catchtap={() => {}}>
+          {filterOpen && <view className={"cp-filterDropdown"} style={{
+		backgroundColor: colors.bg.layerFloating,
+		borderColor: colors.stroke.neutralSubtle
+	}} catchtap={() => {}}>
               {LOG_LEVELS.map((level) => <view key={level} className={"cp-filterOption"} bindtap={() => toggleLevel(level)}>
-                  <text className={`cp-filterCheckbox cp-filterCheckbox--${level}`}>
+                  <text className={"cp-filterCheckbox"} style={{
+		fontWeight: fontWeight.medium,
+		color: getLevelColor(colors, level)
+	}}>
                     {enabledLevels.has(level) ? "✅" : "⬜"}
                   </text>
-                  <text className={`cp-filterLabel cp-filterLabel--${level}`}>
+                  <text className={"cp-filterLabel"} style={{
+		fontWeight: fontWeight.medium,
+		color: getLevelColor(colors, level)
+	}}>
                     {level.toUpperCase()}
                   </text>
                 </view>)}
             </view>}
         </view>
-        <view className={"cp-searchWrapper"}>
-          <text className={"cp-searchPrompt"}>{"›"}</text>
-          <input ref={searchInputRef} className={"cp-searchInput"} placeholder="Search logs..." bindinput={(e) => setSearchQuery(e.detail.value)} />
+        <view className={"cp-searchWrapper"} style={{ borderBottomColor: colors.stroke.neutralSubtle }}>
+          <text className={"cp-searchPrompt"} style={{
+		fontWeight: fontWeight.medium,
+		color: colors.fg.placeholder
+	}}>
+            {"›"}
+          </text>
+          <input ref={searchInputRef} className={"cp-searchInput"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.neutral,
+		caretColor: colors.palette.green600
+	}} placeholder="Search logs..." bindinput={(e) => setSearchQuery(e.detail.value)} />
           {searchQuery.length > 0 && <view className={"cp-searchClear"} bindtap={() => {
 		setSearchQuery("");
 		searchInputRef.current?.invoke({
@@ -350,7 +557,12 @@ const LogPanel = ({ logs, clearLogs }) => {
 			params: { value: "" }
 		}).exec();
 	}}>
-              <text className={"cp-searchClearText"}>✕</text>
+              <text className={"cp-searchClearText"} style={{
+		fontWeight: fontWeight.medium,
+		color: colors.fg.placeholder
+	}}>
+                ✕
+              </text>
             </view>}
         </view>
         <view style={{
@@ -358,31 +570,48 @@ const LogPanel = ({ logs, clearLogs }) => {
 		flexDirection: "row",
 		gap: 8
 	}}>
-          <view className={"cp-clearButton"} bindtap={clearLogs}>
-            <text className={"cp-clearButtonText"}>🗑</text>
+          <view className={"cp-clearButton"} style={{ backgroundColor: colors.bg.neutralWeak }} bindtap={clearLogs}>
+            <text className={"cp-clearButtonText"} style={{
+		fontWeight: fontWeight.medium,
+		color: colors.fg.neutralMuted
+	}}>
+              🗑
+            </text>
           </view>
         </view>
       </view>
       <FadeList listRef={listRef} className={"cp-logList"} preload-buffer-count={10} initial-scroll-index={Math.max(0, filteredLogs.length - 1)}>
         {filteredLogs.length === 0 ? <list-item item-key="empty-state">
             <view className={"cp-placeholder"}>
-              <text className={"cp-placeholderText"}>
+              <text className={"cp-placeholderText"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.disabled
+	}}>
                 No logs yet. Try console.log("Hello!")
               </text>
             </view>
           </list-item> : filteredLogs.map((log) => {
 		return <list-item key={log.id} item-key={log.id}>
-                <view className={`cp-logItem cp-logItem--${log.level}`}>
+                <view className={"cp-logItem"} style={{
+			backgroundColor: getLogItemBg(colors, log.level),
+			borderBottomColor: colors.stroke.neutralWeak
+		}}>
                   <view className={"cp-logItemHeader"}>
-                    <text className={`cp-logLevel cp-logLevel--${log.level}`}>
+                    <text className={"cp-logLevel"} style={{
+			fontWeight: fontWeight.bold,
+			color: getLevelColor(colors, log.level)
+		}}>
                       {log.level.toUpperCase()}
                     </text>
-                    <text className={"cp-logTime"}>
+                    <text className={"cp-logTime"} style={{
+			fontWeight: fontWeight.regular,
+			color: colors.fg.neutralSubtle
+		}}>
                       {new Date(log.timestamp).toISOString()}
                     </text>
                   </view>
                   <view className={"cp-logArgsContainer"}>
-                    {log.args.map((arg, index) => <view key={`${log.id}-${index.toString()}`} className={"cp-logArgItem"}>
+                    {log.args.map((arg, index) => <view key={`${log.id}-${index.toString()}`} className={"cp-logArgItem"} style={{ fontWeight: fontWeight.regular }}>
                         {renderArg(arg, `${log.id}-${index.toString()}`, log.level)}
                       </view>)}
                   </view>
@@ -391,10 +620,24 @@ const LogPanel = ({ logs, clearLogs }) => {
 	})}
       </FadeList>
       <view className={"cp-replInputRow"}>
-        <text className={"cp-replPrompt"}>{"›"}</text>
-        <input ref={inputRef} className={"cp-replInput"} placeholder="enter code..." bindinput={(e) => setCode(e.detail.value)} bindconfirm={handleRun} />
-        <view className={"cp-replRunButton"} bindtap={handleRun}>
-          <text className={"cp-replRunButtonText"}>Run</text>
+        <text className={"cp-replPrompt"} style={{
+		fontWeight: fontWeight.medium,
+		color: colors.fg.placeholder
+	}}>
+          {"›"}
+        </text>
+        <input ref={inputRef} className={"cp-replInput"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.neutral,
+		caretColor: colors.palette.green600
+	}} placeholder="enter code..." bindinput={(e) => setCode(e.detail.value)} bindconfirm={handleRun} />
+        <view className={"cp-replRunButton"} style={{ backgroundColor: colors.palette.green100 }} bindtap={handleRun}>
+          <text className={"cp-replRunButtonText"} style={{
+		fontWeight: fontWeight.medium,
+		color: colors.palette.green600
+	}}>
+            Run
+          </text>
         </view>
       </view>
     </view>;
@@ -403,31 +646,117 @@ const LogPanel = ({ logs, clearLogs }) => {
 //#endregion
 //#region src/components/NetworkDetailSection.tsx
 const NetworkDetailSection = ({ headers = {}, body = "", error = "" }) => {
+	const colors = useThemeColors();
 	return <>
       {}
       <view className={"np-detailSection"}>
-        <text className={"np-detailSectionTitle"}>Headers</text>
+        <text className={"np-detailSectionTitle"} style={{
+		fontWeight: fontWeight.bold,
+		color: colors.fg.neutral
+	}}>
+          Headers
+        </text>
         {headers && Object.keys(headers).length > 0 ? <view className={"np-table"}>
-            {Object.entries(headers).map(([key, value]) => <view key={key} className={"np-tableRow"}>
-                <text className={"np-tableKey"}>{key}</text>
-                <text className={"np-tableValue"}>{value}</text>
+            {Object.entries(headers).map(([key, value]) => <view key={key} className={"np-tableRow"} style={{ backgroundColor: colors.bg.neutralWeak }}>
+                <text className={"np-tableKey"} style={{
+		fontWeight: fontWeight.bold,
+		color: colors.fg.neutralSubtle
+	}}>
+                  {key}
+                </text>
+                <text className={"np-tableValue"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.neutral
+	}}>
+                  {value}
+                </text>
               </view>)}
-          </view> : <text className={"np-emptyText"}>No headers</text>}
+          </view> : <text className={"np-emptyText"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.disabled
+	}}>
+            No headers
+          </text>}
       </view>
 
       {}
       <view className={"np-detailSection"}>
-        <text className={"np-detailSectionTitle"}>Body</text>
-        {error && <text className={"np-errorText"}>{error}</text>}
-        {body && <text className={"np-bodyText"}>{body}</text>}
-        {!error && !body && <text className={"np-emptyText"}>No body</text>}
+        <text className={"np-detailSectionTitle"} style={{
+		fontWeight: fontWeight.bold,
+		color: colors.fg.neutral
+	}}>
+          Body
+        </text>
+        {error && <text className={"np-errorText"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.palette.red600,
+		backgroundColor: colors.palette.red100
+	}}>
+            {error}
+          </text>}
+        {body && <text className={"np-bodyText"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.neutral,
+		backgroundColor: colors.bg.neutralWeak
+	}}>
+            {body}
+          </text>}
+        {!error && !body && <text className={"np-emptyText"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.disabled
+	}}>
+            No body
+          </text>}
       </view>
     </>;
 };
 
 //#endregion
 //#region src/components/NetworkPanel.tsx
+function getMethodColors(colors, method) {
+	switch (method) {
+		case "GET": return {
+			color: colors.palette.blue600,
+			backgroundColor: colors.palette.blue100
+		};
+		case "POST": return {
+			color: colors.palette.green600,
+			backgroundColor: colors.palette.green100
+		};
+		case "PUT": return {
+			color: colors.palette.yellow600,
+			backgroundColor: colors.palette.yellow100
+		};
+		case "PATCH": return {
+			color: colors.palette.purple600,
+			backgroundColor: colors.palette.purple100
+		};
+		case "DELETE": return {
+			color: colors.palette.red600,
+			backgroundColor: colors.palette.red100
+		};
+		default: return {
+			color: colors.fg.neutral,
+			backgroundColor: colors.bg.neutralWeak
+		};
+	}
+}
+function getStatusCodeColor(colors, variant) {
+	switch (variant) {
+		case "success": return colors.palette.green600;
+		case "error": return colors.palette.red600;
+		case "pending": return colors.fg.neutralSubtle;
+	}
+}
+function getItemBg(colors, status) {
+	switch (status) {
+		case "pending": return colors.palette.gray100;
+		case "error": return colors.palette.red100;
+		default: return;
+	}
+}
 const NetworkPanel = ({ networks, clearNetworks }) => {
+	const colors = useThemeColors();
 	const [selectedId, setSelectedId] = useState(null);
 	const [activeTab, setActiveTab] = useState("general");
 	const formatDuration = (duration) => {
@@ -476,54 +805,99 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
 	};
 	return <view className={"np-container"}>
       <view className={"np-header"}>
-        <text className={"np-count"}>Total: {networks.length} requests</text>
-        <view className={"np-clearButton"} bindtap={clearNetworks}>
-          <text className={"np-clearButtonText"}>🗑</text>
+        <text className={"np-count"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.neutralSubtle
+	}}>
+          Total: {networks.length} requests
+        </text>
+        <view className={"np-clearButton"} style={{ backgroundColor: colors.bg.neutralWeak }} bindtap={clearNetworks}>
+          <text className={"np-clearButtonText"} style={{
+		fontWeight: fontWeight.medium,
+		color: colors.fg.neutralMuted
+	}}>
+            🗑
+          </text>
         </view>
       </view>
 
       {networks.length === 0 ? <view className={"np-placeholder"}>
-          <text className={"np-placeholderText"}>No network requests yet</text>
+          <text className={"np-placeholderText"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.disabled
+	}}>
+            No network requests yet
+          </text>
         </view> : <FadeList className={"np-list"}>
           {networks.map((network) => <list-item key={network.id} item-key={network.id}>
-              <view className={`np-item np-item--${network.status}`}>
+              <view className={"np-item"} style={{
+		backgroundColor: getItemBg(colors, network.status),
+		borderBottomColor: colors.stroke.neutralWeak
+	}}>
                 <view className={"np-itemHeader"} bindtap={() => setSelectedId(selectedId === network.id ? null : network.id)}>
-                  <text className={`np-method np-method--${network.method}`}>
+                  <text className={"np-method"} style={{
+		fontWeight: fontWeight.bold,
+		...getMethodColors(colors, network.method)
+	}}>
                     {network.method}
                   </text>
-                  {network.statusCode && <text className={`np-statusCode np-statusCode--${getStatusCodeVariant(network.status, network.statusCode)}`}>
+                  {network.statusCode && <text className={"np-statusCode"} style={{
+		fontWeight: fontWeight.bold,
+		color: getStatusCodeColor(colors, getStatusCodeVariant(network.status, network.statusCode))
+	}}>
                       {network.statusCode}
                     </text>}
-                  {network.status === "pending" && <text className={"np-statusCode np-statusCode--pending"}>
+                  {network.status === "pending" && <text className={"np-statusCode"} style={{
+		fontWeight: fontWeight.bold,
+		color: colors.fg.neutralSubtle
+	}}>
                       Pending...
                     </text>}
-                  <text className={"np-time"}>
+                  <text className={"np-time"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.neutralSubtle
+	}}>
                     {formatDuration(network.duration)}
                   </text>
-                  <text className={"np-time"}>
+                  <text className={"np-time"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.neutralSubtle
+	}}>
                     {new Date(network.startTime).toISOString()}
                   </text>
                 </view>
 
-                <text className={"np-path"} bindtap={() => setSelectedId(selectedId === network.id ? null : network.id)}>
+                <text className={"np-path"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.neutral
+	}} bindtap={() => setSelectedId(selectedId === network.id ? null : network.id)}>
                   {extractPath(network.url)}
                 </text>
 
-                {selectedId === network.id && <view className={"np-detailsContainer"}>
+                {selectedId === network.id && <view className={"np-detailsContainer"} style={{ borderTopColor: colors.stroke.neutralSubtle }}>
                     {}
                     <view className={"np-tabs"}>
-                      <view className={`np-tab${activeTab === "general" ? " np-tab--active" : ""}`} bindtap={() => setActiveTab("general")}>
-                        <text className={`np-tabText${activeTab === "general" ? " np-tabText--active" : ""}`}>
+                      <view className={"np-tab"} style={{ backgroundColor: activeTab === "general" ? colors.bg.neutralWeak : void 0 }} bindtap={() => setActiveTab("general")}>
+                        <text className={"np-tabText"} style={{
+		fontWeight: fontWeight.medium,
+		color: activeTab === "general" ? colors.fg.neutral : colors.fg.neutralSubtle
+	}}>
                           General
                         </text>
                       </view>
-                      <view className={`np-tab${activeTab === "request" ? " np-tab--active" : ""}`} bindtap={() => setActiveTab("request")}>
-                        <text className={`np-tabText${activeTab === "request" ? " np-tabText--active" : ""}`}>
+                      <view className={"np-tab"} style={{ backgroundColor: activeTab === "request" ? colors.bg.neutralWeak : void 0 }} bindtap={() => setActiveTab("request")}>
+                        <text className={"np-tabText"} style={{
+		fontWeight: fontWeight.medium,
+		color: activeTab === "request" ? colors.fg.neutral : colors.fg.neutralSubtle
+	}}>
                           Request
                         </text>
                       </view>
-                      <view className={`np-tab${activeTab === "response" ? " np-tab--active" : ""}`} bindtap={() => setActiveTab("response")}>
-                        <text className={`np-tabText${activeTab === "response" ? " np-tabText--active" : ""}`}>
+                      <view className={"np-tab"} style={{ backgroundColor: activeTab === "response" ? colors.bg.neutralWeak : void 0 }} bindtap={() => setActiveTab("response")}>
+                        <text className={"np-tabText"} style={{
+		fontWeight: fontWeight.medium,
+		color: activeTab === "response" ? colors.fg.neutral : colors.fg.neutralSubtle
+	}}>
                           Response
                         </text>
                       </view>
@@ -532,9 +906,17 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
                     {}
                     <view className={"np-tabContent"}>
                       {activeTab === "general" && <view className={"np-table"}>
-                          {getGeneralInfo(network).map((item) => <view key={item.key} className={"np-tableRow"}>
-                              <text className={"np-tableKey"}>{item.key}</text>
-                              <text className={"np-tableValue"}>
+                          {getGeneralInfo(network).map((item) => <view key={item.key} className={"np-tableRow"} style={{ backgroundColor: colors.bg.neutralWeak }}>
+                              <text className={"np-tableKey"} style={{
+		fontWeight: fontWeight.bold,
+		color: colors.fg.neutralSubtle
+	}}>
+                                {item.key}
+                              </text>
+                              <text className={"np-tableValue"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.neutral
+	}}>
                                 {item.value}
                               </text>
                             </view>)}
@@ -578,11 +960,41 @@ const getPrimaryFcpLabel = (entry) => {
 	if (fcp?.duration !== void 0) return `fcp: ${formatDuration(fcp.duration)}`;
 	return "";
 };
+function getEntryTypeColors(colors, entryType) {
+	switch (entryType) {
+		case "init": return {
+			color: colors.palette.blue600,
+			backgroundColor: colors.palette.blue100
+		};
+		case "metric": return {
+			color: colors.palette.green600,
+			backgroundColor: colors.palette.green100
+		};
+		case "pipeline": return {
+			color: colors.palette.purple600,
+			backgroundColor: colors.palette.purple100
+		};
+		case "resource": return {
+			color: colors.palette.yellow600,
+			backgroundColor: colors.palette.yellow100
+		};
+		default: return {
+			color: colors.fg.neutral,
+			backgroundColor: colors.bg.neutralWeak
+		};
+	}
+}
 const PerformancePanel = ({ performances, clearPerformances }) => {
+	const colors = useThemeColors();
 	const [selectedId, setSelectedId] = useState(null);
 	if (performances.length === 0) return <view className={"pp-container"}>
-        <view className={"pp-header"}>
-          <text className={"pp-count"}>0 entries</text>
+        <view className={"pp-header"} style={{ borderBottomColor: colors.stroke.neutralSubtle }}>
+          <text className={"pp-count"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.neutralSubtle
+	}}>
+            0 entries
+          </text>
           <view bindtap={() => {
 		console.log("[PerformancePanel] performances", performances);
 	}} style={{
@@ -591,21 +1003,39 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
 	}}>
             <text>Log</text>
           </view>
-          <view bindtap={clearPerformances} className={"pp-clearButton"}>
-            <text className={"pp-clearButtonText"}>🗑</text>
+          <view bindtap={clearPerformances} className={"pp-clearButton"} style={{ backgroundColor: colors.bg.neutralWeak }}>
+            <text className={"pp-clearButtonText"} style={{
+		fontWeight: fontWeight.medium,
+		color: colors.fg.neutralMuted
+	}}>
+              🗑
+            </text>
           </view>
         </view>
         <view className={"pp-placeholder"}>
-          <text className={"pp-placeholderText"}>
+          <text className={"pp-placeholderText"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.disabled
+	}}>
             No performance data yet...
           </text>
         </view>
       </view>;
 	return <view className={"pp-container"}>
-      <view className={"pp-header"}>
-        <text className={"pp-count"}>{performances.length} entries</text>
-        <view bindtap={clearPerformances} className={"pp-clearButton"}>
-          <text className={"pp-clearButtonText"}>🗑</text>
+      <view className={"pp-header"} style={{ borderBottomColor: colors.stroke.neutralSubtle }}>
+        <text className={"pp-count"} style={{
+		fontWeight: fontWeight.regular,
+		color: colors.fg.neutralSubtle
+	}}>
+          {performances.length} entries
+        </text>
+        <view bindtap={clearPerformances} className={"pp-clearButton"} style={{ backgroundColor: colors.bg.neutralWeak }}>
+          <text className={"pp-clearButtonText"} style={{
+		fontWeight: fontWeight.medium,
+		color: colors.fg.neutralMuted
+	}}>
+            🗑
+          </text>
         </view>
       </view>
 
@@ -616,68 +1046,122 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
 		const primaryFcp = getPrimaryFcpLabel(perf);
 		const { totalFcp, lynxFcp, fcp } = fcpMetrics ?? {};
 		return <list-item key={perf.id} item-key={perf.id}>
-              <view className={"pp-item"}>
+              <view className={"pp-item"} style={{ borderBottomColor: colors.stroke.neutralWeak }}>
                 <view className={"pp-itemHeader"} bindtap={() => setSelectedId(selectedId === perf.id ? null : perf.id)}>
-                  <text className={`pp-entryType pp-entryType--${perf.entryType}`}>
+                  <text className={"pp-entryType"} style={{
+			fontWeight: fontWeight.bold,
+			...getEntryTypeColors(colors, perf.entryType)
+		}}>
                     {perf.entryType}
                   </text>
-                  <text className={"pp-entryName"}>{perf.name}</text>
-                  <text className={"pp-timestamp"}>
+                  <text className={"pp-entryName"} style={{
+			fontWeight: fontWeight.medium,
+			color: colors.fg.neutral
+		}}>
+                    {perf.name}
+                  </text>
+                  <text className={"pp-timestamp"} style={{
+			fontWeight: fontWeight.regular,
+			color: colors.fg.neutralSubtle
+		}}>
                     {new Date(perf.timestamp).toISOString()}
                   </text>
                 </view>
 
                 <view bindtap={() => setSelectedId(selectedId === perf.id ? null : perf.id)}>
-                  {isMetricFcp && primaryFcp && <text className={"pp-fcpHighlight"}>{primaryFcp}</text>}
+                  {isMetricFcp && primaryFcp && <text className={"pp-fcpHighlight"} style={{
+			fontWeight: fontWeight.bold,
+			color: colors.palette.blue600,
+			backgroundColor: colors.palette.blue100
+		}}>
+                      {primaryFcp}
+                    </text>}
                 </view>
 
                 {selectedId === perf.id && <view className={"pp-detailsContainer"}>
                     {isMetricFcp && fcpMetrics && <view className={"pp-fcpSection"}>
-                        {totalFcp !== void 0 && <view className={"pp-fcpMetric"}>
+                        {totalFcp !== void 0 && <view className={"pp-fcpMetric"} style={{ backgroundColor: colors.bg.layerDefault }}>
                             <view className={"pp-fcpMetricHeader"}>
-                              <text className={"pp-fcpMetricName"}>
+                              <text className={"pp-fcpMetricName"} style={{
+			fontWeight: fontWeight.bold,
+			color: colors.fg.neutral
+		}}>
                                 전체 FCP
                               </text>
-                              <text className={"pp-fcpMetricValue"}>
+                              <text className={"pp-fcpMetricValue"} style={{
+			fontWeight: fontWeight.bold,
+			color: colors.palette.blue600
+		}}>
                                 {formatDuration(totalFcp.duration)}
                               </text>
                             </view>
-                            <text className={"pp-fcpMetricDescription"}>
+                            <text className={"pp-fcpMetricDescription"} style={{
+			fontWeight: fontWeight.regular,
+			color: colors.fg.neutralSubtle
+		}}>
                               PrepareTemplate Start부터 Paint End 까지 걸리는
                               시간
                             </text>
                           </view>}
 
-                        {lynxFcp !== void 0 && <view className={"pp-fcpMetric"}>
+                        {lynxFcp !== void 0 && <view className={"pp-fcpMetric"} style={{ backgroundColor: colors.bg.layerDefault }}>
                             <view className={"pp-fcpMetricHeader"}>
-                              <text className={"pp-fcpMetricName"}>LynxFCP</text>
-                              <text className={"pp-fcpMetricValue"}>
+                              <text className={"pp-fcpMetricName"} style={{
+			fontWeight: fontWeight.bold,
+			color: colors.fg.neutral
+		}}>
+                                LynxFCP
+                              </text>
+                              <text className={"pp-fcpMetricValue"} style={{
+			fontWeight: fontWeight.bold,
+			color: colors.palette.blue600
+		}}>
                                 {formatDuration(lynxFcp.duration)}
                               </text>
                             </view>
-                            <text className={"pp-fcpMetricDescription"}>
+                            <text className={"pp-fcpMetricDescription"} style={{
+			fontWeight: fontWeight.regular,
+			color: colors.fg.neutralSubtle
+		}}>
                               Bundle Load 시작부터 Paint End 까지 걸리는 시간
                             </text>
                           </view>}
 
-                        {fcp !== void 0 && <view className={"pp-fcpMetric"}>
+                        {fcp !== void 0 && <view className={"pp-fcpMetric"} style={{ backgroundColor: colors.bg.layerDefault }}>
                             <view className={"pp-fcpMetricHeader"}>
-                              <text className={"pp-fcpMetricName"}>
+                              <text className={"pp-fcpMetricName"} style={{
+			fontWeight: fontWeight.bold,
+			color: colors.fg.neutral
+		}}>
                                 렌더링 FCP
                               </text>
-                              <text className={"pp-fcpMetricValue"}>
+                              <text className={"pp-fcpMetricValue"} style={{
+			fontWeight: fontWeight.bold,
+			color: colors.palette.blue600
+		}}>
                                 {formatDuration(fcp.duration)}
                               </text>
                             </view>
-                            <text className={"pp-fcpMetricDescription"}>
+                            <text className={"pp-fcpMetricDescription"} style={{
+			fontWeight: fontWeight.regular,
+			color: colors.fg.neutralSubtle
+		}}>
                               TemplateBundle 준비부터 Paint End 까지 걸리는 시간
                             </text>
                           </view>}
                       </view>}
 
-                    {!!perf.rawEntry && <view className={"pp-rawEntrySection"}>
-                        <text className={"pp-detailTitle"}>Raw Entry</text>
-                        <text className={"pp-rawEntry"}>
+                    {!!perf.rawEntry && <view className={"pp-rawEntrySection"} style={{ backgroundColor: colors.bg.neutralWeak }}>
+                        <text className={"pp-detailTitle"} style={{
+			fontWeight: fontWeight.bold,
+			color: colors.fg.neutral
+		}}>
+                          Raw Entry
+                        </text>
+                        <text className={"pp-rawEntry"} style={{
+			fontWeight: fontWeight.regular,
+			color: colors.fg.neutralSubtle
+		}}>
                           {String(stringify(perf.rawEntry, null, 2, { references: true }))}
                         </text>
                       </view>}
@@ -692,11 +1176,12 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
 //#endregion
 //#region src/components/Tabs.tsx
 function Tabs(props) {
+	const colors = useThemeColors();
 	const tabContentsRef = useRef(null);
 	const [activeIndex, setActiveIndex] = useState(0);
 	const tabSize = props.items.length < 4 ? void 0 : `t${Math.max(1, 5 - (props.items.length - 3))}`;
 	return <view className={"tabs-root"}>
-      <view className={"tabs-header"}>
+      <view className={"tabs-header"} style={{ boxShadow: `inset 0 -1px 0 0 ${colors.stroke.neutralSubtle}` }}>
         {props.items.map((item, i) => <view key={item.key} className={"tabs-triggerButton"} bindtap={() => {
 		setActiveIndex(i);
 		props.onTabChange?.();
@@ -708,11 +1193,14 @@ function Tabs(props) {
 			}
 		}).exec();
 	}}>
-            <text className={`tabs-triggerButtonText${i === activeIndex ? " tabs-triggerButtonText--active" : ""}${tabSize ? ` tabs-triggerButtonText--${tabSize}` : ""}`}>
+            <text className={`tabs-triggerButtonText${tabSize ? ` tabs-triggerButtonText--${tabSize}` : ""}`} style={{
+		fontWeight: fontWeight.bold,
+		color: i === activeIndex ? colors.fg.neutral : colors.fg.neutralSubtle
+	}}>
               {item.label}
             </text>
             {i === 0 && <view className={"tabs-triggerIndicator"} style={{ transform: `translateX(${activeIndex * 100}%)` }}>
-                <view className={"tabs-triggerIndicatorLine"} />
+                <view className={"tabs-triggerIndicatorLine"} style={{ backgroundColor: colors.fg.neutral }} />
               </view>}
           </view>)}
       </view>
@@ -860,6 +1348,7 @@ const SHINE_STYLES = {
 	}
 };
 const FloatingButton = ({ bindtap, children }) => {
+	const colors = useThemeColors();
 	const { phase, right, bottom, clearTimer, handlers } = useLongPressDrag(bindtap);
 	const handleReload = () => {
 		try {
@@ -875,14 +1364,17 @@ const FloatingButton = ({ bindtap, children }) => {
       <view className={"fb-wrapper"} consume-slide-event={[[-180, 180]]} style={{
 		right: `${right}px`,
 		bottom: `${bottom}px`,
-		transform: isDragging ? "scale(1.05)" : "scale(1)"
+		transform: isDragging ? "scale(1.05)" : "scale(1)",
+		transition: `transform ${duration.d4} cubic-bezier(0.4, 0, 0.2, 1)`
 	}} {...handlers}>
-        <view className={"fb-button"}>
+        <view className={"fb-button"} style={{ backgroundColor: colors.palette.green600 }}>
           {children}
           <view className={"fb-shineOverlay"} style={SHINE_STYLES[phase]} />
         </view>
-        <view className={"fb-reloadButton"} catchtouchstart={() => clearTimer()} bindtap={handleReload}>
-          <text className={"fb-reloadIcon"}>{"↻"}</text>
+        <view className={"fb-reloadButton"} style={{ backgroundColor: colors.palette.green600 }} catchtouchstart={() => clearTimer()} bindtap={handleReload}>
+          <text className={"fb-reloadIcon"} style={{ color: colors.palette.staticWhite }}>
+            {"↻"}
+          </text>
         </view>
       </view>
     </>;
@@ -894,6 +1386,7 @@ const LynxConsole = forwardRef(({ theme = "light", safeAreaInsetBottom = "50px",
 	const [isOpen, setIsOpen] = useState(false);
 	const [shouldClose, setShouldClose] = useState(false);
 	const { performances } = usePerformance();
+	const colors = useMemo(() => getColors(theme), [theme]);
 	const latestFcp = useMemo(() => {
 		for (let i = performances.length - 1; i >= 0; i--) {
 			const perf = performances[i];
@@ -922,18 +1415,28 @@ const LynxConsole = forwardRef(({ theme = "light", safeAreaInsetBottom = "50px",
 		setIsOpen(false);
 		setShouldClose(false);
 	};
-	const themeClass = `data-lynx-console-color-mode__${theme}-only`;
-	return <view className={themeClass}>
-        <FloatingButton bindtap={handleOpenBottomSheet}>
-          <text className="fb-title">LynxConsole</text>
-          <text className="fb-subtitle">
-            {`${latestFcp?.name ?? "FCP"}: ${latestFcp?.duration ? latestFcp.duration.toFixed(2) : "--"}ms`}
-          </text>
-        </FloatingButton>
-        {isOpen && <BottomSheet isOpen={isOpen} shouldClose={shouldClose} onClose={handleCloseBottomSheet} title="Lynx Console" safeAreaInsetBottom={safeAreaInsetBottom}>
-            <ConsolePanel customTabs={customTabs} />
-          </BottomSheet>}
-      </view>;
+	return <ThemeProvider value={colors}>
+        <view style={{
+		backgroundColor: colors.bg.layerDefault,
+		color: colors.fg.neutral
+	}}>
+          <FloatingButton bindtap={handleOpenBottomSheet}>
+            <text className="fb-title" style={{
+		fontWeight: "400",
+		color: colors.palette.staticWhite
+	}}>LynxConsole</text>
+            <text className="fb-subtitle" style={{
+		fontWeight: "400",
+		color: colors.palette.staticWhite
+	}}>
+              {`${latestFcp?.name ?? "FCP"}: ${latestFcp?.duration ? latestFcp.duration.toFixed(2) : "--"}ms`}
+            </text>
+          </FloatingButton>
+          {isOpen && <BottomSheet isOpen={isOpen} shouldClose={shouldClose} onClose={handleCloseBottomSheet} title="Lynx Console" safeAreaInsetBottom={safeAreaInsetBottom}>
+              <ConsolePanel customTabs={customTabs} />
+            </BottomSheet>}
+        </view>
+      </ThemeProvider>;
 });
 
 //#endregion