card component, needs accessiblity and states improvements, boxShadow…

…s added to the global tw config

apps/design-system/stories/card.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Card } from "@repo/design-system/card";
+
+const meta: Meta<typeof Card> = {
+  title: "Components/Card",
+  component: Card,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          backgroundColor: "lightgray",
+          alignItems: "center",
+          height: "100vh",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+type CardStory = StoryObj<typeof meta>;
+
+export const Default: CardStory = {
+  args: {
+    children: "Hello, World!",
+    color: "white",
+    corner: "topRight",
+  },
+};
+
+export const Border: CardStory = {
+  args: {
+    children: "Hello, World!",
+    color: "white",
+    corner: "topRight",
+    border: "default",
+  },
+};
+
+export const BorderAndShadow: CardStory = {
+  args: {
+    children: "Hello, World!",
+    color: "white",
+    corner: "topRight",
+    border: "default",
+    shadow: "default",
+  },
+};
+
+export default meta;

packages/design-system/config/boxShadow.ts

@@ -0,0 +1,11 @@
+import { ThemeConfig } from "tailwindcss/types/config";
+
+const boxShadow: Pick<Partial<ThemeConfig>, "boxShadow"> = {
+  // !!! Adding custom boxShadow
+  boxShadow: {
+    // TODO: rewrite colors in RGB later
+    neutral: "6px 8px 0px 0px #DAD8D733",
+  },
+};
+
+export default boxShadow;

packages/design-system/config/colors.ts

@@ -30,7 +30,7 @@ const backgroundColorNeutral = {
   neutral: neutralColors[90],
   "neutral-strong-hover": neutralColors[30],
   "neutral-strong-active": neutralColors[10],
-  "neutral-disaled": neutralColors[70],
+  "neutral-disabled": neutralColors[70],
   "neutral-backdrop": `rgb(from ${neutralColors[70]} r g b / 0.1)`,
   "neutral-backdrop-hover": `rgb(from ${neutralColors[70]} r g b / 0.2)`,
   "neutral-backdrop-active": `rgb(from ${neutralColors[70]} r g b / 0.6)`,

packages/design-system/src/card.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { HTMLAttributes } from "react";
+import { cva, VariantProps } from "class-variance-authority";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+  children: React.ReactNode;
+} & VariantProps<typeof cardVariants> &
+  HTMLAttributes<HTMLDivElement>;
+
+const cardVariants = cva(
+  "disabled:k1-bg-neutral-disabled disabled:k1-pointer-events-none focus:k1-ring-purple-500 focus:k1-ring-8",
+  {
+    variants: {
+      color: {
+        white:
+          // TODO: add white as neutral-fg-inverse to the config?
+          "k1-bg-white hover:k1-bg-neutral-backdrop-hover active:k1-bg-neutral-backdrop-active",
+        blue: "k1-bg-primary hover:k1-bg-primary-strong-hover active:k1-bg-primary-strong-active",
+        transparent:
+          "k1-bg-transparent hover:k1-bg-neutral-backdrop-hover active:k1-bg-neutral-backdrop-active",
+      },
+      corner: {
+        topRight: "k1-rounded-l k1-rounded-br",
+        topLeft: "k1-rounded-r k1-rounded-bl",
+        bottomRight: "k1-rounded-t k1-rounded-bl",
+        bottomLeft: "k1-rounded-t k1-rounded-br",
+      },
+      border: {
+        default: "k1-border-neutral k1-border",
+        strong: "k1-border-primary-strong k1-border",
+        none: null,
+      },
+      shadow: {
+        default: "k1-shadow-neutral",
+        none: null,
+      },
+    },
+    defaultVariants: {
+      color: "white",
+      corner: "topRight",
+      border: "default",
+      shadow: "default",
+    },
+  },
+);
+
+const Card = ({
+  children,
+  color,
+  corner,
+  border,
+  shadow,
+  className,
+  ...rest
+}: Props): JSX.Element => {
+  return (
+    <div
+      className={twMerge(
+        cardVariants({ color, corner, border, shadow }),
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
+
+export { Card, cardVariants };

packages/design-system/tailwind.config.ts

@@ -3,6 +3,7 @@ import colors from "./config/colors";
 import typography from "./config/typography";
 import spacing from "./config/spacing";
 import borderRadius from "./config/borderRadius";
+import boxShadow from "./config/boxShadow";
 
 // Each package is responsible for its own content
 const config: Config = {
@@ -13,6 +14,7 @@ const config: Config = {
       ...colors,
       ...typography,
       ...spacing,
+      ...boxShadow,
     },
     // Replace the default Tailwind CSS with our own
     ...borderRadius,