FE-1304: add badge to ds

.changeset/shy-turkeys-pump.md

@@ -0,0 +1,5 @@
+---
+"@hashintel/ds-components": minor
+---
+
+Badge: new UI + api

libs/@hashintel/ds-components/src/components/Avatar/avatar.tsx

@@ -21,7 +21,7 @@ type AvatarProps = {
     | { initials: string }
     | { icon: IconName }
     | { custom: React.ReactNode };
-  shape: "circle" | "square";
+  shape?: "circle" | "square";
   tone?: Extract<Tone, "neutral" | "brand">;
 } & ExclusifyUnion<
   | { onClick?: React.ButtonHTMLAttributes<Element>["onClick"] }
@@ -40,7 +40,7 @@ const placeholderIconSize: Record<FormInputSize, FormInputSize> = {
 
 export const Avatar = ({
   className,
-  shape,
+  shape = "circle",
   src,
   alt,
   size = "md",

libs/@hashintel/ds-components/src/components/Badge/badge.recipe.ts

@@ -0,0 +1,91 @@
+import { cva } from "@hashintel/ds-helpers/css";
+
+// The badge pill itself (e.g. "99+"): a small tinted status chip. `BaseBadge`
+// owns where it sits; this recipe owns how it looks. With no `content` it
+// collapses to a small dot.
+export const badgeRecipe = cva({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "0.5",
+    boxSizing: "border-box",
+    flexShrink: "0",
+    minWidth: "[var(--badge-size)]",
+    height: "[var(--badge-size)]",
+    paddingInline: "var(--spacing-1)",
+    fontFamily: "body",
+    fontSize: "xxs",
+    fontWeight: "semibold",
+    lineHeight: "[1]",
+    fontVariantNumeric: "tabular-nums",
+    whiteSpace: "nowrap",
+    userSelect: "none",
+    background: "[var(--badge-bg)]",
+    border: "[1px solid var(--badge-bd)]",
+    borderRadius: "[var(--badge-radius)]",
+    "--badge-size": "[16px]",
+    "--badge-radius": "var(--radii-sm)",
+  },
+  variants: {
+    color: {
+      grey: {
+        "--badge-bg": "var(--colors-neutral-s30)",
+        "--badge-bd": "var(--colors-neutral-s50)",
+        color: "neutral.s120",
+      },
+      red: {
+        "--badge-bg": "var(--colors-red-s30)",
+        "--badge-bd": "var(--colors-red-s40)",
+        color: "red.s110",
+      },
+      blue: {
+        "--badge-bg": "var(--colors-blue-s30)",
+        "--badge-bd": "var(--colors-blue-s45)",
+        color: "blue.s110",
+      },
+      green: {
+        "--badge-bg": "var(--colors-green-s30)",
+        "--badge-bd": "var(--colors-green-s50)",
+        color: "green.s110",
+      },
+      orange: {
+        "--badge-bg": "var(--colors-orange-s30)",
+        "--badge-bd": "var(--colors-orange-s45)",
+        color: "orange.s90",
+      },
+      yellow: {
+        "--badge-bg": "var(--colors-yellow-s30)",
+        "--badge-bd": "var(--colors-yellow-s40)",
+        color: "yellow.s110",
+      },
+      purple: {
+        "--badge-bg": "var(--colors-purple-s30)",
+        "--badge-bd": "var(--colors-purple-s45)",
+        color: "purple.s110",
+      },
+      pink: {
+        "--badge-bg": "var(--colors-pink-s30)",
+        "--badge-bd": "var(--colors-pink-s40)",
+        color: "pink.s110",
+      },
+    },
+    shape: {
+      square: {},
+      round: { "--badge-radius": "var(--radii-full)" },
+    },
+    dot: {
+      true: {
+        "--badge-size": "[8px]",
+        "--badge-radius": "var(--radii-full)",
+        "--badge-bd": "[transparent]",
+        background: "[currentColor]",
+        paddingInline: "0",
+      },
+    },
+  },
+  defaultVariants: {
+    color: "grey",
+    shape: "round",
+  },
+});