fix: support alpha value in color returned (#1594)

Author: quanho

apis/nucleus/src/components/listbox/assets/styling.js

@@ -1,4 +1,4 @@
-import Color from '../../../utils/color';
+import { Color } from '@nebula.js/theme';
 import { resolveBgColor, resolveBgImage } from '../../../utils/style/styling-props';
 
 const LIGHT = '#FFF';

apis/theme/src/index.js

@@ -6,6 +6,7 @@ import paletteResolverFn from './palette-resolver';
 import styleResolverFn from './style-resolver';
 import contrasterFn from './contraster/contraster';
 import luminance from './contraster/luminance';
+import Color from './utils/color/color';
 
 export default function theme() {
   let resolvedThemeJSON;
@@ -186,3 +187,5 @@ export default function theme() {
     internalAPI,
   };
 }
+
+export { Color };

apis/theme/src/palette-resolver.js

@@ -1,3 +1,5 @@
+import Color from './utils/color/color';
+
 /**
  * @interface Theme~ScalePalette
  * @property {string} key
@@ -82,21 +84,33 @@ export default function theme(resolvedTheme) {
       if (!somethingIsValid) {
         return undefined;
       }
-      // eslint-disable-next-line no-param-reassign
-      shift = !!shift;
-      if (c?.index < 0 || typeof c?.index === 'undefined') {
-        return c.color;
-      }
-      if (typeof uiPalette === 'undefined') {
-        uiPalette = this.uiPalettes()[0] || false;
-      }
-      if (!uiPalette) {
-        return c.color;
+      const getColor = () => {
+        // eslint-disable-next-line no-param-reassign
+        shift = !!shift;
+        if (c?.index < 0 || typeof c?.index === 'undefined') {
+          return c.color;
+        }
+        if (typeof uiPalette === 'undefined') {
+          uiPalette = this.uiPalettes()[0] || false;
+        }
+        if (!uiPalette) {
+          return c.color;
+        }
+        if (typeof uiPalette.colors[c.index - shift] === 'undefined') {
+          return c.color;
+        }
+        return uiPalette.colors[c.index - shift];
+      };
+      const color = getColor();
+      if (c.alpha === undefined || c.alpha >= 1 || c.alpha < 0) {
+        return color;
       }
-      if (typeof uiPalette.colors[c.index - shift] === 'undefined') {
-        return c.color;
+      const rgbaColor = new Color(color);
+      rgbaColor.setAlpha(c.alpha);
+      if (rgbaColor.isInvalid()) {
+        return color;
       }
-      return uiPalette.colors[c.index - shift];
+      return rgbaColor.toRGBA();
     },
   };
 }