PR: Custom Color Choice (#38)

scss/buttons.scss

@@ -39,6 +39,13 @@
   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,
@@ -47,7 +54,7 @@
   background: var(--primary-100);
 
   .d-icon {
-    color: var(--tertiary);
+    color: var(--accent-color);
   }
 
   &:hover {
@@ -124,6 +131,13 @@
   border-color: var(--accent-color);
 }
 
-.dropdown-menu__item .btn {
+.chat-message-actions .btn,
+.dropdown-menu__item .btn,
+.fk-d-menu .btn {
   background-color: var(--d-content-background);
+  &:hover {
+    background-color: var(--d-selected);
+    box-shadow: none;
+    color: var(--primary);
+  }
 }

scss/color-choice.scss

@@ -0,0 +1,46 @@
+.color-pallette-menu {
+  &__item .btn-icon-text.btn-flat {
+    background-color: var(--d-content-background);
+    width: 100%;
+    justify-content: flex-start;
+  }
+  &__item .btn-icon-text.btn-flat:hover {
+    background-color: var(--d-selected);
+    box-shadow: none;
+    color: var(--primary);
+  }
+  &__item .btn-icon-text.btn-flat:hover svg {
+    color: var(--icon-color);
+  }
+  &__item .btn-icon-text.btn-flat svg {
+    color: var(--icon-color);
+  }
+}
+
+.user-color-pallette-content .fk-d-menu__inner-content {
+  border: none;
+}
+
+html.cusom-color-horizon {
+  --accent-base-color: #595bca;
+}
+
+html.custom-color-marigold {
+  --accent-base-color: #d3881f;
+}
+
+html.custom-color-violet {
+  --accent-base-color: #9b15de;
+}
+
+html.custom-color-lily {
+  --accent-base-color: #cc336f;
+}
+
+html.custom-color-clover {
+  --accent-base-color: #4caf50;
+}
+
+html.custom-color-royal {
+  --accent-base-color: #4169e1;
+}

scss/color-exploration.scss

@@ -21,6 +21,7 @@
     oklch(from var(--accent-color) calc(l * 2) 0 h),
     oklch(from var(--accent-color) calc(l * 0.375) 0 h)
   );
+  --primary-100: light-dark(#f2f2f2, #333333);
   --primary-300: light-dark(#d1d1d1, #838383);
   --primary-low: var(--primary-300);
   --d-hover: oklch(from var(--d-selected) l c h / 0.75);
@@ -39,7 +40,7 @@
     oklch(from var(--accent-color) calc(l * 0.2) calc(c * 0.01) h / 0.25)
   );
   --button-box-shadow: light-dark(
-    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.35) h),
+    oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.35) h),
     oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
   );
   --d-selected: light-dark(