Support new widgets color pickers

src/server/components/features/features-list/EnableDashColorPickersByTheme.ts

@@ -0,0 +1,10 @@
+import {Feature} from '../../../../shared';
+import {createFeatureConfig} from '../utils';
+
+export default createFeatureConfig({
+    name: Feature.EnableDashColorPickersByTheme,
+    state: {
+        development: true,
+        production: false,
+    },
+});

src/shared/constants/widgets.ts

@@ -11,12 +11,6 @@ export const TRANSPARENT_COLOR_HEX = '#00000000';
 export const LIKE_CHART_COLOR_TOKEN = 'var(--g-color-base-float)';
 export const BASE_GREY_BACKGROUND_COLOR = 'var(--g-color-base-generic)';
 
-export type CustomPaletteBgColor = ValueOf<typeof CustomPaletteBgColors>;
-
-export function isCustomPaletteBgColor(color: string): color is CustomPaletteBgColor {
-    return Object.values(CustomPaletteBgColors).includes(color as CustomPaletteBgColor);
-}
-
 export const WIDGET_BG_HEAVY_COLORS_PRESET = [
     'var(--g-color-base-info-heavy)',
     'var(--g-color-base-positive-heavy)',
@@ -108,3 +102,10 @@ export function getDefaultDashWidgetBgColorByType(type: DashTabItemType) {
         ? CustomPaletteBgColors.LIKE_CHART
         : CustomPaletteBgColors.NONE;
 }
+
+export function getColorSettingsWithValue(
+    color: string | undefined,
+    enableSeparateThemeColorSelector: boolean,
+) {
+    return enableSeparateThemeColorSelector ? {light: color, dark: color} : color;
+}

src/shared/modules/dash-scheme-converter.ts

@@ -7,18 +7,18 @@ import {
     DUPLICATED_WIDGET_BG_COLORS_PRESET,
     getDefaultDashWidgetBgColorByType,
 } from '../constants/widgets';
-import type {BackgroundSettings, DashData, DashTab, DashTabItem} from '../types';
+import type {DashData, DashTab, DashTabItem, OldBackgroundSettings} from '../types';
 import {
     DashTabConnectionKind,
     DashTabItemControlElementType,
     DashTabItemType,
-    isBackgroundSettings,
+    isOldBackgroundSettings,
 } from '../types';
 
 const DATE_FORMAT_V7 = 'YYYY-MM-DD';
 
 export function getResultedOldBgColor(
-    oldBgColor: BackgroundSettings | undefined,
+    oldBgColor: OldBackgroundSettings | undefined,
     defaultColor: string | undefined,
 ): string | undefined {
     if (!oldBgColor) {
@@ -42,12 +42,12 @@ export function getResultedOldBgColor(
 }
 
 export function getActualOldBackground(
-    background: BackgroundSettings | undefined,
+    background: OldBackgroundSettings | undefined,
     defaultColor: string | undefined,
-): Omit<BackgroundSettings, 'enabled'> | undefined {
+): Omit<OldBackgroundSettings, 'enabled'> | undefined {
     if (
         background &&
-        isBackgroundSettings(background) &&
+        isOldBackgroundSettings(background) &&
         background.color &&
         DUPLICATED_WIDGET_BG_COLORS_PRESET.includes(background.color)
     ) {
@@ -60,6 +60,9 @@ export function getActualOldBackground(
 }
 
 export function migrateBgColor(item: DashTabItem, defaultOldColor?: string): DashTabItem {
+    if (DashTabItemType.GroupControl === item.type || DashTabItemType.Control === item.type) {
+        return item;
+    }
     const newItem: DashTabItem = Object.assign({...item}, {data: Object.assign({}, item.data)});
 
     if ('background' in newItem.data) {

src/shared/types/dash.ts

@@ -1,4 +1,5 @@
 import type {ItemDropProps} from '@gravity-ui/dashkit';
+import type {ThemeType} from '@gravity-ui/uikit';
 
 import type {Operations} from '../modules';
 
@@ -92,7 +93,7 @@ export type DashSettings = {
     loadOnlyVisibleCharts?: boolean;
     margins?: [number, number];
     enableAssistant?: boolean;
-    background?: BackgroundSettings;
+    backgroundSettings?: BackgroundSettings;
 };
 
 export interface DashData {
@@ -113,9 +114,12 @@ export type DashDragOptions = ItemDropProps;
 // schemeVersion comes from server
 export type FakeDashData = Omit<DashData, 'schemeVersion'> & {
     settings: Required<
-        Omit<DashSettings, 'margins' | 'enableAssistant' | 'signedGlobalParams' | 'background'>
+        Omit<
+            DashSettings,
+            'margins' | 'enableAssistant' | 'signedGlobalParams' | 'backgroundSettings'
+        >
     > &
-        Pick<DashSettings, 'margins' | 'enableAssistant' | 'background'>;
+        Pick<DashSettings, 'margins' | 'enableAssistant' | 'backgroundSettings'>;
 };
 
 export interface DashTabSettings {
@@ -143,14 +147,19 @@ export type DashTabItem =
     | DashTabItemGroupControl
     | DashTabItemImage;
 
-export type ColorSettings = string;
+export type ColorByTheme = Partial<Record<ThemeType, string | undefined>>;
 
-export type BackgroundSettings = {
+export type OldBackgroundSettings = {
     enabled?: boolean;
-    color: ColorSettings;
+    color: string;
 };
 
-export function isBackgroundSettings(value: unknown): value is BackgroundSettings {
+export type ColorSettings = ColorByTheme | string;
+export type BackgroundSettings = {color?: ColorSettings};
+
+export type TitleTextSettings = {color?: ColorSettings};
+
+export function isOldBackgroundSettings(value: unknown): value is OldBackgroundSettings {
     return (
         typeof value === 'object' &&
         value !== null &&
@@ -162,6 +171,40 @@ export function isBackgroundSettings(value: unknown): value is BackgroundSetting
     );
 }
 
+export function isColorByTheme(value: unknown): value is ColorByTheme {
+    return (
+        typeof value === 'object' &&
+        value !== null &&
+        Object.entries(value).every(
+            ([key, val]) =>
+                ['light', 'dark'].includes(key) && ['string', 'undefined'].includes(typeof val),
+        )
+    );
+}
+
+export function isColorSettings(value: unknown): value is ColorSettings {
+    return typeof value === 'string' || isColorByTheme(value);
+}
+
+function isSettingsWithColor(value: unknown): value is {color?: ColorSettings} {
+    return (
+        typeof value === 'object' &&
+        value !== null &&
+        'color' in value &&
+        (value.color === undefined ||
+            typeof value.color === 'string' ||
+            isColorSettings(value.color))
+    );
+}
+
+export function isBackgroundSettings(value: unknown): value is BackgroundSettings {
+    return isSettingsWithColor(value);
+}
+
+export function isTextSettings(value: unknown): value is TitleTextSettings {
+    return isSettingsWithColor(value);
+}
+
 export interface DashTabItemBase {
     id: string;
     namespace: string;
@@ -171,12 +214,16 @@ export interface DashTabItemBase {
     title?: string;
 }
 
+export type DashTabItemBaseData = {
+    background?: OldBackgroundSettings;
+    backgroundSettings?: BackgroundSettings;
+};
+
 export interface DashTabItemText extends DashTabItemBase {
     type: DashTabItemType.Text;
-    data: {
+    data: DashTabItemBaseData & {
         text: string;
         autoHeight?: boolean;
-        background?: BackgroundSettings;
     };
 }
 
@@ -189,20 +236,24 @@ export type DashTitleSize =
 
 export interface DashTabItemTitle extends DashTabItemBase {
     type: DashTabItemType.Title;
-    data: {
+    data: DashTabItemBaseData & {
         text: string;
         size: DashTitleSize;
         showInTOC: boolean;
         autoHeight?: boolean;
-        background?: BackgroundSettings;
-        textColor?: ColorSettings;
+        textColor?: string;
+        textSettings?: TitleTextSettings;
         hint?: HintSettings;
     };
 }
 
 export interface DashTabItemWidget extends DashTabItemBase {
     type: DashTabItemType.Widget;
-    data: {hideTitle: boolean; tabs: DashTabItemWidgetTab[]; background?: BackgroundSettings};
+    data: {
+        hideTitle: boolean;
+        tabs: DashTabItemWidgetTab[];
+        backgroundSettings?: BackgroundSettings;
+    };
 }
 
 export interface DashTabItemWidgetTab {
@@ -217,7 +268,7 @@ export interface DashTabItemWidgetTab {
     params: StringParams;
     autoHeight?: boolean;
     enableActionParams?: boolean;
-    background?: BackgroundSettings;
+    background?: OldBackgroundSettings;
 }
 
 export interface DashTabItemControl extends DashTabItemBase {
@@ -399,10 +450,9 @@ export interface DashStats {
 
 export interface DashTabItemImage extends DashTabItemBase {
     type: DashTabItemType.Image;
-    data: {
+    data: DashTabItemBaseData & {
         src: string;
         alt?: string;
-        background?: BackgroundSettings;
         preserveAspectRatio?: boolean;
     };
 }

src/shared/types/feature.ts

@@ -99,6 +99,8 @@ export enum Feature {
     EnableGlobalSelectors = 'EnableGlobalSelectors',
     /** enables new dash & widgets settings */
     EnableNewDashSettings = 'EnableNewDashSettings',
+    /** Enable color pickers with customization of values for light & dark themes separately */
+    EnableDashColorPickersByTheme = 'EnableDashColorPickersByTheme',
     /** Shows updated settings page */
     EnableNewServiceSettings = 'EnableNewServiceSettings',
 }

src/ui/components/DashKit/DashKit.ts

@@ -1,6 +1,6 @@
 import type {Plugin, PluginDefaultLayout} from '@gravity-ui/dashkit';
 import {DashKit} from '@gravity-ui/dashkit';
-import type {BackgroundSettings} from 'shared';
+import type {BackgroundSettings, OldBackgroundSettings} from 'shared';
 import {registry} from 'ui/registry';
 
 import {DL} from '../../constants';
@@ -37,10 +37,13 @@ const wrapPlugins = (plugins: Plugin[], pluginDefaultsGetter?: typeof currentDef
 
 export interface CommonPluginSettings {
     scope?: string;
+    globalBackground?: OldBackgroundSettings;
+    globalBackgroundSettings?: BackgroundSettings;
 }
 
 export interface CommonPluginProps {
-    background?: BackgroundSettings;
+    background?: OldBackgroundSettings;
+    backgroundSettings?: BackgroundSettings;
 }
 
 export const getConfiguredDashKit = (
@@ -49,22 +52,29 @@ export const getConfiguredDashKit = (
         disableHashNavigation?: boolean;
         disableTitleHints?: boolean;
         scope?: string;
+        background?: OldBackgroundSettings;
+        backgroundSettings?: BackgroundSettings;
     },
 ) => {
     if (currentDefaultsGetter !== pluginDefaultsGetter || !isConfigured) {
-        const titleSettings = {
+        const commonSettings: CommonPluginSettings = {
             scope: options?.scope,
+            globalBackground: options?.background,
+            globalBackgroundSettings: options?.backgroundSettings,
+        };
+        const titleSettings = {
+            ...commonSettings,
             hideAnchor: options?.disableHashNavigation,
             hideHint: options?.disableTitleHints,
         };
 
         const textSettings = {
-            scope: options?.scope,
+            ...commonSettings,
             apiHandler: MarkdownProvider.getMarkdown,
         };
 
         const controlSettings = {
-            scope: options?.scope,
+            ...commonSettings,
             getDistincts: getDistinctsAction(),
         };
 
@@ -74,8 +84,8 @@ export const getConfiguredDashKit = (
                 textPlugin.setSettings(textSettings),
                 pluginControl.setSettings(controlSettings),
                 pluginGroupControl.setSettings(controlSettings),
-                widgetPlugin.setSettings({scope: options?.scope}),
-                pluginImage.setSettings({scope: options?.scope}),
+                widgetPlugin.setSettings(commonSettings),
+                pluginImage.setSettings(commonSettings),
             ],
             pluginDefaultsGetter,
         );

src/ui/components/DashKit/plugins/Image/Image.tsx

@@ -22,14 +22,17 @@ type Props = PluginWidgetProps &
 
 type PluginImageObjectSettings = CommonPluginSettings;
 
-type PluginImage = Plugin<Props> & {
-    setSettings: (settings: PluginImageObjectSettings) => PluginImage;
-};
+type PluginImage = Plugin<Props> &
+    CommonPluginSettings & {
+        setSettings: (settings: PluginImageObjectSettings) => PluginImage;
+    };
 
 export const pluginImage: PluginImage = {
     type: DashTabItemType.Image,
     defaultLayout: {w: 12, h: 12, minH: 1, minW: 1},
-    setSettings: (_settings: PluginImageObjectSettings) => {
+    setSettings: (settings: PluginImageObjectSettings) => {
+        pluginImage.globalBackground = settings.globalBackground;
+        pluginImage.globalBackgroundSettings = settings.globalBackgroundSettings;
         return pluginImage;
     },
     renderer: PluginImageRenderer,
@@ -38,7 +41,7 @@ export const pluginImage: PluginImage = {
 function PluginImageRenderer(props: Props, _ref?: React.LegacyRef<HTMLDivElement>) {
     const {
         id,
-        data: {alt, background, src, preserveAspectRatio},
+        data: {alt, background, backgroundSettings, src, preserveAspectRatio},
         layout,
     } = props;
 
@@ -58,7 +61,9 @@ function PluginImageRenderer(props: Props, _ref?: React.LegacyRef<HTMLDivElement
 
     const {style} = usePreparedWrapSettings({
         widgetBackground: background,
-        globalBackground: props.background,
+        globalBackground: pluginImage.globalBackground,
+        widgetBackgroundSettings: backgroundSettings,
+        globalBackgroundSettings: pluginImage.globalBackgroundSettings,
         defaultOldColor: CustomPaletteBgColors.NONE,
     });
 

src/ui/components/DashKit/plugins/Text/Text.tsx

@@ -80,14 +80,17 @@ const useWatchDomResizeObserver = ({
 
 type PluginTextObjectSettings = CommonPluginSettings & DashkitPluginTextObjectSettings;
 
-type PluginText = Plugin<Props> & {
-    setSettings: (settings: PluginTextObjectSettings) => PluginText;
-};
+type PluginText = Plugin<Props> &
+    CommonPluginSettings & {
+        setSettings: (settings: PluginTextObjectSettings) => PluginText;
+    };
 const textPlugin: PluginText = {
     ...pluginText,
     setSettings(settings: PluginTextObjectSettings) {
-        const {apiHandler} = settings;
+        const {apiHandler, globalBackground, globalBackgroundSettings} = settings;
         pluginText._apiHandler = apiHandler;
+        textPlugin.globalBackground = globalBackground;
+        textPlugin.globalBackgroundSettings = globalBackgroundSettings;
         return textPlugin;
     },
     renderer: function Wrapper(
@@ -193,7 +196,9 @@ const textPlugin: PluginText = {
 
         const {style, hasBgColor} = usePreparedWrapSettings({
             widgetBackground: data.background,
-            globalBackground: props.background,
+            globalBackground: textPlugin.globalBackground,
+            widgetBackgroundSettings: data.backgroundSettings,
+            globalBackgroundSettings: textPlugin.globalBackgroundSettings,
             defaultOldColor: CustomPaletteBgColors.NONE,
         });