Align Skillmap loading icon with MakeCode branding

[Copilot]

The Skillmap cloud-save loader displayed the target’s Arcade orange logo instead of the MakeCode brand color. Recolor the shared loader to MakeCode magenta while preserving the existing logo and animation.

• Loader styling
  • Apply a 290deg hue rotation to the shared loading logo.
  • Covers both cloud-sync and embedded-editor loading states.
  • Preserves the existing high-contrast override.

.makecode-frame-loader img {
    filter: hue-rotate(290deg);
}

• Fixes MakeCode loading icon color pxt-arcade#7667

[Abhijith Chatra (abchatra)]

Joey Wunderlich (@jwunderl) can you take a look. No clue it this is right.

[Richard Knoll (riknoll)]

this is a very funny way to fix this bug and 100% not right.

probably will still have to be a filter on the image of some sort, but we want it to remap to a theme color and not just rotate the hue. i don't think you can accomplish this with css alone, you'll probably need to define an SVG filter to do it.

or we could edit the source svg and change the fill values to "currentColor", but I don't know if that works in svgs that are referenced via an <img> element

[Richard Knoll (riknoll)]

oh, or actually the easiest way to do it is probably to use the image as a mask on a colored div

[Richard Knoll (riknoll)]

and this change should also probably be in pxt-arcade, not pxt since we don't want to affect all of the loaders. minecraft's loader is a full color gif so we don't need to do any filtering there

[Abhijith Chatra (abchatra)]

Copilot can you implement Richard Knoll (@riknoll) comments?

[Copilot]

this is a very funny way to fix this bug and 100% not right.

probably will still have to be a filter on the image of some sort, but we want it to remap to a theme color and not just rotate the hue....

Dropped the hue-rotate in 2ca7093 and replaced it with the mask approach: LoaderLogo now renders the logo <img> with an absolutely positioned overlay whose mask-image is the logo and whose background-color is --pxt-loader-logo-color. That variable defaults to transparent, so this repo's default rendering is unchanged (minecraft's full-color gif etc. are unaffected), and pxt-arcade can remap the logo to a theme color by setting --pxt-loader-logo-color — including straight from its color theme JSON, since those keys are emitted as CSS variables on .pxt-theme-root. The animation moved to the wrapper so the image and overlay stay in sync, and high contrast keeps the grayscale override with the overlay hidden.

Copilot can you implement Richard Knoll (@riknoll) comments?

Done in 2ca7093 — the loader now uses a masked colored overlay driven by --pxt-loader-logo-color instead of a hue rotation, and pxt has no visual change by default. Since the recolor should live in the target (per Richard Knoll (@riknoll)), the Arcade-specific color needs a follow-up in pxt-arcade setting --pxt-loader-logo-color (e.g. in its color theme JSON); I can't push to that repo from here.