From 3311f4f01cc3caab7134637bf8276b3d885cdaa2 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 30 Jan 2025 22:44:11 +0200
Subject: [PATCH] style(next): restyle icon buttons

---
 src/public/stylesheets/theme-next-dark.css  |  4 +++
 src/public/stylesheets/theme-next-light.css |  4 +++
 src/public/stylesheets/theme-next/base.css  |  3 +++
 src/public/stylesheets/theme-next/forms.css | 30 +++++++++++++++++++++
 4 files changed, 41 insertions(+)

diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css
index 84494d59d..4b08dfe13 100644
--- a/src/public/stylesheets/theme-next-dark.css
+++ b/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;
diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css
index c61cacfe7..1227ed31e 100644
--- a/src/public/stylesheets/theme-next-light.css
+++ b/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;
diff --git a/src/public/stylesheets/theme-next/base.css b/src/public/stylesheets/theme-next/base.css
index bc71e00d6..acb1250c2 100644
--- a/src/public/stylesheets/theme-next/base.css
+++ b/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;
 }
diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css
index db381bd4f..bac35a6f7 100644
--- a/src/public/stylesheets/theme-next/forms.css
+++ b/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
  */