Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Commit f4e4481

Browse files
hawkticehursthawkticehurst
authored
Update Package To Be Side Effects Free (#281)
Description of changes Updates the way that design tokens and VS Code theme listening/application is accomplished so the toolkit no longer has any side effects. Also, add `sideEffects: false` to `package.json`.
1 parent 64bf34f commit f4e4481

File tree

7 files changed

+154
-265
lines changed

7 files changed

+154
-265
lines changed

‎.prettierrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@
2525
"options": {
2626
"printWidth": 110
2727
}
28+
},
29+
{
30+
"files": "src/design-tokens.ts",
31+
"options": {
32+
"printWidth": 200
33+
}
2834
}
2935
]
3036
}

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
},
1717
"main": "dist/esm/index.js",
1818
"types": "dist/dts/index.d.ts",
19+
"sideEffects": false,
1920
"scripts": {
2021
"start": "start-storybook -p 6006",
2122
"build": "rollup -c && tsc -p ./tsconfig.json && npm run doc",

‎src/design-tokens.ts‎

Lines changed: 73 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -1,216 +1,128 @@
11
// Copyright (c) Microsoft Corporation.
22
// Licensed under the MIT License.
33

4-
import {DesignToken} from '@microsoft/fast-foundation';
5-
6-
const {create} = DesignToken;
4+
import {create} from './utilities/design-tokens/create';
75

86
/**
97
* Global design tokens.
108
*/
11-
export const designUnit = create<number>('design-unit').withDefault(4);
9+
1210
export const borderWidth = create<number>('border-width').withDefault(1);
13-
export const contrastActiveBorder = create<string>(
14-
'contrast-active-border'
15-
).withDefault('#f38518');
16-
export const contrastBorder =
17-
create<string>('contrast-border').withDefault('#6fc3df');
11+
export const contrastActiveBorder = create<string>('contrast-active-border', '--vscode-contrastActiveBorder').withDefault('#f38518');
12+
export const contrastBorder = create<string>('contrast-border', '--vscode-contrastBorder').withDefault('#6fc3df');
1813
export const cornerRadius = create<number>('corner-radius').withDefault(0);
19-
export const disabledOpacity =
20-
create<number>('disabled-opacity').withDefault(0.4);
21-
export const focusBorder =
22-
create<string>('focus-border').withDefault('#007fd4');
23-
export const foreground = create<string>('foreground').withDefault('#cccccc');
24-
export const fontFamily = create<string>('font-family').withDefault(
14+
export const designUnit = create<number>('design-unit').withDefault(4);
15+
export const disabledOpacity = create<number>('disabled-opacity').withDefault(0.4);
16+
export const focusBorder = create<string>('focus-border', '--vscode-focusBorder').withDefault('#007fd4');
17+
export const fontFamily = create<string>('font-family', '--vscode-font-family').withDefault(
2518
'-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol'
2619
);
27-
export const fontWeight = create<string>('font-weight').withDefault('400');
20+
export const fontWeight = create<string>('font-weight', '--vscode-font-weight').withDefault('400');
21+
export const foreground = create<string>('foreground', '--vscode-foreground').withDefault('#cccccc');
2822
export const inputHeight = create<string>('input-height').withDefault('26');
29-
export const inputMinWidth =
30-
create<string>('input-min-width').withDefault('100px');
31-
32-
/**
33-
* Type-ramp font-size and line-height design tokens.
34-
*/
35-
export const typeRampBaseFontSize = create<string>(
36-
'type-ramp-base-font-size'
37-
).withDefault('13px');
38-
export const typeRampBaseLineHeight = create<string>(
39-
'type-ramp-base-line-height'
40-
).withDefault('normal');
41-
export const typeRampMinus1FontSize = create<string>(
42-
'type-ramp-minus1-font-size'
43-
).withDefault('11px');
44-
export const typeRampMinus1LineHeight = create<string>(
45-
'type-ramp-minus1-line-height'
46-
).withDefault('16px');
47-
export const typeRampMinus2FontSize = create<string>(
48-
'type-ramp-minus2-font-size'
49-
).withDefault('9px');
50-
export const typeRampMinus2LineHeight = create<string>(
51-
'type-ramp-minus2-line-height'
52-
).withDefault('16px');
53-
export const typeRampPlus1FontSize = create<string>(
54-
'type-ramp-plus1-font-size'
55-
).withDefault('16px');
56-
export const typeRampPlus1LineHeight = create<string>(
57-
'type-ramp-plus1-line-height'
58-
).withDefault('24px');
23+
export const inputMinWidth = create<string>('input-min-width').withDefault('100px');
24+
export const typeRampBaseFontSize = create<string>('type-ramp-base-font-size', '--vscode-font-size').withDefault('13px');
25+
export const typeRampBaseLineHeight = create<string>('type-ramp-base-line-height').withDefault('normal');
26+
export const typeRampMinus1FontSize = create<string>('type-ramp-minus1-font-size').withDefault('11px');
27+
export const typeRampMinus1LineHeight = create<string>('type-ramp-minus1-line-height').withDefault('16px');
28+
export const typeRampMinus2FontSize = create<string>('type-ramp-minus2-font-size').withDefault('9px');
29+
export const typeRampMinus2LineHeight = create<string>('type-ramp-minus2-line-height').withDefault('16px');
30+
export const typeRampPlus1FontSize = create<string>('type-ramp-plus1-font-size').withDefault('16px');
31+
export const typeRampPlus1LineHeight = create<string>('type-ramp-plus1-line-height').withDefault('24px');
5932

6033
/**
6134
* Badge design tokens.
6235
*/
63-
export const badgeForeground =
64-
create<string>('badge-foreground').withDefault('#ffffff');
65-
export const badgeBackground =
66-
create<string>('badge-background').withDefault('#4d4d4d');
36+
37+
export const badgeBackground = create<string>('badge-background', '--vscode-badge-background').withDefault('#4d4d4d');
38+
export const badgeForeground = create<string>('badge-foreground', '--vscode-badge-foreground').withDefault('#ffffff');
6739

6840
/**
6941
* Button design tokens.
7042
*/
71-
export const buttonPrimaryForeground = create<string>(
72-
'button-primary-foreground'
73-
).withDefault('#ffffff');
74-
export const buttonPrimaryBackground = create<string>(
75-
'button-primary-background'
76-
).withDefault('#0e639c');
77-
export const buttonPrimaryHoverBackground = create<string>(
78-
'button-primary-hover-background'
79-
).withDefault('#1177bb');
80-
export const buttonSecondaryForeground = create<string>(
81-
'button-secondary-foreground'
82-
).withDefault('#ffffff');
83-
export const buttonSecondaryBackground = create<string>(
84-
'button-secondary-background'
85-
).withDefault('#3a3d41');
86-
export const buttonSecondaryHoverBackground = create<string>(
87-
'button-secondary-hover-background'
88-
).withDefault('#45494e');
89-
export const buttonPaddingHorizontal = create<string>(
90-
'button-padding-horizontal'
91-
).withDefault('11px');
92-
export const buttonPaddingVertical = create<string>(
93-
'button-padding-vertical'
94-
).withDefault('6px');
95-
export const buttonIconBackground = create<string>(
96-
'button-icon-background'
97-
).withDefault('transparent');
98-
export const buttonIconHoverBackground = create<string>(
99-
'button-icon-hover-background'
100-
).withDefault('rgba(90, 93, 94, 0.31)');
101-
export const buttonIconPadding = create<string>(
102-
'button-icon-padding'
103-
).withDefault('3px');
104-
export const buttonIconCornerRadius = create<string>(
105-
'button-icon-corner-radius'
106-
).withDefault('5px');
107-
export const buttonIconFocusBorderOffset = create<number>(
108-
'button-icon-outline-offset'
109-
).withDefault(0);
110-
// Note: Button Border is used only for high contrast themes and should be
111-
// left as transparent otherwise.
112-
export const buttonBorder =
113-
create<string>('button-border').withDefault('transparent');
43+
44+
// Note: Button border is used only for high contrast themes and should be left as transparent otherwise.
45+
export const buttonBorder = create<string>('button-border', '--vscode-button-border').withDefault('transparent');
46+
export const buttonIconBackground = create<string>('button-icon-background').withDefault('transparent');
47+
export const buttonIconCornerRadius = create<string>('button-icon-corner-radius').withDefault('5px');
48+
export const buttonIconFocusBorderOffset = create<number>('button-icon-outline-offset').withDefault(0);
49+
export const buttonIconHoverBackground = create<string>('button-icon-hover-background').withDefault('rgba(90, 93, 94, 0.31)');
50+
export const buttonIconPadding = create<string>('button-icon-padding').withDefault('3px');
51+
export const buttonPrimaryBackground = create<string>('button-primary-background', '--vscode-button-background').withDefault('#0e639c');
52+
export const buttonPrimaryForeground = create<string>('button-primary-foreground', '--vscode-button-foreground').withDefault('#ffffff');
53+
export const buttonPrimaryHoverBackground = create<string>('button-primary-hover-background', '--vscode-button-hoverBackground').withDefault('#1177bb');
54+
export const buttonSecondaryBackground = create<string>('button-secondary-background', '--vscode-button-secondaryBackground').withDefault('#3a3d41');
55+
export const buttonSecondaryForeground = create<string>('button-secondary-foreground', '--vscode-button-secondaryForeground').withDefault('#ffffff');
56+
export const buttonSecondaryHoverBackground = create<string>('button-secondary-hover-background', '--vscode-button-secondaryHoverBackground').withDefault('#45494e');
57+
export const buttonPaddingHorizontal = create<string>('button-padding-horizontal').withDefault('11px');
58+
export const buttonPaddingVertical = create<string>('button-padding-vertical').withDefault('6px');
11459

11560
/**
11661
* Checkbox design tokens.
11762
*/
118-
export const checkboxBackground = create<string>(
119-
'checkbox-background'
120-
).withDefault('#3c3c3c');
121-
export const checkboxForeground = create<string>(
122-
'checkbox-foreground'
123-
).withDefault('#f0f0f0');
124-
export const checkboxBorder =
125-
create<string>('checkbox-border').withDefault('#3c3c3c');
126-
export const checkboxCornerRadius = create<number>(
127-
'checkbox-corner-radius'
128-
).withDefault(3);
63+
64+
export const checkboxBackground = create<string>('checkbox-background', '--vscode-checkbox-background').withDefault('#3c3c3c');
65+
export const checkboxBorder = create<string>('checkbox-border', '--vscode-checkbox-border').withDefault('#3c3c3c');
66+
export const checkboxCornerRadius = create<number>('checkbox-corner-radius').withDefault(3);
67+
export const checkboxForeground = create<string>('checkbox-foreground', '--vscode-checkbox-foreground').withDefault('#f0f0f0');
12968

13069
/**
13170
* Data Grid design tokens
13271
*/
133-
export const listActiveSelectionBackground = create<string>(
134-
'list-active-selection-background'
135-
).withDefault('#094771');
136-
export const listActiveSelectionForeground = create<string>(
137-
'list-active-selection-foreground'
138-
).withDefault('#ffffff');
139-
export const listHoverBackground = create<string>(
140-
'list-hover-background'
141-
).withDefault('#2a2d2e');
142-
export const quickInputBackground = create<string>(
143-
'quick-input-background'
144-
).withDefault('#252526');
72+
73+
export const listActiveSelectionBackground = create<string>('list-active-selection-background', '--vscode-list-activeSelectionBackground').withDefault('#094771');
74+
export const listActiveSelectionForeground = create<string>('list-active-selection-foreground', '--vscode-list-activeSelectionForeground').withDefault('#ffffff');
75+
export const listHoverBackground = create<string>('list-hover-background', '--vscode-list-hoverBackground').withDefault('#2a2d2e');
76+
export const quickInputBackground = create<string>('quick-input-background', '--vscode-quickInput-background').withDefault('#252526');
14577

14678
/**
14779
* Divider design tokens.
14880
*/
149-
export const dividerBackground =
150-
create<string>('divider-background').withDefault('#454545');
81+
82+
export const dividerBackground = create<string>('divider-background', '--vscode-settings-dropdownListBorder').withDefault('#454545');
15183

15284
/**
15385
* Dropdown design tokens.
15486
*/
155-
export const dropdownBackground = create<string>(
156-
'dropdown-background'
157-
).withDefault('#3c3c3c');
158-
export const dropdownForeground = create<string>(
159-
'dropdown-foreground'
160-
).withDefault('#f0f0f0');
161-
export const dropdownBorder =
162-
create<string>('dropdown-border').withDefault('#3c3c3c');
163-
export const dropdownListMaxHeight = create<string>(
164-
'dropdown-list-max-height'
165-
).withDefault('200px');
87+
88+
export const dropdownBackground = create<string>('dropdown-background', '--vscode-dropdown-background').withDefault('#3c3c3c');
89+
export const dropdownBorder = create<string>('dropdown-border', '--vscode-dropdown-border').withDefault('#3c3c3c');
90+
export const dropdownForeground = create<string>('dropdown-foreground', '--vscode-dropdown-foreground').withDefault('#f0f0f0');
91+
export const dropdownListMaxHeight = create<string>('dropdown-list-max-height').withDefault('200px');
16692

16793
/**
16894
* Text Field & Area design tokens.
16995
*/
170-
export const inputBackground =
171-
create<string>('input-background').withDefault('#3c3c3c');
172-
export const inputForeground =
173-
create<string>('input-foreground').withDefault('#cccccc');
174-
export const inputPlaceholderForeground = create<string>(
175-
'input-placeholder-foreground'
176-
).withDefault('#cccccc');
96+
97+
export const inputBackground = create<string>('input-background', '--vscode-input-background').withDefault('#3c3c3c');
98+
export const inputForeground = create<string>('input-foreground', '--vscode-input-foreground').withDefault('#cccccc');
99+
export const inputPlaceholderForeground = create<string>('input-placeholder-foreground', '--vscode-input-placeholderForeground').withDefault('#cccccc');
177100

178101
/**
179102
* Link design tokens.
180103
*/
181-
export const linkForeground = create<string>(
182-
'link-active-foreground'
183-
).withDefault('#3794ff');
184-
export const linkActiveForeground =
185-
create<string>('link-foreground').withDefault('#3794ff');
104+
105+
export const linkActiveForeground = create<string>('link-foreground', '--vscode-textLink-activeForeground').withDefault('#3794ff');
106+
export const linkForeground = create<string>('link-active-foreground', '--vscode-textLink-foreground').withDefault('#3794ff');
186107

187108
/**
188-
* Progress Bar & Ring design tokens.
109+
* Progress ring design tokens.
189110
*/
190-
export const progressBackground = create<string>(
191-
'progress-background'
192-
).withDefault('#0e70c0');
111+
112+
export const progressBackground = create<string>('progress-background', '--vscode-progressBar-background').withDefault('#0e70c0');
193113

194114
/**
195115
* Panels design tokens.
196116
*/
197-
export const panelViewBackground = create<string>(
198-
'panel-view-background'
199-
).withDefault('#1e1e1e');
200-
export const panelViewBorder =
201-
create<string>('panel-view-border').withDefault('#80808059');
202-
export const panelTabForeground = create<string>(
203-
'panel-tab-foreground'
204-
).withDefault('#e7e7e799');
205-
export const panelTabActiveForeground = create<string>(
206-
'panel-tab-active-foreground'
207-
).withDefault('#e7e7e7');
208-
export const panelTabActiveBorder = create<string>(
209-
'panel-tab-active-border'
210-
).withDefault('#e7e7e7');
117+
118+
export const panelTabActiveBorder = create<string>('panel-tab-active-border', '--vscode-panelTitle-activeBorder').withDefault('#e7e7e7');
119+
export const panelTabActiveForeground = create<string>('panel-tab-active-foreground', '--vscode-panelTitle-activeForeground').withDefault('#e7e7e7');
120+
export const panelTabForeground = create<string>('panel-tab-foreground', '--vscode-panelTitle-inactiveForeground').withDefault('#e7e7e799');
121+
export const panelViewBackground = create<string>('panel-view-background', '--vscode-panel-background').withDefault('#1e1e1e');
122+
export const panelViewBorder = create<string>('panel-view-border', '--vscode-panel-border').withDefault('#80808059');
211123

212124
/**
213125
* Tag design tokens.
214126
*/
215-
export const tagCornerRadius =
216-
create<string>('tag-corner-radius').withDefault('2px');
127+
128+
export const tagCornerRadius = create<string>('tag-corner-radius').withDefault('2px');

‎src/index.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,3 @@ export * from './radio/index';
1717
export * from './tag/index';
1818
export * from './text-area/index';
1919
export * from './text-field/index';
20-
21-
// Export utility functions
22-
export * from './utilities/theme/applyTheme';

‎src/utilities/design-tokens/create.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import {CSSDesignToken, DesignToken} from '@microsoft/fast-foundation';
2+
import {initThemeChangeListener} from '../theme/applyTheme';
3+
4+
/**
5+
* The possible CSSDesignToken generic types.
6+
*/
7+
export type T =
8+
| string
9+
| number
10+
| boolean
11+
| symbol
12+
| any[]
13+
| Uint8Array
14+
| ({createCSS?(): string} & Record<PropertyKey, any>)
15+
| null;
16+
17+
/**
18+
* A mapping of all the Visual Studio Code theme CSS variables mapped to the
19+
* toolkit design tokens.
20+
*/
21+
export const tokenMappings: {[index: string]: CSSDesignToken<T>} = {};
22+
23+
/**
24+
* Boolean flag that ensures the VS Code theme listener is initialized once.
25+
*/
26+
let isThemeListenerInitialized = false;
27+
28+
/**
29+
* Given a design token name, return a new FAST CSSDesignToken.
30+
*
31+
* @remarks A VS Code theme CSS variable can be optionally passed to be
32+
* associated with the design token.
33+
*
34+
* @remarks On the first execution the VS Code theme listener will also be
35+
* initialized.
36+
*
37+
* @param name A design token name.
38+
* @param vscodeThemeVar A VS Code theme CSS variable name to be associated with
39+
* the design token.
40+
* @returns A FAST CSSDesignToken that emits a CSS custom property.
41+
*/
42+
export function create<T>(name: string, vscodeThemeVar?: string) {
43+
const designToken = DesignToken.create<T>(name);
44+
45+
if (vscodeThemeVar) {
46+
tokenMappings[vscodeThemeVar] = designToken;
47+
}
48+
if (!isThemeListenerInitialized) {
49+
initThemeChangeListener(tokenMappings);
50+
isThemeListenerInitialized = true;
51+
}
52+
53+
return designToken;
54+
}

0 commit comments

Comments
 (0)