kaleido-ui 0.1.67 → 0.1.69

package/dist/tokens/index.js

@@ -1,23 +1,32 @@
 // src/tokens/colors.ts
 var lightSemanticColors = {
-  background: "#ffffff",
-  foreground: "#0a0a0a",
-  card: "#ffffff",
-  cardFg: "#0a0a0a",
-  popover: "#ffffff",
-  popoverFg: "#0a0a0a",
-  primary: "#171717",
-  primaryFg: "#fafafa",
-  secondary: "#f5f5f5",
-  secondaryFg: "#171717",
-  muted: "#f5f5f5",
-  mutedFg: "#737373",
-  accent: "#f5f5f5",
-  accentFg: "#171717",
+  background: "#EAECF8",
+  // surface-raised (light page body)
+  foreground: "#12131E",
+  // content-primary
+  card: "#FFFFFF",
+  //       surface-overlay
+  cardFg: "#12131E",
+  popover: "#FFFFFF",
+  popoverFg: "#12131E",
+  primary: "#17B581",
+  //    brand green (light)
+  primaryFg: "#FFFFFF",
+  secondary: "#E4E6F6",
+  //  neutral surface (bg-secondary utility is brand violet via app token)
+  secondaryFg: "#12131E",
+  muted: "#F6F7FD",
+  //      surface-elevated
+  mutedFg: "#464A69",
+  //    content-secondary
+  accent: "#E4E6F6",
+  //     surface-high
+  accentFg: "#12131E",
   destructive: "#e7000b",
-  border: "#e5e5e5",
-  input: "#e5e5e5",
-  ring: "#a1a1a1",
+  border: "#C8CBE0",
+  //     border-default
+  input: "#C8CBE0",
+  ring: "#17B581",
   chart1: "#2BEE79",
   chart2: "#F6C343",
   chart3: "#F7931A",
@@ -25,30 +34,37 @@ var lightSemanticColors = {
   chart5: "#DD352E"
 };
 var darkSemanticColors = {
-  background: "#0A1326",
-  foreground: "#ffffff",
+  background: "#12131C",
+  // surface-base (deepest)
+  foreground: "#E8E9F2",
+  // content-primary (cool white)
   border: "rgba(255, 255, 255, 0.10)",
   input: "rgba(255, 255, 255, 0.15)",
   destructive: "hsl(0 62% 50%)",
   secondary: "#16273F",
-  secondaryFg: "#ffffff",
-  muted: "#0F1C33",
+  // neutral surface (bg-secondary utility is brand violet via app token)
+  secondaryFg: "#E8E9F2",
+  muted: "#181924",
+  //     surface-raised
   mutedFg: "rgba(255, 255, 255, 0.55)",
-  primary: "#2BEE79",
-  primaryFg: "#051B10",
-  accent: "#16273F",
-  accentFg: "#ffffff",
-  ring: "#2BEE79",
-  card: "#0F1C33",
-  cardFg: "#ffffff",
-  popover: "#16273F",
-  popoverFg: "#ffffff",
+  primary: "#15E99A",
+  //   brand green (dark)
+  primaryFg: "#12131C",
+  accent: "#323448",
+  //    surface-elevated
+  accentFg: "#E8E9F2",
+  ring: "#15E99A",
+  card: "#242638",
+  //      surface-overlay (card)
+  cardFg: "#E8E9F2",
+  popover: "#242638",
+  popoverFg: "#E8E9F2",
   chart1: "#2BEE79",
   chart2: "#F6C343",
   chart3: "#F7931A",
   chart4: "#7C3AED",
   chart5: "#DD352E",
-  semanticBackground: "#0F1C33",
+  semanticBackground: "#242638",
   semanticBorder: "rgba(255, 255, 255, 0.10)"
 };
 var colors = {
@@ -136,6 +152,91 @@ var colors = {
   }
 };
 
+// src/tokens/app-semantic.ts
+var appSemanticDark = {
+  // Body is notably darker than cards — clear depth without full-black.
+  "surface-base": "18 19 28",
+  //  #12131C — deepest bg, sidebar
+  "surface-raised": "24 25 36",
+  // #181924 — page body bg
+  "surface-overlay": "36 38 56",
+  // #242638 — card bg (~14 lighter than body)
+  "surface-elevated": "50 52 72",
+  // #323448 — sections inside cards
+  "surface-high": "66 68 90",
+  //    #42445A — hover/active highlights
+  primary: "21 233 154",
+  //         #15E99A
+  "primary-emphasis": "18 201 126",
+  // #12C97E
+  "primary-foreground": "18 19 28",
+  secondary: "139 92 246",
+  //       #8B5CF6
+  "secondary-emphasis": "124 58 237",
+  "secondary-foreground": "255 255 255",
+  "content-primary": "232 233 242",
+  // #E8E9F2 — slightly cool white
+  "content-secondary": "142 146 172",
+  // #8E92AC
+  "content-tertiary": "88 92 116",
+  // #585C74
+  "content-inverse": "18 19 28",
+  "border-subtle": "40 42 60",
+  //   #282A3C
+  "border-default": "54 56 76",
+  //  #36384C
+  "border-strong": "21 233 154",
+  "status-success": "34 197 94",
+  "status-danger": "248 113 113",
+  "status-warning": "245 158 11",
+  "status-info": "56 189 248",
+  divider: "86 89 108"
+  //          #56596C
+};
+var appSemanticLight = {
+  // Cards = white on a cool-gray page for clear depth.
+  "surface-base": "218 220 234",
+  // #DADCEA — sidebar/deep backgrounds
+  "surface-raised": "234 236 248",
+  // #EAECF8 — page body bg
+  "surface-overlay": "255 255 255",
+  // #FFFFFF — card bg (white)
+  "surface-elevated": "246 247 253",
+  // #F6F7FD — sections inside cards
+  "surface-high": "228 230 246",
+  // #E4E6F6 — hover/active highlights
+  primary: "23 181 129",
+  //         #17B581
+  "primary-emphasis": "19 138 100",
+  // #138A64
+  "primary-foreground": "255 255 255",
+  secondary: "111 50 255",
+  //       #6F32FF
+  "secondary-emphasis": "90 31 229",
+  // #5A1FE5
+  "secondary-foreground": "255 255 255",
+  "content-primary": "18 19 30",
+  //  #12131E
+  "content-secondary": "70 74 105",
+  // #464A69
+  "content-tertiary": "118 122 152",
+  // #767A98
+  "content-inverse": "255 255 255",
+  "border-subtle": "218 220 238",
+  // #DADCEE
+  "border-default": "200 203 224",
+  // #C8CBE0
+  "border-strong": "23 181 129",
+  "status-success": "22 163 74",
+  "status-danger": "220 38 38",
+  "status-warning": "217 119 6",
+  "status-info": "2 132 199",
+  divider: "200 203 224"
+  //         #C8CBE0
+};
+var appStatusSubtleAlpha = "0.15";
+var appSemanticOrder = Object.keys(appSemanticDark);
+
 // src/tokens/typography.ts
 var fontFamily = {
   display: "'Satoshi', system-ui, -apple-system, sans-serif",
@@ -438,6 +539,10 @@ function makeTheme(mode) {
 }
 export {
   animation,
+  appSemanticDark,
+  appSemanticLight,
+  appSemanticOrder,
+  appStatusSubtleAlpha,
   colors,
   fontFamily,
   fontWeight,

package/dist/web/index.cjs

@@ -120,6 +120,7 @@ __export(web_exports, {
   PaidOverlay: () => PaidOverlay,
   QrCode: () => QrCode,
   RecoveryPhraseCard: () => RecoveryPhraseCard,
+  RgbNetworkIcon: () => RgbNetworkIcon,
   ScrollArea: () => ScrollArea,
   SecretRevealCard: () => SecretRevealCard,
   SectionHeader: () => SectionHeader,
@@ -2133,6 +2134,9 @@ function ArkadeNetworkIcon({
     }
   );
 }
+function RgbNetworkIcon({ className = "size-3.5", alt = "RGB" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: protocolIcons["RGB20"], alt, className: cn("object-contain", className) });
+}
 
 // src/web/components/action-tile.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
@@ -2862,7 +2866,7 @@ function getAccountNetworkUi(network) {
 }
 function AccountHeaderIcons({ accountId }) {
   if (accountId === "RGB") {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "flex size-10 items-center justify-center rounded-full bg-primary/15 shadow-inner", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { src: "/icons/rgb/rgb-logo.svg", alt: "RGB", className: "size-5 object-contain" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "flex size-10 items-center justify-center rounded-full bg-primary/15 shadow-inner", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RgbNetworkIcon, { className: "size-5" }) });
   }
   if (accountId === "SPARK") {
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "flex size-10 items-center justify-center rounded-full bg-info/10 shadow-inner", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", alt: "Spark", className: "size-5 object-contain" }) });
@@ -7064,30 +7068,37 @@ var import_react15 = require("react");
 
 // src/tokens/colors.ts
 var darkSemanticColors = {
-  background: "#0A1326",
-  foreground: "#ffffff",
+  background: "#12131C",
+  // surface-base (deepest)
+  foreground: "#E8E9F2",
+  // content-primary (cool white)
   border: "rgba(255, 255, 255, 0.10)",
   input: "rgba(255, 255, 255, 0.15)",
   destructive: "hsl(0 62% 50%)",
   secondary: "#16273F",
-  secondaryFg: "#ffffff",
-  muted: "#0F1C33",
+  // neutral surface (bg-secondary utility is brand violet via app token)
+  secondaryFg: "#E8E9F2",
+  muted: "#181924",
+  //     surface-raised
   mutedFg: "rgba(255, 255, 255, 0.55)",
-  primary: "#2BEE79",
-  primaryFg: "#051B10",
-  accent: "#16273F",
-  accentFg: "#ffffff",
-  ring: "#2BEE79",
-  card: "#0F1C33",
-  cardFg: "#ffffff",
-  popover: "#16273F",
-  popoverFg: "#ffffff",
+  primary: "#15E99A",
+  //   brand green (dark)
+  primaryFg: "#12131C",
+  accent: "#323448",
+  //    surface-elevated
+  accentFg: "#E8E9F2",
+  ring: "#15E99A",
+  card: "#242638",
+  //      surface-overlay (card)
+  cardFg: "#E8E9F2",
+  popover: "#242638",
+  popoverFg: "#E8E9F2",
   chart1: "#2BEE79",
   chart2: "#F6C343",
   chart3: "#F7931A",
   chart4: "#7C3AED",
   chart5: "#DD352E",
-  semanticBackground: "#0F1C33",
+  semanticBackground: "#242638",
   semanticBorder: "rgba(255, 255, 255, 0.10)"
 };
 var colors = {
@@ -8873,6 +8884,7 @@ function DepositInvoiceGeneration({
   PaidOverlay,
   QrCode,
   RecoveryPhraseCard,
+  RgbNetworkIcon,
   ScrollArea,
   SecretRevealCard,
   SectionHeader,

package/dist/web/index.d.cts

@@ -312,6 +312,12 @@ interface NetworkIconProps {
 declare function LightningNetworkIcon({ className, alt, }: NetworkIconProps): react_jsx_runtime.JSX.Element;
 declare function SparkNetworkIcon({ className, alt }: NetworkIconProps): react_jsx_runtime.JSX.Element;
 declare function ArkadeNetworkIcon({ className, alt, }: NetworkIconProps): react_jsx_runtime.JSX.Element;
+/**
+ * RGB logo. Unlike the other network icons (which reference host-app asset
+ * paths), this renders the RGB mark bundled with the library (protocolIcons),
+ * so consumers get the canonical logo without serving their own copy.
+ */
+declare function RgbNetworkIcon({ className, alt }: NetworkIconProps): react_jsx_runtime.JSX.Element;
 
 interface ActionTileProps {
     icon: ReactNode;
@@ -1699,4 +1705,4 @@ declare function getFallbackAssetIconUrl(seed: string): string;
  */
 declare function useAssetIcon(ticker: string, cdnBaseUrl?: string): string;
 
-export { AccountCapabilitiesCard, type AccountCapabilitiesCardProps, AccountChoiceChip, AccountHeaderIcons, AccountInfoGrid, AccountNetworkNotice, AccountNetworkPicker, AccountNetworkSelector, AccountNotice, type AccountSettingsNetwork, type AccountSettingsProtocol, AccountSettingsRow, AccountSettingsShell, AccountStatusPills, type AccountStatusTabItem, AccountStatusTabs, type AccountStatusTabsProps, ActionTile, type ActionTileProps, ActivityDetailRow, type ActivityDetailRowProps, ActivityFilterBar, type ActivityFilterBarProps, ActivityList, type ActivityListItem, type ActivityListProps, type ActivityNetworkFilterOption, type ActivityNetworkFilterValue, ActivityNetworkFilters, type ActivityNetworkFiltersProps, ActivityRow, type ActivityRowProps, type ActivityStatusOption, type ActivityTypeTabCounts, type ActivityTypeTabValue, ActivityTypeTabs, AlertBanner, type AmountDisplayOptions, type AmountDisplayUnit, AppIcon, type AppIconName, type AppIconProps, ArkadeNetworkIcon, AssetCard, type AssetCardProps, AssetIcon, AssetSelector, type AssetSelectorCategory, type AssetSelectorOption, type AssetSelectorProps, BalanceBreakdown, type BalanceBreakdownAccounts, type BalanceBreakdownAsset, type BalanceBreakdownNodeInfo, type BalanceBreakdownProps, BottomNav, type BottomNavItem, type BottomNavProps, BottomSheet, type BottomSheetAction, type BottomSheetProps, BtcUnifiedReceive, type BtcUnifiedReceiveAddress, type BtcUnifiedReceiveProps, type BtcUnifiedReceiveResult, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CopyIcon, type DepositAccountId, DepositAssetSelection, type DepositAssetSelectionProps, type DepositGeneratedAsset, DepositGeneratedView, type DepositGeneratedViewProps, type DepositGenerationController, type DepositInvoiceAsset, DepositInvoiceGeneration, type DepositInvoiceGenerationProps, type DepositNetworkConfigEntry, DepositNetworkDefaultModal, type DepositNetworkDefaultModalProps, type DepositNetworkKey, type DepositNetworkOption, DepositPreGeneration, type DepositPreGenerationAsset, type DepositPreGenerationProps, type DepositSelectionAsset, DepositSuccessScreen, type DepositSuccessScreenProps, type DepositTransferMethod, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisclosureCard, type DisclosureCardProps, DotPagination, type DotPaginationProps, type DotTone, ErrorBoundary, ErrorCard, type ErrorCardProps, ExpandIcon, ExtensionPageFrame, type ExtensionPageFrameProps, FadeOverlay, type FadeOverlayProps, FilterChipGroup, type FilterChipGroupProps, type FilterChipOption, FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, HeadlineGradient, type HeadlineGradientProps, Icon, type IconName, type IconProps, Icons, InfoPanel, type InfoPanelProps, InlineAction, InlineSelector, type InlineSelectorOption, type InlineSelectorProps, Input, type InputProps, InvoiceStatusBanner, KaleidoScopeHeroAnimation, type KaleidoScopeHeroAnimationProps, Label, LightningNetworkIcon, ListSkeletonRows, type ListSkeletonRowsProps, LoadingCard, type LoadingCardProps, MethodChoiceChip, MetricCard, type MetricCardProps, MobileHeroAnimation, type MobileHeroAnimationProps, NETWORK_CONFIG, NetworkBadge, type NetworkBadgeProps, type NetworkIconProps, NetworkInfoDisclosure, NetworkStatusChip, type NetworkStatusChipProps, type NetworkType, NumberInput, type NumberInputProps, OptionSelector, type OptionSelectorOption, type OptionSelectorProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, PaidOverlay, QrCode, type QrCodeProps, RecoveryPhraseCard, type RecoveryPhraseCardProps, ScrollArea, type ScrollAreaProps, SecretRevealCard, type SecretRevealCardProps, SectionHeader, type SectionHeaderProps, SectionLabel, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, type SelectableCardProps, SettingItem, SettingsActionButton, SettingsSectionCard, type SettingsSectionCardProps, SettingsSelectorRow, type SettingsSelectorRowProps, SettingsStatusPanel, SettingsTile, type SettingsTileProps, Skeleton, type SkeletonProps, type SkeletonTone, SparkNetworkIcon, StatusBadge, type StatusType, StepperNumberInput, type StepperNumberInputProps, SwapInputCard, type SwapInputCardProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, ToneBadge, type ToneBadgeProps, TransactionCard, type TransactionCardProps, TransferRouteCard, WalletAssetList, type WalletAssetListEmptyState, type WalletAssetListItem, type WalletAssetListProps, type WithdrawAddressType, WithdrawAmountInput, type WithdrawAmountInputProps, WithdrawConfirmation, type WithdrawConfirmationProps, type WithdrawConfirmationRgbInvoice, type WithdrawDecodedLnInvoice, type WithdrawDecodedRgbInvoice, WithdrawDestinationInput, type WithdrawDestinationInputProps, type WithdrawInvoiceAsset, WithdrawInvoiceInfo, type WithdrawInvoiceInfoLnInvoice, type WithdrawInvoiceInfoProps, type WithdrawInvoiceInfoRgbInvoice, type WithdrawLnurlPayData, type WithdrawRouteOption, WithdrawRouteSelector, type WithdrawRouteSelectorProps, type WithdrawRouteSummary, WithdrawSuccess, type WithdrawSuccessProps, buttonVariants, cn, formatDisplayAmountText, getAccountNetworkLabel, getAccountNetworkUi, getAccountStatusUi, getActivityNetworkFilterIcon, getAssetIconUrl, getFallbackAssetIconUrl, toast, useAssetIcon, useToast };
+export { AccountCapabilitiesCard, type AccountCapabilitiesCardProps, AccountChoiceChip, AccountHeaderIcons, AccountInfoGrid, AccountNetworkNotice, AccountNetworkPicker, AccountNetworkSelector, AccountNotice, type AccountSettingsNetwork, type AccountSettingsProtocol, AccountSettingsRow, AccountSettingsShell, AccountStatusPills, type AccountStatusTabItem, AccountStatusTabs, type AccountStatusTabsProps, ActionTile, type ActionTileProps, ActivityDetailRow, type ActivityDetailRowProps, ActivityFilterBar, type ActivityFilterBarProps, ActivityList, type ActivityListItem, type ActivityListProps, type ActivityNetworkFilterOption, type ActivityNetworkFilterValue, ActivityNetworkFilters, type ActivityNetworkFiltersProps, ActivityRow, type ActivityRowProps, type ActivityStatusOption, type ActivityTypeTabCounts, type ActivityTypeTabValue, ActivityTypeTabs, AlertBanner, type AmountDisplayOptions, type AmountDisplayUnit, AppIcon, type AppIconName, type AppIconProps, ArkadeNetworkIcon, AssetCard, type AssetCardProps, AssetIcon, AssetSelector, type AssetSelectorCategory, type AssetSelectorOption, type AssetSelectorProps, BalanceBreakdown, type BalanceBreakdownAccounts, type BalanceBreakdownAsset, type BalanceBreakdownNodeInfo, type BalanceBreakdownProps, BottomNav, type BottomNavItem, type BottomNavProps, BottomSheet, type BottomSheetAction, type BottomSheetProps, BtcUnifiedReceive, type BtcUnifiedReceiveAddress, type BtcUnifiedReceiveProps, type BtcUnifiedReceiveResult, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CopyIcon, type DepositAccountId, DepositAssetSelection, type DepositAssetSelectionProps, type DepositGeneratedAsset, DepositGeneratedView, type DepositGeneratedViewProps, type DepositGenerationController, type DepositInvoiceAsset, DepositInvoiceGeneration, type DepositInvoiceGenerationProps, type DepositNetworkConfigEntry, DepositNetworkDefaultModal, type DepositNetworkDefaultModalProps, type DepositNetworkKey, type DepositNetworkOption, DepositPreGeneration, type DepositPreGenerationAsset, type DepositPreGenerationProps, type DepositSelectionAsset, DepositSuccessScreen, type DepositSuccessScreenProps, type DepositTransferMethod, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisclosureCard, type DisclosureCardProps, DotPagination, type DotPaginationProps, type DotTone, ErrorBoundary, ErrorCard, type ErrorCardProps, ExpandIcon, ExtensionPageFrame, type ExtensionPageFrameProps, FadeOverlay, type FadeOverlayProps, FilterChipGroup, type FilterChipGroupProps, type FilterChipOption, FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, HeadlineGradient, type HeadlineGradientProps, Icon, type IconName, type IconProps, Icons, InfoPanel, type InfoPanelProps, InlineAction, InlineSelector, type InlineSelectorOption, type InlineSelectorProps, Input, type InputProps, InvoiceStatusBanner, KaleidoScopeHeroAnimation, type KaleidoScopeHeroAnimationProps, Label, LightningNetworkIcon, ListSkeletonRows, type ListSkeletonRowsProps, LoadingCard, type LoadingCardProps, MethodChoiceChip, MetricCard, type MetricCardProps, MobileHeroAnimation, type MobileHeroAnimationProps, NETWORK_CONFIG, NetworkBadge, type NetworkBadgeProps, type NetworkIconProps, NetworkInfoDisclosure, NetworkStatusChip, type NetworkStatusChipProps, type NetworkType, NumberInput, type NumberInputProps, OptionSelector, type OptionSelectorOption, type OptionSelectorProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, PaidOverlay, QrCode, type QrCodeProps, RecoveryPhraseCard, type RecoveryPhraseCardProps, RgbNetworkIcon, ScrollArea, type ScrollAreaProps, SecretRevealCard, type SecretRevealCardProps, SectionHeader, type SectionHeaderProps, SectionLabel, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, type SelectableCardProps, SettingItem, SettingsActionButton, SettingsSectionCard, type SettingsSectionCardProps, SettingsSelectorRow, type SettingsSelectorRowProps, SettingsStatusPanel, SettingsTile, type SettingsTileProps, Skeleton, type SkeletonProps, type SkeletonTone, SparkNetworkIcon, StatusBadge, type StatusType, StepperNumberInput, type StepperNumberInputProps, SwapInputCard, type SwapInputCardProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, ToneBadge, type ToneBadgeProps, TransactionCard, type TransactionCardProps, TransferRouteCard, WalletAssetList, type WalletAssetListEmptyState, type WalletAssetListItem, type WalletAssetListProps, type WithdrawAddressType, WithdrawAmountInput, type WithdrawAmountInputProps, WithdrawConfirmation, type WithdrawConfirmationProps, type WithdrawConfirmationRgbInvoice, type WithdrawDecodedLnInvoice, type WithdrawDecodedRgbInvoice, WithdrawDestinationInput, type WithdrawDestinationInputProps, type WithdrawInvoiceAsset, WithdrawInvoiceInfo, type WithdrawInvoiceInfoLnInvoice, type WithdrawInvoiceInfoProps, type WithdrawInvoiceInfoRgbInvoice, type WithdrawLnurlPayData, type WithdrawRouteOption, WithdrawRouteSelector, type WithdrawRouteSelectorProps, type WithdrawRouteSummary, WithdrawSuccess, type WithdrawSuccessProps, buttonVariants, cn, formatDisplayAmountText, getAccountNetworkLabel, getAccountNetworkUi, getAccountStatusUi, getActivityNetworkFilterIcon, getAssetIconUrl, getFallbackAssetIconUrl, toast, useAssetIcon, useToast };

package/dist/web/index.d.ts

@@ -312,6 +312,12 @@ interface NetworkIconProps {
 declare function LightningNetworkIcon({ className, alt, }: NetworkIconProps): react_jsx_runtime.JSX.Element;
 declare function SparkNetworkIcon({ className, alt }: NetworkIconProps): react_jsx_runtime.JSX.Element;
 declare function ArkadeNetworkIcon({ className, alt, }: NetworkIconProps): react_jsx_runtime.JSX.Element;
+/**
+ * RGB logo. Unlike the other network icons (which reference host-app asset
+ * paths), this renders the RGB mark bundled with the library (protocolIcons),
+ * so consumers get the canonical logo without serving their own copy.
+ */
+declare function RgbNetworkIcon({ className, alt }: NetworkIconProps): react_jsx_runtime.JSX.Element;
 
 interface ActionTileProps {
     icon: ReactNode;
@@ -1699,4 +1705,4 @@ declare function getFallbackAssetIconUrl(seed: string): string;
  */
 declare function useAssetIcon(ticker: string, cdnBaseUrl?: string): string;
 
-export { AccountCapabilitiesCard, type AccountCapabilitiesCardProps, AccountChoiceChip, AccountHeaderIcons, AccountInfoGrid, AccountNetworkNotice, AccountNetworkPicker, AccountNetworkSelector, AccountNotice, type AccountSettingsNetwork, type AccountSettingsProtocol, AccountSettingsRow, AccountSettingsShell, AccountStatusPills, type AccountStatusTabItem, AccountStatusTabs, type AccountStatusTabsProps, ActionTile, type ActionTileProps, ActivityDetailRow, type ActivityDetailRowProps, ActivityFilterBar, type ActivityFilterBarProps, ActivityList, type ActivityListItem, type ActivityListProps, type ActivityNetworkFilterOption, type ActivityNetworkFilterValue, ActivityNetworkFilters, type ActivityNetworkFiltersProps, ActivityRow, type ActivityRowProps, type ActivityStatusOption, type ActivityTypeTabCounts, type ActivityTypeTabValue, ActivityTypeTabs, AlertBanner, type AmountDisplayOptions, type AmountDisplayUnit, AppIcon, type AppIconName, type AppIconProps, ArkadeNetworkIcon, AssetCard, type AssetCardProps, AssetIcon, AssetSelector, type AssetSelectorCategory, type AssetSelectorOption, type AssetSelectorProps, BalanceBreakdown, type BalanceBreakdownAccounts, type BalanceBreakdownAsset, type BalanceBreakdownNodeInfo, type BalanceBreakdownProps, BottomNav, type BottomNavItem, type BottomNavProps, BottomSheet, type BottomSheetAction, type BottomSheetProps, BtcUnifiedReceive, type BtcUnifiedReceiveAddress, type BtcUnifiedReceiveProps, type BtcUnifiedReceiveResult, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CopyIcon, type DepositAccountId, DepositAssetSelection, type DepositAssetSelectionProps, type DepositGeneratedAsset, DepositGeneratedView, type DepositGeneratedViewProps, type DepositGenerationController, type DepositInvoiceAsset, DepositInvoiceGeneration, type DepositInvoiceGenerationProps, type DepositNetworkConfigEntry, DepositNetworkDefaultModal, type DepositNetworkDefaultModalProps, type DepositNetworkKey, type DepositNetworkOption, DepositPreGeneration, type DepositPreGenerationAsset, type DepositPreGenerationProps, type DepositSelectionAsset, DepositSuccessScreen, type DepositSuccessScreenProps, type DepositTransferMethod, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisclosureCard, type DisclosureCardProps, DotPagination, type DotPaginationProps, type DotTone, ErrorBoundary, ErrorCard, type ErrorCardProps, ExpandIcon, ExtensionPageFrame, type ExtensionPageFrameProps, FadeOverlay, type FadeOverlayProps, FilterChipGroup, type FilterChipGroupProps, type FilterChipOption, FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, HeadlineGradient, type HeadlineGradientProps, Icon, type IconName, type IconProps, Icons, InfoPanel, type InfoPanelProps, InlineAction, InlineSelector, type InlineSelectorOption, type InlineSelectorProps, Input, type InputProps, InvoiceStatusBanner, KaleidoScopeHeroAnimation, type KaleidoScopeHeroAnimationProps, Label, LightningNetworkIcon, ListSkeletonRows, type ListSkeletonRowsProps, LoadingCard, type LoadingCardProps, MethodChoiceChip, MetricCard, type MetricCardProps, MobileHeroAnimation, type MobileHeroAnimationProps, NETWORK_CONFIG, NetworkBadge, type NetworkBadgeProps, type NetworkIconProps, NetworkInfoDisclosure, NetworkStatusChip, type NetworkStatusChipProps, type NetworkType, NumberInput, type NumberInputProps, OptionSelector, type OptionSelectorOption, type OptionSelectorProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, PaidOverlay, QrCode, type QrCodeProps, RecoveryPhraseCard, type RecoveryPhraseCardProps, ScrollArea, type ScrollAreaProps, SecretRevealCard, type SecretRevealCardProps, SectionHeader, type SectionHeaderProps, SectionLabel, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, type SelectableCardProps, SettingItem, SettingsActionButton, SettingsSectionCard, type SettingsSectionCardProps, SettingsSelectorRow, type SettingsSelectorRowProps, SettingsStatusPanel, SettingsTile, type SettingsTileProps, Skeleton, type SkeletonProps, type SkeletonTone, SparkNetworkIcon, StatusBadge, type StatusType, StepperNumberInput, type StepperNumberInputProps, SwapInputCard, type SwapInputCardProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, ToneBadge, type ToneBadgeProps, TransactionCard, type TransactionCardProps, TransferRouteCard, WalletAssetList, type WalletAssetListEmptyState, type WalletAssetListItem, type WalletAssetListProps, type WithdrawAddressType, WithdrawAmountInput, type WithdrawAmountInputProps, WithdrawConfirmation, type WithdrawConfirmationProps, type WithdrawConfirmationRgbInvoice, type WithdrawDecodedLnInvoice, type WithdrawDecodedRgbInvoice, WithdrawDestinationInput, type WithdrawDestinationInputProps, type WithdrawInvoiceAsset, WithdrawInvoiceInfo, type WithdrawInvoiceInfoLnInvoice, type WithdrawInvoiceInfoProps, type WithdrawInvoiceInfoRgbInvoice, type WithdrawLnurlPayData, type WithdrawRouteOption, WithdrawRouteSelector, type WithdrawRouteSelectorProps, type WithdrawRouteSummary, WithdrawSuccess, type WithdrawSuccessProps, buttonVariants, cn, formatDisplayAmountText, getAccountNetworkLabel, getAccountNetworkUi, getAccountStatusUi, getActivityNetworkFilterIcon, getAssetIconUrl, getFallbackAssetIconUrl, toast, useAssetIcon, useToast };
+export { AccountCapabilitiesCard, type AccountCapabilitiesCardProps, AccountChoiceChip, AccountHeaderIcons, AccountInfoGrid, AccountNetworkNotice, AccountNetworkPicker, AccountNetworkSelector, AccountNotice, type AccountSettingsNetwork, type AccountSettingsProtocol, AccountSettingsRow, AccountSettingsShell, AccountStatusPills, type AccountStatusTabItem, AccountStatusTabs, type AccountStatusTabsProps, ActionTile, type ActionTileProps, ActivityDetailRow, type ActivityDetailRowProps, ActivityFilterBar, type ActivityFilterBarProps, ActivityList, type ActivityListItem, type ActivityListProps, type ActivityNetworkFilterOption, type ActivityNetworkFilterValue, ActivityNetworkFilters, type ActivityNetworkFiltersProps, ActivityRow, type ActivityRowProps, type ActivityStatusOption, type ActivityTypeTabCounts, type ActivityTypeTabValue, ActivityTypeTabs, AlertBanner, type AmountDisplayOptions, type AmountDisplayUnit, AppIcon, type AppIconName, type AppIconProps, ArkadeNetworkIcon, AssetCard, type AssetCardProps, AssetIcon, AssetSelector, type AssetSelectorCategory, type AssetSelectorOption, type AssetSelectorProps, BalanceBreakdown, type BalanceBreakdownAccounts, type BalanceBreakdownAsset, type BalanceBreakdownNodeInfo, type BalanceBreakdownProps, BottomNav, type BottomNavItem, type BottomNavProps, BottomSheet, type BottomSheetAction, type BottomSheetProps, BtcUnifiedReceive, type BtcUnifiedReceiveAddress, type BtcUnifiedReceiveProps, type BtcUnifiedReceiveResult, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CopyIcon, type DepositAccountId, DepositAssetSelection, type DepositAssetSelectionProps, type DepositGeneratedAsset, DepositGeneratedView, type DepositGeneratedViewProps, type DepositGenerationController, type DepositInvoiceAsset, DepositInvoiceGeneration, type DepositInvoiceGenerationProps, type DepositNetworkConfigEntry, DepositNetworkDefaultModal, type DepositNetworkDefaultModalProps, type DepositNetworkKey, type DepositNetworkOption, DepositPreGeneration, type DepositPreGenerationAsset, type DepositPreGenerationProps, type DepositSelectionAsset, DepositSuccessScreen, type DepositSuccessScreenProps, type DepositTransferMethod, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisclosureCard, type DisclosureCardProps, DotPagination, type DotPaginationProps, type DotTone, ErrorBoundary, ErrorCard, type ErrorCardProps, ExpandIcon, ExtensionPageFrame, type ExtensionPageFrameProps, FadeOverlay, type FadeOverlayProps, FilterChipGroup, type FilterChipGroupProps, type FilterChipOption, FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, HeadlineGradient, type HeadlineGradientProps, Icon, type IconName, type IconProps, Icons, InfoPanel, type InfoPanelProps, InlineAction, InlineSelector, type InlineSelectorOption, type InlineSelectorProps, Input, type InputProps, InvoiceStatusBanner, KaleidoScopeHeroAnimation, type KaleidoScopeHeroAnimationProps, Label, LightningNetworkIcon, ListSkeletonRows, type ListSkeletonRowsProps, LoadingCard, type LoadingCardProps, MethodChoiceChip, MetricCard, type MetricCardProps, MobileHeroAnimation, type MobileHeroAnimationProps, NETWORK_CONFIG, NetworkBadge, type NetworkBadgeProps, type NetworkIconProps, NetworkInfoDisclosure, NetworkStatusChip, type NetworkStatusChipProps, type NetworkType, NumberInput, type NumberInputProps, OptionSelector, type OptionSelectorOption, type OptionSelectorProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, PaidOverlay, QrCode, type QrCodeProps, RecoveryPhraseCard, type RecoveryPhraseCardProps, RgbNetworkIcon, ScrollArea, type ScrollAreaProps, SecretRevealCard, type SecretRevealCardProps, SectionHeader, type SectionHeaderProps, SectionLabel, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, type SelectableCardProps, SettingItem, SettingsActionButton, SettingsSectionCard, type SettingsSectionCardProps, SettingsSelectorRow, type SettingsSelectorRowProps, SettingsStatusPanel, SettingsTile, type SettingsTileProps, Skeleton, type SkeletonProps, type SkeletonTone, SparkNetworkIcon, StatusBadge, type StatusType, StepperNumberInput, type StepperNumberInputProps, SwapInputCard, type SwapInputCardProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, ToneBadge, type ToneBadgeProps, TransactionCard, type TransactionCardProps, TransferRouteCard, WalletAssetList, type WalletAssetListEmptyState, type WalletAssetListItem, type WalletAssetListProps, type WithdrawAddressType, WithdrawAmountInput, type WithdrawAmountInputProps, WithdrawConfirmation, type WithdrawConfirmationProps, type WithdrawConfirmationRgbInvoice, type WithdrawDecodedLnInvoice, type WithdrawDecodedRgbInvoice, WithdrawDestinationInput, type WithdrawDestinationInputProps, type WithdrawInvoiceAsset, WithdrawInvoiceInfo, type WithdrawInvoiceInfoLnInvoice, type WithdrawInvoiceInfoProps, type WithdrawInvoiceInfoRgbInvoice, type WithdrawLnurlPayData, type WithdrawRouteOption, WithdrawRouteSelector, type WithdrawRouteSelectorProps, type WithdrawRouteSummary, WithdrawSuccess, type WithdrawSuccessProps, buttonVariants, cn, formatDisplayAmountText, getAccountNetworkLabel, getAccountNetworkUi, getAccountStatusUi, getActivityNetworkFilterIcon, getAssetIconUrl, getFallbackAssetIconUrl, toast, useAssetIcon, useToast };

package/dist/web/index.js

@@ -1956,6 +1956,9 @@ function ArkadeNetworkIcon({
     }
   );
 }
+function RgbNetworkIcon({ className = "size-3.5", alt = "RGB" }) {
+  return /* @__PURE__ */ jsx24("img", { src: protocolIcons["RGB20"], alt, className: cn("object-contain", className) });
+}
 
 // src/web/components/action-tile.tsx
 import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -2685,7 +2688,7 @@ function getAccountNetworkUi(network) {
 }
 function AccountHeaderIcons({ accountId }) {
   if (accountId === "RGB") {
-    return /* @__PURE__ */ jsx33("span", { className: "flex size-10 items-center justify-center rounded-full bg-primary/15 shadow-inner", children: /* @__PURE__ */ jsx33("img", { src: "/icons/rgb/rgb-logo.svg", alt: "RGB", className: "size-5 object-contain" }) });
+    return /* @__PURE__ */ jsx33("span", { className: "flex size-10 items-center justify-center rounded-full bg-primary/15 shadow-inner", children: /* @__PURE__ */ jsx33(RgbNetworkIcon, { className: "size-5" }) });
   }
   if (accountId === "SPARK") {
     return /* @__PURE__ */ jsx33("span", { className: "flex size-10 items-center justify-center rounded-full bg-info/10 shadow-inner", children: /* @__PURE__ */ jsx33("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", alt: "Spark", className: "size-5 object-contain" }) });
@@ -6887,30 +6890,37 @@ import { useState as useState14 } from "react";
 
 // src/tokens/colors.ts
 var darkSemanticColors = {
-  background: "#0A1326",
-  foreground: "#ffffff",
+  background: "#12131C",
+  // surface-base (deepest)
+  foreground: "#E8E9F2",
+  // content-primary (cool white)
   border: "rgba(255, 255, 255, 0.10)",
   input: "rgba(255, 255, 255, 0.15)",
   destructive: "hsl(0 62% 50%)",
   secondary: "#16273F",
-  secondaryFg: "#ffffff",
-  muted: "#0F1C33",
+  // neutral surface (bg-secondary utility is brand violet via app token)
+  secondaryFg: "#E8E9F2",
+  muted: "#181924",
+  //     surface-raised
   mutedFg: "rgba(255, 255, 255, 0.55)",
-  primary: "#2BEE79",
-  primaryFg: "#051B10",
-  accent: "#16273F",
-  accentFg: "#ffffff",
-  ring: "#2BEE79",
-  card: "#0F1C33",
-  cardFg: "#ffffff",
-  popover: "#16273F",
-  popoverFg: "#ffffff",
+  primary: "#15E99A",
+  //   brand green (dark)
+  primaryFg: "#12131C",
+  accent: "#323448",
+  //    surface-elevated
+  accentFg: "#E8E9F2",
+  ring: "#15E99A",
+  card: "#242638",
+  //      surface-overlay (card)
+  cardFg: "#E8E9F2",
+  popover: "#242638",
+  popoverFg: "#E8E9F2",
   chart1: "#2BEE79",
   chart2: "#F6C343",
   chart3: "#F7931A",
   chart4: "#7C3AED",
   chart5: "#DD352E",
-  semanticBackground: "#0F1C33",
+  semanticBackground: "#242638",
   semanticBorder: "rgba(255, 255, 255, 0.10)"
 };
 var colors = {
@@ -8695,6 +8705,7 @@ export {
   PaidOverlay,
   QrCode,
   RecoveryPhraseCard,
+  RgbNetworkIcon,
   ScrollArea,
   SecretRevealCard,
   SectionHeader,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.67",
+  "version": "0.1.69",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",