Color tweaks

frontend/components/ReedPage/ReedPage.css

@@ -4,8 +4,11 @@
   --border-radius: 8px;
   --border-width: 2px;
 
+  /*
+  Alas, this is not supported by all browsers yet. So it's implemented in JS for now.
   --clamped-border-color: solid hsl(from var(--reed-color, black) h s clamp(0, l, 0.7));
   --clamped-background-color: hsl(from var(--reed-color, black) h s clamp(0.95, l, 1));
+  */
 
   position: relative;
   border-radius: var(--border-radius);

frontend/components/ReedPage/ReedPage.tsx

@@ -17,6 +17,7 @@ import {
   PlayedReedModal,
   ScrapedReedModal,
 } from './Modals';
+import { clampedBackgroundColor, clampedBorderColor } from '../../utils/color';
 
 export function ReedRoute() {
   const data = useData();
@@ -199,9 +200,12 @@ export function ReedPage({
   clippedTip: (data: { length: string }) => void;
   discard: () => void;
 }) {
+  const colorHex = findColorHex(reed.data.threadColor) ?? '#000000';
   // @ts-expect-error - TS doesn't know about CSS custom properties
   const style: CSSProperties = {
-    '--reed-color': findColorHex(reed.data.threadColor),
+    '--reed-color': colorHex,
+    '--clamped-border-color': clampedBorderColor(colorHex),
+    '--clamped-background-color': clampedBackgroundColor(colorHex),
     viewTransitionName: 'reed-card', // 'reed-card-' + reed.data.reedIdentification,
   };
 

frontend/components/ReedSummary/ReedSummary.css

@@ -4,12 +4,14 @@
   --border-radius: 8px;
   --border-width: 2px;
 
+  /*
+  Alas, this is not supported by all browsers yet. So it's implemented in JS for now.
   --clamped-border-color: solid hsl(from var(--reed-color, black) h s clamp(0, l, 0.7));
   --clamped-background-color: hsl(from var(--reed-color, black) h s clamp(0.95, l, 1));
+  */
 
   position: relative;
   border-radius: var(--border-radius);
-  /* border: var(--border-width) solid transparent; */
   padding: var(--padding-size) var(--padding-size) var(--padding-size)
     calc(var(--swatch-width) + var(--padding-size));
 
@@ -39,7 +41,7 @@
   content: '';
   inset: 0;
   border-radius: var(--border-radius);
-  border: var(--border-width) var(--clamped-border-color);
+  border: var(--border-width) solid var(--clamped-border-color);
 }
 
 .reed-summary:hover::after {

frontend/components/ReedSummary/ReedSummary.tsx

@@ -5,6 +5,7 @@ import { findColorHex } from '../ColorPicker/utils';
 import { timestampToLocaleFormattedDate } from '../../utils/date';
 import { Link, unstable_useViewTransitionState } from 'react-router-dom';
 import { useState } from 'react';
+import { clampedBackgroundColor, clampedBorderColor } from '../../utils/color';
 
 function keyValue(key: string, value: string) {
   // key: value but with non-breaking space
@@ -62,9 +63,14 @@ export function ReedSummary({ id, data, lastComment, lastUpdate }: Reed & { id:
 
   const isTransitioning = unstable_useViewTransitionState(to);
 
+  const colorHex = findColorHex(data.threadColor) ?? '#000000';
   // @ts-expect-error - TS doesn't know about CSS custom properties
   const style: CSSProperties = {
-    '--reed-color': findColorHex(data.threadColor),
+    '--reed-color': colorHex,
+
+    '--clamped-border-color': clampedBorderColor(colorHex),
+    '--clamped-background-color': clampedBackgroundColor(colorHex),
+
     viewTransitionName: isTransitioning ? 'reed-card' : undefined, // reed-card-' + id,
   };
 

frontend/utils/color.ts

@@ -0,0 +1,58 @@
+// hsl(from var(--reed-color, black) h s clamp(0, l, 0.7))
+// Do the calculation above, but in JS instead of CSS. reedColor is a hex string.
+export function clampedBorderColor(reedColorHex: string) {
+  const hsl = hexToHsl(reedColorHex);
+  const l = Math.min(hsl[2], 0.7);
+  return hslToHex([hsl[0], hsl[1], l]);
+}
+
+// --clamped-background-color: hsl(from var(--reed-color, black) h s clamp(0.95, l, 1));
+// Do the calculation above, but in JS instead of CSS. reedColor is a hex string.
+export function clampedBackgroundColor(reedColorHex: string) {
+  const hsl = hexToHsl(reedColorHex);
+  const l = Math.max(0.95, hsl[2]);
+  return hslToHex([hsl[0], hsl[1], l]);
+}
+
+function hexToHsl(hex: string) {
+  const r = parseInt(hex.substring(1, 3), 16) / 255;
+  const g = parseInt(hex.substring(3, 5), 16) / 255;
+  const b = parseInt(hex.substring(5, 7), 16) / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+
+  return [h, s, l];
+}
+
+function hslToHex(hsl: [number, number, number]) {
+  const [h, s, l] = hsl;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n: number) => {
+    const k = (n + h * 12) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, '0');
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}