@usefragments/ui 1.6.0 → 2.0.0

package/src/components/Avatar/Avatar.contract.json

@@ -1,14 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Avatar",
-  "description": "Visual representation of a user or entity",
+  "description": "Shows who someone is — their photo, or their initials when there is none.",
   "category": "display",
-  "tags": [
-    "user",
-    "profile",
-    "image",
-    "identity"
-  ],
+  "tags": ["user", "profile", "image", "identity"],
   "status": "stable",
   "sourcePath": "src/components/Avatar/index.tsx",
   "exportName": "Avatar",
@@ -52,13 +47,7 @@
       "description": "Size variant",
       "default": "md",
       "required": false,
-      "values": [
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl"
-      ]
+      "values": ["xs", "sm", "md", "lg", "xl"]
     },
     "customSize": {
       "type": "union",
@@ -70,10 +59,7 @@
       "description": "Shape variant",
       "default": "circle",
       "required": false,
-      "values": [
-        "circle",
-        "square"
-      ]
+      "values": ["circle", "square"]
     },
     "color": {
       "type": "string",
@@ -98,66 +84,67 @@
   },
   "usage": {
     "when": [
-      "Displaying user profile pictures",
-      "Showing team member lists",
-      "Representing entities in lists or cards",
-      "User identification in comments or messages"
+      "A row, comment, or card needs to say who",
+      "Several people belong to one thing — use Avatar.Group"
     ],
     "whenNot": [
-      "Decorative images (use Image)",
-      "Logo display (use Logo component)",
-      "Large profile headers (use custom layout)"
+      "The picture is content, not identity (use Image)",
+      "A profile hero at display size (build the layout yourself)"
     ],
     "guidelines": [
-      "Always provide alt text or name for accessibility",
-      "Use consistent sizes within the same context",
-      "Provide fallback initials when image may not load",
-      "Use Avatar.Group for multiple avatars in a row",
-      "Use imageProps for advanced img attributes (loading, decoding, referrerPolicy, etc.)"
+      "Pass name even when you pass src — it is the fallback and the label",
+      "Hold one size per context; mixed sizes read as a mistake",
+      "Avatar.Group max caps the stack and counts the rest",
+      "imageProps carries loading, decoding, referrerPolicy"
     ],
     "accessibility": [
-      "Include meaningful alt text describing the user",
-      "Initials should be derived from name for screen readers",
-      "Decorative avatars should have empty alt"
+      "alt describes the person, not the word \"avatar\"",
+      "Initials come from name, so screen readers get the whole name",
+      "Purely decorative? Pass alt=\"\""
     ]
   },
   "examples": [
     {
       "name": "Default",
-      "description": "Avatar with image",
+      "description": "A photo, cropped to the circle and centred.",
       "code": "import { Avatar } from '@/components/Avatar';\n\n<Avatar\n  src=\"https://i.pravatar.cc/150?u=jane\"\n  alt=\"Jane Doe\"\n  name=\"Jane Doe\"\n/>"
     },
     {
       "name": "With Initials",
-      "description": "Fallback when no image is provided",
+      "description": "No src, so the name collapses to initials.",
       "code": "import { Avatar } from '@/components/Avatar';\n\n<Avatar name=\"John Smith\" />"
     },
     {
       "name": "Sizes",
-      "description": "Available size options",
+      "description": "Five steps, xs through xl — pick one per context and stick to it.",
       "code": "import { Avatar } from '@/components/Avatar';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\" wrap>\n  <Avatar name=\"XS\" size=\"xs\" />\n  <Avatar name=\"SM\" size=\"sm\" />\n  <Avatar name=\"MD\" size=\"md\" />\n  <Avatar name=\"LG\" size=\"lg\" />\n  <Avatar name=\"XL\" size=\"xl\" />\n</Stack>"
     },
     {
       "name": "Custom Size",
-      "description": "Set an exact avatar size",
+      "description": "customSize takes any number when the scale does not fit.",
       "code": "import { Avatar } from '@/components/Avatar';\n\n<Avatar name=\"Conan McNicholl\" customSize={36} />"
     },
     {
       "name": "Square Shape",
-      "description": "Square variant for app icons or brands",
+      "description": "Squares read as products or orgs, circles as people.",
       "code": "import { Avatar } from '@/components/Avatar';\n\n<Avatar name=\"App\" shape=\"square\" />"
     },
     {
       "name": "Group",
-      "description": "Multiple avatars stacked together",
+      "description": "Overlapping stack with a count for whoever did not fit.",
       "code": "import { Avatar } from '@/components/Avatar';\n\n<Avatar.Group max={3} size=\"md\">\n  <Avatar name=\"Alice Johnson\" />\n  <Avatar name=\"Bob Smith\" />\n  <Avatar name=\"Carol Williams\" />\n  <Avatar name=\"David Brown\" />\n  <Avatar name=\"Eve Davis\" />\n</Avatar.Group>"
     }
   ],
   "relations": [
     {
-      "component": "Avatar",
-      "relationship": "parent",
-      "note": "Use Avatar.Group for stacked avatar displays"
+      "component": "Image",
+      "relationship": "alternative",
+      "note": "Use Image for content pictures that are not a person or entity"
+    },
+    {
+      "component": "Badge",
+      "relationship": "sibling",
+      "note": "Pair with Badge to show presence or role beside a name"
     }
   ],
   "contract": {
@@ -170,15 +157,11 @@
       "imageProps: ImgHTMLAttributes - advanced img attributes",
       "shape: circle|square (default: circle)"
     ],
-    "a11yRules": [
-      "A11Y_IMG_ALT"
-    ]
+    "a11yRules": ["A11Y_IMG_ALT"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Group"
-    ]
+    "subComponents": ["Group"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Avatar/Avatar.module.scss

@@ -50,7 +50,6 @@
 .initials {
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--avatar-initials-color, var(--fui-text-inverse, $fui-text-inverse));
-  text-transform: uppercase;
   line-height: 1;
 }
 
@@ -84,7 +83,10 @@
   }
 }
 
-.groupItem:last-child {
+// Must match the specificity of `.group .<size>.groupItem` above (and follow it
+// in source order), otherwise the leading avatar keeps its negative margin and
+// the whole stack sits offset from the content around it.
+.group .groupItem:last-child {
   margin-inline-start: 0;
 }
 

package/src/components/Badge/Badge.contract.json

@@ -1,15 +1,22 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Badge",
-  "description": "Compact label for status, counts, or categorization. Draws attention to metadata without dominating the layout.",
+  "description": "Labels a status, count, or category without pulling focus.",
   "category": "display",
-  "tags": ["status", "label", "tag", "count", "chip"],
+  "tags": [
+    "status",
+    "label",
+    "tag",
+    "count",
+    "chip"
+  ],
   "status": "stable",
   "sourcePath": "src/components/Badge/index.tsx",
   "exportName": "Badge",
   "propsSummary": [
     "children: node (required)",
-    "variant: default|success|warning|error|info|outline|label|dim (default: default)",
+    "variant: soft|outline|ghost (default: soft)",
+    "tone: neutral|accent|info|success|warning|danger (default: neutral)",
     "size: sm|md|lg (default: md)",
     "dot: boolean (default: false)",
     "dotPulse: boolean (default: false)",
@@ -28,17 +35,39 @@
     },
     "variant": {
       "type": "enum",
-      "description": "Visual style indicating severity or category. `label` is a hairline-bordered metadata pill (pair with dotColor); `dim` is transparent filter-pill chrome (pair with active).",
-      "default": "default",
+      "description": "Chrome family. `soft` is the tinted pill; `outline` is a hairline metadata pill (pair with dotColor); `ghost` is transparent filter chrome (pair with active).",
+      "default": "soft",
+      "required": false,
+      "values": [
+        "soft",
+        "outline",
+        "ghost"
+      ]
+    },
+    "tone": {
+      "type": "enum",
+      "description": "Colour on the shared status ramp; `neutral` is the plain badge.",
+      "default": "neutral",
       "required": false,
-      "values": ["default", "success", "warning", "error", "info", "outline", "label", "dim"]
+      "values": [
+        "neutral",
+        "accent",
+        "info",
+        "success",
+        "warning",
+        "danger"
+      ]
     },
     "size": {
       "type": "enum",
       "description": "Badge size",
       "default": "md",
       "required": false,
-      "values": ["sm", "md", "lg"]
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ]
     },
     "dot": {
       "type": "boolean",
@@ -54,7 +83,7 @@
     },
     "dotColor": {
       "type": "string",
-      "description": "Color for the leading status dot. Applies to variant=\"label\" (and the generic dot prop). Accepts any CSS color including CSS custom properties.",
+      "description": "Color for the leading status dot. Accepts any CSS color including CSS custom properties.",
       "required": false
     },
     "icon": {
@@ -64,7 +93,7 @@
     },
     "active": {
       "type": "boolean",
-      "description": "Marks variant=\"dim\" as the currently selected filter. Has no effect on other variants.",
+      "description": "Marks variant=\"ghost\" as the currently selected filter. Has no effect on other variants.",
       "default": "false",
       "required": false
     },
@@ -87,71 +116,66 @@
   },
   "usage": {
     "when": [
-      "Showing item status (active, pending, archived)",
-      "Displaying counts or quantities inline",
-      "Categorizing or tagging content",
-      "Highlighting new or updated items"
+      "Marking item status: active, pending, archived",
+      "Showing a count inline",
+      "Tagging or categorising content",
+      "Flagging what is new or changed"
     ],
     "whenNot": [
-      "Conveying critical errors (use Alert instead)",
-      "Long-form status messages (use Alert)",
-      "Interactive filtering (use Chip/ToggleGroup)",
-      "Navigation labels (use Tabs or links)"
+      "Real errors that need attention — use Alert",
+      "Anything longer than a few words — use Alert",
+      "Clickable filters — use Chip or ToggleGroup",
+      "View switching — use Tabs or links"
     ],
     "guidelines": [
-      "Keep badge text under 20 characters",
-      "Use dot variant for live status indicators",
-      "Pair success/error variants with meaningful labels, not just colors",
-      "Semantic status badges are borderless pills using shared semantic bg/text tokens",
-      "Use onRemove for user-created tags only, not system-generated badges",
-      "Badges are not announced as live status updates by default; use announce for screen-reader status announcements when appropriate"
+      "Under 20 characters",
+      "dot for live status; add dotPulse only while it is still changing",
+      "Semantic tones are borderless soft pills on shared status tokens",
+      "outline pairs with dotColor; ghost pairs with active for filter chrome",
+      "onRemove for user-created tags only, never system labels"
     ],
     "accessibility": [
-      "Badge text must be meaningful without relying on color alone",
-      "Removable badges must have accessible dismiss button labels",
-      "Avoid using badges as the sole indicator of important state changes"
+      "The text must carry the meaning — colour alone never does",
+      "Removable badges need a named dismiss button",
+      "Badges are silent to screen readers unless you pass announce",
+      "Do not make a badge the only signal that something changed"
     ]
   },
   "examples": [
     {
-      "name": "Default",
-      "description": "Neutral badge for general labels",
-      "code": "import { Badge } from '@/components/Badge';\n\n<Badge>Default</Badge>"
-    },
-    {
-      "name": "Status Variants",
-      "description": "All severity variants for different contexts",
-      "code": "import { Badge } from '@/components/Badge';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge variant=\"default\">Default</Badge>\n  <Badge variant=\"success\">Active</Badge>\n  <Badge variant=\"warning\">Pending</Badge>\n  <Badge variant=\"error\">Failed</Badge>\n  <Badge variant=\"info\">New</Badge>\n</Stack>"
-    },
-    {
-      "name": "Delivery Status",
-      "description": "Reference status pills with deep semantic fill and bright text",
-      "code": "import { Badge } from '@/components/Badge';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge variant=\"success\" size=\"lg\">Delivered</Badge>\n  <Badge variant=\"error\" size=\"lg\">Bounced</Badge>\n</Stack>"
+      "name": "Tones",
+      "description": "Neutral through info, on shared status tokens.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge>Neutral</Badge>\n  <Badge tone=\"success\">Active</Badge>\n  <Badge tone=\"warning\">Pending</Badge>\n  <Badge tone=\"danger\">Failed</Badge>\n  <Badge tone=\"info\">New</Badge>\n</Stack>"
     },
     {
       "name": "With Dot",
-      "description": "Live status indicators using dot prefix",
-      "code": "import { Badge } from '@/components/Badge';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge variant=\"success\" dot>Online</Badge>\n  <Badge variant=\"warning\" dot>Away</Badge>\n  <Badge variant=\"error\" dot>Offline</Badge>\n</Stack>"
+      "description": "Leading dot for live state; it breathes while still moving.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge tone=\"success\" dot>Online</Badge>\n  <Badge tone=\"warning\" dot>Away</Badge>\n  <Badge tone=\"danger\" dot>Offline</Badge>\n  <Badge tone=\"info\" dot dotPulse>Syncing</Badge>\n</Stack>"
     },
     {
-      "name": "Announced Status",
-      "description": "Opt into screen-reader status announcement behavior",
-      "code": "import { Badge } from '@/components/Badge';\n\n<Badge variant=\"success\" announce>Saved</Badge>"
+      "name": "Outline and Ghost",
+      "description": "Hairline metadata pill, and filter chrome that marks the active one.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge variant=\"outline\" dotColor=\"var(--fui-color-accent)\">Design</Badge>\n  <Badge variant=\"outline\" dotColor=\"var(--fui-color-success)\">Shipped</Badge>\n  <Badge variant=\"ghost\" active>All</Badge>\n  <Badge variant=\"ghost\">Archived</Badge>\n</Stack>"
     },
     {
       "name": "Outline",
-      "description": "Minimal bordered badge for neutral emphasis",
-      "code": "import { Badge } from '@/components/Badge';\n\n<Badge variant=\"outline\">Outline</Badge>"
+      "description": "Bordered and transparent, when a fill would shout.",
+      "code": "<Badge variant=\"outline\">Outline</Badge>"
     },
     {
-      "name": "Small Size",
-      "description": "Compact badges for dense UIs",
-      "code": "import { Badge } from '@/components/Badge';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\" wrap>\n  <Badge size=\"sm\" variant=\"info\">v2.1</Badge>\n  <Badge size=\"sm\" variant=\"success\">Stable</Badge>\n  <Badge size=\"md\" variant=\"info\">Standard</Badge>\n</Stack>"
+      "name": "Sizes",
+      "description": "sm for dense tables, lg for reference status pills.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\" wrap>\n  <Badge tone=\"success\" size=\"sm\">Small</Badge>\n  <Badge tone=\"success\" size=\"md\">Medium</Badge>\n  <Badge tone=\"success\" size=\"lg\">Large</Badge>\n</Stack>"
     },
     {
       "name": "Removable",
-      "description": "User-created tags that can be dismissed",
-      "code": "import { Badge } from '@/components/Badge';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge variant=\"info\" onRemove={() => {}}>React</Badge>\n  <Badge variant=\"info\" onRemove={() => {}}>TypeScript</Badge>\n  <Badge variant=\"info\" onRemove={() => {}}>CSS</Badge>\n</Stack>"
+      "description": "Dismissible tags the user added themselves.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge tone=\"info\" onRemove={() => {}}>React</Badge>\n  <Badge tone=\"info\" onRemove={() => {}}>TypeScript</Badge>\n  <Badge tone=\"info\" onRemove={() => {}}>CSS</Badge>\n</Stack>"
+    },
+    {
+      "name": "Announced Status",
+      "description": "Looks the same, but screen readers now hear the change.",
+      "code": "<Badge tone=\"success\" announce>Saved</Badge>"
     }
   ],
   "relations": [
@@ -169,20 +193,27 @@
   "contract": {
     "propsSummary": [
       "children: ReactNode - badge label (required)",
-      "variant: default|success|warning|error|info|outline|label|dim - visual style",
+      "variant: soft|outline|ghost - chrome family",
+      "tone: neutral|accent|info|success|warning|danger - colour",
       "size: sm|md|lg - badge size",
       "dot: boolean - show status dot indicator",
       "dotPulse: boolean - breathe the dot for an in-progress state (respects prefers-reduced-motion)",
       "dotColor: string - color for the leading status dot",
-      "active: boolean - marks variant=\"dim\" as the selected filter",
+      "active: boolean - marks variant=\"ghost\" as the selected filter",
       "onRemove: () => void - makes badge removable",
       "announce: boolean - opt into role=\"status\" + auto status aria-label"
     ],
-    "a11yRules": ["A11Y_BADGE_CONTRAST", "A11Y_BADGE_DISMISS", "A11Y_TARGET_SIZE_MIN"]
+    "a11yRules": [
+      "A11Y_BADGE_CONTRAST",
+      "A11Y_BADGE_DISMISS",
+      "A11Y_TARGET_SIZE_MIN"
+    ]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": ["Root"]
+    "subComponents": [
+      "Root"
+    ]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Badge/Badge.module.scss

@@ -1,16 +1,24 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action" as action;
 @use "../../recipes/representation" as representation;
 @use "../../recipes/target" as target;
 
+// Tone publishes three channels (tint, ink, line); the variant decides which
+// one paints the surface. Neutral is the absence of a tone class.
 .badge {
+  --_badge-tint: var(--fui-bg-tertiary, #{$fui-bg-tertiary});
+  --_badge-ink: var(--fui-text-secondary, #{$fui-text-secondary});
+  --_badge-line: var(--fui-border-strong, #{$fui-border-strong});
+
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
   inline-size: max-content;
-  gap: var(--fui-raw-space-4, 4px);
-  padding-block: 0;
-  border: 0;
+  gap: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  padding-block: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid transparent;
   border-radius: var(--fui-badge-radius, var(--fui-radius-lg, #{$fui-radius-lg}));
   white-space: nowrap;
 }
@@ -19,65 +27,84 @@
 .sm {
   @include representation.badge("sm");
 
-  padding-inline: var(--fui-raw-space-4, 4px);
+  padding-inline: var(--fui-raw-space-4, #{measurements.raw-space(4)});
 }
 
 .md {
   @include representation.badge("md");
 
-  padding-inline: var(--fui-raw-space-6, 6px);
+  padding-inline: var(--fui-raw-space-6, #{measurements.raw-space(6)});
 }
 
 .lg {
   @include representation.badge("lg");
 
-  padding-inline: var(--fui-raw-space-8, 8px);
+  padding-inline: var(--fui-raw-space-8, #{measurements.raw-space(8)});
 }
 
-// Variants
-.default {
-  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
-  color: var(--fui-text-secondary, $fui-text-secondary);
+// Tones. The semantic `-bg` tokens are panel tints (Alert, Toast: a large
+// area where 10–15% of the seed is right). A badge is a few glyphs wide and
+// is the one place a state becomes a colour, so its fill mixes the seed
+// itself, harder, and harder again in the dark where a faint tint sinks into
+// the page. The ink stays the contrast-derived text token.
+$_tint-light: 24%;
+$_tint-dark: 28%;
+
+@mixin _tint($seed-var, $seed) {
+  --_badge-tint: light-dark(
+    color-mix(in srgb, var(#{$seed-var}, #{$seed}) #{$_tint-light}, transparent),
+    color-mix(in srgb, var(#{$seed-var}, #{$seed}) #{$_tint-dark}, transparent)
+  );
 }
 
-.success {
-  background: var(--fui-color-success-bg, $fui-color-success-bg);
-  color: var(--fui-color-success-text, $fui-color-success-text);
+@mixin _tone($tone, $seed, $text, $border) {
+  @include _tint(--fui-color-#{$tone}, $seed);
+
+  --_badge-ink: var(--fui-color-#{$tone}-text, #{$text});
+  --_badge-line: var(--fui-color-#{$tone}-border, #{$border});
 }
 
-.warning {
-  background: var(--fui-color-warning-bg, $fui-color-warning-bg);
-  color: var(--fui-color-warning-text, $fui-color-warning-text);
+.toneAccent {
+  @include _tint(--fui-color-accent, $fui-color-accent);
+
+  --_badge-ink: var(--fui-color-accent, #{$fui-color-accent});
+  --_badge-line: color-mix(in srgb, var(--fui-color-accent, #{$fui-color-accent}) 48%, transparent);
 }
 
-.error {
-  background: var(--fui-color-danger-bg, $fui-color-danger-bg);
-  color: var(--fui-color-danger-text, $fui-color-danger-text);
+.toneInfo {
+  @include _tone("info", $fui-color-info, $fui-color-info-text, $fui-color-info-border);
 }
 
-.info {
-  background: var(--fui-color-info-bg, $fui-color-info-bg);
-  color: var(--fui-color-info-text, $fui-color-info-text);
+.toneSuccess {
+  @include _tone("success", $fui-color-success, $fui-color-success-text, $fui-color-success-border);
 }
 
-.outline {
-  background-color: transparent;
-  color: var(--fui-text-primary, $fui-text-primary);
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border-strong, $fui-border-strong);
+.toneWarning {
+  @include _tone("warning", $fui-color-warning, $fui-color-warning-text, $fui-color-warning-border);
 }
 
-.label {
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+.toneDanger {
+  @include _tone("danger", $fui-color-danger, $fui-color-danger-text, $fui-color-danger-border);
+}
+
+// Variants
+.soft {
+  background-color: var(--_badge-tint, var(--fui-bg-tertiary, #{$fui-bg-tertiary}));
+  color: var(--_badge-ink, var(--fui-text-secondary, #{$fui-text-secondary}));
+}
+
+.outline {
   background-color: transparent;
-  color: var(--fui-text-secondary, $fui-text-secondary);
+  border-color: var(--_badge-line, var(--fui-border-strong, #{$fui-border-strong}));
+  color: var(--_badge-ink, var(--fui-text-secondary, #{$fui-text-secondary}));
 }
 
-.dim {
-  border: var(--fui-stroke-hairline, 1px) solid transparent;
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+// Filter-pill chrome: transparent at rest, `active` wears the shared selected
+// surface. Tones colour the ink only.
+.ghost {
+  border-radius: var(--fui-radius-l3, #{$fui-radius-l3});
   background-color: transparent;
-  color: var(--fui-text-secondary, $fui-text-secondary);
+  color: var(--_badge-ink, var(--fui-text-secondary, #{$fui-text-secondary}));
   transition:
     color var(--fui-transition-fast, $fui-transition-fast),
     border-color var(--fui-transition-fast, $fui-transition-fast),
@@ -85,21 +112,21 @@
 
   &.active {
     border-color: var(--fui-border, $fui-border);
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    background-color: var(--fui-control-selected-bg, $fui-bg-active);
     color: var(--fui-text-primary, $fui-text-primary);
   }
 }
 
 .dot {
-  inline-size: var(--fui-raw-space-6, 6px);
-  block-size: var(--fui-raw-space-6, 6px);
-  border-radius: 50%;
+  inline-size: var(--fui-raw-space-6, #{measurements.raw-space(6)});
+  block-size: var(--fui-raw-space-6, #{measurements.raw-space(6)});
+  border-radius: var(--fui-radius-full, #{$fui-radius-full});
   background-color: var(--fui-badge-dot-color, currentColor);
   flex-shrink: 0;
 
   .sm & {
-    inline-size: var(--fui-raw-space-4, 4px);
-    block-size: var(--fui-raw-space-4, 4px);
+    inline-size: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+    block-size: var(--fui-raw-space-4, #{measurements.raw-space(4)});
   }
 }
 
@@ -109,12 +136,12 @@
 // motion the component has. Opacity only: nothing reflows, and a reader who has
 // asked for less motion loses the breathing and keeps the badge.
 .dotPulse {
-  animation: fui-badge-dot-pulse 1.6s ease-in-out infinite;
+  animation: fui-badge-dot-pulse var(--fui-duration-pulse, $fui-duration-pulse) ease-in-out infinite;
 }
 
 @keyframes fui-badge-dot-pulse {
   50% {
-    opacity: 0.35;
+    opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
   }
 }
 
@@ -147,7 +174,7 @@
 }
 
 .badge:has(.remove) {
-  padding-inline-end: var(--fui-raw-space-4, 4px);
+  padding-inline-end: var(--fui-raw-space-4, #{measurements.raw-space(4)});
 }
 
 .remove {
@@ -157,16 +184,21 @@
 
   inline-size: 1em;
   block-size: 1em;
-  margin-inline-start: calc(-1 * var(--fui-raw-space-2, 2px));
-  padding: 0;
+  margin-inline-start: calc(-1 * var(--fui-raw-space-2, #{measurements.raw-space(2)}));
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   border: 0;
   background: transparent;
-  color: inherit;
-  opacity: 0.6;
+  color: color-mix(in srgb, currentColor 60%, transparent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
   cursor: pointer;
 
   &:hover {
-    opacity: 1;
+    color: currentColor;
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+
+    color: currentColor;
   }
 }