loading-spinner: Set spinner theme to light 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 add a light theme
for them.

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 @theme="light" data-test-spinner />
   {{else}}
     {{#if this.following}}
       Unfollow

app/components/loading-spinner.hbs

@@ -1,4 +1,5 @@
 <div
+  class="{{if (eq @theme 'light') 'light'}}"
   local-class="spinner"
   ...attributes
 >

app/components/loading-spinner.module.css

@@ -7,6 +7,10 @@
     height: var(--spinner-size);
     width: var(--spinner-size);
 
+    &:global(.light) {
+        --spinner-bg-color: rgba(0, 0, 0, .2);
+    }
+
     &:after {
         content: " ";
         display: block;

app/templates/index.hbs

@@ -51,7 +51,7 @@
   >
     Try Again
     {{#if this.dataTask.isRunning}}
-      <LoadingSpinner local-class="spinner" data-test-spinner />
+      <LoadingSpinner @theme="light" 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 @theme="light" local-class="spinner" data-test-spinner />
       {{/if}}
     </button>