From 8b09523510c6b5ea9e04dc3102b63c30a97824b5 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Fri, 14 Mar 2025 15:30:00 -0500
Subject: [PATCH] DEV: Button stylesheet cleanup (#50)

---
 scss/buttons.scss           | 109 ++++--------------------------------
 scss/color-exploration.scss |   8 +++
 scss/header.scss            |   5 +-
 3 files changed, 21 insertions(+), 101 deletions(-)

diff --git a/scss/buttons.scss b/scss/buttons.scss
index cfbcaca..4447084 100644
--- a/scss/buttons.scss
+++ b/scss/buttons.scss
@@ -6,33 +6,6 @@
   transition: none;
 }
 
-.btn-default,
-.btn-primary,
-.btn-danger,
-.select-kit .select-kit-header {
-  //using this hard coded value to make standalone icon-only btns perfect circles; I can't target the class no-text see below line 18
-  padding: var(--spacing-block-s) 0.665rem;
-
-  //theres buttons with text hidden that dont have the no-text class, and my :has workaround for some reason refuses to work
-  // &.no-text,
-  // .btn-icon-text:has(.d-button-label) {
-  //   padding-inline: 0.665rem;
-  // }
-}
-
-.btn.btn-transparent.btn-icon-text {
-  background-color: transparent;
-  .d-icon {
-    color: inherit;
-  }
-  &.--active .d-icon {
-    color: var(--accent-color);
-  }
-  &:hover {
-    box-shadow: none;
-  }
-}
-
 .sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
   background: var(--accent-color);
   &:hover {
@@ -48,46 +21,29 @@
   }
 }
 
-.discourse-no-touch .btn.post-action-menu__reply:hover {
-  box-shadow: none;
-}
-
-.post-info.edits .btn-flat {
-  background-color: transparent;
-  &:hover {
-    box-shadow: none;
-  }
-}
-
 .discourse-no-touch .btn-default.sidebar-new-topic-button,
-.discourse-no-touch .interface-color-selector-content,
-.btn-default,
-.btn-icon-text,
-.select-kit .select-kit-header.btn-default {
+.discourse-no-touch .btn-default,
+.discourse-no-touch .select-kit .select-kit-header.btn-default {
   background: var(--primary-100);
   .d-icon {
     color: var(--accent-color);
   }
 
   &:hover {
-    .discourse-no-touch & {
-      border-color: transparent;
-      box-shadow: 0px 0px 8px 1px var(--button-box-shadow);
-      background: var(--d-content-background);
+    border-color: transparent;
+    box-shadow: 0px 0px 8px 1px var(--button-box-shadow);
+    background: var(--d-content-background);
+    color: var(--accent-color);
+    .d-icon {
       color: var(--accent-color);
-      .d-icon {
-        color: var(--accent-color);
-      }
     }
   }
   &:focus-visible {
-    .discourse-no-touch & {
-      background: var(--d-content-background);
+    background: var(--d-content-background);
+    color: var(--accent-color);
+    box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
+    .d-icon {
       color: var(--accent-color);
-      box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
-      .d-icon {
-        color: var(--accent-color);
-      }
     }
   }
   &:active:not(:hover, :focus) {
@@ -128,46 +84,3 @@
     background: oklch(from var(--accent-color) 30% c h) !important;
   }
 }
-
-.post-controls {
-  svg.d-icon:not(.d-icon-heart, .d-icon-far-heart) {
-    color: inherit !important; //something we should honestly implement in core imo, when do we ever NOT want the same colour for icon and text?
-  }
-}
-
-.discourse-reactions-double-button:hover .reactions-counter {
-  color: var(--love);
-}
-
-.discourse-no-touch
-  .discourse-reactions-actions.has-reacted
-  .discourse-reactions-double-button:hover,
-.discourse-no-touch
-  .discourse-reactions-actions.has-reacted.can-toggle-reaction
-  .discourse-reactions-reaction-button:hover
-  .reaction-button,
-.discourse-no-touch
-  .discourse-reactions-actions.has-reacted:not(.can-toggle-reaction)
-  .discourse-reactions-reaction-button:hover
-  .reaction-button {
-  background: var(--love-low);
-  .d-icon-heart {
-    color: var(--love);
-  }
-}
-
-//undoing the outline for select-kit, since Im using a custom visual cue
-.select-kit.single-select.is-expanded .select-kit-header:not(.btn),
-.select-kit.single-select .select-kit-header:not(.btn):focus,
-.select-kit.single-select .select-kit-header:not(.btn):active {
-  outline: transparent;
-  border-color: var(--accent-color);
-}
-
-.fk-d-menu__inner-content {
-  .btn-icon-text.btn-flat:hover {
-    background-color: var(--d-selected);
-    box-shadow: none;
-    color: var(--primary);
-  }
-}
diff --git a/scss/color-exploration.scss b/scss/color-exploration.scss
index eae7647..e291bcc 100644
--- a/scss/color-exploration.scss
+++ b/scss/color-exploration.scss
@@ -41,6 +41,14 @@
     oklch(from var(--accent-color) calc(l * 1.6) calc(c * 0.25) h),
     oklch(from var(--accent-color) calc(l * 0.6) calc(c * 0.25) h)
   );
+  --tertiary-300: light-dark(
+    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h),
+    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h)
+  );
+  --tertiary-high: light-dark(
+    oklch(from var(--accent-color) calc(l * 1) c h),
+    oklch(from var(--accent-color) calc(l * 1) c h)
+  );
   --d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color);
   --search-color: light-dark(
     oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
diff --git a/scss/header.scss b/scss/header.scss
index e48756e..a770ada 100644
--- a/scss/header.scss
+++ b/scss/header.scss
@@ -44,8 +44,7 @@
   .d-header-icons
   .header-color-scheme-toggle
   .-expanded
-  > .d-icon,
-.discourse-no-touch .btn-flat:hover .d-icon {
+  > .d-icon {
   color: var(--header_primary-medium);
 }
 
@@ -79,7 +78,7 @@
 .user-menu .quick-access-panel li.do-not-disturb,
 .menu-panel .panel-body-bottom .btn,
 .menu-panel .panel-body-bottom .btn:hover {
-  background-color: var(--d-content-background);
+  // background-color: var(--d-content-background);
 }
 
 body.login-page,