1
>
/*---------------------------------------------------------------------------------------------
sizeUtils.ts
2
>
* Copyright (c) Microsoft Corporation. All rights reserved.
3
>
* Licensed under the MIT License. See License.txt in the project root for license information.
4
>
*--------------------------------------------------------------------------------------------*/
5
>
6
>
import { Emitter, Event } from '../../../base/common/event.js';
7
>
import { IJSONSchema } from '../../../base/common/jsonSchema.js';
8
>
import { IJSONContributionRegistry, Extensions as JSONExtensions } from '../../jsonschemas/common/jsonContributionRegistry.js';
9
>
import * as platform from '../../registry/common/platform.js';
10
>
import { IColorTheme } from './themeService.js';
11
>
import { Disposable } from '../../../base/common/lifecycle.js';
12
>
import { RunOnceScheduler } from '../../../base/common/async.js';
13
>
14
>
// ------ API types
15
>
16
>
export type SizeIdentifier = string;
17
>
18
>
/**
19
>
* Size value unit types supported by the registry.
20
>
* Use `''` for unitless values such as font weights.
21
>
*/
22
>
export type SizeUnit = 'px' | 'rem' | 'em' | '%' | '';
23
>
24
>
/**
25
>
* A size value with a numeric amount and unit
26
>
*/
27
>
export interface SizeValue {
28
>
readonly value: number;
29
>
readonly unit: SizeUnit;
30
>
}
31
>
32
>
export interface SizeContribution {
33
>
readonly id: SizeIdentifier;
34
>
readonly description: string;
35
>
readonly defaults: SizeDefaults | SizeValue | null;
36
>
readonly deprecationMessage: string | undefined;
37
>
}
38
>
39
>
/**
40
>
* Returns the css variable name for the given size identifier. Dots (`.`) are replaced with hyphens (`-`) and
41
>
* everything is prefixed with `--vscode-`.
42
>
*
43
>
* @sample `editor.fontSize` is `--vscode-editor-fontSize`.
44
>
*/
45
>
export function asCssVariableName(sizeIdent: SizeIdentifier): string {
46
return `--vscode-${sizeIdent.replace(/\./g, '-')}`;
47
}
49
>
export function asCssVariable(size: SizeIdentifier): string {
50
return `var(${asCssVariableName(size)})`;
51
}
53
>
export function asCssVariableWithDefault(size: SizeIdentifier, defaultCssValue: string): string {
54
return `var(${asCssVariableName(size)}, ${defaultCssValue})`;
55
}
57
>
export interface SizeDefaults {
58
>
light: SizeValue | null;
59
>
dark: SizeValue | null;
60
>
hcDark: SizeValue | null;
61
>
hcLight: SizeValue | null;
62
>
}
63
>
64
>
export function isSizeDefaults(value: unknown): value is SizeDefaults {
65
>
return value !== null && typeof value === 'object' && 'light' in value && 'dark' in value;
66
>
}
67
>
68
>
/**
69
>
* Helper function to create a size value
70
>
*/
71
>
export function size(value: number, unit: SizeUnit = 'px'): SizeValue {
72
>
return { value, unit };
73
>
}
74
>
75
>
/**
76
>
* Helper function to create size defaults that use the same value for all themes
77
>
*/
78
>
export function sizeForAllThemes(value: number, unit: SizeUnit = 'px'): SizeDefaults {
79
>
const sizeValue = size(value, unit);
80
>
return {
81
>
light: sizeValue,
82
>
dark: sizeValue,
83
>
hcDark: sizeValue,
84
>
hcLight: sizeValue
85
>
};
86
>
}
87
>
88
>
/**
89
>
* Convert a size value to a CSS string.
90
>
* When the unit is `''` the raw numeric value is returned (e.g. font weights).
91
>
*/
92
>
export function sizeValueToCss(sizeValue: SizeValue): string {
93
return sizeValue.unit === '' ? `${sizeValue.value}` : `${sizeValue.value}${sizeValue.unit}`;
94
}
96
>
// size registry
97
>
export const Extensions = {
98
>
SizeContribution: 'base.contributions.sizes'
99
>
};
100
>
101
>
export const DEFAULT_SIZE_CONFIG_VALUE = 'default';
102
>
103
>
export interface ISizeRegistry {
104
>
105
>
readonly onDidChangeSchema: Event<void>;
106
>
107
>
/**
108
>
* Register a size to the registry.
109
>
* @param id The size id as used in theme description files
110
>
* @param defaults The default values
111
>
* @param description the description
112
>
*/
113
>
registerSize(id: string, defaults: SizeDefaults | SizeValue | null, description: string): SizeIdentifier;
114
>
115
>
/**
116
>
* Deregister a size from the registry.
117
>
*/
118
>
deregisterSize(id: string): void;
119
>
120
>
/**
121
>
* Get all size contributions
122
>
*/
123
>
getSizes(): SizeContribution[];
124
>
125
>
/**
126
>
* Gets the default size of the given id
127
>
*/
128
>
resolveDefaultSize(id: SizeIdentifier, theme: IColorTheme): SizeValue | undefined;
129
>
130
>
/**
131
>
* JSON schema for an object to assign size values to one of the size contributions.
132
>
*/
133
>
getSizeSchema(): IJSONSchema;
134
>
135
>
/**
136
>
* JSON schema for a reference to a size contribution.
137
>
*/
138
>
getSizeReferenceSchema(): IJSONSchema;
139
>
140
>
/**
141
>
* Notify when the color theme or settings change.
142
>
*/
143
>
notifyThemeUpdate(theme: IColorTheme): void;
144
>
145
>
}
146
>
147
>
type IJSONSchemaForSizes = IJSONSchema & { properties: { [name: string]: IJSONSchema } };
148
>
149
>
class SizeRegistry extends Disposable implements ISizeRegistry {
150
>
151
>
private readonly _onDidChangeSchema = this._register(new Emitter<void>());
152
>
readonly onDidChangeSchema: Event<void> = this._onDidChangeSchema.event;
153
>
154
>
private sizesById: { [key: string]: SizeContribution };
155
>
private sizeSchema: IJSONSchemaForSizes = { type: 'object', properties: {} };
156
>
private sizeReferenceSchema: IJSONSchema & { enum: string[]; enumDescriptions: string[] } = { type: 'string', enum: [], enumDescriptions: [] };
157
>
158
>
constructor() {
159
>
super();
160
>
this.sizesById = {};
161
>
}
162
>
163
>
public notifyThemeUpdate(theme: IColorTheme) {
164
for (const key of Object.keys(this.sizesById)) {
165
const sizeVal = this.resolveDefaultSize(key, theme);