@usefragments/ui 1.7.0 → 2.0.0

package/src/components/NavigationMenu/NavigationMenu.module.scss

@@ -1,8 +1,10 @@
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
 @use "../../recipes/action" as action;
 @use "../../recipes/layout" as layout;
 @use "../../recipes/navigation" as navigation;
+@use "../../recipes/overlay" as overlay;
 @use "../../recipes/popup" as popup;
 @use "../../recipes/typography" as typography;
 
@@ -51,8 +53,8 @@
   align-items: center;
   gap: var(--fui-space-1, $fui-space-1);
   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)});
 
   // Use viewport breakpoint (matches useIsMobile in NavigationMenu.tsx).
   // Self container queries on a shrink-to-content nav root can incorrectly hide
@@ -114,7 +116,7 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--fui-stroke-hairline, 1px);
+  gap: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
   position: absolute;
   left: 0;
   top: 0;
@@ -254,7 +256,7 @@
 
 .linkFeatured {
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
-  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);
 
   &:hover {
     @include popup.highlight-state;
@@ -269,7 +271,7 @@
 .indicator {
   position: absolute;
   bottom: 0;
-  height: var(--fui-stroke-default, 2px);
+  height: var(--fui-stroke-default, #{$fui-stroke-default});
   background-color: var(--fui-color-accent, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
   transition:
@@ -291,10 +293,10 @@
   overflow: hidden;
   border-color: var(--fui-border-strong, $fui-border-strong);
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
-  z-index: calc(var(--fui-header-z-index, $fui-header-z-index) + 1);
+  z-index: var(--fui-overlay-layer-anchored, #{$fui-overlay-layer-anchored});
 
-  width: var(--fui-navmenu-viewport-width);
-  height: var(--fui-navmenu-viewport-height);
+  width: var(--fui-navmenu-viewport-width, #{measurements.raw-space(0)});
+  height: var(--fui-navmenu-viewport-height, #{measurements.raw-space(0)});
   transition: opacity var(--fui-transition-fast, $fui-transition-fast);
 
   // Hidden when no item is open
@@ -333,8 +335,6 @@
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-primary, $fui-text-primary);
   flex-shrink: 0;
-  width: var(--fui-navigation-mobile-target, var(--_fui-action-track));
-  height: var(--fui-navigation-mobile-target, var(--_fui-action-track));
 
   &:hover {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -355,37 +355,17 @@
 // ============================================
 
 .drawerBackdrop {
-  position: fixed;
-  inset: 0;
-  background: var(--fui-backdrop, $fui-backdrop);
-  z-index: calc(var(--fui-header-z-index, $fui-header-z-index) + 10);
+  @include overlay.backdrop;
+
   animation: fadeIn var(--fui-transition-normal, $fui-transition-normal);
 }
 
+// The mobile menu is the Drawer surface: same frame, width, layer and chrome.
+// The header stays pinned; ScrollArea in .drawerBody owns vertical scroll.
 .drawer {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: min(320px, 85vw);
-  max-width: 380px;
-  background-color: var(--fui-bg-primary, $fui-bg-primary);
-  z-index: calc(var(--fui-header-z-index, $fui-header-z-index) + 11);
-  display: flex;
-  flex-direction: column;
-  // Keep the header pinned; ScrollArea in .drawerBody owns vertical scroll.
-  overflow: hidden;
-  animation: slideInLeft var(--fui-transition-normal, $fui-transition-normal);
+  @include overlay.side-panel("start");
 
-  @media (min-width: 480px) {
-    width: min(380px, 85vw);
-  }
-}
-
-.drawerRight {
-  left: auto;
-  right: 0;
-  animation: slideInRight var(--fui-transition-normal, $fui-transition-normal);
+  animation: slideInLeft var(--fui-transition-normal, $fui-transition-normal);
 }
 
 .drawerHeader {
@@ -393,7 +373,8 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--fui-space-4, $fui-space-4);
-  border-bottom: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border-bottom: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+    var(--fui-border, $fui-border);
   min-height: var(--fui-appshell-header-height, $fui-appshell-header-height);
 }
 
@@ -408,8 +389,6 @@
   justify-content: center;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
-  width: var(--fui-navigation-mobile-target, var(--_fui-action-track));
-  height: var(--fui-navigation-mobile-target, var(--_fui-action-track));
 
   &:hover {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -425,7 +404,7 @@
   // blocks ScrollArea from receiving a bounded height and scrolling.
   min-height: 0;
   // Match Sidebar.nav: outer gutter + row inset so links aren't flush to the edge.
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-navigation-gutter);
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-navigation-gutter, #{navigation.gutter()});
 }
 
 .drawerNav {
@@ -436,29 +415,15 @@
 .drawerLink {
   @include button-reset;
   @include navigation.row;
+  @include navigation.link-states;
 
   display: flex;
   align-items: center;
-  min-block-size: var(--fui-navigation-mobile-row-track, var(--fui-navigation-row-track));
   width: 100%;
-  color: var(--fui-text-secondary, $fui-text-secondary);
-  text-decoration: none;
-  transition: background-color var(--fui-transition-fast, $fui-transition-fast);
-
-  &:hover {
-    @include popup.highlight-state;
-  }
 }
 
 .drawerLinkActive {
-  color: var(--fui-text-primary, $fui-text-primary);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  background-color: var(--fui-control-selected-bg, $fui-bg-active);
-
-  &:hover {
-    background-color: var(--fui-control-selected-bg, $fui-bg-active);
-    color: var(--fui-text-primary, $fui-text-primary);
-  }
+  @include navigation.link-active;
 }
 
 .drawerSectionLabel {
@@ -478,7 +443,6 @@
 
   display: flex;
   align-items: center;
-  min-block-size: var(--fui-navigation-mobile-row-track, var(--fui-navigation-row-track));
   justify-content: space-between;
   width: 100%;
   color: var(--fui-text-primary, $fui-text-primary);
@@ -519,16 +483,7 @@
 
 @keyframes slideInLeft {
   from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
+    transform: translateX(overlay.side-panel-offscreen("start"));
   }
   to {
     transform: translateX(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)});
 }
 
 // ============================================
@@ -59,12 +60,14 @@
   &:hover:not(:disabled) {
     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

@@ -73,22 +73,22 @@
     {
       "name": "Default",
       "description": "Title, body, and a close control.",
-      "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>"
+      "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": "Enough room to edit a value in place.",
-      "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>"
+      "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": "The arrow ties the panel back to its trigger.",
-      "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>"
+      "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": "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=\"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>"
+      "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",

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;
 }
 
@@ -65,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);
 }
 
@@ -80,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)}))
   );
 }
 
@@ -105,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;
@@ -129,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

@@ -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",
@@ -84,7 +84,7 @@
       "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",
-      "variant=\"neutral\" with role=\"meter\" for a magnitude where full is not success",
+      "tone=\"neutral\" with role=\"meter\" for a magnitude where full is not success",
       "Values outside min and max are clamped before display"
     ],
     "accessibility": [
@@ -101,14 +101,14 @@
       "code": "<Progress value={60} label=\"Uploading…\" showValue />"
     },
     {
-      "name": "Variants",
+      "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} 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</Stack>"
+      "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  variant=\"neutral\"\n  role=\"meter\"\n  label=\"Seats used\"\n  showValue\n/>"
+      "code": "<Progress\n  value={42}\n  tone=\"neutral\"\n  role=\"meter\"\n  label=\"Seats used\"\n  showValue\n/>"
     },
     {
       "name": "Sizes",
@@ -123,7 +123,7 @@
     {
       "name": "Circular",
       "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 variant=\"success\" />\n  <CircularProgress value={null} size=\"md\" />\n</Stack>"
+      "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": [
@@ -142,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);
 }
@@ -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);
 }
@@ -153,14 +158,14 @@
 
 @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;