bin chakra typographical elements

web/src/components/category/CategoryList/CategoryList.tsx

@@ -7,7 +7,8 @@ import { map } from "lodash/fp";
 
 import { Category } from "src/api/openapi/schemas";
 import { Unready } from "src/components/site/Unready";
-import { List } from "src/theme/components";
+
+import { styled } from "@/styled-system/jsx";
 
 import { CategoryListItem } from "./CategoryListItem";
 import { useCategoryList } from "./useCategoryList";
@@ -29,12 +30,12 @@ export function CategoryList() {
       collisionDetection={closestCenter}
       onDragEnd={handleDragEnd}
     >
-      <List
+      <styled.ul
         overflow="hidden"
-        margin={0}
+        margin="0"
         display="flex"
         flexDirection="column"
-        gap={2}
+        gap="2"
         width="full"
         css={{
           touchAction: "none",
@@ -43,7 +44,7 @@ export function CategoryList() {
         <SortableContext items={items} strategy={verticalListSortingStrategy}>
           {mapCategories(isAdmin)(categories)}
         </SortableContext>
-      </List>
+      </styled.ul>
     </DndContext>
   );
 }

web/src/components/feed/link/LinkPost.tsx

@@ -1,14 +1,20 @@
-import NextLink from "next/link";
-
 import { Link, ThreadReference } from "src/api/openapi/schemas";
 import { useSession } from "src/auth";
 import { Byline } from "src/components/content/Byline";
 import { CollectionMenu } from "src/components/content/CollectionMenu/CollectionMenu";
-import { Heading, LinkBox, LinkOverlay } from "src/theme/components";
+import { Heading1 } from "src/theme/components/Heading/Index";
 
 import { FeedItemMenu } from "../common/FeedItemMenu/FeedItemMenu";
 
-import { Box, Flex, HStack, VStack, styled } from "@/styled-system/jsx";
+import {
+  Box,
+  Flex,
+  HStack,
+  LinkBox,
+  LinkOverlay,
+  VStack,
+  styled,
+} from "@/styled-system/jsx";
 
 type Props = {
   thread: ThreadReference;
@@ -54,11 +60,12 @@ export function LinkPost(props: Props) {
             p="2"
           >
             <Flex width="full" justifyContent="space-between">
-              <Heading size="sm">
-                <LinkOverlay as={NextLink} href={permalink}>
+              <Heading1 size="sm">
+                <LinkOverlay href={permalink}>
+                  {/* TODO: Next.js Link */}
                   {props.thread.title}
                 </LinkOverlay>
-              </Heading>
+              </Heading1>
             </Flex>
 
             <styled.p lineClamp={2}>

web/src/components/feed/text/TextPost.tsx

@@ -1,15 +1,19 @@
-import NextLink from "next/link";
-
 import { ThreadReference } from "src/api/openapi/schemas";
 import { useSession } from "src/auth";
 import { Byline } from "src/components/content/Byline";
 import { CollectionMenu } from "src/components/content/CollectionMenu/CollectionMenu";
-import { Heading, LinkBox, LinkOverlay } from "src/theme/components";
+import { Heading1 } from "src/theme/components/Heading/Index";
 
 import { FeedItem } from "../common/FeedItem/FeedItem";
 import { FeedItemMenu } from "../common/FeedItemMenu/FeedItemMenu";
 
-import { Flex, HStack, styled } from "@/styled-system/jsx";
+import {
+  Flex,
+  HStack,
+  LinkBox,
+  LinkOverlay,
+  styled,
+} from "@/styled-system/jsx";
 
 type Props = {
   thread: ThreadReference;
@@ -24,11 +28,14 @@ export function TextPost(props: Props) {
     <LinkBox>
       <FeedItem>
         <Flex justifyContent="space-between">
-          <Heading size="sm">
-            <LinkOverlay as={NextLink} href={permalink}>
+          <Heading1 size="sm">
+            <LinkOverlay
+              //as={NextLink} // TODO
+              href={permalink}
+            >
               {props.thread.title}
             </LinkOverlay>
-          </Heading>
+          </Heading1>
         </Flex>
 
         <styled.p lineClamp={3}>{props.thread.short}</styled.p>

web/src/components/site/Navigation/Navpill/components/SearchResults.tsx

@@ -1,17 +1,18 @@
 import { PostProps } from "src/api/openapi/schemas";
-import { ListItem, OrderedList, Text } from "src/theme/components";
+
+import { styled } from "@/styled-system/jsx";
 
 type Props = {
   results: PostProps[];
 };
 export function SearchResults(props: Props) {
   return (
-    <OrderedList m={0}>
+    <styled.ol m="0">
       {props.results.map((v) => (
-        <ListItem key={v.id}>
-          <Text>{v.body}</Text>
-        </ListItem>
+        <styled.li key={v.id}>
+          <p>{v.body}</p>
+        </styled.li>
       ))}
-    </OrderedList>
+    </styled.ol>
   );
 }

web/src/components/site/Navigation/Sidebar/Sidebar.tsx

@@ -3,13 +3,12 @@
 import { LinkIcon, UsersIcon } from "@heroicons/react/24/outline";
 
 import { CategoryCreateTrigger } from "src/components/category/CategoryCreate/CategoryCreateTrigger";
-import { Divider } from "src/theme/components";
 import { Link } from "src/theme/components/Link";
 
 import { CategoryList } from "../../../category/CategoryList/CategoryList";
 import { useNavigation } from "../useNavigation";
 
-import { Box, VStack, styled } from "@/styled-system/jsx";
+import { Box, Divider, VStack, styled } from "@/styled-system/jsx";
 
 import { Authbar } from "./components/Authbar";
 import { Title } from "./components/Title";
@@ -53,10 +52,7 @@ export function Sidebar() {
 
             <Toolbar />
 
-            <Divider
-              // TODO: make this clever based on accent colour.
-              borderColor="oklch(0 0 0deg / 5%)"
-            />
+            <Divider />
 
             <Box
               overflowY="scroll"
@@ -74,10 +70,7 @@ export function Sidebar() {
 
             {isAdmin && <CategoryCreateTrigger />}
 
-            <Divider
-              // TODO: make this clever based on accent colour.
-              borderColor="oklch(0 0 0deg / 5%)"
-            />
+            <Divider />
 
             <Link w="full" size="xs" href="/l">
               <LinkIcon />

web/src/components/site/Timestamp.tsx

@@ -1,21 +1,22 @@
-import { LinkProps, Text } from "src/theme/components";
+import { styled } from "@/styled-system/jsx";
 
 import { Anchor } from "./Anchor";
 
 type Props = {
   created: string;
   updated?: string | undefined;
-} & LinkProps;
+  href?: string;
+};
 
 export function Timestamp({ created, updated, ...props }: Props) {
   return (
-    <Text as="span">
+    <styled.span>
       {props.href ? (
         <Anchor href={props.href}>{created}</Anchor>
       ) : (
-        <Text as="span">{created}</Text>
+        <styled.span>{created}</styled.span>
       )}
       {updated && <> (updated {updated})</>}
-    </Text>
+    </styled.span>
   );
 }

web/src/components/thread/ReactList/ReactList.tsx

@@ -1,8 +1,6 @@
 import { PlusIcon } from "@heroicons/react/24/outline";
 
 import {
-  List,
-  ListItem,
   Popover,
   PopoverArrow,
   PopoverBody,
@@ -11,26 +9,26 @@ import {
 } from "src/theme/components";
 import { Button } from "src/theme/components/Button";
 
-import { Box } from "@/styled-system/jsx";
+import { Box, styled } from "@/styled-system/jsx";
 
 import { Props, emojiPickerContainerID, useReactList } from "./useReactList";
 
 export function ReactList(props: Props) {
   const { onOpen, authenticated } = useReactList(props);
   return (
-    <List
+    <styled.ul
       display="flex"
       flexDirection="row"
-      gap={1}
+      gap="1"
       alignItems="center"
       alignContent="center"
       flexWrap="wrap"
-      margin={0}
+      margin="0"
     >
       {props.reacts?.map((r) => (
-        <ListItem key={r.id}>
+        <styled.li key={r.id}>
           <Button size="xs">{r.emoji}</Button>
-        </ListItem>
+        </styled.li>
       ))}
 
       {authenticated && (
@@ -50,6 +48,6 @@ export function ReactList(props: Props) {
           </PopoverContent>
         </Popover>
       )}
-    </List>
+    </styled.ul>
   );
 }

web/src/theme/components/index.ts

@@ -2,24 +2,17 @@ import {
   BoxProps,
   CloseButton,
   CreateToastFnReturn,
-  Divider,
   FlexProps,
-  Heading,
   Image,
-  Link,
   LinkBox,
   LinkOverlay,
   LinkProps,
-  List,
-  ListIcon,
-  ListItem,
   Menu,
   MenuButton,
   MenuDivider,
   MenuGroup,
   MenuItem,
   MenuList,
-  OrderedList,
   Popover,
   PopoverArrow,
   PopoverBody,
@@ -28,15 +21,10 @@ import {
   SlideFade,
   Spinner,
   StackProps,
-  Text,
 } from "@chakra-ui/react";
 
 // NOTE: These are being replaced gradually, so these are being re-exported.
 
-// Typography
-
-export { Divider, Heading, Link, List, ListIcon, ListItem, OrderedList, Text };
-
 // Menu
 
 export { Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, MenuList };