a tool for shared writing and social publishing
made the highlight color picker smaller, made the default highlight color based on border color
+47
-25
+22
-5
components/ThemeManager/ThemeProvider.tsx
+22
-5
components/ThemeManager/ThemeProvider.tsx
···
2
2
3
3
import { CSSProperties, useEffect } from "react";
4
4
import { colorToString, useColorAttribute } from "./useColorAttribute";
5
-
import { Color } from "react-aria-components";
5
+
import { Color, parseColor } from "react-aria-components";
6
6
import { useEntity } from "src/replicache";
7
7
8
8
type CSSVariables = {
···
22
22
"theme/primary": "#272727",
23
23
"theme/accent-background": "#0000FF",
24
24
"theme/accent-text": "#FFFFFF",
25
-
"theme/highlight-1": "#FFE1DF",
25
+
"theme/highlight-1": "#FFFFFF",
26
26
"theme/highlight-2": "#FFF5D2",
27
27
"theme/highlight-3": "#F0F7FA",
28
28
};
···
44
44
props.entityID,
45
45
"theme/background-image-repeat",
46
46
);
47
-
let highlight1 = useColorAttribute(props.entityID, "theme/highlight-1");
47
+
let highlight1 = useEntity(props.entityID, "theme/highlight-1");
48
48
let highlight2 = useColorAttribute(props.entityID, "theme/highlight-2");
49
49
let highlight3 = useColorAttribute(props.entityID, "theme/highlight-3");
50
50
···
60
60
setCSSVariableToColor(el, "--primary", primary);
61
61
setCSSVariableToColor(el, "--accent", accentBG);
62
62
setCSSVariableToColor(el, "--accent-text", accentText);
63
-
setCSSVariableToColor(el, "--highlight-1", highlight1);
64
63
setCSSVariableToColor(el, "--highlight-2", highlight2);
65
64
setCSSVariableToColor(el, "--highlight-3", highlight3);
65
+
66
+
//highlight 1 is special oop
67
+
if (highlight1) {
68
+
console.log("yo");
69
+
let color = parseColor(`hsba(${highlight1.data.value})`);
70
+
console.log(`rgb(${colorToString(color, "rgb")})`);
71
+
el?.style.setProperty(
72
+
"--highlight-1",
73
+
`rgb(${colorToString(color, "rgb")})`,
74
+
);
75
+
} else {
76
+
el?.style.setProperty(
77
+
"--highlight-1",
78
+
"color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-card)) 75%)",
79
+
);
80
+
}
66
81
}, [
67
82
bgPage,
68
83
bgCard,
···
89
104
"--primary": colorToString(primary, "rgb"),
90
105
"--accent": colorToString(accentBG, "rgb"),
91
106
"--accent-text": colorToString(accentText, "rgb"),
92
-
"--highlight-1": colorToString(highlight1, "rgb"),
107
+
"--highlight-1": highlight1
108
+
? `rgb(${colorToString(parseColor(`hsba(${highlight1.data.value})`), "rgb")})`
109
+
: "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-card)) 75%)",
93
110
"--highlight-2": colorToString(highlight2, "rgb"),
94
111
"--highlight-3": colorToString(highlight3, "rgb"),
95
112
} as CSSProperties
-1
components/Toolbar/HighlightButton.tsx
-1
components/Toolbar/HighlightButton.tsx
+24
-18
components/Toolbar/index.tsx
+24
-18
components/Toolbar/index.tsx
···
100
100
mark={schema.marks.strikethrough}
101
101
icon={<StrikethroughSmall />}
102
102
/>
103
-
<TextDecorationButton
104
-
mark={schema.marks.highlight}
105
-
icon={<HighlightSmall />}
106
-
/>
107
-
<button
108
-
onClick={() => {
109
-
setToolbarState("highlight");
110
-
}}
111
-
className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]`}
112
-
style={{
113
-
backgroundColor:
114
-
lastUsedHighlight === "1"
115
-
? theme.colors["highlight-1"]
116
-
: lastUsedHighlight === "2"
117
-
? theme.colors["highlight-2"]
118
-
: theme.colors["highlight-3"],
119
-
}}
120
-
/>
103
+
<div className="flex items-center gap-1">
104
+
<TextDecorationButton
105
+
mark={schema.marks.highlight}
106
+
icon={<HighlightSmall />}
107
+
/>
108
+
<button
109
+
onClick={() => {
110
+
setToolbarState("highlight");
111
+
}}
112
+
className="pr-2"
113
+
>
114
+
<div
115
+
className={`w-[6px] h-[20px] rounded-[2px] border border-white shadow-[0_0_0_1px_#8C8C8C]`}
116
+
style={{
117
+
backgroundColor:
118
+
lastUsedHighlight === "1"
119
+
? theme.colors["highlight-1"]
120
+
: lastUsedHighlight === "2"
121
+
? theme.colors["highlight-2"]
122
+
: theme.colors["highlight-3"],
123
+
}}
124
+
/>
125
+
</button>
126
+
</div>
121
127
122
128
<Separator />
123
129
{/* possibly link is only available if text is actively selected */}