kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-6PNGSAJB.js

@@ -0,0 +1,55 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/dot-pagination.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var toneClasses = {
+  primary: "bg-primary bg-gradient-brand shadow-glow-primary-soft",
+  warning: "bg-warning shadow-raised"
+};
+var DotPagination = React.forwardRef(
+  ({ count, index, tone = "primary", onSelect, ariaLabel, className, ...props }, ref) => {
+    if (count <= 1) return null;
+    const interactive = typeof onSelect === "function";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tablist",
+        "aria-label": ariaLabel ?? "Pagination",
+        className: cn("flex items-center justify-center gap-1.5", className),
+        ...props,
+        children: Array.from({ length: count }).map((_, i) => {
+          const active = i === index;
+          const dotClass = cn(
+            "rounded-full transition-all duration-200",
+            active ? cn("h-2 w-5", toneClasses[tone]) : "h-2 w-2 bg-secondary/35",
+            interactive && !active && "cursor-pointer hover:bg-secondary-content/70",
+            interactive && active && "cursor-pointer"
+          );
+          const Tag = interactive ? "button" : "span";
+          return /* @__PURE__ */ jsx(
+            Tag,
+            {
+              type: interactive ? "button" : void 0,
+              role: "tab",
+              "aria-selected": active,
+              "aria-label": `Page ${i + 1} of ${count}`,
+              onClick: interactive ? () => onSelect(i) : void 0,
+              className: dotClass
+            },
+            i
+          );
+        })
+      }
+    );
+  }
+);
+DotPagination.displayName = "DotPagination";
+
+export {
+  DotPagination
+};

package/dist/web/chunk-7L35JISL.js

@@ -0,0 +1,106 @@
+"use client";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Close
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/primitives/toast.tsx
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var ToastProvider = ToastPrimitives.Provider;
+var ToastViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Viewport,
+  {
+    ref,
+    className: cn(
+      "fixed bottom-20 left-0 right-0 z-[100] flex max-h-screen w-full flex-col items-center p-4 gap-2",
+      className
+    ),
+    ...props
+  }
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+var toastVariants = cva(
+  "group pointer-events-auto relative flex w-full max-w-md items-center justify-between space-x-3 overflow-hidden rounded-xl backdrop-blur-xl p-4 shadow-toast transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-bottom-full data-[state=open]:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero text-foreground",
+        // `destructive` is also the marker the group-[.destructive] parts read.
+        destructive: "destructive bg-danger/20 text-danger-fg"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    ToastPrimitives.Root,
+    {
+      ref,
+      className: cn(toastVariants({ variant }), className),
+      ...props
+    }
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+var ToastAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Action,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-lg bg-secondary/15 bg-gradient-surface px-3 text-caption font-semibold text-secondary-content shadow-raised transition-all hover-gradient-violet hover:shadow-button-surface-hover focus:outline-none disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:bg-danger/15 group-[.destructive]:bg-none group-[.destructive]:text-danger-fg group-[.destructive]:hover:bg-danger/25",
+      className
+    ),
+    ...props
+  }
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+var ToastClose = React.forwardRef(({ className, label = "Close", variant, ...props }, ref) => /* @__PURE__ */ jsx(ToastPrimitives.Close, { ref, asChild: true, "toast-close": "", ...props, children: /* @__PURE__ */ jsx(
+  GlyphButton,
+  {
+    icon: Close,
+    label,
+    size: "sm",
+    variant: variant === "destructive" ? "danger-subtle" : "quiet",
+    className
+  }
+) }));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+var ToastTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Title,
+  {
+    ref,
+    className: cn("text-body font-semibold text-foreground", className),
+    ...props
+  }
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+var ToastDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Description,
+  {
+    ref,
+    className: cn("text-caption text-muted-foreground", className),
+    ...props
+  }
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+export {
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastTitle,
+  ToastDescription
+};

package/dist/web/chunk-7L7DQFHJ.js

@@ -0,0 +1,85 @@
+"use client";
+import {
+  fieldSurface
+} from "./chunk-TKRMGN7J.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  KeyboardArrowDown,
+  KeyboardArrowUp
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/primitives/number-input.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NumberInput = React.forwardRef(
+  ({ className, value, onChange, min, max, step = 1, disabled, ...props }, ref) => {
+    const inputRef = React.useRef(null);
+    const resolvedRef = ref ?? inputRef;
+    const nudge = (direction) => {
+      const el = resolvedRef.current;
+      if (!el) return;
+      const current = parseFloat(el.value) || 0;
+      const next = current + direction * Number(step);
+      const clamped = min !== void 0 ? Math.max(Number(min), next) : next;
+      const final = max !== void 0 ? Math.min(Number(max), clamped) : clamped;
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+      nativeInputValueSetter?.call(el, String(final));
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+      el.dispatchEvent(new Event("change", { bubbles: true }));
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: resolvedRef,
+          type: "number",
+          value,
+          onChange,
+          min,
+          max,
+          step,
+          disabled,
+          className: cn(
+            "flex h-12 w-full px-4 py-3 pr-10 text-body",
+            fieldSurface,
+            "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]",
+            className
+          ),
+          ...props
+        }
+      ),
+      !disabled && /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex flex-col", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            onClick: () => nudge(1),
+            className: "flex items-center justify-center h-4 w-5 rounded text-muted-foreground hover-gradient-violet hover:text-secondary-content transition-colors",
+            children: /* @__PURE__ */ jsx(IconGlyph, { glyph: KeyboardArrowUp, className: "text-icon-sm" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            onClick: () => nudge(-1),
+            className: "flex items-center justify-center h-4 w-5 rounded text-muted-foreground hover-gradient-violet hover:text-secondary-content transition-colors",
+            children: /* @__PURE__ */ jsx(IconGlyph, { glyph: KeyboardArrowDown, className: "text-icon-sm" })
+          }
+        )
+      ] })
+    ] });
+  }
+);
+NumberInput.displayName = "NumberInput";
+
+export {
+  NumberInput
+};

package/dist/web/chunk-7OE6AXLY.js

@@ -0,0 +1,27 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/halo-backdrop.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function HaloBackdrop({ animated = true, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      "data-slot": "halo-backdrop",
+      "data-animated": animated ? "true" : "false",
+      className: cn("kui-halo pointer-events-none absolute inset-0 -z-10 overflow-hidden", className),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "kui-halo-blob kui-halo-blob-a" }),
+        /* @__PURE__ */ jsx("div", { className: "kui-halo-blob kui-halo-blob-b" }),
+        /* @__PURE__ */ jsx("div", { className: "kui-halo-blob kui-halo-blob-c" })
+      ]
+    }
+  );
+}
+
+export {
+  HaloBackdrop
+};

package/dist/web/chunk-7Y7FEBKK.js

@@ -0,0 +1,85 @@
+"use client";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Add,
+  Remove
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/stepper-number-input.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function StepperNumberInput({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  disabled,
+  className,
+  inputClassName,
+  ariaLabel
+}) {
+  const clamp = (next) => {
+    const boundedMin = min === void 0 ? next : Math.max(min, next);
+    const bounded = max === void 0 ? boundedMin : Math.min(max, boundedMin);
+    onChange(Number.isFinite(bounded) ? bounded : min ?? 0);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1.5 overflow-hidden rounded-lg border border-border bg-foreground/5 shadow-inner transition-shadow focus-within:ring-1 focus-within:ring-primary/50 focus-within:shadow-glow-primary-soft",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "px-3 py-1.5 text-secondary-content transition-colors hover-gradient-violet hover:text-foreground disabled:opacity-30",
+            disabled: disabled || min !== void 0 && value <= min,
+            onClick: () => clamp(value - step),
+            "aria-label": "Decrease",
+            children: /* @__PURE__ */ jsx(IconGlyph, { glyph: Remove, className: "text-icon-md" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            min,
+            max,
+            step,
+            value,
+            disabled,
+            "aria-label": ariaLabel,
+            onChange: (event) => clamp(Number(event.target.value)),
+            className: cn(
+              "min-w-0 flex-1 bg-transparent text-center text-body font-bold text-foreground focus:outline-none",
+              inputClassName
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "px-3 py-1.5 text-secondary-content transition-colors hover-gradient-violet hover:text-foreground disabled:opacity-30",
+            disabled: disabled || max !== void 0 && value >= max,
+            onClick: () => clamp(value + step),
+            "aria-label": "Increase",
+            children: /* @__PURE__ */ jsx(IconGlyph, { glyph: Add, className: "text-icon-md" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  StepperNumberInput
+};

package/dist/web/chunk-A6MSV4MA.js

@@ -0,0 +1,83 @@
+"use client";
+import {
+  filledMap,
+  outlinedMap
+} from "./chunk-VYQHGSK6.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+
+// src/web/primitives/icon.tsx
+import { jsx } from "react/jsx-runtime";
+function createIcon(outlined, filled = {}) {
+  return function Icon2({ name, filled: preferFilled = false, ...props }) {
+    const glyph = (preferFilled ? filled[name] : void 0) ?? outlined[name];
+    if (!glyph) return null;
+    return /* @__PURE__ */ jsx(IconGlyph, { glyph, ...props });
+  };
+}
+var Icon = /* @__PURE__ */ createIcon(outlinedMap, filledMap);
+var Icons = {
+  // Navigation
+  ArrowBack: (props) => /* @__PURE__ */ jsx(Icon, { name: "arrow_back", ...props }),
+  ArrowForward: (props) => /* @__PURE__ */ jsx(Icon, { name: "arrow_forward", ...props }),
+  Close: (props) => /* @__PURE__ */ jsx(Icon, { name: "close", ...props }),
+  Menu: (props) => /* @__PURE__ */ jsx(Icon, { name: "menu", ...props }),
+  // Actions
+  Send: (props) => /* @__PURE__ */ jsx(Icon, { name: "arrow_outward", ...props }),
+  Receive: (props) => /* @__PURE__ */ jsx(Icon, { name: "south_west", ...props }),
+  Swap: (props) => /* @__PURE__ */ jsx(Icon, { name: "swap_horiz", ...props }),
+  Copy: (props) => /* @__PURE__ */ jsx(Icon, { name: "content_copy", ...props }),
+  Paste: (props) => /* @__PURE__ */ jsx(Icon, { name: "content_paste", ...props }),
+  Refresh: (props) => /* @__PURE__ */ jsx(Icon, { name: "refresh", ...props }),
+  QrCode: (props) => /* @__PURE__ */ jsx(Icon, { name: "qr_code_2", ...props }),
+  QrScanner: (props) => /* @__PURE__ */ jsx(Icon, { name: "qr_code_scanner", ...props }),
+  // Status
+  Check: (props) => /* @__PURE__ */ jsx(Icon, { name: "check", ...props }),
+  CheckCircle: (props) => /* @__PURE__ */ jsx(Icon, { name: "check_circle", ...props }),
+  Error: (props) => /* @__PURE__ */ jsx(Icon, { name: "error", ...props }),
+  Warning: (props) => /* @__PURE__ */ jsx(Icon, { name: "warning", ...props }),
+  Info: (props) => /* @__PURE__ */ jsx(Icon, { name: "info", ...props }),
+  Pending: (props) => /* @__PURE__ */ jsx(Icon, { name: "hourglass_top", ...props }),
+  Progress: (props) => /* @__PURE__ */ jsx(Icon, { name: "autorenew", ...props }),
+  // Navigation tabs
+  Wallet: (props) => /* @__PURE__ */ jsx(Icon, { name: "account_balance_wallet", ...props }),
+  Activity: (props) => /* @__PURE__ */ jsx(Icon, { name: "history", ...props }),
+  Settings: (props) => /* @__PURE__ */ jsx(Icon, { name: "settings", ...props }),
+  // Networks
+  Lightning: (props) => /* @__PURE__ */ jsx(Icon, { name: "bolt", ...props }),
+  Bitcoin: (props) => /* @__PURE__ */ jsx(Icon, { name: "currency_bitcoin", ...props }),
+  Ark: (props) => /* @__PURE__ */ jsx(Icon, { name: "hexagon", ...props }),
+  // Security
+  Lock: (props) => /* @__PURE__ */ jsx(Icon, { name: "lock", ...props }),
+  Unlock: (props) => /* @__PURE__ */ jsx(Icon, { name: "lock_open", ...props }),
+  Shield: (props) => /* @__PURE__ */ jsx(Icon, { name: "shield", ...props }),
+  Key: (props) => /* @__PURE__ */ jsx(Icon, { name: "key", ...props }),
+  Fingerprint: (props) => /* @__PURE__ */ jsx(Icon, { name: "fingerprint", ...props }),
+  Visibility: (props) => /* @__PURE__ */ jsx(Icon, { name: "visibility", ...props }),
+  VisibilityOff: (props) => /* @__PURE__ */ jsx(Icon, { name: "visibility_off", ...props }),
+  // Misc
+  ExpandMore: (props) => /* @__PURE__ */ jsx(Icon, { name: "expand_more", ...props }),
+  ExpandLess: (props) => /* @__PURE__ */ jsx(Icon, { name: "expand_less", ...props }),
+  ChevronRight: (props) => /* @__PURE__ */ jsx(Icon, { name: "chevron_right", ...props }),
+  OpenInNew: (props) => /* @__PURE__ */ jsx(Icon, { name: "open_in_new", ...props }),
+  Search: (props) => /* @__PURE__ */ jsx(Icon, { name: "search", ...props }),
+  Add: (props) => /* @__PURE__ */ jsx(Icon, { name: "add", ...props }),
+  Download: (props) => /* @__PURE__ */ jsx(Icon, { name: "download", ...props }),
+  Upload: (props) => /* @__PURE__ */ jsx(Icon, { name: "upload", ...props }),
+  Edit: (props) => /* @__PURE__ */ jsx(Icon, { name: "edit", ...props }),
+  Delete: (props) => /* @__PURE__ */ jsx(Icon, { name: "delete", ...props }),
+  Timer: (props) => /* @__PURE__ */ jsx(Icon, { name: "timer", ...props }),
+  Person: (props) => /* @__PURE__ */ jsx(Icon, { name: "person", ...props }),
+  Hub: (props) => /* @__PURE__ */ jsx(Icon, { name: "hub", ...props }),
+  Verified: (props) => /* @__PURE__ */ jsx(Icon, { name: "verified", ...props }),
+  // Agent / AI
+  SmartToy: (props) => /* @__PURE__ */ jsx(Icon, { name: "smart_toy", ...props }),
+  Psychology: (props) => /* @__PURE__ */ jsx(Icon, { name: "psychology", ...props })
+};
+
+export {
+  createIcon,
+  Icon,
+  Icons
+};

package/dist/web/chunk-A7MPRLJL.js

@@ -0,0 +1,169 @@
+"use client";
+
+// src/tokens/colors.ts
+var darkSemanticColors = {
+  background: "#0E0D16",
+  // surface-base (deepest, near-black with a violet cast)
+  foreground: "#EDECF6",
+  // content-primary (cool white)
+  border: "rgba(200, 192, 240, 0.11)",
+  // lavender hairline
+  input: "rgba(200, 192, 240, 0.16)",
+  destructive: "hsl(0 62% 50%)",
+  secondary: "#282638",
+  // neutral surface (bg-secondary utility is brand violet via app token)
+  secondaryFg: "#EDECF6",
+  muted: "#14131E",
+  //     surface-raised
+  mutedFg: "rgba(232, 230, 245, 0.58)",
+  primary: "#15E99A",
+  //   brand green (dark)
+  primaryFg: "#0E0D16",
+  accent: "#282638",
+  //    surface-elevated
+  accentFg: "#EDECF6",
+  ring: "#15E99A",
+  card: "#1C1A2A",
+  //      surface-overlay (card)
+  cardFg: "#EDECF6",
+  popover: "#211F31",
+  popoverFg: "#EDECF6",
+  chart1: "#2BEE79",
+  chart2: "#F6C343",
+  chart3: "#F7931A",
+  chart4: "#8B5CF6",
+  chart5: "#DD352E",
+  semanticBackground: "#1C1A2A",
+  semanticBorder: "rgba(200, 192, 240, 0.11)"
+};
+var colors = {
+  ...darkSemanticColors,
+  textPrimary: darkSemanticColors.foreground,
+  textSecondary: darkSemanticColors.mutedFg,
+  textMuted: darkSemanticColors.border,
+  textDimmed: darkSemanticColors.ring,
+  /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
+  success: darkSemanticColors.primary,
+  warning: "#FACC15",
+  danger: "#E53535",
+  info: "#4290FF",
+  /** @deprecated alias for `danger` — kept for back-compat. */
+  error: darkSemanticColors.destructive,
+  /** Surface elevation — translucent overlays applied over the page background */
+  surface: {
+    base: "rgba(255, 255, 255, 0.03)",
+    card: "rgba(255, 255, 255, 0.05)",
+    elevated: "rgba(255, 255, 255, 0.08)",
+    overlay: "rgba(0, 0, 0, 0.20)",
+    overlayStrong: "rgba(0, 0, 0, 0.35)",
+    scrim: "rgba(0, 0, 0, 0.60)"
+  },
+  /** Border ladder — translucent edges on dark surfaces */
+  borderToken: {
+    subtle: "rgba(200, 192, 240, 0.05)",
+    default: "rgba(200, 192, 240, 0.09)",
+    strong: "rgba(200, 192, 240, 0.18)"
+  },
+  /** Text ladder for dark surfaces */
+  text: {
+    primary: "#ffffff",
+    secondary: "rgba(255, 255, 255, 0.65)",
+    muted: "rgba(255, 255, 255, 0.45)",
+    dimmed: "rgba(255, 255, 255, 0.35)",
+    disabled: "rgba(255, 255, 255, 0.25)",
+    onAccent: "#051B10"
+  },
+  /** Scrollbar treatment for app-owned scroll regions */
+  scrollbar: {
+    thumb: "rgba(255, 255, 255, 0.16)",
+    thumbHover: "rgba(21, 233, 154, 0.55)",
+    /** While the thumb is dragged: the full brand green, brighter than hover. */
+    thumbActive: "#2BF5A8",
+    track: "transparent"
+  },
+  /** External bridge chains — third-party brand colors for network tags.
+   * Keyed by the lowercase chain id the bridge API uses. */
+  bridgeChain: {
+    ethereum: "#627EEA",
+    base: "#0052FF",
+    arbitrum: "#28A0F0",
+    optimism: "#FF0420",
+    polygon: "#8247E5",
+    solana: "#9945FF",
+    tron: "#FF4B4B",
+    bitcoin: "#F7931A",
+    lightning: "#F6C343",
+    spark: "#FFFFFF",
+    avalanche: "#E84142",
+    bsc: "#F0B90B",
+    litecoin: "#4A7BD4",
+    ton: "#0098EA",
+    monad: "#836EF9"
+  },
+  /** Network / Layer */
+  network: {
+    bitcoin: "#F7931A",
+    rgb: "#DD352E",
+    arkade: "#7C3AED",
+    // Spark is white on dark, black on light: the themed value is the
+    // `network-spark` app token (app-semantic.ts). This is the dark one.
+    spark: "#FFFFFF",
+    lightning: "#F6C343",
+    liquid: "#22e1c9",
+    taproot: "#D1D6D8"
+  },
+  networkChip: {
+    bitcoin: "#44341F",
+    rgb: "#44282B",
+    arkade: "#362B55",
+    spark: "#2B2A35",
+    lightning: "#3D421F",
+    liquid: "#0D2A2E",
+    taproot: "#1E2328"
+  },
+  networkText: {
+    bitcoin: "#F2B063",
+    rgb: "#E87872",
+    arkade: "#A98CF2",
+    spark: "#E8E7F0",
+    lightning: "#E4D56F",
+    liquid: "#5DE5D6",
+    taproot: "#C4CACD"
+  },
+  /** Light-theme network chips: a pale tint of each hue (`networkChip` is the dark one). */
+  networkChipLight: {
+    bitcoin: "#FBEFD9",
+    rgb: "#FBE3E1",
+    arkade: "#ECE4FF",
+    spark: "#E6E5EE",
+    lightning: "#FCF6D6",
+    liquid: "#D8F5F1",
+    taproot: "#E9ECEE"
+  },
+  /** Light-theme chip text: each hue darkened until it clears 4.5:1 on its chip. */
+  networkTextLight: {
+    bitcoin: "#92400E",
+    rgb: "#991B1B",
+    arkade: "#5B21B6",
+    spark: "#0D0C14",
+    lightning: "#854D0E",
+    liquid: "#115E59",
+    taproot: "#464A69"
+  },
+  /** Asset icon brand colors — used as solid backgrounds behind glyphs */
+  assetIcon: {
+    eth: "#627EEA",
+    usdt: "#26A17B",
+    usdc: "#2775CA"
+  },
+  /** Transaction direction */
+  tx: {
+    sent: "#F94040",
+    receive: "#2BEE79",
+    swap: "#4290FF"
+  }
+};
+
+export {
+  colors
+};