client/note color picker menu item: tweak style

apps/client/src/menus/custom-items/NoteColorPickerMenuItem.css

@@ -1,19 +1,60 @@
 .color-picker-menu-item {
     display: flex;
-    gap: 10px;
+    gap: 8px;
+    justify-content: space-between;
 }
 
-.color-picker-menu-item > .color-cell {
+.color-picker-menu-item  .color-cell {
-    width: 13px;
+    width: 14px;
-    height: 13px;
+    height: 14px;
     border-radius: 4px;
-    background: transparent;
+    background: var(--color);
 }
 
-.color-picker-menu-item > .color-cell.disabled-color-cell {
+.color-picker-menu-item  .color-cell.disabled-color-cell {
     cursor: not-allowed;
 }
 
-.color-picker-menu-item > .color-cell.selected {
+.color-picker-menu-item  .color-cell.selected {
-    outline: 2px solid royalblue;
+    outline: 2px solid var(--color);
+    outline-offset: 2px;
+}
+
+.color-cell-reset::before,
+.custom-color-cell::before {
+    position: absolute;
+    display: flex;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    font-size: 14px;
+    justify-content: center;
+    align-items: center;
+    font-family: boxicons;
+    color: black;
+}
+
+.color-cell-reset {
+    position: relative;
+    --color: rgba(255, 255, 255, .4);
+}
+
+.color-cell-reset::before {
+    content: "\ec8d";
+    mix-blend-mode: normal;
+    color: black;
+}
+
+.custom-color-cell {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    background: var(--color);
+}
+
+.custom-color-cell::before {
+    content: "\ed35";
+    color: var(--foreground);
+    font-size: 16px;
 }

apps/client/src/menus/custom-items/NoteColorPickerMenuItem.tsx

@@ -2,13 +2,14 @@ import "./NoteColorPickerMenuItem.css";
 import { useEffect, useRef, useState} from "preact/hooks";
 import {ComponentChildren} from "preact";
 import attributes from "../../services/attributes";
+import Color, { ColorInstance } from "color";
 import Debouncer from "../../utils/debouncer";
 import FNote from "../../entities/fnote";
 import froca from "../../services/froca";
 
 const COLORS = [
-    "#e64d4d", "#e6994d", "#e5e64d", "#99e64d", "#4de64d", "#4de699",
+    null, "#e64d4d", "#e6994d", "#e5e64d", "#99e64d", "#4de64d", "#4de699",
-    "#4de5e6", "#4d99e6", "#4d4de6", "#994de6", null
+    "#4de5e6", "#4d99e6", "#4d4de6", "#994de6"
 ];
 
 export interface NoteColorPickerMenuItemProps {
@@ -57,6 +58,7 @@ export default function NoteColorPickerMenuItem(props: NoteColorPickerMenuItemPr
                 onClick={(e) => {e.stopPropagation()}}>
         {COLORS.map((color) => (
             <ColorCell key={color}
+                       className={(color === null) ? "color-cell-reset" : undefined}
                        color={color}
                        isSelected={(color === currentColor)}
                        isDisabled={(note === null)}
@@ -78,7 +80,7 @@ interface ColorCellProps {
 
 function ColorCell(props: ColorCellProps) {
     return <div class={`color-cell ${props.isSelected ? "selected" : ""} ${props.isDisabled ? "disabled-color-cell" : ""} ${props.className ?? ""}`}
-                style={`${(props.color !== null) ? `background-color: ${props.color}` : ""}`}
+                style={`${(props.color !== null) ? `--color: ${props.color}` : ""}`}
                 onClick={() => props.onSelect?.(props.color)}>
         {props.children}
     </div>;
@@ -98,7 +100,7 @@ function CustomColorCell(props: ColorCellProps) {
         }
     });
 
-    return <>
+    return <div style={`--foreground: ${ensureContrast(props.color)};`}>
         <ColorCell {...props} 
                    className="custom-color-cell"
                    onSelect={() => {colorInput.current?.click()}}>
@@ -109,5 +111,20 @@ function CustomColorCell(props: ColorCellProps) {
                    onChange={() => {colorInputDebouncer.updateValue(colorInput.current?.value ?? null)}}
                    style="width: 0; height: 0; opacity: 0" />
         </ColorCell>
-    </>
+    </div>
+}
+
+function ensureContrast(color: string | null) {
+    if (color === null) return "inherit";
+
+    const colorHsl = Color(color).hsl();
+    let l = colorHsl.lightness();
+
+    if (l >= 40) {
+        l = 0;
+    } else {
+        l = 100
+    }
+
+    return colorHsl.saturationl(0).lightness(l).hex();
 }