Add size tokens and registry implementation for theme customization

[mrleemurray]

This implementation adds a size registry system to VS Code, similar to the existing color registry. The size registry allows centralized management of size tokens (font sizes, line heights, letter spacing, corner radii, stroke thickness) that are automatically converted to CSS custom properties.

Files Created

Core Implementation

1. src/vs/platform/theme/common/sizeUtils.ts

   • Core SizeRegistry class
   • Type definitions (SizeIdentifier, SizeValue, SizeContribution, etc.)
   • Helper functions (size(), sizeValueToCss(), asCssVariable(), asCssVariableName())
   • JSON schema integration
   • Registry singleton and exports

2. src/vs/platform/theme/common/sizeRegistry.ts

   • Main export file (similar to colorRegistry.ts)
   • Re-exports from sizeUtils.ts and size token definitions

3. src/vs/platform/theme/common/sizes/baseSizes.ts

   • Base size token definitions
   • Font sizes: fontSize, fontSize.small, fontSize.large
   • Line heights: lineHeight, lineHeight.compact, lineHeight.relaxed
   • Letter spacing: letterSpacing, letterSpacing.wide
   • Corner radii: cornerRadius, cornerRadius.small, cornerRadius.large
   • Stroke thickness: strokeThickness, strokeThickness.thick, strokeThickness.focus

Integration

4. src/vs/workbench/services/themes/browser/workbenchThemeService.ts (modified)
   • Imports size registry utilities
   • Generates CSS custom properties for size tokens (similar to color tokens)
   • Injects size CSS variables into .monaco-workbench alongside color variables

Tests

5. src/vs/platform/theme/test/common/sizeRegistry.test.ts
   • Unit tests for size registry functionality
   • All tests passing ✅

Features Implemented

✅ Size Token Registration

• Register size tokens with theme-specific values (light, dark, hcDark, hcLight)
• Support for multiple units (px, rem, em, %)
• Type-safe API with full TypeScript support

✅ CSS Variable Generation

• Automatic conversion to CSS custom properties with --vscode- prefix
• Example: fontSize → --vscode-fontSize: 13px
• Integration with existing theme service

✅ Helper Functions

• size(value, unit) - Create size values
• sizeForAllThemes(value, unit) - Create same size value for all themes
• sizeValueToCss(sizeValue) - Convert to CSS string
• asCssVariable(identifier) - Get CSS variable reference
• asCssVariableName(identifier) - Get CSS variable name

✅ JSON Schema Integration

• Automatic schema generation for size tokens
• Validation support for configuration files

✅ Base Size Tokens

• 11 base size tokens covering common UI sizing needs

Usage

In TypeScript/JavaScript:

import { asCssVariable, fontSize, cornerRadiusMedium } from 'vs/platform/theme/common/sizeRegistry';

const styles = `
  .my-element {
    font-size: ${asCssVariable(fontSize)};
    border-radius: ${asCssVariable(cornerRadiusMedium)};
  }
`;

In CSS:

.my-element {
  font-size: var(--vscode-fontSize);
  border-radius: var(--vscode-cornerRadius-medium);
  line-height: var(--vscode-lineHeight);
}

Not Implemented (Future Work)

❌ User Overrides

• User configuration of size tokens in settings
• Similar to color customization in workbench.colorCustomizations

❌ Size Transformations

• Transform functions like color registry has (darken, lighten, transparent, etc.)
• Could add: scale, multiply, add, clamp

❌ Theme JSON Support

• Theme-specific size overrides in theme JSON files
• Extension themes defining custom size tokens

Architecture

The implementation follows the exact same pattern as the color registry:

sizeRegistry.ts (exports) → sizeUtils.ts (core) → sizes/*.ts (tokens)
                                                      ↓
                                          workbenchThemeService.ts
                                                      ↓
                                            CSS custom properties

[Copilot]

Pull request overview

This PR introduces a new size token registry system for VS Code theme customization, following the same architectural pattern as the existing color registry. It allows size-related properties (font sizes, corner radii, stroke thickness) to be defined centrally and applied consistently across the UI through CSS custom properties.

Key changes:

• New size registry infrastructure with full lifecycle management (register/deregister, schema generation, theme updates)
• Initial set of base size tokens including font sizes, corner radii, and stroke thickness
• Integration with the workbench theme service to generate CSS variables for registered size tokens

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/vs/platform/theme/common/sizeUtils.ts	Core size registry implementation with JSON schema generation, size value types, and CSS variable conversion utilities
src/vs/platform/theme/common/sizeRegistry.ts	Barrel export file re-exporting sizeUtils and baseSizes following the pattern used by colorRegistry
src/vs/platform/theme/common/sizes/baseSizes.ts	Initial size token definitions including bodyFontSize, codiconFontSize, various cornerRadius scales, and strokeThickness
src/vs/platform/theme/test/common/sizeRegistry.test.ts	Unit tests for size registry functionality including registration, CSS conversion, and helper functions
src/vs/workbench/services/themes/browser/workbenchThemeService.ts	Integration point that generates CSS variables from registered size tokens alongside existing color variables

[lppedd]

Folks, I may have misinterpreted the changes, but just be sure: I see we now have --vscode-fontSize, while we previously had --vscode-font-size as CSS variable. Are the "old" variables preserved at the moment, or is this a breaking change (or will it lead to)?