Summary

Updated the file input error border to use the error color token, so projects that customize error and secondary colors separately receive the expected themed error styling.

Breaking change

This is not a breaking change.

Related issue

Closes #5253

Related pull requests

None.

Preview link

Preview link: N/A

Problem statement

The file input error state used secondary-dark for the .usa-form-group--error .usa-file-input__target border. Since secondary-dark and error-dark can be customized independently, projects with distinct secondary and error palettes could see file input error borders inherit the wrong semantic color.

Solution

Changed the file input error border token from secondary-dark to error-dark, matching the purpose of the error state and the token pattern used by other USWDS form components.

Major changes

• Updated packages/usa-file-input/src/styles/_usa-file-input.scss to use color("error-dark") for the file input error border.

Testing and review

• Ran npx prettier --check packages/usa-file-input/src/styles/_usa-file-input.scss
• Ran npx stylelint packages/usa-file-input/src/styles/_usa-file-input.scss
• Ran npx gulp compileSass
• Ran npm run lint:sass
• Ran git diff --check
• Compiled a custom Sass snippet with different error-dark and secondary-dark theme colors and confirmed the error border follows error-dark