Replace `generateGlobalStyles` with a static SCSS file

[LianaHarris360]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Overview

Replace the runtime-generated global styles in lib/styles/generateGlobalStyles.js with a static SCSS file. This removes one of the remaining Aphrodite dependencies.

Complexity: Low
Target branch: release-v5

Context

generateGlobalStyles.js uses Aphrodite to inject global styles: page background and text color, focus outline, text selection color, and print styles. Once the theme values exist as CSS variables, these styles no longer need to be generated at runtime.

The Change

Create a static SCSS file covering:

• Focus outline. Color comes from var(--tokens-focusOutline)
• Text selection background, from the matching --brand-* variable
• Page background and text color for html/body
• Print styles

Out of Scope

• Deleting generateGlobalStyles.js or removing Aphrodite
• Adding new tokens for outline width/offset, these will remain hardcoded since they are not tokens

Acceptance Criteria

General

• The SCSS file covers focus outline, selection background, page background, and print styles
• All colors in the file use var(--tokens-*), var(--palette-*), or var(--brand-*)
• Everything looks and behaves the same as before, including the keyboard focus outline

Testing

• Manually check focus outline (keyboard navigation), text selection, page background, and print preview

References

AI usage

I used Claude to help draft this issue from my notes and implementation proposal. I reviewed and edited it for accuracy.