Support Alpha Channel in HWB Color for React Native 0.79.0

[alabsi91]

Description

React Native 0.79.0 introduced support for the modern HWB color format, aligning with the W3C CSS Color Module Level 4 specification. However, the current implementation lacks support for the alpha channel.

syntax: hwb(hue whiteness% blackness% / alpha).

Steps to reproduce

Define a style that uses an HWB color with an alpha channel, e.g.:

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'hwb(200 30% 20% / 0.5)', 
  },
});

Expected Behavior
The backgroundColor property should render the view with the correct HWB color and transparency (e.g., hwb(200 30% 20% / 0.5) as a semi-transparent blue).

Actual Behavior
The color is ignored.

React Native Version

0.79.0

Affected Platforms

Runtime - iOS

Output of npx @react-native-community/cli info

//

Stacktrace or Logs

//

Reproducer

//

Screenshots and Videos

No response

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:

• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template
• Otherwise send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.

[cortinico]

cc @NickGerleman

[NickGerleman]

Modern parsing stack correctly supports this, but is not shipped yet.

react-native/packages/react-native/ReactCommon/react/renderer/css/CSSColorFunction.h

Line 419 in d816ba0

constexpr std::optional<CSSColor> parseCSSColorFunction(

PRs welcome for fixes to the “processColor” stack referenced in the above PR. The code to support “modern color syntax” and hwb functions there has been around since RN 0.71, but it has plenty of missing support and bugs.