Merge pull request #13972 from ethereum/shadcn-tag

Shadcn migration - tags

Author: wackerow

src/components/ui/__stories__/Tag.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from "@storybook/react"
+
+import { HStack, VStack } from "../flex"
+import { Tag } from "../tag"
+
+const meta = {
+  title: "Molecules / Display Content / New Tags",
+  component: Tag,
+} satisfies Meta<typeof Tag>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+// "normal" is default status
+const statusArray = ["normal", "tag", "success", "error", "warning"] as const
+
+// "subtle" is default variant
+const variantArray = ["subtle", "highContrast", "solid", "outline"] as const
+
+const StyleVariantList = () => (
+  <HStack>
+    {statusArray.map((status) => (
+      <VStack key={status}>
+        {variantArray.map((variant) => (
+          <Tag key={variant} status={status} variant={variant}>
+            Tag Name
+          </Tag>
+        ))}
+      </VStack>
+    ))}
+  </HStack>
+)
+
+export const StyleVariantsBasic: Story = {
+  render: (args) => <StyleVariantList {...args} />,
+}

src/components/ui/tag.tsx

@@ -0,0 +1,109 @@
+import { cva, VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "@/lib/utils/cn"
+
+const tagVariants = cva(
+  "inline-flex items-center rounded-full border px-2 py-0.5 min-h-8 text-xs uppercase transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      status: {
+        normal: "bg-background-highlight text-body-medium border-body-medium",
+        tag: "bg-primary-low-contrast text-primary-high-contrast border-primary",
+        success: "bg-success-light text-success border-success-border",
+        error: "bg-error-light text-error border-error-border",
+        warning: "bg-warning-light text-warning-dark border-warning-border",
+      },
+      variant: {
+        subtle: "border-transparent",
+        highContrast: "border-transparent",
+        solid: "border-transparent text-body-inverse",
+        outline: "bg-transparent",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "solid",
+        status: "normal",
+        className: "bg-body-medium",
+      },
+      {
+        variant: "solid",
+        status: "tag",
+        className: "bg-primary",
+      },
+      {
+        variant: "solid",
+        status: "success",
+        className: "bg-success text-success-light",
+      },
+      {
+        variant: "solid",
+        status: "error",
+        className: "bg-error text-error-light",
+      },
+      {
+        variant: "solid",
+        status: "warning",
+        className: "bg-warning text-warning-dark",
+      },
+      {
+        variant: "highContrast",
+        status: "normal",
+        className: "bg-body-light text-body",
+      },
+      {
+        variant: "highContrast",
+        status: "tag",
+        className: "bg-background-highlight",
+      },
+      {
+        variant: "highContrast",
+        status: "success",
+        className: "text-success-dark",
+      },
+      {
+        variant: "highContrast",
+        status: "error",
+        className: "text-error-dark",
+      },
+      {
+        variant: "outline",
+        status: "success",
+        className: "text-success-border",
+      },
+      {
+        variant: "outline",
+        status: "error",
+        className: "text-error-border",
+      },
+      {
+        variant: "outline",
+        status: "warning",
+        className: "text-warning-border",
+      },
+    ],
+    defaultVariants: {
+      variant: "subtle",
+      status: "normal",
+    },
+  }
+)
+
+export interface TagProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof tagVariants> {
+  asChild?: boolean
+}
+
+function Tag({ className, asChild, variant, status, ...props }: TagProps) {
+  const Comp = asChild ? Slot : "div"
+  return (
+    <Comp
+      className={cn(tagVariants({ variant, status }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Tag }

src/styles/colors.css

@@ -72,8 +72,8 @@
     --yellow-500: 38, 92%, 50%; /* #F59E0B */
     --yellow-600: 32, 95%, 44%; /* #D97706 */
     --yellow-700: 26, 90%, 37%; /* #B45309 */
-    --yellow-800: 23, 83%, 31%; /* #92400E */
-    --yellow-900: 22, 78%, 26%; /* #78350F */
+    --yellow-800: 23, 88%, 22%; /* #6B2D07 */
+    --yellow-900: 22, 84%, 15%; /* #471E06 */
 
     --red-50: 0, 86%, 97%; /* #fef2f2 */
     --red-100: 0, 93%, 94%; /* #fee2e2 */
@@ -84,7 +84,7 @@
     --red-600: 0, 72%, 51%; /* #dc2626 */
     --red-700: 0, 74%, 42%; /* #b91c1c */
     --red-800: 0, 70%, 35%; /* #991b1b */
-    --red-900: 0, 63%, 31%; /* #7f1d1d */
+    --red-900: 0, 82%, 19%; /* #5A0909 */
 
     --green-50: 138, 76%, 97%; /* #F0FDF4 */
     --green-100: 141, 84%, 93%; /* #DCFCE7 */
@@ -94,8 +94,8 @@
     --green-500: 142, 71%, 45%; /* #22C55E */
     --green-600: 142, 76%, 36%; /* #16A34A */
     --green-700: 142, 72%, 29%; /* #15803D */
-    --green-800: 143, 64%, 24%; /* #166534 */
-    --green-900: 144, 61%, 20%; /* #14532D */
+    --green-800: 143, 74%, 19%; /* #0D5629 */
+    --green-900: 143, 79%, 11%; /* #063418 */
 
     --orange-100: 30, 100%, 94%; /* #FFF0DB */
     --orange-800: 10, 76%, 28%; /* #7D2711 */

src/styles/semantic-tokens.css

@@ -47,12 +47,18 @@
 
     --success: var(--green-600);
     --success-light: var(--green-100);
+    --success-dark: var(--green-900);
+    --success-border: var(--green-700);
 
     --error: var(--red-700);
     --error-light: var(--red-100);
+    --error-dark: var(--red-900);
+    --error-border: var(--red-800);
 
-    --warning: var(--yellow-400);
+    --warning: var(--yellow-300);
     --warning-light: var(--yellow-100);
+    --warning-dark: var(--yellow-900);
+    --warning-border: var(--yellow-700);
 
     /**
     /* Gradients (radial, conic, or linear over 3 stops)
@@ -152,7 +158,20 @@
     --accent-c: var(--teal-400);
     --accent-c-hover: var(--teal-300);
 
+    --success: var(--green-600);
+    --success-light: var(--green-100);
+    --success-dark: var(--green-900);
+    --success-border: var(--green-400);
+
+    --error: var(--red-700);
+    --error-light: var(--red-100);
+    --error-dark: var(--red-900);
+    --error-border: var(--red-300);
+
     --warning: var(--yellow-300);
+    --warning-light: var(--yellow-100);
+    --warning-dark: var(--yellow-900);
+    --warning-border: var(--yellow-200);
 
     /* Gradients (dark mode adjustments) */
     --radial-a-opacity-1: 0.16;

tailwind.config.ts

@@ -189,16 +189,22 @@ const config = {
         success: {
           DEFAULT: "hsla(var(--success))",
           light: "hsla(var(--success-light))",
+          dark: "hsla(var(--success-dark))",
+          border: "hsla(var(--success-border))",
         },
 
         error: {
           DEFAULT: "hsla(var(--error))",
           light: "hsla(var(--error-light))",
+          dark: "hsla(var(--error-dark))",
+          border: "hsla(var(--error-border))",
         },
 
         warning: {
           DEFAULT: "hsla(var(--warning))",
           light: "hsla(var(--warning-light))",
+          dark: "hsla(var(--warning-dark))",
+          border: "hsla(var(--warning-border))",
         },
 
         /** @deprecated */