Move placement styles

[liquidely]

Summary

Moving the placement colors logic from the Lakesideview rep to the Lua-Modules repo.
I don't think Lighthouse should own this because it's only used inside wiki content.

As a reference, these were the colors from Lakesideview:

$achievement-placement-1--light: var( --clr-semantic-gold-40 );
$achievement-placement-1--dark: var( --clr-semantic-gold-30 );
$achievement-placement-2--light: var( --clr-semantic-silver-40 );
$achievement-placement-2--dark: var( --clr-semantic-silver-40 );
$achievement-placement-3--light: var( --clr-semantic-bronze-40 );
$achievement-placement-3--dark: var( --clr-semantic-bronze-30 );
$achievement-placement-4--light: var( --clr-semantic-copper-40 );
$achievement-placement-4--dark: var( --clr-semantic-copper-30 );
$achievement-placement-5--light: wikiColorFromMap( elm, 40 );
$achievement-placement-5--dark: wikiColorFromMap( elm, 30 );
$achievement-placement-6--light: wikiColorFromMap( elm, 30 );
$achievement-placement-6--dark: wikiColorFromMap( elm, 20 );
$achievement-placement-lose--light: var( --clr-secondary-70 );
$achievement-placement-lose--dark: var( --clr-secondary-25 );
$achievement-placement-draw--light: var( --clr-tuliptree-80 );
$achievement-placement-draw--dark: var( --clr-tuliptree-40 );
$achievement-placement-lightblue--light: var( --clr-elm-40 );
$achievement-placement-lightblue--dark: mix( #000000, wikiColorFromMap( elm, 40 ), 20% );
$achievement-placement-blue--light: var( --clr-elm-30 );
$achievement-placement-blue--dark: mix( #000000, wikiColorFromMap( elm, 30 ), 20% );
$achievement-placement-darkblue--light: var( --clr-elm-20 );
$achievement-placement-darkblue--dark: mix( #000000, wikiColorFromMap( elm, 20 ), 20% );
$achievement-placement-darkgrey--light: var( --clr-elm-10 );
$achievement-placement-darkgrey--dark: var( --clr-elm-10 );
$achievement-placement-win--light: var( --clr-semantic-positive-40 );
$achievement-placement-win--dark: var( --clr-semantic-positive-20 );
$achievement-placement-dnp--light: var( --clr-moon-80 );
$achievement-placement-dnp--dark: mix( #000000, wikiColorFromMap( moon, 80 ), 20% );
$achievement-placement-stay--light: var( --clr-sun-40 );
$achievement-placement-stay--dark: var( --clr-sun-30 );
$achievement-placement-up--light: var( --clr-atlantis-40 );
$achievement-placement-up--dark: var( --clr-atlantis-30 );
$achievement-placement-down--light: mix( #ffffff, semanticColorFromMap( negative, 40 ), 30% );
$achievement-placement-down--dark: var( --clr-semantic-negative-30 );

I also made the code a little shorter and removed the fallback, because always either theme--light or theme--dark is applied.

Related MR

https://gitlab.com/teamliquid-dev/liquipedia/web/skins/lakesideview/-/merge_requests/192

How did you test this change?

I tested it on https://laura.wiki.tldev.eu/rocketleague/Rocket_League_Championship_Series/2021-22/Fall#Interregional_Matchups
CSS changed here https://laura.wiki.tldev.eu/commons/MediaWiki:Common.css/Miscellaneous.scss

[Copilot]

Pull request overview

Moves the “achievement placement” background-color styling into Lua-Modules and rewrites the per-placement rules into a single Sass map + @each loop with theme-aware light/dark variants.

Changes:

• Replaces individual .placement-* background-color rules with a $placement-colors map and generated selectors.
• Switches placement colors to use the --clr-* design tokens and theme-specific overrides via .theme--light / .theme--dark.
• Introduces color-mix() for a few runtime-mixed colors (e.g., dark variants of blues, and the “down” light variant).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[liquidely]

I think the support for color-mix() is good enough 🤷‍♀️ https://caniuse.com/?search=color-mix

[hjpalpha]

lgtm on phone