From ad9cffaf4ddd2c0660e9c44dfaa90ab84c4b1964 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 15:25:37 -0700 Subject: [PATCH 01/12] Update UNRELEASED-v8.md --- UNRELEASED-v8.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md index 45df41ba831..2fbd549be20 100644 --- a/UNRELEASED-v8.md +++ b/UNRELEASED-v8.md @@ -33,6 +33,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Updated all `--top-bar-*` CSS custom properties to `--pc-top-bar-*` ([#4804](https://github.com/Shopify/polaris-react/pull/4804)) - Removed the border-radius() function and replaced any instances with tokens ([#4793](https://github.com/Shopify/polaris-react/pull/4793)) - Removed the shadow() function (replaced any instances with tokens) and renamed shadow legacy tokens ([#4823](https://github.com/Shopify/polaris-react/pull/4823)) +- Removed the font-family() function and replaced any instances with values ([#](https://github.com/Shopify/polaris-react/pull/)) ### New components From 02214acae09bac25ac21188593e607ec9071e009 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 15:32:21 -0700 Subject: [PATCH 02/12] Update UNRELEASED-v8.md --- UNRELEASED-v8.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md index 2fbd549be20..febc4f8419e 100644 --- a/UNRELEASED-v8.md +++ b/UNRELEASED-v8.md @@ -33,7 +33,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Updated all `--top-bar-*` CSS custom properties to `--pc-top-bar-*` ([#4804](https://github.com/Shopify/polaris-react/pull/4804)) - Removed the border-radius() function and replaced any instances with tokens ([#4793](https://github.com/Shopify/polaris-react/pull/4793)) - Removed the shadow() function (replaced any instances with tokens) and renamed shadow legacy tokens ([#4823](https://github.com/Shopify/polaris-react/pull/4823)) -- Removed the font-family() function and replaced any instances with values ([#](https://github.com/Shopify/polaris-react/pull/)) +- Removed the font-family() function and replaced any instances with values ([#4940](https://github.com/Shopify/polaris-react/pull/4940)) ### New components From 1ad274228196ed327a715b129102f9917061b813 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 16:04:29 -0700 Subject: [PATCH 03/12] Create new tokens for font-families --- src/tokens/token-groups/typography.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/tokens/token-groups/typography.json b/src/tokens/token-groups/typography.json index 3aa584f2bf3..0e9d4b1fb5d 100644 --- a/src/tokens/token-groups/typography.json +++ b/src/tokens/token-groups/typography.json @@ -1,4 +1,7 @@ { + "font-family-base": "-apple-system, BlinkMacSystemFont, \"San Francisco\", \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif", + "font-family-mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace", + "font-weight-regular": "400", "font-weight-medium": "500", "font-weight-semibold": "600", From 9db892be2bc5d4b0c70385384459402b2a57ff96 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 16:12:54 -0700 Subject: [PATCH 04/12] Replace font-family() with new token --- src/components/AppProvider/AppProvider.scss | 2 +- src/components/KeyboardKey/KeyboardKey.scss | 2 +- src/components/TextField/TextField.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss index 2d6b15597c1..52e56025a54 100644 --- a/src/components/AppProvider/AppProvider.scss +++ b/src/components/AppProvider/AppProvider.scss @@ -17,7 +17,7 @@ body { html, body, button { - font-family: font-family(); + font-family: var(--p-font-family-base); } html { diff --git a/src/components/KeyboardKey/KeyboardKey.scss b/src/components/KeyboardKey/KeyboardKey.scss index fa48582ff22..596dae912c4 100644 --- a/src/components/KeyboardKey/KeyboardKey.scss +++ b/src/components/KeyboardKey/KeyboardKey.scss @@ -12,7 +12,7 @@ $key-base-height: 24px; 0 var(--p-space-05) 0 0 var(--p-surface), 0 var(--p-space-05) 0 1px var(--p-border-subdued); border-radius: var(--p-border-radius-1); - font-family: font-family(); + font-family: var(--p-font-family-base); font-size: 12px; font-weight: var(--p-font-weight-medium); line-height: $key-base-height; diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss index 7e5e1811207..78d5ee5c258 100644 --- a/src/components/TextField/TextField.scss +++ b/src/components/TextField/TextField.scss @@ -97,7 +97,7 @@ $prefix-horizontal-spacing: var(--p-space-2); padding: control-vertical-padding() $backdrop-horizontal-spacing; background: none; border: border(transparent); - font-family: font-family(); + font-family: var(--p-font-family-base); appearance: none; caret-color: var(--p-text); color: var(--p-text); From 225409c7ccff3c4a2d61eb3314fd752b908bd67c Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 16:13:39 -0700 Subject: [PATCH 05/12] Replace font-family($family: 'monospace') with new token --- src/components/TextField/TextField.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss index 78d5ee5c258..8cc24b61b82 100644 --- a/src/components/TextField/TextField.scss +++ b/src/components/TextField/TextField.scss @@ -302,5 +302,5 @@ $prefix-horizontal-spacing: var(--p-space-2); } .monospaced { - font-family: font-family($family: 'monospace'); + font-family: var(--p-font-family-mono); } From 89ed2a2898c4913f58207b94b178a85e9277a792 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 16:28:44 -0700 Subject: [PATCH 06/12] Streamline font syntax for multi word fonts --- src/tokens/token-groups/typography.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tokens/token-groups/typography.json b/src/tokens/token-groups/typography.json index 0e9d4b1fb5d..fd50de06f1e 100644 --- a/src/tokens/token-groups/typography.json +++ b/src/tokens/token-groups/typography.json @@ -1,6 +1,6 @@ { - "font-family-base": "-apple-system, BlinkMacSystemFont, \"San Francisco\", \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif", - "font-family-mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace", + "font-family-base": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif", + "font-family-mono": "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace", "font-weight-regular": "400", "font-weight-medium": "500", From 71ec225fe824ecdc39d3abb66edfb8b0f2f88a20 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 16:52:26 -0700 Subject: [PATCH 07/12] Remove font-family() function --- src/styles/_common.scss | 1 - src/styles/_public-api.scss | 1 - src/styles/foundation/_typography.scss | 33 -------------------------- 3 files changed, 35 deletions(-) delete mode 100644 src/styles/foundation/_typography.scss diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 3e27ae8c8ec..56f9a19375f 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -8,7 +8,6 @@ @import './foundation/colors'; @import './foundation/borders'; @import './foundation/layout'; -@import './foundation/typography'; @import './foundation/focus-ring'; @import './foundation/accessibility'; diff --git a/src/styles/_public-api.scss b/src/styles/_public-api.scss index 4b69b20ca6f..5ce2b394d54 100644 --- a/src/styles/_public-api.scss +++ b/src/styles/_public-api.scss @@ -20,7 +20,6 @@ @import './foundation/colors'; @import './foundation/borders'; @import './foundation/layout'; -@import './foundation/typography'; @import './foundation/focus-ring'; @import './shared/accessibility'; diff --git a/src/styles/foundation/_typography.scss b/src/styles/foundation/_typography.scss deleted file mode 100644 index 0cddfa1ed8b..00000000000 --- a/src/styles/foundation/_typography.scss +++ /dev/null @@ -1,33 +0,0 @@ -$typography-condensed: em(640px); - -$font-family-data: ( - base: #{-apple-system, - 'BlinkMacSystemFont', - 'San Francisco', - 'Segoe UI', - 'Roboto', - 'Helvetica Neue', - sans-serif}, - monospace: #{ui-monospace, - SFMono-Regular, - SF Mono, - Consolas, - Liberation Mono, - Menlo, - monospace}, -); - -/// Returns the font stack for a given family. -/// -/// @param {String} $family - The key for the given family. -/// @return {Number} The font stack for the family. - -@function font-family($family: base) { - $fetched-value: map-get($font-family-data, $family); - - @if $fetched-value { - @return $fetched-value; - } @else { - @error 'Font family `#{$family}` not found. Available font families: #{available-names($font-family-data)}'; - } -} From 633b7d6759a785f7e739a7d29a077468f691d5e6 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 16:59:30 -0700 Subject: [PATCH 08/12] Consolidate font-size and line-height token files into typography --- src/tokens/token-groups/font-size.json | 15 --------------- src/tokens/token-groups/line-height.json | 9 --------- src/tokens/token-groups/typography.json | 24 +++++++++++++++++++++++- src/tokens/tokens.ts | 6 +----- 4 files changed, 24 insertions(+), 30 deletions(-) delete mode 100644 src/tokens/token-groups/font-size.json delete mode 100644 src/tokens/token-groups/line-height.json diff --git a/src/tokens/token-groups/font-size.json b/src/tokens/token-groups/font-size.json deleted file mode 100644 index 96c489a4ab1..00000000000 --- a/src/tokens/token-groups/font-size.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "font-size-1": "12px", - "font-size-2": "13px", - "font-size-3": "14px", - "font-size-4": "15px", - "font-size-5": "16px", - "font-size-6": "17px", - "font-size-7": "20px", - "font-size-8": "21px", - "font-size-9": "24px", - "font-size-10": "26px", - "font-size-11": "27px", - "font-size-12": "28px", - "font-size-13": "42px" -} diff --git a/src/tokens/token-groups/line-height.json b/src/tokens/token-groups/line-height.json deleted file mode 100644 index 15623d86db5..00000000000 --- a/src/tokens/token-groups/line-height.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "line-height-1": "16px", - "line-height-2": "20px", - "line-height-3": "24px", - "line-height-4": "28px", - "line-height-5": "32px", - "line-height-6": "36px", - "line-height-7": "44px" -} diff --git a/src/tokens/token-groups/typography.json b/src/tokens/token-groups/typography.json index fd50de06f1e..2bdb95dae35 100644 --- a/src/tokens/token-groups/typography.json +++ b/src/tokens/token-groups/typography.json @@ -2,8 +2,30 @@ "font-family-base": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif", "font-family-mono": "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace", + "font-size-1": "12px", + "font-size-2": "13px", + "font-size-3": "14px", + "font-size-4": "15px", + "font-size-5": "16px", + "font-size-6": "17px", + "font-size-7": "20px", + "font-size-8": "21px", + "font-size-9": "24px", + "font-size-10": "26px", + "font-size-11": "27px", + "font-size-12": "28px", + "font-size-13": "42px", + "font-weight-regular": "400", "font-weight-medium": "500", "font-weight-semibold": "600", - "font-weight-bold": "700" + "font-weight-bold": "700", + + "line-height-1": "16px", + "line-height-2": "20px", + "line-height-3": "24px", + "line-height-4": "28px", + "line-height-5": "32px", + "line-height-6": "36px", + "line-height-7": "44px" } diff --git a/src/tokens/tokens.ts b/src/tokens/tokens.ts index 7ddcc02fe6e..1957ea622fa 100644 --- a/src/tokens/tokens.ts +++ b/src/tokens/tokens.ts @@ -51,9 +51,7 @@ const colorSchemes: ColorSchemes = { export interface Tokens { depth: TokenGroup; colorSchemes: ColorSchemes; - fontSize: TokenGroup; legacyTokens: TokenGroup; - lineHeight: TokenGroup; motion: TokenGroup; shape: TokenGroup; spacing: TokenGroup; @@ -64,12 +62,10 @@ export interface Tokens { export const tokens: Tokens = { colorSchemes, depth, - fontSize: tokensToRems(fontSize), legacyTokens: tokensToRems(legacyTokens), - lineHeight: tokensToRems(lineHeight), motion, shape: tokensToRems(shape), spacing: tokensToRems(spacing), - typography, + typography: tokensToRems(typography), zIndex, }; From 10054aae7c778cd49316502c9b2ae296dff21f4b Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 17:03:17 -0700 Subject: [PATCH 09/12] Clean up missed imports for fontSize and lineHeight --- src/tokens/tokens.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/tokens/tokens.ts b/src/tokens/tokens.ts index 1957ea622fa..1acc22d3bc9 100644 --- a/src/tokens/tokens.ts +++ b/src/tokens/tokens.ts @@ -1,9 +1,7 @@ import depth from './token-groups/depth.json'; import legacyTokens from './token-groups/legacy-tokens.json'; import darkColorScheme from './token-groups/color.dark.json'; -import fontSize from './token-groups/font-size.json'; import lightColorScheme from './token-groups/color.light.json'; -import lineHeight from './token-groups/line-height.json'; import motion from './token-groups/motion.json'; import shape from './token-groups/shape.json'; import spacing from './token-groups/spacing.json'; From 2c90674cf445cbe6676ebd4571bc3e9364fb4210 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 17:06:33 -0700 Subject: [PATCH 10/12] Remove tests for fontSize and lineHeight --- src/components/CustomProperties/tests/CustomProperties.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/CustomProperties/tests/CustomProperties.test.tsx b/src/components/CustomProperties/tests/CustomProperties.test.tsx index 40fc0d8d2ce..87c99a7c2b8 100644 --- a/src/components/CustomProperties/tests/CustomProperties.test.tsx +++ b/src/components/CustomProperties/tests/CustomProperties.test.tsx @@ -39,9 +39,7 @@ const mockTokens: Tokens = { motion: mockTokenGroup, // Note: We don't need to assign mock values to the remaining static tokens. depth: {}, - fontSize: {}, legacyTokens: {}, - lineHeight: {}, shape: {}, spacing: {}, typography: {}, From a8d302e7ded8f1bd22ef6c7d2f0589c24030d6ed Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 24 Jan 2022 16:43:19 -0700 Subject: [PATCH 11/12] Update UNRELEASED-v8.md --- UNRELEASED-v8.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md index febc4f8419e..1deb4664df4 100644 --- a/UNRELEASED-v8.md +++ b/UNRELEASED-v8.md @@ -33,7 +33,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Updated all `--top-bar-*` CSS custom properties to `--pc-top-bar-*` ([#4804](https://github.com/Shopify/polaris-react/pull/4804)) - Removed the border-radius() function and replaced any instances with tokens ([#4793](https://github.com/Shopify/polaris-react/pull/4793)) - Removed the shadow() function (replaced any instances with tokens) and renamed shadow legacy tokens ([#4823](https://github.com/Shopify/polaris-react/pull/4823)) -- Removed the font-family() function and replaced any instances with values ([#4940](https://github.com/Shopify/polaris-react/pull/4940)) +- Removed the font-family() function and replaced any instances with tokens ([#4940](https://github.com/Shopify/polaris-react/pull/4940)) ### New components From 471cefcf8bcd44ca5f1b349dafb6c1bd4a93e2de Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 24 Jan 2022 16:46:56 -0700 Subject: [PATCH 12/12] Rename font-family-base token --- src/components/AppProvider/AppProvider.scss | 2 +- src/components/KeyboardKey/KeyboardKey.scss | 2 +- src/components/TextField/TextField.scss | 2 +- src/tokens/token-groups/typography.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss index 52e56025a54..eb3bfa2b976 100644 --- a/src/components/AppProvider/AppProvider.scss +++ b/src/components/AppProvider/AppProvider.scss @@ -17,7 +17,7 @@ body { html, body, button { - font-family: var(--p-font-family-base); + font-family: var(--p-font-family-sans); } html { diff --git a/src/components/KeyboardKey/KeyboardKey.scss b/src/components/KeyboardKey/KeyboardKey.scss index 596dae912c4..16c990e53b0 100644 --- a/src/components/KeyboardKey/KeyboardKey.scss +++ b/src/components/KeyboardKey/KeyboardKey.scss @@ -12,7 +12,7 @@ $key-base-height: 24px; 0 var(--p-space-05) 0 0 var(--p-surface), 0 var(--p-space-05) 0 1px var(--p-border-subdued); border-radius: var(--p-border-radius-1); - font-family: var(--p-font-family-base); + font-family: var(--p-font-family-sans); font-size: 12px; font-weight: var(--p-font-weight-medium); line-height: $key-base-height; diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss index 8cc24b61b82..9346ab7fad7 100644 --- a/src/components/TextField/TextField.scss +++ b/src/components/TextField/TextField.scss @@ -97,7 +97,7 @@ $prefix-horizontal-spacing: var(--p-space-2); padding: control-vertical-padding() $backdrop-horizontal-spacing; background: none; border: border(transparent); - font-family: var(--p-font-family-base); + font-family: var(--p-font-family-sans); appearance: none; caret-color: var(--p-text); color: var(--p-text); diff --git a/src/tokens/token-groups/typography.json b/src/tokens/token-groups/typography.json index 2bdb95dae35..861dd03e719 100644 --- a/src/tokens/token-groups/typography.json +++ b/src/tokens/token-groups/typography.json @@ -1,5 +1,5 @@ { - "font-family-base": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif", + "font-family-sans": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif", "font-family-mono": "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace", "font-size-1": "12px",