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..dd4001b40e2 100644 --- a/packages/ui/src/mosaic/components/input/input.styles.ts +++ b/packages/ui/src/mosaic/components/input/input.styles.ts @@ -3,6 +3,7 @@ import * as stylex from '@stylexjs/stylex'; import { colorVars, durationVars, + easingVars, fontFamilyVars, fontWeightVars, radiusVars, @@ -11,35 +12,57 @@ import { } 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: { + 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': {