update color logic when selecting accent contrast color to use the most different color, rather than the most contrasted color

components/ThemeManager/PublicationThemeProvider.tsx

···
 import { useMemo, useState } from "react";
 import { parseColor } from "react-aria-components";
 import { useEntity } from "src/replicache";
-import { getColorContrast } from "./themeUtils";
+import { getColorDifference } from "./themeUtils";
 import { useColorAttribute, colorToString } from "./useColorAttribute";
 import { BaseThemeProvider, CardBorderHiddenContext } from "./ThemeProvider";
 import { PubLeafletPublication, PubLeafletThemeColor } from "lexicons/api";
···
     let newAccentContrast;
     let sortedAccents = [newTheme.accent1, newTheme.accent2].sort((a, b) => {
       return (
-        getColorContrast(
+        getColorDifference(
           colorToString(b, "rgb"),
           colorToString(
             showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet,
             "rgb",
           ),
         ) -
-        getColorContrast(
+        getColorDifference(
           colorToString(a, "rgb"),
           colorToString(
             showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet,
···
       );
     });
     if (
-      getColorContrast(
+      getColorDifference(
         colorToString(sortedAccents[0], "rgb"),
         colorToString(newTheme.primary, "rgb"),
-      ) < 30 &&
-      getColorContrast(
+      ) < 0.15 &&
+      getColorDifference(
         colorToString(sortedAccents[1], "rgb"),
         colorToString(
           showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet,
           "rgb",
         ),
-      ) > 12
+      ) > 0.08
     ) {
       newAccentContrast = sortedAccents[1];
     } else newAccentContrast = sortedAccents[0];

components/ThemeManager/ThemeProvider.tsx

···
   PublicationThemeProvider,
 } from "./PublicationThemeProvider";
 import { PubLeafletPublication } from "lexicons/api";
-import { getColorContrast } from "./themeUtils";
+import { getColorDifference } from "./themeUtils";
 
 // define a function to set an Aria Color to a CSS Variable in RGB
 function setCSSVariableToColor(
···
   //sorting the accents by contrast on background
   let sortedAccents = [accent1, accent2].sort((a, b) => {
     return (
-      getColorContrast(
+      getColorDifference(
         colorToString(b, "rgb"),
         colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
       ) -
-      getColorContrast(
+      getColorDifference(
         colorToString(a, "rgb"),
         colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
       )
···
   // then use the not contrasty option
 
   if (
-    getColorContrast(
+    getColorDifference(
       colorToString(sortedAccents[0], "rgb"),
       colorToString(primary, "rgb"),
-    ) < 30 &&
-    getColorContrast(
+    ) < 0.15 &&
+    getColorDifference(
       colorToString(sortedAccents[1], "rgb"),
       colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
-    ) > 12
+    ) > 0.08
   ) {
     accentContrast = sortedAccents[1];
   } else accentContrast = sortedAccents[0];
···
     bgPage && accent1 && accent2
       ? [accent1, accent2].sort((a, b) => {
           return (
-            getColorContrast(
+            getColorDifference(
               colorToString(b, "rgb"),
               colorToString(bgPage, "rgb"),
             ) -
-            getColorContrast(
+            getColorDifference(
               colorToString(a, "rgb"),
               colorToString(bgPage, "rgb"),
             )

components/ThemeManager/themeUtils.ts

···
-import { parse, contrastLstar, ColorSpace, sRGB } from "colorjs.io/fn";
+import { parse, ColorSpace, sRGB, distance, OKLab } from "colorjs.io/fn";
 
 // define the color defaults for everything
 export const ThemeDefaults = {
···
 };
 
 // used to calculate the contrast between page and accent1, accent2, and determin which is higher contrast
-export function getColorContrast(color1: string, color2: string) {
+export function getColorDifference(color1: string, color2: string) {
   ColorSpace.register(sRGB);
+  ColorSpace.register(OKLab);
 
   let parsedColor1 = parse(`rgb(${color1})`);
   let parsedColor2 = parse(`rgb(${color2})`);
 
-  return contrastLstar(parsedColor1, parsedColor2);
+  return distance(parsedColor1, parsedColor2, "oklab");
 }