feat: updated toolbar button style

src/components/Toolbar.css

@@ -42,9 +42,12 @@
 }
 
 .toolbar button {
+  --toolbar-button-bg: transparent;
+  --toolbar-button-fg: #e0e0e0;
   background: transparent;
   border: none;
-  color: #e0e0e0;
+  background-color: var(--toolbar-button-bg);
+  color: var(--toolbar-button-fg);
   margin: 0 5px;
   width: 28px;
   height: 28px;
@@ -55,10 +58,48 @@
   border-radius: 3px;
   font-size: 14px;
   pointer-events: auto;
+  transition:
+    background-color 0.18s ease,
+    color 0.18s ease,
+    transform 0.12s ease,
+    box-shadow 0.18s ease;
+}
+
+.toolbar button svg {
+  transition: color 0.18s ease, fill 0.18s ease;
 }
 
 .toolbar button:hover {
-  background-color: #3a3a3a;
+  --toolbar-button-bg: #3a3a3a;
+}
+
+.toolbar button.active,
+.toolbar .tool-button.active {
+  --toolbar-button-bg: #e0e0e0;
+  --toolbar-button-fg: #2d2d2d;
+}
+
+.toolbar button.tool-button.active {
+  background-color: var(--toolbar-button-bg);
+  color: var(--toolbar-button-fg);
+}
+
+.toolbar button.active:hover,
+.toolbar .tool-button.active:hover {
+  --toolbar-button-bg: #f0f0f0;
+}
+
+.toolbar button.active:active,
+.toolbar .tool-button.active:active {
+  --toolbar-button-bg: #d6d6d6;
+}
+
+.toolbar button:focus,
+.toolbar button:focus-visible,
+.toolbar .tool-button:focus,
+.toolbar .tool-button:focus-visible {
+  outline: none;
+  box-shadow: none;
 }
 
 .toolbar button:disabled {
@@ -67,7 +108,7 @@
 }
 
 .toolbar button:active {
-  background-color: #5a5a5a;
+  --toolbar-button-bg: #5a5a5a;
   transform: scale(0.95);
 }
 
@@ -75,6 +116,21 @@
   color: #ff4444;
 }
 
+.toolbar .record-button.active {
+  --toolbar-button-bg: #ffd7d9;
+  --toolbar-button-fg: #d9363e;
+}
+
+.toolbar .record-button.active:hover {
+  --toolbar-button-bg: #ffc4c7;
+  --toolbar-button-fg: #c92d35;
+}
+
+.toolbar .record-button.active:active {
+  --toolbar-button-bg: #ffb0b4;
+  --toolbar-button-fg: #b8242d;
+}
+
 .toolbar-separator {
   width: 1px;
   height: 20px;
@@ -206,4 +262,4 @@
   color: #e0e0e0;
   min-width: 20px;
   text-align: center;
-}
+}

src/components/Toolbar.tsx

@@ -994,8 +994,7 @@ const Toolbar: React.FC = () => {
         )}
         <button
           title={isRecording ? "Stop Recording" : "Record"}
-          className={`tool-button ${isRecording ? 'active' : ''}`}
-          style={isRecording ? { color: 'red' } : undefined}
+          className={`tool-button record-button ${isRecording ? 'active' : ''}`}
           onClick={handleRecordClick}
         >
           <FaCircle />

src/components/piano-roll/PianoRoll.css

@@ -138,8 +138,46 @@
 }
 
 .piano-roll-toolbar .tool-button {
+  --toolbar-button-bg: transparent;
+  --toolbar-button-fg: #999;
   width: 20px;
   height: 20px;
+  background-color: var(--toolbar-button-bg);
+  color: var(--toolbar-button-fg);
+  transition:
+    background-color 0.18s ease,
+    color 0.18s ease,
+    transform 0.12s ease,
+    box-shadow 0.18s ease;
+}
+
+.piano-roll-toolbar .tool-button svg {
+  transition: color 0.18s ease, fill 0.18s ease;
+}
+
+.piano-roll-toolbar .tool-button:hover {
+  --toolbar-button-bg: #3a3a3a;
+  --toolbar-button-fg: #e0e0e0;
+}
+
+.piano-roll-toolbar .tool-button.active {
+  --toolbar-button-bg: #e0e0e0;
+  --toolbar-button-fg: #2d2d2d;
+  background-color: var(--toolbar-button-bg);
+  color: var(--toolbar-button-fg);
+}
+
+.piano-roll-toolbar .tool-button.active:hover {
+  --toolbar-button-bg: #f0f0f0;
+}
+
+.piano-roll-toolbar .tool-button:active {
+  --toolbar-button-bg: #5a5a5a;
+  transform: scale(0.95);
+}
+
+.piano-roll-toolbar .tool-button.active:active {
+  --toolbar-button-bg: #d6d6d6;
 }
 
 /* Override pointer-events for piano roll toolbar sections */
@@ -426,4 +464,4 @@
   color: #e0e0e0;
   min-width: 20px;
   text-align: center;
-}
+}