@helloimjolopez-pathway/pathway-components 0.2.1 → 0.2.2

package/components/button/button.jsx

@@ -398,8 +398,8 @@ export function Button({
   };
 
   // Icon slot wrapper, iconWrap = outer slot size, iconInner = rendered glyph size.
-  // fontVariationSettings overrides the global opsz:24 from preview-head.html, // all button icon sizes (14 to 18px) sit below the minimum opsz axis value (20),
-  // so opsz:20 is the correct optical size for the tightest stroke rendering.
+  // opsz 24, as Figma draws its icons, so the glyph fills the slot in Figma's
+  // proportion (changed 2026-11-03; opsz 20 drew it about 6% small).
   const iconWrapStyle = {
     display:              "inline-flex",
     alignItems:           "center",
@@ -410,7 +410,7 @@ export function Button({
     fontSize:             sz.iconInner,
     color:                iconColor,
     transition:           "color var(--motion-duration-2) var(--motion-easing-standard)",
-    fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20",
+    fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24",
   };
 
   // Outer button element, handles the touch-target zone

package/components/icon/icon.jsx

@@ -34,9 +34,12 @@
  *         SideNav is FILL 1 throughout; the Widget header is FILL 0.
  *   wght  400 everywhere in Pathway.
  *   GRAD  0 everywhere in Pathway.
- *   opsz  matched to the font size, which is what keeps the stroke weight even
- *         across sizes. A 16px icon at opsz 20 is visibly lighter than it
- *         should be, and that defect shipped once in the SideNav rail.
+ *   opsz  24 everywhere in Pathway (changed 2026-11-03). Figma's icons are the
+ *         font's opsz-24 artwork scaled to each frame, so the glyph fills its
+ *         box in the same proportion at every size. Tracking opsz to the frame
+ *         (which the font clamps to 20 below 20px) redrew each glyph about 6%
+ *         smaller inside the same box: a 16 help icon drew 12.5 against
+ *         Figma's 13.33.
  *
  * SIZE IS THE FRAME, NEVER THE VECTOR. Figma nests a wrapper (24), an icon
  * frame (16) and the drawn vector (~12), because the Material grid has about
@@ -58,8 +61,8 @@ export const ICON_SOURCES = {
   webSymbols: "https://github.com/google/material-design-icons/tree/master/symbols/web",
 };
 
-/** Pathway's fixed axis values. Only FILL and opsz ever vary. */
-export const AXES = { wght: 400, GRAD: 0 };
+/** Pathway's fixed axis values. Only FILL ever varies. */
+export const AXES = { wght: 400, GRAD: 0, opsz: 24 };
 
 /**
  * The per-size table from docs/design-system-spec.md §7.2. `wrapper` is the
@@ -109,10 +112,9 @@ export function Icon({
         display: "block",
         flexShrink: 0,
         color,
-        // opsz TRACKS THE FONT SIZE. Pinning it to 20 while the glyph renders
-        // at 16 makes the stroke too light, which is what went wrong in the
-        // collapsed SideNav rail.
-        fontVariationSettings: `'FILL' ${fill}, 'wght' ${AXES.wght}, 'GRAD' ${AXES.GRAD}, 'opsz' ${frame}`,
+        // opsz is fixed at 24, Figma's artwork, so the glyph fills the frame
+        // exactly as it does in Figma. See AXES.
+        fontVariationSettings: `'FILL' ${fill}, 'wght' ${AXES.wght}, 'GRAD' ${AXES.GRAD}, 'opsz' ${AXES.opsz}`,
         ...style,
       }}
       {...rest}

package/components/sidenav/sidenav.jsx

@@ -276,10 +276,9 @@ export function SideNavItem({
                     // parent is centred by its line box, not by its own art, so
                     // it rode high inside the 24px wrap.
                     display: "block",
-                    // opsz MUST match fontSize. It said 20 against a 16px size,
-                    // so the glyph was drawn on a 20px grid and scaled down into
-                    // a 16px box, which shifts the art off centre.
-                    fontVariationSettings: `'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' ${L.iconInner}` }}>
+                    // opsz 24, as Figma draws its icons, so the glyph fills the
+                    // box in Figma's proportion (changed 2026-11-03).
+                    fontVariationSettings: `'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24` }}>
                   {item.icon}
                 </span>
               : React.cloneElement(item.icon, { style: { color: iconColor } })}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloimjolopez-pathway/pathway-components",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Pathway Design System React components",
   "type": "module",
   "sideEffects": false,