Skip to content

Making Accessibility Improvements & Adding an Inverse Form Theme
Compare
Choose a tag to compare
@hopearmstrong hopearmstrong released this 15 May 21:41
v0.9.1
a8bed7d
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

Colors

  • Added blue-light, blue-medium, and blue-dark to the brand and text color palettes.
  • Added error, warning, and success colors to the UI color palette. It's currently used in the form validation messages, and will be extended elsewhere later.
  • Aforementioned colors meet AA accessibility standards for white text on a colored background and colored text on a white background.

Forms

  • Added .form-inverse, an inverted form theme which can be used on dark backgrounds.
  • Added variable width form feedback message that appears for radio, select, and upload inputs on forms using the inverted theme.
  • Added :hover and :focus interaction states for form elements. This includes changes in background color, border color, and cursor changes. For the inverse form theme, shadows have also been added.
  • Removed extra spacing that appeared below textarea; size varies among browsers.
  • Marked "lighter hover state for radio and checkbox inputs on dark backgrounds" feature as deprecated but supported. The inverse form theme is to be used in place of this going forward.

Links

  • Added a text link styling which uses the blue-light and blue-medium colors that meet contrast standards.
  • Added a .button--primary-blue button option. Made .button--primary deprecated but legacy supported since it doesn't meet contrast standards for accessibility.
Assets 2
Loading