What problem does it solve? VS Code extension and workbench contributors often hardcode colors, shadows, and borders that break in different themes and fail high-contrast accessibility requirements, leading to review rejections and inconsistent UI. ## Core Features & Use Cases - Color Registration: Register theme colors with defaults for light, dark, hcDark, and hcLight using registerColor in colorUtils.ts, with transforms like transparent(), darken(), and lighten(). - CSS Variable Integration: Reference any registered color in stylesheets via --vscode-* custom properties and helper functions like asCssVariable(). - Widget Style Patterns: Apply default widget style objects (defaultButtonStyles, defaultInputBoxStyles, etc.) and override specific colors through factory functions in defaultStyles.ts. - Accessibility Compliance: Implement focus indicators with var(--vscode-focusBorder), focus trapping for modal dialogs, and high-contrast rules including contrastBorder usage and box-shadow removal. - Use Case: When adding a new custom widget to the workbench, use this Skill to register its colors correctly, style it with theme tokens, and pass HC/focus review on the first attempt. ## Quick Start Use the ux-theming skill to register a background color for my new panel widget and write its CSS with proper theme variables and high-contrast support.
