feat: update themer package, add recursive color select logic

Author: bityutskiyAO

package-lock.json

@@ -17,7 +17,7 @@
     "@gravity-ui/navigation": "^3.10.1",
     "@gravity-ui/page-constructor": "^6.0.0-beta.6",
     "@gravity-ui/uikit": "^7.26.2",
-    "@gravity-ui/uikit-themer": "^1.4.2",
+    "@gravity-ui/uikit-themer": "^1.5.0",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@monaco-editor/react": "^4.6.0",

package.json

@@ -12,14 +12,12 @@ import {
     type GravityTheme,
     type Theme,
     type UtilityColor,
+    createInternalUtilityColorReference,
     createUtilityColorCssVariable,
     isInternalUtilityColorReference,
-} from '@gravity-ui/uikit-themer';
-import {
-    createInternalUtilityColorReference,
     isUtilityColorToken,
     parseInternalUtilityColorReference,
-} from '@gravity-ui/uikit-themer/dist/utils';
+} from '@gravity-ui/uikit-themer';
 import {useTranslation} from 'next-i18next';
 import {useMemo} from 'react';
 
@@ -68,7 +66,6 @@ const resolveUtilityColor = (
     updatedColorToken: string,
 ) => {
     let disabled = false;
-    console.log('updatedColorToken', updatedColorToken);
 
     const traverse = (
         colorObject: ColorOptions & {token?: string},

src/components/Themes/hooks/useThemeSemanticColorOption.tsx

@@ -1,5 +1,8 @@
-import {DEFAULT_THEME as DEFAULT_GRAVITY_THEME, type UtilityColor} from '@gravity-ui/uikit-themer';
-import {isUtilityColorToken} from '@gravity-ui/uikit-themer/dist/utils';
+import {
+    DEFAULT_THEME as DEFAULT_GRAVITY_THEME,
+    type UtilityColor,
+    isUtilityColorToken,
+} from '@gravity-ui/uikit-themer';
 import capitalize from 'lodash/capitalize';
 
 import {UTILITY_COLOR_PREFIX} from './constants';

src/components/Themes/lib/utils.ts

@@ -2,12 +2,10 @@ import {Flex, HelpMark, Text} from '@gravity-ui/uikit';
 import {
     type Theme,
     type UtilityColor,
-    createUtilityColorCssVariable,
-} from '@gravity-ui/uikit-themer';
-import {
     createInternalUtilityColorReference,
+    createUtilityColorCssVariable,
     isUtilityColorToken,
-} from '@gravity-ui/uikit-themer/dist/utils';
+} from '@gravity-ui/uikit-themer';
 import {useTranslation} from 'next-i18next';
 
 import {useThemePaletteColor, useThemePrivateColorOptions, useThemeUtilityColor} from '../../hooks';

src/components/Themes/ui/AdvancedSettingsTable/columns.tsx

@@ -3,8 +3,8 @@ import {
     type UtilityColor,
     isInternalUtilityColorReference,
     parseInternalPrivateColorReference,
+    parseInternalUtilityColorReference,
 } from '@gravity-ui/uikit-themer';
-import {parseInternalUtilityColorReference} from '@gravity-ui/uikit-themer/dist/utils';
 import React, {Fragment} from 'react';
 
 import {block} from '../../../../utils';

src/components/Themes/ui/GravityColorSelect/ColorSelectPopupContent.tsx

@@ -3,8 +3,8 @@ import {
     type UtilityColor,
     isInternalPrivateColorReference,
     isInternalUtilityColorReference,
+    parseInternalUtilityColorReference,
 } from '@gravity-ui/uikit-themer';
-import {parseInternalUtilityColorReference} from '@gravity-ui/uikit-themer/dist/utils';
 import {useTranslation} from 'next-i18next';
 import React from 'react';
 
@@ -39,7 +39,7 @@ const ColorItem: React.FC<ColorItemProps> = ({title, color, disabled}) => {
 interface PrivateColorsListProps {
     colors: BaseColor[];
     value?: string;
-    onSelect: (value: string) => void;
+    onSelect: (value: string, ref?: string) => void;
     view?: 'select' | 'list';
 }
 
@@ -56,7 +56,7 @@ export const PrivateColorsList = ({
 
     const handleSelect = React.useCallback(
         (item: BaseColor) => {
-            onSelect(item.token);
+            onSelect(item.color, item.token);
         },
         [onSelect],
     );

src/components/Themes/ui/GravityColorSelect/ColorSelectPopupContentItems.tsx

@@ -12,8 +12,8 @@ import {
 import {
     isInternalPrivateColorReference,
     isInternalUtilityColorReference,
+    parseInternalUtilityColorReference,
 } from '@gravity-ui/uikit-themer';
-import {parseInternalUtilityColorReference} from '@gravity-ui/uikit-themer/dist/utils';
 import React from 'react';
 
 import {useIsMobile} from '../../../../hooks/useIsMobile';

src/components/Themes/ui/GravityColorSelect/GravityColorSelect.tsx

@@ -1,5 +1,7 @@
-import {parseInternalPrivateColorReference} from '@gravity-ui/uikit-themer';
-import {parseInternalUtilityColorReference} from '@gravity-ui/uikit-themer/dist/utils';
+import {
+    parseInternalPrivateColorReference,
+    parseInternalUtilityColorReference,
+} from '@gravity-ui/uikit-themer';
 
 import type {SemanticColorGroup} from '../../hooks/useThemeSemanticColorOption';