@miragon/mcp-toolkit-ui 2.6.0 → 2.7.0

package/src/no-hardcoded-copy.test.ts

@@ -0,0 +1,432 @@
+import ts from "typescript"
+import { describe, expect, it } from "vitest"
+import { TEXT_ATTRIBUTES } from "./render-scan.js"
+
+/**
+ * Static half of the i18n guard (the render half is `i18n-coverage.test.tsx`):
+ * no toolkit component may carry user-facing copy in its source. Every word a
+ * user reads or hears comes from the locale catalog (`locale/messages-*.ts`)
+ * or from the consumer's props. This catches what an SSR render cannot reach —
+ * portal content (dialogs, sheets, select menus) and branches the fixtures do
+ * not hit.
+ *
+ * Flagged in every `.tsx` under src (tests and the render-case fixtures
+ * excepted):
+ *  - JSX text containing a letter;
+ *  - a string literal with a letter rendered as a child (`{"…"}`, `{x ? "a" : "b"}`,
+ *    `{x && "a"}`, template literals);
+ *  - such a literal in a text attribute of a DOM element (aria-label, title,
+ *    placeholder, alt, …), or in any prop of a component except the
+ *    non-text props below (variants, sizes, roles, ids, …).
+ *
+ * And in every `.ts`/`.tsx` source, the feedback copy rule: the sentences of
+ * a feedback surface carry catalog text only, never a literal and never a raw
+ * error. Feedback surfaces are the `title`/`description` of a
+ * `<x>.show({ … })` toast call and of `ErrorState`/`EmptyState`, and the
+ * content of an inline alert (any element with `role="alert"` or
+ * `role="status"`, and the `Alert` primitive). A raw error is `e.message`,
+ * `String(e)`, an `errorText(e)` helper, or a value named as one once it sits
+ * in state or props (`error`, `err`, `reason`, `saveError`, `callErrorReason`
+ * …). The raw reason belongs in the console or under an ErrorState's
+ * "Details", not in a sentence the user reads.
+ */
+
+declare global {
+  interface ImportMeta {
+    glob(
+      pattern: string | string[],
+      options: { query: "?raw"; import: "default"; eager: true },
+    ): Record<string, string>
+  }
+}
+
+const SOURCES = import.meta.glob(["./**/*.tsx", "!./**/*.test.tsx", "!./render-cases*.tsx"], {
+  query: "?raw",
+  import: "default",
+  eager: true,
+})
+
+const TS_SOURCES = import.meta.glob(["./**/*.ts", "!./**/*.test.ts", "!./**/*.d.ts"], {
+  query: "?raw",
+  import: "default",
+  eager: true,
+})
+
+/** Component props that never carry user-facing copy. */
+const NON_TEXT_PROPS = new Set([
+  "className",
+  "variant",
+  "size",
+  "type",
+  "side",
+  "role",
+  "tone",
+  "iconTone",
+  "titleAs",
+  "titleMode",
+  "orientation",
+  "align",
+  "value",
+  "defaultValue",
+  "id",
+  "name",
+  "htmlFor",
+  "href",
+  "target",
+  "rel",
+  "mode",
+  "asChild",
+  "dir",
+])
+
+const HAS_LETTER = /\p{L}/u
+const TEXT_ATTRS = new Set<string>(TEXT_ATTRIBUTES)
+
+/** String literals in an expression that would end up rendered as text. */
+function renderedLiterals(node: ts.Expression): ts.Node[] {
+  if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) return [node]
+  if (ts.isTemplateExpression(node)) return [node.head, ...node.templateSpans.map((s) => s.literal)]
+  if (ts.isParenthesizedExpression(node) || ts.isAsExpression(node)) {
+    return renderedLiterals(node.expression)
+  }
+  if (ts.isConditionalExpression(node)) {
+    return [...renderedLiterals(node.whenTrue), ...renderedLiterals(node.whenFalse)]
+  }
+  if (ts.isBinaryExpression(node)) {
+    const op = node.operatorToken.kind
+    if (op === ts.SyntaxKind.AmpersandAmpersandToken) return renderedLiterals(node.right)
+    if (op === ts.SyntaxKind.BarBarToken || op === ts.SyntaxKind.QuestionQuestionToken) {
+      return [...renderedLiterals(node.left), ...renderedLiterals(node.right)]
+    }
+  }
+  return []
+}
+
+function literalText(node: ts.Node): string {
+  if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) return node.text
+  if (ts.isTemplateHead(node) || ts.isTemplateMiddle(node) || ts.isTemplateTail(node)) {
+    return node.text
+  }
+  return ""
+}
+
+function tagName(attr: ts.JsxAttribute): string {
+  const opening = attr.parent.parent
+  return opening.tagName.getText()
+}
+
+/**
+ * Whether an attribute is rendered text: the text attributes on any element;
+ * on a component additionally every prop that is not a known non-text prop.
+ */
+function isTextAttribute(attr: ts.JsxAttribute): boolean {
+  const name = attr.name.getText()
+  if (TEXT_ATTRS.has(name)) return true
+  if (/^[a-z]/.test(tagName(attr))) return false
+  if (name.endsWith("ClassName")) return false
+  return !NON_TEXT_PROPS.has(name) && !name.startsWith("data-") && !name.startsWith("aria-")
+}
+
+function hardcodedCopy(file: string, source: string): string[] {
+  const sf = ts.createSourceFile(file, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX)
+  const found: string[] = []
+  const report = (node: ts.Node, text: string) => {
+    const { line } = sf.getLineAndCharacterOfPosition(node.getStart(sf))
+    found.push(`${file}:${line + 1}: "${text.trim().replace(/\s+/g, " ")}"`)
+  }
+  const visit = (node: ts.Node) => {
+    if (ts.isJsxText(node) && HAS_LETTER.test(node.text)) report(node, node.text)
+    if (ts.isJsxExpression(node) && node.expression) {
+      const parent = node.parent
+      const rendered =
+        ts.isJsxElement(parent) ||
+        ts.isJsxFragment(parent) ||
+        (ts.isJsxAttribute(parent) && isTextAttribute(parent))
+      if (rendered) {
+        for (const lit of renderedLiterals(node.expression)) {
+          const text = literalText(lit)
+          if (HAS_LETTER.test(text)) report(lit, text)
+        }
+      }
+    }
+    if (
+      ts.isJsxAttribute(node) &&
+      node.initializer &&
+      ts.isStringLiteral(node.initializer) &&
+      HAS_LETTER.test(node.initializer.text) &&
+      isTextAttribute(node)
+    ) {
+      report(node.initializer, node.initializer.text)
+    }
+    ts.forEachChild(node, visit)
+  }
+  visit(sf)
+  return found
+}
+
+/** Calls that turn a caught error into text. */
+const RAW_ERROR_CALLS = new Set(["errorText", "errorMessage", "String"])
+
+/**
+ * Names a caught error (or its text) takes once it is held in state or passed
+ * as a prop: `e`, `err`, `error`, `reason`, `cause`, or a name ending in
+ * `Error`/`Reason` (`saveError`, `callErrorReason`). Flags (`isError`,
+ * `hasError`, `showError`) are not errors.
+ */
+const RAW_ERROR_NAME = /^(?:e|err|error|reason|cause)$|^(?!(?:is|has|show)[A-Z]).*(?:Error|Reason)$/
+
+/**
+ * Whether an expression reads a raw error: `.message`/`.stack`, a raw-error
+ * call, or a reference to a value named as an error. Declarations, property
+ * names, types and the attributes of nested JSX are not reads; the text
+ * children of nested JSX are.
+ */
+function readsRawError(node: ts.Node): boolean {
+  if (ts.isTypeNode(node) || ts.isJsxAttributes(node) || ts.isJsxSelfClosingElement(node)) {
+    return false
+  }
+  if (ts.isPropertyAccessExpression(node)) {
+    if (node.name.text === "message" || node.name.text === "stack") return true
+    return readsRawError(node.expression)
+  }
+  if (
+    ts.isCallExpression(node) &&
+    ts.isIdentifier(node.expression) &&
+    RAW_ERROR_CALLS.has(node.expression.text)
+  ) {
+    return true
+  }
+  if (ts.isIdentifier(node)) return RAW_ERROR_NAME.test(node.text)
+  if (ts.isJsxElement(node) || ts.isJsxFragment(node)) return node.children.some(readsRawError)
+  if (ts.isParameter(node) || ts.isBindingElement(node) || ts.isVariableDeclaration(node)) {
+    return node.initializer ? readsRawError(node.initializer) : false
+  }
+  if (ts.isPropertyAssignment(node)) return readsRawError(node.initializer)
+  return ts.forEachChild(node, readsRawError) ?? false
+}
+
+/** `title`/`description` of `<x>.show({ … })` calls that are literals or raw errors. */
+function toastCopyLeaks(file: string, source: string): string[] {
+  const kind = file.endsWith(".tsx") ? ts.ScriptKind.TSX : ts.ScriptKind.TS
+  const sf = ts.createSourceFile(file, source, ts.ScriptTarget.Latest, true, kind)
+  const found: string[] = []
+  const visit = (node: ts.Node) => {
+    const options = ts.isCallExpression(node) ? node.arguments[0] : undefined
+    if (
+      ts.isCallExpression(node) &&
+      ts.isPropertyAccessExpression(node.expression) &&
+      node.expression.name.text === "show" &&
+      options &&
+      ts.isObjectLiteralExpression(options)
+    ) {
+      for (const prop of options.properties) {
+        if (!ts.isPropertyAssignment(prop)) continue
+        const key = prop.name.getText(sf)
+        if (key !== "title" && key !== "description") continue
+        const literal = renderedLiterals(prop.initializer).some((lit) =>
+          HAS_LETTER.test(literalText(lit)),
+        )
+        if (literal || readsRawError(prop.initializer)) {
+          const { line } = sf.getLineAndCharacterOfPosition(prop.getStart(sf))
+          found.push(`${file}:${line + 1}: ${key}: ${prop.initializer.getText(sf)}`)
+        }
+      }
+    }
+    ts.forEachChild(node, visit)
+  }
+  visit(sf)
+  return found
+}
+
+/** Feedback components whose `title`/`description` are sentences the user reads. */
+const FEEDBACK_COMPONENTS = new Set(["ErrorState", "EmptyState"])
+const FEEDBACK_PROPS = new Set(["title", "description"])
+/** Components that are an inline alert by themselves (their role is built in). */
+const ALERT_COMPONENTS = new Set(["Alert"])
+
+function jsxTag(node: ts.JsxElement | ts.JsxSelfClosingElement): string {
+  return (ts.isJsxElement(node) ? node.openingElement : node).tagName.getText()
+}
+
+/** Whether a JSX element is an inline alert: `role="alert"|"status"` or the `Alert` primitive. */
+function isInlineAlert(node: ts.JsxElement): boolean {
+  if (ALERT_COMPONENTS.has(jsxTag(node))) return true
+  return node.openingElement.attributes.properties.some(
+    (attr) =>
+      ts.isJsxAttribute(attr) &&
+      attr.name.getText() === "role" &&
+      attr.initializer !== undefined &&
+      ts.isStringLiteral(attr.initializer) &&
+      (attr.initializer.text === "alert" || attr.initializer.text === "status"),
+  )
+}
+
+/**
+ * Raw errors in the JSX feedback surfaces: the `title`/`description` of an
+ * ErrorState or EmptyState, and the content of an inline alert. (Literals in
+ * them are the hard-coded-copy gate's job.)
+ */
+function feedbackCopyLeaks(file: string, source: string): string[] {
+  const sf = ts.createSourceFile(file, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX)
+  const found: string[] = []
+  const report = (node: ts.Node, where: string) => {
+    const { line } = sf.getLineAndCharacterOfPosition(node.getStart(sf))
+    found.push(`${file}:${line + 1}: ${where}: ${node.getText(sf).replace(/\s+/g, " ")}`)
+  }
+  const visit = (node: ts.Node) => {
+    if (
+      ts.isJsxAttribute(node) &&
+      node.initializer &&
+      FEEDBACK_PROPS.has(node.name.getText()) &&
+      FEEDBACK_COMPONENTS.has(tagName(node)) &&
+      readsRawError(node.initializer)
+    ) {
+      report(node.initializer, `${tagName(node)} ${node.name.getText()}`)
+    }
+    if (ts.isJsxElement(node) && isInlineAlert(node)) {
+      for (const child of node.children) {
+        if (readsRawError(child)) report(child, `${jsxTag(node)} alert content`)
+      }
+    }
+    ts.forEachChild(node, visit)
+  }
+  visit(sf)
+  return found
+}
+
+describe("feedback copy comes from the catalog, never from a raw error", () => {
+  it("scans the feedback surfaces", () => {
+    const tsx = Object.entries(SOURCES)
+    expect(tsx.filter(([, src]) => /<(ErrorState|EmptyState)\b/.test(src)).length).toBeGreaterThan(
+      3,
+    )
+    expect(tsx.filter(([, src]) => /role="(alert|status)"/.test(src)).length).toBeGreaterThan(2)
+  })
+
+  it("finds no raw error in an ErrorState/EmptyState title or description, or in an inline alert", () => {
+    const offenders = Object.entries(SOURCES).flatMap(([file, source]) =>
+      feedbackCopyLeaks(file, source),
+    )
+    expect(
+      offenders,
+      "Say what happened and what to do in catalog words (locale/messages-*.ts); pass the raw reason as an ErrorState's `details` (or log it with console.warn).",
+    ).toEqual([])
+  })
+
+  it("catches the shapes it promises to catch (gate self-test)", () => {
+    const src = `
+      export const A = ({ L, e }: P) => <ErrorState title={L.x} description={e.message} />
+      export const B = ({ error }: P) => <ErrorState title={error} details={error} />
+      export const C = ({ L, err }: P) => <EmptyState title={L.empty} description={String(err)} />
+      export const D = ({ L, error }: P) => (
+        <div role="alert">
+          <span>{L.saveError}:</span> {error}
+        </div>
+      )
+      export const E = ({ L, name, refreshError }: P) => (
+        <div role="status">
+          <p>{L.catalogueError}</p>
+          <p><span>{name}</span>: {refreshError}</p>
+        </div>
+      )
+      export const F = ({ reason }: P) => <Alert><AlertDescription>{reason}</AlertDescription></Alert>
+      export const G = ({ L, error, isError }: P) => (
+        <>
+          <ErrorState title={L.saveError} description={L.saveErrorHint} details={error} />
+          {isError && <p role="alert">{L.failed}</p>}
+          <p role="status">{L.cancelled}</p>
+          <div role="alert">{items.map(({ id, reason }) => <li key={id}>{id}</li>)}</div>
+          <ErrorState title={human?.title ?? L.errorTitle} description={(x as ViewError).hint} />
+        </>
+      )
+    `
+    expect(
+      feedbackCopyLeaks("self.tsx", src).map((s) => s.replace(/^self\.tsx:\d+: /, "")),
+    ).toEqual([
+      "ErrorState description: {e.message}",
+      "ErrorState title: {error}",
+      "EmptyState description: {String(err)}",
+      "div alert content: {error}",
+      "div alert content: <p><span>{name}</span>: {refreshError}</p>",
+      "Alert alert content: <AlertDescription>{reason}</AlertDescription>",
+    ])
+  })
+})
+
+describe("toast copy comes from the catalog, never from a raw error", () => {
+  it("scans the toast call sites", () => {
+    const all = { ...SOURCES, ...TS_SOURCES }
+    expect(Object.keys(all)).toContain("./app/mcp-app-view.tsx")
+    expect(Object.values(all).filter((src) => /\.show\(\{/.test(src)).length).toBeGreaterThan(1)
+  })
+
+  it("finds no literal and no raw error in a toast's title or description", () => {
+    const offenders = Object.entries({ ...SOURCES, ...TS_SOURCES }).flatMap(([file, source]) =>
+      toastCopyLeaks(file, source),
+    )
+    expect(
+      offenders,
+      "Say what happened and what to do in catalog words (locale/messages-*.ts); log the raw reason (console.warn) or show it under an ErrorState's Details.",
+    ).toEqual([])
+  })
+
+  it("catches the shapes it promises to catch (gate self-test)", () => {
+    const src = `
+      toast.show({ tone: "danger", title: "Refresh failed", description: errorText(e) })
+      toast.show({ title: L.refreshFailed, description: e.message })
+      toast.show({ title: L.x, description: String(err) })
+      toast.show({ title: L.refreshFailed, description: refreshError })
+      toast.show({ tone: "success", title: L.saved(name) })
+      toast.show({ title: L.refreshFailed, description: L.refreshFailedHint })
+      toast.show({ title: L.failed, description: isError ? L.a : L.b })
+      other.show(options)
+    `
+    expect(toastCopyLeaks("self.ts", src).map((s) => s.replace(/^self\.ts:\d+: /, ""))).toEqual([
+      'title: "Refresh failed"',
+      "description: errorText(e)",
+      "description: e.message",
+      "description: String(err)",
+      "description: refreshError",
+    ])
+  })
+})
+
+describe("no hard-coded copy in toolkit components", () => {
+  it("scans the component sources", () => {
+    // A broken glob would make the gate vacuous.
+    expect(Object.keys(SOURCES).length).toBeGreaterThan(40)
+    expect(Object.keys(SOURCES)).toContain("./app/mcp-app-view-chrome.tsx")
+    expect(Object.keys(SOURCES)).toContain("./primitives/dialog.tsx")
+  })
+
+  it("finds every user-facing word in the catalog or in props, never in the source", () => {
+    const offenders = Object.entries(SOURCES).flatMap(([file, source]) =>
+      hardcodedCopy(file, source),
+    )
+    expect(
+      offenders,
+      "Move these strings into the toolkit catalog (locale/message-types.ts + messages-en.ts + messages-de.ts) and read them via useToolkitMessages() or the component's labels.",
+    ).toEqual([])
+  })
+
+  it("catches the shapes it promises to catch (gate self-test)", () => {
+    const src = `
+      export const A = () => <p>Loading…</p>
+      export const B = ({ x }: { x: boolean }) => <span>{x ? "Load more" : "…"}</span>
+      export const C = () => <button aria-label="Close" title={"Shut"} className="text-sm" />
+      export const D = () => <ErrorState title="Oops" variant="inline" data-slot="x" />
+      export const E = ({ n }: { n: number }) => <i>{\`\${n} rows\`}</i>
+      export const F = ({ ok }: { ok: boolean }) => <b>{ok && "Done"}{ok === Boolean("x") && 1}</b>
+      export const G = ({ L }: { L: { a: string } }) => <p title={L.a}>{L.a} · {"→"}</p>
+    `
+    expect(hardcodedCopy("self.tsx", src).map((s) => s.replace(/^self\.tsx:\d+: /, ""))).toEqual([
+      '"Loading…"',
+      '"Load more"',
+      '"Close"',
+      '"Shut"',
+      '"Oops"',
+      '"rows"',
+      '"Done"',
+    ])
+  })
+})

package/src/primitives/alert.tsx

@@ -4,13 +4,15 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../lib/utils.js"
 
 const alertVariants = cva(
-  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-md border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
         default: "bg-card text-card-foreground",
+        // Tone model: tint, a border and icon in the danger colour; title and
+        // description in the foreground (CI §3.3: text on a tint is black).
         destructive:
-          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+          "border-danger bg-danger-soft text-foreground *:data-[slot=alert-title]:text-foreground *:data-[slot=alert-description]:text-foreground [&>svg]:text-danger",
       },
     },
     defaultVariants: {

package/src/primitives/badge.tsx

@@ -2,20 +2,27 @@ import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
+import { FOCUS_RING } from "../lib/focus-ring.js"
+import { TONE_BORDER, TONE_SOFT } from "../lib/tone-utils.js"
 import { cn } from "../lib/utils.js"
 
+// Badges and chips take radius sm (CI §6). The status variants follow the tone
+// model: tint + foreground text, rim in the tone (TONE_SOFT + TONE_BORDER;
+// CI §3.3 "-soft: Text darauf --cd-schwarz"). The ink is never text on a tint.
 const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  `group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-sm border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all ${FOCUS_RING} has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-danger [&>svg]:pointer-events-none [&>svg]:size-3!`,
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary-hover",
         secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive:
-          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
+        destructive: `${TONE_SOFT.danger} ${TONE_BORDER.danger}`,
+        success: `${TONE_SOFT.success} ${TONE_BORDER.success}`,
+        warning: `${TONE_SOFT.warning} ${TONE_BORDER.warning}`,
+        info: `${TONE_SOFT.info} ${TONE_BORDER.info}`,
+        outline: "border-border text-foreground [a]:hover:bg-muted",
+        ghost: "hover:bg-muted",
+        link: "text-link underline-offset-4 hover:underline",
       },
     },
     defaultVariants: {

package/src/primitives/button.tsx

@@ -2,29 +2,34 @@ import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
+import { FOCUS_RING } from "../lib/focus-ring.js"
 import { cn } from "../lib/utils.js"
 
+// Miragon CI §8: radius md, weight 600; primary = blue fill with white text and
+// shadow-1, hover deeper blue + shadow-2 + a 1px lift; secondary/outline =
+// surface with a line border, hover blue border and text on the accent tint.
 const buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  `inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-semibold whitespace-nowrap transition-[color,background-color,border-color,box-shadow,translate] disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-danger ${FOCUS_RING} [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground shadow-1 hover:bg-primary-hover hover:shadow-2 hover:-translate-y-px active:translate-y-0",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+          "bg-destructive text-destructive-foreground shadow-1 hover:bg-destructive/90 hover:shadow-2",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+          "border border-border bg-background text-foreground hover:border-focus hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-link underline-offset-4 hover:underline",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        xs: "h-6 gap-1 rounded-sm px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-xs": "size-6 rounded-sm [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-8",
         "icon-lg": "size-10",
       },

package/src/primitives/card.tsx

@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card bg-card text-card-foreground ring-foreground/10 flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card bg-card text-card-foreground ring-border flex flex-col gap-4 overflow-hidden rounded-md py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-md *:[img:last-child]:rounded-b-md",
         className,
       )}
       {...props}
@@ -25,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-md px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
         className,
       )}
       {...props}
@@ -38,7 +38,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-title"
       className={cn(
-        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        "font-heading text-base leading-snug font-semibold group-data-[size=sm]/card:text-sm",
         className,
       )}
       {...props}
@@ -81,7 +81,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3",
+        "bg-muted/50 flex items-center rounded-b-md border-t p-4 group-data-[size=sm]/card:p-3",
         className,
       )}
       {...props}