unify feed card styles into a pattern

web/panda.config.ts

@@ -62,14 +62,39 @@ export default defineConfig({
         properties: {},
         transform(props) {
           return {
-            backgroundColor: "whiteAlpha.800",
+            backgroundColor: "bg.opaque",
             backdropBlur: "frosted",
             backdropFilter: "auto",
             boxShadow: "sm",
             borderRadius: "lg",
           };
         },
       },
+      Card: {
+        description: `A card component that can be used to display content in a container with a border and a shadow.`,
+        properties: {
+          kind: {
+            type: "enum",
+            value: ["edge", "default"],
+          },
+        },
+        transform(props) {
+          const { kind } = props;
+
+          const padding = kind === "edge" ? "0" : "2";
+
+          return {
+            display: "flex",
+            flexDirection: "column",
+            gap: "2",
+            width: "full",
+            boxShadow: "sm",
+            borderRadius: "lg",
+            backgroundColor: "bg.default",
+            padding,
+          };
+        },
+      },
     },
   },
 
@@ -157,6 +182,12 @@ export default defineConfig({
             default: {
               value: { base: "{colors.white}", _dark: "{colors.gray.200}" },
             },
+            opaque: {
+              value: {
+                base: "{colors.whiteAlpha.800}",
+                _dark: "{colors.blackAlpha.800}",
+              },
+            },
             subtle: {
               value: { base: "{colors.gray.200}", _dark: "{colors.gray.300}" },
             },

web/src/components/feed/common/FeedItem/FeedItem.tsx

@@ -1,20 +1,8 @@
 import { PropsWithChildren } from "react";
 
 import { styled } from "@/styled-system/jsx";
+import { Card } from "@/styled-system/patterns";
 
 export function FeedItem({ children }: PropsWithChildren) {
-  return (
-    <styled.article
-      display="flex"
-      flexDir="column"
-      width="full"
-      p="2"
-      gap="2"
-      boxShadow="md"
-      borderRadius="md"
-      backgroundColor="white"
-    >
-      {children}
-    </styled.article>
-  );
+  return <styled.article className={Card()}>{children}</styled.article>;
 }

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

@@ -17,6 +17,7 @@ import {
   VStack,
   styled,
 } from "@/styled-system/jsx";
+import { Card } from "@/styled-system/patterns";
 
 type Props = {
   thread: ThreadReference;
@@ -32,15 +33,7 @@ export function LinkPost(props: Props) {
 
   return (
     <LinkBox>
-      <styled.article
-        display="flex"
-        flexDir="column"
-        width="full"
-        boxShadow="md"
-        borderRadius="md"
-        backgroundColor="white"
-        overflow="hidden"
-      >
+      <styled.article className={Card({ kind: "edge" })}>
         <Box display="flex" w="full" height="24">
           <Box flexGrow="1" flexShrink="0" width="32">
             {asset ? (

web/styled-system/jsx/card.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { CardProperties } from '../patterns/card';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface CardProps extends CardProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CardProperties > {}
+
+/** A card component that can be used to display content in a container with a border and a shadow. */
+export declare const Card: FunctionComponent<CardProps>

web/styled-system/jsx/card.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { styled } from './factory.mjs';
+import { getCardStyle } from '../patterns/card.mjs';
+
+export const Card = /* @__PURE__ */ forwardRef(function Card(props, ref) {
+  const { kind, ...restProps } = props
+const styleProps = getCardStyle({kind})
+return createElement(styled.div, { ref, ...styleProps, ...restProps })
+})

web/styled-system/jsx/index.d.ts

@@ -24,5 +24,6 @@ export * from './float';
 export * from './bleed';
 export * from './visually-hidden';
 export * from './frosted-glass';
+export * from './card';
 
 export type { HTMLStyledProps, StyledComponent } from '../types/jsx';

web/styled-system/jsx/index.mjs

@@ -20,4 +20,5 @@ export * from './divider.mjs';
 export * from './float.mjs';
 export * from './bleed.mjs';
 export * from './visually-hidden.mjs';
-export * from './frosted-glass.mjs';
+export * from './frosted-glass.mjs';
+export * from './card.mjs';

web/styled-system/patterns/card.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface CardProperties {
+   kind?: ConditionalValue<"edge" | "default">
+}
+
+
+interface CardStyles extends CardProperties, DistributiveOmit<SystemStyleObject, keyof CardProperties > {}
+
+interface CardPatternFn {
+  (styles?: CardStyles): string
+  raw: (styles?: CardStyles) => SystemStyleObject
+}
+
+/** A card component that can be used to display content in a container with a border and a shadow. */
+export declare const Card: CardPatternFn;

web/styled-system/patterns/card.mjs

@@ -0,0 +1,23 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const CardConfig = {
+transform(props) {
+  const { kind } = props;
+  const padding = kind === "edge" ? "0" : "2";
+  return {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2",
+    width: "full",
+    boxShadow: "sm",
+    borderRadius: "lg",
+    backgroundColor: "bg.default",
+    padding
+  };
+}}
+
+export const getCardStyle = (styles = {}) => CardConfig.transform(styles, { map: mapObject })
+
+export const Card = (styles) => css(getCardStyle(styles))
+Card.raw = getCardStyle

web/styled-system/patterns/frosted-glass.mjs

@@ -4,7 +4,7 @@ import { css } from '../css/index.mjs';
 const FrostedGlassConfig = {
 transform(props) {
   return {
-    backgroundColor: "whiteAlpha.800",
+    backgroundColor: "bg.opaque",
     backdropBlur: "frosted",
     backdropFilter: "auto",
     boxShadow: "sm",

web/styled-system/patterns/index.d.ts

@@ -19,4 +19,5 @@ export * from './divider';
 export * from './float';
 export * from './bleed';
 export * from './visually-hidden';
-export * from './frosted-glass';
+export * from './frosted-glass';
+export * from './card';

web/styled-system/patterns/index.mjs

@@ -18,4 +18,5 @@ export * from './divider.mjs';
 export * from './float.mjs';
 export * from './bleed.mjs';
 export * from './visually-hidden.mjs';
-export * from './frosted-glass.mjs';
+export * from './frosted-glass.mjs';
+export * from './card.mjs';

web/styled-system/tokens/index.css

@@ -510,6 +510,7 @@
   --colors-accent-dark-text: var(--accent-colour-dark-text-500);
   --colors-bg-canvas: var(--colors-gray-100);
   --colors-bg-default: var(--colors-white);
+  --colors-bg-opaque: var(--colors-white-alpha-800);
   --colors-bg-subtle: var(--colors-gray-200);
   --colors-bg-muted: var(--colors-gray-300);
   --colors-bg-emphasized: var(--colors-gray-400);
@@ -571,6 +572,7 @@ oklch(80% 0.15 360)
 
 .dark {
   --colors-bg-default: var(--colors-gray-200);
+  --colors-bg-opaque: var(--colors-black-alpha-800);
   --colors-bg-subtle: var(--colors-gray-300);
   --colors-bg-muted: var(--colors-gray-400);
   --colors-bg-emphasized: var(--colors-gray-500);

web/styled-system/tokens/index.mjs

@@ -2039,6 +2039,10 @@ const tokens = {
     "value": "var(--colors-bg-default)",
     "variable": "var(--colors-bg-default)"
   },
+  "colors.bg.opaque": {
+    "value": "var(--colors-bg-opaque)",
+    "variable": "var(--colors-bg-opaque)"
+  },
   "colors.bg.subtle": {
     "value": "var(--colors-bg-subtle)",
     "variable": "var(--colors-bg-subtle)"
@@ -2431,6 +2435,10 @@ const tokens = {
     "value": "var(--colors-color-palette-default)",
     "variable": "var(--colors-color-palette-default)"
   },
+  "colors.colorPalette.opaque": {
+    "value": "var(--colors-color-palette-opaque)",
+    "variable": "var(--colors-color-palette-opaque)"
+  },
   "colors.colorPalette.subtle": {
     "value": "var(--colors-color-palette-subtle)",
     "variable": "var(--colors-color-palette-subtle)"