@handled-ai/design-system 0.18.23 → 0.18.25

package/src/components/__tests__/score-breakdown-intent.test.tsx

@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vitest"
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { ScoreBreakdown, type ScoreFactor } from "../score-breakdown"
+
+const factors: ScoreFactor[] = [
+  { key: "high", label: "High Factor", score: 90, why: "High score" },
+  { key: "low", label: "Low Factor", score: 20, why: "Low score" },
+]
+
+function barClasses(scoreIntent: React.ComponentProps<typeof ScoreBreakdown>["scoreIntent"]) {
+  const { container } = render(<ScoreBreakdown factors={factors} scoreIntent={scoreIntent} />)
+  return Array.from(container.querySelectorAll(".h-full.rounded-full")).map((bar) => bar.getAttribute("class") ?? "")
+}
+
+describe("ScoreBreakdown intent-aware factor bars", () => {
+  it("preserves positive high green and low red factor bars", () => {
+    const [highClass, lowClass] = barClasses("positive")
+
+    expect(highClass).toContain("bg-emerald-500")
+    expect(lowClass).toContain("bg-red-500")
+  })
+
+  it("uses red for high risk factor bars", () => {
+    const [highClass] = barClasses("risk")
+
+    expect(highClass).toContain("bg-red-600")
+  })
+
+  it("uses neutral, not red, for low urgency factor bars", () => {
+    const [, lowClass] = barClasses("urgency")
+
+    expect(lowClass).toContain("bg-neutral-400")
+    expect(lowClass).not.toContain("bg-red")
+  })
+
+  it("keeps explicit risk badge styling unchanged", () => {
+    render(
+      <ScoreBreakdown
+        scoreIntent="risk"
+        factors={[{ key: "badge", label: "Badge Factor", score: null, risk: "Low", why: "Risk badge" }]}
+      />,
+    )
+
+    expect(screen.getByText("Low").getAttribute("class")).toContain("text-emerald-600")
+  })
+})

package/src/components/__tests__/score-ring.test.tsx

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest"
+import React from "react"
+import { render } from "@testing-library/react"
+import { ScoreRing, getScoreColor, getScoreTrackColor } from "../score-ring"
+
+function renderRing(score: number, intent: React.ComponentProps<typeof ScoreRing>["intent"]) {
+  const { container } = render(<ScoreRing score={score} intent={intent} />)
+  const circles = container.querySelectorAll("circle")
+  return {
+    trackClass: circles[0]?.getAttribute("class") ?? "",
+    fillClass: circles[1]?.getAttribute("class") ?? "",
+  }
+}
+
+describe("ScoreRing intent-aware colors", () => {
+  it("preserves positive high-is-good colors", () => {
+    expect(getScoreColor(90, 100)).toBe("text-emerald-500")
+    expect(getScoreColor(20, 100)).toBe("text-red-500")
+
+    expect(renderRing(90, "positive").fillClass).toContain("text-emerald-500")
+    expect(renderRing(20, "positive").fillClass).toContain("text-red-500")
+  })
+
+  it("uses red/orange/amber/neutral colors for urgency", () => {
+    expect(getScoreColor(90, 100, "urgency")).toBe("text-red-600")
+    expect(getScoreColor(65, 100, "urgency")).toBe("text-orange-500")
+    expect(getScoreColor(45, 100, "urgency")).toBe("text-amber-500")
+    expect(getScoreColor(20, 100, "urgency")).toBe("text-neutral-400")
+    expect(getScoreTrackColor(20, 100, "urgency")).toBe("text-neutral-400/15")
+
+    expect(renderRing(90, "urgency").fillClass).toContain("text-red-600")
+    expect(renderRing(20, "urgency").fillClass).toContain("text-neutral-400")
+    expect(renderRing(20, "urgency").fillClass).not.toContain("text-red")
+  })
+
+  it("uses red for high risk and neutral for low risk", () => {
+    expect(getScoreColor(90, 100, "risk")).toBe("text-red-600")
+    expect(getScoreColor(20, 100, "risk")).toBe("text-neutral-400")
+
+    expect(renderRing(90, "risk").fillClass).toContain("text-red-600")
+    expect(renderRing(20, "risk").trackClass).toContain("text-neutral-400/15")
+  })
+})

package/src/components/__tests__/score-semantics.test.ts

@@ -0,0 +1,107 @@
+import { describe, expect, it } from "vitest"
+import {
+  POSITIVE_SCORE_CLASSES,
+  RISK_SCORE_CLASSES,
+  URGENCY_SCORE_CLASSES,
+  getPositiveLevel,
+  getRiskLevel,
+  getScoreToneClasses,
+  getUrgencyLevel,
+  getUrgencyRange,
+} from "../score-semantics"
+
+describe("score semantics", () => {
+  it.each([
+    [0, "Low"],
+    [34, "Low"],
+    [35, "Medium"],
+    [59, "Medium"],
+    [60, "High"],
+    [79, "High"],
+    [80, "Urgent"],
+    [100, "Urgent"],
+  ] as const)("maps urgency score %i to %s", (score, level) => {
+    expect(getUrgencyLevel(score)).toBe(level)
+  })
+
+  it("returns urgency ranges", () => {
+    expect(getUrgencyRange("Low")).toBe("0-34")
+    expect(getUrgencyRange("Medium")).toBe("35-59")
+    expect(getUrgencyRange("High")).toBe("60-79")
+    expect(getUrgencyRange("Urgent")).toBe("80-100")
+  })
+
+  it("uses the approved urgency palette", () => {
+    expect(URGENCY_SCORE_CLASSES.Urgent).toMatchObject({
+      solid: "bg-red-600 text-white",
+      outline: "border-red-300 bg-red-50 text-red-800",
+      dot: "bg-red-600",
+      trigger: "border-red-300 bg-red-50 text-red-800",
+      hover: "hover:bg-red-100",
+      open: "bg-red-100",
+      text: "text-red-600",
+      track: "text-red-600/15",
+      bar: "bg-red-600",
+    })
+    expect(URGENCY_SCORE_CLASSES.High.trigger).toBe("border-orange-300 bg-orange-50 text-orange-800")
+    expect(URGENCY_SCORE_CLASSES.Medium.dot).toBe("bg-amber-500")
+    expect(URGENCY_SCORE_CLASSES.Low).toMatchObject({
+      solid: "bg-neutral-300 text-neutral-900",
+      outline: "border-neutral-200 bg-neutral-50 text-neutral-700",
+      dot: "bg-neutral-400",
+      trigger: "border-neutral-200 bg-neutral-50 text-neutral-700",
+      hover: "hover:bg-neutral-100",
+      open: "bg-neutral-100",
+      text: "text-neutral-400",
+      track: "text-neutral-400/15",
+      bar: "bg-neutral-400",
+    })
+  })
+
+  it("maps risk scores without urgency labels", () => {
+    expect(getRiskLevel(0)).toBe("Low Risk")
+    expect(getRiskLevel(39)).toBe("Low Risk")
+    expect(getRiskLevel(40)).toBe("Medium Risk")
+    expect(getRiskLevel(69)).toBe("Medium Risk")
+    expect(getRiskLevel(70)).toBe("High Risk")
+    expect(RISK_SCORE_CLASSES["High Risk"].solid).toBe("bg-red-600 text-white")
+    expect(RISK_SCORE_CLASSES["Medium Risk"].dot).toBe("bg-amber-500")
+    expect(RISK_SCORE_CLASSES["Low Risk"].trigger).toBe("border-neutral-200 bg-neutral-50 text-neutral-700")
+  })
+
+  it("preserves positive high-is-good semantics", () => {
+    expect(getPositiveLevel(39)).toBe("Low")
+    expect(getPositiveLevel(40)).toBe("Medium")
+    expect(getPositiveLevel(70)).toBe("High")
+    expect(POSITIVE_SCORE_CLASSES.High.solid).toBe("bg-emerald-500 text-white")
+    expect(POSITIVE_SCORE_CLASSES.Medium.solid).toBe("bg-amber-500 text-white")
+    expect(POSITIVE_SCORE_CLASSES.Low.solid).toBe("bg-red-500 text-white")
+  })
+
+  it("returns static urgency classes from the urgency map", () => {
+    expect(getScoreToneClasses(0, "urgency")).toBe(URGENCY_SCORE_CLASSES.Low)
+    expect(getScoreToneClasses(34, "urgency")).toBe(URGENCY_SCORE_CLASSES.Low)
+    expect(getScoreToneClasses(35, "urgency")).toBe(URGENCY_SCORE_CLASSES.Medium)
+    expect(getScoreToneClasses(59, "urgency")).toBe(URGENCY_SCORE_CLASSES.Medium)
+    expect(getScoreToneClasses(60, "urgency")).toBe(URGENCY_SCORE_CLASSES.High)
+    expect(getScoreToneClasses(79, "urgency")).toBe(URGENCY_SCORE_CLASSES.High)
+    expect(getScoreToneClasses(80, "urgency")).toBe(URGENCY_SCORE_CLASSES.Urgent)
+    expect(getScoreToneClasses(100, "urgency")).toBe(URGENCY_SCORE_CLASSES.Urgent)
+  })
+
+  it("returns static risk classes from risk labels only", () => {
+    expect(getScoreToneClasses(39, "risk")).toBe(RISK_SCORE_CLASSES["Low Risk"])
+    expect(getScoreToneClasses(40, "risk")).toBe(RISK_SCORE_CLASSES["Medium Risk"])
+    expect(getScoreToneClasses(70, "risk")).toBe(RISK_SCORE_CLASSES["High Risk"])
+    expect(RISK_SCORE_CLASSES).not.toHaveProperty("Low")
+    expect(RISK_SCORE_CLASSES).not.toHaveProperty("Medium")
+    expect(RISK_SCORE_CLASSES).not.toHaveProperty("High")
+    expect(RISK_SCORE_CLASSES).not.toHaveProperty("Urgent")
+  })
+
+  it("returns static positive classes from high-is-good map", () => {
+    expect(getScoreToneClasses(39, "positive")).toBe(POSITIVE_SCORE_CLASSES.Low)
+    expect(getScoreToneClasses(40, "positive")).toBe(POSITIVE_SCORE_CLASSES.Medium)
+    expect(getScoreToneClasses(70, "positive")).toBe(POSITIVE_SCORE_CLASSES.High)
+  })
+})

package/src/components/__tests__/signal-priority-popover.test.tsx

@@ -92,16 +92,17 @@ describe("SignalPriorityPopover", () => {
   it("applies urgency-specific default classes to the trigger", () => {
     render(<SignalPriorityPopover {...defaultProps} urgencyLabel="Urgent" />)
     const trigger = screen.getByTestId("priority-popover-trigger")
-    expect(trigger.className).toContain("border-red-200")
+    expect(trigger.className).toContain("border-red-300")
     expect(trigger.className).toContain("bg-red-50")
-    expect(trigger.className).toContain("text-red-700")
+    expect(trigger.className).toContain("text-red-800")
   })
 
   it("applies Low urgency classes", () => {
     render(<SignalPriorityPopover {...defaultProps} urgencyLabel="Low" score={20} />)
     const trigger = screen.getByTestId("priority-popover-trigger")
-    expect(trigger.className).toContain("border-blue-200")
-    expect(trigger.className).toContain("bg-blue-50")
+    expect(trigger.className).toContain("border-neutral-200")
+    expect(trigger.className).toContain("bg-neutral-50")
+    expect(trigger.className).toContain("text-neutral-700")
   })
 
   it("opens the popover on trigger click and shows content", () => {
@@ -335,8 +336,9 @@ describe("SignalPriorityPopover", () => {
   it("applies Medium urgency classes correctly", () => {
     render(<SignalPriorityPopover {...defaultProps} urgencyLabel="Medium" score={45} />)
     const trigger = screen.getByTestId("priority-popover-trigger")
-    expect(trigger.className).toContain("border-amber-200")
+    expect(trigger.className).toContain("border-amber-300")
     expect(trigger.className).toContain("bg-amber-50")
+    expect(trigger.className).toContain("text-amber-800")
     expect(trigger.textContent).toContain("Medium Priority")
   })
 })

package/src/components/case-panel-detail.tsx

@@ -75,10 +75,12 @@ export interface CasePanelIdentityLink {
   icon?: React.ReactNode
   kind?: "icon" | "text"
   disabled?: boolean
+  target?: React.HTMLAttributeAnchorTarget
+  rel?: string
 }
 
 export interface CasePanelIdentitySublineProps {
-  callsign: string
+  callsign?: string | null
   links?: CasePanelIdentityLink[]
   onCopyCallsign?: (callsign: string) => void
   copyLabel?: string
@@ -95,9 +97,15 @@ export function CasePanelIdentitySubline({
   className,
 }: CasePanelIdentitySublineProps) {
   const [copied, setCopied] = React.useState(false)
-  const normalizedCallsign = callsign.startsWith("@") ? callsign : `@${callsign}`
+  const trimmedCallsign = callsign?.trim()
+  const normalizedCallsign = trimmedCallsign
+    ? trimmedCallsign.startsWith("@")
+      ? trimmedCallsign
+      : `@${trimmedCallsign}`
+    : null
 
   const handleCopy = React.useCallback(() => {
+    if (!normalizedCallsign) return
     onCopyCallsign?.(normalizedCallsign)
     setCopied(true)
     window.setTimeout(() => setCopied(false), 1400)
@@ -105,18 +113,22 @@ export function CasePanelIdentitySubline({
 
   return (
     <div className={cn("mt-[9px] inline-flex flex-wrap items-center gap-[7px] text-[13px] text-muted-foreground", className)}>
-      <span className="font-mono font-medium tracking-[0.01em] text-gray-700">{normalizedCallsign}</span>
-      <button
-        type="button"
-        onClick={handleCopy}
-        aria-label={copied ? copiedLabel : copyLabel}
-        className="inline-flex h-[22px] w-[22px] items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-accent hover:text-foreground"
-      >
-        {copied ? <Check className="h-[13px] w-[13px] text-emerald-700" aria-hidden="true" /> : <Copy className="h-[13px] w-[13px]" aria-hidden="true" />}
-      </button>
+      {normalizedCallsign ? (
+        <>
+          <span className="font-mono font-medium tracking-[0.01em] text-gray-700">{normalizedCallsign}</span>
+          <button
+            type="button"
+            onClick={handleCopy}
+            aria-label={copied ? copiedLabel : copyLabel}
+            className="inline-flex h-[22px] w-[22px] items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-accent hover:text-foreground"
+          >
+            {copied ? <Check className="h-[13px] w-[13px] text-emerald-700" aria-hidden="true" /> : <Copy className="h-[13px] w-[13px]" aria-hidden="true" />}
+          </button>
+        </>
+      ) : null}
       {links.length > 0 ? (
         <>
-          <span aria-hidden="true" className="mx-[3px] h-3.5 w-px bg-gray-200" />
+          {normalizedCallsign ? <span aria-hidden="true" className="mx-[3px] h-3.5 w-px bg-gray-200" /> : null}
           <span className="inline-flex items-center gap-1.5">
             {links.map((link) => (
               <CasePanelIdentityLinkButton key={link.id} link={link} />
@@ -154,7 +166,13 @@ function CasePanelIdentityLinkButton({ link }: { link: CasePanelIdentityLink })
   }
 
   return (
-    <a href={link.href} aria-label={link.label} className={className}>
+    <a
+      href={link.href}
+      aria-label={link.label}
+      target={link.target ?? "_blank"}
+      rel={link.rel ?? "noopener noreferrer"}
+      className={className}
+    >
       {content}
     </a>
   )

package/src/components/case-panel-email-composer.tsx

@@ -156,6 +156,7 @@ export interface CasePanelEmailComposerProps extends Omit<React.HTMLAttributes<H
   sendBarActions?: React.ReactNode
   signatureControl?: React.ReactNode
   disabledReason?: React.ReactNode
+  showSendBar?: boolean
   disabled?: boolean
   sendDisabled?: boolean
   sendLabel?: React.ReactNode
@@ -193,6 +194,7 @@ export function CasePanelEmailComposer({
   sendBarActions,
   signatureControl,
   disabledReason,
+  showSendBar = true,
   disabled = false,
   sendDisabled = false,
   sendLabel = "Send",
@@ -313,28 +315,30 @@ export function CasePanelEmailComposer({
           {toolbar ?? <div className="text-xs font-medium text-muted-foreground">Toolbar</div>}
         </div>
 
-        <div data-slot="case-panel-email-composer-send-bar" className="flex items-center justify-between gap-3 border-t border-border/70 bg-background px-3 py-3">
-          <div className="min-w-0 flex-1">
-            {disabledReason ? (
-              <div id={disabledReasonId} data-slot="case-panel-email-composer-disabled-reason" className="truncate text-xs text-muted-foreground">
-                {disabledReason}
-              </div>
-            ) : null}
-          </div>
-          <div className="flex shrink-0 items-center gap-2">
-            {sendBarActions}
-            <button
-              type="button"
-              data-slot="case-panel-email-composer-send-button"
-              aria-describedby={disabledReason ? disabledReasonId : undefined}
-              disabled={sendIsDisabled}
-              onClick={handleSendIntent}
-              className="inline-flex h-8 items-center justify-center rounded-md bg-foreground px-3 text-xs font-semibold text-background shadow-xs transition-colors hover:bg-foreground/90 disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground"
-            >
-              {sendLabel}
-            </button>
+        {showSendBar ? (
+          <div data-slot="case-panel-email-composer-send-bar" className="flex items-center justify-between gap-3 border-t border-border/70 bg-background px-3 py-3">
+            <div className="min-w-0 flex-1">
+              {disabledReason ? (
+                <div id={disabledReasonId} data-slot="case-panel-email-composer-disabled-reason" className="truncate text-xs text-muted-foreground">
+                  {disabledReason}
+                </div>
+              ) : null}
+            </div>
+            <div className="flex shrink-0 items-center gap-2">
+              {sendBarActions}
+              <button
+                type="button"
+                data-slot="case-panel-email-composer-send-button"
+                aria-describedby={disabledReason ? disabledReasonId : undefined}
+                disabled={sendIsDisabled}
+                onClick={handleSendIntent}
+                className="inline-flex h-8 items-center justify-center rounded-md bg-foreground px-3 text-xs font-semibold text-background shadow-xs transition-colors hover:bg-foreground/90 disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground"
+              >
+                {sendLabel}
+              </button>
+            </div>
           </div>
-        </div>
+        ) : null}
       </div>
     </div>
   )

package/src/components/data-table.tsx

@@ -892,6 +892,7 @@ export function DataTable({
             title={data.title}
             description={data.description}
             score={scoreModal.type === "Risk" ? scoreModal.row.riskScore : scoreModal.row.expansionScore}
+            scoreIntent={scoreModal.type === "Risk" ? "risk" : "positive"}
             whyNow={data.whyNow}
             evidence={data.evidence}
             factors={data.factors}

package/src/components/score-analysis-modal.tsx

@@ -7,6 +7,7 @@ import { ScoreRing } from "./score-ring"
 import { ScoreBreakdown, type ScoreFactor } from "./score-breakdown"
 import { SignalApproval } from "./signal-feedback-inline"
 import { X } from "lucide-react"
+import type { ScoreIntent } from "./score-semantics"
 
 interface ScoreAnalysisModalProps {
   open: boolean
@@ -26,10 +27,25 @@ interface ScoreAnalysisModalProps {
   onDismiss?: (reasons: string[], detail: string) => void
   /** When true, renders as an absolute-positioned inline panel instead of a Radix Sheet portal. Useful when the component is inside a container that should not be escaped. */
   useInlinePanel?: boolean
+  scoreIntent?: ScoreIntent
 }
 
-function getScoreLabel(score: number, denominator: number) {
+function getScoreLabel(score: number, denominator: number, intent: ScoreIntent = "positive") {
   const pct = (score / denominator) * 100
+
+  if (intent === "urgency") {
+    if (pct >= 80) return { text: "URGENT", className: "text-red-600" }
+    if (pct >= 60) return { text: "HIGH", className: "text-orange-600" }
+    if (pct >= 35) return { text: "MEDIUM", className: "text-amber-600" }
+    return { text: "LOW", className: "text-neutral-600" }
+  }
+
+  if (intent === "risk") {
+    if (pct >= 70) return { text: "High Risk", className: "text-red-600" }
+    if (pct >= 40) return { text: "Medium Risk", className: "text-amber-600" }
+    return { text: "Low Risk", className: "text-neutral-600" }
+  }
+
   if (pct >= 70) return { text: "HIGH", className: "text-emerald-600" }
   if (pct >= 40) return { text: "MEDIUM", className: "text-amber-600" }
   return { text: "LOW", className: "text-red-600" }
@@ -52,8 +68,9 @@ function ScoreAnalysisModal({
   onApproveFeedback,
   onDismiss,
   useInlinePanel = false,
+  scoreIntent = "positive",
 }: ScoreAnalysisModalProps) {
-  const label = getScoreLabel(score, denominator)
+  const label = getScoreLabel(score, denominator, scoreIntent)
 
   const panelContent = (
     <SignalApproval.Root
@@ -83,7 +100,7 @@ function ScoreAnalysisModal({
 
             <div className="space-y-6">
               <div className="flex flex-col items-center gap-3">
-                <ScoreRing score={score} denominator={denominator} size={120} strokeWidth={10} />
+                <ScoreRing score={score} denominator={denominator} size={120} strokeWidth={10} intent={scoreIntent} />
                 <Badge variant="outline">
                   {Math.round((score / denominator) * 100)}% Score
                   {" \u2014 "}
@@ -111,7 +128,7 @@ function ScoreAnalysisModal({
               {factors && factors.length > 0 && (
                 <div>
                   <h3 className="font-semibold mb-2 text-sm">Score Breakdown</h3>
-                  <ScoreBreakdown factors={factors} onFactorFeedback={onFactorFeedback} />
+                  <ScoreBreakdown factors={factors} onFactorFeedback={onFactorFeedback} scoreIntent={scoreIntent} />
                 </div>
               )}
             </div>
@@ -168,5 +185,5 @@ function ScoreAnalysisModal({
 
 const ScoreAnalysisPanel = ScoreAnalysisModal
 
-export { ScoreAnalysisModal, ScoreAnalysisPanel }
+export { ScoreAnalysisModal, ScoreAnalysisPanel, getScoreLabel }
 export type { ScoreAnalysisModalProps }

package/src/components/score-breakdown.tsx

@@ -3,6 +3,8 @@
 import * as React from "react"
 import { ThumbsUp, ThumbsDown } from "lucide-react"
 import { cn } from "../lib/utils"
+import type { ScoreIntent } from "./score-semantics"
+import { getScoreToneClasses } from "./score-semantics"
 
 export interface ScoreFactor {
   key: string
@@ -12,10 +14,8 @@ export interface ScoreFactor {
   why: string
 }
 
-function getFactorBarColor(score: number) {
-  if (score >= 70) return "bg-emerald-500"
-  if (score >= 40) return "bg-amber-500"
-  return "bg-red-500"
+function getFactorBarColor(score: number, intent: ScoreIntent = "positive") {
+  return getScoreToneClasses(score, intent).bar
 }
 
 function getRiskBadgeStyle(risk: "Low" | "Medium" | "High") {
@@ -34,6 +34,7 @@ interface ScoreBreakdownProps {
   onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void
   className?: string
   initialFeedback?: Record<string, { type: "up" | "down"; detail: string }>
+  scoreIntent?: ScoreIntent
 }
 
 function deriveInitialState<T>(
@@ -47,7 +48,7 @@ function deriveInitialState<T>(
   return Object.fromEntries(filtered.map(([k, v]) => [k, mapFn(v)]))
 }
 
-function ScoreBreakdown({ factors, onFactorFeedback, className, initialFeedback }: ScoreBreakdownProps) {
+function ScoreBreakdown({ factors, onFactorFeedback, className, initialFeedback, scoreIntent = "positive" }: ScoreBreakdownProps) {
   const [feedback, setFeedback] = React.useState<Record<string, "up" | "down" | null>>(
     () => deriveInitialState(initialFeedback, (v) => v.type)
   )
@@ -170,7 +171,7 @@ function ScoreBreakdown({ factors, onFactorFeedback, className, initialFeedback
             {factor.score !== null && (
               <div className="w-full h-1 bg-muted rounded-full overflow-hidden">
                 <div
-                  className={cn("h-full rounded-full", getFactorBarColor(factor.score))}
+                  className={cn("h-full rounded-full", getFactorBarColor(factor.score, scoreIntent))}
                   style={{ width: `${factor.score}%` }}
                 />
               </div>

package/src/components/score-ring.tsx

@@ -1,18 +1,14 @@
 import * as React from "react"
 import { cn } from "../lib/utils"
+import type { ScoreIntent } from "./score-semantics"
+import { getScoreToneClasses } from "./score-semantics"
 
-function getScoreColor(score: number, denominator: number) {
-  const pct = (score / denominator) * 100
-  if (pct >= 70) return "text-emerald-500"
-  if (pct >= 40) return "text-amber-500"
-  return "text-red-500"
+function getScoreColor(score: number, denominator: number, intent: ScoreIntent = "positive") {
+  return getScoreToneClasses((score / denominator) * 100, intent).text
 }
 
-function getScoreTrackColor(score: number, denominator: number) {
-  const pct = (score / denominator) * 100
-  if (pct >= 70) return "text-emerald-500/15"
-  if (pct >= 40) return "text-amber-500/15"
-  return "text-red-500/15"
+function getScoreTrackColor(score: number, denominator: number, intent: ScoreIntent = "positive") {
+  return getScoreToneClasses((score / denominator) * 100, intent).track
 }
 
 interface ScoreRingProps {
@@ -22,6 +18,7 @@ interface ScoreRingProps {
   strokeWidth?: number
   className?: string
   showLabel?: boolean
+  intent?: ScoreIntent
 }
 
 function ScoreRing({
@@ -31,6 +28,7 @@ function ScoreRing({
   strokeWidth = 10,
   className,
   showLabel = true,
+  intent = "positive",
 }: ScoreRingProps) {
   const radius = (size - strokeWidth) / 2
   const circumference = 2 * Math.PI * radius
@@ -53,7 +51,7 @@ function ScoreRing({
           fill="none"
           stroke="currentColor"
           strokeWidth={strokeWidth}
-          className={getScoreTrackColor(score, denominator)}
+          className={getScoreTrackColor(score, denominator, intent)}
         />
         {/* Fill */}
         <circle
@@ -66,7 +64,7 @@ function ScoreRing({
           strokeLinecap="round"
           strokeDasharray={circumference}
           strokeDashoffset={offset}
-          className={cn("transition-all duration-500", getScoreColor(score, denominator))}
+          className={cn("transition-all duration-500", getScoreColor(score, denominator, intent))}
         />
       </svg>
       {showLabel && (
@@ -83,5 +81,5 @@ function ScoreRing({
   )
 }
 
-export { ScoreRing, getScoreColor }
+export { ScoreRing, getScoreColor, getScoreTrackColor }
 export type { ScoreRingProps }