loading-spinner: Set spinner color to dark for certain buttons

Most spinners are either outside the button or inside a button whose
background changes accordingly with the color mode. However, there are
some buttons whose background color doesn't change with the color mode.
For those buttons that don't follow the color mode, we would like their
spinner color to be dark.

Author: eth3lbert

app/components/follow-button.hbs

@@ -11,7 +11,7 @@
   {{on "click" (perform this.toggleFollowTask)}}
 >
   {{#if (or this.followStateTask.isRunning this.toggleFollowTask.isRunning)}}
-    <LoadingSpinner data-test-spinner />
+    <LoadingSpinner class="dark" local-class="spinner" data-test-spinner />
   {{else}}
     {{#if this.following}}
       Unfollow

app/components/loading-spinner.module.css

@@ -1,8 +1,13 @@
 .spinner {
-    --spinner-color: light-dark(black, white);
-    --spinner-bg-color: light-dark(rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
+    --spinner-color: black;
+    --spinner-bg-color: rgba(0, 0, 0, .2);
     --spinner-size: 16px;
 
+    &:not(:global(.dark)) {
+        --spinner-color: light-dark(black, white);
+        --spinner-bg-color: light-dark(rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
+    }
+
     display: inline-block;
     height: var(--spinner-size);
     width: var(--spinner-size);

app/templates/index.hbs

@@ -51,7 +51,7 @@
   >
     Try Again
     {{#if this.dataTask.isRunning}}
-      <LoadingSpinner local-class="spinner" data-test-spinner />
+      <LoadingSpinner class="dark" local-class="spinner" data-test-spinner />
     {{/if}}
   </button>
 {{else}}

app/templates/settings/tokens/new.hbs

@@ -182,7 +182,7 @@
       Generate Token
 
       {{#if this.saveTokenTask.isRunning}}
-        <LoadingSpinner local-class="spinner" data-test-spinner />
+        <LoadingSpinner class="dark" local-class="spinner" data-test-spinner />
       {{/if}}
     </button>