lynx-console 0.2.1 → 0.2.2

package/src/components/NetworkPanel.css

@@ -17,21 +17,16 @@
 .np-count {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral-subtle);
 }
 
 .np-clearButton {
   padding: 3px 6px;
-  background-color: var(--lynx-console-color-bg-neutral-weak);
   border-radius: 4px;
 }
 
 .np-clearButtonText {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-medium);
-  color: var(--lynx-console-color-fg-neutral-muted);
 }
 
 .np-list {
@@ -48,25 +43,14 @@
 .np-placeholderText {
   font-size: 0.875rem;
   line-height: 1.1875rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-disabled);
 }
 
 .np-item {
   padding: 8px;
   border-bottom-width: 1px;
-  border-bottom-color: var(--lynx-console-color-stroke-neutral-weak);
   border-bottom-style: solid;
 }
 
-.np-item--pending {
-  background-color: var(--lynx-console-color-palette-gray-100);
-}
-
-.np-item--error {
-  background-color: var(--lynx-console-color-palette-red-100);
-}
-
 .np-itemHeader {
   display: flex;
   flex-direction: row;
@@ -78,68 +62,23 @@
 .np-method {
   font-size: 0.75rem;
   line-height: 1rem;
-  font-weight: var(--lynx-console-font-weight-bold);
   padding: 0 4px;
   border-radius: 2px;
-  color: var(--lynx-console-color-fg-neutral);
-  background-color: var(--lynx-console-color-bg-neutral-weak);
-}
-
-.np-method--GET {
-  color: var(--lynx-console-color-palette-blue-600);
-  background-color: var(--lynx-console-color-palette-blue-100);
-}
-
-.np-method--POST {
-  color: var(--lynx-console-color-palette-green-600);
-  background-color: var(--lynx-console-color-palette-green-100);
-}
-
-.np-method--PUT {
-  color: var(--lynx-console-color-palette-yellow-600);
-  background-color: var(--lynx-console-color-palette-yellow-100);
-}
-
-.np-method--PATCH {
-  color: var(--lynx-console-color-palette-purple-600);
-  background-color: var(--lynx-console-color-palette-purple-100);
-}
-
-.np-method--DELETE {
-  color: var(--lynx-console-color-palette-red-600);
-  background-color: var(--lynx-console-color-palette-red-100);
 }
 
 .np-statusCode {
   font-size: 0.75rem;
   line-height: 1rem;
-  font-weight: var(--lynx-console-font-weight-bold);
-}
-
-.np-statusCode--success {
-  color: var(--lynx-console-color-palette-green-600);
-}
-
-.np-statusCode--error {
-  color: var(--lynx-console-color-palette-red-600);
-}
-
-.np-statusCode--pending {
-  color: var(--lynx-console-color-fg-neutral-subtle);
 }
 
 .np-time {
   font-size: 0.75rem;
   line-height: 1rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral-subtle);
 }
 
 .np-url {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral);
   word-break: break-all;
   margin-bottom: 4px;
 }
@@ -147,8 +86,6 @@
 .np-path {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral);
   word-break: break-all;
   white-space: pre-wrap;
   overflow: visible;
@@ -158,15 +95,12 @@
 .np-details {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral-subtle);
 }
 
 .np-detailsContainer {
   margin-top: 12px;
   padding-top: 12px;
   border-top-width: 1px;
-  border-top-color: var(--lynx-console-color-stroke-neutral-subtle);
   border-top-style: solid;
 }
 
@@ -183,19 +117,9 @@
   cursor: pointer;
 }
 
-.np-tab--active {
-  background-color: var(--lynx-console-color-bg-neutral-weak);
-}
-
 .np-tabText {
   font-size: 0.875rem;
   line-height: 1.1875rem;
-  font-weight: var(--lynx-console-font-weight-medium);
-  color: var(--lynx-console-color-fg-neutral-subtle);
-}
-
-.np-tabText--active {
-  color: var(--lynx-console-color-fg-neutral);
 }
 
 .np-tabContent {
@@ -209,8 +133,6 @@
 .np-detailSectionTitle {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-bold);
-  color: var(--lynx-console-color-fg-neutral);
   margin-bottom: 8px;
 }
 
@@ -225,15 +147,12 @@
   flex-direction: row;
   gap: 8px;
   padding: 4px 8px;
-  background-color: var(--lynx-console-color-bg-neutral-weak);
   border-radius: 2px;
 }
 
 .np-tableKey {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-bold);
-  color: var(--lynx-console-color-fg-neutral-subtle);
   min-width: 70px;
   flex-shrink: 0;
 }
@@ -241,8 +160,6 @@
 .np-tableValue {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral);
   word-break: break-all;
   flex: 1;
 }
@@ -250,10 +167,7 @@
 .np-bodyText {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral);
   padding: 8px;
-  background-color: var(--lynx-console-color-bg-neutral-weak);
   border-radius: 4px;
   word-break: break-all;
   white-space: pre-wrap;
@@ -262,10 +176,7 @@
 .np-errorText {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-palette-red-600);
   padding: 8px;
-  background-color: var(--lynx-console-color-palette-red-100);
   border-radius: 4px;
   word-break: break-all;
 }
@@ -273,8 +184,6 @@
 .np-emptyText {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-disabled);
   text-align: center;
   padding: 16px 0;
 }

package/src/components/NetworkPanel.tsx

@@ -1,4 +1,6 @@
 import { useState } from "@lynx-js/react";
+import { useThemeColors } from "../styles/ThemeContext";
+import { type ThemeColors, fontWeight } from "../styles/theme";
 import type { NetworkEntry } from "../types";
 import { FadeList } from "./FadeList";
 import { NetworkDetailSection } from "./NetworkDetailSection";
@@ -11,10 +13,53 @@ interface NetworkPanelProps {
 
 type TabType = "general" | "request" | "response";
 
+function getMethodColors(colors: ThemeColors, method: string) {
+  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: ThemeColors,
+  variant: "success" | "error" | "pending",
+): string {
+  switch (variant) {
+    case "success":
+      return colors.palette.green600;
+    case "error":
+      return colors.palette.red600;
+    case "pending":
+      return colors.fg.neutralSubtle;
+  }
+}
+
+function getItemBg(colors: ThemeColors, status: string): string | undefined {
+  switch (status) {
+    case "pending":
+      return colors.palette.gray100;
+    case "error":
+      return colors.palette.red100;
+    default:
+      return undefined;
+  }
+}
+
 export const NetworkPanel = ({
   networks,
   clearNetworks,
 }: NetworkPanelProps) => {
+  const colors = useThemeColors();
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<TabType>("general");
   const formatDuration = (duration?: number): string => {
@@ -69,21 +114,46 @@ export const NetworkPanel = ({
   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={() =>
@@ -91,32 +161,56 @@ export const NetworkPanel = ({
                   }
                 >
                   <text
-                    className={`np-method np-method--${network.method}`}
+                    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)}`}
+                      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"}>
+                    <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"}
+                  style={{ fontWeight: fontWeight.regular, color: colors.fg.neutral }}
                   bindtap={() =>
                     setSelectedId(selectedId === network.id ? null : network.id)
                   }
@@ -125,35 +219,71 @@ export const NetworkPanel = ({
                 </text>
 
                 {selectedId === network.id && (
-                  <view className={"np-detailsContainer"}>
+                  <view
+                    className={"np-detailsContainer"}
+                    style={{ borderTopColor: colors.stroke.neutralSubtle }}
+                  >
                     {/* Tabs */}
                     <view className={"np-tabs"}>
                       <view
-                        className={`np-tab${activeTab === "general" ? " np-tab--active" : ""}`}
+                        className={"np-tab"}
+                        style={{
+                          backgroundColor:
+                            activeTab === "general" ? colors.bg.neutralWeak : undefined,
+                        }}
                         bindtap={() => setActiveTab("general")}
                       >
                         <text
-                          className={`np-tabText${activeTab === "general" ? " np-tabText--active" : ""}`}
+                          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" : ""}`}
+                        className={"np-tab"}
+                        style={{
+                          backgroundColor:
+                            activeTab === "request" ? colors.bg.neutralWeak : undefined,
+                        }}
                         bindtap={() => setActiveTab("request")}
                       >
                         <text
-                          className={`np-tabText${activeTab === "request" ? " np-tabText--active" : ""}`}
+                          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" : ""}`}
+                        className={"np-tab"}
+                        style={{
+                          backgroundColor:
+                            activeTab === "response" ? colors.bg.neutralWeak : undefined,
+                        }}
                         bindtap={() => setActiveTab("response")}
                       >
                         <text
-                          className={`np-tabText${activeTab === "response" ? " np-tabText--active" : ""}`}
+                          className={"np-tabText"}
+                          style={{
+                            fontWeight: fontWeight.medium,
+                            color:
+                              activeTab === "response"
+                                ? colors.fg.neutral
+                                : colors.fg.neutralSubtle,
+                          }}
                         >
                           Response
                         </text>
@@ -165,9 +295,27 @@ export const NetworkPanel = ({
                       {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"}>
+                            <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>

package/src/components/PerformancePanel.css

@@ -13,28 +13,22 @@
   margin-bottom: 8px;
   padding-bottom: 4px;
   border-bottom-width: 1px;
-  border-bottom-color: var(--lynx-console-color-stroke-neutral-subtle);
   border-bottom-style: solid;
 }
 
 .pp-count {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral-subtle);
 }
 
 .pp-clearButton {
   padding: 3px 6px;
-  background-color: var(--lynx-console-color-bg-neutral-weak);
   border-radius: 4px;
 }
 
 .pp-clearButtonText {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-medium);
-  color: var(--lynx-console-color-fg-neutral-muted);
 }
 
 .pp-list {
@@ -51,14 +45,11 @@
 .pp-placeholderText {
   font-size: 0.875rem;
   line-height: 1.1875rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-disabled);
 }
 
 .pp-item {
   padding: 8px;
   border-bottom-width: 1px;
-  border-bottom-color: var(--lynx-console-color-stroke-neutral-weak);
   border-bottom-style: solid;
 }
 
@@ -73,45 +64,18 @@
 .pp-entryType {
   font-size: 0.75rem;
   line-height: 1rem;
-  font-weight: var(--lynx-console-font-weight-bold);
   padding: 0 6px;
   border-radius: 2px;
-  color: var(--lynx-console-color-fg-neutral);
-  background-color: var(--lynx-console-color-bg-neutral-weak);
-}
-
-.pp-entryType--init {
-  color: var(--lynx-console-color-palette-blue-600);
-  background-color: var(--lynx-console-color-palette-blue-100);
-}
-
-.pp-entryType--metric {
-  color: var(--lynx-console-color-palette-green-600);
-  background-color: var(--lynx-console-color-palette-green-100);
-}
-
-.pp-entryType--pipeline {
-  color: var(--lynx-console-color-palette-purple-600);
-  background-color: var(--lynx-console-color-palette-purple-100);
-}
-
-.pp-entryType--resource {
-  color: var(--lynx-console-color-palette-yellow-600);
-  background-color: var(--lynx-console-color-palette-yellow-100);
 }
 
 .pp-entryName {
   font-size: 0.75rem;
   line-height: 1rem;
-  font-weight: var(--lynx-console-font-weight-medium);
-  color: var(--lynx-console-color-fg-neutral);
 }
 
 .pp-timestamp {
   font-size: 0.75rem;
   line-height: 1rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral-subtle);
 }
 
 .pp-fcpMetricHeader {
@@ -124,9 +88,6 @@
 .pp-fcpHighlight {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-bold);
-  color: var(--lynx-console-color-palette-blue-600);
-  background-color: var(--lynx-console-color-palette-blue-100);
   padding: 4px 8px;
   border-radius: 4px;
   margin-top: 4px;
@@ -145,15 +106,12 @@
   align-items: center;
   gap: 8px;
   padding: 4px 8px;
-  background-color: var(--lynx-console-color-bg-neutral-weak);
   border-radius: 2px;
 }
 
 .pp-metricName {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-medium);
-  color: var(--lynx-console-color-fg-neutral-subtle);
   min-width: 100px;
   flex-shrink: 0;
 }
@@ -161,8 +119,6 @@
 .pp-metricValue {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-bold);
-  color: var(--lynx-console-color-palette-green-600);
   flex: 1;
 }
 
@@ -182,13 +138,10 @@
 .pp-fcpSectionDescription {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral-subtle);
   margin-bottom: 4px;
 }
 
 .pp-fcpMetric {
-  background-color: var(--lynx-console-color-bg-layer-default);
   border-radius: 4px;
   display: flex;
   flex-direction: column;
@@ -198,51 +151,38 @@
 .pp-fcpMetricName {
   font-size: 0.75rem;
   line-height: 1rem;
-  font-weight: var(--lynx-console-font-weight-bold);
-  color: var(--lynx-console-color-fg-neutral);
 }
 
 .pp-fcpMetricValue {
   font-size: 0.6875rem;
   line-height: 0.9375rem;
-  font-weight: var(--lynx-console-font-weight-bold);
-  color: var(--lynx-console-color-palette-blue-600);
 }
 
 .pp-fcpMetricDescription {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral-subtle);
 }
 
 .pp-fcpMetricFormula {
   font-size: 0.875rem;
   line-height: 1.1875rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-disabled);
   font-family: monospace;
 }
 
 .pp-rawEntrySection {
   padding: 12px;
-  background-color: var(--lynx-console-color-bg-neutral-weak);
   border-radius: 4px;
 }
 
 .pp-detailTitle {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-bold);
-  color: var(--lynx-console-color-fg-neutral);
   margin-bottom: 8px;
 }
 
 .pp-rawEntry {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral-subtle);
   font-family: monospace;
   white-space: pre-wrap;
   word-break: break-all;