Update text colors for hovered/selected elements and add adjacent text to checkbox icons

[gcamacho079]

Description

Makes the following changes:

• Adds a new mixin for updating the focus ring with custom colors
• Updates the output for boolean custom field values to also include adjacent "Enabled" text. This fixes an issue of the icon not contrasting enough in the default/hover/selected element states (note: this is a solution that will likely need to be used for status icons as well).

Related issues

Resolves DEV-1034, DEV-962, DEV-546

[linear]

DEV-1034 The checkbox icon in lightswitch columns on index pages doesn't meet non-text contrast requirements

Page Area:

.checkbox-icon

Issue Description:

The contrast of the checkbox over the background is only 2.6:1

Action:

Darken so it's at least 3:1 over the background

Screenshot/Code Snippet:

.checkbox-icon::before {
  speak: none;
  -webkit-font-feature-settings: "liga","dlig";
  -ms-font-feature-settings: "liga","dlig";
  -o-font-feature-settings: "liga","dlig";
  font-feature-settings: "liga","dlig";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-wrap: normal !important;
  color: var(--enabled-color);
  content: "check";
  direction: ltr;
  display: inline-block;
  font-family: Craft;
  font-size: 15px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  line-height: var(--checkbox-size);
  opacity: var(--icon-opacity);
  text-align: center;
  text-transform: none;
  -webkit-user-select: none;
  user-select: none;
  vertical-align: middle;
}

Resolves CMS-276

[linear]

DEV-962 "Remember your password?" and "Forgot your password?" buttons drop below 4.5:1 contrast on hover and focus

Page Area:

Login page

Issue Description:

When hovering/focused, the color drops below 4.5:1 against the background

Action:

Darken link on hover, or leave text color the same as when un-hovered

Screenshot/Code Snippet:

N/A

Resolves CMS-262

[linear]

DEV-546 Selected element in element tables has a background that is not 3:1 against adjacent, unselected elements

The background color of the cells in a selected element row is only 1.44:1 against the adjacent, unselected elements (#CDD8E4 against #FFFFFF)

Add an outline or darken the background color of cells to achieve at least 3:1 ratio against adjacent cells, or provide another visual indicator of selected state.

Screen Shot 2022-04-19 at 9.08.51 AM.png

Resolves CMS-190

[brandonkelly]

For DEV-1034, why can’t we just darken the checkmark color?

[gcamacho079]

For DEV-1034, why can’t we just darken the checkmark color?

We certainly could. I was torn between this solution and just updating the color to ensure it's 3:1 against each background color; I think it would require a lighter green or white color in the "selected" state.

I opted for this solution to have some visual consistency between this and the status indicator change in this PR (i.e. an icon that doesn't change color based the element state, next to text that always meets the minimum contrast ratio for text).

[brandonkelly]

Ah true, it would be good to stay consistent with the “enabled” green color. I’d be OK with a white checkbox over a green background, if that’s acceptable.

[brandonkelly]

I don’t really care for the “Enabled” label since that doesn’t always make sense for the context. For example “Enabled” would be a confusing label for a Lightswitch field labeled “Featured entry?”. We could maybe add a setting for the “Enabled” label text, but if there’s a way to solve this without the label, I’d prefer that.

[gcamacho079]

Ah true, it would be good to stay consistent with the “enabled” green color. I’d be OK with a white checkbox over a green background, if that’s acceptable.

Do you mean something along these lines?

This ensures that when the element row is selected and has a dark gray background, the white checkmark still remains visible over its green background:

If so, yes this is completely acceptable!

[gcamacho079]

@brandonkelly, this is ready for review again. I’ve made the stylistic change and ensured the custom “On” label is used as the text alternative when there is one set.

[brandonkelly]

Lightened up the selected BG color a bit, to be consistent with the selected source item, the selected source path item (#12564), and hovered disclosure menu items.

[gcamacho079]

@brandonkelly good call, the lighter color does indeed provide enough contrast!

[brandonkelly]

Sweet! Merged 🎉