ux-theming

This skill covers color registration, CSS variable usage, widget style patterns, focus indicators, and high-contrast theme requirements. --- ## 1. Registering Colors **File**: `src/vs/platform/theme/common/colorUtils.ts` ```typescript export const myWidgetBackground = registerColor('myWidget.background', { light: '#ffffff', dark: '#252526', hcDark: Color.black, hcLight: Color.white }, nls.localize('myWidgetBackground', "Background color of My Widget.")); ``` **Rules**: - Provide defaults for all four theme types: `light`, `dark`, `hcDark`, `hcLight`. - HC themes must use solid colors (avoid transparency) and set explicit borders via `contrastBorder`. - Use color transforms for derived colors: `transparent()`, `darken()`, `lighten()`, `oneOf()`. - Reference existing colors when possible instead of hardcoding hex values. ## 2. Color Categories | File | Colors | |------|--------| | `src/vs/platform/theme/common/colors/baseColors.ts` | `foreground`, `focusBorder`, `contrastBorder`, text links | | `src/vs/platform/theme/common/colors/editorColors.ts` | Editor widgets, find match, errors/warnings | | `src/vs/platform/theme/common/colors/inputColors.ts` | Input, toggle, validation | | `src/vs/platform/theme/common/colors/listColors.ts` | List/tree selection, focus, hover, drop | | `src/vs/platform/theme/common/colors/miscColors.ts` | Badge, scrollbar, progress bar, sash | | `src/vs/workbench/common/theme.ts` | Tabs, sidebar, status bar, panels, editor groups, banner |...