UX: Color fixes (#40)

javascripts/discourse/components/custom-user-pallette.gjs

@@ -18,7 +18,7 @@ const PALLETTES = [
   },
   {
     name: "clover",
-    color: "#4caf50",
+    color: "#45a06e",
   },
   {
     name: "royal",

scss/buttons.scss

@@ -20,6 +20,19 @@
   // }
 }
 
+.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 {
@@ -52,7 +65,6 @@
 .btn-icon-text,
 .select-kit .select-kit-header.btn-default {
   background: var(--primary-100);
-
   .d-icon {
     color: var(--accent-color);
   }
@@ -118,11 +130,32 @@
 }
 
 .post-controls {
-  svg.d-icon {
+  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,

scss/color-choice.scss

@@ -34,11 +34,11 @@ html.custom-color-violet {
 }
 
 html.custom-color-lily {
-  --accent-base-color: #cc336f;
+  --accent-base-color: #cc338c;
 }
 
 html.custom-color-clover {
-  --accent-base-color: #4caf50;
+  --accent-base-color: #45a06e;
 }
 
 html.custom-color-royal {

scss/color-exploration.scss

@@ -23,9 +23,14 @@
   );
   --primary-100: light-dark(#f2f2f2, #333333);
   --primary-300: light-dark(#d1d1d1, #838383);
-  --primary-low: var(--primary-300);
+  --primary-low: light-dark(#e8e8e8, #414350);
   --d-hover: oklch(from var(--d-selected) l c h / 0.75);
   --tertiary-med-or-tertiary: var(--accent-color);
+  --tertiary-low: light-dark(
+    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: var(--accent-color);
   --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),
@@ -53,7 +58,7 @@
     oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
   );
   --d-chat-border: light-dark(
-    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h),
+    oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h),
     oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
   );
   --accent-text-color: light-dark(#ffffff, #0f1024);
@@ -85,4 +90,5 @@
   --d-sidebar-highlight-background: var(--d-selected);
   --d-sidebar-section-link-icon-size: 1em;
   --d-input-bg-color: var(--d-content-background);
+  --tertiary-hover: var(--accent-color);
 }

scss/header.scss

@@ -81,3 +81,13 @@
 .menu-panel .panel-body-bottom .btn:hover {
   background-color: var(--d-content-background);
 }
+
+body.login-page,
+body.signup-page,
+body.invite-page,
+body.password-reset-page,
+body.activate-account-page {
+  .d-header {
+    background: var(--background-color);
+  }
+}

scss/sidebar.scss

@@ -52,6 +52,10 @@
   }
 }
 
+.sidebar-wrapper .sidebar-sections {
+  --scrollbarThumbBg: var(--d-selected);
+}
+
 .sidebar-section-link-wrapper .sidebar-section-link:focus,
 .sidebar-section-link-wrapper .sidebar-section-link:hover {
   .d-icon {

scss/topic-cards.scss

@@ -17,6 +17,9 @@ $extra-large: 1280px;
 
 .topic-list > .topic-list-body > .topic-list-item.last-visit {
   border-bottom: 1px solid var(--primary-300);
+  &:hover {
+    border-color: var(--accent-color);
+  }
 }
 
 .topic-list-body {
@@ -362,7 +365,7 @@ body.user-messages-page .topic-list-item {
   box-shadow: 0px 0px 26px 1px var(--topic-card-shadow);
   &:hover {
     .discourse-no-touch & {
-      border: 1px solid var(--accent-color);
+      border-color: var(--accent-color);
       background: var(--d-content-background);
     }
   }