kaleido-ui 0.1.86 → 0.1.88

package/dist/tokens/index.cjs

@@ -30,6 +30,7 @@ __export(tokens_exports, {
   fontWeight: () => fontWeight,
   gradient: () => gradient,
   iconBoxSize: () => iconBoxSize,
+  iconColors: () => iconColors,
   iconSize: () => iconSize,
   keyframes: () => keyframes,
   layer: () => layer,
@@ -605,6 +606,37 @@ var themes = { light, dark };
 function makeTheme(mode) {
   return themes[mode];
 }
+
+// src/tokens/icon-colors.generated.ts
+var iconColors = {
+  "arbitrum": "#1C3249",
+  "avalanche": "#E84142",
+  "bitcoin": "#F7931A",
+  "bnb": "#F3BA2E",
+  "btc": "#F7931A",
+  "eth": "#ECEFF0",
+  "ethereum": "#ECEFF0",
+  "hypercore": "#072723",
+  "hyperevm": "#072723",
+  "lightning": "#F7931A",
+  "litecoin": "#385D9A",
+  "monad": "#6E54FF",
+  "optimism": "#FE0420",
+  "plasma": "#162F29",
+  "polygon": "#843BED",
+  "sol": "#2BD9B9",
+  "solana": "#9548FC",
+  "tempo": "#BFBFBF",
+  "ton": "#30A1F5",
+  "tron": "#FF0013",
+  "trx": "#FF0013",
+  "usdb": "#01875A",
+  "usdc": "#2775C9",
+  "usdce": "#2775CA",
+  "usdt": "#26A17B",
+  "xrp": "#23292F",
+  "zcash": "#ECB449"
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   animation,
@@ -617,6 +649,7 @@ function makeTheme(mode) {
   fontWeight,
   gradient,
   iconBoxSize,
+  iconColors,
   iconSize,
   keyframes,
   layer,

package/dist/tokens/index.d.cts

@@ -571,4 +571,6 @@ declare const themes: Record<ThemeMode, KaleidoTheme>;
 /** Resolve the full palette for a mode. */
 declare function makeTheme(mode: ThemeMode): KaleidoTheme;
 
-export { type AppSemanticToken, type KaleidoTheme, type NativeTypeLevel, type ThemeMode, animation, appSemanticDark, appSemanticLight, appSemanticOrder, appStatusSubtleAlpha, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconSize, keyframes, layer, letterSpacing, lightSemanticColors, makeTheme, nativeType, radius, shadow, sizing, themes, transition, typeScale };
+declare const iconColors: Record<string, string>;
+
+export { type AppSemanticToken, type KaleidoTheme, type NativeTypeLevel, type ThemeMode, animation, appSemanticDark, appSemanticLight, appSemanticOrder, appStatusSubtleAlpha, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconColors, iconSize, keyframes, layer, letterSpacing, lightSemanticColors, makeTheme, nativeType, radius, shadow, sizing, themes, transition, typeScale };

package/dist/tokens/index.d.ts

@@ -571,4 +571,6 @@ declare const themes: Record<ThemeMode, KaleidoTheme>;
 /** Resolve the full palette for a mode. */
 declare function makeTheme(mode: ThemeMode): KaleidoTheme;
 
-export { type AppSemanticToken, type KaleidoTheme, type NativeTypeLevel, type ThemeMode, animation, appSemanticDark, appSemanticLight, appSemanticOrder, appStatusSubtleAlpha, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconSize, keyframes, layer, letterSpacing, lightSemanticColors, makeTheme, nativeType, radius, shadow, sizing, themes, transition, typeScale };
+declare const iconColors: Record<string, string>;
+
+export { type AppSemanticToken, type KaleidoTheme, type NativeTypeLevel, type ThemeMode, animation, appSemanticDark, appSemanticLight, appSemanticOrder, appStatusSubtleAlpha, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconColors, iconSize, keyframes, layer, letterSpacing, lightSemanticColors, makeTheme, nativeType, radius, shadow, sizing, themes, transition, typeScale };

package/dist/tokens/index.js

@@ -557,6 +557,37 @@ var themes = { light, dark };
 function makeTheme(mode) {
   return themes[mode];
 }
+
+// src/tokens/icon-colors.generated.ts
+var iconColors = {
+  "arbitrum": "#1C3249",
+  "avalanche": "#E84142",
+  "bitcoin": "#F7931A",
+  "bnb": "#F3BA2E",
+  "btc": "#F7931A",
+  "eth": "#ECEFF0",
+  "ethereum": "#ECEFF0",
+  "hypercore": "#072723",
+  "hyperevm": "#072723",
+  "lightning": "#F7931A",
+  "litecoin": "#385D9A",
+  "monad": "#6E54FF",
+  "optimism": "#FE0420",
+  "plasma": "#162F29",
+  "polygon": "#843BED",
+  "sol": "#2BD9B9",
+  "solana": "#9548FC",
+  "tempo": "#BFBFBF",
+  "ton": "#30A1F5",
+  "tron": "#FF0013",
+  "trx": "#FF0013",
+  "usdb": "#01875A",
+  "usdc": "#2775C9",
+  "usdce": "#2775CA",
+  "usdt": "#26A17B",
+  "xrp": "#23292F",
+  "zcash": "#ECB449"
+};
 export {
   animation,
   appSemanticDark,
@@ -568,6 +599,7 @@ export {
   fontWeight,
   gradient,
   iconBoxSize,
+  iconColors,
   iconSize,
   keyframes,
   layer,

package/dist/web/index.cjs

@@ -3749,6 +3749,16 @@ var import_jsx_runtime38 = require("react/jsx-runtime");
 function NetworkMiniBadge({ iconUrl, label }) {
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn(iconBadgeOverlayClass, "overflow-hidden"), children: iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { src: iconUrl, alt: label ?? "", className: "h-full w-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex h-full w-full items-center justify-center bg-muted text-xxs font-bold uppercase leading-none text-muted-foreground", children: label?.charAt(0) }) });
 }
+function readableTagColor(color) {
+  const raw = color.replace("#", "");
+  const hex = raw.length === 3 ? raw.split("").map((char) => char + char).join("") : raw;
+  if (!/^[0-9a-fA-F]{6}$/.test(hex)) return color;
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+  return luminance < 0.45 ? `color-mix(in srgb, ${color} 45%, white)` : color;
+}
 function AssetSelector({
   label,
   selectedTicker,
@@ -3840,7 +3850,7 @@ function AssetSelector({
               ),
               style: option.networkTag.color ? {
                 backgroundColor: `color-mix(in srgb, ${option.networkTag.color} 15%, transparent)`,
-                color: option.networkTag.color
+                color: readableTagColor(option.networkTag.color)
               } : void 0,
               children: option.networkTag.label
             }

package/dist/web/index.js

@@ -3568,6 +3568,16 @@ import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs25 } from "react/jsx-r
 function NetworkMiniBadge({ iconUrl, label }) {
   return /* @__PURE__ */ jsx38("span", { className: cn(iconBadgeOverlayClass, "overflow-hidden"), children: iconUrl ? /* @__PURE__ */ jsx38("img", { src: iconUrl, alt: label ?? "", className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsx38("span", { className: "flex h-full w-full items-center justify-center bg-muted text-xxs font-bold uppercase leading-none text-muted-foreground", children: label?.charAt(0) }) });
 }
+function readableTagColor(color) {
+  const raw = color.replace("#", "");
+  const hex = raw.length === 3 ? raw.split("").map((char) => char + char).join("") : raw;
+  if (!/^[0-9a-fA-F]{6}$/.test(hex)) return color;
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+  return luminance < 0.45 ? `color-mix(in srgb, ${color} 45%, white)` : color;
+}
 function AssetSelector({
   label,
   selectedTicker,
@@ -3659,7 +3669,7 @@ function AssetSelector({
               ),
               style: option.networkTag.color ? {
                 backgroundColor: `color-mix(in srgb, ${option.networkTag.color} 15%, transparent)`,
-                color: option.networkTag.color
+                color: readableTagColor(option.networkTag.color)
               } : void 0,
               children: option.networkTag.label
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.86",
+  "version": "0.1.88",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",
@@ -117,6 +117,7 @@
     "autoprefixer": "^10.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "pngjs": "^7.0.0",
     "postcss": "^8.4.49",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",