fix: fix visual accessibility, rework copy button icon

src/core/base/base.less

@@ -12,6 +12,7 @@ html {
 
   --uip-plugin-fg: #000;
   --uip-plugin-bg: #f5f2f0;
+  --uip-plugin-hover-fg: #0086cc;
   --uip-plugin-divider: #ccc;
   --uip-plugin-header-bg: #ccc;
   --uip-plugin-header-fg: #000;

src/core/button/plugin-button.less

@@ -0,0 +1,17 @@
+.uip-plugin-button {
+  position: relative;
+  transition: color 0.25s ease-in-out;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -4px;
+    z-index: -1;
+  }
+
+  .uip-plugin-header-toolbar &:hover {
+    color: var(--uip-plugin-hover-fg);
+  }
+}
+
+

src/core/panel/plugin-panel.header.less

@@ -46,6 +46,7 @@
     height: 100%;
     z-index: 1;
 
+    cursor: pointer;
     background: transparent;
     border: none;
     box-shadow: none;

src/core/registration.less

@@ -3,5 +3,6 @@
 @import './base/plugin.less';
 
 @import './panel/plugin-panel.less';
+@import './button/plugin-button.less';
 
 @import './preview/preview.less';

src/plugins/copy/copy-button.icon.tsx

@@ -1,8 +1,7 @@
 import React from 'jsx-dom';
 
 export const CopyIcon = (): SVGElement => (
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#5f5f5f" stroke-width="1.25" viewBox="0 0 24 24">
-    <rect width="12" height="15" x="4" y="3" fill="#fff" rx="2"/>
-    <rect width="12" height="15" x="8" y="7" fill="#fff" rx="2"/>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M19.5 16.5v-12l-.75-.75H9l-.75.75v3h-3l-.75.75v12l.75.75H15l.75-.75v-3h3l.75-.75Zm-3.75-.75v-7.5L15 7.5H9.75V5.25H18v10.5h-2.25ZM6 9h8.25v10.5H6V9Z"/>
   </svg>
 ) as SVGElement;

src/plugins/copy/copy-button.less

@@ -6,6 +6,7 @@ uip-copy {
   cursor: pointer;
 
   > svg {
+    fill: currentColor;
     width: 100%;
     height: 100%;
   }