@usefragments/ui 1.6.0 → 2.0.0

package/src/components/Pagination/Pagination.module.scss

@@ -1,5 +1,6 @@
 @use '../../tokens/variables' as *;
 @use '../../tokens/mixins' as *;
+@use '../../tokens/measurements.generated' as measurements;
 @use '../../recipes/action';
 @use '../../recipes/layout';
 
@@ -22,8 +23,8 @@
   align-items: center;
   gap: layout.gap("xs");
   list-style: none;
-  margin: 0;
-  padding: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 }
 
 // ============================================
@@ -52,19 +53,21 @@
 
 // Active page
 .itemActive {
-  background-color: var(--fui-bg-active, $fui-bg-active);
+  background-color: var(--fui-control-selected-bg, $fui-bg-active);
   color: var(--fui-text-primary, $fui-text-primary);
   font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
 
   &:hover:not(:disabled) {
-    background-color: var(--fui-bg-active, $fui-bg-active);
+    background-color: var(--fui-control-selected-bg, $fui-bg-active);
   }
+
+  @include high-contrast-outline;
 }
 
 // Disabled state (prev/next at boundaries)
 .itemDisabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+  @include disabled-state;
+
   pointer-events: none;
 }
 
@@ -107,13 +110,3 @@
   @include action.glyph("lg");
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
-@media (prefers-contrast: more) {
-  .itemActive {
-    outline: var(--fui-stroke-default, 2px) solid var(--fui-text-primary, $fui-text-primary);
-    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
-  }
-}

package/src/components/Popover/Popover.contract.json

@@ -1,15 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Popover",
-  "description": "Rich content overlay anchored to a trigger element. Use for forms, detailed information, or interactive content that should stay in context.",
-  "category": "feedback",
-  "tags": [
-    "popover",
-    "overlay",
-    "dropdown",
-    "floating",
-    "contextual"
-  ],
+  "description": "Anchors interactive content to a trigger without blocking the page.",
+  "category": "overlays",
+  "tags": ["popover", "overlay", "dropdown", "floating", "contextual"],
   "status": "stable",
   "sourcePath": "src/components/Popover/index.tsx",
   "exportName": "Popover",
@@ -51,24 +45,23 @@
   },
   "usage": {
     "when": [
-      "Inline editing forms",
-      "Rich preview content",
-      "Filter panels",
-      "Date/color pickers",
-      "Content that needs more space than a tooltip"
+      "Editing a value in place",
+      "Previews richer than a line of text",
+      "Filter and picker panels",
+      "Content that outgrows a tooltip"
     ],
     "whenNot": [
-      "Simple hints (use Tooltip)",
-      "Action lists (use Menu)",
-      "Blocking user interaction (use Dialog)",
-      "System notifications (use Toast or Alert)"
+      "A short hint (use Tooltip)",
+      "A list of actions (use Menu)",
+      "Anything that must block the page (use Dialog)",
+      "Feedback the user does not act on (use Toast or Alert)"
     ],
     "guidelines": [
-      "Keep popover content focused and minimal",
-      "Include a clear way to close (X button or action buttons)",
-      "Position to avoid covering important content",
-      "Use arrow to visually connect popover to trigger",
-      "Popover.Trigger and Popover.Close support asChild for links/router-link components (single valid element child required)"
+      "One job per panel",
+      "Always give the user a visible way out",
+      "Pick a side that does not cover what the user just clicked",
+      "Add the arrow when the trigger is not obvious",
+      "asChild on Trigger and Close needs a single element child"
     ],
     "accessibility": [
       "Focus is moved to popover content on open",
@@ -79,27 +72,27 @@
   "examples": [
     {
       "name": "Default",
-      "description": "Basic popover with content",
-      "code": "<Popover>\n  <Popover.Trigger asChild>\n    <Button variant=\"secondary\">Open Popover</Button>\n  </Popover.Trigger>\n  <Popover.Content>\n    <Popover.Close />\n    <Popover.Title>Popover Title</Popover.Title>\n    <Popover.Description>\n      This is a popover with some content. It can contain text, forms, or other elements.\n    </Popover.Description>\n  </Popover.Content>\n</Popover>"
+      "description": "Title, body, and a close control.",
+      "code": "<Popover>\n  <Popover.Trigger asChild>\n    <Button variant=\"soft\">Open Popover</Button>\n  </Popover.Trigger>\n  <Popover.Content>\n    <Popover.Close />\n    <Popover.Title>Popover Title</Popover.Title>\n    <Popover.Description>\n      This is a popover with some content. It can contain text, forms, or other elements.\n    </Popover.Description>\n  </Popover.Content>\n</Popover>"
     },
     {
       "name": "With Form",
-      "description": "Popover containing a form",
-      "code": "<Popover>\n  <Popover.Trigger asChild>\n    <Button variant=\"secondary\">Edit Name</Button>\n  </Popover.Trigger>\n  <Popover.Content size=\"sm\">\n    <Popover.Close />\n    <Popover.Title>Edit Name</Popover.Title>\n    <Popover.Body>\n      <Input label=\"Display Name\" placeholder=\"Enter name\" />\n    </Popover.Body>\n    <Popover.Footer>\n      <Popover.Close asChild>\n        <Button variant=\"secondary\" size=\"sm\">Cancel</Button>\n      </Popover.Close>\n      <Button variant=\"primary\" size=\"sm\">Save</Button>\n    </Popover.Footer>\n  </Popover.Content>\n</Popover>"
+      "description": "Enough room to edit a value in place.",
+      "code": "<Popover>\n  <Popover.Trigger asChild>\n    <Button variant=\"soft\">Edit Name</Button>\n  </Popover.Trigger>\n  <Popover.Content size=\"sm\">\n    <Popover.Close />\n    <Popover.Title>Edit Name</Popover.Title>\n    <Popover.Body>\n      <Input label=\"Display Name\" placeholder=\"Enter name\" />\n    </Popover.Body>\n    <Popover.Footer>\n      <Popover.Close asChild>\n        <Button variant=\"soft\" size=\"sm\">Cancel</Button>\n      </Popover.Close>\n      <Button variant=\"solid\" size=\"sm\">Save</Button>\n    </Popover.Footer>\n  </Popover.Content>\n</Popover>"
     },
     {
       "name": "With Arrow",
-      "description": "Popover with pointing arrow",
-      "code": "<Popover>\n  <Popover.Trigger asChild>\n    <Button variant=\"secondary\">Info</Button>\n  </Popover.Trigger>\n  <Popover.Content arrow>\n    <Popover.Title>Quick Tip</Popover.Title>\n    <Popover.Description>\n      This popover has an arrow pointing to its trigger element.\n    </Popover.Description>\n  </Popover.Content>\n</Popover>"
+      "description": "The arrow ties the panel back to its trigger.",
+      "code": "<Popover>\n  <Popover.Trigger asChild>\n    <Button variant=\"soft\">Info</Button>\n  </Popover.Trigger>\n  <Popover.Content arrow>\n    <Popover.Title>Quick Tip</Popover.Title>\n    <Popover.Description>\n      This popover has an arrow pointing to its trigger element.\n    </Popover.Description>\n  </Popover.Content>\n</Popover>"
     },
     {
       "name": "Positions",
-      "description": "Popover on different sides",
-      "code": "<div style={{ display: 'flex', gap: '16px', padding: '60px' }}>\n  <Popover>\n    <Popover.Trigger asChild>\n      <Button variant=\"secondary\">Top</Button>\n    </Popover.Trigger>\n    <Popover.Content side=\"top\" size=\"sm\">\n      <Popover.Description>Popover on top</Popover.Description>\n    </Popover.Content>\n  </Popover>\n  <Popover>\n    <Popover.Trigger asChild>\n      <Button variant=\"secondary\">Bottom</Button>\n    </Popover.Trigger>\n    <Popover.Content side=\"bottom\" size=\"sm\">\n      <Popover.Description>Popover on bottom</Popover.Description>\n    </Popover.Content>\n  </Popover>\n</div>"
+      "description": "Flips to the opposite side when space runs out.",
+      "code": "<div style={{ display: 'flex', gap: '16px', padding: '60px' }}>\n  <Popover>\n    <Popover.Trigger asChild>\n      <Button variant=\"soft\">Top</Button>\n    </Popover.Trigger>\n    <Popover.Content side=\"top\" size=\"sm\">\n      <Popover.Description>Popover on top</Popover.Description>\n    </Popover.Content>\n  </Popover>\n  <Popover>\n    <Popover.Trigger asChild>\n      <Button variant=\"soft\">Bottom</Button>\n    </Popover.Trigger>\n    <Popover.Content side=\"bottom\" size=\"sm\">\n      <Popover.Description>Popover on bottom</Popover.Description>\n    </Popover.Content>\n  </Popover>\n</div>"
     },
     {
       "name": "Link Trigger",
-      "description": "Use asChild with a non-button trigger element",
+      "description": "asChild lets a link open it.",
       "code": "<Popover>\n  <Popover.Trigger asChild>\n    <a href=\"#popover-help\">Open help</a>\n  </Popover.Trigger>\n  <Popover.Content size=\"sm\">\n    <Popover.Description>Popover trigger can be an anchor when using asChild.</Popover.Description>\n  </Popover.Content>\n</Popover>"
     }
   ],
@@ -128,27 +121,12 @@
       "Popover.Trigger / Popover.Close asChild support non-button children",
       "Popover.Content side: top|bottom|left|right - position"
     ],
-    "a11yRules": [
-      "A11Y_POPOVER_FOCUS",
-      "A11Y_POPOVER_ESCAPE",
-      "A11Y_TARGET_SIZE_MIN"
-    ]
+    "a11yRules": ["A11Y_POPOVER_FOCUS", "A11Y_POPOVER_ESCAPE", "A11Y_TARGET_SIZE_MIN"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Trigger",
-      "Content",
-      "Close",
-      "Title",
-      "Description",
-      "Body",
-      "Footer"
-    ],
-    "requiredChildren": [
-      "Trigger",
-      "Content"
-    ],
+    "subComponents": ["Trigger", "Content", "Close", "Title", "Description", "Body", "Footer"],
+    "requiredChildren": ["Trigger", "Content"],
     "commonPatterns": [
       "<Popover><Popover.Trigger asChild><Button>Open</Button></Popover.Trigger><Popover.Content><Popover.Close /><Popover.Title>{title}</Popover.Title><Popover.Description>{description}</Popover.Description></Popover.Content></Popover>",
       "<Popover><Popover.Trigger asChild><a href=\"#help\">Open help</a></Popover.Trigger><Popover.Content>...</Popover.Content></Popover>"

package/src/components/Popover/Popover.module.scss

@@ -1,10 +1,11 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../tokens/mixins" as *;
 @use "../../recipes/action" as action;
 @use "../../recipes/overlay" as overlay;
 
 .positioner {
-  z-index: var(--fui-overlay-layer-anchored, 52);
+  z-index: var(--fui-overlay-layer-anchored, #{$fui-overlay-layer-anchored});
   outline: none;
 }
 
@@ -13,7 +14,7 @@
 
   position: relative;
   opacity: 0;
-  transform: scale(0.95) translateY(-$fui-anim-offset-sm);
+  transform: scale(0.95) translateY(calc(-1 * var(--fui-anim-offset-sm, #{$fui-anim-offset-sm})));
   transform-origin: var(--transform-origin);
   transition:
     opacity var(--fui-transition-fast, $fui-transition-fast),
@@ -26,21 +27,22 @@
 
   &[data-starting-style] {
     opacity: 0;
-    transform: scale(0.95) translateY(-$fui-anim-offset-sm);
+    transform: scale(0.95) translateY(calc(-1 * var(--fui-anim-offset-sm, #{$fui-anim-offset-sm})));
   }
 
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.95) translateY($fui-anim-offset-sm);
+    transform: scale(0.95) translateY(var(--fui-anim-offset-sm, #{$fui-anim-offset-sm}));
   }
 
   &[data-side="top"] {
     &[data-starting-style] {
-      transform: scale(0.95) translateY($fui-anim-offset-sm);
+      transform: scale(0.95) translateY(var(--fui-anim-offset-sm, #{$fui-anim-offset-sm}));
     }
 
     &[data-ending-style] {
-      transform: scale(0.95) translateY(-$fui-anim-offset-sm);
+      transform: scale(0.95)
+        translateY(calc(-1 * var(--fui-anim-offset-sm, #{$fui-anim-offset-sm})));
     }
   }
 
@@ -64,14 +66,16 @@
 .title {
   @include overlay.anchored-title;
 
-  margin: 0 0 var(--fui-feedback-text-gap, var(--fui-raw-space-4, 4px));
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)})
+    var(--fui-raw-space-0, #{measurements.raw-space(0)})
+    var(--fui-feedback-text-gap, var(--fui-raw-space-4, #{measurements.raw-space(4)}));
   color: var(--fui-text-primary, $fui-text-primary);
 }
 
 .description {
   @include overlay.description;
 
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-secondary, $fui-text-secondary);
 }
 
@@ -79,24 +83,12 @@
   @include button-reset;
   @include interactive-base;
   @include overlay.close;
-
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
-  color: var(--fui-text-tertiary, $fui-text-tertiary);
-
-  &:hover {
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
-    color: var(--fui-text-primary, $fui-text-primary);
-  }
-
-  svg {
-    inline-size: action.icon-size("sm");
-    block-size: action.icon-size("sm");
-  }
 }
 
 .popup:has(.close) .title {
   padding-inline-end: calc(
-    #{action.track("sm")} + var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px))
+    #{action.track("sm")} +
+      var(--fui-overlay-section-gap, var(--fui-raw-space-8, #{measurements.raw-space(8)}))
   );
 }
 
@@ -104,7 +96,7 @@
   @include overlay.arrow-box;
 
   background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 
   &[data-side="top"] {
     border-top: none;
@@ -128,17 +120,27 @@
 }
 
 .body {
-  margin-block-start: var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px));
+  margin-block-start: var(
+    --fui-overlay-section-gap,
+    var(--fui-raw-space-8, #{measurements.raw-space(8)})
+  );
 }
 
 .footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px));
-  margin-block-start: var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px));
-  padding-block-start: var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px));
-  border-top: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  gap: var(--fui-overlay-section-gap, var(--fui-raw-space-8, #{measurements.raw-space(8)}));
+  margin-block-start: var(
+    --fui-overlay-section-gap,
+    var(--fui-raw-space-8, #{measurements.raw-space(8)})
+  );
+  padding-block-start: var(
+    --fui-overlay-section-gap,
+    var(--fui-raw-space-8, #{measurements.raw-space(8)})
+  );
+  border-top: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+    var(--fui-border, $fui-border);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/components/Progress/Progress.contract.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Progress",
-  "description": "Visual indicator of task completion or loading state. Available in linear and circular variants.",
+  "description": "Shows how far along a task is, as a bar or a ring.",
   "category": "feedback",
   "tags": ["progress", "loading", "indicator", "percentage", "status"],
   "status": "stable",
@@ -12,7 +12,7 @@
     "min: number (default: 0)",
     "max: number (default: 100)",
     "size: sm|md|lg (default: md)",
-    "variant: default|neutral|success|warning|danger (default: default)",
+    "tone: accent|neutral|success|warning|danger (default: accent)",
     "role: progressbar|meter (default: progressbar)",
     "label: string",
     "showValue: boolean (default: false)",
@@ -44,12 +44,12 @@
       "required": false,
       "values": ["sm", "md", "lg"]
     },
-    "variant": {
+    "tone": {
       "type": "enum",
-      "description": "Color variant",
-      "default": "default",
+      "description": "Colour. accent is the plain bar; neutral reads as a meter whose maximum is not a success; success, warning and danger carry state.",
+      "default": "accent",
       "required": false,
-      "values": ["default", "neutral", "success", "warning", "danger"]
+      "values": ["accent", "neutral", "success", "warning", "danger"]
     },
     "label": {
       "type": "string",
@@ -70,56 +70,60 @@
   },
   "usage": {
     "when": [
-      "Showing upload/download progress",
-      "Displaying task completion percentage",
-      "Form completion indicators",
-      "Loading states with known duration"
+      "Upload and download progress",
+      "Percentage of a task finished",
+      "How much of a form is filled in",
+      "Waits where you know the duration"
     ],
     "whenNot": [
-      "Unknown loading duration (use Spinner)",
-      "Step-based progress (use Stepper)",
-      "Status without percentage (use Badge)"
+      "You cannot say how long — use Loading",
+      "Discrete steps — use a stepper",
+      "Status with no number — use Badge"
     ],
     "guidelines": [
-      "Use determinate progress when you know the completion percentage",
-      "Use indeterminate for unknown durations",
-      "Include a label for context when the purpose isnt obvious",
-      "Use appropriate color variants for success/warning/danger states",
-      "Use variant=\"neutral\" with role=\"meter\" for magnitude or distribution values where reaching the maximum is not a success state",
-      "Determinate values are clamped to the min/max range for display"
+      "Pass a value when you know the percentage; pass null when you do not",
+      "Add a label whenever the bar alone leaves the purpose unclear",
+      "success, warning, and danger carry state, not decoration",
+      "tone=\"neutral\" with role=\"meter\" for a magnitude where full is not success",
+      "Values outside min and max are clamped before display"
     ],
     "accessibility": [
-      "Uses role=\"progressbar\" with aria-valuenow",
-      "Accepts role=\"meter\" for scalar measurements within a known range",
-      "Label is associated with the progress bar",
-      "State changes are announced to screen readers"
+      "Reports role=\"progressbar\" with aria-valuenow",
+      "role=\"meter\" is accepted for scalar readings inside a known range",
+      "The label is tied to the bar",
+      "Value changes are announced as they happen"
     ]
   },
   "examples": [
     {
       "name": "Default",
-      "description": "Basic progress bar with percentage",
-      "code": "<Progress value={60} label=\"Uploading...\" showValue />"
+      "description": "Determinate bar with its percentage spelled out.",
+      "code": "<Progress value={60} label=\"Uploading…\" showValue />"
     },
     {
-      "name": "Variants",
-      "description": "Different color variants for different states",
-      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '300px' }}>\n  <Progress value={75} variant=\"default\" label=\"Processing\" showValue />\n  <Progress value={100} variant=\"success\" label=\"Complete\" showValue />\n  <Progress value={80} variant=\"warning\" label=\"Almost full\" showValue />\n  <Progress value={95} variant=\"danger\" label=\"Storage critical\" showValue />\n</div>"
+      "name": "Tones",
+      "description": "Colour carries state: normal, done, tight, critical.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"column\" gap=\"md\">\n  <Progress value={75} tone=\"accent\" label=\"Processing\" showValue />\n  <Progress value={100} tone=\"success\" label=\"Complete\" showValue />\n  <Progress value={80} tone=\"warning\" label=\"Almost full\" showValue />\n  <Progress value={95} tone=\"danger\" label=\"Storage critical\" showValue />\n</Stack>"
+    },
+    {
+      "name": "Meter",
+      "description": "A reading where hitting the top is not a win.",
+      "code": "<Progress\n  value={42}\n  tone=\"neutral\"\n  role=\"meter\"\n  label=\"Seats used\"\n  showValue\n/>"
     },
     {
       "name": "Sizes",
-      "description": "Different progress bar sizes",
-      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '300px' }}>\n  <Progress value={50} size=\"sm\" label=\"Small\" />\n  <Progress value={50} size=\"md\" label=\"Medium\" />\n  <Progress value={50} size=\"lg\" label=\"Large\" />\n</div>"
+      "description": "Thin for table rows, thick when the bar is the point.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"column\" gap=\"md\">\n  <Progress value={50} size=\"sm\" label=\"Small\" />\n  <Progress value={50} size=\"md\" label=\"Medium\" />\n  <Progress value={50} size=\"lg\" label=\"Large\" />\n</Stack>"
     },
     {
       "name": "Indeterminate",
-      "description": "Loading state with unknown duration",
-      "code": "<Progress value={null} label=\"Loading...\" />"
+      "description": "value={null} sweeps instead of filling.",
+      "code": "<Progress value={null} label=\"Loading…\" />"
     },
     {
       "name": "Circular",
-      "description": "Circular progress indicator",
-      "code": "<div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>\n  <CircularProgress value={25} size=\"sm\" />\n  <CircularProgress value={50} size=\"md\" showValue />\n  <CircularProgress value={75} size=\"lg\" showValue variant=\"success\" />\n  <CircularProgress value={null} size=\"md\" />\n</div>"
+      "description": "Same value in a ring, for tiles and compact chrome.",
+      "code": "import { CircularProgress } from '@/components/Progress';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"lg\" align=\"center\">\n  <CircularProgress value={25} size=\"sm\" />\n  <CircularProgress value={50} size=\"md\" showValue />\n  <CircularProgress value={75} size=\"lg\" showValue tone=\"success\" />\n  <CircularProgress value={null} size=\"md\" />\n</Stack>"
     }
   ],
   "relations": [
@@ -138,7 +142,7 @@
     "propsSummary": [
       "value: number|null - progress percentage (null for indeterminate)",
       "size: sm|md|lg - bar thickness",
-      "variant: default|success|warning|danger - color",
+      "tone: accent|neutral|success|warning|danger - colour",
       "label: string - descriptive label",
       "showValue: boolean - display percentage",
       "Determinate display values are clamped (and invalid min/max ranges render as 0%)"

package/src/components/Progress/Progress.module.scss

@@ -35,7 +35,7 @@
 .track {
   position: relative;
   inline-size: 100%;
-  block-size: var(--_progress-track-size);
+  block-size: var(--_progress-track-size, var(--fui-raw-space-6, #{measurements.raw-space(6)}));
   overflow: hidden;
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
   border-radius: var(--fui-radius-full, $fui-radius-full);
@@ -70,7 +70,7 @@
   transition: inline-size var(--fui-transition-normal, $fui-transition-normal);
 }
 
-// Color variants
+// Tones (accent is the absence of a tone class)
 .indicatorNeutral {
   background-color: var(--fui-text-tertiary, $fui-text-tertiary);
 }
@@ -90,7 +90,7 @@
 // Indeterminate animation
 .indicatorIndeterminate {
   inline-size: 50%;
-  animation: indeterminate 1.5s ease-in-out infinite;
+  animation: indeterminate var(--fui-duration-pulse, $fui-duration-pulse) ease-in-out infinite;
 }
 
 @keyframes indeterminate {
@@ -105,14 +105,15 @@
   }
 }
 
-// Circular progress variant
+// Circular progress. The ring geometry (`--fui-progress-diameter`, `--fui-progress-dash-*`)
+// is authored on the instance from geometry.ts; the md ring is the fallback.
 .circular {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  inline-size: var(--_progress-diameter);
-  block-size: var(--_progress-diameter);
+  inline-size: var(--fui-progress-diameter, var(--fui-raw-space-48, #{measurements.raw-space(48)}));
+  block-size: var(--fui-progress-diameter, var(--fui-raw-space-48, #{measurements.raw-space(48)}));
 }
 
 .circularSvg {
@@ -134,6 +135,10 @@
   transition: stroke-dashoffset var(--fui-transition-normal, $fui-transition-normal);
 }
 
+.circularIndicatorNeutral {
+  stroke: var(--fui-text-tertiary, $fui-text-tertiary);
+}
+
 .circularIndicatorSuccess {
   stroke: var(--fui-color-success-text, $fui-color-success-text);
 }
@@ -147,19 +152,20 @@
 }
 
 .circularIndicatorIndeterminate {
-  animation: circularIndeterminate 1.5s ease-in-out infinite;
+  animation: circularIndeterminate var(--fui-duration-pulse, $fui-duration-pulse) ease-in-out
+    infinite;
 }
 
 @keyframes circularIndeterminate {
   0% {
-    stroke-dashoffset: var(--_progress-dash-full);
+    stroke-dashoffset: var(--fui-progress-dash-full, var(--fui-raw-space-0, #{measurements.raw-space(0)}));
     transform: rotate(0deg);
   }
   50% {
-    stroke-dashoffset: var(--_progress-dash-quarter);
+    stroke-dashoffset: var(--fui-progress-dash-quarter, var(--fui-raw-space-0, #{measurements.raw-space(0)}));
   }
   100% {
-    stroke-dashoffset: var(--_progress-dash-full);
+    stroke-dashoffset: var(--fui-progress-dash-full, var(--fui-raw-space-0, #{measurements.raw-space(0)}));
     transform: rotate(360deg);
   }
 }

package/src/components/Progress/index.tsx

@@ -13,6 +13,8 @@ import styles from "./Progress.module.scss";
 // Types
 // ============================================
 
+export type ProgressTone = "accent" | "neutral" | "success" | "warning" | "danger";
+
 export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> {
   /** Current progress value (0-100). Null for indeterminate. */
   value?: number | null;
@@ -22,8 +24,10 @@ export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   max?: number;
   /** Size of the progress bar */
   size?: ProgressSize;
-  /** Color variant */
-  variant?: "default" | "neutral" | "success" | "warning" | "danger";
+  /** Colour. `accent` is the plain bar; `neutral` reads as a meter whose
+   * maximum is not a success; the semantic tones carry state.
+   * @default "accent" */
+  tone?: ProgressTone;
   /** Label text */
   label?: string;
   /** Show percentage value */
@@ -37,14 +41,31 @@ export interface CircularProgressProps extends React.HTMLAttributes<HTMLDivEleme
   value?: number | null;
   /** Size of the circular progress */
   size?: ProgressSize;
-  /** Color variant */
-  variant?: "default" | "success" | "warning" | "danger";
+  /** Colour, same axis as the bar.
+   * @default "accent" */
+  tone?: ProgressTone;
   /** Show percentage in center */
   showValue?: boolean;
   /** Stroke width */
   strokeWidth?: number;
 }
 
+const INDICATOR_TONE_CLASS: Record<ProgressTone, string | undefined> = {
+  accent: undefined,
+  neutral: styles.indicatorNeutral,
+  success: styles.indicatorSuccess,
+  warning: styles.indicatorWarning,
+  danger: styles.indicatorDanger,
+};
+
+const CIRCULAR_TONE_CLASS: Record<ProgressTone, string | undefined> = {
+  accent: undefined,
+  neutral: styles.circularIndicatorNeutral,
+  success: styles.circularIndicatorSuccess,
+  warning: styles.circularIndicatorWarning,
+  danger: styles.circularIndicatorDanger,
+};
+
 // ============================================
 // Horizontal progress bar
 // ============================================
@@ -54,7 +75,7 @@ function ProgressRoot({
   min = 0,
   max = 100,
   size = "md",
-  variant = "default",
+  tone = "accent",
   label,
   showValue = false,
   formatValue,
@@ -88,10 +109,7 @@ function ProgressRoot({
 
   const indicatorClasses = [
     styles.indicator,
-    variant === "neutral" && styles.indicatorNeutral,
-    variant === "success" && styles.indicatorSuccess,
-    variant === "warning" && styles.indicatorWarning,
-    variant === "danger" && styles.indicatorDanger,
+    INDICATOR_TONE_CLASS[tone],
     isIndeterminate && styles.indicatorIndeterminate,
   ]
     .filter(Boolean)
@@ -140,7 +158,7 @@ function ProgressRoot({
 function CircularProgressRoot({
   value = null,
   size = "md",
-  variant = "default",
+  tone = "accent",
   showValue = false,
   strokeWidth: customStrokeWidth,
   className,
@@ -163,9 +181,7 @@ function CircularProgressRoot({
 
   const indicatorClasses = [
     styles.circularIndicator,
-    variant === "success" && styles.circularIndicatorSuccess,
-    variant === "warning" && styles.circularIndicatorWarning,
-    variant === "danger" && styles.circularIndicatorDanger,
+    CIRCULAR_TONE_CLASS[tone],
     isIndeterminate && styles.circularIndicatorIndeterminate,
   ]
     .filter(Boolean)
@@ -176,10 +192,12 @@ function CircularProgressRoot({
   // Default value text for screen readers
   const effectiveValueText =
     ariaValueText || (isIndeterminate ? "Loading" : `${Math.round(percentage)} percent`);
+  // The ring geometry is authored on the instance through the public
+  // `--fui-progress-*` properties (declared in tokens/_component-properties.scss).
   const circularStyle = {
-    "--_progress-diameter": `${geometry.diameter}px`,
-    "--_progress-dash-full": circumference,
-    "--_progress-dash-quarter": circumference / 4,
+    "--fui-progress-diameter": `${geometry.diameter}px`,
+    "--fui-progress-dash-full": circumference,
+    "--fui-progress-dash-quarter": circumference / 4,
     ...styleProp,
   } as React.CSSProperties;