leaflet.pub
a tool for shared writing and social publishing
fixes to accent contrast
cozylittle.house
+29
-11
+1
-1
app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
+1
-1
app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
···
72
72
}) {
73
73
return (
74
74
<div
75
-
className={`pubTabs border border-b-0 px-2 pt-1 pb-0.5 rounded-t-md border-border hover:cursor-pointer ${props.selected ? "text-accent-1 font-bold -mb-[1px]" : ""} ${props.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))]" : ""}`}
75
+
className={`pubTabs border border-b-0 px-2 pt-1 pb-0.5 rounded-t-md border-border hover:cursor-pointer ${props.selected ? "text-accent-contrast font-bold -mb-[1px]" : ""} ${props.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))]" : ""}`}
76
76
onClick={() => props.onSelect()}
77
77
>
78
78
{props.name}
+1
-1
components/ActionBar/ActionButton.tsx
+1
-1
components/ActionBar/ActionButton.tsx
···
42
42
? "w-full bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 mx-1 first:ml-0"
43
43
: props.secondary
44
44
? "sm:w-full w-max bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1 mx-1 first:ml-0"
45
-
: "sm:w-full w-max border-transparent text-accent-1 sm:hover:border-accent-1"
45
+
: "sm:w-full w-max border-transparent text-accent-contrast sm:hover:border-accent-contrast"
46
46
}
47
47
`}
48
48
>
+5
-1
components/ThemeManager/PubThemeSetter.tsx
+5
-1
components/ThemeManager/PubThemeSetter.tsx
···
32
32
let [showPageBackground, setShowPageBackground] = useState(
33
33
!!record?.theme?.showPageBackground,
34
34
);
35
-
let { theme: localPubTheme, setTheme, changes } = useLocalPubTheme(record);
35
+
let {
36
+
theme: localPubTheme,
37
+
setTheme,
38
+
changes,
39
+
} = useLocalPubTheme(record, showPageBackground);
36
40
let [image, setImage] = useState<ImageState | null>(
37
41
PubLeafletThemeBackgroundImage.isMain(record?.theme?.backgroundImage)
38
42
? {
+22
-8
components/ThemeManager/PublicationThemeProvider.tsx
+22
-8
components/ThemeManager/PublicationThemeProvider.tsx
···
111
111
let bgLeaflet = useColor(record, "backgroundColor");
112
112
let bgPage = useColor(record, "pageBackground");
113
113
bgPage = record?.theme?.pageBackground ? bgPage : bgLeaflet;
114
+
let showPageBackground = record?.theme?.showPageBackground;
115
+
114
116
let primary = useColor(record, "primary");
115
117
116
118
let accent1 = useColor(record, "accentBackground");
···
125
127
return (
126
128
getColorContrast(
127
129
colorToString(b, "rgb"),
128
-
colorToString(bgLeaflet, "rgb"),
130
+
colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
129
131
) -
130
-
getColorContrast(colorToString(a, "rgb"), colorToString(bgLeaflet, "rgb"))
132
+
getColorContrast(
133
+
colorToString(a, "rgb"),
134
+
colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
135
+
)
131
136
);
132
137
})[0];
133
138
return {
···
140
145
highlight2,
141
146
highlight3,
142
147
accentContrast,
148
+
showPageBackground,
143
149
};
144
150
};
145
151
146
152
export const useLocalPubTheme = (
147
153
record: PubLeafletPublication.Record | undefined,
154
+
showPageBackground?: boolean,
148
155
) => {
149
156
const pubTheme = usePubTheme(record);
150
157
const [localOverrides, setTheme] = useState<Partial<typeof pubTheme>>({});
···
153
160
let newTheme = {
154
161
...pubTheme,
155
162
...localOverrides,
163
+
showPageBackground,
156
164
};
157
-
let accentContrast = [newTheme.accent1, newTheme.accent2].sort((a, b) => {
165
+
let sortedAccents = [newTheme.accent1, newTheme.accent2].sort((a, b) => {
158
166
return (
159
167
getColorContrast(
160
168
colorToString(b, "rgb"),
161
-
colorToString(newTheme.bgLeaflet, "rgb"),
169
+
colorToString(
170
+
showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet,
171
+
"rgb",
172
+
),
162
173
) -
163
174
getColorContrast(
164
175
colorToString(a, "rgb"),
165
-
colorToString(newTheme.bgLeaflet, "rgb"),
176
+
colorToString(
177
+
showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet,
178
+
"rgb",
179
+
),
166
180
)
167
181
);
168
-
})[0];
182
+
});
169
183
return {
170
184
...newTheme,
171
-
accentContrast,
185
+
accentContrast: sortedAccents[0],
172
186
};
173
-
}, [pubTheme, localOverrides]);
187
+
}, [pubTheme, localOverrides, showPageBackground]);
174
188
return {
175
189
theme: mergedTheme,
176
190
setTheme,