feat: use selection colors from theme

packages/sn-filter-pane/src/hooks/use-setup.ts

@@ -20,7 +20,7 @@ export default function useSetup(env: IEnv) {
   const app = useApp() as EngineAPI.IApp;
   const model = useModel();
   const embed = useEmbed();
-  const styles = useStyling({ app, components: fpLayout?.components });
+  const styles = useStyling({ app, components: fpLayout?.components, env });
   const selections = useSelections();
   const keyboard = useKeyboard();
   const renderTracker = useRenderTrackerService();

packages/sn-filter-pane/src/hooks/use-styling/__tests__/selection-style.spec.ts

@@ -0,0 +1,66 @@
+import { stardust } from '@nebula.js/stardust';
+import { IComponentOverrides } from '../types';
+import getSelectionsStyle, { DEFAULT_COLORS } from '../selections-style';
+import { ISelectionsComponent } from '../../types/components';
+import { IEnv } from '../../../types/types';
+
+describe('getSelectionsStyle', () => {
+  let componentsOverrides: IComponentOverrides;
+  let stardustTheme: stardust.Theme;
+  let getListboxStyle: (path: string, prop: string) => string | undefined;
+  let env: IEnv;
+
+  beforeEach(() => {
+    componentsOverrides = {};
+    stardustTheme = {} as stardust.Theme;
+    getListboxStyle = () => undefined;
+    env = {};
+  });
+
+  const callGetStyle = () => getSelectionsStyle({ componentsOverrides, stardustTheme, getListboxStyle, env });
+
+  it('should return default selection colors', () => {
+    expect(callGetStyle()).toEqual(DEFAULT_COLORS);
+  });
+
+  it('should not return colors from theme, when flag is disabled', () => {
+    getListboxStyle = (path: string, prop: string) => prop;
+    env.flags = { isEnabled: () => false };
+
+    expect(callGetStyle()).toEqual(DEFAULT_COLORS);
+  });
+
+  it('should return colors from theme', () => {
+    getListboxStyle = (path: string, prop: string) => prop;
+    env.flags = { isEnabled: () => true };
+
+    expect(callGetStyle()).toEqual({
+      selected: 'dataColors.selected',
+      alternative: 'dataColors.alternative',
+      excluded: 'dataColors.excluded',
+      selectedExcluded: 'dataColors.selectedExcluded',
+      possible: 'dataColors.possible',
+    });
+  });
+
+  it('should return colors componentsOverrides', () => {
+    componentsOverrides.selections = {
+      colors: {
+        selected: { color: '#AAAAAA' },
+        alternative: { color: '#BBBBBB' },
+        excluded: { color: '#CCCCCC' },
+        selectedExcluded: { color: '#DDDDDD' },
+        possible: { color: '#EEEEEE' },
+      },
+    } as ISelectionsComponent;
+    stardustTheme.getColorPickerColor = (c: {color: string, index: number}): string => c.color;
+
+    expect(callGetStyle()).toEqual({
+      selected: '#AAAAAA',
+      alternative: '#BBBBBB',
+      excluded: '#CCCCCC',
+      selectedExcluded: '#DDDDDD',
+      possible: '#EEEEEE',
+    });
+  });
+});

packages/sn-filter-pane/src/hooks/use-styling/selections-style.ts

@@ -1,28 +1,52 @@
 import { stardust } from '@nebula.js/stardust';
 import { IComponentOverrides } from './types';
-import { ISelectionsComponent } from '../types/components';
+import { IEnv } from '../../types/types';
 
 interface IGetSelectionStyles {
   componentsOverrides: IComponentOverrides;
   stardustTheme: stardust.Theme,
+  getListboxStyle: (path: string, prop: string) => string | undefined
+  env?: IEnv
 }
 
-export default function getSelectionsStyle({ componentsOverrides, stardustTheme }: IGetSelectionStyles) {
-  const selectionColors = componentsOverrides?.selections?.colors || {} as ISelectionsComponent['colors'];
+enum SelectionType {
+  Selected = 'selected',
+  Alternative = 'alternative',
+  Excluded = 'excluded',
+  SelectedExcluded = 'selectedExcluded',
+  Possible = 'possible'
+}
+
+export const DEFAULT_COLORS: Record<SelectionType, string> = {
+  selected: '#009845',
+  alternative: '#E4E4E4',
+  excluded: '#A9A9A9',
+  selectedExcluded: '#A9A9A9',
+  possible: '#FFFFFF',
+};
 
-  const getColor = stardustTheme?.getColorPickerColor || (() => false);
+export default function getSelectionsStyle({
+  componentsOverrides,
+  stardustTheme,
+  getListboxStyle,
+  env,
+}: IGetSelectionStyles) {
+  const getThemeDataColor = (type: SelectionType) => {
+    const isEnabled = env?.flags?.isEnabled('PS_22149_THEME_SELECTION_COLORS');
+    return isEnabled ? getListboxStyle('', `dataColors.${type}`) : undefined;
+  };
 
-  const selected = getColor(selectionColors.selected || {}, false) || '#009845';
-  const alternative = getColor(selectionColors.alternative || {}, false) || '#E4E4E4';
-  const excluded = getColor(selectionColors.excluded || {}, false) || '#A9A9A9';
-  const selectedExcluded = getColor(selectionColors.selectedExcluded || {}, false) || '#A9A9A9';
-  const possible = getColor(selectionColors.possible || {}, false) || '#FFFFFF';
+  const getColor = (type: SelectionType) => {
+    const componentColor = componentsOverrides?.selections?.colors?.[type];
+    const evaluatedColorFromComponents = componentColor && stardustTheme?.getColorPickerColor(componentColor);
+    return evaluatedColorFromComponents || getThemeDataColor(type) || DEFAULT_COLORS[type];
+  };
 
   return {
-    selected,
-    alternative,
-    excluded,
-    selectedExcluded,
-    possible,
+    selected: getColor(SelectionType.Selected),
+    alternative: getColor(SelectionType.Alternative),
+    excluded: getColor(SelectionType.Excluded),
+    selectedExcluded: getColor(SelectionType.SelectedExcluded),
+    possible: getColor(SelectionType.Possible),
   };
 }

packages/sn-filter-pane/src/hooks/use-styling/types.d.ts

@@ -1,3 +1,4 @@
+import { IEnv } from '../../types/types';
 import {
   IComponent, ISelectionsComponent, IThemeComponent,
 } from '../types/components';
@@ -10,4 +11,5 @@ export type IComponentOverrides = {
 export interface ICreateStylingArgs {
   app?: EngineAPI.IApp,
   components?: IComponent[];
+  env?: IEnv
 }

packages/sn-filter-pane/src/hooks/use-styling/use-styling.ts

@@ -31,7 +31,7 @@ function getOverridesAsObject(components: IComponent[] = []): IComponentOverride
  *
  * They are generally overridden in above order.
  */
-export default function useStyling({ app, components = [] }: ICreateStylingArgs): IStyles {
+export default function useStyling({ app, components = [], env }: ICreateStylingArgs): IStyles {
   const stardustTheme = useStardustTheme();
   const componentsOverrides = getOverridesAsObject(components);
   const getListboxStyle = (path: string, prop: string) => stardustTheme?.getStyle('object.listBox', path, prop);
@@ -45,7 +45,7 @@ export default function useStyling({ app, components = [] }: ICreateStylingArgs)
 
   const headerFontStyle = componentsOverrides.theme?.header?.fontStyle || {};
 
-  const selections = getSelectionsStyle({ componentsOverrides, stardustTheme });
+  const selections = getSelectionsStyle({ componentsOverrides, stardustTheme, getListboxStyle, env });
 
   const mergedStyle = {
     listbox: {