@usefragments/ui 1.6.0 → 2.0.0

package/src/components/ToggleGroup/ToggleGroup.contract.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "ToggleGroup",
-  "description": "A group of toggle buttons where only one can be selected at a time. Useful for switching between views, modes, or options.",
-  "category": "forms",
+  "description": "Picks exactly one option from a short row of toggle buttons.",
+  "category": "actions",
   "tags": ["toggle", "group", "fragmented", "control", "tabs", "switch"],
   "status": "stable",
   "sourcePath": "src/components/ToggleGroup/index.tsx",
@@ -13,9 +13,9 @@
     "onChange: function",
     "onValueChange: function",
     "children: node (required)",
-    "variant: default|pills|outline|outlined (default: default)",
+    "variant: soft|ghost|outline (default: soft)",
     "size: sm|md|lg (default: md)",
-    "gap: sm|none|xs (default: xs for pills; none otherwise)",
+    "gap: sm|none|xs (default: xs for ghost; none otherwise)",
     "selectionMode: single (default: single)"
   ],
   "props": {
@@ -46,10 +46,10 @@
     },
     "variant": {
       "type": "enum",
-      "description": "Visual style",
-      "default": "default",
+      "description": "Chrome: soft is the filled rail, ghost the open pill cluster, outline the connected bordered segments",
+      "default": "soft",
       "required": false,
-      "values": ["default", "pills", "outline", "outlined"]
+      "values": ["soft", "ghost", "outline"]
     },
     "size": {
       "type": "enum",
@@ -60,7 +60,7 @@
     },
     "gap": {
       "type": "enum",
-      "description": "Gap between items in the pills variant. Connected variants intentionally ignore gaps.",
+      "description": "Gap between items in the ghost variant. Connected variants intentionally ignore gaps.",
       "required": false,
       "values": ["sm", "none", "xs"]
     },
@@ -75,64 +75,63 @@
   "usage": {
     "when": [
       "Switching between mutually exclusive views or modes",
-      "Selecting one option from a small set (2-5 options)",
-      "Fragmented controls like view switchers",
-      "Filter or sort options"
+      "Choosing one of two to five options",
+      "View switchers and segmented filters"
     ],
     "whenNot": [
-      "Multiple selections allowed (use Checkbox group)",
-      "Many options (use Select or RadioGroup)",
-      "Navigation between pages (use Tabs)",
-      "On/off toggle (use Switch component)"
+      "More than one can be picked — use a Checkbox group",
+      "More than five options — use Select or RadioGroup",
+      "Moving between pages — use Tabs",
+      "A single on/off — use Switch"
     ],
     "guidelines": [
-      "Keep options to 2-5 items for clarity",
-      "Use clear, concise labels",
-      "Consider icons for common actions (grid/list view)",
-      "Use default for an inset tonal rail, pills for an open filter cluster, and outline for connected bordered segments",
-      "Ensure adequate touch targets on mobile"
+      "Two to five items",
+      "Labels short enough to scan in one pass",
+      "Icons work for well-known modes like grid and list",
+      "soft for an inset tonal rail, ghost for an open filter cluster, outline for connected segments",
+      "Keep targets at least 24px on touch"
     ],
     "accessibility": [
-      "Uses role=\"radiogroup\" for single-selection semantics",
-      "Each item has role=\"radio\" with aria-checked",
-      "Keyboard navigable with Tab and arrow keys",
-      "Focus visible on active item"
+      "The group is a radiogroup; each item is a radio with aria-checked",
+      "Arrow keys move between items, Tab enters and leaves the group",
+      "Icon-only items still need an aria-label",
+      "Focus stays visible on the selected item"
     ]
   },
   "examples": [
     {
       "name": "Default",
-      "description": "Basic toggle group",
+      "description": "Inset tonal rail; the selected segment lifts.",
       "code": "<ToggleGroup value={value} onChange={setValue}>\n  <ToggleGroup.Item value=\"left\">Left</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"center\">Center</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"right\">Right</ToggleGroup.Item>\n</ToggleGroup>"
     },
     {
-      "name": "Pills Variant",
-      "description": "Pill-shaped toggle buttons",
-      "code": "<ToggleGroup value={value} onChange={setValue} variant=\"pills\">\n  <ToggleGroup.Item value=\"all\">All</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"active\">Active</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"completed\">Completed</ToggleGroup.Item>\n</ToggleGroup>"
+      "name": "Ghost",
+      "description": "Detached rounded buttons for open filter clusters.",
+      "code": "<ToggleGroup value={value} onChange={setValue} variant=\"ghost\">\n  <ToggleGroup.Item value=\"all\">All</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"active\">Active</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"completed\">Completed</ToggleGroup.Item>\n</ToggleGroup>"
     },
     {
-      "name": "Outline Variant",
-      "description": "Outlined toggle buttons",
-      "code": "<ToggleGroup value={value} onChange={setValue} variant=\"outlined\">\n  <ToggleGroup.Item value=\"day\">Day</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"week\">Week</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"month\">Month</ToggleGroup.Item>\n</ToggleGroup>"
+      "name": "Outline",
+      "description": "Bordered segments sharing one continuous edge.",
+      "code": "<ToggleGroup value={value} onChange={setValue} variant=\"outline\">\n  <ToggleGroup.Item value=\"day\">Day</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"week\">Week</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"month\">Month</ToggleGroup.Item>\n</ToggleGroup>"
     },
     {
       "name": "Uncontrolled",
-      "description": "Use defaultValue for simple single-select state",
+      "description": "defaultValue when nothing outside needs the selection.",
       "code": "<ToggleGroup defaultValue=\"list\">\n  <ToggleGroup.Item value=\"grid\">Grid</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"list\">List</ToggleGroup.Item>\n</ToggleGroup>"
     },
     {
       "name": "Sizes",
-      "description": "Different size variants",
-      "code": "<ToggleGroup value={value} onChange={setValue} size=\"sm\">\n  <ToggleGroup.Item value=\"a\">Small</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"b\">Size</ToggleGroup.Item>\n</ToggleGroup>\n<ToggleGroup value={value} onChange={setValue} size=\"md\">\n  <ToggleGroup.Item value=\"a\">Medium</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"b\">Size</ToggleGroup.Item>\n</ToggleGroup>"
+      "description": "sm for toolbars, lg where the rail anchors a page.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"column\" gap=\"md\" align=\"start\">\n  <ToggleGroup defaultValue=\"a\" size=\"sm\">\n    <ToggleGroup.Item value=\"a\">Small</ToggleGroup.Item>\n    <ToggleGroup.Item value=\"b\">Rail</ToggleGroup.Item>\n  </ToggleGroup>\n  <ToggleGroup defaultValue=\"a\" size=\"md\">\n    <ToggleGroup.Item value=\"a\">Medium</ToggleGroup.Item>\n    <ToggleGroup.Item value=\"b\">Rail</ToggleGroup.Item>\n  </ToggleGroup>\n  <ToggleGroup defaultValue=\"a\" size=\"lg\">\n    <ToggleGroup.Item value=\"a\">Large</ToggleGroup.Item>\n    <ToggleGroup.Item value=\"b\">Rail</ToggleGroup.Item>\n  </ToggleGroup>\n</Stack>"
     },
     {
       "name": "View Switcher",
-      "description": "Common pattern for switching between views",
-      "code": "<ToggleGroup value={view} onChange={setView} size=\"sm\">\n  <ToggleGroup.Item value=\"grid\"><GridIcon /></ToggleGroup.Item>\n  <ToggleGroup.Item value=\"list\"><ListIcon /></ToggleGroup.Item>\n</ToggleGroup>"
+      "description": "Icon-only modes, each named for screen readers.",
+      "code": "import { SquaresFour as GridIcon, ListBullets as ListIcon } from '@phosphor-icons/react';\n\n<ToggleGroup value={view} onChange={setView} size=\"sm\">\n  <ToggleGroup.Item value=\"grid\" aria-label=\"Grid view\">\n    <GridIcon aria-hidden />\n  </ToggleGroup.Item>\n  <ToggleGroup.Item value=\"list\" aria-label=\"List view\">\n    <ListIcon aria-hidden />\n  </ToggleGroup.Item>\n</ToggleGroup>"
     },
     {
-      "name": "With Disabled Item",
-      "description": "Toggle group with a disabled option",
+      "name": "Disabled Item",
+      "description": "One option locked out; the rest stay reachable.",
       "code": "<ToggleGroup value={value} onChange={setValue}>\n  <ToggleGroup.Item value=\"basic\">Basic</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"pro\">Pro</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"enterprise\" disabled>Enterprise</ToggleGroup.Item>\n</ToggleGroup>"
     }
   ],
@@ -159,9 +158,9 @@
       "defaultValue?: string - initial selected value (uncontrolled)",
       "onChange: (value: string) => void - change handler (or onValueChange)",
       "children: ToggleGroup.Item[] - toggle items",
-      "variant: default|pills|outline|outlined - visual style (outlined aliases outline)",
+      "variant: soft|ghost|outline - chrome (soft rail, ghost cluster, outline segments)",
       "size: sm|md|lg - size variant",
-      "gap: none|xs|sm - pills spacing (xs by default; connected variants remain gapless)",
+      "gap: none|xs|sm - ghost spacing (xs by default; connected variants remain gapless)",
       "selectionMode: single (default: single)"
     ],
     "a11yRules": ["A11Y_GROUP_ROLE", "A11Y_KEYBOARD_ACCESSIBLE"]

package/src/components/ToggleGroup/ToggleGroup.module.scss

@@ -1,5 +1,6 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/layout";
 @use "../../recipes/segmented";
 
@@ -34,7 +35,6 @@
   position: relative;
   border: 0;
   white-space: nowrap;
-  user-select: none;
   transition:
     background-color var(--fui-transition-fast, $fui-transition-fast),
     border-color var(--fui-transition-fast, $fui-transition-fast),
@@ -50,8 +50,7 @@
   }
 
   &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+    @include disabled-state;
   }
 }
 
@@ -96,11 +95,11 @@
 }
 
 // ============================================
-// Default variant: inset tonal selection
+// Soft variant: filled rail with an inset tonal selection
 // ============================================
 
-.default {
-  gap: 0;
+.soft {
+  gap: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   padding: var(--fui-raw-space-2, 2px);
   background-color: var(--fui-form-group-bg, var(--fui-bg-secondary, #{$fui-bg-secondary}));
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
@@ -109,30 +108,43 @@
 
   .item {
     min-block-size: calc(
-      var(--_fui-segmented-track) - var(--fui-raw-space-2, 2px) - var(--fui-raw-space-2, 2px)
+      var(--_fui-segmented-track, #{segmented.track("md")}) - var(--fui-raw-space-2, 2px) -
+        var(--fui-raw-space-2, 2px)
     );
     background-color: transparent;
-    border-radius: var(--fui-radius-md, $fui-radius-md);
+    // Connected segments: only outer corners are rounded (the item base carries
+    // no radius). Per-item full radius left a rail-colored notch between items
+    // that reads as a gap.
+
+    &:first-child {
+      border-start-start-radius: var(--fui-radius-md, $fui-radius-md);
+      border-end-start-radius: var(--fui-radius-md, $fui-radius-md);
+    }
+
+    &:last-child {
+      border-start-end-radius: var(--fui-radius-md, $fui-radius-md);
+      border-end-end-radius: var(--fui-radius-md, $fui-radius-md);
+    }
+
+    &:only-child {
+      border-radius: var(--fui-radius-md, $fui-radius-md);
+    }
 
     &:hover:not(:disabled):not(.selected) {
       background-color: var(--fui-bg-hover, $fui-bg-hover);
     }
 
     &.selected {
-      background-color: var(--fui-toggle-group-selected-bg, var(--fui-selection-bg));
-      box-shadow:
-        inset 0 0 0 var(--fui-stroke-hairline, 1px)
-          var(--fui-toggle-group-selected-border, transparent),
-        var(--fui-toggle-group-selected-shadow, none);
+      @include segmented-selection;
     }
   }
 }
 
 // ============================================
-// Pills variant: open cluster with soft selected pills
+// Ghost variant: open cluster of pills, no rail
 // ============================================
 
-.pills {
+.ghost {
   .item {
     background-color: transparent;
     border-radius: var(--fui-radius-full, $fui-radius-full);
@@ -143,11 +155,7 @@
     }
 
     &.selected {
-      background-color: var(--fui-toggle-group-selected-bg, var(--fui-selection-bg));
-      box-shadow:
-        inset 0 0 0 var(--fui-stroke-hairline, 1px)
-          var(--fui-toggle-group-selected-border, transparent),
-        var(--fui-toggle-group-selected-shadow, none);
+      @include segmented-selection;
     }
   }
 }
@@ -157,7 +165,7 @@
 // ============================================
 
 .outline {
-  gap: 0;
+  gap: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   background-color: transparent;
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
   box-shadow: inset 0 0 0 var(--fui-stroke-hairline, 1px)
@@ -165,7 +173,6 @@
 
   .item {
     background-color: transparent;
-    border-radius: 0;
 
     &:first-child {
       border-start-start-radius: var(--fui-radius-lg, $fui-radius-lg);
@@ -197,11 +204,7 @@
     }
 
     &.selected {
-      background-color: var(--fui-toggle-group-selected-bg, var(--fui-selection-bg));
-      box-shadow:
-        inset 0 0 0 var(--fui-stroke-hairline, 1px)
-          var(--fui-toggle-group-selected-border, transparent),
-        var(--fui-toggle-group-selected-shadow, none);
+      @include segmented-selection;
     }
   }
 }

package/src/components/ToggleGroup/index.tsx

@@ -23,15 +23,16 @@ export interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   onValueChange?: (value: string) => void;
   /** Toggle items */
   children: React.ReactNode;
-  /** Visual variant.
-   * @default "default"
+  /** Chrome. `soft` is the filled rail, `ghost` the open pill cluster,
+   * `outline` the connected bordered segments.
+   * @default "soft"
    * @see https://usefragments.com/components/togglegroup#variants */
-  variant?: "default" | "pills" | "outline" | "outlined";
+  variant?: "soft" | "ghost" | "outline";
   /** Size.
    * @default "md" */
   size?: "sm" | "md" | "lg";
-  /** Gap between items in the pills variant. Defaults to `xs` for pills and
-   * is intentionally removed from connected variants. */
+  /** Gap between items in the ghost variant. Defaults to `xs` for ghost and
+   * is intentionally removed from the connected variants. */
   gap?: "none" | "xs" | "sm";
   /** Selection mode for this control. Currently only single-select is supported.
    * @default "single" */
@@ -57,7 +58,7 @@ export interface ToggleGroupItemProps extends Omit<
 interface ToggleGroupContextValue {
   value: string;
   onChange: (value: string) => void;
-  variant: "default" | "pills" | "outline";
+  variant: "soft" | "ghost" | "outline";
   size: "sm" | "md" | "lg";
   hasFocusableSelection: boolean;
   firstEnabledValue: string | null;
@@ -83,7 +84,7 @@ function ToggleGroupRoot({
   onChange,
   onValueChange,
   children,
-  variant = "default",
+  variant = "soft",
   size: sizeProp,
   gap,
   selectionMode = "single",
@@ -91,8 +92,7 @@ function ToggleGroupRoot({
   ...htmlProps
 }: ToggleGroupProps) {
   const size = useResolvedControlSize(sizeProp);
-  const normalizedVariant = variant === "outlined" ? "outline" : variant;
-  const resolvedGap = normalizedVariant === "pills" ? (gap ?? "xs") : "none";
+  const resolvedGap = variant === "ghost" ? (gap ?? "xs") : "none";
   const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
   const isControlled = value !== undefined;
   const currentValue = isControlled ? (value ?? "") : internalValue;
@@ -107,7 +107,7 @@ function ToggleGroupRoot({
   );
   const classes = [
     styles.group,
-    styles[normalizedVariant],
+    styles[variant],
     styles[`size-${size}`],
     resolvedGap !== "none" && styles[`gap-${resolvedGap}`],
     className,
@@ -127,7 +127,7 @@ function ToggleGroupRoot({
   const contextValue: ToggleGroupContextValue = {
     value: currentValue,
     onChange: emitChange,
-    variant: normalizedVariant,
+    variant,
     size,
     hasFocusableSelection,
     firstEnabledValue,

package/src/components/Tooltip/Tooltip.contract.json

@@ -1,15 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Tooltip",
-  "description": "Contextual help text that appears on hover or focus. Perfect for explaining icons, truncated text, or providing additional context.",
-  "category": "feedback",
-  "tags": [
-    "tooltip",
-    "hint",
-    "help",
-    "hover",
-    "contextual"
-  ],
+  "description": "Shows a one-line hint when a control is hovered or focused.",
+  "category": "overlays",
+  "tags": ["tooltip", "hint", "help", "hover", "contextual"],
   "status": "stable",
   "sourcePath": "src/components/Tooltip/index.tsx",
   "exportName": "Tooltip",
@@ -45,23 +39,14 @@
       "description": "Which side to show the tooltip",
       "default": "top",
       "required": false,
-      "values": [
-        "top",
-        "bottom",
-        "left",
-        "right"
-      ]
+      "values": ["top", "bottom", "left", "right"]
     },
     "align": {
       "type": "enum",
       "description": "Alignment along the side",
       "default": "center",
       "required": false,
-      "values": [
-        "start",
-        "center",
-        "end"
-      ]
+      "values": ["start", "center", "end"]
     },
     "sideOffset": {
       "type": "number",
@@ -122,55 +107,55 @@
   },
   "usage": {
     "when": [
-      "Explaining icon-only buttons",
-      "Showing full text for truncated content",
-      "Providing keyboard shortcuts",
-      "Brief contextual help that fits in one line"
+      "Naming icon-only buttons",
+      "Showing text that had to be truncated",
+      "Surfacing a keyboard shortcut",
+      "One line of help, no more"
     ],
     "whenNot": [
-      "Long-form help content (use Popover)",
-      "Critical information users must see (use Alert)",
-      "Interactive content (use Popover or Menu)",
-      "Mobile-primary interfaces (tooltips require hover)"
+      "Help longer than a line — use Popover",
+      "Anything the user must not miss — use Alert",
+      "Content they need to click — use Popover or Menu",
+      "Touch-first screens, where there is no hover"
     ],
     "guidelines": [
-      "Keep tooltip text concise (under 80 characters)",
-      "Use sentence case, no period for single sentences",
-      "Avoid duplicating visible label text",
-      "Consider mobile users who cannot hover",
-      "Use contentProps for tooltip popup attributes/styling; top-level HTML attrs are applied to the popup for backward compatibility"
+      "Under 80 characters",
+      "Sentence case, no trailing period",
+      "Never just repeat the visible label",
+      "Always leave a non-hover path to the same information",
+      "contentProps sets attributes and styling on the popup"
     ],
     "accessibility": [
-      "Accessible via focus as well as hover",
-      "Uses role=\"tooltip\" with proper aria association",
-      "Delay prevents tooltips from appearing during navigation"
+      "Opens on keyboard focus, not only hover",
+      "The open delay stops tooltips flashing while the pointer crosses the screen",
+      "Do not put anything critical here — treat it as a hint, not a label"
     ]
   },
   "examples": [
     {
       "name": "Default",
-      "description": "Basic tooltip on hover",
+      "description": "Appears after a short delay above the trigger.",
       "code": "<Tooltip content=\"Save your changes\">\n  <Button>Save</Button>\n</Tooltip>"
     },
     {
       "name": "Positions",
-      "description": "Tooltips on different sides",
-      "code": "<div style={{ display: 'flex', gap: '16px', padding: '40px' }}>\n  <Tooltip content=\"Top tooltip\" side=\"top\">\n    <Button variant=\"secondary\">Top</Button>\n  </Tooltip>\n  <Tooltip content=\"Bottom tooltip\" side=\"bottom\">\n    <Button variant=\"secondary\">Bottom</Button>\n  </Tooltip>\n  <Tooltip content=\"Left tooltip\" side=\"left\">\n    <Button variant=\"secondary\">Left</Button>\n  </Tooltip>\n  <Tooltip content=\"Right tooltip\" side=\"right\">\n    <Button variant=\"secondary\">Right</Button>\n  </Tooltip>\n</div>"
+      "description": "Four sides; it flips if the edge is too close.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"md\" align=\"center\" wrap>\n  <Tooltip content=\"Top tooltip\" side=\"top\">\n    <Button variant=\"soft\">Top</Button>\n  </Tooltip>\n  <Tooltip content=\"Bottom tooltip\" side=\"bottom\">\n    <Button variant=\"soft\">Bottom</Button>\n  </Tooltip>\n  <Tooltip content=\"Left tooltip\" side=\"left\">\n    <Button variant=\"soft\">Left</Button>\n  </Tooltip>\n  <Tooltip content=\"Right tooltip\" side=\"right\">\n    <Button variant=\"soft\">Right</Button>\n  </Tooltip>\n</Stack>"
     },
     {
       "name": "With Shortcut",
-      "description": "Tooltip showing keyboard shortcut",
+      "description": "Spells out the key combination the icon implies.",
       "code": "<Tooltip content=\"Undo (Ctrl+Z)\">\n  <Button variant=\"ghost\">Undo</Button>\n</Tooltip>"
     },
     {
       "name": "No Arrow",
-      "description": "Tooltip without arrow",
-      "code": "<Tooltip content=\"Clean tooltip\" arrow={false}>\n  <Button variant=\"secondary\">Hover me</Button>\n</Tooltip>"
+      "description": "Drops the pointer for tooltips packed into dense chrome.",
+      "code": "<Tooltip content=\"No arrow on this one\" arrow={false}>\n  <Button variant=\"soft\">Arrowless</Button>\n</Tooltip>"
     },
     {
       "name": "With Content Props",
-      "description": "Pass popup attributes/styling using contentProps",
-      "code": "<Tooltip content=\"Custom popup attrs\" contentProps={{ id: 'custom-tooltip-popup' }}>\n  <Button variant=\"secondary\">Hover me</Button>\n</Tooltip>"
+      "description": "contentProps lands on the popup element itself.",
+      "code": "<Tooltip\n  content=\"Styled through contentProps\"\n  contentProps={{ id: 'custom-tooltip-popup' }}\n>\n  <Button variant=\"soft\">Custom popup</Button>\n</Tooltip>"
     }
   ],
   "relations": [
@@ -193,17 +178,11 @@
       "arrow: boolean - show arrow (default: true)",
       "contentProps: HTMLAttributes<HTMLDivElement> - popup element props"
     ],
-    "a11yRules": [
-      "A11Y_TOOLTIP_FOCUS",
-      "A11Y_TOOLTIP_ROLE"
-    ]
+    "a11yRules": ["A11Y_TOOLTIP_FOCUS", "A11Y_TOOLTIP_ROLE"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Root",
-      "Provider"
-    ]
+    "subComponents": ["Root", "Provider"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Tooltip/Tooltip.module.scss

@@ -1,18 +1,15 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/overlay" as overlay;
 
 .positioner {
-  z-index: var(--fui-overlay-layer-tooltip, 60);
+  z-index: var(--fui-overlay-layer-tooltip, #{$fui-overlay-layer-tooltip});
   pointer-events: none;
 }
 
 .popup {
   @include overlay.tooltip;
 
-  color: var(--fui-text-inverse, $fui-text-inverse);
-  background-color: var(--fui-bg-inverse, $fui-bg-inverse);
-  border-radius: var(--fui-radius-md, $fui-radius-md);
-  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
   overflow-wrap: break-word;
   opacity: 0;
   transform: scale(0.95);
@@ -41,22 +38,31 @@
   @include overlay.arrow-box;
 
   background-color: var(--fui-bg-inverse, $fui-bg-inverse);
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-bg-inverse, $fui-bg-inverse);
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+    var(--fui-bg-inverse, $fui-bg-inverse);
 
   &[data-side="top"] {
-    bottom: calc(var(--fui-overlay-arrow-size, var(--fui-raw-space-10, 10px)) / -2);
+    bottom: calc(
+      var(--fui-overlay-arrow-size, var(--fui-raw-space-10, #{measurements.raw-space(10)})) / -2
+    );
   }
 
   &[data-side="bottom"] {
-    top: calc(var(--fui-overlay-arrow-size, var(--fui-raw-space-10, 10px)) / -2);
+    top: calc(
+      var(--fui-overlay-arrow-size, var(--fui-raw-space-10, #{measurements.raw-space(10)})) / -2
+    );
   }
 
   &[data-side="left"] {
-    right: calc(var(--fui-overlay-arrow-size, var(--fui-raw-space-10, 10px)) / -2);
+    right: calc(
+      var(--fui-overlay-arrow-size, var(--fui-raw-space-10, #{measurements.raw-space(10)})) / -2
+    );
   }
 
   &[data-side="right"] {
-    left: calc(var(--fui-overlay-arrow-size, var(--fui-raw-space-10, 10px)) / -2);
+    left: calc(
+      var(--fui-overlay-arrow-size, var(--fui-raw-space-10, #{measurements.raw-space(10)})) / -2
+    );
   }
 }