@elementor/editor-editing-panel 1.45.0 → 1.46.0

package/src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx

@@ -5,7 +5,7 @@ import { type StyleDefinitionVariant } from '@elementor/editor-styles';
 import { ELEMENTS_BASE_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
 import { __ } from '@wordpress/i18n';
 
-import { type ChipColors, type SnapshotPropValue } from '../types';
+import { type SnapshotPropValue } from '../types';
 
 const MAXIMUM_ITEMS = 2;
 
@@ -15,7 +15,6 @@ type NormalizedItem = {
 	breakpoint?: StyleDefinitionVariant[ 'meta' ][ 'breakpoint' ];
 	displayLabel: string;
 	value: ReactNode | string;
-	chipColor: ChipColors;
 };
 
 export const useNormalizedInheritanceChainItems = (
@@ -74,7 +73,6 @@ export const normalizeInheritanceItem = async (
 		breakpoint: breakpoint ?? DEFAULT_BREAKPOINT,
 		displayLabel,
 		value: await getTransformedValue( item, bind, resolve ),
-		chipColor: getChipColor( item ),
 	};
 };
 
@@ -105,17 +103,3 @@ const getTransformedValue = async (
 		return '';
 	}
 };
-
-const getChipColor = ( item: SnapshotPropValue ) => {
-	const { provider = '', style } = item;
-
-	if ( provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
-		return 'default';
-	}
-
-	if ( style?.label === 'local' ) {
-		return 'accent';
-	}
-
-	return 'global';
-};

package/src/styles-inheritance/types.ts

@@ -50,5 +50,3 @@ export type StylesInheritanceAPI = {
 		basePropType: PropType
 	) => SnapshotPropValue[];
 };
-
-export type ChipColors = 'default' | 'global' | 'accent';

package/src/styles-inheritance/utils.ts

@@ -1,5 +1,7 @@
 import { type BreakpointId } from '@elementor/editor-responsive';
-import { type StyleDefinitionState } from '@elementor/editor-styles';
+import { type StyleDefinitionState, type StyleDefinitionVariant } from '@elementor/editor-styles';
+
+import { type SnapshotPropValue } from './types';
 
 export const DEFAULT_STATE = 'normal';
 
@@ -8,3 +10,17 @@ const DEFAULT_BREAKPOINT = 'desktop';
 export const getStateKey = ( state: StyleDefinitionState ) => state ?? DEFAULT_STATE;
 
 export const getBreakpointKey = ( breakpoint: BreakpointId | null ): BreakpointId => breakpoint ?? DEFAULT_BREAKPOINT;
+
+export const getValueFromInheritanceChain = (
+	inheritanceChain: SnapshotPropValue[],
+	styleId: string,
+	meta: StyleDefinitionVariant[ 'meta' ]
+) =>
+	inheritanceChain.find(
+		( {
+			style,
+			variant: {
+				meta: { breakpoint, state },
+			},
+		} ) => style.id === styleId && breakpoint === meta.breakpoint && state === meta.state
+	);

package/src/utils/get-styles-provider-color.ts

@@ -0,0 +1,28 @@
+import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider } from '@elementor/editor-styles-repository';
+import { type ChipProps, type Theme } from '@elementor/ui';
+
+import { getStyleProviderColors } from '../provider-colors-registry';
+
+export const getStylesProviderColorName = ( provider: string ): ChipProps[ 'color' ] => {
+	if ( ! provider || provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
+		return 'default';
+	}
+
+	if ( isElementsStylesProvider( provider ) ) {
+		return 'accent';
+	}
+
+	return getStyleProviderColors( provider ).name;
+};
+
+export const getStylesProviderThemeColor = ( provider: string ): ( ( theme: Theme ) => string ) | null => {
+	if ( ! provider || provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
+		return null;
+	}
+
+	if ( isElementsStylesProvider( provider ) ) {
+		return ( theme: Theme ) => theme.palette.accent.main;
+	}
+
+	return getStyleProviderColors( provider ).getThemeColor;
+};