style(next): restyle icon buttons

src/public/stylesheets/theme-next-dark.css

@@ -31,6 +31,10 @@
     --cmd-button-keyboard-shortcut-color: white;
     --cmd-button-disabled-opacity: .5;
 
+    --icon-button-color: currentColor;
+    --icon-button-hover-background: var(--hover-item-background-color);
+    --icon-button-hover-color: var(--hover-item-text-color);
+
     --muted-text-color: #bbb;
 
     --input-background-color: #ffffff12;

src/public/stylesheets/theme-next-light.css

@@ -31,6 +31,10 @@
     --cmd-button-keyboard-shortcut-color: black;
     --cmd-button-disabled-opacity: .5;
 
+    --icon-button-color: currentColor;
+    --icon-button-hover-background: var(--hover-item-background-color);
+    --icon-button-hover-color: var(--hover-item-text-color);
+
     --muted-text-color: #666;
 
     --input-background-color: #00000012;

src/public/stylesheets/theme-next/base.css

@@ -58,6 +58,9 @@
 
     --help-backdrop-blur: 10px;
 
+    --icon-button-size: 32px;
+    --icon-button-icon-ratio: .65;
+
     /* Theme capabilities */
     --tab-note-icons: true;
 }

src/public/stylesheets/theme-next/forms.css

@@ -74,6 +74,36 @@ button.btn.btn-success kbd {
     letter-spacing: .5pt;
 }
 
+/*
+ * Icon buttons
+ */
+
+:root .icon-action:not(.global-menu-button) {
+    width: var(--icon-button-size);
+    height: var(--icon-button-size);
+    border: unset;
+    border-radius: 8px;
+    padding: 0;
+    text-align: center;
+    color: var(--icon-button-color);
+}
+
+/* The icon */
+:root .icon-action:not(.global-menu-button)::before {
+    display: block;
+    line-height: var(--icon-button-size);
+    font-size: calc(var(--icon-button-size) * var(--icon-button-icon-ratio));
+}
+
+:root .icon-action:not(.global-menu-button):hover {
+    background: var(--icon-button-hover-background);
+    color: var(--icon-button-hover-color);
+}
+
+:root .icon-action:not(.global-menu-button):active::before {
+    transform: scale(.85);
+}
+
 /* 
  * Input boxes
  */