lynx-console 0.2.0 → 0.2.2

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>
     </>