PR: Custom Color Choice (#38)

common/common.scss

@@ -13,3 +13,4 @@
 @import "misc";
 @import "mobile-stuff";
 @import "color-exploration";
+@import "color-choice";

javascripts/discourse/api-initializers/next-gen.gjs

@@ -1,6 +1,8 @@
 import { apiInitializer } from "discourse/lib/api";
+import ClassAdder from "../components/class-adder";
 import ExperimentalScreen from "../components/experimental-screen";
 
 export default apiInitializer("1.8.0", (api) => {
   api.renderInOutlet("above-main-container", ExperimentalScreen);
+  api.renderInOutlet("above-main-container", ClassAdder);
 });

javascripts/discourse/api-initializers/user-pallette.js

@@ -0,0 +1,6 @@
+import { apiInitializer } from "discourse/lib/api";
+import CustomUserPallette from "../components/custom-user-pallette";
+
+export default apiInitializer("1.8.0", (api) => {
+  api.renderInOutlet("sidebar-footer-actions", CustomUserPallette);
+});

javascripts/discourse/components/class-adder.gjs

@@ -0,0 +1,12 @@
+import Component from "@glimmer/component";
+import { concat } from "@ember/helper";
+import { service } from "@ember/service";
+import htmlClass from "discourse/helpers/html-class";
+
+export default class ClassAdder extends Component {
+  @service customColor;
+
+  <template>
+    {{htmlClass (concat "custom-color-" this.customColor.color)}}
+  </template>
+}

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

@@ -0,0 +1,54 @@
+import { array } from "@ember/helper";
+import icon from "discourse/helpers/d-icon";
+import DMenu from "float-kit/components/d-menu";
+import SitePallette from "./site-pallette";
+
+const PALLETTES = [
+  {
+    name: "marigold",
+    color: "#d3881f",
+  },
+  {
+    name: "violet",
+    color: "#9b15de",
+  },
+  {
+    name: "lily",
+    color: "#CC336F",
+  },
+  {
+    name: "clover",
+    color: "#4caf50",
+  },
+  {
+    name: "royal",
+    color: "#4169e1",
+  },
+  {
+    name: "horizon",
+    color: "#595bca",
+  },
+];
+
+<template>
+  <DMenu
+    @identifier="user-color-pallette"
+    @triggers={{array "click"}}
+    @placementStrategy="fixed"
+    class="btn-flat user-color-pallette sidebar-footer-actions-button"
+    @inline={{true}}
+  >
+    <:trigger>
+      {{icon "paint-brush"}}
+    </:trigger>
+    <:content>
+      <div class="color-pallette-menu">
+        <div class="color-pallette-menu__content">
+          {{#each PALLETTES as |colorScheme|}}
+            <SitePallette @colorScheme={{colorScheme}} />
+          {{/each}}
+        </div>
+      </div>
+    </:content>
+  </DMenu>
+</template>

javascripts/discourse/components/site-pallette.gjs

@@ -0,0 +1,31 @@
+import Component from "@glimmer/component";
+import { fn } from "@ember/helper";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import DButton from "discourse/components/d-button";
+
+export default class SitePallette extends Component {
+  @service customColor;
+
+  get siteStyle() {
+    return `--icon-color: ${this.args.colorScheme.color}`;
+  }
+
+  @action
+  handleInput(colorScheme) {
+    this.customColor.setColor(colorScheme.name);
+  }
+
+  <template>
+    <div class="color-pallette-menu__item">
+      <DButton
+        class="btn-flat color-pallette-menu__item-choice"
+        style={{htmlSafe this.siteStyle}}
+        @icon="circle"
+        @translatedLabel={{@colorScheme.name}}
+        @action={{fn this.handleInput @colorScheme}}
+      />
+    </div>
+  </template>
+}

javascripts/discourse/services/custom-color.gjs

@@ -0,0 +1,13 @@
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import Service from "@ember/service";
+
+export default class customColor extends Service {
+  @tracked color = localStorage.getItem("d-customColor") || "horizon";
+
+  @action
+  setColor(color) {
+    this.color = color;
+    localStorage.setItem("d-customColor", color);
+  }
+}

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(