+7 -7

components/ThemeManager/PublicationThemeProvider.tsx

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

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

+9 -9

components/ThemeManager/ThemeProvider.tsx

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

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

+4 -3

components/ThemeManager/themeUtils.ts

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

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