a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

renamed accent colors. accent bg is now accent-1 and accent text is accent-2 so that i can do some color stuff

celine d06f7f8d bdf7b53d

+71 -66
+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
··· 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
··· 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
··· 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
··· 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
··· 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 }}
+1 -1
components/ShareOptions/index.tsx
··· 39 39 <Popover.Root> 40 40 <Popover.Trigger> 41 41 <div className="sm:w-8 sm:h-8 relative"> 42 - <div className="z-10 group/share sm:absolute top-0 left-0 rounded-full w-fit h-max bg-accent text-accentText flex gap-2 p-1 place-items-center justify-center"> 42 + <div className="z-10 group/share sm:absolute top-0 left-0 rounded-full w-fit h-max bg-accent-1 text-accent-2 flex gap-2 p-1 place-items-center justify-center"> 43 43 <ShareSmall /> 44 44 <div className="font-bold pr-[6px] sm:hidden group-hover/share:block"> 45 45 Share
+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
··· 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&apos;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
··· 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
··· 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
··· 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
··· 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))",