[6.x] Updates styles to fix focus style bugs caused by overflow clipping

[gcamacho079]

Description

Also updates exported style names for clarity.

Related issues

[Copilot]

Pull request overview

This pull request refactors form-control styling to use configurable focus outlines and shared control/wrapper styles.

Changes:

• Adds configurable focus-outline tokens.
• Separates shared control, wrapper, and combobox styling.
• Updates input, select, textarea, switch, password, color, and combobox components.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Reviewed change	Final review comment
packages/craftcms-ui/src/styles/shared/tokens.css	Adds focus-outline style tokens.	—
packages/craftcms-ui/src/styles/shared/base.css	Applies configurable focus outlines globally.	—
packages/craftcms-ui/src/styles/form.styles.ts	Splits shared control and wrapper styling.	Critical, 2 votes: Renaming the public baseInputStyles export breaks consumers. Preserve a compatibility export or defer the rename to a breaking release.
packages/craftcms-ui/src/components/textarea/textarea.styles.ts	Applies shared control styling.	Moderate, 2 votes: Removing native resizing prevents users from enlarging textareas. Preserve vertical resizing or provide an explicit opt-in.
packages/craftcms-ui/src/components/switch-button/switch-button.ts	Reuses shared styling for switch tracks.	—
packages/craftcms-ui/src/components/select/select.styles.ts	Uses shared combobox and wrapper styles.	—
packages/craftcms-ui/src/components/select-rich/select-rich.styles.ts	Uses shared wrapper styling.	—
packages/craftcms-ui/src/components/select-rich/select-invoker.styles.ts	Styles the select invoker as a form control.	—
packages/craftcms-ui/src/components/input/input.styles.ts	Applies shared input control styling.	—
packages/craftcms-ui/src/components/input-password/input-password.ts	Updates password-input control styling.	—
packages/craftcms-ui/src/components/input-color/input-color.styles.ts	Updates color-input focus and control styling.	—
packages/craftcms-ui/src/components/combobox/combobox.styles.ts	Uses shared combobox and wrapper styles.	—

Suppressed comments (4)

packages/craftcms-ui/src/styles/form.styles.ts:26

• These values are named as logical corners, but the four-value border-radius shorthand is physical (top-left, top-right, bottom-right, bottom-left). In an .input-group.rtl, the zeroed prefix/suffix corners therefore land on the wrong side, so the control and its focus outline have the wrong shape. Use logical border-*-radius longhands here.

  border-radius: var(--_input-start-start-radius) var(--_input-start-end-radius) var(--_input-end-end-radius) var(--_input-end-start-radius);

packages/craftcms-ui/src/styles/form.styles.ts:63

• none is not a valid value for min-height, so this declaration is ignored. Since baseComboboxStyles includes baseFormControlStyles immediately before it, the base calculated minimum height remains in effect instead of being cleared, which defeats the intended sizing override for selects and comboboxes. Use a valid reset such as min-height: 0 if no minimum is intended.

  min-height: none;

packages/craftcms-ui/src/styles/form.styles.ts:121

• inputStyles is still used by CraftInputFile, but after this replacement its .input-group__container receives only layout rules. input-file.ts does not apply baseFormControlStyles, and input-file.styles.ts adds no replacement border, fill, or control height, so file-upload controls lose the form-control chrome previously supplied by baseInputStyles. Keep the chrome for this component or apply the control mixin to its actual file input.

    ${baseInputWrapperStyles}

packages/craftcms-ui/src/styles/form.styles.ts:128

• Moving the fill from the wrapper to the slotted control leaves these newly bordered prefix/suffix cells transparent. They no longer inherit --c-form-control-fill, so themes where the form surface differs from the page surface will show a mismatched prefix or suffix. Give these cells the same input fill token.

  .input-group__prefix,
  .input-group__suffix {
    padding-inline: var(--c-input-spacing-inline);
    display: grid;
    place-items: center;

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[github-actions]

📚 Storybook previews

@craftcms/ui — open Storybook

Changed components:

• Controls/Combobox
• Controls/Input
• Controls/Input Color
• Controls/Input Password
• Controls/Select
• Controls/Select Rich
• Controls/Textarea

resources/js — open Storybook

No changed components detected in this Storybook.

[brianjhanson]

Looks good to me as long as you've addressed the comment from Copilot about renaming that export.

[brianjhanson]

Do you think it's worth putting this shadow into a variable? Or swapping this out for one of our shadow tokens?

[gcamacho079]

I ended up creating a token for the color/usage (--c-color-border-translucent) as this one is inset and mixes with the selected color, so none of the pre-existing box shadows would work. I also didn't see any other instances in the codebase where we might need the entire box shadow as a token.