improved theme context switching

frontend/code/components/button.ts

@@ -1,4 +1,4 @@
-import { applyColorSet } from '../designApplication';
+import { applyColorSet, bumpThemeContext } from '../designApplication';
 import { ColorSet, ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 import { RippleEffect } from '../rippleEffect';
@@ -116,10 +116,10 @@ export class ButtonComponent extends SingleContainer {
             // allows all styles to just assume that the palette they should use
             // is the current one.
             if (colorSet === 'keep') {
-                colorSet = 'bump';
+                bumpThemeContext(this.element, this.innerElement);
+            } else {
+                applyColorSet(this.innerElement, colorSet);
             }
-
-            applyColorSet(this.element, this.innerElement, colorSet);
         }
     }
 }

frontend/code/components/card.ts

@@ -99,7 +99,7 @@ export class CardComponent extends SingleContainer {
 
         // Colorize
         if (deltaState.color !== undefined) {
-            applyColorSet(this.element, this.element, deltaState.color);
+            applyColorSet(this.element, deltaState.color);
         }
     }
 }

frontend/code/components/popup.ts

@@ -62,7 +62,7 @@ export class PopupComponent extends ComponentBase {
 
         // Colorize
         if (deltaState.color !== undefined) {
-            applyColorSet(this.element, this.element, deltaState.color);
+            applyColorSet(this.element, deltaState.color);
         }
     }
 

frontend/code/components/progressCircle.ts

@@ -1,4 +1,4 @@
-import { applyColorSet } from '../designApplication';
+import { applyColorSet, bumpThemeContext } from '../designApplication';
 import { ColorSet } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 
@@ -45,11 +45,15 @@ export class ProgressCircleComponent extends ComponentBase {
         }
 
         // Apply the color
-        if (deltaState.color !== undefined) {
-            applyColorSet(
+        if (deltaState.color === 'keep') {
+            bumpThemeContext(
                 this.element,
+                this.element.firstElementChild as HTMLElement
+            );
+        } else if (deltaState.color !== undefined) {
+            applyColorSet(
                 this.element.firstElementChild as HTMLElement,
-                deltaState.color === 'keep' ? 'bump' : deltaState.color
+                deltaState.color
             );
         }
     }

frontend/code/components/slider.ts

@@ -143,9 +143,9 @@ export class SliderComponent extends ComponentBase {
         }
 
         if (deltaState.is_sensitive === true) {
-            applyColorSet(this.element, this.innerElement, 'keep');
+            applyColorSet(this.element, 'keep');
         } else if (deltaState.is_sensitive === false) {
-            applyColorSet(this.element, this.innerElement, 'disabled');
+            applyColorSet(this.element, 'disabled');
         }
     }
 

frontend/code/components/switcherBar.ts

@@ -1,6 +1,6 @@
 import { ComponentBase, ComponentState } from './componentBase';
 import { ColorSet, TextStyle } from '../dataModels';
-import { applyColorSet } from '../designApplication';
+import { applyColorSet, bumpThemeContext } from '../designApplication';
 import { getTextDimensions } from '../layoutHelpers';
 import { LayoutContext } from '../layouting';
 import { textStyleToCss } from '../cssUtils';
@@ -497,12 +497,10 @@ export class SwitcherBarComponent extends ComponentBase {
         }
 
         // Color
-        if (deltaState.color !== undefined) {
-            applyColorSet(
-                this.element,
-                this.markerElement,
-                deltaState.color === 'keep' ? 'bump' : deltaState.color
-            );
+        if (deltaState.color === 'keep') {
+            bumpThemeContext(this.element, this.markerElement);
+        } else if (deltaState.color !== undefined) {
+            applyColorSet(this.markerElement, deltaState.color);
         }
 
         // Orientation

frontend/code/components/themeContextSwitcher.ts

@@ -12,15 +12,8 @@ export type ThemeContextSwitcherState = ComponentState & {
 export class ThemeContextSwitcherComponent extends SingleContainer {
     state: Required<ThemeContextSwitcherState>;
 
-    private innerElement: HTMLElement;
-
     createElement(): HTMLElement {
         let element = document.createElement('div');
-        element.classList.add('rio-theme-context-switcher');
-
-        this.innerElement = document.createElement('div');
-        element.appendChild(this.innerElement);
-
         return element;
     }
 
@@ -29,15 +22,11 @@ export class ThemeContextSwitcherComponent extends SingleContainer {
         latentComponents: Set<ComponentBase>
     ): void {
         // Update the child
-        this.replaceOnlyChild(
-            latentComponents,
-            deltaState.content,
-            this.innerElement
-        );
+        this.replaceOnlyChild(latentComponents, deltaState.content);
 
         // Colorize
         if (deltaState.color !== undefined) {
-            applyColorSet(this.element, this.innerElement, deltaState.color);
+            applyColorSet(this.element, deltaState.color);
         }
     }
 }

frontend/code/designApplication.ts

@@ -3,15 +3,9 @@ import { colorToCssString } from './cssUtils';
 
 const ICON_PROMISE_CACHE: { [key: string]: Promise<string> } = {};
 
-export function applyColorSet(
-    outerElement: HTMLElement,
-    innerElement: HTMLElement,
-    colorSet: ColorSet | 'bump'
-): void {
-    // Remove all switcheroos
-    outerElement.classList.remove('rio-switcheroo-bump-outer');
-
-    innerElement.classList.remove(
+/// Removes any switcheroos from the given element
+function removeSwitcheroos(element: HTMLElement): void {
+    element.classList.remove(
         'rio-switcheroo-background',
         'rio-switcheroo-neutral',
         'rio-switcheroo-hud',
@@ -24,45 +18,58 @@ export function applyColorSet(
         'rio-switcheroo-custom',
         'rio-switcheroo-bump-inner'
     );
+}
+
+export function applyColorSet(element: HTMLElement, colorSet: ColorSet): void {
+    // Remove any preexisting switcheroos
+    element.classList.remove('rio-switcheroo-bump-outer');
 
     // If no color set is desired don't apply any new one
     if (colorSet === 'keep') {
         return;
     }
 
-    // Bumping requires extra care
-    if (colorSet === 'bump') {
-        outerElement.classList.add('rio-switcheroo-bump-outer');
-        innerElement.classList.add('rio-switcheroo-bump-inner');
-        return;
-    }
-
     // Is this a well-known switcheroo?
     if (typeof colorSet === 'string') {
-        innerElement.classList.add(`rio-switcheroo-${colorSet}`);
+        element.classList.add(`rio-switcheroo-${colorSet}`);
         return;
     }
 
     // Custom color sets need additional variables to be defined
-    innerElement.style.setProperty(
+    element.style.setProperty(
         '--rio-custom-local-bg',
         colorToCssString(colorSet.localBg)
     );
-    innerElement.style.setProperty(
+    element.style.setProperty(
         '--rio-custom-local-bg-variant',
         colorToCssString(colorSet.localBgVariant)
     );
-    innerElement.style.setProperty(
+    element.style.setProperty(
         '--rio-custom-local-bg-active',
         colorToCssString(colorSet.localBgActive)
     );
-    innerElement.style.setProperty(
+    element.style.setProperty(
         '--rio-custom-local-fg',
         colorToCssString(colorSet.localFg)
     );
 
     // Apply the switcheroo
-    innerElement.classList.add('rio-switcheroo-custom');
+    element.classList.add('rio-switcheroo-custom');
+}
+
+export function bumpThemeContext(
+    outerElement: HTMLElement,
+    innerElement: HTMLElement
+): void {
+    // Remove any preexisting switcheroos
+    removeSwitcheroos(innerElement);
+
+    // The bump switcheroo requires a special outer switcheroo to be applied to
+    // the enclosing element to preserve some CSS variables. Assign that class.
+    outerElement.classList.add('rio-switcheroo-bump-outer');
+
+    // Then also apply the inner switcheroo
+    innerElement.classList.add('rio-switcheroo-bump-inner');
 }
 
 export function applyFillToSVG(svgRoot: SVGSVGElement, fill: Fill): void {