From d1800ffd989ad5c37ac18844f6d53c6d63f60db0 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Tue, 11 Mar 2025 14:45:04 -0500
Subject: [PATCH] PR: Custom Color Choice (#38)
---
common/common.scss | 1 +
.../discourse/api-initializers/next-gen.gjs | 2 +
.../api-initializers/user-pallette.js | 6 +++
.../discourse/components/class-adder.gjs | 12 +++++
.../components/custom-user-pallette.gjs | 54 +++++++++++++++++++
.../discourse/components/site-pallette.gjs | 31 +++++++++++
.../discourse/services/custom-color.gjs | 13 +++++
scss/buttons.scss | 18 ++++++-
scss/color-choice.scss | 46 ++++++++++++++++
scss/color-exploration.scss | 3 +-
10 files changed, 183 insertions(+), 3 deletions(-)
create mode 100644 javascripts/discourse/api-initializers/user-pallette.js
create mode 100644 javascripts/discourse/components/class-adder.gjs
create mode 100644 javascripts/discourse/components/custom-user-pallette.gjs
create mode 100644 javascripts/discourse/components/site-pallette.gjs
create mode 100644 javascripts/discourse/services/custom-color.gjs
create mode 100644 scss/color-choice.scss
diff --git a/common/common.scss b/common/common.scss
index 14e8c56..2b83969 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -13,3 +13,4 @@
@import "misc";
@import "mobile-stuff";
@import "color-exploration";
+@import "color-choice";
diff --git a/javascripts/discourse/api-initializers/next-gen.gjs b/javascripts/discourse/api-initializers/next-gen.gjs
index 4ebd2dd..6221411 100644
--- a/javascripts/discourse/api-initializers/next-gen.gjs
+++ b/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);
});
diff --git a/javascripts/discourse/api-initializers/user-pallette.js b/javascripts/discourse/api-initializers/user-pallette.js
new file mode 100644
index 0000000..6219632
--- /dev/null
+++ b/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);
+});
diff --git a/javascripts/discourse/components/class-adder.gjs b/javascripts/discourse/components/class-adder.gjs
new file mode 100644
index 0000000..561177a
--- /dev/null
+++ b/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;
+
+
+ {{htmlClass (concat "custom-color-" this.customColor.color)}}
+
+}
diff --git a/javascripts/discourse/components/custom-user-pallette.gjs b/javascripts/discourse/components/custom-user-pallette.gjs
new file mode 100644
index 0000000..11d3964
--- /dev/null
+++ b/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",
+ },
+];
+
+
+
+
diff --git a/javascripts/discourse/components/site-pallette.gjs b/javascripts/discourse/components/site-pallette.gjs
new file mode 100644
index 0000000..bd7e1fd
--- /dev/null
+++ b/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);
+ }
+
+
+
+
+}
diff --git a/javascripts/discourse/services/custom-color.gjs b/javascripts/discourse/services/custom-color.gjs
new file mode 100644
index 0000000..d9bb07f
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/scss/buttons.scss b/scss/buttons.scss
index 7313c7c..04cc157 100644
--- a/scss/buttons.scss
+++ b/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);
+ }
}
diff --git a/scss/color-choice.scss b/scss/color-choice.scss
new file mode 100644
index 0000000..e79cfef
--- /dev/null
+++ b/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;
+}
diff --git a/scss/color-exploration.scss b/scss/color-exploration.scss
index a8206b4..0a769da 100644
--- a/scss/color-exploration.scss
+++ b/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(