From 459ccffad39c2d23621b8ac50ad2f9b8a03b0519 Mon Sep 17 00:00:00 2001
From: d3m1d0v <d3m1d0v@yandex-team.ru>
Date: Tue, 3 Dec 2024 16:40:16 +0300
Subject: [PATCH 1/5] feat(bundle): update icon of text color menu item in
 toolbar

---
 .../toolbar/ToolbarButtonWithPopupMenu.tsx    |  6 +++--
 src/bundle/toolbar/custom/ToolbarColors.scss  |  6 +++++
 src/bundle/toolbar/custom/ToolbarColors.tsx   |  1 +
 src/icons/TextColor.tsx                       | 27 +++++++++++++++++++
 src/icons/index.ts                            |  5 ++--
 5 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 src/icons/TextColor.tsx

diff --git a/src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx b/src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx
index f225d53e..abb54a5e 100644
--- a/src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx
+++ b/src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx
@@ -26,6 +26,7 @@ export type MenuItem = {
 export type ToolbarButtonWithPopupMenuProps = Omit<
     ToolbarBaseProps<ActionStorage> & {
         icon: ToolbarIconData;
+        iconClassName?: string;
         title: string | (() => string);
         menuItems: MenuItem[];
     },
@@ -37,6 +38,7 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
     focus,
     onClick,
     icon,
+    iconClassName,
     title,
     menuItems,
 }) => {
@@ -48,7 +50,7 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
                 menuItems.map((i) => ({...i, group: i.group || ''})),
                 'group',
             ),
-        [menuItems, groupBy],
+        [menuItems],
     );
 
     const someActive = menuItems.some(
@@ -81,7 +83,7 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
                     className={b(null, [className])}
                     onClick={toggleOpen}
                 >
-                    <Icon data={icon.data} size={icon.size} />
+                    <Icon data={icon.data} size={icon.size} className={iconClassName} />
                     {''}
                     <Icon data={ChevronDown} />
                 </Button>
diff --git a/src/bundle/toolbar/custom/ToolbarColors.scss b/src/bundle/toolbar/custom/ToolbarColors.scss
index 1b573159..6673c2a9 100644
--- a/src/bundle/toolbar/custom/ToolbarColors.scss
+++ b/src/bundle/toolbar/custom/ToolbarColors.scss
@@ -9,4 +9,10 @@ $colors: ('gray', 'yellow', 'orange', 'red', 'green', 'blue', 'violet');
     &__item-icon_color_default {
         color: var(--g-color-text-primary);
     }
+
+    @each $name in $colors {
+        &__menu-icon_color_#{$name} {
+            --g-md-text-color-icon-color: var(--yfm-colorify-#{$name});
+        }
+    }
 }
diff --git a/src/bundle/toolbar/custom/ToolbarColors.tsx b/src/bundle/toolbar/custom/ToolbarColors.tsx
index 68b087a5..69207b95 100644
--- a/src/bundle/toolbar/custom/ToolbarColors.tsx
+++ b/src/bundle/toolbar/custom/ToolbarColors.tsx
@@ -77,6 +77,7 @@ export const ToolbarColors: React.FC<ToolbarColorsProps> = (props) => {
             title={i18n('colorify')}
             menuItems={items}
             icon={textColorIcon}
+            iconClassName={b('menu-icon', {color: currentColor})}
         />
     );
 };
diff --git a/src/icons/TextColor.tsx b/src/icons/TextColor.tsx
new file mode 100644
index 00000000..6bbea4aa
--- /dev/null
+++ b/src/icons/TextColor.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type {SVGProps} from 'react';
+const TextColor = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={16}
+        height={16}
+        fill="none"
+        viewBox="0 0 16 16"
+        {...props}
+    >
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.0002 2.25C7.45455 2.25 6.96959 2.59776 6.79454 3.11457L4.28985 10.5094C4.15696 10.9017 4.36728 11.3275 4.7596 11.4604C5.15192 11.5932 5.57768 11.3829 5.71056 10.9906L6.3848 9L9.61561 9L10.2898 10.9906C10.4227 11.3829 10.8485 11.5932 11.2408 11.4604C11.6331 11.3275 11.8434 10.9017 11.7106 10.5094L9.20587 3.11457C9.03082 2.59776 8.54586 2.25 8.0002 2.25ZM9.10754 7.5L8.0002 4.23071L6.89286 7.5L9.10754 7.5Z"
+            fill="currentColor"
+        />
+        <path
+            d="M13 13.5L3 13.5"
+            stroke="var(--g-md-text-color-icon-color, currentColor)"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);
+export default TextColor;
diff --git a/src/icons/index.ts b/src/icons/index.ts
index 61c7cb6e..b2637a2a 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -3,8 +3,9 @@ import GPTLoading from './GPTLoading';
 import MermaidIcon from './Mermaid';
 import MonoIcon from './Mono';
 import TabsIcon from './Tabs';
+import TextColorIcon from './TextColor';
 
-export {MermaidIcon, MonoIcon, TabsIcon, GPTIcon, GPTLoading};
+export {MermaidIcon, MonoIcon, TabsIcon, GPTIcon, GPTLoading, TextColorIcon};
 
 export {
     ArrowUturnCcwLeft as UndoIcon,
@@ -31,8 +32,6 @@ export {
     TextOutdent as LiftIcon,
     TextIndent as SinkIcon,
     //
-    Font as TextColorIcon,
-    //
     Link as LinkIcon,
     QuoteClose as QuoteIcon,
     Scissors as CutIcon,

From b2eaf31a9d46ecce6a694e455518817011754cc2 Mon Sep 17 00:00:00 2001
From: d3m1d0v <d3m1d0v@yandex-team.ru>
Date: Wed, 4 Dec 2024 17:31:13 +0300
Subject: [PATCH 2/5] upd1

---
 src/bundle/toolbar/custom/ToolbarColors.scss | 3 ++-
 src/icons/index.ts                           | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/bundle/toolbar/custom/ToolbarColors.scss b/src/bundle/toolbar/custom/ToolbarColors.scss
index 6673c2a9..a33bdc44 100644
--- a/src/bundle/toolbar/custom/ToolbarColors.scss
+++ b/src/bundle/toolbar/custom/ToolbarColors.scss
@@ -12,7 +12,8 @@ $colors: ('gray', 'yellow', 'orange', 'red', 'green', 'blue', 'violet');
 
     @each $name in $colors {
         &__menu-icon_color_#{$name} {
-            --g-md-text-color-icon-color: var(--yfm-colorify-#{$name});
+            color: var(--yfm-colorify-#{$name});
+            // --g-md-text-color-icon-color: var(--yfm-colorify-#{$name});
         }
     }
 }
diff --git a/src/icons/index.ts b/src/icons/index.ts
index b2637a2a..2a309d34 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -3,9 +3,9 @@ import GPTLoading from './GPTLoading';
 import MermaidIcon from './Mermaid';
 import MonoIcon from './Mono';
 import TabsIcon from './Tabs';
-import TextColorIcon from './TextColor';
+// import TextColorIcon from './TextColor';
 
-export {MermaidIcon, MonoIcon, TabsIcon, GPTIcon, GPTLoading, TextColorIcon};
+export {MermaidIcon, MonoIcon, TabsIcon, GPTIcon, GPTLoading};
 
 export {
     ArrowUturnCcwLeft as UndoIcon,
@@ -32,6 +32,8 @@ export {
     TextOutdent as LiftIcon,
     TextIndent as SinkIcon,
     //
+    Font as TextColorIcon,
+    //
     Link as LinkIcon,
     QuoteClose as QuoteIcon,
     Scissors as CutIcon,

From a1aa40bf55a85808ef414996ca30986339cae6a6 Mon Sep 17 00:00:00 2001
From: d3m1d0v <d3m1d0v@yandex-team.ru>
Date: Thu, 5 Dec 2024 12:27:43 +0300
Subject: [PATCH 3/5] upd2

---
 src/icons/index.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/icons/index.ts b/src/icons/index.ts
index 2a309d34..5a0bbc82 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -3,9 +3,9 @@ import GPTLoading from './GPTLoading';
 import MermaidIcon from './Mermaid';
 import MonoIcon from './Mono';
 import TabsIcon from './Tabs';
-// import TextColorIcon from './TextColor';
+import TextColorIcon from './TextColor';
 
-export {MermaidIcon, MonoIcon, TabsIcon, GPTIcon, GPTLoading};
+export {MermaidIcon, MonoIcon, TabsIcon, GPTIcon, GPTLoading, TextColorIcon};
 
 export {
     ArrowUturnCcwLeft as UndoIcon,
@@ -32,7 +32,7 @@ export {
     TextOutdent as LiftIcon,
     TextIndent as SinkIcon,
     //
-    Font as TextColorIcon,
+    // Font as TextColorIcon,
     //
     Link as LinkIcon,
     QuoteClose as QuoteIcon,

From 5293044eb7def3491d481929e1e58a84baa55863 Mon Sep 17 00:00:00 2001
From: d3m1d0v <d3m1d0v@yandex-team.ru>
Date: Thu, 5 Dec 2024 16:49:49 +0300
Subject: [PATCH 4/5] upd3

---
 .../toolbar/ToolbarButtonWithPopupMenu.tsx    |  4 ++-
 src/bundle/toolbar/custom/ToolbarColors.scss  | 16 ++++++-----
 src/bundle/toolbar/custom/ToolbarColors.tsx   |  1 +
 src/icons/TextColor.tsx                       | 27 -------------------
 src/icons/index.ts                            |  5 ++--
 5 files changed, 15 insertions(+), 38 deletions(-)
 delete mode 100644 src/icons/TextColor.tsx

diff --git a/src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx b/src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx
index abb54a5e..d085209a 100644
--- a/src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx
+++ b/src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx
@@ -27,6 +27,7 @@ export type ToolbarButtonWithPopupMenuProps = Omit<
     ToolbarBaseProps<ActionStorage> & {
         icon: ToolbarIconData;
         iconClassName?: string;
+        chevronIconClassName?: string;
         title: string | (() => string);
         menuItems: MenuItem[];
     },
@@ -39,6 +40,7 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
     onClick,
     icon,
     iconClassName,
+    chevronIconClassName,
     title,
     menuItems,
 }) => {
@@ -85,7 +87,7 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
                 >
                     <Icon data={icon.data} size={icon.size} className={iconClassName} />
                     {''}
-                    <Icon data={ChevronDown} />
+                    <Icon data={ChevronDown} className={chevronIconClassName} />
                 </Button>
             </ActionTooltip>
             <Popup anchorRef={buttonRef} open={popupOpen} onClose={hide}>
diff --git a/src/bundle/toolbar/custom/ToolbarColors.scss b/src/bundle/toolbar/custom/ToolbarColors.scss
index a33bdc44..e5e8bcd4 100644
--- a/src/bundle/toolbar/custom/ToolbarColors.scss
+++ b/src/bundle/toolbar/custom/ToolbarColors.scss
@@ -2,18 +2,20 @@ $colors: ('gray', 'yellow', 'orange', 'red', 'green', 'blue', 'violet');
 
 .g-md-toolbar-colors {
     @each $name in $colors {
+        &__menu-icon_color_#{$name} {
+            color: var(--yfm-colorify-#{$name});
+        }
+
+        &__chevron-icon_color_#{$name} {
+            color: var(--yfm-colorify-#{$name});
+        }
+
         &__item-icon_color_#{$name} {
             color: var(--yfm-colorify-#{$name});
         }
     }
+
     &__item-icon_color_default {
         color: var(--g-color-text-primary);
     }
-
-    @each $name in $colors {
-        &__menu-icon_color_#{$name} {
-            color: var(--yfm-colorify-#{$name});
-            // --g-md-text-color-icon-color: var(--yfm-colorify-#{$name});
-        }
-    }
 }
diff --git a/src/bundle/toolbar/custom/ToolbarColors.tsx b/src/bundle/toolbar/custom/ToolbarColors.tsx
index 69207b95..0ccc1380 100644
--- a/src/bundle/toolbar/custom/ToolbarColors.tsx
+++ b/src/bundle/toolbar/custom/ToolbarColors.tsx
@@ -78,6 +78,7 @@ export const ToolbarColors: React.FC<ToolbarColorsProps> = (props) => {
             menuItems={items}
             icon={textColorIcon}
             iconClassName={b('menu-icon', {color: currentColor})}
+            chevronIconClassName={b('chevron-icon', {color: currentColor})}
         />
     );
 };
diff --git a/src/icons/TextColor.tsx b/src/icons/TextColor.tsx
deleted file mode 100644
index 6bbea4aa..00000000
--- a/src/icons/TextColor.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import type {SVGProps} from 'react';
-const TextColor = (props: SVGProps<SVGSVGElement>) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width={16}
-        height={16}
-        fill="none"
-        viewBox="0 0 16 16"
-        {...props}
-    >
-        <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M8.0002 2.25C7.45455 2.25 6.96959 2.59776 6.79454 3.11457L4.28985 10.5094C4.15696 10.9017 4.36728 11.3275 4.7596 11.4604C5.15192 11.5932 5.57768 11.3829 5.71056 10.9906L6.3848 9L9.61561 9L10.2898 10.9906C10.4227 11.3829 10.8485 11.5932 11.2408 11.4604C11.6331 11.3275 11.8434 10.9017 11.7106 10.5094L9.20587 3.11457C9.03082 2.59776 8.54586 2.25 8.0002 2.25ZM9.10754 7.5L8.0002 4.23071L6.89286 7.5L9.10754 7.5Z"
-            fill="currentColor"
-        />
-        <path
-            d="M13 13.5L3 13.5"
-            stroke="var(--g-md-text-color-icon-color, currentColor)"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-        />
-    </svg>
-);
-export default TextColor;
diff --git a/src/icons/index.ts b/src/icons/index.ts
index 5a0bbc82..61c7cb6e 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -3,9 +3,8 @@ import GPTLoading from './GPTLoading';
 import MermaidIcon from './Mermaid';
 import MonoIcon from './Mono';
 import TabsIcon from './Tabs';
-import TextColorIcon from './TextColor';
 
-export {MermaidIcon, MonoIcon, TabsIcon, GPTIcon, GPTLoading, TextColorIcon};
+export {MermaidIcon, MonoIcon, TabsIcon, GPTIcon, GPTLoading};
 
 export {
     ArrowUturnCcwLeft as UndoIcon,
@@ -32,7 +31,7 @@ export {
     TextOutdent as LiftIcon,
     TextIndent as SinkIcon,
     //
-    // Font as TextColorIcon,
+    Font as TextColorIcon,
     //
     Link as LinkIcon,
     QuoteClose as QuoteIcon,

From d2484f1eff14a18a6bd021b5fc15c81d6e1afd43 Mon Sep 17 00:00:00 2001
From: d3m1d0v <d3m1d0v@yandex-team.ru>
Date: Thu, 5 Dec 2024 17:31:00 +0300
Subject: [PATCH 5/5] upd4

---
 src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx | 15 +++++++++++++--
 src/bundle/toolbar/custom/ToolbarColors.tsx       |  1 +
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx b/src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx
index d085209a..03d0afdd 100644
--- a/src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx
+++ b/src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx
@@ -30,6 +30,8 @@ export type ToolbarButtonWithPopupMenuProps = Omit<
         chevronIconClassName?: string;
         title: string | (() => string);
         menuItems: MenuItem[];
+        /** @default 'classic' */
+        _selectionType?: 'classic' | 'light';
     },
     'editor'
 >;
@@ -43,6 +45,7 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
     chevronIconClassName,
     title,
     menuItems,
+    _selectionType,
 }) => {
     const buttonRef = React.useRef<HTMLButtonElement>(null);
     const [open, , hide, toggleOpen] = useBooleanState(false);
@@ -68,6 +71,14 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
         }
     }, [hide, shouldForceHide]);
 
+    const [btnView, btnSelected] =
+        _selectionType === 'light'
+            ? ([
+                  popupOpen ? 'normal' : someActive ? 'flat-action' : 'flat',
+                  popupOpen && someActive,
+              ] as const)
+            : ([someActive || popupOpen ? 'normal' : 'flat', someActive] as const);
+
     return (
         <>
             <ActionTooltip
@@ -79,8 +90,8 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
                 <Button
                     size="m"
                     ref={buttonRef}
-                    view={someActive || popupOpen ? 'normal' : 'flat'}
-                    selected={someActive}
+                    view={btnView}
+                    selected={btnSelected}
                     disabled={everyDisabled}
                     className={b(null, [className])}
                     onClick={toggleOpen}
diff --git a/src/bundle/toolbar/custom/ToolbarColors.tsx b/src/bundle/toolbar/custom/ToolbarColors.tsx
index 0ccc1380..1633e6c9 100644
--- a/src/bundle/toolbar/custom/ToolbarColors.tsx
+++ b/src/bundle/toolbar/custom/ToolbarColors.tsx
@@ -77,6 +77,7 @@ export const ToolbarColors: React.FC<ToolbarColorsProps> = (props) => {
             title={i18n('colorify')}
             menuItems={items}
             icon={textColorIcon}
+            _selectionType="light"
             iconClassName={b('menu-icon', {color: currentColor})}
             chevronIconClassName={b('chevron-icon', {color: currentColor})}
         />