[cherry-pick] VS Code Onboarding TPI Fixes

[vs-code-engineering]

Cherry-pick of #309628 from release/1.116.

Summary

Revises the button hierarchy on the first page (Sign In step) of the 2026 onboarding wizard to better emphasize the primary action while maintaining accessibility. Also fixes focus visibility across all onboarding steps, adjusts theme label sizing, and improves theme card keyboard navigation and high contrast support.

Changes

"Continue with GitHub" button → Primary

• Now uses --vscode-button-background / --vscode-button-foreground (accent background with white text)
• GitHub logo icon and label explicitly inherit --vscode-button-foreground to ensure contrast/accessibility on the accent background

"Skip" button → Ghost (step 0 only)

• Changed to ghost style on the sign-in step
• Reverts to ghost style on all other steps (consistent)

"Continue" button → Secondary "Continue without Signing In" (step 0 only)

• Uses secondary button styling to de-emphasize relative to the primary sign-in CTA
• Reverts to standard primary "Continue" / "Get Started" on subsequent steps

Focus visibility fixes

• Primary-colored buttons (Continue, Install, Continue with GitHub) now use a double-ring box-shadow focus pattern — inner ring matches card background, outer ring uses focusBorder — ensuring focus is always visible regardless of theme
• Added :focus-visible styling for doc links (Agents tutorial) with proper outline
• Fixed focus ring clipping on Agents tutorial link by adding padding to parent container
• Increased outline-offset to 2px on all standard buttons

Theme card accessibility

• Made theme cards individually tabbable (tabindex="0") instead of roving tabindex radio group
• Separated focus indicator (outline ring, outside the card) from selected indicator (border + box-shadow, hugging the card) so keyboard position and current selection are visually distinct
• Added high contrast overrides using contrastBorder / contrastActiveBorder for hc-black and hc-light themes
• Fixed focus ring clipping by changing step-content overflow to visible and adding grid padding

Theme label sizing

• Bumped theme card label font-size from 10px to 12px to align with other button/label text

Files changed

• src/vs/workbench/contrib/welcomeOnboarding/browser/media/variationA.css — Button styling, focus rings, theme labels, HC overrides
• src/vs/workbench/contrib/welcomeOnboarding/browser/onboardingVariationA.ts — Step-aware button state logic, theme card tabindex

Fixes: #309377
Fixes: #309380
Fixes: #309381
Fixes: #309386
Fixes: #309517

[github-actions]

Screenshot Changes

Base: 083e1db4 Current: 570bc969

Changed (1)

chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTabScrolled/Dark

Before	After