a tool for shared writing and social publishing
renamed accent colors. accent bg is now accent-1 and accent text is accent-2 so that i can do some color stuff
+71
-66
+3
-3
app/globals.css
+3
-3
app/globals.css
···
10
10
11
11
--primary: 39, 39, 39;
12
12
13
-
--accent: 0, 0, 225;
14
-
--accent-text: 255, 255, 255;
13
+
--accent-1: 0, 0, 225;
14
+
--accent-2: 255, 255, 255;
15
15
16
16
--highlight-1: 255, 177, 177;
17
17
--highlight-2: 253, 245, 203;
···
91
91
}
92
92
93
93
a {
94
-
@apply text-accent;
94
+
@apply text-accent-1;
95
95
@apply hover:cursor-pointer;
96
96
text-decoration: underline;
97
97
}
+7
-7
components/Blocks/BlockOptions.tsx
+7
-7
components/Blocks/BlockOptions.tsx
···
46
46
<div className="blockOptionsContent flex gap-1 items-center">
47
47
<ToolbarButton
48
48
tooltipContent="Add an Image"
49
-
className="hover:bg-transparent hover:text-accent text-tertiary"
49
+
className="hover:bg-transparent hover:text-accent-1 text-tertiary"
50
50
>
51
51
<label onMouseDown={(e) => e.preventDefault()}>
52
-
<BlockImageSmall className="hover:text-accent" />
52
+
<BlockImageSmall className="hover:text-accent-1" />
53
53
<div className="hidden">
54
54
<input
55
55
type="file"
···
92
92
93
93
<ToolbarButton
94
94
tooltipContent="Add a card"
95
-
className="hover:bg-transparent hover:text-accent text-tertiary"
95
+
className="hover:bg-transparent hover:text-accent-1 text-tertiary"
96
96
onClick={async () => {
97
97
if (!props.entityID) {
98
98
let entity = v7();
···
128
128
}
129
129
}}
130
130
>
131
-
<BlockCardSmall className="hover:text-accent" />
131
+
<BlockCardSmall className="hover:text-accent-1" />
132
132
</ToolbarButton>
133
133
</div>
134
134
</div>
···
169
169
setLinkOpen(!linkOpen);
170
170
}}
171
171
>
172
-
<BlockLinkSmall className="hover:text-accent" />
172
+
<BlockLinkSmall className="hover:text-accent-1" />
173
173
</ToolbarButton>
174
174
175
175
{linkOpen && (
···
191
191
/>
192
192
<div className="flex items-center gap-3 ">
193
193
<button
194
-
className="hover:text-accent"
194
+
className="hover:text-accent-1"
195
195
onMouseDown={(e) => {
196
196
e.preventDefault();
197
197
submit();
···
200
200
<CheckTiny />
201
201
</button>
202
202
<button
203
-
className="hover:text-accent"
203
+
className="hover:text-accent-1"
204
204
onClick={() => setLinkOpen(false)}
205
205
>
206
206
<CloseTiny />
+3
-3
components/Blocks/CardBlock.tsx
+3
-3
components/Blocks/CardBlock.tsx
···
45
45
<div className="">Delete this Page?</div>
46
46
<div className="flex gap-2">
47
47
<button
48
-
className="bg-accent text-accentText px-2 py-1 rounded-md "
48
+
className="bg-accent-1 text-accent-2 px-2 py-1 rounded-md "
49
49
onClick={(e) => {
50
50
e.stopPropagation();
51
51
useUIState.getState().closeCard(props.entityID);
···
59
59
Delete
60
60
</button>
61
61
<button
62
-
className="text-accent"
62
+
className="text-accent-1"
63
63
onClick={() => setAreYouSure(false)}
64
64
>
65
65
Nevermind
···
94
94
<CardPreview entityID={props.entityID} />
95
95
{permission && (
96
96
<button
97
-
className="absolute p-1 top-0.5 right-0.5 hover:text-accent text-secondary sm:hidden sm:group-hover/cardBlock:block"
97
+
className="absolute p-1 top-0.5 right-0.5 hover:text-accent-1 text-secondary sm:hidden sm:group-hover/cardBlock:block"
98
98
onClick={(e) => {
99
99
e.stopPropagation();
100
100
setAreYouSure(true);
+4
-4
components/Blocks/ExternalLinkBlock.tsx
+4
-4
components/Blocks/ExternalLinkBlock.tsx
···
22
22
className={`
23
23
externalLinkBlock flex relative group/linkBlock
24
24
h-[104px] bg-bg-card overflow-hidden text-primary no-underline
25
-
border hover:border-accent outline outline-1 hover:outline-accent rounded-lg shadow-sm
26
-
${selected ? "outline-accent border-accent" : "outline-transparent border-border-light"}
25
+
border hover:border-accent-1 outline outline-1 hover:outline-accent-1 rounded-lg shadow-sm
26
+
${selected ? "outline-accent-1 border-accent-1" : "outline-transparent border-border-light"}
27
27
`}
28
28
>
29
29
<div className="pt-2 pb-2 px-2 grow min-w-0">
···
40
40
{description?.data.value}
41
41
</div>
42
42
<div
43
-
className={`inline-block place-self-end w-full text-xs italic line-clamp-1 truncate group-hover/linkBlock:text-accent ${selected ? "text-accent" : "text-tertiary"}`}
43
+
className={`inline-block place-self-end w-full text-xs italic line-clamp-1 truncate group-hover/linkBlock:text-accent-1 ${selected ? "text-accent-1" : "text-tertiary"}`}
44
44
>
45
45
{url?.data.value}
46
46
</div>
···
57
57
58
58
{permission && (
59
59
<button
60
-
className="absolute p-1 top-0.5 right-0.5 hover:text-accent text-secondary sm:hidden sm:group-hover/linkBlock:block"
60
+
className="absolute p-1 top-0.5 right-0.5 hover:text-accent-1 text-secondary sm:hidden sm:group-hover/linkBlock:block"
61
61
onClick={(e) => {
62
62
e.preventDefault();
63
63
e.stopPropagation();
+3
-3
components/Buttons.tsx
+3
-3
components/Buttons.tsx
···
8
8
<button
9
9
{...props}
10
10
className={`m-0 px-2 py-0.5 w-max
11
-
bg-accent outline-offset-[-2px] active:outline active:outline-2
12
-
border border-accent rounded-md
13
-
text-base font-bold text-accentText
11
+
bg-accent-1 outline-offset-[-2px] active:outline active:outline-2
12
+
border border-accent-1 rounded-md
13
+
text-base font-bold text-accent-2
14
14
flex gap-2 items-center justify-center shrink-0
15
15
disabled:border-border-light
16
16
disabled:bg-border-light disabled:text-border disabled:hover:text-border
+2
-2
components/Cards.tsx
+2
-2
components/Cards.tsx
···
129
129
return (
130
130
<div className=" z-10 w-fit absolute sm:top-2 sm:-right-[18px] top-0 right-3 flex sm:flex-col flex-row-reverse gap-1 items-start">
131
131
<button
132
-
className="p-1 sm:p-0.5 sm:pl-0 bg-border text-bg-card sm:rounded-r-md sm:rounded-l-none rounded-b-md hover:bg-accent hover:text-accentText "
132
+
className="p-1 sm:p-0.5 sm:pl-0 bg-border text-bg-card sm:rounded-r-md sm:rounded-l-none rounded-b-md hover:bg-accent-1 hover:text-accent-2"
133
133
onClick={() => {
134
134
useUIState.getState().closeCard(props.entityID);
135
135
}}
···
179
179
}) => {
180
180
return (
181
181
<button
182
-
className="cardOptionsMenuItem z-10 text-left text-secondary py-1 px-2 flex gap-2 hover:bg-accent hover:text-accentText "
182
+
className="cardOptionsMenuItem z-10 text-left text-secondary py-1 px-2 flex gap-2 hover:bg-accent-1 hover:text-accent-2"
183
183
onClick={() => {
184
184
props.onClick();
185
185
}}
+15
-12
components/ThemeManager/ThemeProvider.tsx
+15
-12
components/ThemeManager/ThemeProvider.tsx
···
9
9
"--bg-page": string;
10
10
"--bg-card": string;
11
11
"--primary": string;
12
-
"--accent": string;
13
-
"--accent-text": string;
12
+
"--accent-1": string;
13
+
"--accent-2": string;
14
14
"--highlight-1": string;
15
15
"--highlight-2": string;
16
16
"--highlight-3": string;
···
20
20
"theme/page-background": "#F0F7FA",
21
21
"theme/card-background": "#FFFFFF",
22
22
"theme/primary": "#272727",
23
-
"theme/accent-background": "#0000FF",
24
-
"theme/accent-text": "#FFFFFF",
25
23
"theme/highlight-1": "#FFFFFF",
26
24
"theme/highlight-2": "#EDD280",
27
25
"theme/highlight-3": "#9FC4C2",
26
+
27
+
//everywhere else, accent-background = accent-1 and accent-text = accent-2.
28
+
// we just need to create a migration pipeline before we can change this
29
+
"theme/accent-text": "#FFFFFF",
30
+
"theme/accent-background": "#0000FF",
28
31
};
29
32
30
33
function setCSSVariableToColor(el: HTMLElement, name: string, value: Color) {
···
37
40
let bgPage = useColorAttribute(props.entityID, "theme/page-background");
38
41
let bgCard = useColorAttribute(props.entityID, "theme/card-background");
39
42
let primary = useColorAttribute(props.entityID, "theme/primary");
40
-
let accentBG = useColorAttribute(props.entityID, "theme/accent-background");
41
-
let accentText = useColorAttribute(props.entityID, "theme/accent-text");
43
+
let accent1 = useColorAttribute(props.entityID, "theme/accent-background");
44
+
let accent2 = useColorAttribute(props.entityID, "theme/accent-text");
42
45
let backgroundImage = useEntity(props.entityID, "theme/background-image");
43
46
let backgroundImageRepeat = useEntity(
44
47
props.entityID,
···
58
61
bgCard.getChannelValue("alpha").toString(),
59
62
);
60
63
setCSSVariableToColor(el, "--primary", primary);
61
-
setCSSVariableToColor(el, "--accent", accentBG);
62
-
setCSSVariableToColor(el, "--accent-text", accentText);
64
+
setCSSVariableToColor(el, "--accent-1", accent1);
65
+
setCSSVariableToColor(el, "--accent-2", accent2);
63
66
setCSSVariableToColor(el, "--highlight-2", highlight2);
64
67
setCSSVariableToColor(el, "--highlight-3", highlight3);
65
68
···
80
83
bgPage,
81
84
bgCard,
82
85
primary,
83
-
accentBG,
84
-
accentText,
86
+
accent1,
87
+
accent2,
85
88
highlight1,
86
89
highlight2,
87
90
highlight3,
···
100
103
"--bg-card": colorToString(bgCard, "rgb"),
101
104
"--bg-card-alpha": bgCard.getChannelValue("alpha"),
102
105
"--primary": colorToString(primary, "rgb"),
103
-
"--accent": colorToString(accentBG, "rgb"),
104
-
"--accent-text": colorToString(accentText, "rgb"),
106
+
"--accent-1": colorToString(accent1, "rgb"),
107
+
"--accent-2": colorToString(accent2, "rgb"),
105
108
"--highlight-1": highlight1
106
109
? `rgb(${colorToString(parseColor(`hsba(${highlight1.data.value})`), "rgb")})`
107
110
: "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-card)) 75%)",
+23
-23
components/ThemeManager/ThemeSetter.tsx
+23
-23
components/ThemeManager/ThemeSetter.tsx
···
39
39
| "null"
40
40
| "page"
41
41
| "card"
42
-
| "accent"
43
-
| "accentText"
42
+
| "accent-1"
43
+
| "accent-2"
44
44
| "text"
45
45
| "highlight-1"
46
46
| "highlight-2"
···
64
64
let pageValue = useColorAttribute(props.entityID, "theme/page-background");
65
65
let cardValue = useColorAttribute(props.entityID, "theme/card-background");
66
66
let primaryValue = useColorAttribute(props.entityID, "theme/primary");
67
-
let accentBGValue = useColorAttribute(
67
+
let accent1Value = useColorAttribute(
68
68
props.entityID,
69
69
"theme/accent-background",
70
70
);
···
75
75
props.entityID,
76
76
"theme/background-image-repeat",
77
77
);
78
-
let accentTextValue = useColorAttribute(props.entityID, "theme/accent-text");
78
+
let accent2Value = useColorAttribute(props.entityID, "theme/accent-text");
79
79
let [openPicker, setOpenPicker] = useState<pickers>("null");
80
80
let set = useMemo(() => {
81
81
return setColorAttribute(rep, props.entityID);
···
92
92
}, []);
93
93
94
94
let gradient = [
95
-
`radial-gradient(at ${randomPositions[0]}, ${accentBGValue.toString("hex")}80 2px, transparent 70%)`,
95
+
`radial-gradient(at ${randomPositions[0]}, ${accent1Value.toString("hex")}80 2px, transparent 70%)`,
96
96
`radial-gradient(at ${randomPositions[1]}, ${cardValue.toString("hex")}66 2px, transparent 60%)`,
97
97
`radial-gradient(at ${randomPositions[2]}, ${primaryValue.toString("hex")}B3 2px, transparent 100%)`,
98
98
].join(", ");
···
144
144
>
145
145
<div className="flex flex-col mt-4 -mb-[6px] z-10">
146
146
<div
147
-
className="themePageControls text-accentText flex flex-col gap-2 h-full bg-bg-page p-2 rounded-md border border-accentText shadow-[0_0_0_1px_rgb(var(--accent))]"
148
-
style={{ backgroundColor: "rgba(var(--accent), 0.6)" }}
147
+
className="themePageControls text-accent-2 flex flex-col gap-2 h-full bg-bg-page p-2 rounded-md border border-accent-2 shadow-[0_0_0_1px_rgb(var(--accent))]"
148
+
style={{ backgroundColor: "rgba(var(--accent-1), 0.6)" }}
149
149
>
150
150
<ColorPicker
151
151
label="Accent"
152
-
value={accentBGValue}
152
+
value={accent1Value}
153
153
setValue={set("theme/accent-background")}
154
-
thisPicker={"accent"}
154
+
thisPicker={"accent-1"}
155
155
openPicker={openPicker}
156
156
setOpenPicker={setOpenPicker}
157
157
closePicker={() => setOpenPicker("null")}
158
158
/>
159
159
<ColorPicker
160
160
label="Text on Accent"
161
-
value={accentTextValue}
161
+
value={accent2Value}
162
162
setValue={set("theme/accent-text")}
163
-
thisPicker={"accentText"}
163
+
thisPicker={"accent-2"}
164
164
openPicker={openPicker}
165
165
setOpenPicker={setOpenPicker}
166
166
closePicker={() => setOpenPicker("null")}
167
167
/>
168
168
</div>
169
169
<SectionArrow
170
-
fill={theme.colors["accentText"]}
171
-
stroke={theme.colors["accent"]}
170
+
fill={theme.colors["accent-2"]}
171
+
stroke={theme.colors["accent-1"]}
172
172
className="ml-2"
173
173
/>
174
174
</div>
175
175
176
-
<div className="font-bold relative text-center text-lg py-2 rounded-md bg-accent text-accentText shadow-md">
176
+
<div className="font-bold relative text-center text-lg py-2 rounded-md bg-accent-1 text-accent-2 shadow-md">
177
177
Example Button
178
178
</div>
179
179
{/* <hr className="my-3" /> */}
···
223
223
<p className="font-bold">Hello!</p>
224
224
<small className="">
225
225
Welcome to{" "}
226
-
<span className="font-bold text-accent">Leaflet</span>.
226
+
<span className="font-bold text-accent-1">Leaflet</span>.
227
227
It's a super easy and fun way to make, share, and
228
228
collab on little bits of paper
229
229
</small>
···
438
438
</div>
439
439
</div>
440
440
<label className="hover:cursor-pointer h-fit">
441
-
<div className="text-[#8C8C8C] hover:text-accent">
441
+
<div className="text-[#8C8C8C] hover:text-accent-1">
442
442
<BlockImageSmall />
443
443
</div>
444
444
<div className="hidden">
···
511
511
>
512
512
<label className="hover:cursor-pointer ">
513
513
<div
514
-
className="flex gap-2 rounded-md px-2 py-1 text-accent font-bold"
514
+
className="flex gap-2 rounded-md px-2 py-1 text-accent-1 font-bold"
515
515
style={{ backgroundColor: "rgba(var(--bg-card), .6" }}
516
516
>
517
517
<BlockImageSmall /> Change Image
···
538
538
}}
539
539
>
540
540
<CloseContrastSmall
541
-
fill={theme.colors.accent}
542
-
stroke={theme.colors["accentText"]}
541
+
fill={theme.colors["accent-1"]}
542
+
stroke={theme.colors["accent-2"]}
543
543
/>
544
544
</button>
545
545
</div>
···
560
560
}}
561
561
/>
562
562
<div
563
-
className={`shink-0 grow-0 w-fit border border-accent rounded-md px-1 py-0.5 cursor-pointer ${!repeat ? "bg-accent text-accentText" : "bg-transparent text-accent"}`}
563
+
className={`shink-0 grow-0 w-fit border border-accent-1 rounded-md px-1 py-0.5 cursor-pointer ${!repeat ? "bg-accent-1 text-accent-2" : "bg-transparent text-accent-1"}`}
564
564
>
565
565
cover
566
566
</div>
···
585
585
}}
586
586
/>
587
587
<div
588
-
className={`shink-0 grow-0 w-fit z-10 border border-accent rounded-md px-1 py-0.5 cursor-pointer ${repeat ? "bg-accent text-accentText" : "bg-transparent text-accent"}`}
588
+
className={`shink-0 grow-0 w-fit z-10 border border-accent-1 rounded-md px-1 py-0.5 cursor-pointer ${repeat ? "bg-accent-1 text-accent-2" : "bg-transparent text-accent-1"}`}
589
589
>
590
590
repeat
591
591
</div>
···
605
605
});
606
606
}}
607
607
>
608
-
<Slider.Track className="bg-accent relative grow rounded-full h-[3px]"></Slider.Track>
608
+
<Slider.Track className="bg-accent-1 relative grow rounded-full h-[3px]"></Slider.Track>
609
609
<Slider.Thumb
610
-
className="flex w-4 h-4 rounded-full border-2 border-white bg-accent shadow-[0_0_0_1px_#8C8C8C,_inset_0_0_0_1px_#8C8C8C] cursor-pointer"
610
+
className="flex w-4 h-4 rounded-full border-2 border-white bg-accent-1 shadow-[0_0_0_1px_#8C8C8C,_inset_0_0_0_1px_#8C8C8C] cursor-pointer"
611
611
aria-label="Volume"
612
612
/>
613
613
</Slider.Root>
+2
-2
components/Toast.tsx
+2
-2
components/Toast.tsx
···
106
106
? "bg-accent-red text-white"
107
107
: props.toast?.type === "success"
108
108
? "bg-accent-green text-white"
109
-
: "bg-accent text-accentText shadow-md border border-border"
109
+
: "bg-accent-1 text-accent-2 shadow-md border border-border"
110
110
}`}
111
111
>
112
112
<div className="flex gap-2 grow justify-center">{item.content}</div>
···
132
132
className={`smoke text-center pointer-events-none absolute z-50 rounded-full px-2 py-1 text-sm ${
133
133
props.error
134
134
? "border-accent-red text-accent-red border bg-white"
135
-
: "bg-accent text-accentText"
135
+
: "bg-accent-1 text-accent-2"
136
136
}`}
137
137
>
138
138
<style jsx>{`
+4
-2
components/Toolbar/LinkButton.tsx
+4
-2
components/Toolbar/LinkButton.tsx
···
35
35
props.setToolBarState("link");
36
36
}}
37
37
disabled={focusedEditor?.editor.selection.empty}
38
-
tooltipContent={<div className="text-accent underline">Inline Link</div>}
38
+
tooltipContent={
39
+
<div className="text-accent-1 underline">Inline Link</div>
40
+
}
39
41
>
40
42
<LinkTextToolbarSmall />
41
43
</ToolbarButton>
···
113
115
*/}
114
116
<div className="flex items-center gap-3">
115
117
<button
116
-
className="hover:text-accent -mr-6"
118
+
className="hover:text-accent-1 -mr-6"
117
119
onMouseDown={(e) => {
118
120
e.preventDefault();
119
121
let editor = focusedEditor?.editor;
+2
-2
components/Toolbar/index.tsx
+2
-2
components/Toolbar/index.tsx
···
201
201
) : null}
202
202
</div>
203
203
<button
204
-
className="hover:text-accent"
204
+
className="hover:text-accent-1"
205
205
onClick={() => {
206
206
if (toolbarState === "linkBlock") {
207
207
setToolbarState("block");
···
279
279
}}
280
280
/>
281
281
<button
282
-
className="hover:text-accent -mr-6"
282
+
className="hover:text-accent-1 -mr-6"
283
283
onMouseDown={(e) => {
284
284
e.preventDefault();
285
285
submit();
+2
-2
tailwind.config.js
+2
-2
tailwind.config.js
···
31
31
white: "#FFFFFF",
32
32
33
33
//ACCENT COLORS
34
-
accent: "rgb(var(--accent))",
35
-
accentText: "rgb(var(--accent-text))",
34
+
"accent-1": "rgb(var(--accent-1))",
35
+
"accent-2": "rgb(var(--accent-2))",
36
36
37
37
//BG COLORS (defined as css variables in global.css)
38
38
"bg-page": "rgb(var(--bg-page))",