Add a noncolor indicator to `cmn-toggle` (#8584)

* simplify `cmn-toggle` css

* `cmn-toggle` simplification WIP

* restore color and shadow when hovering

metal still misaligned

* `cmn-toggle` tweak

* return to the initial size of `cmn-toggle`

* add non colored indicator to `cmn-toggle`

* 2nd version of making `_cmn-toggle` color-blind friendly

* fix `cmn-toggle--subtle`

make the cross grey

* fix cross position of `cmn-toggle`

* format with prettier

* factor out css for `cmn-toggle`

ui/common/css/form/_cmn-toggle.scss

@@ -10,41 +10,44 @@
   outline: none;
   -webkit-user-select: none;
   -moz-user-select: none;
-}
-
-.cmn-toggle + label {
   padding: 1px;
   width: 40px;
   height: 24px;
-  background-color: $c-border;
+  border: 1px solid $c-border;
   border-radius: 24px;
 }
 
+.cmn-toggle:not(:checked) + label {
+  background-color: $c-bad;
+}
+
+.cmn-toggle--subtle:not(:checked) + label {
+  background-color: $c-font-dimmer;
+}
+
+.cmn-toggle:checked + label {
+  background-color: $c-good;
+}
+
 .cmn-toggle + label::before,
 .cmn-toggle + label::after {
   display: block;
   position: absolute;
-  top: 1px;
-  left: 1px;
-  bottom: 1px;
   content: '';
 }
 
 .cmn-toggle + label::before {
+  @extend %data-icon;
   right: 1px;
-  background-color: $c-bad;
   border-radius: 24px;
+  z-index: 1;
 }
 
-.cmn-toggle:focus + label::before {
+.cmn-toggle:focus + label {
   @extend %focus-shadow;
 }
 
-.cmn-toggle--subtle + label::before {
-  background-color: $c-font-dimmer;
-}
-
-.cmn-toggle:hover + label::before {
+.cmn-toggle:hover + label {
   @extend %focus-shadow;
 
   @include transition(background);
@@ -54,8 +57,11 @@
   @extend %metal;
 
   width: 22px;
+  height: 22px;
   border-radius: 100%;
   box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.3);
+  bottom: 0.1px;
+  left: 0;
 }
 
 .cmn-toggle:hover + label::after {
@@ -64,10 +70,28 @@
   @include transition(margin);
 }
 
-.cmn-toggle:checked + label::before {
-  background-color: $c-good;
+.cmn-toggle:not(:checked) + label {
+  &::before {
+    content: 'L';
+    color: $c-bad;
+    padding-right: 1.05em;
+  }
 }
 
-.cmn-toggle:checked + label::after {
-  margin-left: 16px;
+.cmn-toggle--subtle:not(:checked) + label {
+  &::before {
+    color: $c-font-dimmer;
+  }
+}
+
+.cmn-toggle:checked + label {
+  &::after {
+    margin-left: 15.5px;
+  }
+
+  &::before {
+    content: 'E';
+    color: $c-good;
+    padding-right: 0.1em;
+  }
 }