lynx-console 0.2.1 → 0.2.3

package/src/components/BottomSheet.css

@@ -17,8 +17,6 @@
   bottom: 0;
   left: 0;
   z-index: 9998;
-  background: var(--lynx-console-color-bg-overlay);
-  transition: opacity var(--lynx-console-duration-d6) cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .bs-content {
@@ -28,10 +26,8 @@
   flex-direction: column;
   box-sizing: border-box;
   word-break: break-all;
-  background: var(--lynx-console-color-bg-layer-floating);
   border-top-left-radius: 24px;
   border-top-right-radius: 24px;
-  transition: transform var(--lynx-console-duration-d6) cubic-bezier(0.4, 0, 0.2, 1);
   height: 500px;
   overflow: hidden;
 }
@@ -50,7 +46,6 @@
 .bs-handle {
   width: 36px;
   height: 4px;
-  background-color: var(--lynx-console-color-palette-gray-400);
   border-radius: 9999px;
   margin-top: 12px;
 }
@@ -69,8 +64,6 @@
 .bs-title {
   font-size: 1.25rem;
   line-height: 1.6875rem;
-  font-weight: var(--lynx-console-font-weight-bold);
-  color: var(--lynx-console-color-fg-neutral);
 }
 
 .bs-body {

package/src/components/BottomSheet.tsx

@@ -1,5 +1,7 @@
 import { type ReactNode, useEffect, useState } from "@lynx-js/react";
 import type { BaseTouchEvent, Target } from "@lynx-js/types";
+import { useThemeColors } from "../styles/ThemeContext";
+import { duration, fontWeight } from "../styles/theme";
 import "./BottomSheet.css";
 
 interface BottomSheetProps {
@@ -29,6 +31,7 @@ export default function BottomSheet({
   shouldClose = false,
   safeAreaInsetBottom = "25px",
 }: BottomSheetProps) {
+  const colors = useThemeColors();
   const [sheetHeight, setSheetHeight] = useState(savedHeight ?? DEFAULT_HEIGHT);
   const [tempHeight, setTempHeight] = useState(savedHeight ?? DEFAULT_HEIGHT);
   const [isDragging, setIsDragging] = useState(false);
@@ -100,7 +103,9 @@ export default function BottomSheet({
     <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}>
@@ -108,10 +113,13 @@ export default function BottomSheet({
           className="bs-content"
           catchtap={() => {}}
           style={{
+            background: colors.bg.layerFloating,
             height: `${isDragging ? tempHeight : sheetHeight}px`,
             transform:
               isOpening || isClosing ? "translateY(100%)" : "translateY(0)",
-            transition: isDragging ? "none" : undefined,
+            transition: isDragging
+              ? "none"
+              : `transform ${duration.d6} cubic-bezier(0.4, 0, 0.2, 1)`,
           }}
         >
           {/* catchtap: 이벤트 버블링 차단 */}
@@ -121,10 +129,23 @@ export default function BottomSheet({
             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"

package/src/components/ConsolePanel.css

@@ -14,8 +14,6 @@
 .cp-placeholderText {
   font-size: 0.875rem;
   line-height: 1.1875rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-disabled);
 }
 
 .cp-logContainer {
@@ -42,15 +40,12 @@
   flex-direction: row;
   align-items: center;
   padding: 3px 6px;
-  background-color: var(--lynx-console-color-bg-neutral-weak);
   border-radius: 4px;
 }
 
 .cp-filterButtonText {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-medium);
-  color: var(--lynx-console-color-fg-neutral-muted);
 }
 
 .cp-filterDropdown {
@@ -58,9 +53,7 @@
   top: 100%;
   left: 0;
   margin-top: 4px;
-  background-color: var(--lynx-console-color-bg-layer-floating);
   border-width: 1px;
-  border-color: var(--lynx-console-color-stroke-neutral-subtle);
   border-style: solid;
   border-radius: 8px;
   padding: 4px 0;
@@ -79,46 +72,12 @@
 .cp-filterCheckbox {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-medium);
   width: 16px;
 }
 
-.cp-filterCheckbox--log {
-  color: var(--lynx-console-color-palette-green-600);
-}
-
-.cp-filterCheckbox--info {
-  color: var(--lynx-console-color-palette-blue-600);
-}
-
-.cp-filterCheckbox--warn {
-  color: var(--lynx-console-color-palette-yellow-600);
-}
-
-.cp-filterCheckbox--error {
-  color: var(--lynx-console-color-palette-red-600);
-}
-
 .cp-filterLabel {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-medium);
-}
-
-.cp-filterLabel--log {
-  color: var(--lynx-console-color-palette-green-600);
-}
-
-.cp-filterLabel--info {
-  color: var(--lynx-console-color-palette-blue-600);
-}
-
-.cp-filterLabel--warn {
-  color: var(--lynx-console-color-palette-yellow-600);
-}
-
-.cp-filterLabel--error {
-  color: var(--lynx-console-color-palette-red-600);
 }
 
 .cp-searchWrapper {
@@ -129,7 +88,6 @@
   margin-left: 8px;
   margin-right: 8px;
   border-bottom-width: 1px;
-  border-bottom-color: var(--lynx-console-color-stroke-neutral-subtle);
   border-bottom-style: solid;
   gap: 8px;
 }
@@ -137,17 +95,12 @@
 .cp-searchPrompt {
   font-size: 1.125rem;
   line-height: 1.5rem;
-  font-weight: var(--lynx-console-font-weight-medium);
-  color: var(--lynx-console-color-fg-placeholder);
 }
 
 .cp-searchInput {
   flex: 1;
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral);
-  caret-color: var(--lynx-console-color-palette-green-600);
 }
 
 .cp-searchClear {
@@ -157,21 +110,16 @@
 .cp-searchClearText {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-medium);
-  color: var(--lynx-console-color-fg-placeholder);
 }
 
 .cp-clearButton {
   padding: 3px 6px;
-  background-color: var(--lynx-console-color-bg-neutral-weak);
   border-radius: 4px;
 }
 
 .cp-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);
 }
 
 .cp-logList {
@@ -183,18 +131,9 @@
 .cp-logItem {
   padding: 8px;
   border-bottom-width: 1px;
-  border-bottom-color: var(--lynx-console-color-stroke-neutral-weak);
   border-bottom-style: solid;
 }
 
-.cp-logItem--warn {
-  background-color: var(--lynx-console-color-palette-yellow-100);
-}
-
-.cp-logItem--error {
-  background-color: var(--lynx-console-color-palette-red-100);
-}
-
 .cp-logItemHeader {
   display: flex;
   flex-direction: row;
@@ -205,38 +144,17 @@
 .cp-logLevel {
   font-size: 0.75rem;
   line-height: 1rem;
-  font-weight: var(--lynx-console-font-weight-bold);
   margin-right: 8px;
 }
 
-.cp-logLevel--log {
-  color: var(--lynx-console-color-palette-green-600);
-}
-
-.cp-logLevel--info {
-  color: var(--lynx-console-color-palette-blue-600);
-}
-
-.cp-logLevel--warn {
-  color: var(--lynx-console-color-palette-yellow-600);
-}
-
-.cp-logLevel--error {
-  color: var(--lynx-console-color-palette-red-600);
-}
-
 .cp-logTime {
   font-size: 0.75rem;
   line-height: 1rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral-subtle);
 }
 
 .cp-toggleIndicator {
   font-size: 0.75rem;
   line-height: 1rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral-subtle);
   margin-left: 4px;
   align-self: flex-start;
 }
@@ -244,8 +162,6 @@
 .cp-logMessage {
   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;
 }
 
@@ -259,59 +175,16 @@
 .cp-logArgItem {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-}
-
-.cp-argNull {
-  color: var(--lynx-console-color-fg-neutral-subtle);
-}
-
-.cp-argUndefined {
-  color: var(--lynx-console-color-fg-neutral-subtle);
 }
 
 .cp-argString {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-}
-
-.cp-argString--log {
-  color: var(--lynx-console-color-fg-neutral);
-}
-
-.cp-argString--info {
-  color: var(--lynx-console-color-fg-neutral);
-}
-
-.cp-argString--warn {
-  color: var(--lynx-console-color-palette-yellow-900);
-}
-
-.cp-argString--error {
-  color: var(--lynx-console-color-palette-red-900);
 }
 
 .cp-argPrimitive {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-}
-
-.cp-argPrimitive--log {
-  color: var(--lynx-console-color-palette-blue-600);
-}
-
-.cp-argPrimitive--info {
-  color: var(--lynx-console-color-palette-blue-600);
-}
-
-.cp-argPrimitive--warn {
-  color: var(--lynx-console-color-palette-yellow-900);
-}
-
-.cp-argPrimitive--error {
-  color: var(--lynx-console-color-palette-red-900);
 }
 
 .cp-argObject {
@@ -329,8 +202,6 @@
 .cp-argObjectPreview {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-medium);
-  color: var(--lynx-console-color-fg-neutral);
 }
 
 .cp-argObjectContent {
@@ -349,15 +220,11 @@
 .cp-argObjectKey {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-medium);
-  color: var(--lynx-console-color-palette-purple-600);
 }
 
 .cp-argObjectJson {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral);
 }
 
 .cp-replInputRow {
@@ -372,8 +239,6 @@
 .cp-replPrompt {
   font-size: 1.625rem;
   line-height: 2.1875rem;
-  font-weight: var(--lynx-console-font-weight-medium);
-  color: var(--lynx-console-color-fg-placeholder);
   padding-bottom: 8px;
 }
 
@@ -381,15 +246,11 @@
   flex: 1;
   font-size: 1rem;
   line-height: 1.375rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-fg-neutral);
-  caret-color: var(--lynx-console-color-palette-green-600);
   padding-bottom: 8px;
 }
 
 .cp-replRunButton {
   padding: 4px 10px;
-  background-color: var(--lynx-console-color-palette-green-100);
   border-radius: 4px;
   margin-bottom: 8px;
 }
@@ -397,6 +258,4 @@
 .cp-replRunButtonText {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-medium);
-  color: var(--lynx-console-color-palette-green-600);
 }

package/src/components/FloatingButton.css

@@ -6,7 +6,6 @@
   align-items: center;
   gap: 8px;
   overflow: visible;
-  transition: transform var(--lynx-console-duration-d4) cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .fb-button {
@@ -17,7 +16,6 @@
   padding-top: 4px;
   padding-bottom: 4px;
   border-radius: 12px;
-  background-color: var(--lynx-console-color-palette-green-600);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -39,16 +37,12 @@
 .fb-title {
   font-size: 0.875rem;
   line-height: 1.1875rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-palette-static-white);
   text-align: center;
 }
 
 .fb-subtitle {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--lynx-console-font-weight-regular);
-  color: var(--lynx-console-color-palette-static-white);
   text-align: center;
 }
 
@@ -57,7 +51,6 @@
   width: 32px;
   height: 32px;
   border-radius: 16px;
-  background-color: var(--lynx-console-color-palette-green-600);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -68,6 +61,5 @@
   font-size: 20px;
   line-height: 32px;
   margin-bottom: 5px;
-  color: var(--lynx-console-color-palette-static-white);
   text-align: center;
 }

package/src/components/FloatingButton.tsx

@@ -1,5 +1,7 @@
 import type { ReactNode } from "@lynx-js/react";
 import { useLongPressDrag } from "../hooks/useLongPressDrag";
+import { useThemeColors } from "../styles/ThemeContext";
+import { duration } from "../styles/theme";
 import "./FloatingButton.css";
 
 interface FloatingButtonProps {
@@ -28,6 +30,7 @@ export const FloatingButton = ({
   bindtap,
   children,
 }: FloatingButtonProps) => {
+  const colors = useThemeColors();
   const { phase, right, bottom, clearTimer, handlers } =
     useLongPressDrag(bindtap);
 
@@ -53,19 +56,29 @@ export const FloatingButton = ({
           right: `${right}px`,
           bottom: `${bottom}px`,
           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"}
+          style={{ backgroundColor: colors.palette.green600 }}
           catchtouchstart={() => clearTimer()}
           bindtap={handleReload}
         >
-          <text className={"fb-reloadIcon"}>{"\u21BB"}</text>
+          <text
+            className={"fb-reloadIcon"}
+            style={{ color: colors.palette.staticWhite }}
+          >
+            {"\u21BB"}
+          </text>
         </view>
       </view>
     </>