Fixes missing color variables

Moves css variables to root rather than body

src/system/color.ts

@@ -358,6 +358,10 @@ export class HSVA {
 	}
 }
 
+export function getCssVariable(variable: string, css: { getPropertyValue(property: string): string }): string {
+	return css.getPropertyValue(variable).trim();
+}
+
 export class Color {
 	static from(value: string | Color): Color {
 		if (value instanceof Color) return value;
@@ -366,7 +370,7 @@ export class Color {
 	}
 
 	static fromCssVariable(variable: string, css: { getPropertyValue(property: string): string }): Color {
-		return parseColor(css.getPropertyValue(variable).trim()) || Color.red;
+		return parseColor(getCssVariable(variable, css)) || Color.red;
 	}
 
 	static fromHex(hex: string): Color {
@@ -679,12 +683,10 @@ export function format(color: Color): string {
 
 const cssColorRegex = /^((?:rgb|hsl)a?)\((-?\d+%?)[,\s]+(-?\d+%?)[,\s]+(-?\d+%?)[,\s]*(-?[\d.]+%?)?\)$/i;
 export function parseColor(value: string): Color | null {
-	const length = value.length;
+	value = value.trim();
 
 	// Invalid color
-	if (length === 0) {
-		return null;
-	}
+	if (value.length === 0) return null;
 
 	// Begin with a #
 	if (value.charCodeAt(0) === CharCode.Hash) {
@@ -692,9 +694,7 @@ export function parseColor(value: string): Color | null {
 	}
 
 	const result = cssColorRegex.exec(value);
-	if (result == null) {
-		return null;
-	}
+	if (result == null) return null;
 
 	const mode = result[1];
 	let colors: number[];
@@ -730,54 +730,51 @@ export function parseColor(value: string): Color | null {
  */
 export function parseHexColor(hex: string): Color | null {
 	hex = hex.trim();
-
 	const length = hex.length;
-	if (length === 0) {
-		// Invalid color
-		return null;
-	}
 
+	// Invalid color
+	if (length === 0) return null;
+
+	// Begin with a #
 	if (hex.charCodeAt(0) !== CharCode.Hash) {
-		// Does not begin with a #
 		return null;
 	}
 
-	if (length === 7) {
-		// #RRGGBB format
-		const r = 16 * _parseHexDigit(hex.charCodeAt(1)) + _parseHexDigit(hex.charCodeAt(2));
-		const g = 16 * _parseHexDigit(hex.charCodeAt(3)) + _parseHexDigit(hex.charCodeAt(4));
-		const b = 16 * _parseHexDigit(hex.charCodeAt(5)) + _parseHexDigit(hex.charCodeAt(6));
-		return new Color(new RGBA(r, g, b, 1));
-	}
-
-	if (length === 9) {
-		// #RRGGBBAA format
-		const r = 16 * _parseHexDigit(hex.charCodeAt(1)) + _parseHexDigit(hex.charCodeAt(2));
-		const g = 16 * _parseHexDigit(hex.charCodeAt(3)) + _parseHexDigit(hex.charCodeAt(4));
-		const b = 16 * _parseHexDigit(hex.charCodeAt(5)) + _parseHexDigit(hex.charCodeAt(6));
-		const a = 16 * _parseHexDigit(hex.charCodeAt(7)) + _parseHexDigit(hex.charCodeAt(8));
-		return new Color(new RGBA(r, g, b, a / 255));
-	}
-
-	if (length === 4) {
-		// #RGB format
-		const r = _parseHexDigit(hex.charCodeAt(1));
-		const g = _parseHexDigit(hex.charCodeAt(2));
-		const b = _parseHexDigit(hex.charCodeAt(3));
-		return new Color(new RGBA(16 * r + r, 16 * g + g, 16 * b + b));
-	}
-
-	if (length === 5) {
-		// #RGBA format
-		const r = _parseHexDigit(hex.charCodeAt(1));
-		const g = _parseHexDigit(hex.charCodeAt(2));
-		const b = _parseHexDigit(hex.charCodeAt(3));
-		const a = _parseHexDigit(hex.charCodeAt(4));
-		return new Color(new RGBA(16 * r + r, 16 * g + g, 16 * b + b, (16 * a + a) / 255));
+	switch (length) {
+		case 7: {
+			// #RRGGBB format
+			const r = 16 * _parseHexDigit(hex.charCodeAt(1)) + _parseHexDigit(hex.charCodeAt(2));
+			const g = 16 * _parseHexDigit(hex.charCodeAt(3)) + _parseHexDigit(hex.charCodeAt(4));
+			const b = 16 * _parseHexDigit(hex.charCodeAt(5)) + _parseHexDigit(hex.charCodeAt(6));
+			return new Color(new RGBA(r, g, b, 1));
+		}
+		case 9: {
+			// #RRGGBBAA format
+			const r = 16 * _parseHexDigit(hex.charCodeAt(1)) + _parseHexDigit(hex.charCodeAt(2));
+			const g = 16 * _parseHexDigit(hex.charCodeAt(3)) + _parseHexDigit(hex.charCodeAt(4));
+			const b = 16 * _parseHexDigit(hex.charCodeAt(5)) + _parseHexDigit(hex.charCodeAt(6));
+			const a = 16 * _parseHexDigit(hex.charCodeAt(7)) + _parseHexDigit(hex.charCodeAt(8));
+			return new Color(new RGBA(r, g, b, a / 255));
+		}
+		case 4: {
+			// #RGB format
+			const r = _parseHexDigit(hex.charCodeAt(1));
+			const g = _parseHexDigit(hex.charCodeAt(2));
+			const b = _parseHexDigit(hex.charCodeAt(3));
+			return new Color(new RGBA(16 * r + r, 16 * g + g, 16 * b + b));
+		}
+		case 5: {
+			// #RGBA format
+			const r = _parseHexDigit(hex.charCodeAt(1));
+			const g = _parseHexDigit(hex.charCodeAt(2));
+			const b = _parseHexDigit(hex.charCodeAt(3));
+			const a = _parseHexDigit(hex.charCodeAt(4));
+			return new Color(new RGBA(16 * r + r, 16 * g + g, 16 * b + b, (16 * a + a) / 255));
+		}
+		default:
+			// Invalid color
+			return null;
 	}
-
-	// Invalid color
-	return null;
 }
 
 function _parseHexDigit(charCode: CharCode): number {

src/webviews/apps/plus/graph/graph.scss

@@ -21,22 +21,7 @@
 	--titlebar-bg: var(--color-background--darken-075);
 }
 
-body {
-	.vertical_scrollbar,
-	.horizontal_scrollbar {
-		border-color: transparent;
-		transition: border-color 1s linear;
-	}
-
-	&:hover,
-	&:focus-within {
-		.vertical_scrollbar,
-		.horizontal_scrollbar {
-			transition: border-color 0.1s linear;
-			border-color: var(--vscode-scrollbarSlider-background);
-		}
-	}
-
+:root {
 	--titlebar-fg: var(--color-foreground--65);
 	--color-graph-contrast-border: var(--vscode-list-focusOutline);
 	--color-graph-selected-row: var(--vscode-list-activeSelectionBackground);
@@ -110,6 +95,23 @@ body {
 	--branch-status-both-foreground: var(--vscode-gitlens-decorations\.branchDivergedForegroundColor);
 }
 
+body {
+	.vertical_scrollbar,
+	.horizontal_scrollbar {
+		border-color: transparent;
+		transition: border-color 1s linear;
+	}
+
+	&:hover,
+	&:focus-within {
+		.vertical_scrollbar,
+		.horizontal_scrollbar {
+			transition: border-color 0.1s linear;
+			border-color: var(--vscode-scrollbarSlider-background);
+		}
+	}
+}
+
 ::-webkit-scrollbar-corner {
 	background-color: transparent !important;
 }

src/webviews/apps/plus/graph/graph.tsx

@@ -52,7 +52,7 @@ import {
 	UpdateRefsVisibilityCommandType,
 	UpdateSelectionCommandType,
 } from '../../../../plus/webviews/graph/protocol';
-import { Color, darken, lighten, mix, opacity } from '../../../../system/color';
+import { Color, darken, getCssVariable, lighten, mix, opacity } from '../../../../system/color';
 import { debounce } from '../../../../system/function';
 import type { IpcMessage, IpcNotificationType } from '../../../protocol';
 import { onIpc } from '../../../protocol';
@@ -346,30 +346,30 @@ export class GraphApp extends App {
 	}
 
 	protected override onThemeUpdated(e: ThemeChangeEvent) {
-		const bodyStyle = document.body.style;
-		bodyStyle.setProperty('--graph-theme-opacity-factor', e.isLightTheme ? '0.5' : '1');
+		const rootStyle = document.documentElement.style;
+		rootStyle.setProperty('--graph-theme-opacity-factor', e.isLightTheme ? '0.5' : '1');
 
-		bodyStyle.setProperty(
+		rootStyle.setProperty(
 			'--color-graph-actionbar-background',
 			e.isLightTheme ? darken(e.colors.background, 5) : lighten(e.colors.background, 5),
 		);
 
-		bodyStyle.setProperty(
+		rootStyle.setProperty(
 			'--color-graph-background',
 			e.isLightTheme ? darken(e.colors.background, 5) : lighten(e.colors.background, 5),
 		);
-		bodyStyle.setProperty(
+		rootStyle.setProperty(
 			'--color-graph-background2',
 			e.isLightTheme ? darken(e.colors.background, 10) : lighten(e.colors.background, 10),
 		);
 
-		const color = e.computedStyle.getPropertyValue('--color-graph-text-selected-row').trim();
-		bodyStyle.setProperty('--color-graph-text-dimmed-selected', opacity(color, 50));
-		bodyStyle.setProperty('--color-graph-text-dimmed', opacity(e.colors.foreground, 20));
+		const color = getCssVariable('--color-graph-text-selected-row', e.computedStyle);
+		rootStyle.setProperty('--color-graph-text-dimmed-selected', opacity(color, 50));
+		rootStyle.setProperty('--color-graph-text-dimmed', opacity(e.colors.foreground, 20));
 
-		bodyStyle.setProperty('--color-graph-text-normal', opacity(e.colors.foreground, 85));
-		bodyStyle.setProperty('--color-graph-text-secondary', opacity(e.colors.foreground, 65));
-		bodyStyle.setProperty('--color-graph-text-disabled', opacity(e.colors.foreground, 50));
+		rootStyle.setProperty('--color-graph-text-normal', opacity(e.colors.foreground, 85));
+		rootStyle.setProperty('--color-graph-text-secondary', opacity(e.colors.foreground, 65));
+		rootStyle.setProperty('--color-graph-text-disabled', opacity(e.colors.foreground, 50));
 
 		const backgroundColor = Color.from(e.colors.background);
 		const foregroundColor = Color.from(e.colors.foreground);
@@ -394,38 +394,38 @@ export class GraphApp extends App {
 		// minimap and scroll markers
 
 		let c = Color.fromCssVariable('--vscode-scrollbarSlider-background', e.computedStyle);
-		bodyStyle.setProperty(
+		rootStyle.setProperty(
 			'--color-graph-minimap-visibleAreaBackground',
 			c.luminance(themeLuminance(e.isLightTheme ? 0.6 : 0.1)).toString(),
 		);
 
 		if (!e.isLightTheme) {
 			c = Color.fromCssVariable('--color-graph-scroll-marker-local-branches', e.computedStyle);
-			bodyStyle.setProperty(
+			rootStyle.setProperty(
 				'--color-graph-minimap-tip-branchBackground',
 				c.luminance(themeLuminance(0.55)).toString(),
 			);
 
 			c = Color.fromCssVariable('--color-graph-scroll-marker-local-branches', e.computedStyle);
-			bodyStyle.setProperty(
+			rootStyle.setProperty(
 				'--color-graph-minimap-tip-branchBorder',
 				c.luminance(themeLuminance(0.55)).toString(),
 			);
 
 			c = Color.fromCssVariable('--vscode-editor-foreground', e.computedStyle);
-			bodyStyle.setProperty(
+			rootStyle.setProperty(
 				'--color-graph-minimap-tip-branchForeground',
 				c.isLighter() ? c.luminance(0.01).toString() : c.luminance(0.99).toString(),
 			);
 
 			c = Color.fromCssVariable('--vscode-editor-foreground', e.computedStyle);
-			bodyStyle.setProperty(
+			rootStyle.setProperty(
 				'--color-graph-minimap-tip-headForeground',
 				c.isLighter() ? c.luminance(0.01).toString() : c.luminance(0.99).toString(),
 			);
 
 			c = Color.fromCssVariable('--vscode-editor-foreground', e.computedStyle);
-			bodyStyle.setProperty(
+			rootStyle.setProperty(
 				'--color-graph-minimap-tip-upstreamForeground',
 				c.isLighter() ? c.luminance(0.01).toString() : c.luminance(0.99).toString(),
 			);
@@ -436,36 +436,36 @@ export class GraphApp extends App {
 		const branchStatusPillLuminance = themeLuminance(e.isLightTheme ? 0.92 : 0.02);
 		// branch status ahead
 		c = Color.fromCssVariable('--branch-status-ahead-foreground', e.computedStyle);
-		bodyStyle.setProperty('--branch-status-ahead-background', c.luminance(branchStatusLuminance).toString());
-		bodyStyle.setProperty(
+		rootStyle.setProperty('--branch-status-ahead-background', c.luminance(branchStatusLuminance).toString());
+		rootStyle.setProperty(
 			'--branch-status-ahead-hover-background',
 			c.luminance(branchStatusHoverLuminance).toString(),
 		);
-		bodyStyle.setProperty(
+		rootStyle.setProperty(
 			'--branch-status-ahead-pill-background',
 			c.luminance(branchStatusPillLuminance).toString(),
 		);
 
 		// branch status behind
 		c = Color.fromCssVariable('--branch-status-behind-foreground', e.computedStyle);
-		bodyStyle.setProperty('--branch-status-behind-background', c.luminance(branchStatusLuminance).toString());
-		bodyStyle.setProperty(
+		rootStyle.setProperty('--branch-status-behind-background', c.luminance(branchStatusLuminance).toString());
+		rootStyle.setProperty(
 			'--branch-status-behind-hover-background',
 			c.luminance(branchStatusHoverLuminance).toString(),
 		);
-		bodyStyle.setProperty(
+		rootStyle.setProperty(
 			'--branch-status-behind-pill-background',
 			c.luminance(branchStatusPillLuminance).toString(),
 		);
 
 		// branch status both
 		c = Color.fromCssVariable('--branch-status-both-foreground', e.computedStyle);
-		bodyStyle.setProperty('--branch-status-both-background', c.luminance(branchStatusLuminance).toString());
-		bodyStyle.setProperty(
+		rootStyle.setProperty('--branch-status-both-background', c.luminance(branchStatusLuminance).toString());
+		rootStyle.setProperty(
 			'--branch-status-both-hover-background',
 			c.luminance(branchStatusHoverLuminance).toString(),
 		);
-		bodyStyle.setProperty(
+		rootStyle.setProperty(
 			'--branch-status-both-pill-background',
 			c.luminance(branchStatusPillLuminance).toString(),
 		);
@@ -496,15 +496,15 @@ export class GraphApp extends App {
 
 	private getGraphTheming(): { cssVariables: CssVariables; themeOpacityFactor: number } {
 		// this will be called on theme updated as well as on config updated since it is dependent on the column colors from config changes and the background color from the theme
-		const computedStyle = window.getComputedStyle(document.body);
-		const bgColor = computedStyle.getPropertyValue('--color-background');
+		const computedStyle = window.getComputedStyle(document.documentElement);
+		const bgColor = getCssVariable('--color-background', computedStyle);
 
 		const mixedGraphColors: CssVariables = {};
 
 		let i = 0;
 		let color;
 		for (const [colorVar, colorDefault] of graphLaneThemeColors) {
-			color = computedStyle.getPropertyValue(colorVar) || colorDefault;
+			color = getCssVariable(colorVar, computedStyle) || colorDefault;
 
 			mixedGraphColors[`--column-${i}-color`] = color;
 
@@ -524,34 +524,34 @@ export class GraphApp extends App {
 		return {
 			cssVariables: {
 				'--app__bg0': bgColor,
-				'--panel__bg0': computedStyle.getPropertyValue('--color-graph-background'),
-				'--panel__bg1': computedStyle.getPropertyValue('--color-graph-background2'),
-				'--section-border': computedStyle.getPropertyValue('--color-graph-background2'),
+				'--panel__bg0': getCssVariable('--color-graph-background', computedStyle),
+				'--panel__bg1': getCssVariable('--color-graph-background2', computedStyle),
+				'--section-border': getCssVariable('--color-graph-background2', computedStyle),
 
-				'--selected-row': computedStyle.getPropertyValue('--color-graph-selected-row'),
+				'--selected-row': getCssVariable('--color-graph-selected-row', computedStyle),
 				'--selected-row-border': isHighContrastTheme
-					? `1px solid ${computedStyle.getPropertyValue('--color-graph-contrast-border')}`
+					? `1px solid ${getCssVariable('--color-graph-contrast-border', computedStyle)}`
 					: 'none',
-				'--hover-row': computedStyle.getPropertyValue('--color-graph-hover-row'),
+				'--hover-row': getCssVariable('--color-graph-hover-row', computedStyle),
 				'--hover-row-border': isHighContrastTheme
-					? `1px dashed ${computedStyle.getPropertyValue('--color-graph-contrast-border')}`
+					? `1px dashed ${getCssVariable('--color-graph-contrast-border', computedStyle)}`
 					: 'none',
 
-				'--text-selected': computedStyle.getPropertyValue('--color-graph-text-selected'),
-				'--text-selected-row': computedStyle.getPropertyValue('--color-graph-text-selected-row'),
-				'--text-hovered': computedStyle.getPropertyValue('--color-graph-text-hovered'),
-				'--text-dimmed-selected': computedStyle.getPropertyValue('--color-graph-text-dimmed-selected'),
-				'--text-dimmed': computedStyle.getPropertyValue('--color-graph-text-dimmed'),
-				'--text-normal': computedStyle.getPropertyValue('--color-graph-text-normal'),
-				'--text-secondary': computedStyle.getPropertyValue('--color-graph-text-secondary'),
-				'--text-disabled': computedStyle.getPropertyValue('--color-graph-text-disabled'),
-
-				'--text-accent': computedStyle.getPropertyValue('--color-link-foreground'),
-				'--text-inverse': computedStyle.getPropertyValue('--vscode-input-background'),
-				'--text-bright': computedStyle.getPropertyValue('--vscode-input-background'),
+				'--text-selected': getCssVariable('--color-graph-text-selected', computedStyle),
+				'--text-selected-row': getCssVariable('--color-graph-text-selected-row', computedStyle),
+				'--text-hovered': getCssVariable('--color-graph-text-hovered', computedStyle),
+				'--text-dimmed-selected': getCssVariable('--color-graph-text-dimmed-selected', computedStyle),
+				'--text-dimmed': getCssVariable('--color-graph-text-dimmed', computedStyle),
+				'--text-normal': getCssVariable('--color-graph-text-normal', computedStyle),
+				'--text-secondary': getCssVariable('--color-graph-text-secondary', computedStyle),
+				'--text-disabled': getCssVariable('--color-graph-text-disabled', computedStyle),
+
+				'--text-accent': getCssVariable('--color-link-foreground', computedStyle),
+				'--text-inverse': getCssVariable('--vscode-input-background', computedStyle),
+				'--text-bright': getCssVariable('--vscode-input-background', computedStyle),
 				...mixedGraphColors,
 			},
-			themeOpacityFactor: parseInt(computedStyle.getPropertyValue('--graph-theme-opacity-factor')) || 1,
+			themeOpacityFactor: parseInt(getCssVariable('--graph-theme-opacity-factor', computedStyle)) || 1,
 		};
 	}
 

src/webviews/apps/rebase/rebase.scss

@@ -17,7 +17,6 @@ body {
 
 .container {
 	display: grid;
-	font-size: 1.3em;
 	grid-template-areas: 'header' 'entries' 'footer';
 	grid-template-columns: 1fr;
 	grid-template-rows: auto 1fr auto;
@@ -41,7 +40,6 @@ header {
 		flex: auto 0 1;
 		margin-top: 0.5em;
 		margin-right: 1em;
-		font-size: 2.3rem;
 	}
 
 	h4 {
@@ -67,7 +65,7 @@ header {
 }
 
 h4 {
-	font-size: 1.5rem;
+	font-size: 1.4rem;
 	opacity: 0.8;
 }
 

src/webviews/apps/shared/base.scss

@@ -7,10 +7,8 @@ html {
 body {
 	background-color: var(--color-background);
 	color: var(--color-foreground);
-	font-family: var(--font-family);
 	height: 100%;
 	line-height: 1.4;
-	font-size: 100% !important;
 
 	&.scrollable,
 	.scrollable {

src/webviews/apps/shared/styles/theme.scss

@@ -22,9 +22,17 @@
 	--color-background--lighten-50: var(--color-background);
 	--color-background--darken-50: var(--color-background);
 
-	--color-button-background: var(--vscode-button-background, transparent);
+	--color-foreground: var(--vscode-editor-foreground, var(--vscode-foreground));
+	// Computed variants in code
+	--color-foreground--85: var(--color-foreground);
+	--color-foreground--75: var(--color-foreground);
+	--color-foreground--65: var(--color-foreground);
+	--color-foreground--50: var(--color-foreground);
+
+	--color-button-background: var(--vscode-button-background, var(--color-foreground));
 	// Computed variants in code
 	--color-button-background--darken-30: var(--color-button-background);
+	--color-button-foreground: var(--vscode-button-foreground, transparent);
 
 	--color-button-secondary-background: var(--vscode-button-secondaryBackground, transparent);
 	// Computed variants in code
@@ -36,13 +44,6 @@
 	--color-highlight--50: var(--color-highlight);
 	--color-highlight--25: var(--color-highlight);
 
-	--color-foreground: var(--vscode-editor-foreground, var(--vscode-foreground));
-	// Computed variants in code
-	--color-foreground--85: var(--color-foreground);
-	--color-foreground--75: var(--color-foreground);
-	--color-foreground--65: var(--color-foreground);
-	--color-foreground--50: var(--color-foreground);
-
 	--color-focus-border: var(--vscode-focusBorder);
 
 	--color-link-foreground: var(--vscode-textLink-foreground);

src/webviews/apps/shared/theme.ts

@@ -1,5 +1,5 @@
 /*global window document MutationObserver*/
-import { darken, lighten, opacity } from '../../../system/color';
+import { darken, getCssVariable, lighten, opacity } from '../../../system/color';
 import type { Disposable, Event } from './events';
 import { Emitter } from './events';
 
@@ -20,70 +20,70 @@ const _onDidChangeTheme = new Emitter();
 export const onDidChangeTheme: Event<ThemeChangeEvent> = _onDidChangeTheme.event;
 
 export function computeThemeColors(mutations?: MutationRecord[]): ThemeChangeEvent {
-	const body = document.body;
-	const computedStyle = window.getComputedStyle(body);
+	const root = document.documentElement;
+	const computedStyle = window.getComputedStyle(root);
 
 	const isLightTheme =
-		body.classList.contains('vscode-light') || body.classList.contains('vscode-high-contrast-light');
+		root.classList.contains('vscode-light') || root.classList.contains('vscode-high-contrast-light');
 	const isHighContrastTheme =
-		body.classList.contains('vscode-high-contrast') || body.classList.contains('vscode-high-contrast-light');
+		root.classList.contains('vscode-high-contrast') || root.classList.contains('vscode-high-contrast-light');
 
-	const bodyStyle = body.style;
+	const rootStyle = root.style;
 
-	const backgroundColor = computedStyle.getPropertyValue('--vscode-editor-background').trim();
+	const backgroundColor = getCssVariable('--vscode-editor-background', computedStyle);
 
-	let foregroundColor = computedStyle.getPropertyValue('--vscode-editor-foreground').trim();
+	let foregroundColor = getCssVariable('--vscode-editor-foreground', computedStyle);
 	if (!foregroundColor) {
-		foregroundColor = computedStyle.getPropertyValue('--vscode-foreground').trim();
+		foregroundColor = getCssVariable('--vscode-foreground', computedStyle);
 	}
 
-	let color = computedStyle.getPropertyValue('--color-background').trim();
-	bodyStyle.setProperty('--color-background--lighten-05', lighten(color, 5));
-	bodyStyle.setProperty('--color-background--darken-05', darken(color, 5));
-	bodyStyle.setProperty('--color-background--lighten-075', lighten(color, 7.5));
-	bodyStyle.setProperty('--color-background--darken-075', darken(color, 7.5));
-	bodyStyle.setProperty('--color-background--lighten-10', lighten(color, 10));
-	bodyStyle.setProperty('--color-background--darken-10', darken(color, 10));
-	bodyStyle.setProperty('--color-background--lighten-15', lighten(color, 15));
-	bodyStyle.setProperty('--color-background--darken-15', darken(color, 15));
-	bodyStyle.setProperty('--color-background--lighten-30', lighten(color, 30));
-	bodyStyle.setProperty('--color-background--darken-30', darken(color, 30));
-	bodyStyle.setProperty('--color-background--lighten-50', lighten(color, 50));
-	bodyStyle.setProperty('--color-background--darken-50', darken(color, 50));
-
-	color = computedStyle.getPropertyValue('--color-button-background').trim();
-	bodyStyle.setProperty('--color-button-background--darken-30', darken(color, 30));
-
-	color = computedStyle.getPropertyValue('--color-highlight').trim();
-	bodyStyle.setProperty('--color-highlight--75', opacity(color, 75));
-	bodyStyle.setProperty('--color-highlight--50', opacity(color, 50));
-	bodyStyle.setProperty('--color-highlight--25', opacity(color, 25));
-
-	color = computedStyle.getPropertyValue('--color-button-secondary-background').trim();
-	bodyStyle.setProperty('--color-button-secondary-background--darken-30', darken(color, 30));
-
-	color = computedStyle.getPropertyValue('--color-foreground').trim();
-	bodyStyle.setProperty('--color-foreground--85', opacity(color, 85));
-	bodyStyle.setProperty('--color-foreground--75', opacity(color, 75));
-	bodyStyle.setProperty('--color-foreground--65', opacity(color, 65));
-	bodyStyle.setProperty('--color-foreground--50', opacity(color, 50));
-
-	color = computedStyle.getPropertyValue('--color-link-foreground').trim();
-	bodyStyle.setProperty('--color-link-foreground--darken-20', darken(color, 20));
-	bodyStyle.setProperty('--color-link-foreground--lighten-20', lighten(color, 20));
-
-	color = computedStyle.getPropertyValue('--color-alert-infoBackground').trim();
-	bodyStyle.setProperty('--color-alert-infoHoverBackground', isLightTheme ? darken(color, 5) : lighten(color, 5));
-
-	color = computedStyle.getPropertyValue('--color-alert-warningBackground').trim();
-	bodyStyle.setProperty('--color-alert-warningHoverBackground', isLightTheme ? darken(color, 5) : lighten(color, 5));
-
-	color = computedStyle.getPropertyValue('--color-alert-errorBackground').trim();
-	bodyStyle.setProperty('--color-alert-errorHoverBackground', isLightTheme ? darken(color, 5) : lighten(color, 5));
+	let color = getCssVariable('--color-background', computedStyle);
+	rootStyle.setProperty('--color-background--lighten-05', lighten(color, 5));
+	rootStyle.setProperty('--color-background--darken-05', darken(color, 5));
+	rootStyle.setProperty('--color-background--lighten-075', lighten(color, 7.5));
+	rootStyle.setProperty('--color-background--darken-075', darken(color, 7.5));
+	rootStyle.setProperty('--color-background--lighten-10', lighten(color, 10));
+	rootStyle.setProperty('--color-background--darken-10', darken(color, 10));
+	rootStyle.setProperty('--color-background--lighten-15', lighten(color, 15));
+	rootStyle.setProperty('--color-background--darken-15', darken(color, 15));
+	rootStyle.setProperty('--color-background--lighten-30', lighten(color, 30));
+	rootStyle.setProperty('--color-background--darken-30', darken(color, 30));
+	rootStyle.setProperty('--color-background--lighten-50', lighten(color, 50));
+	rootStyle.setProperty('--color-background--darken-50', darken(color, 50));
+
+	color = getCssVariable('--color-button-background', computedStyle);
+	rootStyle.setProperty('--color-button-background--darken-30', darken(color, 30));
+
+	color = getCssVariable('--color-highlight', computedStyle);
+	rootStyle.setProperty('--color-highlight--75', opacity(color, 75));
+	rootStyle.setProperty('--color-highlight--50', opacity(color, 50));
+	rootStyle.setProperty('--color-highlight--25', opacity(color, 25));
+
+	color = getCssVariable('--color-button-secondary-background', computedStyle);
+	rootStyle.setProperty('--color-button-secondary-background--darken-30', darken(color, 30));
+
+	color = getCssVariable('--color-foreground', computedStyle);
+	rootStyle.setProperty('--color-foreground--85', opacity(color, 85));
+	rootStyle.setProperty('--color-foreground--75', opacity(color, 75));
+	rootStyle.setProperty('--color-foreground--65', opacity(color, 65));
+	rootStyle.setProperty('--color-foreground--50', opacity(color, 50));
+
+	color = getCssVariable('--color-link-foreground', computedStyle);
+	rootStyle.setProperty('--color-link-foreground--darken-20', darken(color, 20));
+	rootStyle.setProperty('--color-link-foreground--lighten-20', lighten(color, 20));
+
+	color = getCssVariable('--color-alert-infoBackground', computedStyle);
+	rootStyle.setProperty('--color-alert-infoHoverBackground', isLightTheme ? darken(color, 5) : lighten(color, 5));
+
+	color = getCssVariable('--color-alert-warningBackground', computedStyle);
+	rootStyle.setProperty('--color-alert-warningHoverBackground', isLightTheme ? darken(color, 5) : lighten(color, 5));
+
+	color = getCssVariable('--color-alert-errorBackground', computedStyle);
+	rootStyle.setProperty('--color-alert-errorHoverBackground', isLightTheme ? darken(color, 5) : lighten(color, 5));
 
 	color = isLightTheme ? darken(backgroundColor, 5) : lighten(backgroundColor, 5);
-	bodyStyle.setProperty('--color-alert-neutralBackground', color);
-	bodyStyle.setProperty('--color-alert-neutralHoverBackground', isLightTheme ? darken(color, 5) : lighten(color, 5));
+	rootStyle.setProperty('--color-alert-neutralBackground', color);
+	rootStyle.setProperty('--color-alert-neutralHoverBackground', isLightTheme ? darken(color, 5) : lighten(color, 5));
 
 	return {
 		colors: {