leaflet.pub
+7
-7
components/ThemeManager/PublicationThemeProvider.tsx
+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
+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
+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);
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
}