From ac03d17c9c126f68218ca402244b7527d8e0d806 Mon Sep 17 00:00:00 2001
From: James Mejia <james.mejia@gsa.gov>
Date: Mon, 17 May 2021 15:38:09 -0500
Subject: [PATCH 01/17] Checkbox: add new background variable to tile.

---
 src/stylesheets/settings/_settings-components.scss | 1 +
 src/stylesheets/theme/_uswds-theme-components.scss | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/stylesheets/settings/_settings-components.scss b/src/stylesheets/settings/_settings-components.scss
index bf1e0f2591..571525e56b 100644
--- a/src/stylesheets/settings/_settings-components.scss
+++ b/src/stylesheets/settings/_settings-components.scss
@@ -85,6 +85,7 @@ $theme-input-max-width: "mobile-lg" !default;
 $theme-input-select-border-width: 2px !default;
 $theme-input-select-size: 2.5 !default;
 $theme-input-state-border-width: 0.5 !default;
+$theme-input-tile-background-color: "white" !default;
 $theme-input-tile-background-color-selected: "primary-lighter" !default;
 $theme-input-tile-border-radius: "md" !default;
 $theme-input-tile-border-width: 2px !default;
diff --git a/src/stylesheets/theme/_uswds-theme-components.scss b/src/stylesheets/theme/_uswds-theme-components.scss
index 370e57deda..59e7ade8b8 100644
--- a/src/stylesheets/theme/_uswds-theme-components.scss
+++ b/src/stylesheets/theme/_uswds-theme-components.scss
@@ -85,6 +85,7 @@ $theme-input-max-width: "mobile-lg";
 $theme-input-select-border-width: 2px;
 $theme-input-select-size: 2.5;
 $theme-input-state-border-width: 0.5;
+$theme-input-tile-background-color: "white";
 $theme-input-tile-background-color-selected: "primary-lighter";
 $theme-input-tile-border-radius: "md";
 $theme-input-tile-border-width: 2px;

From 5793e891b1edd70872a12c828ad3b9ed66a1847d Mon Sep 17 00:00:00 2001
From: James Mejia <james.mejia@gsa.gov>
Date: Mon, 17 May 2021 15:38:55 -0500
Subject: [PATCH 02/17] Checkbox: use `set-text-and-bg()`  to set color on
 tiles.

---
 .../elements/form-controls/_checkbox-and-radio.scss            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
index 170e0c17b1..b3311a737d 100644
--- a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
+++ b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
@@ -127,6 +127,7 @@
 // Checkboxes and radios with tap-friendly targets
 .usa-checkbox__input--tile + .usa-checkbox__label,
 .usa-radio__input--tile + .usa-radio__label {
+  @include set-text-and-bg($theme-input-tile-background-color);
   border: units($theme-input-tile-border-width) solid
     color($theme-input-tile-border-color);
   border-radius: radius($theme-input-tile-border-radius);
@@ -136,7 +137,7 @@
 
 .usa-checkbox__input--tile:checked + .usa-checkbox__label,
 .usa-radio__input--tile:checked + .usa-radio__label {
-  background-color: color($theme-input-tile-background-color-selected);
+  @include set-text-and-bg($theme-input-tile-background-color-selected);
   border-color: color($theme-input-tile-border-color-selected);
 }
 

From 037e93acbe0ee9cf16dbad96ebd05f4caccf4a57 Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
Date: Wed, 26 May 2021 14:38:20 -0700
Subject: [PATCH 03/17] Use custom colors for radio inputs

---
 .../form-controls/_checkbox-and-radio.scss    | 52 ++++++++++++-------
 src/stylesheets/settings/_settings-color.scss |  2 +-
 .../settings/_settings-components.scss        |  5 +-
 .../theme/_uswds-theme-components.scss        |  4 +-
 4 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
index b3311a737d..4d2cf45cfc 100644
--- a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
+++ b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
@@ -1,3 +1,18 @@
+$input-tile-text-color: get-color-token-from-bg($theme-input-background-color);
+$input-tile-bg-color: if(
+  $theme-input-background-color == "default",
+  $theme-body-background-color,
+  $theme-input-background-color
+);
+$input-active-color: nth(get-link-tokens-from-bg($theme-input-background-color), 1);
+$input-disabled-alpha: -0.7;
+$input-disabled-alpha--strong: -0.5;
+$input-disabled-alpha--weak: -0.8;
+$input-border-alpha: -0.0;
+$color-input-disabled: adjust-color(color($input-tile-text-color), $alpha: $input-disabled-alpha);
+$color-input-disabled--strong: adjust-color(color($input-tile-text-color), $alpha: $input-disabled-alpha--strong);
+$color-input-disabled--weak: adjust-color(color($input-tile-text-color), $alpha: $input-disabled-alpha--weak);
+
 @include override-prose {
   .usa-input-list {
     @include add-list-reset;
@@ -39,7 +54,7 @@
 
 .usa-checkbox__label::before,
 .usa-radio__label::before {
-  background: color("white");
+  background: color($input-tile-bg-color);
   content: " ";
   display: inline-block;
   left: units($theme-input-select-border-width);
@@ -59,7 +74,7 @@
 
 .usa-checkbox__label::before,
 .usa-radio__label::before {
-  box-shadow: 0 0 0 units($theme-input-select-border-width) color("base");
+  box-shadow: 0 0 0 units($theme-input-select-border-width) adjust-color(color($input-tile-text-color), $alpha: $input-border-alpha);
   line-height: units($theme-input-select-size);
   margin-right: units($input-select-margin-right);
   text-indent: 0;
@@ -67,13 +82,13 @@
 
 .usa-checkbox__input:checked + .usa-checkbox__label::before,
 .usa-radio__input:checked + .usa-radio__label::before {
-  background-color: color("primary");
-  box-shadow: 0 0 0 units($theme-input-select-border-width) color("primary");
+  background-color: color($input-active-color);
+  box-shadow: 0 0 0 units($theme-input-select-border-width) color($input-active-color);
 }
 
 .usa-radio__input:checked + .usa-radio__label::before {
-  box-shadow: 0 0 0 units($theme-input-select-border-width) color("primary"),
-    inset 0 0 0 units($theme-input-select-border-width) color("white");
+  box-shadow: 0 0 0 units($theme-input-select-border-width) color($input-active-color),
+    inset 0 0 0 units($theme-input-select-border-width) color($input-tile-bg-color);
 
   @media print {
     box-shadow: inset 0 0 0 units($theme-input-select-border-width)
@@ -103,7 +118,7 @@
 
 .usa-checkbox__input:disabled + .usa-checkbox__label,
 .usa-radio__input:disabled + .usa-radio__label {
-  color: color("disabled");
+  color: $color-input-disabled;
   cursor: not-allowed;
 }
 
@@ -113,38 +128,39 @@
 
 .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");
+  background: color($input-tile-bg-color);
+  box-shadow: 0 0 0 units($theme-input-select-border-width) $color-input-disabled;
   cursor: not-allowed;
 }
 
 .usa-radio__input:checked:disabled + .usa-radio__label::before {
-  background: color("disabled-dark");
-  box-shadow: 0 0 0 2px color("disabled-dark"),
-    inset 0 0 0 2px color("disabled-light");
+  background: $color-input-disabled--weak;
+  box-shadow: 0 0 0 2px $color-input-disabled,
+    inset 0 0 0 2px color($input-tile-bg-color);
 }
 
 // Checkboxes and radios with tap-friendly targets
 .usa-checkbox__input--tile + .usa-checkbox__label,
 .usa-radio__input--tile + .usa-radio__label {
-  @include set-text-and-bg($theme-input-tile-background-color);
+  background-color: color($input-tile-bg-color);
   border: units($theme-input-tile-border-width) solid
-    color($theme-input-tile-border-color);
+    $color-input-disabled;
   border-radius: radius($theme-input-tile-border-radius);
+  color: color($input-tile-text-color);
   margin: units(1) 0;
   padding: units(1.5) units(2) units(1.5) units(5);
 }
 
 .usa-checkbox__input--tile:checked + .usa-checkbox__label,
 .usa-radio__input--tile:checked + .usa-radio__label {
-  @include set-text-and-bg($theme-input-tile-background-color-selected);
-  border-color: color($theme-input-tile-border-color-selected);
+  background-color: adjust-color(color($input-active-color), $alpha: -0.9);
+  border-color: color($input-active-color);
 }
 
 .usa-checkbox__input--tile:disabled:checked + .usa-checkbox__label,
 .usa-radio__input--tile:disabled:checked + .usa-radio__label {
-  background-color: color("disabled-light");
-  border-color: color($theme-input-tile-border-color);
+  background-color: $color-input-disabled;
+  border-color: $color-input-disabled--strong;
 }
 
 .usa-checkbox__label-description,
diff --git a/src/stylesheets/settings/_settings-color.scss b/src/stylesheets/settings/_settings-color.scss
index 1d4c8512eb..230613d2d8 100644
--- a/src/stylesheets/settings/_settings-color.scss
+++ b/src/stylesheets/settings/_settings-color.scss
@@ -133,7 +133,7 @@ General colors
 */
 
 // Body
-$theme-body-background-color: "white" !default;
+$theme-body-background-color: "ink" !default;
 
 // Text
 $theme-text-color: "ink" !default;
diff --git a/src/stylesheets/settings/_settings-components.scss b/src/stylesheets/settings/_settings-components.scss
index 571525e56b..f57dd93095 100644
--- a/src/stylesheets/settings/_settings-components.scss
+++ b/src/stylesheets/settings/_settings-components.scss
@@ -80,17 +80,14 @@ $theme-footer-max-width: "desktop" !default;
 // Form and input
 $theme-checkbox-border-radius: "sm" !default;
 $theme-form-font-family: "ui" !default;
+$theme-input-background-color: default !default;
 $theme-input-line-height: 3 !default;
 $theme-input-max-width: "mobile-lg" !default;
 $theme-input-select-border-width: 2px !default;
 $theme-input-select-size: 2.5 !default;
 $theme-input-state-border-width: 0.5 !default;
-$theme-input-tile-background-color: "white" !default;
-$theme-input-tile-background-color-selected: "primary-lighter" !default;
 $theme-input-tile-border-radius: "md" !default;
 $theme-input-tile-border-width: 2px !default;
-$theme-input-tile-border-color: "base-lighter" !default;
-$theme-input-tile-border-color-selected: "primary-light" !default;
 
 // Header
 $theme-header-font-family: "ui" !default;
diff --git a/src/stylesheets/theme/_uswds-theme-components.scss b/src/stylesheets/theme/_uswds-theme-components.scss
index 59e7ade8b8..dfae2f628e 100644
--- a/src/stylesheets/theme/_uswds-theme-components.scss
+++ b/src/stylesheets/theme/_uswds-theme-components.scss
@@ -85,8 +85,8 @@ $theme-input-max-width: "mobile-lg";
 $theme-input-select-border-width: 2px;
 $theme-input-select-size: 2.5;
 $theme-input-state-border-width: 0.5;
-$theme-input-tile-background-color: "white";
-$theme-input-tile-background-color-selected: "primary-lighter";
+$theme-input-background-color: "white";
+$theme-input-background-color-selected: "primary-lighter";
 $theme-input-tile-border-radius: "md";
 $theme-input-tile-border-width: 2px;
 $theme-input-tile-border-color: "base-lighter";

From 28f9c8cdf3e27e9923fc309f289907fd5e91c510 Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
Date: Wed, 26 May 2021 15:15:17 -0700
Subject: [PATCH 04/17] Update disabled:checked styles

---
 .../form-controls/_checkbox-and-radio.scss    | 55 ++++++++++++-------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
index 4d2cf45cfc..a839d23db4 100644
--- a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
+++ b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
@@ -1,5 +1,5 @@
-$input-tile-text-color: get-color-token-from-bg($theme-input-background-color);
-$input-tile-bg-color: if(
+$input-text-color: get-color-token-from-bg($theme-input-background-color);
+$input-bg-color: if(
   $theme-input-background-color == "default",
   $theme-body-background-color,
   $theme-input-background-color
@@ -9,9 +9,21 @@ $input-disabled-alpha: -0.7;
 $input-disabled-alpha--strong: -0.5;
 $input-disabled-alpha--weak: -0.8;
 $input-border-alpha: -0.0;
-$color-input-disabled: adjust-color(color($input-tile-text-color), $alpha: $input-disabled-alpha);
-$color-input-disabled--strong: adjust-color(color($input-tile-text-color), $alpha: $input-disabled-alpha--strong);
-$color-input-disabled--weak: adjust-color(color($input-tile-text-color), $alpha: $input-disabled-alpha--weak);
+$color-input-disabled: adjust-color(color($input-text-color), $alpha: $input-disabled-alpha);
+$color-input-disabled--strong: adjust-color(color($input-text-color), $alpha: $input-disabled-alpha--strong);
+$color-input-disabled--weak: adjust-color(color($input-text-color), $alpha: $input-disabled-alpha--weak);
+
+$input-darkmode: if(
+  lightness(color($input-bg-color)) < 50%,
+  true,
+  false
+);
+
+$input-checkmark: if(
+  $input-darkmode,
+  "correct8-alt",
+  "correct8"
+);
 
 @include override-prose {
   .usa-input-list {
@@ -54,7 +66,7 @@ $color-input-disabled--weak: adjust-color(color($input-tile-text-color), $alpha:
 
 .usa-checkbox__label::before,
 .usa-radio__label::before {
-  background: color($input-tile-bg-color);
+  background: color($input-bg-color);
   content: " ";
   display: inline-block;
   left: units($theme-input-select-border-width);
@@ -74,7 +86,7 @@ $color-input-disabled--weak: adjust-color(color($input-tile-text-color), $alpha:
 
 .usa-checkbox__label::before,
 .usa-radio__label::before {
-  box-shadow: 0 0 0 units($theme-input-select-border-width) adjust-color(color($input-tile-text-color), $alpha: $input-border-alpha);
+  box-shadow: 0 0 0 units($theme-input-select-border-width) adjust-color(color($input-text-color), $alpha: $input-border-alpha);
   line-height: units($theme-input-select-size);
   margin-right: units($input-select-margin-right);
   text-indent: 0;
@@ -88,7 +100,7 @@ $color-input-disabled--weak: adjust-color(color($input-tile-text-color), $alpha:
 
 .usa-radio__input:checked + .usa-radio__label::before {
   box-shadow: 0 0 0 units($theme-input-select-border-width) color($input-active-color),
-    inset 0 0 0 units($theme-input-select-border-width) color($input-tile-bg-color);
+    inset 0 0 0 units($theme-input-select-border-width) color($input-bg-color);
 
   @media print {
     box-shadow: inset 0 0 0 units($theme-input-select-border-width)
@@ -98,9 +110,15 @@ $color-input-disabled--weak: adjust-color(color($input-tile-text-color), $alpha:
   }
 }
 
+.usa-checkbox__input:checked:disabled + .usa-checkbox__label::before {
+  background-color: $color-input-disabled;
+
+  @media print {}
+}
+
 .usa-checkbox__input:checked + .usa-checkbox__label::before,
 .usa-checkbox__input:checked:disabled + .usa-checkbox__label::before {
-  @include add-background-svg("correct8");
+  @include add-background-svg($input-checkmark);
   background-position: center center;
   background-size: units(1.5) auto;
 
@@ -112,6 +130,7 @@ $color-input-disabled--weak: adjust-color(color($input-tile-text-color), $alpha:
   }
 }
 
+.usa-checkbox__input:focus + .usa-checkbox__label::before,
 .usa-radio__input:focus + .usa-radio__label::before {
   @include focus-outline(null, null, null, 0.5);
 }
@@ -122,31 +141,27 @@ $color-input-disabled--weak: adjust-color(color($input-tile-text-color), $alpha:
   cursor: not-allowed;
 }
 
-.usa-checkbox__input:focus + .usa-checkbox__label::before {
-  @include focus-outline;
-}
-
 .usa-checkbox__input:disabled + .usa-checkbox__label::before,
 .usa-radio__input:disabled + .usa-radio__label::before {
-  background: color($input-tile-bg-color);
+  background-color: color($input-bg-color);
   box-shadow: 0 0 0 units($theme-input-select-border-width) $color-input-disabled;
   cursor: not-allowed;
 }
 
 .usa-radio__input:checked:disabled + .usa-radio__label::before {
-  background: $color-input-disabled--weak;
+  background-color: $color-input-disabled--weak;
   box-shadow: 0 0 0 2px $color-input-disabled,
-    inset 0 0 0 2px color($input-tile-bg-color);
+    inset 0 0 0 2px color($input-bg-color);
 }
 
 // Checkboxes and radios with tap-friendly targets
 .usa-checkbox__input--tile + .usa-checkbox__label,
 .usa-radio__input--tile + .usa-radio__label {
-  background-color: color($input-tile-bg-color);
+  background-color: color($input-bg-color);
   border: units($theme-input-tile-border-width) solid
     $color-input-disabled;
   border-radius: radius($theme-input-tile-border-radius);
-  color: color($input-tile-text-color);
+  color: color($input-text-color);
   margin: units(1) 0;
   padding: units(1.5) units(2) units(1.5) units(5);
 }
@@ -159,8 +174,8 @@ $color-input-disabled--weak: adjust-color(color($input-tile-text-color), $alpha:
 
 .usa-checkbox__input--tile:disabled:checked + .usa-checkbox__label,
 .usa-radio__input--tile:disabled:checked + .usa-radio__label {
-  background-color: $color-input-disabled;
-  border-color: $color-input-disabled--strong;
+  background-color: color($input-bg-color);
+  border-color: $color-input-disabled;
 }
 
 .usa-checkbox__label-description,

From 6f419bfd34b0c4a6225846983b8ac0dfa9ae53b2 Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
Date: Wed, 26 May 2021 15:36:29 -0700
Subject: [PATCH 05/17] Sync settings

---
 src/stylesheets/theme/_uswds-theme-components.scss | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/stylesheets/theme/_uswds-theme-components.scss b/src/stylesheets/theme/_uswds-theme-components.scss
index dfae2f628e..a05f25edd0 100644
--- a/src/stylesheets/theme/_uswds-theme-components.scss
+++ b/src/stylesheets/theme/_uswds-theme-components.scss
@@ -80,17 +80,14 @@ $theme-footer-max-width: "desktop";
 // Form and input
 $theme-checkbox-border-radius: "sm";
 $theme-form-font-family: "ui";
+$theme-input-background-color: default;
 $theme-input-line-height: 3;
 $theme-input-max-width: "mobile-lg";
 $theme-input-select-border-width: 2px;
 $theme-input-select-size: 2.5;
 $theme-input-state-border-width: 0.5;
-$theme-input-background-color: "white";
-$theme-input-background-color-selected: "primary-lighter";
 $theme-input-tile-border-radius: "md";
 $theme-input-tile-border-width: 2px;
-$theme-input-tile-border-color: "base-lighter";
-$theme-input-tile-border-color-selected: "primary-light";
 
 // Header
 $theme-header-font-family: "ui";

From adf7f1185d63b083b1a21f3442df4a7130c4c86f Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
Date: Wed, 26 May 2021 15:46:36 -0700
Subject: [PATCH 06/17] Revert to white bg

---
 src/stylesheets/settings/_settings-color.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stylesheets/settings/_settings-color.scss b/src/stylesheets/settings/_settings-color.scss
index cab4e37886..75917d5883 100644
--- a/src/stylesheets/settings/_settings-color.scss
+++ b/src/stylesheets/settings/_settings-color.scss
@@ -133,7 +133,7 @@ General colors
 */
 
 // Body
-$theme-body-background-color: "ink" !default;
+$theme-body-background-color: "white" !default;
 
 // Text
 $theme-text-color: "ink" !default;

From bf4e63db6c1d93047f568089599e579af4abb95e Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
Date: Wed, 26 May 2021 23:17:34 -0700
Subject: [PATCH 07/17] Add mixin for quickly setting custom color

---
 .../form-controls/_checkbox-and-radio.scss    | 199 ++++++++++++------
 1 file changed, 130 insertions(+), 69 deletions(-)

diff --git a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
index da5464a070..2e5759fd39 100644
--- a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
+++ b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
@@ -1,29 +1,124 @@
-$input-text-color: get-color-token-from-bg($theme-input-background-color);
-$input-bg-color: if(
-  $theme-input-background-color == "default",
-  $theme-body-background-color,
-  $theme-input-background-color
-);
-$input-active-color: nth(get-link-tokens-from-bg($theme-input-background-color), 1);
-$input-disabled-alpha: -0.7;
-$input-disabled-alpha--strong: -0.5;
-$input-disabled-alpha--weak: -0.8;
-$input-border-alpha: -0.0;
-$color-input-disabled: adjust-color(color($input-text-color), $alpha: $input-disabled-alpha);
-$color-input-disabled--strong: adjust-color(color($input-text-color), $alpha: $input-disabled-alpha--strong);
-$color-input-disabled--weak: adjust-color(color($input-text-color), $alpha: $input-disabled-alpha--weak);
-
-$input-darkmode: if(
-  lightness(color($input-bg-color)) < 50%,
-  true,
-  false
-);
-
-$input-checkmark: if(
-  $input-darkmode,
-  "correct8-alt",
-  "correct8"
-);
+@mixin format-input {
+  & + [class$="__label"]::before {
+    @content;
+  }
+}
+
+@mixin format-label {
+  & + [class$="__label"] {
+    @content;
+  }
+}
+
+@mixin checkbox-and-radio-colors($bg-color: $theme-input-background-color) {
+  $input-text-color: get-color-token-from-bg($bg-color);
+  $input-bg-color: if(
+    $bg-color == "default",
+    $theme-body-background-color,
+    $bg-color
+  );
+  $input-active-color: nth(get-link-tokens-from-bg($bg-color), 1);
+  $input-disabled-alpha: -0.7;
+  $input-disabled-alpha--strong: -0.5;
+  $input-disabled-alpha--weak: -0.8;
+  $input-border-alpha: -0;
+  $color-input-disabled: adjust-color(
+    color($input-text-color),
+    $alpha: $input-disabled-alpha
+  );
+  $color-input-disabled--strong: adjust-color(
+    color($input-text-color),
+    $alpha: $input-disabled-alpha--strong
+  );
+  $color-input-disabled--weak: adjust-color(
+    color($input-text-color),
+    $alpha: $input-disabled-alpha--weak
+  );
+  $input-darkmode: if(lightness(color($input-bg-color)) < 50%, true, false);
+  $input-checkmark: if($input-darkmode, "correct8-alt", "correct8");
+
+  .usa-checkbox__label,
+  .usa-radio__label {
+    &::before {
+      background: color($input-bg-color);
+      box-shadow: 0 0 0 units($theme-input-select-border-width)
+        adjust-color(color($input-text-color), $alpha: $input-border-alpha);
+    }
+  }
+  .usa-checkbox__input,
+  .usa-radio__input {
+    &:checked {
+      @include format-input {
+        background-color: color($input-active-color);
+        box-shadow: 0 0 0 units($theme-input-select-border-width)
+          color($input-active-color);
+      }
+    }
+    &:disabled {
+      @include format-label {
+        color: $color-input-disabled;
+      }
+      @include format-input {
+        background-color: color($input-bg-color);
+        box-shadow: 0 0 0 units($theme-input-select-border-width)
+          $color-input-disabled;
+      }
+    }
+    &--tile {
+      @include format-label {
+        background-color: color($input-bg-color);
+        border: units($theme-input-tile-border-width) solid
+          $color-input-disabled;
+        color: color($input-text-color);
+      }
+      &:checked {
+        @include format-label {
+          background-color: adjust-color(
+            color($input-active-color),
+            $alpha: -0.9
+          );
+          border-color: color($input-active-color);
+        }
+      }
+      &:disabled:checked {
+        @include format-label {
+          background-color: color($input-bg-color);
+          border-color: $color-input-disabled;
+        }
+      }
+    }
+  }
+  .usa-checkbox__input {
+    &:checked,
+    &:checked:disabled {
+      @include format-input {
+        @include add-background-svg($input-checkmark);
+      }
+    }
+    &:checked:disabled {
+      @include format-input {
+        background-color: $color-input-disabled;
+      }
+    }
+  }
+  .usa-radio__input {
+    &:checked {
+      @include format-input {
+        box-shadow: 0 0 0 units($theme-input-select-border-width)
+            color($input-active-color),
+          inset 0 0 0 units($theme-input-select-border-width)
+            color($input-bg-color);
+      }
+    }
+    &:checked:disabled {
+      @include format-input {
+        background-color: $color-input-disabled--weak;
+        box-shadow: 0 0 0 2px $color-input-disabled,
+          inset 0 0 0 2px color($input-bg-color);
+      }
+    }
+  }
+}
 
 @include override-prose {
   .usa-input-list {
@@ -38,6 +133,8 @@ $input-checkmark: if(
   }
 }
 
+@include checkbox-and-radio-colors;
+
 .usa-checkbox__input,
 .usa-radio__input {
   // The actual input element is only visible to screen readers, because
@@ -66,7 +163,6 @@ $input-checkmark: if(
 
 .usa-checkbox__label::before,
 .usa-radio__label::before {
-  background: color($input-bg-color);
   content: " ";
   display: inline-block;
   left: units($theme-input-select-border-width);
@@ -86,22 +182,12 @@ $input-checkmark: if(
 
 .usa-checkbox__label::before,
 .usa-radio__label::before {
-  box-shadow: 0 0 0 units($theme-input-select-border-width) adjust-color(color($input-text-color), $alpha: $input-border-alpha);
   line-height: units($theme-input-select-size);
   margin-right: units($input-select-margin-right);
   text-indent: 0;
 }
 
-.usa-checkbox__input:checked + .usa-checkbox__label::before,
-.usa-radio__input:checked + .usa-radio__label::before {
-  background-color: color($input-active-color);
-  box-shadow: 0 0 0 units($theme-input-select-border-width) color($input-active-color);
-}
-
 .usa-radio__input:checked + .usa-radio__label::before {
-  box-shadow: 0 0 0 units($theme-input-select-border-width) color($input-active-color),
-    inset 0 0 0 units($theme-input-select-border-width) color($input-bg-color);
-
   @media print {
     box-shadow: inset 0 0 0 units($theme-input-select-border-width)
         color("white"),
@@ -110,15 +196,8 @@ $input-checkmark: if(
   }
 }
 
-.usa-checkbox__input:checked:disabled + .usa-checkbox__label::before {
-  background-color: $color-input-disabled;
-
-  @media print {}
-}
-
 .usa-checkbox__input:checked + .usa-checkbox__label::before,
 .usa-checkbox__input:checked:disabled + .usa-checkbox__label::before {
-  @include add-background-svg($input-checkmark);
   background-position: center center;
   background-size: units(1.5) auto;
 
@@ -137,47 +216,22 @@ $input-checkmark: if(
 
 .usa-checkbox__input:disabled + .usa-checkbox__label,
 .usa-radio__input:disabled + .usa-radio__label {
-  color: $color-input-disabled;
   cursor: not-allowed;
 }
 
 .usa-checkbox__input:disabled + .usa-checkbox__label::before,
 .usa-radio__input:disabled + .usa-radio__label::before {
-  background-color: color($input-bg-color);
-  box-shadow: 0 0 0 units($theme-input-select-border-width) $color-input-disabled;
   cursor: not-allowed;
 }
 
-.usa-radio__input:checked:disabled + .usa-radio__label::before {
-  background-color: $color-input-disabled--weak;
-  box-shadow: 0 0 0 2px $color-input-disabled,
-    inset 0 0 0 2px color($input-bg-color);
-}
-
 // Checkboxes and radios with tap-friendly targets
 .usa-checkbox__input--tile + .usa-checkbox__label,
 .usa-radio__input--tile + .usa-radio__label {
-  background-color: color($input-bg-color);
-  border: units($theme-input-tile-border-width) solid
-    $color-input-disabled;
   border-radius: radius($theme-input-tile-border-radius);
-  color: color($input-text-color);
   margin-top: units(1);
   padding: units(1.5) units(2) units(1.5) units(5);
 }
 
-.usa-checkbox__input--tile:checked + .usa-checkbox__label,
-.usa-radio__input--tile:checked + .usa-radio__label {
-  background-color: adjust-color(color($input-active-color), $alpha: -0.9);
-  border-color: color($input-active-color);
-}
-
-.usa-checkbox__input--tile:disabled:checked + .usa-checkbox__label,
-.usa-radio__input--tile:disabled:checked + .usa-radio__label {
-  background-color: color($input-bg-color);
-  border-color: $color-input-disabled;
-}
-
 .usa-checkbox__label-description,
 .usa-radio__label-description {
   display: block;
@@ -185,3 +239,10 @@ $input-checkmark: if(
   margin-top: units(1);
   text-indent: 0;
 }
+
+.checkbox-tests {
+  @include set-text-and-bg("green-80");
+  @include checkbox-and-radio-colors("green-80");
+  padding: units(2);
+  border-radius: radius("md");
+}

From 07be94037783cd97195574b8e29cb772df73d50a Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
Date: Wed, 26 May 2021 23:18:03 -0700
Subject: [PATCH 08/17] Fix checkbox preview

---
 src/components/checkbox/checkbox.config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/checkbox/checkbox.config.yml b/src/components/checkbox/checkbox.config.yml
index 563c8aa5de..32560d6e2c 100644
--- a/src/components/checkbox/checkbox.config.yml
+++ b/src/components/checkbox/checkbox.config.yml
@@ -1 +1 @@
-preview: "@uswds-form"
\ No newline at end of file
+preview: "@uswds-framed"

From 7d84ed72928299509bf3c97d9b2fb0f68302f7da Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
Date: Wed, 26 May 2021 23:18:12 -0700
Subject: [PATCH 09/17] Add custom color test

---
 src/components/checkbox/checkbox--test.njk | 41 ++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/components/checkbox/checkbox--test.njk

diff --git a/src/components/checkbox/checkbox--test.njk b/src/components/checkbox/checkbox--test.njk
new file mode 100644
index 0000000000..ca9d8bd73a
--- /dev/null
+++ b/src/components/checkbox/checkbox--test.njk
@@ -0,0 +1,41 @@
+  <fieldset class="usa-fieldset">
+    <legend class="usa-legend">Select any historical figure</legend>
+    <div class="usa-checkbox">
+      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-truth-2" type="checkbox" name="historical-figures-2" value="sojourner-truth" checked>
+      <label class="usa-checkbox__label" for="check-historical-truth-2">Sojourner Truth <span class="usa-checkbox__label-description">This is optional text that can be used to describe the label in more detail.</span></label>
+    </div>
+    <div class="usa-checkbox">
+      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-2" type="checkbox" name="historical-figures-2" value="frederick-douglass">
+      <label class="usa-checkbox__label" for="check-historical-douglass-2">Frederick Douglass</label>
+    </div>
+    <div class="usa-checkbox">
+      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-washington-2" type="checkbox" name="historical-figures-2" value="booker-t-washington">
+      <label class="usa-checkbox__label" for="check-historical-washington-2">Booker T. Washington</label>
+    </div>
+    <div class="usa-checkbox">
+      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-carver-2" type="checkbox" name="historical-figures-2"  value="george-washington-carver" disabled>
+      <label class="usa-checkbox__label" for="check-historical-carver-2">George Washington Carver</label>
+    </div>
+  </fieldset>
+
+  <div class="checkbox-tests margin-top-4">
+  <fieldset class="usa-fieldset">
+    <legend class="usa-legend">Select any historical figure</legend>
+    <div class="usa-checkbox">
+      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-truth-2" type="checkbox" name="historical-figures-2" value="sojourner-truth" checked>
+      <label class="usa-checkbox__label" for="check-historical-truth-2">Sojourner Truth <span class="usa-checkbox__label-description">This is optional text that can be used to describe the label in more detail.</span></label>
+    </div>
+    <div class="usa-checkbox">
+      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-2" type="checkbox" name="historical-figures-2" value="frederick-douglass">
+      <label class="usa-checkbox__label" for="check-historical-douglass-2">Frederick Douglass</label>
+    </div>
+    <div class="usa-checkbox">
+      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-washington-2" type="checkbox" name="historical-figures-2" value="booker-t-washington">
+      <label class="usa-checkbox__label" for="check-historical-washington-2">Booker T. Washington</label>
+    </div>
+    <div class="usa-checkbox">
+      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-carver-2" type="checkbox" name="historical-figures-2"  value="george-washington-carver" disabled>
+      <label class="usa-checkbox__label" for="check-historical-carver-2">George Washington Carver</label>
+    </div>
+  </fieldset>
+</div>
\ No newline at end of file

From 5b27e13ff72f1596c5f4ab93fd649ee63b09710c Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
Date: Wed, 2 Jun 2021 15:04:15 -0700
Subject: [PATCH 10/17] Remove IE9 code

---
 .../elements/form-controls/_checkbox-and-radio.scss       | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
index 2e5759fd39..bee7dcc84d 100644
--- a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
+++ b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
@@ -140,14 +140,6 @@
   // The actual input element is only visible to screen readers, because
   // all visual styling is done via the label.
   @include sr-only();
-
-  .lt-ie9 & {
-    border: 0;
-    float: left;
-    margin: units(0.5) units(0.5) 0 0;
-    position: static;
-    width: auto;
-  }
 }
 
 .usa-checkbox__label,

From 5c32703a8827f4baff813421c3f387fa17f2986d Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
Date: Wed, 2 Jun 2021 15:20:32 -0700
Subject: [PATCH 11/17] Simplify and organize code

---
 .../form-controls/_checkbox-and-radio.scss    | 125 +++++++++---------
 1 file changed, 64 insertions(+), 61 deletions(-)

diff --git a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
index bee7dcc84d..bbcca59751 100644
--- a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
+++ b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
@@ -140,6 +140,59 @@
   // The actual input element is only visible to screen readers, because
   // all visual styling is done via the label.
   @include sr-only();
+
+  &:focus {
+    @include format-input {
+      @include focus-outline(null, null, null, 0.5);
+    }
+  }
+
+  &:disabled {
+    @include format-input {
+      cursor: not-allowed;
+    }
+    @include format-label {
+      cursor: not-allowed;
+    }
+  }
+
+  // Checkboxes and radios with tap-friendly targets
+  &--tile {
+    @include format-label {
+      border-radius: radius($theme-input-tile-border-radius);
+      margin-top: units(1);
+      padding: units(1.5) units(2) units(1.5) units(5);
+    }
+  }
+}
+
+.usa-radio__input {
+  &:checked {
+    @include format-input {
+      @media print {
+        box-shadow: inset 0 0 0 units($theme-input-select-border-width)
+            color("white"),
+          inset 0 0 0 units(2) color("primary"),
+          0 0 0 units($theme-input-select-border-width) color("primary");
+      }
+    }
+  }
+}
+
+.usa-checkbox__input {
+  &:checked,
+  &:checked:disabled {
+    @include format-input {
+      background-position: center center;
+      background-size: units(1.5) auto;
+      @media print {
+        background-image: none;
+        background-color: color("white");
+        content: url("#{$theme-image-path}/checkbox-check-print.svg");
+        text-indent: 0;
+      }
+    }
+  }
 }
 
 .usa-checkbox__label,
@@ -151,16 +204,18 @@
   padding-left: units($input-select-margin-right + $theme-input-select-size);
   position: relative;
   text-indent: units(-$input-select-margin-right - $theme-input-select-size);
-}
 
-.usa-checkbox__label::before,
-.usa-radio__label::before {
-  content: " ";
-  display: inline-block;
-  left: units($theme-input-select-border-width);
-  position: relative;
-  vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
-  white-space: pre;
+  &:before {
+    content: " ";
+    display: inline-block;
+    left: units($theme-input-select-border-width);
+    line-height: units($theme-input-select-size);
+    margin-right: units($input-select-margin-right);
+    position: relative;
+    text-indent: 0;
+    vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
+    white-space: pre;
+  }
 }
 
 .usa-checkbox__label::before {
@@ -172,58 +227,6 @@
   @include u-circle($theme-input-select-size);
 }
 
-.usa-checkbox__label::before,
-.usa-radio__label::before {
-  line-height: units($theme-input-select-size);
-  margin-right: units($input-select-margin-right);
-  text-indent: 0;
-}
-
-.usa-radio__input:checked + .usa-radio__label::before {
-  @media print {
-    box-shadow: inset 0 0 0 units($theme-input-select-border-width)
-        color("white"),
-      inset 0 0 0 units(2) color("primary"),
-      0 0 0 units($theme-input-select-border-width) color("primary");
-  }
-}
-
-.usa-checkbox__input:checked + .usa-checkbox__label::before,
-.usa-checkbox__input:checked:disabled + .usa-checkbox__label::before {
-  background-position: center center;
-  background-size: units(1.5) auto;
-
-  @media print {
-    background-image: none;
-    background-color: color("white");
-    content: url("#{$theme-image-path}/checkbox-check-print.svg");
-    text-indent: 0;
-  }
-}
-
-.usa-checkbox__input:focus + .usa-checkbox__label::before,
-.usa-radio__input:focus + .usa-radio__label::before {
-  @include focus-outline(null, null, null, 0.5);
-}
-
-.usa-checkbox__input:disabled + .usa-checkbox__label,
-.usa-radio__input:disabled + .usa-radio__label {
-  cursor: not-allowed;
-}
-
-.usa-checkbox__input:disabled + .usa-checkbox__label::before,
-.usa-radio__input:disabled + .usa-radio__label::before {
-  cursor: not-allowed;
-}
-
-// Checkboxes and radios with tap-friendly targets
-.usa-checkbox__input--tile + .usa-checkbox__label,
-.usa-radio__input--tile + .usa-radio__label {
-  border-radius: radius($theme-input-tile-border-radius);
-  margin-top: units(1);
-  padding: units(1.5) units(2) units(1.5) units(5);
-}
-
 .usa-checkbox__label-description,
 .usa-radio__label-description {
   display: block;

From d108bfcf44320634536464442d8b3138d1e03235 Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
Date: Wed, 2 Jun 2021 15:45:40 -0700
Subject: [PATCH 12/17] Allow checkbox-and-radio-colors() to set custom checked
 color

---
 .../form-controls/_checkbox-and-radio.scss        | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
index bbcca59751..b59e3f1064 100644
--- a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
+++ b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
@@ -10,14 +10,20 @@
   }
 }
 
-@mixin checkbox-and-radio-colors($bg-color: $theme-input-background-color) {
+@mixin checkbox-and-radio-colors(
+  $bg-color: $theme-input-background-color,
+  $checked-color: "default"
+) {
   $input-text-color: get-color-token-from-bg($bg-color);
   $input-bg-color: if(
     $bg-color == "default",
     $theme-body-background-color,
     $bg-color
   );
-  $input-active-color: nth(get-link-tokens-from-bg($bg-color), 1);
+  $input-active-color: nth(
+    get-link-tokens-from-bg($bg-color, $preferred-link-token: $checked-color),
+    1
+  );
   $input-disabled-alpha: -0.7;
   $input-disabled-alpha--strong: -0.5;
   $input-disabled-alpha--weak: -0.8;
@@ -235,9 +241,12 @@
   text-indent: 0;
 }
 
+// Test code for scoped custom colors
+/*
 .checkbox-tests {
   @include set-text-and-bg("green-80");
-  @include checkbox-and-radio-colors("green-80");
+  @include checkbox-and-radio-colors("green-80", "green-warm-10v");
   padding: units(2);
   border-radius: radius("md");
 }
+*/

From 999a4d6e0e7298905fc175210e44d7bdbce985a4 Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
Date: Wed, 2 Jun 2021 15:47:21 -0700
Subject: [PATCH 13/17] Use proper IDs in checkbox test

---
 src/components/checkbox/checkbox--test.njk | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/checkbox/checkbox--test.njk b/src/components/checkbox/checkbox--test.njk
index ca9d8bd73a..553f2487d5 100644
--- a/src/components/checkbox/checkbox--test.njk
+++ b/src/components/checkbox/checkbox--test.njk
@@ -22,20 +22,20 @@
   <fieldset class="usa-fieldset">
     <legend class="usa-legend">Select any historical figure</legend>
     <div class="usa-checkbox">
-      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-truth-2" type="checkbox" name="historical-figures-2" value="sojourner-truth" checked>
-      <label class="usa-checkbox__label" for="check-historical-truth-2">Sojourner Truth <span class="usa-checkbox__label-description">This is optional text that can be used to describe the label in more detail.</span></label>
+      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-truth-3" type="checkbox" name="historical-figures-3" value="sojourner-truth" checked>
+      <label class="usa-checkbox__label" for="check-historical-truth-3">Sojourner Truth <span class="usa-checkbox__label-description">This is optional text that can be used to describe the label in more detail.</span></label>
     </div>
     <div class="usa-checkbox">
-      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-2" type="checkbox" name="historical-figures-2" value="frederick-douglass">
-      <label class="usa-checkbox__label" for="check-historical-douglass-2">Frederick Douglass</label>
+      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-3" type="checkbox" name="historical-figures-3" value="frederick-douglass">
+      <label class="usa-checkbox__label" for="check-historical-douglass-3">Frederick Douglass</label>
     </div>
     <div class="usa-checkbox">
-      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-washington-2" type="checkbox" name="historical-figures-2" value="booker-t-washington">
-      <label class="usa-checkbox__label" for="check-historical-washington-2">Booker T. Washington</label>
+      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-washington-3" type="checkbox" name="historical-figures-3" value="booker-t-washington">
+      <label class="usa-checkbox__label" for="check-historical-washington-3">Booker T. Washington</label>
     </div>
     <div class="usa-checkbox">
-      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-carver-2" type="checkbox" name="historical-figures-2"  value="george-washington-carver" disabled>
-      <label class="usa-checkbox__label" for="check-historical-carver-2">George Washington Carver</label>
+      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-carver-3" type="checkbox" name="historical-figures-3"  value="george-washington-carver" disabled>
+      <label class="usa-checkbox__label" for="check-historical-carver-3">George Washington Carver</label>
     </div>
   </fieldset>
 </div>
\ No newline at end of file

From ee525aef96856d69ce319468bce6588c83c3e53d Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
Date: Wed, 2 Jun 2021 15:47:39 -0700
Subject: [PATCH 14/17] Include test code [for now]

---
 src/stylesheets/elements/form-controls/_checkbox-and-radio.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
index b59e3f1064..822bdbc187 100644
--- a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
+++ b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
@@ -242,11 +242,9 @@
 }
 
 // Test code for scoped custom colors
-/*
 .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");
 }
-*/

From 3992ed9192eec395a9eaf71ef4dbd5e1cd591061 Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
Date: Wed, 2 Jun 2021 16:18:36 -0700
Subject: [PATCH 15/17] Use "selected" instead of "checked"

---
 .../elements/form-controls/_checkbox-and-radio.scss           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
index 822bdbc187..e5b84aa046 100644
--- a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
+++ b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
@@ -12,7 +12,7 @@
 
 @mixin checkbox-and-radio-colors(
   $bg-color: $theme-input-background-color,
-  $checked-color: "default"
+  $selected-color: "default"
 ) {
   $input-text-color: get-color-token-from-bg($bg-color);
   $input-bg-color: if(
@@ -21,7 +21,7 @@
     $bg-color
   );
   $input-active-color: nth(
-    get-link-tokens-from-bg($bg-color, $preferred-link-token: $checked-color),
+    get-link-tokens-from-bg($bg-color, $preferred-link-token: $selected-color),
     1
   );
   $input-disabled-alpha: -0.7;

From 8c3381749ff50a0a1a588f4b5b353d4c30321ece Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
Date: Thu, 3 Jun 2021 12:15:55 -0700
Subject: [PATCH 16/17] Set background color for elements based on setting

---
 .../elements/form-controls/_checkbox-and-radio.scss         | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
index e5b84aa046..b742190353 100644
--- a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
+++ b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
@@ -43,8 +43,14 @@
   $input-darkmode: if(lightness(color($input-bg-color)) < 50%, true, false);
   $input-checkmark: if($input-darkmode, "correct8-alt", "correct8");
 
+  .usa-checkbox,
+  .usa-radio {
+    background: color($input-bg-color);
+  }
+
   .usa-checkbox__label,
   .usa-radio__label {
+    color: color($input-text-color);
     &::before {
       background: color($input-bg-color);
       box-shadow: 0 0 0 units($theme-input-select-border-width)

From 81ba70f3cb260b62a8c187aa28e80b95187be4e8 Mon Sep 17 00:00:00 2001
From: Dano Williams <daniel.williams@gsa.gov>
Date: Fri, 4 Jun 2021 12:19:24 -0700
Subject: [PATCH 17/17] Comment out test code

---
 src/stylesheets/elements/form-controls/_checkbox-and-radio.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
index b742190353..8de712f90e 100644
--- a/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
+++ b/src/stylesheets/elements/form-controls/_checkbox-and-radio.scss
@@ -248,9 +248,11 @@
 }
 
 // Test code for scoped custom colors
+/*
 .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");
 }
+*/