[WNMGDS-596] Improve choice variables and unrevert the checkmark chan…

…ge (#827)

* Add more choice theme variables including border radius

* Reapply PR #733 and style the choice check icon with SCSS

* Update Choice variables

* Add error style under a flag

* Update icon positioning

* Remove unnecessary styles and add comments

packages/design-system-docs/src/pages/components/ChoiceList/_ChoiceList.docs.scss

@@ -93,10 +93,14 @@ Style guide: components.choice.react
 
 The following Sass variables can be overridden to theme choice fields:
 
+- `$choice-size`
 - `$choice-border-width`
+- `$choice-border-radius`
+- `$choice-background-color`
 - `$choice-border-color`
-- `$choice-border-color-inverse`
 - `$choice-checked-background-color`
+- `$choice-checked-border-color`
+- See [form variables](https://github.com/CMSgov/design-system/blob/master/packages/design-system/src/styles/settings/variables/_forms.scss) for the full list of choice variables.
 
 ### Related patterns
 

packages/design-system-docs/src/pages/styles/icons/_icons.docs.scss

@@ -9,7 +9,7 @@ Style guide: styles.icons
 */
 
 /*
-Status Icons
+Status icons
 
 @hide-markup
 
@@ -21,7 +21,19 @@ Style guide: styles.icons.alert
 */
 
 /*
-Interaction Icons
+Checkbox and radio icons
+
+@hide-markup
+
+These checkmark icons are drawn with SCSS/CSS and used for both checkbox and radio buttons. The reasoning behind this is background images are not displayed in high contrast mode on certain systems and browsers so switching to draw the icons with SCSS/CSS ensures that the icons are always visibile and support as many users as possible.
+
+Markup: checkbox-radio-icons.example.html
+
+Style guide: styles.icons.checkbox
+*/
+
+/*
+Interaction icons
 
 @hide-markup
 
@@ -33,7 +45,7 @@ Style guide: styles.icons.interaction
 */
 
 /*
-Supplemental Icons
+Supplemental icons
 
 @hide-markup
 

packages/design-system/src/styles/components/_Choice.scss

@@ -4,7 +4,6 @@ $ds-c-inset-border-width: $spacer-half;
 
 // Order of the choice styles is important to ensure styles have the correct precedent
 // normal < errored < checked < disabled < focused
-
 .ds-c-choice {
   // Hide the default browser checkbox/radio button
   // We create our own custom version using '+ label::before'
@@ -21,49 +20,70 @@ $ds-c-inset-border-width: $spacer-half;
     font-weight: $font-normal;
     margin: $spacer-1 0;
     max-width: $measure-base;
+    // We set min-height to be the same as `$choice-size` to ensure most of the time
+    // the label and icon will be vertically aligned. We cannot simply vertically center the icon
+    // because of choice hints and label text wrapping, as we want the icon to be vertically aligned
+    // with the first line of text only.
     min-height: $choice-size;
     padding-left: $choice-size + $spacer-1;
     position: relative;
   }
 
   // Choice checkbox/radio button
   + label::before {
-    background-color: $color-background;
+    background-color: $choice-background-color;
     border: $choice-border-width solid $choice-border-color;
+    border-radius: $choice-border-radius;
     box-sizing: border-box;
     content: '\a0';
     height: $choice-size;
     left: 0;
-    line-height: $choice-size;
     position: absolute;
-    text-indent: 0.15em;
     top: 0;
     width: $choice-size;
   }
 
+  + label::after {
+    background: transparent;
+    border: solid;
+    border-color: $color-white;
+    border-top-color: transparent;
+    border-width: 0 0 4px 4px;
+    content: '';
+    height: 4px;
+    left: 9px;
+    opacity: 0;
+    position: absolute;
+    top: 11px;
+    transform: rotate(-45deg);
+    width: 10px;
+  }
+
   // Errored checkbox/radio button
-  // Currently only enabled in HC.gov DS
-  // &.ds-c-choice--error + label::before {
-  //   border-color: $color-error;
-  // }
+  @if $ds-include-choice-error-highlight {
+    &.ds-c-choice--error + label::before {
+      border-color: $color-error;
+    }
+  }
 
   // Checked checkbox/radio button
   &:checked + label::before {
     background-color: $choice-checked-background-color;
-    background-image: url('#{$image-path}/checkmark-white.svg');
-    background-position: 50%;
-    background-repeat: no-repeat;
-    background-size: $choice-size - $spacer-1;
-    border-color: $choice-checked-background-color;
+    border-color: $choice-checked-border-color;
+  }
+
+  // Checked icon
+  &:checked + label::after {
+    opacity: 1;
   }
 
   // Disabled checkbox/radio button and label
   &:disabled + label {
     color: $color-muted;
 
     &::before {
-      background-color: $color-gray-lighter;
-      border-color: $color-gray-light;
+      background-color: $choice-disabled-background-color;
+      border-color: $choice-disabled-border-color;
       cursor: not-allowed;
     }
   }
@@ -86,17 +106,19 @@ $ds-c-inset-border-width: $spacer-half;
 .ds-c-choice--inverse {
   // Choice checkbox/radio button
   + label::before {
-    background-color: transparent;
+    background-color: $choice-background-color-inverse;
     border-color: $choice-border-color-inverse;
   }
 
   // Errored checkbox/radio button
-  // Currently only enabled in HC.gov DS
-  // &.ds-c-choice--error + label::before {
-  //   border-color: $color-error-light;
-  // }
+  @if $ds-include-choice-error-highlight {
+    &.ds-c-choice--error + label::before {
+      border-color: $color-error-light;
+    }
+  }
 
   // Checked checkbox/radio button
+  // Need to repeat this styling to override error border-color when checked
   &:checked + label::before {
     border-color: $choice-checked-background-color;
   }
@@ -106,8 +128,8 @@ $ds-c-inset-border-width: $spacer-half;
     color: $color-muted-inverse;
 
     &::before {
-      background-color: rgba($color-muted-inverse, 0.15);
-      border-color: $color-gray-light;
+      background-color: $choice-disabled-background-color-inverse;
+      border-color: $choice-disabled-border-color-inverse;
     }
   }
 
@@ -132,17 +154,21 @@ $ds-c-inset-border-width: $spacer-half;
   + label {
     min-height: $choice-size-small;
     padding-left: $choice-size-small + $spacer-1;
-    padding-top: 0;
 
     &::before {
       height: $choice-size-small;
+      // $choice-size-small is smaller than the choice label, we need to adjust it manually
       top: 2px;
       width: $choice-size-small;
     }
-  }
 
-  &:checked + label::before {
-    background-size: $choice-size-small;
+    &::after {
+      border-width: 0 0 3px 3px;
+      height: 3px;
+      left: 5px;
+      top: 8px;
+      width: 7px;
+    }
   }
 }
 

packages/design-system/src/styles/settings/variables/_build.scss

@@ -8,3 +8,6 @@ $ds-include-base-html-rulesets: true !default;
 
 // Set $ds-include-focus-styles to enable the beta CMSDS focus styles. These styles can be further customized via the `$focus-color` variable and `focus-text` mixin
 $ds-include-focus-styles: false !default;
+
+// Set $ds-include-choice-error-highlight to automatically add an error highlight to choice components inside a ChoiceList with an errorMessage.
+$ds-include-choice-error-highlight: false !default;

packages/design-system/src/styles/settings/variables/_forms.scss

@@ -9,10 +9,19 @@ $input-border-radius: $border-radius !default;
 $input-border-color: $color-base !default;
 $input-border-color-inverse: $color-black !default;
 
-$choice-checked-background-color: $color-primary !default;
+// Choice theme variables
+$choice-background-color: $color-background !default;
 $choice-border-color: $color-base !default;
+$choice-checked-background-color: $color-primary !default;
+$choice-checked-border-color: $color-primary !default;
+$choice-disabled-background-color: $color-gray-lighter !default;
+$choice-disabled-border-color: $color-gray-light !default;
+$choice-background-color-inverse: transparent !default;
 $choice-border-color-inverse: $color-white !default;
+$choice-disabled-background-color-inverse: rgba($color-muted-inverse, 0.15) !default;
+$choice-disabled-border-color-inverse: $color-gray-light !default;
 $choice-border-width: 2px !default;
+$choice-border-radius: 0 !default;
 $choice-size: $spacer-4 !default;
 $choice-size-small: 20px !default;