adjust AttachmentsDropup styles

packages/editor/src/components/CodeMirrorEditor/Toolbar/AttachmentsDropup.module.scss

@@ -0,0 +1,21 @@
+.btn-attachment-toggle {
+  $color-active: var(--bs-tertiary-color);
+  $color-active-rgb: var(--bs-tertiary-color-rgb);
+
+  --bs-btn-color: var(--bs-tertiary-color);
+  --bs-btn-bg: var(--bs-secondary-bg);
+
+  --bs-btn-hover-color: #{$color-active};
+  --bs-btn-hover-bg: rgba(#{$color-active-rgb}, 0.2);
+
+  --bs-btn-active-color: #{$color-active};
+  // --bs-btn-active-bg: transparent;
+
+  --bs-btn-border-width: 0;
+
+  &:global {
+    &:hover {
+      --bs-btn-active-bg: rgba(#{$color-active-rgb}, 0.2);
+    }
+  }
+}

packages/editor/src/components/CodeMirrorEditor/Toolbar/AttachmentsDropup.tsx

@@ -13,6 +13,11 @@ import type { GlobalCodeMirrorEditorKey } from '../../../consts';
 import { AttachmentsDropdownItem } from './AttachmentsDropdownItem';
 import { LinkEditButton } from './LinkEditButton';
 
+import styles from './AttachmentsDropup.module.scss';
+
+const btnAttachmentToggleClass = styles['btn-attachment-toggle'];
+
+
 type Props = {
   editorKey: string | GlobalCodeMirrorEditorKey,
   acceptedUploadFileType: AcceptedUploadFileType,
@@ -27,7 +32,7 @@ export const AttachmentsDropup = (props: Props): JSX.Element => {
   return (
     <>
       <Dropdown isOpen={isOpen} toggle={() => setOpen(!isOpen)} direction="up" className="lh-1">
-        <DropdownToggle className="btn-toolbar-button rounded-circle">
+        <DropdownToggle className={`${btnAttachmentToggleClass} btn-toolbar-button rounded-circle`} color="unset">
           <span className="material-symbols-outlined fs-6">add</span>
         </DropdownToggle>
         <DropdownMenu>