{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "badges-glass", "title": "Glass badges", "description": "Styled badges: the Glass set. 5 decorative badges variations (FrostBadge, TintBadge, CrystalBadge, SmokeBadge, HaloBadge) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.", "dependencies": [], "registryDependencies": [ "@ai2/tokens", "@ai2/glass" ], "files": [ { "path": "registry/ai2/styled/badges-glass.tsx", "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { glassDepth } from \"@/registry/ai2/ui/glass\"\n\n/* Glass badge family: 5 frosted/translucent badges. Color comes ONLY from tokens\n (alpha utility / color-mix), and the sizes line up with the base badge scale\n (+xl). Static (needs no motion).\n\n The surface derives from glassDepth in @ai2/glass (AGENTS.md 4.5) - there is no\n hand-rolled blur any more. The largest surface in this file is h-8 (32px) and\n the smallest is h-5 (20px): the smallest glass surfaces in the design system.\n That is why the scale sits at the very bottom end - sm carries the body, md\n appears in only two variations, and lg/xl are NEVER used. There is nothing\n behind a 20px badge for a 16px blur to diffuse; it would only cost compositing.\n\n twMerge trap: glassDepth carries a [box-shadow:...] (the ai2 signature). A\n second shadow from the same group silently deletes that signature, which is\n why the extra light/shadow is applied with drop-shadow (the filter group). */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst box: Record = {\n sm: \"h-5 gap-1 rounded-md px-1.5 text-xs\",\n md: \"h-6 gap-1.5 rounded-md px-2 text-xs\",\n lg: \"h-7 gap-1.5 rounded-lg px-2.5 text-sm\",\n xl: \"h-8 gap-2 rounded-lg px-3 text-sm\",\n}\n\nconst base =\n \"relative inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap font-medium [&_svg]:size-3 [&_svg]:shrink-0 [&_i]:text-xs [&_i]:leading-none\"\n\ntype Props = React.ComponentProps<\"span\"> & { size?: StyledSize }\n\n/* Frost: plain frosted glass. Depth = sm (4px). The lightest step is a badge's default: in a 20px box the \"frosted\" feel comes not from the blur but from the library signature's inner top highlight. */\nexport function FrostBadge({ className, size = \"md\", children, ...props }: Props) {\n return (\n \n {children}\n \n )\n}\n\n/* Tint: info-toned semi-transparent glass. Depth = sm (4px). The tone is info: primary/brand sits on the neutral ramp (chroma ~0.005), so a \"primary tint\" would stay invisible and produce the same pixels as Smoke. bg DELIBERATELY overrides the library's (tint = surface); the supports- variant is overridden too, otherwise in a browser with backdrop-filter the library's bg-background/50 would take the tint back. */\nexport function TintBadge({ className, size = \"md\", children, ...props }: Props) {\n return (\n \n {children}\n \n )\n}\n\n/* Crystal: clear glass. Depth = sm (4px) - the least diffusing in the family, because being \"clear\" requires being able to see what is behind. It used to draw its own top and bottom inset lines by hand; the library signature now does exactly that (a top highlight plus a bottom edge), and writing a second inset on top would erase the signature through twMerge. Crystal takes its character from a brighter border that foregrounds the signature. */\nexport function CrystalBadge({ className, size = \"md\", children, ...props }: Props) {\n return (\n \n {children}\n \n )\n}\n\n/* Smoke: neutral, smoky glass darkened with foreground. Depth = md (8px) - one of the two \"md\" steps in this family. Smoke means diffusion, so it sits one step above Frost and Crystal; but in a 32px box this is also the ceiling. What separates it from Tint is the absence of hue; that separation only works because Tint is info. */\nexport function SmokeBadge({ className, size = \"md\", children, ...props }: Props) {\n return (\n \n {children}\n \n )\n}\n\n/* Halo: glass body + info halo. Depth = md (8px): the body has to separate a\n little from what is behind it for the halo to read, otherwise the halo is just\n a dirty edge.\n The halo is now a drop-shadow rather than a box-shadow (the filter group): it\n used to be a two-layer shadow-[...], and written alongside glassDepth twMerge\n would have deleted the signature. drop-shadow already follows the shape and\n gives a truer halo on a badge's rounded-md edge than box-shadow would. */\nexport function HaloBadge({ className, size = \"md\", children, ...props }: Props) {\n return (\n \n {children}\n \n )\n}\n", "type": "registry:component", "target": "components/ui/badges-glass.tsx" } ], "categories": [ "styled", "badges" ], "type": "registry:component" }