diff --git a/change/@fluentui-web-components-2020-12-17-11-10-23-master.json b/change/@fluentui-web-components-2020-12-17-11-10-23-master.json new file mode 100644 index 00000000000000..f7d8bc9e461236 --- /dev/null +++ b/change/@fluentui-web-components-2020-12-17-11-10-23-master.json @@ -0,0 +1,8 @@ +{ + "type": "patch", + "comment": "Updated type ramp to latest values.", + "packageName": "@fluentui/web-components", + "email": "brheston@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-12-17T19:10:23.682Z" +} diff --git a/packages/web-components/src/design-tokens.ts b/packages/web-components/src/design-tokens.ts index c435846045a998..465f19cc9b0a5a 100644 --- a/packages/web-components/src/design-tokens.ts +++ b/packages/web-components/src/design-tokens.ts @@ -90,19 +90,19 @@ export const typeRampBaseLineHeight = create('type-ramp-base-line-height export const typeRampMinus1FontSize = create('type-ramp-minus1-font-size').withDefault('12px'); export const typeRampMinus1LineHeight = create('type-ramp-minus1-line-height').withDefault('16px'); export const typeRampMinus2FontSize = create('type-ramp-minus2-font-size').withDefault('10px'); -export const typeRampMinus2LineHeight = create('type-ramp-minus2-line-height').withDefault('16px'); +export const typeRampMinus2LineHeight = create('type-ramp-minus2-line-height').withDefault('14px'); export const typeRampPlus1FontSize = create('type-ramp-plus1-font-size').withDefault('16px'); -export const typeRampPlus1LineHeight = create('type-ramp-plus1-line-height').withDefault('24px'); +export const typeRampPlus1LineHeight = create('type-ramp-plus1-line-height').withDefault('22px'); export const typeRampPlus2FontSize = create('type-ramp-plus2-font-size').withDefault('20px'); export const typeRampPlus2LineHeight = create('type-ramp-plus2-line-height').withDefault('28px'); -export const typeRampPlus3FontSize = create('type-ramp-plus3-font-size').withDefault('28px'); -export const typeRampPlus3LineHeight = create('type-ramp-plus3-line-height').withDefault('36px'); -export const typeRampPlus4FontSize = create('type-ramp-plus4-font-size').withDefault('34px'); -export const typeRampPlus4LineHeight = create('type-ramp-plus4-line-height').withDefault('44px'); -export const typeRampPlus5FontSize = create('type-ramp-plus5-font-size').withDefault('46px'); -export const typeRampPlus5LineHeight = create('type-ramp-plus5-line-height').withDefault('56px'); -export const typeRampPlus6FontSize = create('type-ramp-plus6-font-size').withDefault('60px'); -export const typeRampPlus6LineHeight = create('type-ramp-plus6-line-height').withDefault('72px'); +export const typeRampPlus3FontSize = create('type-ramp-plus3-font-size').withDefault('24px'); +export const typeRampPlus3LineHeight = create('type-ramp-plus3-line-height').withDefault('32px'); +export const typeRampPlus4FontSize = create('type-ramp-plus4-font-size').withDefault('28px'); +export const typeRampPlus4LineHeight = create('type-ramp-plus4-line-height').withDefault('36px'); +export const typeRampPlus5FontSize = create('type-ramp-plus5-font-size').withDefault('32px'); +export const typeRampPlus5LineHeight = create('type-ramp-plus5-line-height').withDefault('40px'); +export const typeRampPlus6FontSize = create('type-ramp-plus6-font-size').withDefault('40px'); +export const typeRampPlus6LineHeight = create('type-ramp-plus6-line-height').withDefault('52px'); export const neutralPalette = create('neutral-palette').withDefault(PaletteRGB.create(middleGrey)); export const accentPalette = create('accent-palette').withDefault(PaletteRGB.create(accentBase));