fix: align theme none color to client (#1696)

* fix: align theme none color to client

* chore: update spec

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

@@ -73,7 +73,7 @@ function getBackgroundColor({ themeApi, themeOverrides }) {
   if (bgColor?.useExpression) {
     color = resolveBgColor({ bgColor }, themeApi, 'listBox');
   } else {
-    color = themeApi.getColorPickerColor(bgColor?.color, false);
+    color = themeApi.getColorPickerColor(bgColor?.color);
   }
   return color;
 }
@@ -93,7 +93,7 @@ function getSearchBGColor(bgCol, getListboxStyle) {
 export default function getStyles({ app, themeApi, theme, components = [], checkboxes = false }) {
   const overrides = getOverridesAsObject(components);
   const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
-  const getColorPickerColor = (c) => (c?.index > 0 || c?.color ? themeApi.getColorPickerColor(c, false) : undefined);
+  const getColorPickerColor = (c) => (c?.index > 0 || c?.color ? themeApi.getColorPickerColor(c) : undefined);
 
   const selections = getSelectionColors({
     getColorPickerColor,

apis/nucleus/src/utils/style/__tests__/resolve-color.test.js

@@ -34,7 +34,7 @@ describe('resolveProperty', () => {
     jest.spyOn(resolveProperty, 'default');
     const res = resolveColor(colorObj, path, attribute, styleService, objectType);
     expect(styleService.getColorPickerColor).toHaveBeenCalledTimes(1);
-    expect(styleService.getColorPickerColor).toHaveBeenCalledWith(colorObj, true);
+    expect(styleService.getColorPickerColor).toHaveBeenCalledWith(colorObj);
     expect(resolveProperty.default).toHaveBeenCalledTimes(0);
     expect(res).toEqual('resolvedColor');
   });

apis/nucleus/src/utils/style/resolve-color.js

@@ -1,10 +1,8 @@
 import resolveProperty from './resolve-property';
 
-const supportNone = true;
-
 export default function resolveColor(colorObj, path, attribute, theme, objectType) {
   if (colorObj && theme) {
-    return colorObj.color !== 'none' ? theme.getColorPickerColor(colorObj, supportNone) : undefined;
+    return colorObj.color !== 'none' ? theme.getColorPickerColor(colorObj) : undefined;
   }
   return resolveProperty(path, attribute, theme, objectType);
 }

apis/nucleus/src/utils/style/styling-props.js

@@ -127,7 +127,7 @@ export function resolveTextStyle(textComp, target, theme, objectType) {
     fontSize: textProps.fontSize || theme.getStyle(`object.${objectType}`, `title.${target}`, 'fontSize'),
     color:
       textProps.color && textProps.color.color !== 'none'
-        ? theme.getColorPickerColor(textProps.color, true)
+        ? theme.getColorPickerColor(textProps.color)
         : theme.getStyle(`object.${objectType}`, target, 'color'),
     backgroundColor:
       textProps.backgroundColor || theme.getStyle(`object.${objectType}`, `title.${target}`, 'backgroundColor'),

apis/stardust/api-spec/spec.json

@@ -1723,6 +1723,33 @@
         }
       }
     },
+    "Plugin": {
+      "description": "An object literal containing meta information about the plugin and a function containing the plugin implementation.",
+      "stability": "experimental",
+      "availability": {
+        "since": "1.2.0"
+      },
+      "kind": "interface",
+      "entries": {
+        "info": {
+          "description": "Object that can hold various meta info about the plugin",
+          "kind": "object",
+          "entries": {
+            "name": {
+              "description": "The name of the plugin",
+              "type": "string"
+            }
+          }
+        },
+        "fn": {
+          "description": "The implementation of the plugin. Input and return value is up to the plugin implementation to decide based on its purpose.",
+          "type": "function"
+        }
+      },
+      "examples": [
+        "const plugin = {\n  info: {\n    name: \"example-plugin\",\n    type: \"meta-type\",\n  },\n  fn: () => {\n    // Plugin implementation goes here\n  }\n};"
+      ]
+    },
     "Field": {
       "kind": "alias",
       "items": {
@@ -1874,33 +1901,6 @@
         }
       }
     },
-    "Plugin": {
-      "description": "An object literal containing meta information about the plugin and a function containing the plugin implementation.",
-      "stability": "experimental",
-      "availability": {
-        "since": "1.2.0"
-      },
-      "kind": "interface",
-      "entries": {
-        "info": {
-          "description": "Object that can hold various meta info about the plugin",
-          "kind": "object",
-          "entries": {
-            "name": {
-              "description": "The name of the plugin",
-              "type": "string"
-            }
-          }
-        },
-        "fn": {
-          "description": "The implementation of the plugin. Input and return value is up to the plugin implementation to decide based on its purpose.",
-          "type": "function"
-        }
-      },
-      "examples": [
-        "const plugin = {\n  info: {\n    name: \"example-plugin\",\n    type: \"meta-type\",\n  },\n  fn: () => {\n    // Plugin implementation goes here\n  }\n};"
-      ]
-    },
     "LoadType": {
       "kind": "interface",
       "params": [
@@ -2875,12 +2875,6 @@
                   "type": "string"
                 }
               }
-            },
-            {
-              "name": "supportNone",
-              "description": "Shifts the palette index by one to account for the \"none\" color",
-              "optional": true,
-              "type": "boolean"
             }
           ],
           "returns": {
@@ -2888,7 +2882,7 @@
             "type": "string"
           },
           "examples": [
-            "theme.getColorPickerColor({ index: 1 });\ntheme.getColorPickerColor({ index: 1 }, true);\ntheme.getColorPickerColor({ color: 'red' });"
+            "theme.getColorPickerColor({ index: 1 });\ntheme.getColorPickerColor({ color: 'red' });"
           ]
         },
         "getContrastingColorTo": {

apis/stardust/types/index.d.ts

@@ -556,6 +556,16 @@ declare namespace stardust {
 
     }
 
+    /**
+     * An object literal containing meta information about the plugin and a function containing the plugin implementation.
+     */
+    interface Plugin {
+        info: {
+            name: string;
+        };
+        fn: ()=>void;
+    }
+
     type Field = string | qix.NxDimension | qix.NxMeasure | stardust.LibraryField;
 
     /**
@@ -597,16 +607,6 @@ declare namespace stardust {
         type: "dimension" | "measure";
     }
 
-    /**
-     * An object literal containing meta information about the plugin and a function containing the plugin implementation.
-     */
-    interface Plugin {
-        info: {
-            name: string;
-        };
-        fn: ()=>void;
-    }
-
     interface LoadType {
         (type: {
             name: string;
@@ -878,12 +878,11 @@ declare namespace stardust {
         /**
          * Resolve a color object using the color picker palette from the provided JSON theme.
          * @param c
-         * @param supportNone Shifts the palette index by one to account for the "none" color
          */
         getColorPickerColor(c: {
             index?: number;
             color?: string;
-        }, supportNone?: boolean): string;
+        }): string;
 
         /**
          * Get the best contrasting color against the specified `color`.

apis/theme/src/__tests__/palette-resolver.test.js

@@ -60,7 +60,7 @@ describe('palette-resolver', () => {
             {
               name: 'name',
               translation: 't',
-              colors: 'colors',
+              colors: ['colors'],
             },
           ],
         },
@@ -71,7 +71,7 @@ describe('palette-resolver', () => {
         name: 'name',
         translation: 't',
         type: 'row',
-        colors: 'colors',
+        colors: ['none', 'colors'],
       },
     ]);
   });

apis/theme/src/index.js

@@ -60,12 +60,10 @@ export default function theme() {
      * @param {object} c
      * @param {number=} c.index
      * @param {string=} c.color
-     * @param {boolean=} supportNone Shifts the palette index by one to account for the "none" color
      * @returns {string} The resolved color.
      *
      * @example
      * theme.getColorPickerColor({ index: 1 });
-     * theme.getColorPickerColor({ index: 1 }, true);
      * theme.getColorPickerColor({ color: 'red' });
      */
     getColorPickerColor(...a) {

apis/theme/src/palette-resolver.js

@@ -56,12 +56,13 @@ export default function theme(resolvedTheme) {
     uiPalettes() {
       const pals = [];
       resolvedTheme.palettes.ui.forEach((s) => {
+        const colors = s.colors[0] !== 'none' ? ['none', ...s.colors] : s.colors;
         pals.push({
           key: 'ui',
           name: s.name,
           translation: s.translation,
           type: 'row',
-          colors: s.colors,
+          colors,
         });
       });
       return pals;
@@ -77,7 +78,7 @@ export default function theme(resolvedTheme) {
         others: resolvedTheme.dataColors.othersColor,
       };
     },
-    uiColor(c, shift) {
+    uiColor(c) {
       const indexIsValid = typeof c?.index === 'number' && !Number.isNaN(c?.index);
       const colorIsValid = typeof c?.color === 'string';
       const somethingIsValid = indexIsValid || colorIsValid;
@@ -85,8 +86,6 @@ export default function theme(resolvedTheme) {
         return undefined;
       }
       const getColor = () => {
-        // eslint-disable-next-line no-param-reassign
-        shift = !!shift;
         if (c?.index < 0 || typeof c?.index === 'undefined') {
           return c.color;
         }
@@ -96,10 +95,10 @@ export default function theme(resolvedTheme) {
         if (!uiPalette) {
           return c.color;
         }
-        if (typeof uiPalette.colors[c.index - shift] === 'undefined') {
+        if (typeof uiPalette.colors[c.index] === 'undefined') {
           return c.color;
         }
-        return uiPalette.colors[c.index - shift];
+        return uiPalette.colors[c.index];
       };
       const color = getColor();
       if (c.alpha === undefined || c.alpha >= 1 || c.alpha < 0) {

test/component/hooks/hooks.comp.cjs

@@ -87,7 +87,7 @@ describe('hooks', () => {
 
   it('useTheme', async () => {
     const text = await page.$eval(`${snSelector} .theme`, (el) => el.textContent);
-    expect(text).to.equal('#a54343');
+    expect(text).to.equal('#7b7a78');
   });
 
   it('useConstraints', async () => {