USWDS - Checkbox + Radio: create background color variable.

[mejiaj]

Description

Builds on the great work from @aduth on #4178.

Additional information

• Added variable to _settings-components.scss and _uswds-theme-components.scss
• Use set-text-and-bg() in checkbox and radio tiles to set accessible color on background

Examples

Default (white)

Base darker

Green 60v

---

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

[thisisdano]

Added these two mixins to improve the readability of the component code.

Before:

.usa-checkbox__input:disabled + .usa-checkbox__label::before,
.usa-radio__input:disabled + .usa-radio__label::before {
  background: color("disabled-light");
  box-shadow: 0 0 0 units($theme-input-select-border-width) color("disabled");
  cursor: not-allowed;
}

After:

.usa-checkbox__input,
.usa-radio__input {
  &:disabled {
    @include format-input {
        background: color("disabled-light");
        box-shadow: 0 0 0 units($theme-input-select-border-width) color("disabled");
        cursor: not-allowed;
    }
  }
}

[thisisdano]

This long mixin allows users to write scoped colors.

It takes two color token inputs, $bg-color and checked-color. Neither are required and will assume the values in settings if omitted. It returns all the code necessary to set checkbox and radio inputs for the desired scope.

For instance, if you wanted to change the color of all checkbox and radio elements within a .checkbox-tests container, you could do something like the following

.checkbox-tests {
  @include set-text-and-bg("green-80");
  @include checkbox-and-radio-colors("green-80", "green-warm-10v");
  padding: units(2);
  border-radius: radius("md");
}

[thisisdano]

The bg-color default the component bg color from settings...

[thisisdano]

...and the default checked color is either the dark or light link color set in settings.

[thisisdano]

Here, I'm using the mixin to set the component's default colors.

[thisisdano]

This test code is used to power the example here: https://federalist-3b6ba08e-0df4-44c9-ac73-6fc193b0e19c.app.cloud.gov/preview/uswds/uswds/jm-tile-add-bg/components/preview/checkbox--test.html

We should comment it out before going into production

[thisisdano]

I changed this from a tile-specific background color to an input background color since this will now apply to original checkbox and radios as well

[thisisdano]

The system now sets this automatically based on the background color. The tile background color is a more transparent version of the calculated text/border color

[thisisdano]

The system now sets this automatically as a transparent version of the calculated text color

[thisisdano]

The system now uses the standard or reverse link color as the selected color instead of a special new color.

[thisisdano]

What I did

This new work allows users to change the output colors of default and tile checkboxes and radio buttons. The system will calculate the proper colors for all elements based on the set background and the values of standard and reverse text and link colors.

It also includes a new mixin, checkbox-and-radio-colors($bg-color, $selected-color) that allows developers to write scoped colors for checkboxes and radios that contained within custom-color elements:

.checkbox-tests {
  @include set-text-and-bg("green-80");
  @include checkbox-and-radio-colors("green-80", "green-warm-10v");
  padding: units(2);
  border-radius: radius("md");
}

This allows something like what we see below, where the top section uses colors derived solely from settings, and the bottom section includes new scoped color rules generated by the mixin:

Further notes in the code comments.

What to check:

• Change the value of component settings like $theme-input-background-color
• Change the value of color settings like:
  • $theme-body-background-color
  • $theme-text-color
  • $theme-text-reverse-color
  • $theme-link-color
  • $theme-link-reverse-color

[mejiaj]

This is good!

Noticed that changing $theme-input-background-color gives odd results.

---

$theme-input-background-color: "magenta-40";

---

$theme-input-background-color: "primary-light";

---

$theme-input-background-color: "primary-dark"

[thisisdano]

That is the expected result for using that setting (as built). If you change the value of $theme-input-background-color to a value that is not the actual background color for the component, you'll get the kind of results you're seeing. $theme-input-background-color does not actually set the background color, it adapts the colors of the component to a specified background color.

I updated the code to give the selected background color to usa-checkbox and usa-radio elements, but the general point still stands: designers will need to assign the desired background color to the input's containing element independent of this setting.

Note: This code is not meant to let designers give their tiles a separate background color independent from the form's background, like to give the tiles a yellow tile background on a white form background. We don't want the tiles to have a dramatically different look from the their surroundings.

[mejiaj]

I see, thanks for the clarification.