fix design review issues and fix color selector

bityutskiyAO · bityutskiyAO · commit b07f7d95f252 · 2025-11-28T17:22:03.000+03:00
diff --git a/public/locales/en/themes.json b/public/locales/en/themes.json
@@ -22,6 +22,7 @@
   "theme_name_light": "Light",
   "theme_name_dark": "Dark",
   "title_advance-settings-table_title-variable": "Variable",
+  "title_advance-settings-table_title-color": "Color",
   "title_advance-settings-table_title-light": "Light theme value",
   "title_advance-settings-table_title-dark": "Dark theme value",
   "title_advance-color-settings-group-base": "Base",
diff --git a/public/locales/ru/themes.json b/public/locales/ru/themes.json
@@ -22,6 +22,7 @@
   "theme_name_light": "Светлая",
   "theme_name_dark": "Тёмная",
   "title_advance-settings-table_title-variable": "Переменная",
+  "title_advance-settings-table_title-color": "Цвет",
   "title_advance-settings-table_title-light": "Значение светлой темы",
   "title_advance-settings-table_title-dark": "Значение тёмной темы",
   "title_advance-color-settings-base": "Базовый",
diff --git a/src/components/Themes/hooks/useThemeSemanticColorOption.tsx b/src/components/Themes/hooks/useThemeSemanticColorOption.tsx
@@ -57,6 +57,8 @@ const getIconByGroup = (group: Exclude<AdvancedColorType, 'basic-palette'>) => {
             return <Icon data={MagicWand} />;
         case 'misc':
             return <Icon data={Cube} />;
+        default:
+            return <Icon data={Cube} />;
     }
 };
 
@@ -162,5 +164,5 @@ export const useThemeSemanticColorOption = (
                     ),
                 };
             });
-    }, [themeState, themeVariant]);
+    }, [gravityTheme, themeVariant, updatedColorToken, t]);
 };
diff --git a/src/components/Themes/lib/constants.ts b/src/components/Themes/lib/constants.ts
@@ -257,6 +257,7 @@ export const DEFAULT_ADVANCED_COLORS: AdvanceColors = {
     'brand-summary': {
         'brand-palette': [
             getDefaultAdvancedColorValue('base-background'),
+            getDefaultAdvancedColorValue('text-brand-contrast'),
             {
                 colorName: 'brand',
                 ...DEFAULT_GRAVITY_THEME.baseColors.brand,
diff --git a/src/components/Themes/lib/utils.ts b/src/components/Themes/lib/utils.ts
@@ -24,5 +24,9 @@ export const getColorName = (colorToken: string) => {
         return capitalize(colorToken);
     }
 
+    if (colorToken === 'brand') {
+        return 'Brand Color';
+    }
+
     return colorToken;
 };
diff --git a/src/components/Themes/ui/AdvancedSettingsTable/AdvancedSettingsTable.scss b/src/components/Themes/ui/AdvancedSettingsTable/AdvancedSettingsTable.scss
@@ -1,15 +1,21 @@
 @use '../../../../variables.scss';
+@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
 
 $block: '.#{variables.$ns}advanced-color-settings-table';
 
 #{$block} {
     border-collapse: collapse;
 
     &__cell {
+        width: 410px;
         padding-inline: var(--g-spacing-5);
         text-align: left;
-        border-block-end: 1px solid var(--g-color-line-generic);
-        border-inline-end: 1px solid var(--g-color-line-generic);
+        border-block-end: 1px solid var(--g-color-line-generic-solid);
+        border-inline-end: 1px solid var(--g-color-line-generic-solid);
+
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg')) {
+            width: 335px;
+        }
 
         &_group {
             padding-block: var(--g-spacing-4) var(--g-spacing-1);
@@ -24,4 +30,9 @@ $block: '.#{variables.$ns}advanced-color-settings-table';
     &__row > &__cell:first-child {
         padding-inline-start: 0;
     }
+
+    &__theme-toggle {
+        width: 100%;
+        --g-border-radius-xl: 8px;
+    }
 }
diff --git a/src/components/Themes/ui/AdvancedSettingsTable/AdvancedSettingsTable.tsx b/src/components/Themes/ui/AdvancedSettingsTable/AdvancedSettingsTable.tsx
@@ -1,3 +1,4 @@
+import {Text} from '@gravity-ui/uikit';
 import {useTranslation} from 'next-i18next';
 import {Fragment} from 'react';
 
@@ -18,7 +19,7 @@ export interface AdvancedSettingsTableProps {
 export const AdvancedSettingsTable = ({colorType}: AdvancedSettingsTableProps) => {
     const {t} = useTranslation('themes');
     const extraColors = useExtraColors();
-    const columns = useColumns();
+    const columns = useColumns({colorType});
 
     return (
         <table className={b()}>
@@ -41,9 +42,13 @@ export const AdvancedSettingsTable = ({colorType}: AdvancedSettingsTableProps) =
                                         className={b('cell', {group: true})}
                                         key={`${group}-${key}`}
                                     >
-                                        {key === 'variable'
-                                            ? t(`title_advance-color-settings-group-${group}`)
-                                            : ''}
+                                        {key === 'variable' ? (
+                                            <Text variant="subheader-1">
+                                                {t(`title_advance-color-settings-group-${group}`)}
+                                            </Text>
+                                        ) : (
+                                            ''
+                                        )}
                                     </td>
                                 ))}
                             </tr>
diff --git a/src/components/Themes/ui/AdvancedSettingsTable/columns.tsx b/src/components/Themes/ui/AdvancedSettingsTable/columns.tsx
@@ -1,4 +1,5 @@
-import {Flex, HelpMark, Text} from '@gravity-ui/uikit';
+import {Moon, Sun} from '@gravity-ui/icons';
+import {Flex, HelpMark, Icon, SegmentedRadioGroup, Text} from '@gravity-ui/uikit';
 import {
     type Theme,
     type UtilityColor,
@@ -8,6 +9,7 @@ import {
 } from '@gravity-ui/uikit-themer';
 import {useTranslation} from 'next-i18next';
 
+import {block} from '../../../../utils';
 import {useThemePaletteColor, useThemePrivateColorOptions, useThemeUtilityColor} from '../../hooks';
 import {useThemeSemanticColorOption} from '../../hooks/useThemeSemanticColorOption';
 import {getColorName, getColorPrefix} from '../../lib/utils';
@@ -18,6 +20,8 @@ import {ExtraColorName} from './ExtraColorName/ExtraColorName';
 
 type ColumnProps = {colorName: string; theme: Theme; value?: string};
 
+const b = block('advanced-color-settings-table');
+
 const PaletteThemeValueColumn = ({colorName, theme, value}: ColumnProps) => {
     const [color, setColor] = useThemePaletteColor({
         token: colorName,
@@ -34,6 +38,11 @@ const PaletteThemeValueColumn = ({colorName, theme, value}: ColumnProps) => {
     );
 };
 
+const utilityColorsForDefaultColorPicker: UtilityColor[] = [
+    'base-background',
+    'text-brand-contrast',
+];
+
 const UtilityThemeValueColumn = ({
     colorName,
     theme,
@@ -50,7 +59,7 @@ const UtilityThemeValueColumn = ({
         createInternalUtilityColorReference(colorName),
     );
 
-    if (colorName === 'base-background') {
+    if (utilityColorsForDefaultColorPicker.includes(colorName)) {
         return (
             <ColorPickerInput
                 value={color}
@@ -73,7 +82,7 @@ const UtilityThemeValueColumn = ({
     );
 };
 
-export const ThemeValueColumn = ({colorName, theme, value}: ColumnProps) => {
+const ThemeValueColumn = ({colorName, theme, value}: ColumnProps) => {
     const isUtilityColor = isUtilityColorToken(colorName);
 
     if (isUtilityColor) {
@@ -83,10 +92,40 @@ export const ThemeValueColumn = ({colorName, theme, value}: ColumnProps) => {
     return <PaletteThemeValueColumn colorName={colorName} theme={theme} value={value} />;
 };
 
-export const TitleColumn = ({value}: {value: string}) => {
+const TitleColumn = ({value}: {value: string}) => {
     return <Text variant="header-1">{value}</Text>;
 };
 
+const ThemeToggleTitleColumn = ({
+    theme,
+    toggleTheme,
+}: {
+    theme: Theme;
+    toggleTheme: (theme: Theme) => void;
+}) => {
+    const {t} = useTranslation('themes');
+
+    return (
+        <SegmentedRadioGroup
+            size="xl"
+            defaultValue={theme}
+            className={b('theme-toggle')}
+            onChange={(e) => {
+                toggleTheme(e.target.value as Theme);
+            }}
+        >
+            <SegmentedRadioGroup.Option value="light">
+                <Icon data={Sun} />
+                {t('theme_name_light')}
+            </SegmentedRadioGroup.Option>
+            <SegmentedRadioGroup.Option value="dark">
+                <Icon data={Moon} />
+                {t('theme_name_dark')}
+            </SegmentedRadioGroup.Option>
+        </SegmentedRadioGroup>
+    );
+};
+
 const UtilityVariableDescription = ({name}: {name: UtilityColor}) => {
     const {t} = useTranslation('themes');
     const content = t(`text_utility-color_${name}_description`);
@@ -103,7 +142,7 @@ const UtilityVariableDescription = ({name}: {name: UtilityColor}) => {
     );
 };
 
-export const VariableColumn = ({name, extraVariable}: {name: string; extraVariable?: boolean}) => {
+const VariableColumn = ({name, extraVariable}: {name: string; extraVariable?: boolean}) => {
     if (extraVariable) {
         return <ExtraColorName token={name} />;
     }
@@ -126,3 +165,5 @@ export const VariableColumn = ({name, extraVariable}: {name: string; extraVariab
         </Flex>
     );
 };
+
+export {ThemeValueColumn, TitleColumn, VariableColumn, ThemeToggleTitleColumn};
diff --git a/src/components/Themes/ui/AdvancedSettingsTable/hooks.tsx b/src/components/Themes/ui/AdvancedSettingsTable/hooks.tsx
@@ -1,14 +1,13 @@
-import {Moon, Sun} from '@gravity-ui/icons';
 import {BREAKPOINTS, useWindowBreakpoint} from '@gravity-ui/page-constructor';
-import {Icon, SegmentedRadioGroup} from '@gravity-ui/uikit';
 import type {BaseColors, Theme} from '@gravity-ui/uikit-themer';
 import {useTranslation} from 'next-i18next';
 import {type ReactElement, useMemo, useState} from 'react';
 
 import {useThemeCreator} from '../../hooks';
 import {isManuallyCreatedPaletteToken} from '../../lib/themeCreatorUtils';
+import type {AdvancedColorType} from '../../lib/types';
 
-import {ThemeValueColumn, TitleColumn, VariableColumn} from './columns';
+import {ThemeToggleTitleColumn, ThemeValueColumn, TitleColumn, VariableColumn} from './columns';
 
 export const useExtraColors = () => {
     const {gravityTheme} = useThemeCreator();
@@ -34,7 +33,7 @@ type Column = {
     }) => ReactElement;
 };
 
-export const useColumns = (): Column[] => {
+export const useColumns = ({colorType}: {colorType: AdvancedColorType}): Column[] => {
     const [theme, toggleTheme] = useState<Theme>('light');
     const {t} = useTranslation('themes');
 
@@ -43,7 +42,15 @@ export const useColumns = (): Column[] => {
 
     const variableColumn: Column = useMemo(
         () => ({
-            title: () => <TitleColumn value={t('title_advance-settings-table_title-variable')} />,
+            title: () => (
+                <TitleColumn
+                    value={
+                        colorType === 'basic-palette'
+                            ? t('title_advance-settings-table_title-color')
+                            : t('title_advance-settings-table_title-variable')
+                    }
+                />
+            ),
             key: 'variable',
             render: ({colorName, extraVariable = false}) => (
                 <VariableColumn name={colorName} extraVariable={extraVariable} />
@@ -52,44 +59,25 @@ export const useColumns = (): Column[] => {
         [t],
     );
 
-    if (isTablet) {
-        return useMemo(
-            () => [
-                variableColumn,
-                {
-                    title: () => (
-                        <SegmentedRadioGroup
-                            size="xl"
-                            defaultValue={theme}
-                            onChange={(e) => {
-                                toggleTheme(e.target.value as Theme);
-                            }}
-                        >
-                            <SegmentedRadioGroup.Option value="light">
-                                <Icon data={Sun} />
-                                {t('theme_name_light')}
-                            </SegmentedRadioGroup.Option>
-                            <SegmentedRadioGroup.Option value="dark">
-                                <Icon data={Moon} />
-                                {t('theme_name_dark')}
-                            </SegmentedRadioGroup.Option>
-                        </SegmentedRadioGroup>
-                    ),
-                    key: 'themeToggle',
-                    render: ({colorName, light, dark}) => (
-                        <ThemeValueColumn
-                            theme={theme}
-                            colorName={colorName}
-                            value={theme === 'light' ? light : dark}
-                        />
-                    ),
-                },
-            ],
-            [theme, t],
-        );
-    }
+    const tabletColumns: Column[] = useMemo(
+        () => [
+            variableColumn,
+            {
+                title: () => <ThemeToggleTitleColumn theme={theme} toggleTheme={toggleTheme} />,
+                key: 'themeToggle',
+                render: ({colorName, light, dark}) => (
+                    <ThemeValueColumn
+                        theme={theme}
+                        colorName={colorName}
+                        value={theme === 'light' ? light : dark}
+                    />
+                ),
+            },
+        ],
+        [variableColumn, theme],
+    );
 
-    return useMemo(
+    const desktopColumns: Column[] = useMemo(
         () => [
             variableColumn,
             {
@@ -107,6 +95,12 @@ export const useColumns = (): Column[] => {
                 ),
             },
         ],
-        [t],
+        [variableColumn, t],
     );
+
+    if (isTablet) {
+        return tabletColumns;
+    }
+
+    return desktopColumns;
 };
diff --git a/src/components/Themes/ui/GravityColorSelect/ColorSelectPopupContent.tsx b/src/components/Themes/ui/GravityColorSelect/ColorSelectPopupContent.tsx
@@ -90,8 +90,8 @@ export const ColorSelectPopupContent = ({
                 <PrivateColorsList
                     colors={privateGroups}
                     value={groupToken}
-                    onSelect={(val) => {
-                        setCurrentGroupToken(val);
+                    onSelect={(item) => {
+                        setCurrentGroupToken(item.token);
                         setSelectedGroupType('private');
                     }}
                     view={version === 'mobile' ? 'select' : 'list'}
@@ -128,7 +128,7 @@ export const ColorSelectPopupContent = ({
                     <PrivateColorsList
                         colors={groupPrivateColors}
                         value={value}
-                        onSelect={onChange}
+                        onSelect={(item) => onChange(item.color, item.token)}
                     />
                 )}
             </div>
diff --git a/src/components/Themes/ui/GravityColorSelect/ColorSelectPopupContentItems.tsx b/src/components/Themes/ui/GravityColorSelect/ColorSelectPopupContentItems.tsx
@@ -39,7 +39,7 @@ const ColorItem: React.FC<ColorItemProps> = ({title, color, disabled}) => {
 interface PrivateColorsListProps {
     colors: BaseColor[];
     value?: string;
-    onSelect: (value: string, ref?: string) => void;
+    onSelect: (item: BaseColor) => void;
     view?: 'select' | 'list';
 }
 
@@ -56,7 +56,7 @@ export const PrivateColorsList = ({
 
     const handleSelect = React.useCallback(
         (item: BaseColor) => {
-            onSelect(item.color, item.token);
+            onSelect(item);
         },
         [onSelect],
     );
@@ -172,7 +172,7 @@ export const SemanticGroupColorsList = ({
                     />
                     {item.disabled && (
                         <HelpMark iconSize="s">
-                            <Text variant="caption-1" color="secondary">
+                            <Text variant="body-1" color="secondary">
                                 {t('text_utility-color_disabled_description')}
                             </Text>
                         </HelpMark>

Original file line number	Diff line number	Diff line change
`@@ -257,6 +257,7 @@ export const DEFAULT_ADVANCED_COLORS: AdvanceColors = {`
`257`	`257`	`'brand-summary': {`
`258`	`258`	`'brand-palette': [`
`259`	`259`	`getDefaultAdvancedColorValue('base-background'),`
	`260`	`+ getDefaultAdvancedColorValue('text-brand-contrast'),`
`260`	`261`	`{`
`261`	`262`	`colorName: 'brand',`
`262`	`263`	`...DEFAULT_GRAVITY_THEME.baseColors.brand,`
Original file line number	Diff line number	Diff line change
`@@ -24,5 +24,9 @@ export const getColorName = (colorToken: string) => {`
`24`	`24`	`return capitalize(colorToken);`
`25`	`25`	`}`
`26`	`26`
	`27`	`+ if (colorToken === 'brand') {`
	`28`	`+ return 'Brand Color';`
	`29`	`+ }`
	`30`	`+`
`27`	`31`	`return colorToken;`
`28`	`32`	`};`