From cf5d15d2140f9da0f9dd1398224b971067368123 Mon Sep 17 00:00:00 2001
From: rabiaedayilmaz <rabiaedayilmaz@gmail.com>
Date: Mon, 5 Oct 2026 18:16:05 +0300
Subject: [PATCH] fix(stickies): apply dark-theme colors and add text color
 picker

The un-themed :root fallback for --editor-colors-*-background tied the
editor's [data-theme*="dark"] rules on specificity and, coming later in
the cascade, always won, pinning stickies to the light ramp. Wrap it in
:where() so the themed rules apply while it still acts as a fallback.

Also add a "Text colors" row to the sticky color palette, using the
existing text-color editor command.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/space/styles/globals.css                 |  8 +++--
 .../editor/sticky-editor/color-palette.tsx    | 32 ++++++++++++++++++-
 .../editor/sticky-editor/toolbar.tsx          |  9 ++++--
 apps/web/styles/globals.css                   |  8 +++--
 4 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/apps/space/styles/globals.css b/apps/space/styles/globals.css
index 90b68e1db828..a527f3711dab 100644
--- a/apps/space/styles/globals.css
+++ b/apps/space/styles/globals.css
@@ -5,10 +5,12 @@
 /* stickies and editor colors
  * Text colors and the themed light/dark background ramps come from
  * @plane/editor/styles (imported above), which is their single source of truth.
- * Only the un-themed :root fallback below is kept: the editor package declares
+ * Only the un-themed fallback below is kept: the editor package declares
  * background colors solely under [data-theme*="light"] / [data-theme*="dark"],
- * so without this they are undefined until a theme lands on the element. */
-:root {
+ * so without this they are undefined until a theme lands on the element.
+ * :where() gives it zero specificity so the themed rules always win; a plain
+ * :root ties them at (0,1,0) and, coming later, would pin the light ramp. */
+:where(:root) {
   --editor-colors-gray-background: #d6d6d8;
   --editor-colors-peach-background: #ffd5d7;
   --editor-colors-pink-background: #fdd4e3;
diff --git a/apps/web/components/editor/sticky-editor/color-palette.tsx b/apps/web/components/editor/sticky-editor/color-palette.tsx
index 1bdbaa40e692..3d5963f75268 100644
--- a/apps/web/components/editor/sticky-editor/color-palette.tsx
+++ b/apps/web/components/editor/sticky-editor/color-palette.tsx
@@ -4,6 +4,8 @@
  * See the LICENSE file for details.
  */
 
+import { DeactivatedOutline } from "@makeplane/propel/icons";
+import { COLORS_LIST } from "@plane/editor";
 import type { TSticky } from "@plane/types";
 
 export const STICKY_COLORS_LIST: {
@@ -55,18 +57,46 @@ export const STICKY_COLORS_LIST: {
 
 type TProps = {
   handleUpdate: (data: Partial<TSticky>) => Promise<void>;
+  handleTextColorSelect: (color: string | undefined) => void;
 };
 
 export function ColorPalette(props: TProps) {
-  const { handleUpdate } = props;
+  const { handleUpdate, handleTextColorSelect } = props;
   return (
     <div className="shadow absolute bottom-5 left-0 z-10 mb-2 w-56 rounded-md bg-surface-1 p-2">
+      <div className="mb-2 text-13 font-semibold text-placeholder">Text colors</div>
+      <div className="mb-3 flex flex-wrap gap-2">
+        {COLORS_LIST.map((color) => (
+          <button
+            key={color.key}
+            type="button"
+            aria-label={color.label}
+            // keep the editor's text selection while picking a color
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => handleTextColorSelect(color.key)}
+            className="h-6 w-6 rounded-md transition-all hover:ring-2 hover:ring-accent-strong focus:ring-2 focus:ring-accent-strong focus:outline-none"
+            style={{
+              backgroundColor: color.textColor,
+            }}
+          />
+        ))}
+        <button
+          type="button"
+          aria-label="Remove text color"
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => handleTextColorSelect(undefined)}
+          className="grid h-6 w-6 place-items-center rounded-md border-[0.5px] border-strong text-tertiary transition-all hover:ring-2 hover:ring-accent-strong focus:ring-2 focus:ring-accent-strong focus:outline-none"
+        >
+          <DeactivatedOutline className="size-4" />
+        </button>
+      </div>
       <div className="mb-2 text-13 font-semibold text-placeholder">Background colors</div>
       <div className="flex flex-wrap gap-2">
         {STICKY_COLORS_LIST.map((color) => (
           <button
             key={color.key}
             type="button"
+            aria-label={color.label}
             onClick={() => {
               handleUpdate({
                 background_color: color.key,
diff --git a/apps/web/components/editor/sticky-editor/toolbar.tsx b/apps/web/components/editor/sticky-editor/toolbar.tsx
index 3acdf538b3a8..e7428b236cd0 100644
--- a/apps/web/components/editor/sticky-editor/toolbar.tsx
+++ b/apps/web/components/editor/sticky-editor/toolbar.tsx
@@ -66,8 +66,13 @@ export function StickyEditorToolbar(props: Props) {
     <div className="flex h-full w-full justify-between">
       <div className="my-auto flex gap-4" ref={colorPaletteRef}>
         {/* color palette */}
-        {showColorPalette && <ColorPalette handleUpdate={handleColorChange} />}
-        <Tooltip label="Background color">
+        {showColorPalette && (
+          <ColorPalette
+            handleUpdate={handleColorChange}
+            handleTextColorSelect={(color) => editorRef?.executeMenuItemCommand({ itemKey: "text-color", color })}
+          />
+        )}
+        <Tooltip label="Colors">
           <button type="button" onClick={() => setShowColorPalette(!showColorPalette)} className="flex text-primary/50">
             <PaletteOutline className="my-auto size-4" />
           </button>
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index aa573543acf9..bb8ca36cf6e7 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -7,10 +7,12 @@
 /* stickies and editor colors
  * Text colors and the themed light/dark background ramps come from
  * @plane/editor/styles (imported above), which is their single source of truth.
- * Only the un-themed :root fallback below is kept: the editor package declares
+ * Only the un-themed fallback below is kept: the editor package declares
  * background colors solely under [data-theme*="light"] / [data-theme*="dark"],
- * so without this they are undefined until a theme lands on the element. */
-:root {
+ * so without this they are undefined until a theme lands on the element.
+ * :where() gives it zero specificity so the themed rules always win; a plain
+ * :root ties them at (0,1,0) and, coming later, would pin the light ramp. */
+:where(:root) {
   --editor-colors-gray-background: #d6d6d8;
   --editor-colors-peach-background: #ffd5d7;
   --editor-colors-pink-background: #fdd4e3;