lynx-console 0.2.1 → 0.2.2

package/src/components/PerformancePanel.tsx

@@ -1,5 +1,7 @@
 import { useState } from "@lynx-js/react";
 import { stringify } from "javascript-stringify";
+import { useThemeColors } from "../styles/ThemeContext";
+import { type ThemeColors, fontWeight } from "../styles/theme";
 import type { PerformanceEntryData } from "../types";
 import { FadeList } from "./FadeList";
 import "./PerformancePanel.css";
@@ -61,16 +63,40 @@ const getPrimaryFcpLabel = (entry: PerformanceEntryData): string => {
   return "";
 };
 
+function getEntryTypeColors(colors: ThemeColors, entryType: string) {
+  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 };
+  }
+}
+
 export const PerformancePanel = ({
   performances,
   clearPerformances,
 }: PerformancePanelProps) => {
+  const colors = useThemeColors();
   const [selectedId, setSelectedId] = useState<string | null>(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);
@@ -79,12 +105,24 @@ export const PerformancePanel = ({
           >
             <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>
@@ -94,10 +132,27 @@ export const PerformancePanel = ({
 
   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>
 
@@ -110,18 +165,35 @@ export const PerformancePanel = ({
 
           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>
@@ -132,7 +204,16 @@ export const PerformancePanel = ({
                   }
                 >
                   {isMetricFcp && primaryFcp && (
-                    <text className={"pp-fcpHighlight"}>{primaryFcp}</text>
+                    <text
+                      className={"pp-fcpHighlight"}
+                      style={{
+                        fontWeight: fontWeight.bold,
+                        color: colors.palette.blue600,
+                        backgroundColor: colors.palette.blue100,
+                      }}
+                    >
+                      {primaryFcp}
+                    </text>
                   )}
                 </view>
 
@@ -141,16 +222,28 @@ export const PerformancePanel = ({
                     {isMetricFcp && fcpMetrics && (
                       <view className={"pp-fcpSection"}>
                         {totalFcp !== undefined && (
-                          <view className={"pp-fcpMetric"}>
+                          <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>
@@ -158,30 +251,56 @@ export const PerformancePanel = ({
                         )}
 
                         {lynxFcp !== undefined && (
-                          <view className={"pp-fcpMetric"}>
+                          <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 !== undefined && (
-                          <view className={"pp-fcpMetric"}>
+                          <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>
@@ -190,9 +309,20 @@ export const PerformancePanel = ({
                     )}
 
                     {!!perf.rawEntry && (
-                      <view className={"pp-rawEntrySection"}>
-                        <text className={"pp-detailTitle"}>Raw Entry</text>
-                        <text className={"pp-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>

package/src/components/Tabs.css

@@ -6,12 +6,10 @@
 
 .tabs-header {
   display: flex;
-  box-shadow: inset 0 -1px 0 0 var(--lynx-console-color-stroke-neutral-subtle);
 }
 
 .tabs-triggerButton {
   flex: 1;
-  color: var(--lynx-console-color-fg-neutral-subtle);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -22,12 +20,6 @@
 .tabs-triggerButtonText {
   font-size: 1rem;
   line-height: 1.375rem;
-  font-weight: var(--lynx-console-font-weight-bold);
-  color: var(--lynx-console-color-fg-neutral-subtle);
-}
-
-.tabs-triggerButtonText--active {
-  color: var(--lynx-console-color-fg-neutral);
 }
 
 .tabs-triggerButtonText--t4 {
@@ -61,7 +53,6 @@
 }
 
 .tabs-triggerIndicatorLine {
-  background-color: var(--lynx-console-color-fg-neutral);
   width: 100%;
   height: 2px;
 }

package/src/components/Tabs.tsx

@@ -1,5 +1,7 @@
 import { type ReactNode, useRef, useState } from "@lynx-js/react";
 import type { ListSnapEvent, NodesRef } from "@lynx-js/types";
+import { useThemeColors } from "../styles/ThemeContext";
+import { fontWeight } from "../styles/theme";
 import "./Tabs.css";
 
 type TabsProps = {
@@ -12,6 +14,7 @@ type TabsProps = {
 };
 
 export default function Tabs(props: TabsProps) {
+  const colors = useThemeColors();
   const tabContentsRef = useRef<NodesRef>(null);
   const [activeIndex, setActiveIndex] = useState(0);
   const tabSize =
@@ -21,7 +24,12 @@ export default function Tabs(props: TabsProps) {
 
   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}
@@ -42,7 +50,14 @@ export default function Tabs(props: TabsProps) {
             }}
           >
             <text
-              className={`tabs-triggerButtonText${i === activeIndex ? " tabs-triggerButtonText--active" : ""}${tabSize ? ` tabs-triggerButtonText--${tabSize}` : ""}`}
+              className={`tabs-triggerButtonText${tabSize ? ` tabs-triggerButtonText--${tabSize}` : ""}`}
+              style={{
+                fontWeight: fontWeight.bold,
+                color:
+                  i === activeIndex
+                    ? colors.fg.neutral
+                    : colors.fg.neutralSubtle,
+              }}
             >
               {item.label}
             </text>
@@ -51,7 +66,10 @@ export default function Tabs(props: TabsProps) {
                 className={"tabs-triggerIndicator"}
                 style={{ transform: `translateX(${activeIndex * 100}%)` }}
               >
-                <view className={"tabs-triggerIndicatorLine"} />
+                <view
+                  className={"tabs-triggerIndicatorLine"}
+                  style={{ backgroundColor: colors.fg.neutral }}
+                />
               </view>
             )}
           </view>

package/src/index.tsx

@@ -1,5 +1,3 @@
-import "./styles/vars/index.css";
-import "./styles/global.css";
 import {
   type ForwardedRef,
   forwardRef,
@@ -12,6 +10,8 @@ import { ConsolePanel } from "./components/ConsolePanel.jsx";
 import "./components/FloatingButton.css";
 import { FloatingButton } from "./components/FloatingButton.jsx";
 import { usePerformance } from "./hooks/usePerformance";
+import { ThemeProvider } from "./styles/ThemeContext";
+import { getColors } from "./styles/theme";
 import type { CustomTab } from "./types";
 
 export interface LynxConsoleHandle {
@@ -45,6 +45,7 @@ const LynxConsole = forwardRef<LynxConsoleHandle, LynxConsoleProps>(
     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--) {
@@ -84,28 +85,33 @@ const LynxConsole = forwardRef<LynxConsoleHandle, LynxConsoleProps>(
       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>
+      <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>
     );
   },
 );

package/src/styles/ThemeContext.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "@lynx-js/react";
+import { type ThemeColors, getColors } from "./theme";
+
+const ThemeContext = createContext<ThemeColors>(getColors("light"));
+
+export const ThemeProvider = ThemeContext.Provider;
+
+export function useThemeColors(): ThemeColors {
+  return useContext(ThemeContext);
+}

package/src/styles/theme.ts

@@ -0,0 +1,111 @@
+export type Theme = "light" | "dark";
+
+const lightColors = {
+  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",
+  },
+} as const;
+
+const darkColors = {
+  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",
+  },
+} as const;
+
+const colorMap = {
+  light: lightColors,
+  dark: darkColors,
+} as const;
+
+export const fontWeight = {
+  regular: "400",
+  medium: "500",
+  bold: "700",
+} as const;
+
+export const duration = {
+  d4: "200ms",
+  d6: "300ms",
+} as const;
+
+export const dimension = {
+  x2: "8px",
+  x3: "12px",
+  x4: "16px",
+  x6: "24px",
+  spacingX: {
+    globalGutter: "16px",
+  },
+} as const;
+
+export const radius = {
+  r6: "24px",
+} as const;
+
+export function getColors(theme: Theme) {
+  return colorMap[theme];
+}
+
+export type ThemeColors = ReturnType<typeof getColors>;

package/src/styles/global.css

@@ -1,8 +0,0 @@
-page {
-  background-color: var(--lynx-console-color-bg-layer-default);
-  font-size: 16px;
-}
-
-text {
-  color: var(--lynx-console-color-fg-neutral);
-}

package/src/styles/vars/color.ts

@@ -1,41 +0,0 @@
-// Color Palette
-export const palette = {
-  blue100: "var(--lynx-console-color-palette-blue-100)",
-  blue600: "var(--lynx-console-color-palette-blue-600)",
-  gray100: "var(--lynx-console-color-palette-gray-100)",
-  gray400: "var(--lynx-console-color-palette-gray-400)",
-  green100: "var(--lynx-console-color-palette-green-100)",
-  green600: "var(--lynx-console-color-palette-green-600)",
-  purple100: "var(--lynx-console-color-palette-purple-100)",
-  purple600: "var(--lynx-console-color-palette-purple-600)",
-  red100: "var(--lynx-console-color-palette-red-100)",
-  red600: "var(--lynx-console-color-palette-red-600)",
-  red900: "var(--lynx-console-color-palette-red-900)",
-  staticWhite: "var(--lynx-console-color-palette-static-white)",
-  yellow100: "var(--lynx-console-color-palette-yellow-100)",
-  yellow600: "var(--lynx-console-color-palette-yellow-600)",
-  yellow900: "var(--lynx-console-color-palette-yellow-900)",
-};
-
-// Foreground Colors
-export const fg = {
-  neutral: "var(--lynx-console-color-fg-neutral)",
-  placeholder: "var(--lynx-console-color-fg-placeholder)",
-  disabled: "var(--lynx-console-color-fg-disabled)",
-  neutralMuted: "var(--lynx-console-color-fg-neutral-muted)",
-  neutralSubtle: "var(--lynx-console-color-fg-neutral-subtle)",
-};
-
-// Background Colors
-export const bg = {
-  overlay: "var(--lynx-console-color-bg-overlay)",
-  layerDefault: "var(--lynx-console-color-bg-layer-default)",
-  layerFloating: "var(--lynx-console-color-bg-layer-floating)",
-  neutralWeak: "var(--lynx-console-color-bg-neutral-weak)",
-};
-
-// Stroke Colors
-export const stroke = {
-  neutralSubtle: "var(--lynx-console-color-stroke-neutral-subtle)",
-  neutralWeak: "var(--lynx-console-color-stroke-neutral-weak)",
-};

package/src/styles/vars/dimension.ts

@@ -1,10 +0,0 @@
-// Dimensions
-export const x2 = "var(--lynx-console-dimension-x2)";
-export const x3 = "var(--lynx-console-dimension-x3)";
-export const x4 = "var(--lynx-console-dimension-x4)";
-export const x6 = "var(--lynx-console-dimension-x6)";
-
-// Spacing
-export const spacingX = {
-  globalGutter: "var(--lynx-console-dimension-spacing-x-global-gutter)",
-};