Ghost variant triggers an error with colorKit.RGB

[Exalyon]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

When using the ghost variant in Button (or other component like Dialog.close), I have the following error appears. :

[colorKit.RGB] An error occurred while attempting to convert the provided parameter into an `RGB` color. As a result, the default color "black" will be used instead.

I will try later on android and ios but at least the issues appears on the web.

Here is a link to reproducible example repository : https://github.com/Exalyon/heronative-ghost-variant-issue. It appears in this example in the index page. To create it, I used Expo as suggested by the react native documentation : https://reactnative.dev/docs/environment-setup.

I did not customize the default theme variable. The issues is displayed when the page has finished to load. I remain available if you need more information.

I did find other related Github issues but they do not fully address the problem :

• Warning / Error when using Button with variant Ghost #262
• Button ghost/outline variants on web: color-mix() in theme tokens breaks the Uniwind → culori → colorKit chain #390

Component Stack
  at Index (src/app/index.tsx:9:13)
  at WrappedScreenComponent (node_modules/expo-router/build/useScreens.js:194:16)
  at BaseRoute (node_modules/expo-router/build/useScreens.js:239:13)
  at SceneView (node_modules/@react-navigation/core/lib/module/SceneView.js:139:72)
  at render (node_modules/@react-navigation/core/lib/module/useDescriptors.js:108:36)
  at routes.reduce$argument_0 (node_modules/@react-navigation/core/lib/module/useDescriptors.js:140:27)
  at useDescriptors (node_modules/@react-navigation/core/lib/module/useDescriptors.js:137:30)
  at useNavigationBuilder (node_modules/@react-navigation/core/lib/module/useNavigationBuilder.js:560:21)
  at NativeStackNavigator (node_modules/expo-router/build/fork/native-stack/createNativeStackNavigator.js:47:110)
  at <anonymous> (node_modules/expo-router/build/layouts/withLayoutContext.js:158:11)
  at Object.assign$argument_0 (node_modules/expo-router/build/layouts/StackClient.js:464:13)
  at Root (src/app/_layout.tsx:13:9)
  at WrappedScreenComponent (node_modules/expo-router/build/useScreens.js:194:16)
  at BaseRoute (node_modules/expo-router/build/useScreens.js:239:13)
  at SceneView (node_modules/@react-navigation/core/lib/module/SceneView.js:139:72)
  at render (node_modules/@react-navigation/core/lib/module/useDescriptors.js:108:36)
  at routes.reduce$argument_0 (node_modules/@react-navigation/core/lib/module/useDescriptors.js:140:27)
  at useDescriptors (node_modules/@react-navigation/core/lib/module/useDescriptors.js:137:30)
  at useNavigationBuilder (node_modules/@react-navigation/core/lib/module/useNavigationBuilder.js:560:21)
  at Content (node_modules/expo-router/build/ExpoRoot.js:158:88)
  at ContextNavigator (node_modules/expo-router/build/ExpoRoot.js:144:13)
  at ExpoRoot (node_modules/expo-router/build/ExpoRoot.js:90:12)
  at App (node_modules/expo-router/build/qualified-entry.js:21:7)
  at WithDevTools (node_modules/expo/src/launch/withDevTools.web.tsx:11:9)

Call Stack
  at addLog (node_modules/@expo/log-box/src/Data/LogBoxData.tsx:205:30)
  at consoleErrorMiddleware (node_modules/@expo/log-box/src/LogBox.ts:103:14)
  at console.error (node_modules/@expo/log-box/src/LogBox.ts:33:25)
  at RGB (node_modules/heroui-native/lib/module/helpers/external/utils/color-kit/index.js:1210:13)
  at setAlpha (node_modules/heroui-native/lib/module/helpers/external/utils/color-kit/index.js:1779:12)
  at useMemo$argument_0 (node_modules/heroui-native/lib/module/components/button/button.js:55:25)
  at mountMemo (node_modules/react-dom/cjs/react-dom-client.development.js:8777:23)
  at HooksDispatcherOnMountInDEV.useMemo (node_modules/react-dom/cjs/react-dom-client.development.js:26216:18)
  at exports.useMemo (node_modules/react/cjs/react.development.js:1251:34)
  at forwardRef$argument_0 (node_modules/heroui-native/lib/module/components/button/button.js:44:36)
  at callComponent.react_stack_bottom_frame (node_modules/react-dom/cjs/react-dom-client.development.js:25904:20)
  at renderWithHooks (node_modules/react-dom/cjs/react-dom-client.development.js:7662:40)
  at updateForwardRef (node_modules/react-dom/cjs/react-dom-client.development.js:9724:19)
  at beginWork (node_modules/react-dom/cjs/react-dom-client.development.js:12117:18)
  at runWithFiberInDEV (node_modules/react-dom/cjs/react-dom-client.development.js:874:13)
  at performUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:17641:22)
  at workLoopConcurrentByScheduler (node_modules/react-dom/cjs/react-dom-client.development.js:17635:26)
  at renderRootConcurrent (node_modules/react-dom/cjs/react-dom-client.development.js:17617:15)
  at performWorkOnRoot (node_modules/react-dom/cjs/react-dom-client.development.js:16503:11)
  at performWorkOnRootViaSchedulerTask (node_modules/react-dom/cjs/react-dom-client.development.js:18957:24)
  at performWorkUntilDeadline (node_modules/scheduler/cjs/scheduler.development.js:45:56)
  at <anonymous> (node_modules/scheduler/cjs/scheduler.development.js:223:7)
  at <global> (node_modules/scheduler/cjs/scheduler.development.js:364:4)
  at loadModuleImplementation (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:248:36)
  at guardedLoadModule (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:163:16)
  at metroRequire (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:74:75)
  at <global> (node_modules/scheduler/index.js:6:20)
  at loadModuleImplementation (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:248:36)
  at guardedLoadModule (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:163:16)
  at metroRequire (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:74:75)
  at <anonymous> (node_modules/react-dom/cjs/react-dom-client.development.js:24190:28)
  at <global> (node_modules/react-dom/cjs/react-dom-client.development.js:28121:4)
  at loadModuleImplementation (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:248:36)
  at guardedLoadModule (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:163:16)
  at metroRequire (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:74:75)
  at <global> (node_modules/react-dom/client.js:37:20)
  at loadModuleImplementation (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:248:36)
  at guardedLoadModule (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:163:16)
  at metroRequire (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:74:75)
  at <global> (node_modules/react-native-web/dist/exports/render/index.js:12)
  at loadModuleImplementation (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:248:36)
  at guardedLoadModule (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:163:16)
  at metroRequire (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:74:75)
  at <global> (node_modules/react-native-web/dist/index.js:4)
  at loadModuleImplementation (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:248:36)
  at guardedLoadModule (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:163:16)
  at metroRequire (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:74:75)
  at <global> (node_modules/expo-router/build/ExpoRoot.js:39:48)
  at loadModuleImplementation (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:248:36)
  at guardedLoadModule (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:163:16)
  at metroRequire (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:74:75)
  at <global> (node_modules/expo-router/build/qualified-entry.js:15:27)
  at loadModuleImplementation (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:248:36)
  at guardedLoadModule (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:163:16)
  at metroRequire (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:74:75)
  at <global> (node_modules/expo-router/entry-classic.js:5)
  at loadModuleImplementation (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:248:36)
  at guardedLoadModule (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:163:16)
  at metroRequire (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:74:75)
  at <global> (node_modules/expo-router/entry.js:3)
  at loadModuleImplementation (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:248:36)
  at guardedLoadModule (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:156:27)
  at metroRequire (node_modules/expo/node_modules/@expo/cli/build/metro-require/require.js:74:75)
  at <unknown> (http://localhost:8082/node_modules/expo-router/entry.bundle)

Library version

1.0.2

Environment info

info Fetching system and libraries information...
System:
  OS: macOS 26.4.1
  CPU: (8) arm64 Apple M3
  Memory: 125.88 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 25.9.0
    path: /opt/homebrew/bin/node
  Yarn: Not Found
  npm:
    version: 11.12.1
    path: /opt/homebrew/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK: Not Found
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: /undefined
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.1.3
    wanted: ^20.1.3
  react:
    installed: 19.2.0
    wanted: 19.2.0
  react-native:
    installed: 0.83.6
    wanted: 0.83.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.85.3 is now available (your project is running on v0.83.6).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.85.3
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.83.6&to=0.85.3
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Steps to reproduce

1. Add a Button with the ghost variant

Reproducible example repository

https://github.com/Exalyon/heronative-ghost-variant-issue

[vvv-sss]

Hi @Exalyon, thanks for the clear repro!

We don't currently recommend HeroUI Native on web — see Platform Support. Several web-only issues (incl. #262, #390) share the same root cause.

The warning is non-critical: only the press-feedback highlight on ghost/outline falls back to black on web; the button still renders and works.

We'll revisit this when we start polishing the web build, which isn't on the immediate roadmap.