(web-components) update type ramp (microsoft#16927)

* Updated type ramp to latest values. * Change files * Updated to new design-tokens definition format Co-authored-by: Brian Heston <[email protected]>
PeterDraex · Aug 6, 2021 · 16e63df · 16e63df
1 parent c5b8966
commit 16e63df
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
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
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Updated type ramp to latest values.",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "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
@@ -90,19 +90,19 @@ export const typeRampBaseLineHeight = create<string>('type-ramp-base-line-height
 export const typeRampMinus1FontSize = create<string>('type-ramp-minus1-font-size').withDefault('12px');
 export const typeRampMinus1LineHeight = create<string>('type-ramp-minus1-line-height').withDefault('16px');
 export const typeRampMinus2FontSize = create<string>('type-ramp-minus2-font-size').withDefault('10px');
-export const typeRampMinus2LineHeight = create<string>('type-ramp-minus2-line-height').withDefault('16px');
+export const typeRampMinus2LineHeight = create<string>('type-ramp-minus2-line-height').withDefault('14px');
 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 typeRampPlus1LineHeight = create<string>('type-ramp-plus1-line-height').withDefault('22px');
 export const typeRampPlus2FontSize = create<string>('type-ramp-plus2-font-size').withDefault('20px');
 export const typeRampPlus2LineHeight = create<string>('type-ramp-plus2-line-height').withDefault('28px');
-export const typeRampPlus3FontSize = create<string>('type-ramp-plus3-font-size').withDefault('28px');
-export const typeRampPlus3LineHeight = create<string>('type-ramp-plus3-line-height').withDefault('36px');
-export const typeRampPlus4FontSize = create<string>('type-ramp-plus4-font-size').withDefault('34px');
-export const typeRampPlus4LineHeight = create<string>('type-ramp-plus4-line-height').withDefault('44px');
-export const typeRampPlus5FontSize = create<string>('type-ramp-plus5-font-size').withDefault('46px');
-export const typeRampPlus5LineHeight = create<string>('type-ramp-plus5-line-height').withDefault('56px');
-export const typeRampPlus6FontSize = create<string>('type-ramp-plus6-font-size').withDefault('60px');
-export const typeRampPlus6LineHeight = create<string>('type-ramp-plus6-line-height').withDefault('72px');
+export const typeRampPlus3FontSize = create<string>('type-ramp-plus3-font-size').withDefault('24px');
+export const typeRampPlus3LineHeight = create<string>('type-ramp-plus3-line-height').withDefault('32px');
+export const typeRampPlus4FontSize = create<string>('type-ramp-plus4-font-size').withDefault('28px');
+export const typeRampPlus4LineHeight = create<string>('type-ramp-plus4-line-height').withDefault('36px');
+export const typeRampPlus5FontSize = create<string>('type-ramp-plus5-font-size').withDefault('32px');
+export const typeRampPlus5LineHeight = create<string>('type-ramp-plus5-line-height').withDefault('40px');
+export const typeRampPlus6FontSize = create<string>('type-ramp-plus6-font-size').withDefault('40px');
+export const typeRampPlus6LineHeight = create<string>('type-ramp-plus6-line-height').withDefault('52px');
 
 export const neutralPalette = create<PaletteRGB>('neutral-palette').withDefault(PaletteRGB.create(middleGrey));
 export const accentPalette = create<PaletteRGB>('accent-palette').withDefault(PaletteRGB.create(accentBase));