Merge pull request #1391 from mathjax/update/css-colors

Move colors to CSS and fix problems with magnification of enclosures

Author: dpvc

ts/a11y/complexity/collapse.ts

@@ -26,6 +26,7 @@ import {
   AbstractMmlTokenNode,
   TextNode,
 } from '../../core/MmlTree/MmlNode.js';
+import { PropertyList } from '../../core/Tree/Node.js';
 import { ComplexityVisitor } from './visitor.js';
 
 /*==========================================================================*/
@@ -584,9 +585,10 @@ export class Collapse {
     const factory = this.complexity.factory;
     const marker = node.getProperty('collapse-marker') as string;
     const parent = node.parent;
-    const variant = node.getProperty('collapse-variant')
-      ? { mathvariant: '-tex-variant' }
-      : {};
+    const variant = { 'data-mjx-collapsed': true } as PropertyList;
+    if (node.getProperty('collapse-variant')) {
+      variant.mathvariant = '-tex-variant';
+    }
     const maction = factory.create(
       'maction',
       {

ts/a11y/explorer.ts

@@ -413,7 +413,7 @@ export function ExplorerMathDocumentMixin<
         fill: 'white',
       },
       'mjx-help > svg > circle:nth-child(2)': {
-        fill: 'rgba(0, 0, 255, 0.2)',
+        fill: 'var(--mjx-bg1-color)',
         r: '7px',
       },
       'mjx-help > svg > line': {

ts/a11y/explorer/ExplorerPool.ts

@@ -30,7 +30,6 @@ import * as me from './MouseExplorer.js';
 import { TreeColorer, FlameColorer } from './TreeExplorer.js';
 
 import { Highlighter, getHighlighter } from './Highlighter.js';
-// import * as Sre from '../sre.js';
 
 /**
  * The regions objects needed for the explorers.
@@ -360,6 +359,7 @@ export class ExplorerPool {
   protected setPrimaryHighlighter() {
     const [foreground, background] = this.colorOptions();
     this._highlighter = getHighlighter(
+      LiveRegion.priority.primary,
       background,
       foreground,
       this.document.outputJax.name
@@ -371,6 +371,7 @@ export class ExplorerPool {
    */
   protected setSecondaryHighlighter() {
     this.secondaryHighlighter = getHighlighter(
+      LiveRegion.priority.secondary,
       { color: 'red' },
       { color: 'black' },
       this.document.outputJax.name