From 3a4dcc139a05331b2735bcbf59f7d836f3d71d2d Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Mon, 17 Aug 2026 13:34:19 -0600
Subject: [PATCH 1/2] fix(ui): update Mosaic input focus styles

---
 .changeset/warm-inputs-focus.md               |  2 +
 .../mosaic/components/input/input.styles.ts   | 49 +++++++++++--------
 2 files changed, 30 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/warm-inputs-focus.md

diff --git a/.changeset/warm-inputs-focus.md b/.changeset/warm-inputs-focus.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/warm-inputs-focus.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/mosaic/components/input/input.styles.ts b/packages/ui/src/mosaic/components/input/input.styles.ts
index 0b73eff3283..5769a9bda35 100644
--- a/packages/ui/src/mosaic/components/input/input.styles.ts
+++ b/packages/ui/src/mosaic/components/input/input.styles.ts
@@ -1,45 +1,52 @@
 import * as stylex from '@stylexjs/stylex';
 
-import {
-  colorVars,
-  durationVars,
-  fontFamilyVars,
-  fontWeightVars,
-  radiusVars,
-  space,
-  typeScaleVars,
-} from '../../tokens.stylex';
+import { colorVars, fontFamilyVars, fontWeightVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex';
 
 const disabledBackgroundColor = `color-mix(in oklab, ${colorVars['--cl-color-primary']} 5%, transparent)`;
-const interactionBorderColor = `color-mix(in oklab, ${colorVars['--cl-color-neutral']} 20%, transparent)`;
+const hoverBorderColor = 'light-dark(#bebebe, #525252)';
+const focusShadow = '0 0 0 3px light-dark(rgb(23 23 23 / 8%), rgb(255 255 255 / 8%))';
+const invalidFocusShadow = `0 0 0 3px light-dark(
+  color-mix(in oklab, ${colorVars['--cl-color-negative']} 12%, transparent),
+  color-mix(in oklab, ${colorVars['--cl-color-negative']} 15%, transparent)
+)`;
 
 export const styles = stylex.create({
   base: {
     borderColor: {
       default: colorVars['--cl-color-border'],
-      ':focus-visible': interactionBorderColor,
+      ':focus-visible': hoverBorderColor,
       ':focus-visible:where([aria-invalid="true"])': colorVars['--cl-color-negative'],
       ':where([aria-invalid="true"])': colorVars['--cl-color-negative'],
       '@media (hover: hover)': {
-        ':hover:not([aria-invalid="true"])': interactionBorderColor,
+        ':hover:not([aria-invalid="true"])': hoverBorderColor,
       },
     },
     borderStyle: 'solid',
-    borderWidth: {
-      default: '1px',
-      ':where([aria-invalid="true"])': '2px',
-    },
+    borderWidth: '1px',
     outline: {
       default: 'none',
-      ':focus-visible': `2px solid ${colorVars['--cl-color-primary']}`,
-      ':focus-visible:where([aria-invalid="true"])': 'none',
+      '@media (forced-colors: active)': {
+        default: null,
+        ':focus-visible': '2px solid CanvasText',
+      },
     },
     backgroundColor: colorVars['--cl-color-input'],
+    boxShadow: {
+      default: null,
+      ':focus-visible': focusShadow,
+      ':focus-visible:where([aria-invalid="true"])': invalidFocusShadow,
+    },
     display: 'block',
     fontFamily: fontFamilyVars['--cl-font-family-sans'],
-    outlineOffset: '2px',
-    transitionDuration: durationVars['--cl-duration-base'],
-    transitionProperty: 'color, background-color, border-color',
+    outlineOffset: {
+      default: null,
+      '@media (forced-colors: active)': {
+        default: null,
+        ':focus-visible': '2px',
+      },
+    },
+    transitionDuration: '0.2s',
+    transitionProperty: 'color, background-color, border-color, box-shadow',
     minWidth: 0,
     width: '100%',
     '::file-selector-button': {

From 7edac5862d88d4f0959bb93f6c89e8bdd26ca53d Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Mon, 17 Aug 2026 15:13:02 -0600
Subject: [PATCH 2/2] fix(ui): refine Mosaic input focus transitions

---
 .../mosaic/components/input/input.styles.ts   | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/mosaic/components/input/input.styles.ts b/packages/ui/src/mosaic/components/input/input.styles.ts
index 5769a9bda35..dd4001b40e2 100644
--- a/packages/ui/src/mosaic/components/input/input.styles.ts
+++ b/packages/ui/src/mosaic/components/input/input.styles.ts
@@ -1,6 +1,15 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars, fontFamilyVars, fontWeightVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex';
+import {
+  colorVars,
+  durationVars,
+  easingVars,
+  fontFamilyVars,
+  fontWeightVars,
+  radiusVars,
+  space,
+  typeScaleVars,
+} from '../../tokens.stylex';
 
 const disabledBackgroundColor = `color-mix(in oklab, ${colorVars['--cl-color-primary']} 5%, transparent)`;
 const hoverBorderColor = 'light-dark(#bebebe, #525252)';
@@ -45,8 +54,15 @@ export const styles = stylex.create({
         ':focus-visible': '2px',
       },
     },
-    transitionDuration: '0.2s',
+    transitionDuration: {
+      default: durationVars['--cl-duration-base'],
+      ':focus-visible': durationVars['--cl-duration-fast'],
+    },
     transitionProperty: 'color, background-color, border-color, box-shadow',
+    transitionTimingFunction: {
+      default: 'linear',
+      ':focus-visible': `linear, linear, linear, ${easingVars['--cl-ease-default']}`,
+    },
     minWidth: 0,
     width: '100%',
     '::file-selector-button': {