Skip to content

using relative values instead of absolute values for the font size and the line height#286006

Merged
alexdima merged 15 commits intomainfrom
rapid-fly
Jan 14, 2026
Merged

using relative values instead of absolute values for the font size and the line height#286006
alexdima merged 15 commits intomainfrom
rapid-fly

Conversation

@aiday-mar
Copy link
Contributor

fixes #285891

Copilot AI review requested due to automatic review settings January 5, 2026 21:06
@aiday-mar aiday-mar self-assigned this Jan 5, 2026
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This pull request converts font size and line height values from absolute (string-based) to relative (number multiplier-based) values for token colorization settings. This allows theme authors to specify font sizes and line heights as multipliers of the editor's default font settings rather than hardcoded pixel values.

Key Changes:

  • Changed fontSize type from string to number across theme interfaces, representing a multiplier instead of an absolute value
  • Renamed properties to fontSizeMultiplier and lineHeightMultiplier in internal interfaces to clarify their purpose
  • Added new event type ModelLineHeightMultiplierChangedEvent to handle multiplier-based line height changes
  • Updated CSS generation to multiply multipliers by the configured editor font size

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 11 comments.

Show a summary per file
File Description
src/vs/workbench/services/themes/common/workbenchThemeService.ts Changed fontSize type from string to number in ITokenColorizationSetting interface
src/vs/workbench/services/themes/common/colorThemeSchema.ts Updated schema definitions and descriptions for fontSize and lineHeight to reflect multiplier-based values
src/vs/workbench/services/themes/common/colorThemeData.ts Updated TokenFontIndex.add method signature to accept number for fontSize instead of string
src/vs/workbench/services/textMate/browser/textMateTokenizationFeatureImpl.ts Added retrieval of editor.fontSize config to pass as base value for multiplier calculations
src/vs/workbench/services/textMate/browser/backgroundTokenization/worker/textMateWorkerTokenizer.ts Renamed fontSize/lineHeight to fontSizeMultiplier/lineHeightMultiplier in annotation properties
src/vs/platform/theme/common/themeService.ts Changed fontSize type from string to number in IFontTokenOptions
src/vs/editor/common/viewModel/viewModelImpl.ts Added _onDidChangeLineHeight helper method to convert multiplier events to absolute values and register handler for multiplier change events
src/vs/editor/common/textModelEvents.ts Added fontSizeMultiplier and lineHeightMultiplier properties, new ModelLineHeightMultiplierChanged classes, and updated serialization functions
src/vs/editor/common/model/tokens/tokenizationFontDecorationsProvider.ts Updated to use fontSizeMultiplier/lineHeightMultiplier and emit multiplier change events; added IConfigurationService dependency
src/vs/editor/common/model/textModel.ts Added ModelLineHeightMultiplierChangedEvent support and IConfigurationService dependency; added event emitter and handler for multiplier changes
src/vs/editor/common/model/decorationProvider.ts Added LineHeightMultiplierChangingDecoration class to represent multiplier-based line height changes
src/vs/editor/common/model.ts Added onDidChangeLineHeightMultiplier event to ITextModel interface and imported ModelLineHeightMultiplierChangedEvent
src/vs/editor/common/languages/supports/tokenization.ts Updated generateTokensCSSForFontMap to accept defaultFontSize parameter and multiply font size multipliers to generate absolute CSS values
src/vs/editor/common/languages.ts Changed fontSize type from string to number in IFontToken interface

@aiday-mar aiday-mar requested a review from alexdima January 6, 2026 13:18
Copy link
Member

@alexdima alexdima left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've left comments, mostly OK, except I would try to make it that everyone who adds line height decorations can only do relative line heights, no more absolutes to keep the code sane.

Also, when generating the CSS and the class name inside the text model it looks like the font size is being read, it would be better to avoid it and use the relative multiplier in the class name to remove that dependency on the config service (and avoid the bug of not reacting to the value changing)

@aiday-mar
Copy link
Contributor Author

Thanks Alex! I made the required changes

@aiday-mar aiday-mar requested a review from alexdima January 8, 2026 09:51
@aiday-mar aiday-mar marked this pull request as ready for review January 8, 2026 09:51
@vs-code-engineering vs-code-engineering bot added this to the January 2026 milestone Jan 8, 2026
Copy link
Member

@alexdima alexdima left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

I just found a problem and pushed a fix where configuring:

"editor.tokenColorCustomizations": {
        "textMateRules": [{
            "scope": "entity.name.type.class.ts",
            "settings": {
                "foreground": "#FF0000",
                "fontStyle": "bold",
                "lineHeight": 1.5,
                "fontSize": 1.5
            }
        }]
    },

would generate a class name .font-decoration-default-1.5 which wouldn't work due to the . in the font size.

@alexdima alexdima enabled auto-merge (squash) January 14, 2026 08:39
@alexdima alexdima merged commit 27782b4 into main Jan 14, 2026
22 checks passed
@alexdima alexdima deleted the rapid-fly branch January 14, 2026 09:02
@aiday-mar
Copy link
Contributor Author

Thanks!

eli-w-king pushed a commit that referenced this pull request Jan 14, 2026
…d the line height (#286006)

* using relative values instead of absolute values for the font size and the line height

* renaming to multiplier

* setting back to font size and line height

* Revert "renaming to multiplier"

This reverts commit 5588855.

* doing some polishing work

* changing the api

* updating to higher version of vscode-textmate

* also changing the vscode textmate package version for the remote extension

* increasing the vscode textmate version in remote/web

* updating package lock json

* using css variables instead of fetching font size from config service

* removing the second multiplier event

* adding ? after dom element style

* Ensure dots from floating fontSize are stripped from class names

---------

Co-authored-by: Alexandru Dima <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Use relative numbers instead of absolute ones in themes

4 participants