Confirm
35
edits
Changes
Clarify combo color usage.
For components which represent a combination of states, a combination of colors is necessary. For example:
* A hovered button might should invert its colors, using ButtonFace for text and border, and ButtonText for its background.* A visited link on a selected card should use MozNativeVisitedHyperlinkText / as its foreground, letting SelectedItemshow through as its background.
* An inactive button should use GrayText / ButtonFace
* A selected tab should use SelectedItemText / SelectedItem with a ButtonText border
Components which require a mapping that isn't explicitly described above should have their mapping approved by the Accessibility team.
In addition to the color requirements described above, we enforce stylistic requirements for HCM. These styles increase component discoverabiltiy and assist users with cognative and/or motor disabilities, among others.
* Controls, sidebars, toolbars, dialogs, and other views should be bounded by a solid, 1px border at minimum. This border should inherit the component's foreground colorunless the component requires a combination of colors (like the "selected tab" example above). In addition, the component should have adequate padding to ensure the border does not reduce the legibility of the component's content.A border is not necessary if the component's (semantically appropriate) background color differs from the background of its embedded component.
* With HCM enabled, the set of styles our style system will permit is reduced. Properties [https://searchfox.org/mozilla-central/search?q=ignored_when_colors_disabled&redirect=false here] with a value of `ignored_when_colors_disabled=True` may be tweaked by the style system before computed style is set. Learn more [https://searchfox.org/mozilla-central/rev/25997ce8267ec9e3ea4b727e0973bd9ef02bba79/servo/components/style/properties/cascade.rs#388 here].
