User:Canadabonk/sandbox.js

/*

this script achieves 1 thing: get all the colors input into the 
"Manage this wiki's additional settings" styling tab for Cosmos,
and then printing it into a <pre> block or a table.

you should then copy the <pre> block generated into cosmos.css 
on your wiki, or whichever appropriate stylesheet.

to generate the <pre> block, put 
<div id="printCSSVars"></div>
in a sandbox page (or on any page)

to generate a table, put
<div id="printCSSVarsTable"></div>

after you've copied the contents of the <pre> block to the appropriate
css page, you can technically remove this script.

*/
$(document).ready(function(){
if (mw.config.get('skin') == 'cosmos') {
	
	const
		mainBackgroundColor = $('body').css('background-color'),
		contentBackgroundColor = $('#mw-content').css('background-color'),
		
		fontColor = $('#mw-content').css('color'),
		linkColor = $('#content a:not(.new').css('color'),
		
		bannerColor = $('#cosmos-banner').css('background-color'),
		bannerTextColor = $('.cosmos-bannerOption-dropdownIcon').css('fill'),
		
		headerColor = $('.cosmos-header').css('background-color'),
		headerTextColor = $('.cosmos-header__counter').css('color'),
		
		buttonColor = $('.cosmos-button-primary').css('background-color'),
		buttonTextColor = $('.cosmos-button-primary').css('color'),
		
		footerColor = $('#cosmos-footer').css('background-color');
		
	function cssVar(name, val, desc) {
		this.name = name;
		this.val = val;
		this.desc = desc ? desc : "none";
	}
	
	const variablesList = {
		mainbgcolor: new cssVar('--main-background-color', mainBackgroundColor, "used for background behind content block. hidden if there is a background image"),
		contentbgcolor: new cssVar('--content-background-color', contentBackgroundColor, "background of the content block"),
		fontcolor: new cssVar('--text-color', fontColor, "main text color"),
		linkcolor: new cssVar('--link-color', linkColor, "link color"),
		bannercolor: new cssVar('--banner-color', bannerColor, "top banner background color (where the search bar is)"),
		bannertextcolor: new cssVar('--banner-text-color', bannerTextColor, "banner text color"),
		headercolor: new cssVar('--header-color', headerColor, "header background color (where the wiki name and logo is"),
		headertextcolor: new cssVar('--header-text-color', headerTextColor, "header text color"),
		buttoncolor: new cssVar('--button-color', buttonColor, "button background color"),
		buttontext: new cssVar('--button-text-color', buttonTextColor, "button text color"),
		footercolor: new cssVar('--footer-color', footerColor, "footer background color"),
	};
	
	function variablesListCSS() {
		text = "";
		for (var x in variablesList){
			text += "	" + variablesList[x].name + ": " + variablesList[x].val + ";\n";
		}
		return text;
	}
		
	const newCSSVariables = 
`:root {
${variablesListCSS()}
}`;
	
	$('head link[rel=stylesheet]').first().after('<style>' + newCSSVariables + '</style>');
	
	$('#printCSSVars').append(
`<pre>
${newCSSVariables}
</pre>`);

	$('#printCSSVarsTable').append(printCSSVarsTable());
		
	function printCSSVarsTable() {
		table = '<table class="wikitable"><tr><th>CSS variable</th><th>Value</th><th>Description</th></tr>';
		for (var x in variablesList){
			table += `<tr><td>${variablesList[x].name}</td><td><div style="display:inline-block;margin-right:0.5em;width:1em;height:1em;border:1px solid black;background-color:${variablesList[x].val};"></div>${variablesList[x].val}</td><td>${variablesList[x].desc}</td>`;
		}
		table += '</table>';
		return table;
	}
	
	if ($('.cosmos-header').css('background-image') == "none") {
		mw.util.addCSS('.cosmos-header::before {display:none}');
	}
}
});