+7 -7

components/ThemeManager/PublicationThemeProvider.tsx

··· 2 2 import { useMemo, useState } from "react"; 3 3 import { parseColor } from "react-aria-components"; 4 4 import { useEntity } from "src/replicache"; 5 5 - import { getColorContrast } from "./themeUtils"; 5 5 + import { getColorDifference } from "./themeUtils"; 6 6 import { useColorAttribute, colorToString } from "./useColorAttribute"; 7 7 import { BaseThemeProvider, CardBorderHiddenContext } from "./ThemeProvider"; 8 8 import { PubLeafletPublication, PubLeafletThemeColor } from "lexicons/api"; ··· 174 174 let newAccentContrast; 175 175 let sortedAccents = [newTheme.accent1, newTheme.accent2].sort((a, b) => { 176 176 return ( 177 177 - getColorContrast( 177 177 + getColorDifference( 178 178 colorToString(b, "rgb"), 179 179 colorToString( 180 180 showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet, 181 181 "rgb", 182 182 ), 183 183 ) - 184 184 - getColorContrast( 184 184 + getColorDifference( 185 185 colorToString(a, "rgb"), 186 186 colorToString( 187 187 showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet, ··· 191 191 ); 192 192 }); 193 193 if ( 194 194 - getColorContrast( 194 194 + getColorDifference( 195 195 colorToString(sortedAccents[0], "rgb"), 196 196 colorToString(newTheme.primary, "rgb"), 197 197 - ) < 30 && 198 198 - getColorContrast( 197 197 + ) < 0.15 && 198 198 + getColorDifference( 199 199 colorToString(sortedAccents[1], "rgb"), 200 200 colorToString( 201 201 showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet, 202 202 "rgb", 203 203 ), 204 204 - ) > 12 204 204 + ) > 0.08 205 205 ) { 206 206 newAccentContrast = sortedAccents[1]; 207 207 } else newAccentContrast = sortedAccents[0];

+9 -9

components/ThemeManager/ThemeProvider.tsx

··· 22 22 PublicationThemeProvider, 23 23 } from "./PublicationThemeProvider"; 24 24 import { PubLeafletPublication } from "lexicons/api"; 25 25 - import { getColorContrast } from "./themeUtils"; 25 25 + import { getColorDifference } from "./themeUtils"; 26 26 27 27 // define a function to set an Aria Color to a CSS Variable in RGB 28 28 function setCSSVariableToColor( ··· 140 140 //sorting the accents by contrast on background 141 141 let sortedAccents = [accent1, accent2].sort((a, b) => { 142 142 return ( 143 143 - getColorContrast( 143 143 + getColorDifference( 144 144 colorToString(b, "rgb"), 145 145 colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"), 146 146 ) - 147 147 - getColorContrast( 147 147 + getColorDifference( 148 148 colorToString(a, "rgb"), 149 149 colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"), 150 150 ) ··· 156 156 // then use the not contrasty option 157 157 158 158 if ( 159 159 - getColorContrast( 159 159 + getColorDifference( 160 160 colorToString(sortedAccents[0], "rgb"), 161 161 colorToString(primary, "rgb"), 162 162 - ) < 30 && 163 163 - getColorContrast( 162 162 + ) < 0.15 && 163 163 + getColorDifference( 164 164 colorToString(sortedAccents[1], "rgb"), 165 165 colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"), 166 166 - ) > 12 166 166 + ) > 0.08 167 167 ) { 168 168 accentContrast = sortedAccents[1]; 169 169 } else accentContrast = sortedAccents[0]; ··· 286 286 bgPage && accent1 && accent2 287 287 ? [accent1, accent2].sort((a, b) => { 288 288 return ( 289 289 - getColorContrast( 289 289 + getColorDifference( 290 290 colorToString(b, "rgb"), 291 291 colorToString(bgPage, "rgb"), 292 292 ) - 293 293 - getColorContrast( 293 293 + getColorDifference( 294 294 colorToString(a, "rgb"), 295 295 colorToString(bgPage, "rgb"), 296 296 )

+4 -3

components/ThemeManager/themeUtils.ts

··· 1 1 - import { parse, contrastLstar, ColorSpace, sRGB } from "colorjs.io/fn"; 1 1 + import { parse, ColorSpace, sRGB, distance, OKLab } from "colorjs.io/fn"; 2 2 3 3 // define the color defaults for everything 4 4 export const ThemeDefaults = { ··· 17 17 }; 18 18 19 19 // used to calculate the contrast between page and accent1, accent2, and determin which is higher contrast 20 20 - export function getColorContrast(color1: string, color2: string) { 20 20 + export function getColorDifference(color1: string, color2: string) { 21 21 ColorSpace.register(sRGB); 22 22 + ColorSpace.register(OKLab); 22 23 23 24 let parsedColor1 = parse(`rgb(${color1})`); 24 25 let parsedColor2 = parse(`rgb(${color2})`); 25 26 26 26 - return contrastLstar(parsedColor1, parsedColor2); 27 27 + return distance(parsedColor1, parsedColor2, "oklab"); 27 28 }