Merge pull request #1650 from terrestris/tool-menu-adaptability

feat: adds auto-adjustability of color contrast in ToolMenu
terrestris · Jun 14, 2024 · 559aed6 · 559aed6
2 parents 4f8d6b6 + 5c5c41e
commit 559aed6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/bootstrap.tsx b/src/bootstrap.tsx
@@ -697,6 +697,12 @@ const renderApp = async () => {
       }
     });
 
+    if (Color(style['--secondaryColor'])?.isLight() && Color(style['--primaryColor'])?.isLight()) {
+      style['--complementaryColor'] = (Color(style['--complementaryColor']).darken(0.5).hexa());
+    } else if (Color(style['--secondaryColor'])?.isDark() && Color(style['--primaryColor'])?.isDark()) {
+      style['--complementaryColor'] = (Color(style['--complementaryColor']).lighten(0.5).hexa());
+    }
+
     Object.keys(style).forEach((key: any) => {
       document.body.style.setProperty(key, style[key as keyof ThemeProperties] as string);
     });

diff --git a/src/components/ToolMenu/index.less b/src/components/ToolMenu/index.less
@@ -15,6 +15,7 @@
 
     &:hover {
       color: var(--secondaryColor);
+      font-weight: bold;
     }
 
     svg {
@@ -107,8 +108,14 @@
       }
 
       &.ant-collapse-item-active {
-        .ant-collapse-header-text span {
+        .ant-collapse-header {
+          background-color: var(--secondaryColor);
+        }
+
+        .ant-collapse-header-text> ,
+        .ant-collapse-expand-icon {
           font-weight: bolder;
+          color: var(--complementaryColor);
         }
       }
     }