Legacy UI color token override (backward compatibility)

The page overrides four legacy color token names on :root (see the <style> in <head>). Components read the new token names, but the override bridges make them honor the legacy names first.

Expected — overrides take effect:

  1. Toolbar background is RED.
  2. Put the caret in a paragraph and apply Heading 1. The active Heading dropdown button background becomes LIME.
  3. Open the Heading dropdown — the currently selected item background is ORANGE.
  4. Hover any toolbar button — its tooltip background is PURPLE.

Without the bridges, none of these legacy overrides would have any effect (the components would keep their default colors).

Legacy token override test

Some bold and italic text. Apply a heading to this paragraph, then open the Heading dropdown and hover the toolbar buttons.