animation: Use appropriate spinner asset in light variant

Ideally we would replace the sliced-image based animation with a
themed `process-working-symbolic` icon and rotate it, so the spinner
simply picks up the current foreground color.

Unfortunately the `repeat-count` property does not work for rotations,
so to fix the broken spinner in the light variant
in the meantime, include assets for both variants and swap them
out at runtime.

Not everything in the light variant is actually light (overview,
OSDs, ...), so use a simple heuristic on the text color to decide
which asset to use.

Close https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/6783

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3080>

data/gnome-shell-theme.gresource.xml

@@ -14,7 +14,8 @@
     <file>gnome-shell-high-contrast.css</file>
     <file>gnome-shell-start.svg</file>
     <file>pad-osd.css</file>
-    <file>process-working.svg</file>
+    <file>process-working-light.svg</file>
+    <file>process-working-dark.svg</file>
     <file>toggle-off.svg</file>
     <file>toggle-off-hc.svg</file>
     <file>toggle-off-light.svg</file>

js/ui/animation.js

@@ -138,8 +138,24 @@ class Spinner extends AnimatedIcon {
             animate: false,
             hideOnStop: false,
         });
-        let file = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/process-working.svg');
-        super._init(file, size);
+        this._fileDark = Gio.File.new_for_uri(
+            'resource:///org/gnome/shell/theme/process-working-dark.svg');
+        this._fileLight = Gio.File.new_for_uri(
+            'resource:///org/gnome/shell/theme/process-working-light.svg');
+        super._init(this._fileDark, size);
+
+        this.connect('style-changed', () => {
+            const themeNode = this.get_theme_node();
+            const textColor = themeNode.get_foreground_color();
+            const [, luminance] = textColor.to_hls();
+            const file = luminance > 0.5
+                ? this._fileDark
+                : this._fileLight;
+            if (file !== this._file) {
+                this._file = file;
+                this._loadFile();
+            }
+        });
 
         this.opacity = 0;
         this._animate = params.animate;