fix(ui): match text field active borders to design

Use the dedicated field editing color for Input and SearchField so native
focus-visible heuristics do not replace the light 20% border with dark gray.
Remove Design Lab's additional focus shadow and keep the existing 1px border
and all control geometry unchanged.

Preserve dark and high-contrast focus colors and inherit explicit legacy
Appearance focus overrides unless an editing color is supplied. Keep the
stronger generic focus contract available to its other control consumers.

Update theme projections and regression checks. Validation: design-system:check,
check:web, and 21 focused product tests.

Author: kev1n77

design-system/apps/design-lab/src/styles.css

@@ -1096,11 +1096,6 @@ body,
   outline-offset: var(--openbitfun-focus-offset);
 }
 
-input.lab-force-focus {
-  border-color: var(--openbitfun-color-field-border-focus) !important;
-  box-shadow: 0 0 0 var(--openbitfun-focus-width) var(--openbitfun-color-focus-ring) !important;
-}
-
 [data-openbitfun-component="input"].lab-force-hover,
 [data-openbitfun-component="search-field"].lab-force-hover [data-openbitfun-component="input"] {
   border-color: var(--openbitfun-color-field-border-hover);
@@ -1109,8 +1104,8 @@ input.lab-force-focus {
 
 [data-openbitfun-component="input"].lab-force-focus,
 [data-openbitfun-component="search-field"].lab-force-focus [data-openbitfun-component="input"] {
-  border-color: var(--openbitfun-color-field-border-focus);
-  box-shadow: 0 0 0 var(--openbitfun-focus-width) var(--openbitfun-color-focus-ring);
+  border-color: var(--openbitfun-color-field-border-active);
+  box-shadow: none;
 }
 
 .component-code-panel {

design-system/apps/design-lab/vite/component-detail-contract.test.mjs

@@ -429,6 +429,14 @@ test("Input, KeyHint, and SearchField previews expose composable slot and state
   assert.match(source, /shortcut=\{<KeyHint icon=\{<Icon name="command-mac" \/>\}>K<\/KeyHint>\}/);
   assert.match(source, /onClear=\{\(\) => setValue\(""\)\}/);
   assert.match(source, /readOnly=\{state === "read-only"\}/);
+
+  const styles = await readFile(stylesSource, "utf8");
+  const fieldFocus = styles.match(/\[data-openbitfun-component="input"\]\.lab-force-focus,[^{]+\{([^}]+)\}/)?.[1];
+  assert.ok(fieldFocus, "Input and SearchField must share their preview focus treatment");
+  assert.match(fieldFocus, /border-color: var\(--openbitfun-color-field-border-active\)/);
+  assert.match(fieldFocus, /box-shadow: none/);
+  assert.doesNotMatch(fieldFocus, /border-width:|outline:|--openbitfun-focus-width/);
+  assert.doesNotMatch(styles, /input\.lab-force-focus\s*\{/);
 });
 
 test("ScrollArea preview exposes direction and native scrollbar visibility contracts", async () => {

design-system/packages/theme-openbitfun/README.md

@@ -29,15 +29,22 @@ The same data is available as `@openbitfun/theme-openbitfun/reference-colors.jso
 ## Surface and state roles
 
 `color.field.*` owns shared field surfaces and state borders. Light uses neutral
-8% borders, with 20% hover and ordinary focus-within borders. Keyboard-visible
-focus retains the existing 3:1 contrast border in every mode; a browser may also
-show this stronger indicator when focusing an editable input with a pointer.
+8% borders, with 20% hover and active Input/SearchField borders. The dedicated
+`color.field.borderActive` owns the editing border because Input's design differs
+from the stronger focus treatment used by other controls. These text
+fields use one unchanged border for both pointer and keyboard focus; native
+`:focus-visible` must not substitute the stronger generic focus palette or add
+a second ring. Dark and high-contrast modes retain their own focus color, and forced
+colors use Highlight. `color.field.borderFocus` retains its 3:1 contract for
+other controls that consume that stronger focus treatment.
 `color.field.placeholder` separates
 40% empty hints and decorative adornments from general secondary prose; dark
 and high-contrast modes retain their readable muted content colors. The default
 light Web UI consumes these published values in root and chrome scopes. Named
 presets keep their own palette, and imported packages that only supply
 `color.content.muted` retain that field hint color unless explicitly overridden.
+Old packages that supply `color.field.borderFocus` retain that editing border
+unless they explicitly provide `color.field.borderActive`.
 
 `component.button.*` owns Button's state palette. Its light fill stays at black
 8% while the shared neutral actions retain their 5/8/10% feedback; its primary

design-system/packages/theme-openbitfun/src/dark.tokens.json

@@ -175,6 +175,7 @@
       }
     },
     "field": {
+      "borderActive": { "$type": "color", "$value": "{color.field.borderFocus}" },
       "placeholder": { "$type": "color", "$value": "{color.content.muted}" },
       "background": { "$type": "color", "$value": "{ref.color.neutral.900}" },
       "backgroundHover": { "$type": "color", "$value": "rgba(255, 255, 255, 0.06)" },

design-system/packages/theme-openbitfun/src/high-contrast-dark.tokens.json

@@ -51,6 +51,7 @@
       }
     },
     "field": {
+      "borderActive": { "$type": "color", "$value": "{color.field.borderFocus}" },
       "placeholder": { "$type": "color", "$value": "{color.content.muted}" },
       "border": { "$type": "color", "$value": "{ref.color.gray.250}" },
       "borderHover": { "$type": "color", "$value": "{ref.color.gray.0}" },

design-system/packages/theme-openbitfun/src/high-contrast-light.tokens.json

@@ -51,6 +51,7 @@
       }
     },
     "field": {
+      "borderActive": { "$type": "color", "$value": "{color.field.borderFocus}" },
       "placeholder": { "$type": "color", "$value": "{color.content.muted}" },
       "border": { "$type": "color", "$value": "{ref.color.gray.650}" },
       "borderHover": { "$type": "color", "$value": "{ref.color.gray.1000}" },

design-system/packages/theme-openbitfun/src/light.tokens.json

@@ -175,6 +175,7 @@
       }
     },
     "field": {
+      "borderActive": { "$description": "Input and SearchField editing border, distinct from the stronger generic focus indicator used by other controls.", "$type": "color", "$value": "{color.field.borderHover}" },
       "placeholder": { "$description": "Empty field hints and decorative adornments; distinct from general secondary prose.", "$type": "color", "$value": "rgba(0, 0, 0, 0.40)" },
       "background": { "$type": "color", "$value": "{ref.color.neutral.0}" },
       "backgroundHover": { "$type": "color", "$value": "{color.field.background}" },

design-system/packages/ui/src/components/Input/Input.meta.ts

@@ -28,7 +28,7 @@ export const inputMeta = {
     "color.field.backgroundHover",
     "color.field.border",
     "color.field.borderHover",
-    "color.field.borderFocus",
+    "color.field.borderActive",
     "color.accent.default",
     "color.status.danger.border",
     "control.height.sm",

design-system/packages/ui/src/components/Input/Input.module.css

@@ -29,12 +29,7 @@
   }
 
   .field:focus-within {
-    border-color: var(--openbitfun-color-field-border-hover);
-    box-shadow: none;
-  }
-
-  .field:has(:focus-visible) {
-    border-color: var(--openbitfun-color-field-border-focus);
+    border-color: var(--openbitfun-color-field-border-active);
     box-shadow: none;
   }
 
@@ -124,8 +119,7 @@
       border-color: ButtonText;
     }
 
-    .field:focus-within,
-    .field:has(:focus-visible) {
+    .field:focus-within {
       border-color: Highlight;
     }
   }

design-system/packages/ui/src/components/SearchField/SearchField.meta.ts

@@ -36,6 +36,7 @@ export const searchFieldMeta = {
     "color.field.backgroundHover",
     "color.field.border",
     "color.field.borderHover",
+    "color.field.borderActive",
     "color.field.borderFocus",
     "color.status.danger.border",
     "control.height.sm",