@dloizides/ui-forms 1.13.2 → 1.13.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 1.13.3
+
+**Placeholder text was too dark — it read like an already-filled value.**
+
+`useThemedInput` painted the placeholder with the theme's `textSecondary` — a deliberately
+dark, accessible grey (design-tokens UX-11) that also renders readable secondary *copy*. At
+full strength a placeholder (e.g. `follower` in a "Dance role" box) was hard to tell apart
+from entered text. It is now `textSecondary` composited toward the field background at 0.6
+alpha, so a hint reads clearly lighter than the solid entered text (`colors.text`) while
+keeping the theme hue — and it works in dark mode too (it composites toward whatever the
+field background is). The field's visible label still carries the accessible name, so this
+is a usability win, not an a11y regression. Affects every `@dloizides/ui-forms`-driven input
+(`FormField`, `Field`, `ThemedTextInput`, the `ui-tables` `Filters` search box) across all
+seven portals.
+
 ## 1.12.0
 
 **`FormField` gained `labelHidden` — hide the visible label, keep the accessible name.**

package/dist/index.d.mts

@@ -461,7 +461,11 @@ interface UseThemedInputOptions {
 interface ThemedInput {
     /** The themed input style for the current focus/hover state (memoised). Merge AFTER your box style. */
     style: TextStyle;
-    /** A readable mid-grey placeholder colour from the theme. */
+    /**
+     * The placeholder colour: the theme's `textSecondary` composited toward the field
+     * background ({@link PLACEHOLDER_ALPHA}) so a placeholder reads as a faint hint, clearly
+     * lighter than the solid entered text rather than looking like an already-filled value.
+     */
     placeholderTextColor: string;
     isFocused: boolean;
     isHovered: boolean;

package/dist/index.d.ts

@@ -461,7 +461,11 @@ interface UseThemedInputOptions {
 interface ThemedInput {
     /** The themed input style for the current focus/hover state (memoised). Merge AFTER your box style. */
     style: TextStyle;
-    /** A readable mid-grey placeholder colour from the theme. */
+    /**
+     * The placeholder colour: the theme's `textSecondary` composited toward the field
+     * background ({@link PLACEHOLDER_ALPHA}) so a placeholder reads as a faint hint, clearly
+     * lighter than the solid entered text rather than looking like an already-filled value.
+     */
     placeholderTextColor: string;
     isFocused: boolean;
     isHovered: boolean;

package/dist/index.js

@@ -471,6 +471,7 @@ var TRANSITION_TIMING = "ease";
 var FOCUS_RING_WIDTH = 3;
 var FOCUS_RING_ALPHA = 0.16;
 var HOVER_BORDER_ALPHA = 0.22;
+var PLACEHOLDER_ALPHA = 0.6;
 var HEX_RADIX = 16;
 var HEX_SHORT_LENGTH = 4;
 var HEX_FULL_LENGTH = 7;
@@ -552,7 +553,7 @@ function useThemedInput(options = {}) {
   );
   return {
     style,
-    placeholderTextColor: colors.textSecondary,
+    placeholderTextColor: withAlpha(colors.textSecondary, PLACEHOLDER_ALPHA),
     isFocused,
     isHovered,
     focusBind,