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

Update Package To Be Side Effects Free #281

Merged
merged 10 commits into from
Nov 2, 2021
Merged

Update Package To Be Side Effects Free #281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e96b234
Add sideEffects false field to package.json
hawkticehurst Oct 27, 2021
a38f781
Wrap mutation observer configuration script in a function
hawkticehurst Oct 27, 2021
4a2fe13
Remove applyTheme script file as an package export
hawkticehurst Oct 27, 2021
42775e8
Import and use initThemeChangeListener function when creating design …
hawkticehurst Oct 27, 2021
e71816c
Delete tokenMapping.ts
hawkticehurst Oct 29, 2021
4f3be4b
Create design-tokens/create utility file/function that creates FAST C…
hawkticehurst Oct 29, 2021
21fb797
Import create util function into src/design-tokens.ts and update the …
hawkticehurst Oct 29, 2021
d52ac61
Update applyTheme util functions to take tokenMappings as a paramter
hawkticehurst Oct 29, 2021
274a0ca
Create prettier override config so src/design-tokens.ts is more readable
hawkticehurst Nov 2, 2021
818677c
Reorder and reformat src/design-tokens.ts to improve readability
hawkticehurst Nov 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@
"options": {
"printWidth": 110
}
},
{
"files": "src/design-tokens.ts",
"options": {
"printWidth": 200
}
}
]
}
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
},
"main": "dist/esm/index.js",
"types": "dist/dts/index.d.ts",
"sideEffects": false,
"scripts": {
"start": "start-storybook -p 6006",
"build": "rollup -c && tsc -p ./tsconfig.json && npm run doc",
Expand Down
234 changes: 73 additions & 161 deletions src/design-tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,216 +1,128 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

import {DesignToken} from '@microsoft/fast-foundation';

const {create} = DesignToken;
import {create} from './utilities/design-tokens/create';

/**
* Global design tokens.
*/
export const designUnit = create<number>('design-unit').withDefault(4);

export const borderWidth = create<number>('border-width').withDefault(1);
export const contrastActiveBorder = create<string>(
'contrast-active-border'
).withDefault('#f38518');
export const contrastBorder =
create<string>('contrast-border').withDefault('#6fc3df');
export const contrastActiveBorder = create<string>('contrast-active-border', '--vscode-contrastActiveBorder').withDefault('#f38518');
export const contrastBorder = create<string>('contrast-border', '--vscode-contrastBorder').withDefault('#6fc3df');
export const cornerRadius = create<number>('corner-radius').withDefault(0);
export const disabledOpacity =
create<number>('disabled-opacity').withDefault(0.4);
export const focusBorder =
create<string>('focus-border').withDefault('#007fd4');
export const foreground = create<string>('foreground').withDefault('#cccccc');
export const fontFamily = create<string>('font-family').withDefault(
export const designUnit = create<number>('design-unit').withDefault(4);
export const disabledOpacity = create<number>('disabled-opacity').withDefault(0.4);
export const focusBorder = create<string>('focus-border', '--vscode-focusBorder').withDefault('#007fd4');
export const fontFamily = create<string>('font-family', '--vscode-font-family').withDefault(
'-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol'
);
export const fontWeight = create<string>('font-weight').withDefault('400');
export const fontWeight = create<string>('font-weight', '--vscode-font-weight').withDefault('400');
export const foreground = create<string>('foreground', '--vscode-foreground').withDefault('#cccccc');
export const inputHeight = create<string>('input-height').withDefault('26');
export const inputMinWidth =
create<string>('input-min-width').withDefault('100px');

/**
* Type-ramp font-size and line-height design tokens.
*/
export const typeRampBaseFontSize = create<string>(
'type-ramp-base-font-size'
).withDefault('13px');
export const typeRampBaseLineHeight = create<string>(
'type-ramp-base-line-height'
).withDefault('normal');
export const typeRampMinus1FontSize = create<string>(
'type-ramp-minus1-font-size'
).withDefault('11px');
export const typeRampMinus1LineHeight = create<string>(
'type-ramp-minus1-line-height'
).withDefault('16px');
export const typeRampMinus2FontSize = create<string>(
'type-ramp-minus2-font-size'
).withDefault('9px');
export const typeRampMinus2LineHeight = create<string>(
'type-ramp-minus2-line-height'
).withDefault('16px');
export const typeRampPlus1FontSize = create<string>(
'type-ramp-plus1-font-size'
).withDefault('16px');
export const typeRampPlus1LineHeight = create<string>(
'type-ramp-plus1-line-height'
).withDefault('24px');
export const inputMinWidth = create<string>('input-min-width').withDefault('100px');
export const typeRampBaseFontSize = create<string>('type-ramp-base-font-size', '--vscode-font-size').withDefault('13px');
export const typeRampBaseLineHeight = create<string>('type-ramp-base-line-height').withDefault('normal');
export const typeRampMinus1FontSize = create<string>('type-ramp-minus1-font-size').withDefault('11px');
export const typeRampMinus1LineHeight = create<string>('type-ramp-minus1-line-height').withDefault('16px');
export const typeRampMinus2FontSize = create<string>('type-ramp-minus2-font-size').withDefault('9px');
export const typeRampMinus2LineHeight = create<string>('type-ramp-minus2-line-height').withDefault('16px');
export const typeRampPlus1FontSize = create<string>('type-ramp-plus1-font-size').withDefault('16px');
export const typeRampPlus1LineHeight = create<string>('type-ramp-plus1-line-height').withDefault('24px');

/**
* Badge design tokens.
*/
export const badgeForeground =
create<string>('badge-foreground').withDefault('#ffffff');
export const badgeBackground =
create<string>('badge-background').withDefault('#4d4d4d');

export const badgeBackground = create<string>('badge-background', '--vscode-badge-background').withDefault('#4d4d4d');
export const badgeForeground = create<string>('badge-foreground', '--vscode-badge-foreground').withDefault('#ffffff');

/**
* Button design tokens.
*/
export const buttonPrimaryForeground = create<string>(
'button-primary-foreground'
).withDefault('#ffffff');
export const buttonPrimaryBackground = create<string>(
'button-primary-background'
).withDefault('#0e639c');
export const buttonPrimaryHoverBackground = create<string>(
'button-primary-hover-background'
).withDefault('#1177bb');
export const buttonSecondaryForeground = create<string>(
'button-secondary-foreground'
).withDefault('#ffffff');
export const buttonSecondaryBackground = create<string>(
'button-secondary-background'
).withDefault('#3a3d41');
export const buttonSecondaryHoverBackground = create<string>(
'button-secondary-hover-background'
).withDefault('#45494e');
export const buttonPaddingHorizontal = create<string>(
'button-padding-horizontal'
).withDefault('11px');
export const buttonPaddingVertical = create<string>(
'button-padding-vertical'
).withDefault('6px');
export const buttonIconBackground = create<string>(
'button-icon-background'
).withDefault('transparent');
export const buttonIconHoverBackground = create<string>(
'button-icon-hover-background'
).withDefault('rgba(90, 93, 94, 0.31)');
export const buttonIconPadding = create<string>(
'button-icon-padding'
).withDefault('3px');
export const buttonIconCornerRadius = create<string>(
'button-icon-corner-radius'
).withDefault('5px');
export const buttonIconFocusBorderOffset = create<number>(
'button-icon-outline-offset'
).withDefault(0);
// Note: Button Border is used only for high contrast themes and should be
// left as transparent otherwise.
export const buttonBorder =
create<string>('button-border').withDefault('transparent');

// Note: Button border is used only for high contrast themes and should be left as transparent otherwise.
export const buttonBorder = create<string>('button-border', '--vscode-button-border').withDefault('transparent');
export const buttonIconBackground = create<string>('button-icon-background').withDefault('transparent');
export const buttonIconCornerRadius = create<string>('button-icon-corner-radius').withDefault('5px');
export const buttonIconFocusBorderOffset = create<number>('button-icon-outline-offset').withDefault(0);
export const buttonIconHoverBackground = create<string>('button-icon-hover-background').withDefault('rgba(90, 93, 94, 0.31)');
export const buttonIconPadding = create<string>('button-icon-padding').withDefault('3px');
export const buttonPrimaryBackground = create<string>('button-primary-background', '--vscode-button-background').withDefault('#0e639c');
export const buttonPrimaryForeground = create<string>('button-primary-foreground', '--vscode-button-foreground').withDefault('#ffffff');
export const buttonPrimaryHoverBackground = create<string>('button-primary-hover-background', '--vscode-button-hoverBackground').withDefault('#1177bb');
export const buttonSecondaryBackground = create<string>('button-secondary-background', '--vscode-button-secondaryBackground').withDefault('#3a3d41');
export const buttonSecondaryForeground = create<string>('button-secondary-foreground', '--vscode-button-secondaryForeground').withDefault('#ffffff');
export const buttonSecondaryHoverBackground = create<string>('button-secondary-hover-background', '--vscode-button-secondaryHoverBackground').withDefault('#45494e');
export const buttonPaddingHorizontal = create<string>('button-padding-horizontal').withDefault('11px');
export const buttonPaddingVertical = create<string>('button-padding-vertical').withDefault('6px');

/**
* Checkbox design tokens.
*/
export const checkboxBackground = create<string>(
'checkbox-background'
).withDefault('#3c3c3c');
export const checkboxForeground = create<string>(
'checkbox-foreground'
).withDefault('#f0f0f0');
export const checkboxBorder =
create<string>('checkbox-border').withDefault('#3c3c3c');
export const checkboxCornerRadius = create<number>(
'checkbox-corner-radius'
).withDefault(3);

export const checkboxBackground = create<string>('checkbox-background', '--vscode-checkbox-background').withDefault('#3c3c3c');
export const checkboxBorder = create<string>('checkbox-border', '--vscode-checkbox-border').withDefault('#3c3c3c');
export const checkboxCornerRadius = create<number>('checkbox-corner-radius').withDefault(3);
export const checkboxForeground = create<string>('checkbox-foreground', '--vscode-checkbox-foreground').withDefault('#f0f0f0');

/**
* Data Grid design tokens
*/
export const listActiveSelectionBackground = create<string>(
'list-active-selection-background'
).withDefault('#094771');
export const listActiveSelectionForeground = create<string>(
'list-active-selection-foreground'
).withDefault('#ffffff');
export const listHoverBackground = create<string>(
'list-hover-background'
).withDefault('#2a2d2e');
export const quickInputBackground = create<string>(
'quick-input-background'
).withDefault('#252526');

export const listActiveSelectionBackground = create<string>('list-active-selection-background', '--vscode-list-activeSelectionBackground').withDefault('#094771');
export const listActiveSelectionForeground = create<string>('list-active-selection-foreground', '--vscode-list-activeSelectionForeground').withDefault('#ffffff');
export const listHoverBackground = create<string>('list-hover-background', '--vscode-list-hoverBackground').withDefault('#2a2d2e');
export const quickInputBackground = create<string>('quick-input-background', '--vscode-quickInput-background').withDefault('#252526');

/**
* Divider design tokens.
*/
export const dividerBackground =
create<string>('divider-background').withDefault('#454545');

export const dividerBackground = create<string>('divider-background', '--vscode-settings-dropdownListBorder').withDefault('#454545');

/**
* Dropdown design tokens.
*/
export const dropdownBackground = create<string>(
'dropdown-background'
).withDefault('#3c3c3c');
export const dropdownForeground = create<string>(
'dropdown-foreground'
).withDefault('#f0f0f0');
export const dropdownBorder =
create<string>('dropdown-border').withDefault('#3c3c3c');
export const dropdownListMaxHeight = create<string>(
'dropdown-list-max-height'
).withDefault('200px');

export const dropdownBackground = create<string>('dropdown-background', '--vscode-dropdown-background').withDefault('#3c3c3c');
export const dropdownBorder = create<string>('dropdown-border', '--vscode-dropdown-border').withDefault('#3c3c3c');
export const dropdownForeground = create<string>('dropdown-foreground', '--vscode-dropdown-foreground').withDefault('#f0f0f0');
export const dropdownListMaxHeight = create<string>('dropdown-list-max-height').withDefault('200px');

/**
* Text Field & Area design tokens.
*/
export const inputBackground =
create<string>('input-background').withDefault('#3c3c3c');
export const inputForeground =
create<string>('input-foreground').withDefault('#cccccc');
export const inputPlaceholderForeground = create<string>(
'input-placeholder-foreground'
).withDefault('#cccccc');

export const inputBackground = create<string>('input-background', '--vscode-input-background').withDefault('#3c3c3c');
export const inputForeground = create<string>('input-foreground', '--vscode-input-foreground').withDefault('#cccccc');
export const inputPlaceholderForeground = create<string>('input-placeholder-foreground', '--vscode-input-placeholderForeground').withDefault('#cccccc');

/**
* Link design tokens.
*/
export const linkForeground = create<string>(
'link-active-foreground'
).withDefault('#3794ff');
export const linkActiveForeground =
create<string>('link-foreground').withDefault('#3794ff');

export const linkActiveForeground = create<string>('link-foreground', '--vscode-textLink-activeForeground').withDefault('#3794ff');
export const linkForeground = create<string>('link-active-foreground', '--vscode-textLink-foreground').withDefault('#3794ff');

/**
* Progress Bar & Ring design tokens.
* Progress ring design tokens.
*/
export const progressBackground = create<string>(
'progress-background'
).withDefault('#0e70c0');

export const progressBackground = create<string>('progress-background', '--vscode-progressBar-background').withDefault('#0e70c0');

/**
* Panels design tokens.
*/
export const panelViewBackground = create<string>(
'panel-view-background'
).withDefault('#1e1e1e');
export const panelViewBorder =
create<string>('panel-view-border').withDefault('#80808059');
export const panelTabForeground = create<string>(
'panel-tab-foreground'
).withDefault('#e7e7e799');
export const panelTabActiveForeground = create<string>(
'panel-tab-active-foreground'
).withDefault('#e7e7e7');
export const panelTabActiveBorder = create<string>(
'panel-tab-active-border'
).withDefault('#e7e7e7');

export const panelTabActiveBorder = create<string>('panel-tab-active-border', '--vscode-panelTitle-activeBorder').withDefault('#e7e7e7');
export const panelTabActiveForeground = create<string>('panel-tab-active-foreground', '--vscode-panelTitle-activeForeground').withDefault('#e7e7e7');
export const panelTabForeground = create<string>('panel-tab-foreground', '--vscode-panelTitle-inactiveForeground').withDefault('#e7e7e799');
export const panelViewBackground = create<string>('panel-view-background', '--vscode-panel-background').withDefault('#1e1e1e');
export const panelViewBorder = create<string>('panel-view-border', '--vscode-panel-border').withDefault('#80808059');

/**
* Tag design tokens.
*/
export const tagCornerRadius =
create<string>('tag-corner-radius').withDefault('2px');

export const tagCornerRadius = create<string>('tag-corner-radius').withDefault('2px');
3 changes: 0 additions & 3 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,3 @@ export * from './radio/index';
export * from './tag/index';
export * from './text-area/index';
export * from './text-field/index';

// Export utility functions
export * from './utilities/theme/applyTheme';
54 changes: 54 additions & 0 deletions src/utilities/design-tokens/create.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import {CSSDesignToken, DesignToken} from '@microsoft/fast-foundation';
import {initThemeChangeListener} from '../theme/applyTheme';

/**
* The possible CSSDesignToken generic types.
*/
export type T =
| string
| number
| boolean
| symbol
| any[]
| Uint8Array
| ({createCSS?(): string} & Record<PropertyKey, any>)
| null;

/**
* A mapping of all the Visual Studio Code theme CSS variables mapped to the
* toolkit design tokens.
*/
export const tokenMappings: {[index: string]: CSSDesignToken<T>} = {};

/**
* Boolean flag that ensures the VS Code theme listener is initialized once.
*/
let isThemeListenerInitialized = false;

/**
* Given a design token name, return a new FAST CSSDesignToken.
*
* @remarks A VS Code theme CSS variable can be optionally passed to be
* associated with the design token.
*
* @remarks On the first execution the VS Code theme listener will also be
* initialized.
*
* @param name A design token name.
* @param vscodeThemeVar A VS Code theme CSS variable name to be associated with
* the design token.
* @returns A FAST CSSDesignToken that emits a CSS custom property.
*/
export function create<T>(name: string, vscodeThemeVar?: string) {
const designToken = DesignToken.create<T>(name);

if (vscodeThemeVar) {
tokenMappings[vscodeThemeVar] = designToken;
}
if (!isThemeListenerInitialized) {
initThemeChangeListener(tokenMappings);
isThemeListenerInitialized = true;
}

return designToken;
}
Loading