lynx-console 0.1.0 → 0.2.0

package/src/components/Tabs.css

@@ -0,0 +1,78 @@
+.tabs-root {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.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;
+  padding: 12px 0 10px 0;
+  position: relative;
+}
+
+.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 {
+  font-size: 0.875rem;
+  line-height: 1.1875rem;
+}
+
+.tabs-triggerButtonText--t3 {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+}
+
+.tabs-triggerButtonText--t2 {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.tabs-triggerButtonText--t1 {
+  font-size: 0.6875rem;
+  line-height: 0.9375rem;
+}
+
+.tabs-triggerIndicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 0 16px;
+  width: 100%;
+  transition: 200ms;
+  transition-timing-function: cubic-bezier(.35, 0, .35, 1);
+}
+
+.tabs-triggerIndicatorLine {
+  background-color: var(--lynx-console-color-fg-neutral);
+  width: 100%;
+  height: 2px;
+}
+
+.tabs-contents {
+  flex: 1;
+  width: 100%;
+}
+
+.tabs-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}

package/src/components/Tabs.tsx

@@ -1,6 +1,6 @@
 import { type ReactNode, useRef, useState } from "@lynx-js/react";
 import type { ListSnapEvent, NodesRef } from "@lynx-js/types";
-import * as css from "./Tabs.css";
+import "./Tabs.css";
 
 type TabsProps = {
   items: Array<{
@@ -14,14 +14,18 @@ type TabsProps = {
 export default function Tabs(props: TabsProps) {
   const tabContentsRef = useRef<NodesRef>(null);
   const [activeIndex, setActiveIndex] = useState(0);
+  const tabSize =
+    props.items.length < 4
+      ? undefined
+      : (`t${Math.max(1, 5 - (props.items.length - 3))}`);
 
   return (
-    <view className={css.tabs}>
-      <view className={css.tabHeader}>
+    <view className={"tabs-root"}>
+      <view className={"tabs-header"}>
         {props.items.map((item, i) => (
           <view
             key={item.key}
-            className={css.tabTriggerButton}
+            className={"tabs-triggerButton"}
             bindtap={() => {
               setActiveIndex(i);
               props.onTabChange?.();
@@ -38,18 +42,16 @@ export default function Tabs(props: TabsProps) {
             }}
           >
             <text
-              className={css.tabTriggerButtonText({
-                active: i === activeIndex,
-              })}
+              className={`tabs-triggerButtonText${i === activeIndex ? " tabs-triggerButtonText--active" : ""}${tabSize ? ` tabs-triggerButtonText--${tabSize}` : ""}`}
             >
               {item.label}
             </text>
             {i === 0 && (
               <view
-                className={css.tabTriggerIndicator}
+                className={"tabs-triggerIndicator"}
                 style={{ transform: `translateX(${activeIndex * 100}%)` }}
               >
-                <view className={css.tabTriggerIndicatorLine} />
+                <view className={"tabs-triggerIndicatorLine"} />
               </view>
             )}
           </view>
@@ -58,7 +60,7 @@ export default function Tabs(props: TabsProps) {
 
       <list
         ref={tabContentsRef}
-        className={css.tabContents}
+        className={"tabs-contents"}
         scroll-orientation="horizontal"
         item-snap={{ factor: 0, offset: 0 }}
         bindscroll={() => props.onTabChange?.()}
@@ -73,7 +75,7 @@ export default function Tabs(props: TabsProps) {
             key={item.key}
             item-key={item.key}
             recyclable={false}
-            className={css.tabContent}
+            className={"tabs-content"}
           >
             {item.renderContent()}
           </list-item>

package/src/globals.d.ts

@@ -2,8 +2,3 @@ declare module "*.css" {
   const content: string;
   export default content;
 }
-
-declare module "*.css.ts" {
-  const content: Record<string, string>;
-  export default content;
-}

package/src/hooks/useLongPressDrag.ts

@@ -87,9 +87,9 @@ export function useLongPressDrag(onTap: () => void) {
     bottom: isDragging ? tempBottom : bottom,
     clearTimer,
     handlers: {
-      bindtouchstart: handleTouchStart,
-      bindtouchmove: handleTouchMove,
-      bindtouchend: handleTouchEnd,
+      catchtouchstart: handleTouchStart,
+      catchtouchmove: handleTouchMove,
+      catchtouchend: handleTouchEnd,
     },
   };
 }

package/src/index.tsx

@@ -8,9 +8,10 @@ import {
 } from "@lynx-js/react";
 import BottomSheet from "./components/BottomSheet.jsx";
 import { ConsolePanel } from "./components/ConsolePanel.jsx";
-import * as floatingButtonCss from "./components/FloatingButton.css";
+import "./components/FloatingButton.css";
 import { FloatingButton } from "./components/FloatingButton.jsx";
 import { usePerformance } from "./hooks/usePerformance";
+import type { CustomTab } from "./types";
 
 export interface LynxConsoleHandle {
   open: () => void;
@@ -21,6 +22,7 @@ export interface LynxConsoleHandle {
 export interface LynxConsoleProps {
   theme?: "light" | "dark";
   safeAreaInsetBottom?: string;
+  customTabs?: CustomTab[];
 }
 
 interface FcpMetric {
@@ -36,7 +38,7 @@ interface MetricFcpEntry {
 
 const LynxConsole = forwardRef<LynxConsoleHandle, LynxConsoleProps>(
   (
-    { theme = "light", safeAreaInsetBottom = "50px" },
+    { theme = "light", safeAreaInsetBottom = "50px", customTabs },
     ref: ForwardedRef<LynxConsoleHandle>,
   ) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -81,13 +83,13 @@ const LynxConsole = forwardRef<LynxConsoleHandle, LynxConsoleProps>(
       setShouldClose(false);
     };
 
-    const themeClass = `data-seed-color-mode__${theme}-only`;
+    const themeClass = `data-lynx-console-color-mode__${theme}-only`;
 
     return (
       <view className={themeClass}>
         <FloatingButton bindtap={handleOpenBottomSheet}>
-          <text className={floatingButtonCss.title}>LynxConsole</text>
-          <text className={floatingButtonCss.subtitle}>
+          <text className="fb-title">LynxConsole</text>
+          <text className="fb-subtitle">
             {`${latestFcp?.name ?? "FCP"}: ${latestFcp?.duration ? latestFcp.duration.toFixed(2) : "--"}ms`}
           </text>
         </FloatingButton>
@@ -99,7 +101,7 @@ const LynxConsole = forwardRef<LynxConsoleHandle, LynxConsoleProps>(
             title="Lynx Console"
             safeAreaInsetBottom={safeAreaInsetBottom}
           >
-            <ConsolePanel />
+            <ConsolePanel customTabs={customTabs} />
           </BottomSheet>
         )}
       </view>
@@ -107,4 +109,5 @@ const LynxConsole = forwardRef<LynxConsoleHandle, LynxConsoleProps>(
   },
 );
 
+export type { CustomTab } from "./types";
 export default LynxConsole;

package/src/styles/global.css

@@ -0,0 +1,8 @@
+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,228 +1,41 @@
 // 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)",
+  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(--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)",
+  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(--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)",
+  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 = {
-  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)",
-  },
+  neutralSubtle: "var(--lynx-console-color-stroke-neutral-subtle)",
+  neutralWeak: "var(--lynx-console-color-stroke-neutral-weak)",
 };

package/src/styles/vars/dimension.ts

@@ -1,79 +1,10 @@
 // Dimensions
-export const x0_5 = "var(--seed-dimension-x0_5)";
-export const x1 = "var(--seed-dimension-x1)";
-export const x1_5 = "var(--seed-dimension-x1_5)";
-export const x2 = "var(--seed-dimension-x2)";
-export const x2_5 = "var(--seed-dimension-x2_5)";
-export const x3 = "var(--seed-dimension-x3)";
-export const x3_5 = "var(--seed-dimension-x3_5)";
-export const x4 = "var(--seed-dimension-x4)";
-export const x4_5 = "var(--seed-dimension-x4_5)";
-export const x5 = "var(--seed-dimension-x5)";
-export const x6 = "var(--seed-dimension-x6)";
-export const x7 = "var(--seed-dimension-x7)";
-export const x8 = "var(--seed-dimension-x8)";
-export const x9 = "var(--seed-dimension-x9)";
-export const x10 = "var(--seed-dimension-x10)";
-export const x12 = "var(--seed-dimension-x12)";
-export const x13 = "var(--seed-dimension-x13)";
-export const x14 = "var(--seed-dimension-x14)";
-export const x16 = "var(--seed-dimension-x16)";
+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 = {
-  betweenChips: "var(--seed-dimension-spacing-x-between-chips)",
-  globalGutter: "var(--seed-dimension-spacing-x-global-gutter)",
-};
-
-export const spacingY = {
-  componentDefault: "var(--seed-dimension-spacing-y-component-default)",
-  navToTitle: "var(--seed-dimension-spacing-y-nav-to-title)",
-  screenBottom: "var(--seed-dimension-spacing-y-screen-bottom)",
-  betweenText: "var(--seed-dimension-spacing-y-between-text)",
-};
-
-// Font Sizes
-export const t1 = "var(--seed-font-size-t1)";
-export const t2 = "var(--seed-font-size-t2)";
-export const t3 = "var(--seed-font-size-t3)";
-export const t4 = "var(--seed-font-size-t4)";
-export const t5 = "var(--seed-font-size-t5)";
-export const t6 = "var(--seed-font-size-t6)";
-export const t7 = "var(--seed-font-size-t7)";
-export const t8 = "var(--seed-font-size-t8)";
-export const t9 = "var(--seed-font-size-t9)";
-export const t10 = "var(--seed-font-size-t10)";
-export const t1Static = "var(--seed-font-size-t1-static)";
-export const t2Static = "var(--seed-font-size-t2-static)";
-export const t3Static = "var(--seed-font-size-t3-static)";
-export const t4Static = "var(--seed-font-size-t4-static)";
-export const t5Static = "var(--seed-font-size-t5-static)";
-export const t6Static = "var(--seed-font-size-t6-static)";
-export const t7Static = "var(--seed-font-size-t7-static)";
-export const t8Static = "var(--seed-font-size-t8-static)";
-export const t9Static = "var(--seed-font-size-t9-static)";
-export const t10Static = "var(--seed-font-size-t10-static)";
-
-// Line Heights
-export const lineHeight = {
-  t1: "var(--seed-line-height-t1)",
-  t2: "var(--seed-line-height-t2)",
-  t3: "var(--seed-line-height-t3)",
-  t4: "var(--seed-line-height-t4)",
-  t5: "var(--seed-line-height-t5)",
-  t6: "var(--seed-line-height-t6)",
-  t7: "var(--seed-line-height-t7)",
-  t8: "var(--seed-line-height-t8)",
-  t9: "var(--seed-line-height-t9)",
-  t10: "var(--seed-line-height-t10)",
-  t1Static: "var(--seed-line-height-t1-static)",
-  t2Static: "var(--seed-line-height-t2-static)",
-  t3Static: "var(--seed-line-height-t3-static)",
-  t4Static: "var(--seed-line-height-t4-static)",
-  t5Static: "var(--seed-line-height-t5-static)",
-  t6Static: "var(--seed-line-height-t6-static)",
-  t7Static: "var(--seed-line-height-t7-static)",
-  t8Static: "var(--seed-line-height-t8-static)",
-  t9Static: "var(--seed-line-height-t9-static)",
-  t10Static: "var(--seed-line-height-t10-static)",
+  globalGutter: "var(--lynx-console-dimension-spacing-x-global-gutter)",
 };