Problem

The current color-mode-theme mixin in src/support/mixins/color-modes.scss outputs ::selection and ::backdrop pseudo-element rules for every theme variant, creating multiple expensive selectors:

[data-color-mode="light"][data-light-theme*="dark"] ::selection { /* all theme variables */ }
[data-color-mode="dark"][data-dark-theme*="dark"] ::selection { /* all theme variables */ }
[data-color-mode="auto"][data-dark-theme*="dark"] ::selection { /* all theme variables */ }
// ... repeated for ::backdrop

Performance profiling shows this is extremely costly:

• [data-color-mode="light"][data-light-theme*="dark"] ::selection — 54.95ms
• [data-color-mode="dark"][data-dark-theme*="dark"] ::selection — 34.41ms
• [data-color-mode="auto"][data-dark-theme*="dark"] ::selection — 21.75ms
• [data-color-mode="dark"][data-dark-theme="dark_dimmed"] ::backdrop — 30.00ms
• Plus several more ::backdrop selectors at 12-18ms each

Total: ~110ms+ of selector evaluation cost

The issues are:

1. Substring attribute matching (*="dark") prevents browser fast-path optimizations
2. Multiple complex compound attribute selectors for each theme
3. All CSS custom properties are output to ::selection/::backdrop, but these pseudo-elements can only use a few properties (color, background-color, etc.)
4. These document-scoped pseudo-elements are re-evaluated on every selection/compositing event

Solution

CSS custom properties inherit from the originating element. Since the theme variables are already defined on [data-color-mode] ancestors, ::selection and ::backdrop can inherit them automatically.

Changes Required

1. Remove &::selection from the color-mode-theme mixin in src/support/mixins/color-modes.scss:

   • Remove the &, &::selection { @content; } pattern
   • Just output @content directly to the theme selectors

2. Remove ::backdrop duplication from the mixin - same approach

3. Add single global ::selection and ::backdrop rules (likely in src/base/base.scss or a new file):

   ::selection {
    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
   }
   ::backdrop {
    background-color: var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop));
   }

Expected Impact

Before	After
6+ complex ::selection selectors	1 simple ::selection selector
6+ complex ::backdrop selectors	1 simple ::backdrop selector
~110ms+ total selector cost	<1ms
Substring attribute matching	No attribute matching
All variables output to pseudo-elements	Only 2-3 relevant properties

Why This Works

When you select text inside an element that has --bgColor-accent-emphasis defined (via the [data-color-mode] ancestor), the ::selection pseudo-element inherits that value automatically. The current approach redundantly re-declares all variables on ::selection when they're already available via inheritance.

Files to Modify

1. src/support/mixins/color-modes.scss - Remove ::selection and ::backdrop from the mixin
2. src/base/base.scss (or new file) - Add single global ::selection and ::backdrop rules

Testing

• Verify text selection styling works correctly across all themes (light, dark, dark_dimmed, dark_high_contrast)
• Verify ::backdrop styling works for dialogs/modals across all themes
• Verify no visual regressions in selection/backdrop appearance