lynx-console 0.1.0 → 0.2.0

package/src/components/FloatingButton.css.ts

@@ -1,73 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { typography } from "../styles/typography";
-import { vars } from "../styles/vars";
-
-export const wrapper = style({
-  position: "fixed",
-  zIndex: 9999,
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  gap: "8px",
-  overflow: "visible",
-  transition: `transform ${vars.$duration.d4} cubic-bezier(0.4, 0, 0.2, 1)`,
-});
-
-export const button = style({
-  position: "relative",
-  overflow: "hidden",
-  paddingLeft: "8px",
-  paddingRight: "8px",
-  paddingTop: "4px",
-  paddingBottom: "4px",
-  borderRadius: "12px",
-  backgroundColor: vars.$color.palette.green600,
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: "2px",
-  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-});
-
-export const shineOverlay = style({
-  position: "absolute",
-  top: "-50%",
-  left: "-25%",
-  width: "150%",
-  height: "200%",
-  backgroundColor: "rgba(255, 255, 255, 0.2)",
-  borderRadius: "9999px",
-});
-
-export const title = style({
-  ...typography("t4", "regular"),
-  color: vars.$color.palette.staticWhite,
-  textAlign: "center",
-});
-
-export const subtitle = style({
-  ...typography("t3", "regular"),
-  color: vars.$color.palette.staticWhite,
-  textAlign: "center",
-});
-
-export const reloadButton = style({
-  overflow: "visible",
-  width: "32px",
-  height: "32px",
-  borderRadius: "16px",
-  backgroundColor: vars.$color.palette.green600,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-});
-
-export const reloadIcon = style({
-  fontSize: "20px",
-  lineHeight: "32px",
-  marginBottom: "5px",
-  color: vars.$color.palette.staticWhite,
-  textAlign: "center",
-});

package/src/components/NetworkPanel.css.ts

@@ -1,280 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-import { typography } from "../styles/typography";
-import { vars } from "../styles/vars";
-
-export const container = style({
-  display: "flex",
-  flexDirection: "column",
-  flex: 1,
-  paddingTop: 4,
-});
-
-export const header = style({
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  justifyContent: "space-between",
-  marginBottom: 8,
-  paddingBottom: 4,
-  borderBottomWidth: 1,
-  borderBottomColor: vars.$color.stroke.neutralSubtle,
-  borderBottomStyle: "solid",
-});
-
-export const count = style({
-  ...typography("t3", "regular"),
-  color: vars.$color.fg.neutralSubtle,
-});
-
-export const clearButton = style({
-  padding: "6px 12px",
-  backgroundColor: vars.$color.bg.neutralWeak,
-  borderRadius: 4,
-});
-
-export const clearButtonText = style({
-  ...typography("t3", "medium"),
-  color: vars.$color.fg.neutral,
-});
-
-export const list = style({
-  flex: 1,
-});
-
-export const placeholder = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  height: "100%",
-});
-
-export const placeholderText = style({
-  ...typography("t4", "regular"),
-  color: vars.$color.fg.disabled,
-});
-
-export const item = recipe({
-  base: {
-    padding: "8px",
-    borderBottomWidth: 1,
-    borderBottomColor: vars.$color.stroke.neutralWeak,
-    borderBottomStyle: "solid",
-  },
-  variants: {
-    status: {
-      pending: {
-        backgroundColor: vars.$color.palette.gray100,
-      },
-      success: {},
-      error: {
-        backgroundColor: vars.$color.palette.red100,
-      },
-    },
-  },
-});
-
-export const itemHeader = style({
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  marginBottom: 4,
-  gap: 8,
-});
-
-export const method = recipe({
-  base: {
-    ...typography("t2", "bold"),
-    padding: "0 4px",
-    borderRadius: 2,
-    color: vars.$color.fg.neutral,
-    backgroundColor: vars.$color.bg.neutralWeak,
-  },
-  variants: {
-    type: {
-      GET: {
-        color: vars.$color.palette.blue600,
-        backgroundColor: vars.$color.palette.blue100,
-      },
-      POST: {
-        color: vars.$color.palette.green600,
-        backgroundColor: vars.$color.palette.green100,
-      },
-      PUT: {
-        color: vars.$color.palette.yellow600,
-        backgroundColor: vars.$color.palette.yellow100,
-      },
-      PATCH: {
-        color: vars.$color.palette.purple600,
-        backgroundColor: vars.$color.palette.purple100,
-      },
-      DELETE: {
-        color: vars.$color.palette.red600,
-        backgroundColor: vars.$color.palette.red100,
-      },
-    },
-  },
-});
-
-export const statusCode = recipe({
-  base: {
-    ...typography("t2", "bold"),
-  },
-  variants: {
-    type: {
-      success: {
-        color: vars.$color.palette.green600,
-      },
-      error: {
-        color: vars.$color.palette.red600,
-      },
-      pending: {
-        color: vars.$color.fg.neutralSubtle,
-      },
-    },
-  },
-});
-
-export const time = style({
-  ...typography("t2", "regular"),
-  color: vars.$color.fg.neutralSubtle,
-});
-
-export const url = style({
-  ...typography("t3", "regular"),
-  color: vars.$color.fg.neutral,
-  wordBreak: "break-all",
-  marginBottom: 4,
-});
-
-export const path = style({
-  ...typography("t3", "regular"),
-  color: vars.$color.fg.neutral,
-  wordBreak: "break-all",
-  whiteSpace: "pre-wrap",
-  overflow: "visible",
-  marginBottom: 4,
-});
-
-export const details = style({
-  ...typography("t3", "regular"),
-  color: vars.$color.fg.neutralSubtle,
-});
-
-export const detailsContainer = style({
-  marginTop: 12,
-  paddingTop: 12,
-  borderTopWidth: 1,
-  borderTopColor: vars.$color.stroke.neutralSubtle,
-  borderTopStyle: "solid",
-});
-
-export const tabs = style({
-  display: "flex",
-  flexDirection: "row",
-  gap: 4,
-  paddingBottom: 6,
-});
-
-export const tab = recipe({
-  base: {
-    padding: "4px 8px",
-    borderRadius: 4,
-    cursor: "pointer",
-  },
-  variants: {
-    active: {
-      true: {
-        backgroundColor: vars.$color.bg.neutralWeak,
-      },
-      false: {
-        backgroundColor: "transparent",
-      },
-    },
-  },
-});
-
-export const tabText = recipe({
-  base: {
-    ...typography("t4", "medium"),
-  },
-  variants: {
-    active: {
-      true: {
-        color: vars.$color.fg.neutral,
-      },
-      false: {
-        color: vars.$color.fg.neutralSubtle,
-      },
-    },
-  },
-});
-
-export const tabContent = style({
-  paddingTop: 8,
-});
-
-export const detailSection = style({
-  marginBottom: 12,
-});
-
-export const detailSectionTitle = style({
-  ...typography("t3", "bold"),
-  color: vars.$color.fg.neutral,
-  marginBottom: 8,
-});
-
-export const table = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: 4,
-});
-
-export const tableRow = style({
-  display: "flex",
-  flexDirection: "row",
-  gap: 8,
-  padding: "4px 8px",
-  backgroundColor: vars.$color.bg.neutralWeak,
-  borderRadius: 2,
-});
-
-export const tableKey = style({
-  ...typography("t3", "bold"),
-  color: vars.$color.fg.neutralSubtle,
-  minWidth: 70,
-  flexShrink: 0,
-});
-
-export const tableValue = style({
-  ...typography("t3", "regular"),
-  color: vars.$color.fg.neutral,
-  wordBreak: "break-all",
-  flex: 1,
-});
-
-export const bodyText = style({
-  ...typography("t3", "regular"),
-  color: vars.$color.fg.neutral,
-  padding: 8,
-  backgroundColor: vars.$color.bg.neutralWeak,
-  borderRadius: 4,
-  wordBreak: "break-all",
-  whiteSpace: "pre-wrap",
-});
-
-export const errorText = style({
-  ...typography("t3", "regular"),
-  color: vars.$color.palette.red600,
-  padding: 8,
-  backgroundColor: vars.$color.palette.red100,
-  borderRadius: 4,
-  wordBreak: "break-all",
-});
-
-export const emptyText = style({
-  ...typography("t3", "regular"),
-  color: vars.$color.fg.disabled,
-  textAlign: "center",
-  padding: "16px 0",
-});

package/src/components/PerformancePanel.css.ts

@@ -1,224 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-import { typography } from "../styles/typography";
-import { vars } from "../styles/vars";
-
-export const container = style({
-  display: "flex",
-  flexDirection: "column",
-  flex: 1,
-  paddingTop: 4,
-});
-
-export const header = style({
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  justifyContent: "space-between",
-  marginBottom: 8,
-  paddingBottom: 4,
-  borderBottomWidth: 1,
-  borderBottomColor: vars.$color.stroke.neutralSubtle,
-  borderBottomStyle: "solid",
-});
-
-export const count = style({
-  ...typography("t3", "regular"),
-  color: vars.$color.fg.neutralSubtle,
-});
-
-export const clearButton = style({
-  padding: "6px 12px",
-  backgroundColor: vars.$color.bg.neutralWeak,
-  borderRadius: 4,
-});
-
-export const clearButtonText = style({
-  ...typography("t3", "medium"),
-  color: vars.$color.fg.neutral,
-});
-
-export const list = style({
-  flex: 1,
-});
-
-export const placeholder = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  height: "100%",
-});
-
-export const placeholderText = style({
-  ...typography("t4", "regular"),
-  color: vars.$color.fg.disabled,
-});
-
-export const item = style({
-  padding: "8px",
-  borderBottomWidth: 1,
-  borderBottomColor: vars.$color.stroke.neutralWeak,
-  borderBottomStyle: "solid",
-});
-
-export const itemHeader = style({
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  marginBottom: 4,
-  gap: 8,
-});
-
-export const entryType = recipe({
-  base: {
-    ...typography("t2", "bold"),
-    padding: "0 6px",
-    borderRadius: 2,
-    color: vars.$color.fg.neutral,
-    backgroundColor: vars.$color.bg.neutralWeak,
-  },
-  variants: {
-    type: {
-      init: {
-        color: vars.$color.palette.blue600,
-        backgroundColor: vars.$color.palette.blue100,
-      },
-      metric: {
-        color: vars.$color.palette.green600,
-        backgroundColor: vars.$color.palette.green100,
-      },
-      pipeline: {
-        color: vars.$color.palette.purple600,
-        backgroundColor: vars.$color.palette.purple100,
-      },
-      resource: {
-        color: vars.$color.palette.yellow600,
-        backgroundColor: vars.$color.palette.yellow100,
-      },
-    },
-  },
-});
-
-export const entryName = style({
-  ...typography("t2", "medium"),
-  color: vars.$color.fg.neutral,
-});
-
-export const timestamp = style({
-  ...typography("t2", "regular"),
-  color: vars.$color.fg.neutralSubtle,
-});
-
-export const fcpMetricHeader = style({
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  gap: 8,
-});
-
-export const fcpHighlight = style({
-  ...typography("t3", "bold"),
-  color: vars.$color.palette.blue600,
-  backgroundColor: vars.$color.palette.blue100,
-  padding: "4px 8px",
-  borderRadius: 4,
-  marginTop: 4,
-});
-
-export const metrics = style({
-  marginTop: 8,
-  display: "flex",
-  flexDirection: "column",
-  gap: 4,
-});
-
-export const metric = style({
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  gap: 8,
-  padding: "4px 8px",
-  backgroundColor: vars.$color.bg.neutralWeak,
-  borderRadius: 2,
-});
-
-export const metricName = style({
-  ...typography("t3", "medium"),
-  color: vars.$color.fg.neutralSubtle,
-  minWidth: 100,
-  flexShrink: 0,
-});
-
-export const metricValue = style({
-  ...typography("t3", "bold"),
-  color: vars.$color.palette.green600,
-  flex: 1,
-});
-
-export const detailsContainer = style({
-  marginTop: 12,
-  display: "flex",
-  flexDirection: "column",
-  gap: 12,
-});
-
-export const fcpSection = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: 8,
-});
-
-export const fcpSectionDescription = style({
-  ...typography("t3", "regular"),
-  color: vars.$color.fg.neutralSubtle,
-  marginBottom: 4,
-});
-
-export const fcpMetric = style({
-  backgroundColor: vars.$color.bg.layerDefault,
-  borderRadius: 4,
-  display: "flex",
-  flexDirection: "column",
-  gap: 4,
-});
-
-export const fcpMetricName = style({
-  ...typography("t2", "bold"),
-  color: vars.$color.fg.neutral,
-});
-
-export const fcpMetricValue = style({
-  ...typography("t1", "bold"),
-  color: vars.$color.palette.blue600,
-});
-
-export const fcpMetricDescription = style({
-  ...typography("t3", "regular"),
-  color: vars.$color.fg.neutralSubtle,
-});
-
-export const fcpMetricFormula = style({
-  ...typography("t4", "regular"),
-  color: vars.$color.fg.disabled,
-  fontFamily: "monospace",
-});
-
-export const rawEntrySection = style({
-  padding: 12,
-  backgroundColor: vars.$color.bg.neutralWeak,
-  borderRadius: 4,
-});
-
-export const detailTitle = style({
-  ...typography("t3", "bold"),
-  color: vars.$color.fg.neutral,
-  marginBottom: 8,
-});
-
-export const rawEntry = style({
-  ...typography("t3", "regular"),
-  color: vars.$color.fg.neutralSubtle,
-  fontFamily: "monospace",
-  whiteSpace: "pre-wrap",
-  wordBreak: "break-all",
-});

package/src/components/Tabs.css.ts

@@ -1,66 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-import { typography } from "../styles/typography";
-import { vars } from "../styles/vars";
-
-export const tabs = style({
-  flex: 1,
-  display: "flex",
-  flexDirection: "column",
-});
-
-export const tabHeader = style({
-  display: "flex",
-  boxShadow: `inset 0 -1px 0 0 ${vars.$color.stroke.neutralSubtle}`,
-});
-
-export const tabTriggerButton = style({
-  flex: 1,
-  color: vars.$color.fg.neutralSubtle,
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  padding: "12px 0 10px 0",
-  position: "relative",
-});
-
-export const tabTriggerButtonText = recipe({
-  base: {
-    ...typography("t5", "bold"),
-    color: vars.$color.fg.neutralSubtle,
-  },
-  variants: {
-    active: {
-      true: {
-        color: vars.$color.fg.neutral,
-      },
-    },
-  },
-});
-
-export const tabTriggerIndicator = style({
-  position: "absolute",
-  bottom: 0,
-  left: 0,
-  padding: "0 16px",
-  width: "100%",
-  transition: "200ms",
-  transitionTimingFunction: "cubic-bezier(.35, 0, .35, 1)",
-});
-
-export const tabTriggerIndicatorLine = style({
-  backgroundColor: vars.$color.fg.neutral,
-  width: "100%",
-  height: "2px",
-});
-
-export const tabContents = style({
-  flex: 1,
-  width: "100%",
-});
-
-export const tabContent = style({
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-});

package/src/styles/global.css.ts

@@ -1,10 +0,0 @@
-import { globalStyle } from "@vanilla-extract/css";
-import { vars } from "./vars";
-
-globalStyle("page", {
-  backgroundColor: vars.$color.bg.layerDefault,
-  fontSize: "16px",
-});
-globalStyle("text", {
-  color: vars.$color.fg.neutral,
-});

package/src/styles/typography.ts

@@ -1,25 +0,0 @@
-import { type DimensionTokenId, getDimensionValue } from "./getDimensionValue";
-import { vars } from "./vars";
-
-type TypographyTokenId =
-  Extract<
-    DimensionTokenId,
-    `$font-size.${string}`
-  > extends `$font-size.${infer U}`
-    ? U
-    : never;
-
-export function typography(
-  tokenId: TypographyTokenId,
-  weight: "regular" | "medium" | "bold",
-) {
-  const fontSize = getDimensionValue(`$font-size.${tokenId}`);
-  const lineHeight = getDimensionValue(`$line-height.${tokenId}`);
-  const fontWeight = vars.$fontWeight[weight];
-
-  return {
-    fontSize,
-    lineHeight,
-    fontWeight,
-  };
-}