@dloizides/ui-forms 1.18.6 → 1.18.7

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 
-## 1.18.5
+## 1.18.7
+
+- Focused inputs draw the fleet focus ring (`@dloizides/design-tokens` 1.14 `FOCUS_RING`: 2 px solid outline, 2 px offset, contrast-checked colour; error colour when errored) instead of the 3 px 16% box-shadow halo (FOCUS-RING-1 "One focus ring across the shared kit").
+
+## 1.18.6
 
 **ChipSelector: a short chip (e.g. "All") is at least 44 px wide, not only 44 px tall (KEFI-FIT-1 "kefi-web fit and hit-box fixes").**
 

package/dist/index.js

@@ -610,8 +610,7 @@ var IS_WEB5 = reactNative.Platform.OS === "web";
 var TRANSITION_PROPERTY = "border-color, background-color, box-shadow";
 var TRANSITION_DURATION = "0.14s";
 var TRANSITION_TIMING = "ease";
-var FOCUS_RING_WIDTH = 3;
-var FOCUS_RING_ALPHA = 0.16;
+var NO_RING = { outlineWidth: 0 };
 var HOVER_BORDER_ALPHA = 0.22;
 var PLACEHOLDER_ALPHA = 0.6;
 var HEX_RADIX = 16;
@@ -666,15 +665,14 @@ function useThemedInput(options = {}) {
     const backgroundColor = isFocused ? colors.surface : colors.surfaceElevated;
     const base = { color: colors.text, borderColor, backgroundColor };
     if (!IS_WEB5) return base;
-    const ringColor = hasError ? errorColor : primary;
-    const ring = isFocused ? `0 0 0 ${FOCUS_RING_WIDTH}px ${withAlpha(ringColor, FOCUS_RING_ALPHA)}` : "none";
+    const ringColor = hasError ? errorColor : uiButtons.themeFocusRingColor(theme);
+    const ring = isFocused ? designTokens.focusRingOutline(ringColor) : NO_RING;
     const webStyle = {
       transitionProperty: TRANSITION_PROPERTY,
       // Collapse the eased transition to instant when the user prefers reduced motion.
       transitionDuration: prefersReducedMotion() ? "0s" : TRANSITION_DURATION,
       transitionTimingFunction: TRANSITION_TIMING,
-      boxShadow: ring,
-      outlineStyle: "none"
+      ...ring
     };
     return { ...base, ...webStyle };
   }, [
@@ -686,7 +684,8 @@ function useThemedInput(options = {}) {
     colors.surface,
     colors.surfaceElevated,
     primary,
-    errorColor
+    errorColor,
+    theme
   ]);
   const focusBind = React2.useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
   const hoverBind = React2.useMemo(