Use gitlab-ui utils in toggle_button.vue, etc

For any uses of .toggle-icon-svg, replace
it with gitlab-ui util classes

app/assets/javascripts/vue_shared/components/toggle_button.vue

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import { s__ } from '../../locale';
-import icon from './icon.vue';
+import Icon from './icon.vue';
 const ICON_ON = 'status_success_borderless';
 const ICON_OFF = 'status_failed_borderless';
@@ -10,7 +10,7 @@ const LABEL_OFF = s__('ToggleButton|Toggle Status: OFF');
 export default {
   components: {
-    icon,
+    Icon,
     GlLoadingIcon,
   },
@@ -63,18 +63,27 @@ export default {
   <label class="toggle-wrapper">
     <input v-if="name" :name="name" :value="value" type="hidden" />
     <button
+      type="button"
+      role="switch"
+      class="project-feature-toggle"
       :aria-label="ariaLabel"
+      :aria-checked="value"
       :class="{
         'is-checked': value,
+        'gl-blue-500': value,
         'is-disabled': disabledInput,
         'is-loading': isLoading,
       }"
-      type="button"
-      class="project-feature-toggle"
       @click="toggleFeature"
     >
       <gl-loading-icon class="loading-icon" />
-      <span class="toggle-icon"> <icon :name="toggleIcon" class="toggle-icon-svg" /> </span>
+      <span class="toggle-icon gl-bg-white">
+        <icon
+          :size="18"
+          :name="toggleIcon"
+          :class="value ? 'gl-fill-blue-500' : 'gl-fill-gray-400'"
+        />
+      </span>
     </button>
   </label>
 </template>

app/assets/stylesheets/framework/toggle.scss

@@ -31,7 +31,7 @@
   height: 24px;
   cursor: pointer;
   user-select: none;
-  background: $gl-gray-400;
+  background: $gray-400;
   border-radius: 12px;
   padding: 3px;
   transition: all 0.4s ease;
@@ -51,18 +51,13 @@
     display: block;
     left: 0;
     border-radius: 9px;
-    background: $feature-toggle-color;
+    background: $white;
     transition: all 0.2s ease;
-    &,
-    .toggle-icon-svg {
+    & {
       width: $default-icon-size;
       height: $default-icon-size;
     }
-
-    .toggle-icon-svg {
-      fill: $gl-gray-400;
-    }
   }
   .loading-icon {
@@ -89,14 +84,10 @@
   }
   &.is-checked {
-    background: $feature-toggle-color-enabled;
+    background: $blue-400;
     .toggle-icon {
       left: calc(100% - 18px);
-
-      .toggle-icon-svg {
-        fill: $feature-toggle-color-enabled;
-      }
     }
   }

app/assets/stylesheets/framework/variables.scss

@@ -748,10 +748,6 @@ $login-brand-holder-color: #888;
 $project-option-descr-color: #54565b;
 $project-network-controls-color: #888;
-$feature-toggle-color: #fff;
-$feature-toggle-text-color: #fff;
-$feature-toggle-color-enabled: #4a8bee;
-
 /*
  * Monitor Charts
  */

app/views/projects/pages_domains/_certificate.html.haml

@@ -19,8 +19,8 @@
           "aria-label": _("Automatic certificate management using Let's Encrypt") }
           = f.hidden_field :auto_ssl_enabled?, class: "js-project-feature-toggle-input"
           %span.toggle-icon
-            = sprite_icon("status_success_borderless", size: 16, css_class: "toggle-icon-svg toggle-status-checked")
-            = sprite_icon("status_failed_borderless", size: 16, css_class: "toggle-icon-svg toggle-status-unchecked")
+            = sprite_icon("status_success_borderless", size: 16, css_class: "gl-fill-blue-500 toggle-status-checked")
+            = sprite_icon("status_failed_borderless", size: 16, css_class: "gl-fill-gray-400 toggle-status-unchecked")
         %p.text-secondary.mt-3
           - docs_link_url = help_page_path("user/project/pages/custom_domains_ssl_tls_certification/lets_encrypt_integration.md")
           - docs_link_start = "<a href=\"%{docs_link_url}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-nowrap\">".html_safe % { docs_link_url: docs_link_url }

app/views/shared/buttons/_project_feature_toggle.html.haml

@@ -12,5 +12,5 @@
   - if yield.present?
     = yield
   %span.toggle-icon
-    = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
-    = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
+    = sprite_icon('status_success_borderless', size: 16, css_class: 'gl-fill-blue-500 toggle-status-checked')
+    = sprite_icon('status_failed_borderless', size: 16, css_class: 'gl-fill-gray-400 toggle-status-unchecked')