From 31ee3e73d8da35ddaac66462116d41bb1af32e3a Mon Sep 17 00:00:00 2001
From: Brian Heston <brheston@microsoft.com>
Date: Thu, 17 Dec 2020 11:07:38 -0800
Subject: [PATCH 1/3] Updated type ramp to latest values.
---
.../src/fluent-design-system.ts | 20 +++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/packages/web-components/src/fluent-design-system.ts b/packages/web-components/src/fluent-design-system.ts
index f0c5dd17ff09e2..8b79d9238de3f5 100644
--- a/packages/web-components/src/fluent-design-system.ts
+++ b/packages/web-components/src/fluent-design-system.ts
@@ -213,23 +213,23 @@ export interface DesignSystem {
*/
export const DesignSystemDefaults: DesignSystem = {
typeRampMinus2FontSize: '10px',
- typeRampMinus2LineHeight: '16px',
+ typeRampMinus2LineHeight: '14px',
typeRampMinus1FontSize: '12px',
typeRampMinus1LineHeight: '16px',
typeRampBaseFontSize: '14px',
typeRampBaseLineHeight: '20px',
typeRampPlus1FontSize: '16px',
- typeRampPlus1LineHeight: '24px',
+ typeRampPlus1LineHeight: '22px',
typeRampPlus2FontSize: '20px',
typeRampPlus2LineHeight: '28px',
- typeRampPlus3FontSize: '28px',
- typeRampPlus3LineHeight: '36px',
- typeRampPlus4FontSize: '34px',
- typeRampPlus4LineHeight: '44px',
- typeRampPlus5FontSize: '46px',
- typeRampPlus5LineHeight: '56px',
- typeRampPlus6FontSize: '60px',
- typeRampPlus6LineHeight: '72px',
+ typeRampPlus3FontSize: '24px',
+ typeRampPlus3LineHeight: '32px',
+ typeRampPlus4FontSize: '28px',
+ typeRampPlus4LineHeight: '36px',
+ typeRampPlus5FontSize: '32px',
+ typeRampPlus5LineHeight: '40px',
+ typeRampPlus6FontSize: '40px',
+ typeRampPlus6LineHeight: '52px',
accentBaseColor: '#0078D4',
accentPalette: defaultAccentPalette,
From 3399f0d3cc994c9b372e210ee3493de7ea38c3a7 Mon Sep 17 00:00:00 2001
From: Brian Heston <brheston@microsoft.com>
Date: Thu, 17 Dec 2020 11:10:23 -0800
Subject: [PATCH 2/3] Change files
---
...luentui-web-components-2020-12-17-11-10-23-master.json | 8 ++++++++
1 file changed, 8 insertions(+)
create mode 100644 change/@fluentui-web-components-2020-12-17-11-10-23-master.json
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"
+}
From 9d5f9793fa1be0b40ce83de1d9eb75a619c9aaa0 Mon Sep 17 00:00:00 2001
From: Brian Heston <47367562+bheston@users.noreply.github.com>
Date: Tue, 18 May 2021 13:08:06 -0700
Subject: [PATCH 3/3] Updated to new design-tokens definition format
---
packages/web-components/src/design-tokens.ts | 20 +++++++++----------
.../src/fluent-design-system.ts | 20 +++++++++----------
2 files changed, 20 insertions(+), 20 deletions(-)
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<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));
diff --git a/packages/web-components/src/fluent-design-system.ts b/packages/web-components/src/fluent-design-system.ts
index 8b79d9238de3f5..f0c5dd17ff09e2 100644
--- a/packages/web-components/src/fluent-design-system.ts
+++ b/packages/web-components/src/fluent-design-system.ts
@@ -213,23 +213,23 @@ export interface DesignSystem {
*/
export const DesignSystemDefaults: DesignSystem = {
typeRampMinus2FontSize: '10px',
- typeRampMinus2LineHeight: '14px',
+ typeRampMinus2LineHeight: '16px',
typeRampMinus1FontSize: '12px',
typeRampMinus1LineHeight: '16px',
typeRampBaseFontSize: '14px',
typeRampBaseLineHeight: '20px',
typeRampPlus1FontSize: '16px',
- typeRampPlus1LineHeight: '22px',
+ typeRampPlus1LineHeight: '24px',
typeRampPlus2FontSize: '20px',
typeRampPlus2LineHeight: '28px',
- typeRampPlus3FontSize: '24px',
- typeRampPlus3LineHeight: '32px',
- typeRampPlus4FontSize: '28px',
- typeRampPlus4LineHeight: '36px',
- typeRampPlus5FontSize: '32px',
- typeRampPlus5LineHeight: '40px',
- typeRampPlus6FontSize: '40px',
- typeRampPlus6LineHeight: '52px',
+ typeRampPlus3FontSize: '28px',
+ typeRampPlus3LineHeight: '36px',
+ typeRampPlus4FontSize: '34px',
+ typeRampPlus4LineHeight: '44px',
+ typeRampPlus5FontSize: '46px',
+ typeRampPlus5LineHeight: '56px',
+ typeRampPlus6FontSize: '60px',
+ typeRampPlus6LineHeight: '72px',
accentBaseColor: '#0078D4',
accentPalette: defaultAccentPalette,