lynx-console 0.0.0

package/src/setup/setupNetworkMonitor.ts

@@ -0,0 +1,247 @@
+import { stringify } from "javascript-stringify";
+import { ensureConsoleStructure } from "../shared/ensureConsoleStructure";
+import type { NetworkEntry } from "../types";
+
+const generateNetworkId = (): string => {
+  return `network-${Date.now()}-${Math.random()}`;
+};
+
+const extractUrl = (input: RequestInfo | URL): string => {
+  if (typeof input === "string") return input;
+  if (input instanceof URL) return input.href;
+  return (input as Request).url;
+};
+
+const extractMethod = (
+  input: RequestInfo | URL,
+  init?: RequestInit,
+): string | undefined => {
+  if (init?.method) return init.method;
+  if (typeof input === "object" && "method" in input) {
+    return (input as Request).method;
+  }
+  return "GET";
+};
+
+const extractHeaders = (
+  headers: HeadersInit | undefined,
+): Record<string, string> => {
+  const result: Record<string, string> = {};
+  if (!headers) return result;
+
+  try {
+    if (headers instanceof Headers) {
+      headers.forEach((value, key) => {
+        result[key] = value;
+      });
+    } else if (Array.isArray(headers)) {
+      headers.forEach(([key, value]) => {
+        result[key] = value;
+      });
+    } else {
+      Object.entries(headers).forEach(([key, value]) => {
+        result[key] = value;
+      });
+    }
+  } catch (error) {
+    console.error("[LynxConsole] Failed to extract headers:", error);
+  }
+
+  return result;
+};
+
+const mergeRequestHeaders = (
+  input: RequestInfo | URL,
+  init?: RequestInit,
+): Record<string, string> => {
+  const merged: Record<string, string> = {};
+
+  // Request 객체나 URL 객체에서 헤더 추출
+  if (typeof input === "object" && "headers" in input) {
+    Object.assign(merged, extractHeaders(input.headers as HeadersInit));
+  }
+
+  // RequestInit에서 헤더 추출 (나중 값이 우선)
+  if (init?.headers) {
+    Object.assign(merged, extractHeaders(init.headers));
+  }
+
+  return merged;
+};
+
+const addNetworkEntry = (entry: NetworkEntry): void => {
+  const state = globalThis.__LYNX_CONSOLE__?.state;
+  if (!state?.networks || !state?.networksMap || !state?.networkListeners) {
+    console.error(
+      "[LynxConsole] Cannot add network entry: Network monitor not initialized. Call initNetworkMonitor() first.",
+    );
+    return;
+  }
+
+  state.networks.push(entry);
+  state.networksMap.set(entry.id, entry);
+
+  state.networkListeners.forEach((listener) => {
+    listener(entry);
+  });
+};
+
+const updateNetworkEntry = (
+  id: string,
+  updates: Partial<NetworkEntry>,
+): void => {
+  const state = globalThis.__LYNX_CONSOLE__?.state;
+  if (!state?.networks || !state?.networksMap || !state?.networkListeners) {
+    console.error(
+      "[LynxConsole] Cannot update network entry: Network monitor not initialized. Call initNetworkMonitor() first.",
+    );
+    return;
+  }
+
+  const existingEntry = state.networksMap.get(id);
+  if (!existingEntry) {
+    console.error(
+      `[LynxConsole] Cannot update network entry: Entry with id '${id}' not found.`,
+    );
+    return;
+  }
+
+  const updatedEntry = { ...existingEntry, ...updates };
+
+  const index = state.networks.findIndex((entry) => entry.id === id);
+  if (index !== -1) {
+    state.networks[index] = updatedEntry;
+  }
+
+  state.networksMap.set(id, updatedEntry);
+
+  state.networkListeners.forEach((listener) => {
+    listener(updatedEntry);
+  });
+};
+
+export const initNetworkMonitor = () => {
+  if (!lynx.fetch) {
+    console.warn(
+      "[LynxConsole] lynx.fetch not available, skipping network monitor",
+    );
+    return;
+  }
+
+  const { state } = ensureConsoleStructure();
+
+  if (state.networks !== undefined) {
+    console.warn("[LynxConsole] Network monitor already initialized");
+    return;
+  }
+
+  type NetworkListener = (entry: NetworkEntry) => void;
+  state.networks = [];
+  state.networksMap = new Map();
+  state.networkListeners = new Set();
+  state.subscribeNetwork = (listener: NetworkListener) => {
+    state.networkListeners?.add(listener);
+    return () => {
+      state.networkListeners?.delete(listener);
+    };
+  };
+
+  const originalFetch = fetch.bind(lynx);
+
+  const monitoredFetch = async (
+    input: RequestInfo | URL,
+    init?: RequestInit,
+  ): Promise<Response> => {
+    const id = generateNetworkId();
+    const startTime = Date.now();
+    const url = extractUrl(input);
+    const method = extractMethod(input, init);
+
+    const requestHeaders = mergeRequestHeaders(input, init);
+
+    // Request body 처리
+    let requestBody: string | undefined;
+    if (init?.body) {
+      if (typeof init.body === "string") {
+        requestBody = init.body;
+      } else if (init.body instanceof URLSearchParams) {
+        requestBody = init.body.toString();
+      } else {
+        // Lynx가 지원하지 않는 타입이거나 알 수 없는 타입
+        requestBody = String(init.body);
+      }
+    }
+
+    addNetworkEntry({
+      id,
+      url,
+      method: method || "default",
+      status: "pending",
+      startTime,
+      requestHeaders,
+      requestBody: requestBody ?? "",
+    });
+
+    try {
+      const response = await originalFetch(input, init);
+      const endTime = Date.now();
+
+      const responseHeaders: Record<string, string> = {};
+      response.headers.forEach((value, key) => {
+        responseHeaders[key] = value;
+      });
+
+      const clonedResponse = response.clone();
+      let responseBody: string | undefined;
+
+      try {
+        const headerMap: Record<string, string> = {};
+        response.headers.forEach((value, key) => {
+          headerMap[key.toLowerCase()] = value;
+        });
+
+        const contentType = headerMap["content-type"];
+        if (contentType?.includes("application/json")) {
+          const json = await clonedResponse.json();
+          responseBody = stringify(json, null, 2, { references: true }) ?? "";
+        } else if (contentType?.includes("text")) {
+          responseBody = await clonedResponse.text();
+        }
+      } catch (error) {
+        responseBody = `[Unable to read response body] ${error}`;
+        console.error("[LynxConsole] Error reading response body:", error);
+      }
+
+      updateNetworkEntry(id, {
+        status: "success",
+        statusCode: response.status,
+        statusText: response.statusText,
+        endTime,
+        duration: endTime - startTime,
+        responseHeaders,
+        responseBody: responseBody ?? "",
+      });
+
+      return response;
+    } catch (error) {
+      const endTime = Date.now();
+      updateNetworkEntry(id, {
+        status: "error",
+        endTime,
+        duration: endTime - startTime,
+        error: error instanceof Error ? error.message : String(error),
+      });
+      throw error;
+    }
+  };
+
+  // biome-ignore lint/suspicious/noTsIgnore: to assign fetch to global functionfetch
+  // @ts-ignore
+  // biome-ignore lint/suspicious/noGlobalAssign: to assign fetch to global functionfetch fetch
+  fetch = monitoredFetch as typeof fetch;
+
+  //fetch 대신 lynx.fetch를 사용하는 경우에도 모니터링 되도록 설정
+  lynx.fetch = monitoredFetch as typeof lynx.fetch;
+
+  console.log("[LynxConsole] ✅ Network monitoring initialized");
+};

package/src/setup/setupPerformanceMonitor.ts

@@ -0,0 +1,70 @@
+import { ensureConsoleStructure } from "../shared/ensureConsoleStructure";
+import type { PerformanceEntryData, PerformanceEntryType } from "../types";
+
+type PerformanceListener = (entry: PerformanceEntryData) => void;
+
+const generatePerformanceId = (): string => {
+  return `performance-${Date.now()}-${Math.random()}`;
+};
+
+const addPerformanceEntry = (entry: PerformanceEntryData): void => {
+  const state = globalThis.__LYNX_CONSOLE__?.state;
+  if (!state?.performances || !state?.performanceListeners) {
+    console.error(
+      "[LynxConsole] Cannot add performance entry: Performance monitor not initialized. Call initPerformanceMonitor() first.",
+    );
+    return;
+  }
+
+  state.performances.push(entry);
+  state.performanceListeners.forEach((listener) => {
+    listener(entry);
+  });
+};
+
+export const initPerformanceMonitor = () => {
+  "background only";
+
+  if (!lynx.performance) {
+    console.warn(
+      "[LynxConsole] lynx.performance not available, skipping performance monitor",
+    );
+    return;
+  }
+
+  const { state } = ensureConsoleStructure();
+
+  if (state.performances !== undefined) {
+    console.warn("[LynxConsole] Performance monitor already initialized");
+    return;
+  }
+
+  state.performances = [];
+  state.performanceListeners = new Set();
+  state.subscribePerformance = (listener: PerformanceListener) => {
+    state.performanceListeners?.add(listener);
+    return () => {
+      state.performanceListeners?.delete(listener);
+    };
+  };
+
+  const observer = lynx.performance.createObserver((entry) => {
+    const performanceEntry: PerformanceEntryData = {
+      id: generatePerformanceId(),
+      entryType: entry.entryType as PerformanceEntryType,
+      name: entry.name,
+      timestamp: Date.now(),
+      rawEntry: entry,
+    };
+
+    addPerformanceEntry(performanceEntry);
+  });
+
+  observer.observe([
+    "pipeline", // LoadBundleEntry
+    "init", // InitLynxviewEntry
+    "metric", // MetricEntry
+  ]);
+
+  console.log("[LynxConsole] ✅ Performance monitoring initialized");
+};

package/src/shared/ensureConsoleStructure.ts

@@ -0,0 +1,20 @@
+type LynxConsole = NonNullable<typeof globalThis.__LYNX_CONSOLE__>;
+type ConsoleState = NonNullable<LynxConsole["state"]>;
+
+export const ensureConsoleStructure = (): {
+  lynxConsole: LynxConsole;
+  state: ConsoleState;
+} => {
+  if (!globalThis.__LYNX_CONSOLE__) {
+    globalThis.__LYNX_CONSOLE__ = {};
+  }
+
+  if (!globalThis.__LYNX_CONSOLE__.state) {
+    globalThis.__LYNX_CONSOLE__.state = {};
+  }
+
+  return {
+    lynxConsole: globalThis.__LYNX_CONSOLE__,
+    state: globalThis.__LYNX_CONSOLE__.state,
+  };
+};

package/src/styles/getDimensionValue.ts

@@ -0,0 +1,7 @@
+import { dimensions } from "./tokens.json";
+
+export type DimensionTokenId = keyof typeof dimensions;
+
+export function getDimensionValue(tokenId: DimensionTokenId) {
+  return dimensions[tokenId];
+}

package/src/styles/global.css.ts

@@ -0,0 +1,10 @@
+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/tokens.json

@@ -0,0 +1,80 @@
+{
+  "dimensions": {
+    "$dimension.x0_5": "2px",
+    "$dimension.x1": "4px",
+    "$dimension.x1_5": "6px",
+    "$dimension.x2": "8px",
+    "$dimension.x2_5": "10px",
+    "$dimension.x3": "12px",
+    "$dimension.x3_5": "14px",
+    "$dimension.x4": "16px",
+    "$dimension.x4_5": "18px",
+    "$dimension.x5": "20px",
+    "$dimension.x6": "24px",
+    "$dimension.x7": "28px",
+    "$dimension.x8": "32px",
+    "$dimension.x9": "36px",
+    "$dimension.x10": "40px",
+    "$dimension.x12": "48px",
+    "$dimension.x13": "52px",
+    "$dimension.x14": "56px",
+    "$dimension.x16": "64px",
+    "$dimension.spacing-x.between-chips": "8px",
+    "$dimension.spacing-x.global-gutter": "16px",
+    "$dimension.spacing-y.component-default": "12px",
+    "$dimension.spacing-y.nav-to-title": "20px",
+    "$dimension.spacing-y.screen-bottom": "56px",
+    "$dimension.spacing-y.between-text": "6px",
+    "$font-size.t1": "0.6875rem",
+    "$font-size.t2": "0.75rem",
+    "$font-size.t3": "0.8125rem",
+    "$font-size.t4": "0.875rem",
+    "$font-size.t5": "1rem",
+    "$font-size.t6": "1.125rem",
+    "$font-size.t7": "1.25rem",
+    "$font-size.t8": "1.375rem",
+    "$font-size.t9": "1.5rem",
+    "$font-size.t10": "1.625rem",
+    "$font-size.t1-static": "11px",
+    "$font-size.t2-static": "12px",
+    "$font-size.t3-static": "13px",
+    "$font-size.t4-static": "14px",
+    "$font-size.t5-static": "16px",
+    "$font-size.t6-static": "18px",
+    "$font-size.t7-static": "20px",
+    "$font-size.t8-static": "22px",
+    "$font-size.t9-static": "24px",
+    "$font-size.t10-static": "26px",
+    "$line-height.t1": "0.9375rem",
+    "$line-height.t2": "1rem",
+    "$line-height.t3": "1.125rem",
+    "$line-height.t4": "1.1875rem",
+    "$line-height.t5": "1.375rem",
+    "$line-height.t6": "1.5rem",
+    "$line-height.t7": "1.6875rem",
+    "$line-height.t8": "1.875rem",
+    "$line-height.t9": "2rem",
+    "$line-height.t10": "2.1875rem",
+    "$line-height.t1-static": "15px",
+    "$line-height.t2-static": "16px",
+    "$line-height.t3-static": "18px",
+    "$line-height.t4-static": "19px",
+    "$line-height.t5-static": "22px",
+    "$line-height.t6-static": "24px",
+    "$line-height.t7-static": "27px",
+    "$line-height.t8-static": "30px",
+    "$line-height.t9-static": "32px",
+    "$line-height.t10-static": "35px",
+    "$radius.r0_5": "2px",
+    "$radius.r1": "4px",
+    "$radius.r1_5": "6px",
+    "$radius.r2": "8px",
+    "$radius.r2_5": "10px",
+    "$radius.r3": "12px",
+    "$radius.r3_5": "14px",
+    "$radius.r4": "16px",
+    "$radius.r5": "20px",
+    "$radius.r6": "24px",
+    "$radius.full": "9999px"
+  }
+}

package/src/styles/typography.ts

@@ -0,0 +1,25 @@
+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,
+  };
+}

package/src/styles/vars/color.ts

@@ -0,0 +1,228 @@
+// Color Palette
+export const palette = {
+  blue100: "var(--seed-color-palette-blue-100)",
+  blue200: "var(--seed-color-palette-blue-200)",
+  blue300: "var(--seed-color-palette-blue-300)",
+  blue400: "var(--seed-color-palette-blue-400)",
+  blue500: "var(--seed-color-palette-blue-500)",
+  blue600: "var(--seed-color-palette-blue-600)",
+  blue700: "var(--seed-color-palette-blue-700)",
+  blue800: "var(--seed-color-palette-blue-800)",
+  blue900: "var(--seed-color-palette-blue-900)",
+  blue1000: "var(--seed-color-palette-blue-1000)",
+
+  carrot100: "var(--seed-color-palette-carrot-100)",
+  carrot200: "var(--seed-color-palette-carrot-200)",
+  carrot300: "var(--seed-color-palette-carrot-300)",
+  carrot400: "var(--seed-color-palette-carrot-400)",
+  carrot500: "var(--seed-color-palette-carrot-500)",
+  carrot600: "var(--seed-color-palette-carrot-600)",
+  carrot700: "var(--seed-color-palette-carrot-700)",
+  carrot800: "var(--seed-color-palette-carrot-800)",
+  carrot900: "var(--seed-color-palette-carrot-900)",
+  carrot1000: "var(--seed-color-palette-carrot-1000)",
+
+  gray00: "var(--seed-color-palette-gray-00)",
+  gray100: "var(--seed-color-palette-gray-100)",
+  gray200: "var(--seed-color-palette-gray-200)",
+  gray300: "var(--seed-color-palette-gray-300)",
+  gray400: "var(--seed-color-palette-gray-400)",
+  gray500: "var(--seed-color-palette-gray-500)",
+  gray600: "var(--seed-color-palette-gray-600)",
+  gray700: "var(--seed-color-palette-gray-700)",
+  gray800: "var(--seed-color-palette-gray-800)",
+  gray900: "var(--seed-color-palette-gray-900)",
+  gray1000: "var(--seed-color-palette-gray-1000)",
+
+  green100: "var(--seed-color-palette-green-100)",
+  green200: "var(--seed-color-palette-green-200)",
+  green300: "var(--seed-color-palette-green-300)",
+  green400: "var(--seed-color-palette-green-400)",
+  green500: "var(--seed-color-palette-green-500)",
+  green600: "var(--seed-color-palette-green-600)",
+  green700: "var(--seed-color-palette-green-700)",
+  green800: "var(--seed-color-palette-green-800)",
+  green900: "var(--seed-color-palette-green-900)",
+  green1000: "var(--seed-color-palette-green-1000)",
+
+  purple100: "var(--seed-color-palette-purple-100)",
+  purple200: "var(--seed-color-palette-purple-200)",
+  purple300: "var(--seed-color-palette-purple-300)",
+  purple400: "var(--seed-color-palette-purple-400)",
+  purple500: "var(--seed-color-palette-purple-500)",
+  purple600: "var(--seed-color-palette-purple-600)",
+  purple700: "var(--seed-color-palette-purple-700)",
+  purple800: "var(--seed-color-palette-purple-800)",
+  purple900: "var(--seed-color-palette-purple-900)",
+  purple1000: "var(--seed-color-palette-purple-1000)",
+
+  red100: "var(--seed-color-palette-red-100)",
+  red200: "var(--seed-color-palette-red-200)",
+  red300: "var(--seed-color-palette-red-300)",
+  red400: "var(--seed-color-palette-red-400)",
+  red500: "var(--seed-color-palette-red-500)",
+  red600: "var(--seed-color-palette-red-600)",
+  red700: "var(--seed-color-palette-red-700)",
+  red800: "var(--seed-color-palette-red-800)",
+  red900: "var(--seed-color-palette-red-900)",
+  red1000: "var(--seed-color-palette-red-1000)",
+
+  staticBlack: "var(--seed-color-palette-static-black)",
+  staticWhite: "var(--seed-color-palette-static-white)",
+  staticBlackAlpha100: "var(--seed-color-palette-static-black-alpha-100)",
+  staticBlackAlpha200: "var(--seed-color-palette-static-black-alpha-200)",
+  staticBlackAlpha300: "var(--seed-color-palette-static-black-alpha-300)",
+  staticBlackAlpha400: "var(--seed-color-palette-static-black-alpha-400)",
+  staticBlackAlpha500: "var(--seed-color-palette-static-black-alpha-500)",
+  staticBlackAlpha600: "var(--seed-color-palette-static-black-alpha-600)",
+  staticBlackAlpha700: "var(--seed-color-palette-static-black-alpha-700)",
+  staticBlackAlpha800: "var(--seed-color-palette-static-black-alpha-800)",
+  staticBlackAlpha900: "var(--seed-color-palette-static-black-alpha-900)",
+  staticBlackAlpha1000: "var(--seed-color-palette-static-black-alpha-1000)",
+  staticWhiteAlpha50: "var(--seed-color-palette-static-white-alpha-50)",
+  staticWhiteAlpha100: "var(--seed-color-palette-static-white-alpha-100)",
+  staticWhiteAlpha200: "var(--seed-color-palette-static-white-alpha-200)",
+  staticWhiteAlpha300: "var(--seed-color-palette-static-white-alpha-300)",
+  staticWhiteAlpha400: "var(--seed-color-palette-static-white-alpha-400)",
+  staticWhiteAlpha500: "var(--seed-color-palette-static-white-alpha-500)",
+  staticWhiteAlpha600: "var(--seed-color-palette-static-white-alpha-600)",
+  staticWhiteAlpha700: "var(--seed-color-palette-static-white-alpha-700)",
+  staticWhiteAlpha800: "var(--seed-color-palette-static-white-alpha-800)",
+  staticWhiteAlpha900: "var(--seed-color-palette-static-white-alpha-900)",
+  staticWhiteAlpha1000: "var(--seed-color-palette-static-white-alpha-1000)",
+
+  yellow100: "var(--seed-color-palette-yellow-100)",
+  yellow200: "var(--seed-color-palette-yellow-200)",
+  yellow300: "var(--seed-color-palette-yellow-300)",
+  yellow400: "var(--seed-color-palette-yellow-400)",
+  yellow500: "var(--seed-color-palette-yellow-500)",
+  yellow600: "var(--seed-color-palette-yellow-600)",
+  yellow700: "var(--seed-color-palette-yellow-700)",
+  yellow800: "var(--seed-color-palette-yellow-800)",
+  yellow900: "var(--seed-color-palette-yellow-900)",
+  yellow1000: "var(--seed-color-palette-yellow-1000)",
+};
+
+// Foreground Colors
+export const fg = {
+  neutral: "var(--seed-color-fg-neutral)",
+  placeholder: "var(--seed-color-fg-placeholder)",
+  disabled: "var(--seed-color-fg-disabled)",
+  brand: "var(--seed-color-fg-brand)",
+  informative: "var(--seed-color-fg-informative)",
+  critical: "var(--seed-color-fg-critical)",
+  positive: "var(--seed-color-fg-positive)",
+  warning: "var(--seed-color-fg-warning)",
+  brandContrast: "var(--seed-color-fg-brand-contrast)",
+  criticalContrast: "var(--seed-color-fg-critical-contrast)",
+  informativeContrast: "var(--seed-color-fg-informative-contrast)",
+  neutralMuted: "var(--seed-color-fg-neutral-muted)",
+  neutralSubtle: "var(--seed-color-fg-neutral-subtle)",
+  neutralInverted: "var(--seed-color-fg-neutral-inverted)",
+  positiveContrast: "var(--seed-color-fg-positive-contrast)",
+  warningContrast: "var(--seed-color-fg-warning-contrast)",
+};
+
+// Background Colors
+export const bg = {
+  overlay: "var(--seed-color-bg-overlay)",
+  disabled: "var(--seed-color-bg-disabled)",
+  brandWeak: "var(--seed-color-bg-brand-weak)",
+  brandSolid: "var(--seed-color-bg-brand-solid)",
+  brandSolidPressed: "var(--seed-color-bg-brand-solid-pressed)",
+  brandWeakPressed: "var(--seed-color-bg-brand-weak-pressed)",
+  criticalWeak: "var(--seed-color-bg-critical-weak)",
+  criticalSolid: "var(--seed-color-bg-critical-solid)",
+  criticalSolidPressed: "var(--seed-color-bg-critical-solid-pressed)",
+  criticalWeakPressed: "var(--seed-color-bg-critical-weak-pressed)",
+  informativeWeak: "var(--seed-color-bg-informative-weak)",
+  informativeSolid: "var(--seed-color-bg-informative-solid)",
+  informativeSolidPressed: "var(--seed-color-bg-informative-solid-pressed)",
+  informativeWeakPressed: "var(--seed-color-bg-informative-weak-pressed)",
+  layerBasement: "var(--seed-color-bg-layer-basement)",
+  layerDefault: "var(--seed-color-bg-layer-default)",
+  layerFill: "var(--seed-color-bg-layer-fill)",
+  layerFloating: "var(--seed-color-bg-layer-floating)",
+  layerDefaultPressed: "var(--seed-color-bg-layer-default-pressed)",
+  layerFloatingPressed: "var(--seed-color-bg-layer-floating-pressed)",
+  magicWeak: "var(--seed-color-bg-magic-weak)",
+  neutralWeak: "var(--seed-color-bg-neutral-weak)",
+  neutralInverted: "var(--seed-color-bg-neutral-inverted)",
+  neutralSolid: "var(--seed-color-bg-neutral-solid)",
+  neutralInvertedPressed: "var(--seed-color-bg-neutral-inverted-pressed)",
+  neutralSolidMuted: "var(--seed-color-bg-neutral-solid-muted)",
+  neutralSolidMutedPressed: "var(--seed-color-bg-neutral-solid-muted-pressed)",
+  neutralWeakPressed: "var(--seed-color-bg-neutral-weak-pressed)",
+  overlayMuted: "var(--seed-color-bg-overlay-muted)",
+  positiveWeak: "var(--seed-color-bg-positive-weak)",
+  positiveSolid: "var(--seed-color-bg-positive-solid)",
+  positiveSolidPressed: "var(--seed-color-bg-positive-solid-pressed)",
+  positiveWeakPressed: "var(--seed-color-bg-positive-weak-pressed)",
+  warningWeak: "var(--seed-color-bg-warning-weak)",
+  warningSolid: "var(--seed-color-bg-warning-solid)",
+  warningSolidPressed: "var(--seed-color-bg-warning-solid-pressed)",
+  warningWeakPressed: "var(--seed-color-bg-warning-weak-pressed)",
+};
+
+// Stroke Colors
+export const stroke = {
+  brandWeak: "var(--seed-color-stroke-brand-weak)",
+  brandSolid: "var(--seed-color-stroke-brand-solid)",
+  criticalWeak: "var(--seed-color-stroke-critical-weak)",
+  criticalSolid: "var(--seed-color-stroke-critical-solid)",
+  informativeWeak: "var(--seed-color-stroke-informative-weak)",
+  informativeSolid: "var(--seed-color-stroke-informative-solid)",
+  neutralContrast: "var(--seed-color-stroke-neutral-contrast)",
+  neutralSolid: "var(--seed-color-stroke-neutral-solid)",
+  neutralWeak: "var(--seed-color-stroke-neutral-weak)",
+  neutralMuted: "var(--seed-color-stroke-neutral-muted)",
+  neutralSubtle: "var(--seed-color-stroke-neutral-subtle)",
+  positiveWeak: "var(--seed-color-stroke-positive-weak)",
+  positiveSolid: "var(--seed-color-stroke-positive-solid)",
+  warningWeak: "var(--seed-color-stroke-warning-weak)",
+  warningSolid: "var(--seed-color-stroke-warning-solid)",
+};
+
+// Manner Temp Colors
+export const mannerTemp = {
+  l1: {
+    text: "var(--seed-color-manner-temp-l1-text)",
+    bg: "var(--seed-color-manner-temp-l1-bg)",
+  },
+  l2: {
+    text: "var(--seed-color-manner-temp-l2-text)",
+    bg: "var(--seed-color-manner-temp-l2-bg)",
+  },
+  l3: {
+    text: "var(--seed-color-manner-temp-l3-text)",
+    bg: "var(--seed-color-manner-temp-l3-bg)",
+  },
+  l4: {
+    text: "var(--seed-color-manner-temp-l4-text)",
+    bg: "var(--seed-color-manner-temp-l4-bg)",
+  },
+  l5: {
+    text: "var(--seed-color-manner-temp-l5-text)",
+    bg: "var(--seed-color-manner-temp-l5-bg)",
+  },
+  l6: {
+    text: "var(--seed-color-manner-temp-l6-text)",
+    bg: "var(--seed-color-manner-temp-l6-bg)",
+  },
+  l7: {
+    text: "var(--seed-color-manner-temp-l7-text)",
+    bg: "var(--seed-color-manner-temp-l7-bg)",
+  },
+  l8: {
+    text: "var(--seed-color-manner-temp-l8-text)",
+    bg: "var(--seed-color-manner-temp-l8-bg)",
+  },
+  l9: {
+    text: "var(--seed-color-manner-temp-l9-text)",
+    bg: "var(--seed-color-manner-temp-l9-bg)",
+  },
+  l10: {
+    text: "var(--seed-color-manner-temp-l10-text)",
+    bg: "var(--seed-color-manner-temp-l10-bg)",
+  },
+};