Function buildTheme

tools/xsbug/assets.js:192–353

($, codeFont)

};

function buildTheme($, codeFont) {
	const colors = globalThis.colors = {};
	const skins = globalThis.skins = {};
	const styles = globalThis.styles = {};
	
	skins.button = new Skin({ fill:$.button.fill, stroke:$.button.stroke });
	styles.button = new Style({ font:"semibold", color:$.button.color });
	styles.serialButton = new Style({ font:"semibold", color:$.button.color , left:15, right:15 });
	skins.iconButton = new Skin({ fill:$.iconButton.fill });
	styles.iconButton = new Style({ font:"semibold", color:$.iconButton.color });
	skins.icons = new Skin({ texture:textures.icons, color:$.iconButton.color, x:2, y:2, width:26, height:26, variants:30 });
	skins.divider = new Skin({ fill:$.divider.fill });
	skins.fieldScroller = new Skin({ fill: $.field.fill, stroke:$.field.stroke, borders: { left:1, right:1, bottom:1, top:1 } });
	skins.field = new Skin({ fill: [$.field.fill, $.fieldSelection.fill], });
	styles.field = new Style({ color:[$.field.color, $.fieldSelection.color], horizontal:"left", left:5, right:5 });
	skins.popupButton = new Skin({ fill:$.button.fill, stroke:$.button.stroke });
	styles.popupButton = new Style({ font:"semibold", color:$.button.color, horizontal:"left" }),
	skins.popupIcons = new Skin({ texture:textures.popup, color:$.popupMenuItem.color, x:0, y:0, width:20, height:30, variants:20 });
	skins.popupMenu = new Skin({ fill:$.popupMenu.fill, stroke:$.popupMenu.stroke, left:1, right:1, top:1, bottom:1 });
	skins.popupMenuItem = new Skin({ fill:$.popupMenuItem.fill });
	styles.popupMenuItem = new Style({ font: "semibold", color:$.popupMenuItem.color, horizontal:"left" });
	skins.popupMenuShadow = new Skin({ texture:textures.shadow, x:0, y:0, width:60, height:40, left:20, right:20, top:10, bottom:20 });
	skins.scrollbarThumb = new Skin({ fill:$.scrollbarThumb.fill });
	skins.horizontalScrollbar = new Skin({ fill:$.scrollbar.fill, stroke:$.scrollbar.stroke, top:1 });
	skins.verticalScrollbar = new Skin({ fill:$.scrollbar.fill, stroke:$.scrollbar.stroke, left:1 });
	skins.sliderBar = new Skin({ fill:$.sliderBar.fill, stroke:$.sliderBar.stroke });
	skins.sliderButton = new Skin({ fill:$.sliderButton.fill, stroke:$.sliderButton.stroke });
	skins.switchBar = new Skin({ fill:$.switchBar.fill, stroke:$.switchBar.stroke });
	skins.switchButton = new Skin({ fill:$.switchButton.fill, stroke:$.switchButton.stroke });
	
	// TABS
	skins.tabsPane = new Skin({ fill:$.tab.fill[1], stroke:$.divider.fill, borders: { bottom:1 }  });
	skins.tab = new Skin({ fill:$.tab.fill, stroke:$.tab.stroke, borders: { right:1 }  });
	styles.tab = new Style({ font:"semibold 12px Open Sans", color:$.tab.color, horizontal:"center", left:26, right:26 });
	styles.tabTest262 = new Style({ font:"semibold 12px Open Sans", color:$.tab.color, horizontal:"center", left:13, right:13 });
	styles.tabBreakpoint = new Style({ font:"bold 10px", horizontal:"right", right:15, color:$.tabBubble.color });
	skins.tabBubble = new Skin({ texture:textures.glyphs, color:$.tabBubble.fill, x:0, y:48, width:48, height:16 });
	styles.tabBubble = new Style({ font:"bold 10px", horizontal:"right", right:10, color:$.tabBreakpoint.color });

	// CODE, CONSOLE, PREFERENCES
	skins.paneBorder = new Skin({ fill:$.tableHeader.stroke });
	skins.paneHeader = new Skin({ fill:$.tableHeader.fill });
	styles.paneHeader = new Style({ font:"semibold", color:$.tableHeader.color, horizontal:"left" });

	// CODE
	styles.pathName = new Style({ font:"semibold", color:$.pathName.color, horizontal:"left" });
	styles.pathSpan = new Style({ font:"semibold 12px Open Sans", color:$.pathSpan.color, horizontal:"left" });
	
	skins.lineNumber = new Skin({ fill:$.lineNumber.fill, stroke:$.lineNumber.stroke, borders: { right:1 } });
	styles.lineNumber = new Style({ font:"bold 10px", horizontal:"right", right:15, color: [ $.lineNumber.color,$.lineBreakpoint.color ] });

	skins.lineBreakpoint = new Skin({ texture:textures.glyphs, color:["transparent", $.lineBreakpoint.fill], x:16, y:32, width:42, height:16, variants:42 });
	skins.lineCall = new Skin({ texture:textures.glyphs, color:["transparent", $.callRow.fill], x:0, y:32, width:16, height:16 });
	
	skins.background = new Skin({ fill:$.code.fill });
	skins.code = new Skin({ fill:[$.codeResult.fill, "transparent", $.codeSelection.fill, $.codeSelection.fill] });
	styles.code = new Style({ font:codeFont, horizontal:"left", left:8, right:8, color:[$.code.color, $.codeKeyword.color, $.codeLiteral.color, $.codeComment.color] });