From 879236c6f82e9309aa9ffe34308cefd905320847 Mon Sep 17 00:00:00 2001 From: aveline Date: Fri, 17 Dec 2021 10:57:40 -0800 Subject: [PATCH 01/17] baseline for chromatic --- src/styles/foundation/_typography.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/foundation/_typography.scss b/src/styles/foundation/_typography.scss index 5dd77e6e7e1..cc5e686e0bf 100644 --- a/src/styles/foundation/_typography.scss +++ b/src/styles/foundation/_typography.scss @@ -125,6 +125,7 @@ $font-size-data: ( /// @param {String} $style - The font style. /// @param {String} $variant [base] - The variant on the font-size. /// @return {Number} The line-height for the text-style. +// @function line-height($style, $variant: base) { $fetched-line-height: map-get(map-get($line-height-data, $style), $variant); From 9ab82bfa018a277ff1b0b7d5b26b6027cdc0b2c2 Mon Sep 17 00:00:00 2001 From: aveline Date: Fri, 17 Dec 2021 12:07:49 -0800 Subject: [PATCH 02/17] Add `line-height` tokens --- src/tokens/token-groups/line-height.json | 9 +++++++++ src/tokens/tokens.ts | 3 +++ 2 files changed, 12 insertions(+) create mode 100644 src/tokens/token-groups/line-height.json diff --git a/src/tokens/token-groups/line-height.json b/src/tokens/token-groups/line-height.json new file mode 100644 index 00000000000..a87bc7df72e --- /dev/null +++ b/src/tokens/token-groups/line-height.json @@ -0,0 +1,9 @@ +{ + "line-height-0": "16px", + "line-height-1": "20px", + "line-height-2": "24px", + "line-height-3": "28px", + "line-height-4": "32px", + "line-height-5": "36px", + "line-height-6": "44px" +} diff --git a/src/tokens/tokens.ts b/src/tokens/tokens.ts index 8630b72e380..42bf6e6c0c8 100644 --- a/src/tokens/tokens.ts +++ b/src/tokens/tokens.ts @@ -2,6 +2,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 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'; @@ -50,6 +51,7 @@ export interface Tokens { depth: TokenGroup; colorSchemes: ColorSchemes; legacyTokens: TokenGroup; + lineHeight: TokenGroup; motion: TokenGroup; shape: TokenGroup; spacing: TokenGroup; @@ -61,6 +63,7 @@ export const tokens: Tokens = { colorSchemes, depth, legacyTokens: tokensToRems(legacyTokens), + lineHeight: tokensToRems(lineHeight), motion, shape: tokensToRems(shape), spacing: tokensToRems(spacing), From 750a5ef2668379135482e65498da762f8029f06b Mon Sep 17 00:00:00 2001 From: aveline Date: Fri, 17 Dec 2021 12:08:29 -0800 Subject: [PATCH 03/17] Replace instances of line-height function with tokens --- src/components/ActionList/ActionList.scss | 2 +- .../components/MappedAction/MappedAction.scss | 2 +- src/components/Badge/Badge.scss | 2 +- src/components/Banner/Banner.scss | 2 +- src/components/Page/Page.scss | 2 +- .../TopBar/components/UserMenu/UserMenu.scss | 2 +- src/styles/shared/_typography.scss | 32 +++++++++---------- 7 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/components/ActionList/ActionList.scss b/src/components/ActionList/ActionList.scss index 947e8e78260..4a1a09800c2 100644 --- a/src/components/ActionList/ActionList.scss +++ b/src/components/ActionList/ActionList.scss @@ -4,7 +4,7 @@ --pc-action-list-image-size: 20px; --pc-action-list-item-min-height: var(--p-space-10); --pc-action-list-item-vertical-padding: calc( - (var(--pc-action-list-item-min-height) - #{line-height(body)}) / 2 + (var(--pc-action-list-item-min-height) - var(--p-line-height-1)) / 2 ); list-style: none; margin: 0; diff --git a/src/components/Autocomplete/components/MappedAction/MappedAction.scss b/src/components/Autocomplete/components/MappedAction/MappedAction.scss index d244029edd4..e68019b9340 100644 --- a/src/components/Autocomplete/components/MappedAction/MappedAction.scss +++ b/src/components/Autocomplete/components/MappedAction/MappedAction.scss @@ -4,7 +4,7 @@ --pc-mapped-actions-image-size: 20px; --pc-mapped-actions-item-min-height: var(--p-space-10); --pc-mapped-actions-item-vertical-padding: calc( - (var(--pc-mapped-actions-item-min-height) - #{line-height(body)}) / 2 + (var(--pc-mapped-actions-item-min-height) - var(--p-line-height-1)) / 2 ); margin-bottom: var(--p-space-3); } diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss index 4ade4482b81..c704ad20bb9 100644 --- a/src/components/Badge/Badge.scss +++ b/src/components/Badge/Badge.scss @@ -12,7 +12,7 @@ background-color: var(--p-surface-neutral); border-radius: var(--p-border-radius-5); font-size: font-size(caption); - line-height: line-height(caption, large-screen); + line-height: var(--p-line-height-0); color: var(--p-text); font-weight: var(--p-font-weight-regular); diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss index 3d83c274ee7..748fe4701e7 100644 --- a/src/components/Banner/Banner.scss +++ b/src/components/Banner/Banner.scss @@ -53,7 +53,7 @@ --pc-banner-rgb-text: 33, 43, 54; --pc-banner-secondary-action-horizontal-padding: var(--p-space-3); --pc-banner-secondary-action-vertical-padding: 0.5 * - (#{control-height() - line-height(body)}); + (#{control-height()} - var(--p-line-height-1)); position: relative; display: flex; diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss index 316eaaeeb4b..7769a92f5e2 100644 --- a/src/components/Page/Page.scss +++ b/src/components/Page/Page.scss @@ -1,7 +1,7 @@ @import '../../styles/common'; $navigation-elements-height: 36px; -$title-height: line-height(display-large, large-screen); +$title-height: var(--p-line-height-4); $stacking-order: ( title: 10, breadcrumbs: 20, diff --git a/src/components/TopBar/components/UserMenu/UserMenu.scss b/src/components/TopBar/components/UserMenu/UserMenu.scss index 1e4e4151cc0..8ddfb2d8795 100644 --- a/src/components/TopBar/components/UserMenu/UserMenu.scss +++ b/src/components/TopBar/components/UserMenu/UserMenu.scss @@ -13,7 +13,7 @@ @include truncate; @include text-style-body; font-weight: var(--p-font-weight-medium); - line-height: line-height(subheading); + line-height: var(--p-line-height-0); color: var(--p-text); text-align: left; } diff --git a/src/styles/shared/_typography.scss b/src/styles/shared/_typography.scss index a8dfdcdb99e..f4564c49d71 100644 --- a/src/styles/shared/_typography.scss +++ b/src/styles/shared/_typography.scss @@ -15,18 +15,18 @@ $typography-condensed: em(640px); @mixin text-style-caption { font-size: font-size(caption); font-weight: var(--p-font-weight-regular); - line-height: line-height(caption); + line-height: var(--p-line-height-1); @include when-typography-not-condensed { font-size: font-size(caption, large-screen); - line-height: line-height(caption, large-screen); + line-height: var(--p-line-height-0); } } @mixin text-style-heading { font-size: font-size(heading); font-weight: var(--p-font-weight-semibold); - line-height: line-height(heading); + line-height: var(--p-line-height-2); @include when-typography-not-condensed { font-size: font-size(heading, large-screen); @@ -36,7 +36,7 @@ $typography-condensed: em(640px); @mixin text-style-subheading { font-size: font-size(subheading); font-weight: var(--p-font-weight-semibold); - line-height: line-height(subheading); + line-height: var(--p-line-height-0); text-transform: uppercase; @include when-typography-not-condensed { @@ -47,7 +47,7 @@ $typography-condensed: em(640px); @mixin text-style-input { font-size: font-size(input); font-weight: var(--p-font-weight-regular); - line-height: line-height(input); + line-height: var(--p-line-height-2); border: none; text-transform: initial; @@ -61,7 +61,7 @@ $typography-condensed: em(640px); @mixin text-style-body { font-size: font-size(body); font-weight: var(--p-font-weight-regular); - line-height: line-height(body); + line-height: var(--p-line-height-1); text-transform: initial; letter-spacing: initial; @@ -74,7 +74,7 @@ $typography-condensed: em(640px); @mixin text-style-button { font-size: font-size(button); font-weight: var(--p-font-weight-medium); - line-height: line-height(button); + line-height: var(--p-line-height-0); text-transform: initial; letter-spacing: initial; @@ -87,7 +87,7 @@ $typography-condensed: em(640px); @mixin text-style-button-large { font-size: font-size(button-large); font-weight: var(--p-font-weight-medium); - line-height: line-height(button-large); + line-height: var(--p-line-height-1); text-transform: initial; letter-spacing: initial; @@ -100,44 +100,44 @@ $typography-condensed: em(640px); @mixin text-style-display-x-large { font-size: font-size(display-x-large); font-weight: var(--p-font-weight-semibold); - line-height: line-height(display-x-large); + line-height: var(--p-line-height-5); @include when-typography-not-condensed { font-size: font-size(display-x-large, large-screen); - line-height: line-height(display-x-large, large-screen); + line-height: var(--p-line-height-6); } } @mixin text-style-display-large { font-size: font-size(display-large); font-weight: var(--p-font-weight-semibold); - line-height: line-height(display-large); + line-height: var(--p-line-height-3); @include when-typography-not-condensed { font-size: font-size(display-large, large-screen); - line-height: line-height(display-large, large-screen); + line-height: var(--p-line-height-4); } } @mixin text-style-display-medium { font-size: font-size(display-medium); font-weight: var(--p-font-weight-regular); - line-height: line-height(display-medium); + line-height: var(--p-line-height-3); @include when-typography-not-condensed { font-size: font-size(display-medium, large-screen); - line-height: line-height(display-medium, large-screen); + line-height: var(--p-line-height-4); } } @mixin text-style-display-small { font-size: font-size(display-small); font-weight: var(--p-font-weight-regular); - line-height: line-height(display-small); + line-height: var(--p-line-height-2); @include when-typography-not-condensed { font-size: font-size(display-small, large-screen); - line-height: line-height(display-small, large-screen); + line-height: var(--p-line-height-3); } } From 00f867182aa468dcd94ee5f0442e5f28bfb37624 Mon Sep 17 00:00:00 2001 From: aveline Date: Fri, 17 Dec 2021 14:45:21 -0800 Subject: [PATCH 04/17] Update FileUpload.scss --- .../DropZone/components/FileUpload/FileUpload.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/DropZone/components/FileUpload/FileUpload.scss b/src/components/DropZone/components/FileUpload/FileUpload.scss index 0637954391c..b72f4b8f525 100755 --- a/src/components/DropZone/components/FileUpload/FileUpload.scss +++ b/src/components/DropZone/components/FileUpload/FileUpload.scss @@ -1,11 +1,7 @@ @import '../../../../styles/common'; -$fileupload-padding: var(--p-space-4); -$slim-min-height: 30px; -$slim-vertical-padding: ($slim-min-height - line-height(body) - 2px) / 2; - .FileUpload { - padding: $fileupload-padding; + padding: var(--p-space-4); text-align: center; display: flex; align-items: center; From 06989aff92975f3b539c1a38aa03962cd506e473 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 20 Dec 2021 14:00:12 -0800 Subject: [PATCH 05/17] Update CustomProperties.test.tsx --- src/components/CustomProperties/tests/CustomProperties.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/CustomProperties/tests/CustomProperties.test.tsx b/src/components/CustomProperties/tests/CustomProperties.test.tsx index 87c99a7c2b8..f5f46a3981b 100644 --- a/src/components/CustomProperties/tests/CustomProperties.test.tsx +++ b/src/components/CustomProperties/tests/CustomProperties.test.tsx @@ -40,6 +40,7 @@ const mockTokens: Tokens = { // Note: We don't need to assign mock values to the remaining static tokens. depth: {}, legacyTokens: {}, + lineHeight: {}, shape: {}, spacing: {}, typography: {}, From f1769226dfab4e13e150ba7d32b91ac066706f02 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 20 Dec 2021 14:53:47 -0800 Subject: [PATCH 06/17] Update ActionList.scss --- src/components/ActionList/ActionList.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ActionList/ActionList.scss b/src/components/ActionList/ActionList.scss index a05bb236289..18f7898722d 100644 --- a/src/components/ActionList/ActionList.scss +++ b/src/components/ActionList/ActionList.scss @@ -4,7 +4,7 @@ --pc-action-list-image-size: 20px; --pc-action-list-item-min-height: var(--p-space-10); --pc-action-list-item-vertical-padding: calc( - (var(--pc-action-list-item-min-height) - #{line-height(body)}) / 2 + (var(--pc-action-list-item-min-height) - var(--p-line-height-1)) / 2 ); outline: none; list-style: none; From 0f24e4d2cc950741e0fdf8a7e7fe260e3db67c72 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 20 Dec 2021 14:58:22 -0800 Subject: [PATCH 07/17] Update CheckableButton.scss --- src/components/CheckableButton/CheckableButton.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/CheckableButton/CheckableButton.scss b/src/components/CheckableButton/CheckableButton.scss index 7c3920b7d76..8bc8947db7a 100644 --- a/src/components/CheckableButton/CheckableButton.scss +++ b/src/components/CheckableButton/CheckableButton.scss @@ -1,16 +1,16 @@ @import '../../styles/common'; -$button-min-height: control-height(); - -$button-vertical-padding: ($button-min-height - line-height(body) - 2px) / 2; +$button-vertical-padding: calc( + (var(--p-line-height-5) - var(--p-line-height-1) - 2px) / 2 +); .CheckableButton { @include text-style-button; @include recolor-icon(var(--p-icon-on-interactive)); display: flex; align-items: center; - min-height: $button-min-height; - min-width: $button-min-height; + min-height: var(--p-line-height-5); + min-width: var(--p-line-height-5); margin: 0; padding: $button-vertical-padding var(--p-space-4); line-height: 1; From 02ec0eede76a2b881afba1e14b3fa8528b9a06b0 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 20 Dec 2021 15:10:03 -0800 Subject: [PATCH 08/17] Remove `line-height()` from mixins --- src/styles/shared/_buttons.scss | 9 +++++---- src/styles/shared/_controls.scss | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss index e28b3dd37f0..3e45293c507 100644 --- a/src/styles/shared/_buttons.scss +++ b/src/styles/shared/_buttons.scss @@ -5,8 +5,9 @@ } @mixin button-base { - $min-height: control-height(); - $vertical-padding: ($min-height - line-height(body) - 2px) / 2; + $vertical-padding: calc( + (var(--p-line-height-5) - var(--p-line-height-1) - 2px) / 2 + ); @include recolor-icon(var(--p-icon)); @include focus-ring($border-width: border-width('base')); @@ -14,8 +15,8 @@ display: inline-flex; align-items: center; justify-content: center; - min-height: $min-height; - min-width: $min-height; + min-height: var(--p-line-height-5); + min-width: var(--p-line-height-5); margin: 0; padding: $vertical-padding var(--p-space-4); background: var(--p-surface); diff --git a/src/styles/shared/_controls.scss b/src/styles/shared/_controls.scss index 631f63b7251..fe8043a0504 100644 --- a/src/styles/shared/_controls.scss +++ b/src/styles/shared/_controls.scss @@ -7,7 +7,7 @@ } @function control-vertical-padding() { - @return (control-height() - line-height(input) - 2px) / 2; + @return calc((var(--p-line-height-5) - var(--p-line-height-2) - 2px) / 2); } @function control-icon-transition() { From 1974d6693807f54989fe90139a2985b3ca4b2339 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 20 Dec 2021 15:29:11 -0800 Subject: [PATCH 09/17] Update SkeletonDisplayText.scss --- .../SkeletonDisplayText.scss | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/components/SkeletonDisplayText/SkeletonDisplayText.scss b/src/components/SkeletonDisplayText/SkeletonDisplayText.scss index 39834b5c94e..437f2c9cd3b 100644 --- a/src/components/SkeletonDisplayText/SkeletonDisplayText.scss +++ b/src/components/SkeletonDisplayText/SkeletonDisplayText.scss @@ -2,32 +2,42 @@ $skeleton-display-text-max-width: 120px; -@mixin skeleton-display-text-height($size) { - height: line-height($size); +@mixin skeleton-display-text-height { + height: var(--pc-skeleton-display-text-height); @include when-typography-not-condensed { - height: line-height($size, large-screen); + height: var(--pc-skeleton-display-text-height-not-condensed); } } .DisplayText { + --pc-skeleton-display-text-height: var(--p-line-height-1); + --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-1); max-width: $skeleton-display-text-max-width; @include skeleton-content; } .sizeSmall { - @include skeleton-display-text-height('display-small'); + --pc-skeleton-display-text-height: var(--p-line-height-2); + --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-3); + @include skeleton-display-text-height; } .sizeMedium { - @include skeleton-display-text-height('display-medium'); + --pc-skeleton-display-text-height: var(--p-line-height-3); + --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-4); + @include skeleton-display-text-height; } .sizeLarge { - @include skeleton-display-text-height('display-large'); + --pc-skeleton-display-text-height: var(--p-line-height-3); + --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-4); + @include skeleton-display-text-height; } .sizeExtraLarge { - @include skeleton-display-text-height('display-x-large'); + --pc-skeleton-display-text-height: var(--p-line-height-5); + --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-6); + @include skeleton-display-text-height; } From f38584c0902566966fbe921aa0c949b8197196cd Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 21 Dec 2021 09:39:58 -0800 Subject: [PATCH 10/17] Remove instances of `line-height()` in `Button` --- src/components/Button/Button.scss | 47 ++++++++++++++++++------------- src/styles/shared/_controls.scss | 4 +++ 2 files changed, 31 insertions(+), 20 deletions(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 34c6c6a5e1b..122d50ce49d 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -1,14 +1,19 @@ @import '../../styles/common'; -$min-height: control-height(); -$vertical-padding: ($min-height - line-height(body) - 2px) / 2; -$slim-min-height: 28px; -$slim-vertical-padding: ($slim-min-height - line-height(body) - 2px) / 2; -$large-min-height: 44px; -$large-vertical-padding: ($large-min-height - line-height(body) - 2px) / 2; -$spinner-size: 20px; - .Button { + --pc-button-min-height: var(--p-control-height); + --pc-button-slim-min-height: var(--p-line-height-3); + --pc-button-large-min-height: var(--p-line-height-6); + --pc-button-vertical-padding: calc( + (var(--pc-button-min-height) - var(--p-line-height-1) - 2px) / 2 + ); + --pc-button-slim-vertical-padding: calc( + (var(--pc-button-slim-min-height) - var(--p-line-height-1) - 2px) / 2 + ); + --pc-button-large-vertical-padding: calc( + (var(--pc-button-large-min-height) - var(--p-line-height-1) - 2px) / 2 + ); + --pc-button-spinner-size: 20px; --pc-button-segment: 10; --pc-button-focused: 20; @include button-base; @@ -101,8 +106,8 @@ $spinner-size: 20px; position: absolute; top: 50%; left: 50%; - margin-top: -($spinner-size / 2); - margin-left: -($spinner-size / 2); + margin-top: calc(-1 * (var(--pc-button-spinner-size) / 2)); + margin-left: calc(-1 * (var(--pc-button-spinner-size) / 2)); } .primary, @@ -187,7 +192,8 @@ $spinner-size: 20px; // stylelint-disable selector-max-specificity, selector-max-class .plain { @include recolor-icon(var(--p-interactive)); - margin: (-1 * $vertical-padding) calc(-1 * var(--p-space-2)); + margin: calc(-1 * var(--pc-button-vertical-padding)) + calc(-1 * var(--p-space-2)); padding-left: var(--p-space-2); padding-right: var(--p-space-2); background: transparent; @@ -274,17 +280,18 @@ $spinner-size: 20px; } &.sizeSlim { - margin-top: (-1 * $slim-vertical-padding); - margin-bottom: (-1 * $slim-vertical-padding); + margin-top: calc(-1 * var(--pc-button-slim-vertical-padding)); + margin-bottom: calc(-1 * var(--pc-button-slim-vertical-padding)); } &.sizeLarge { - margin: (-1 * $large-vertical-padding) calc(-1 * var(--p-space-5)); + margin: calc(-1 * var(--pc-button-large-vertical-padding)) + calc(-1 * var(--p-space-5)); } &.iconOnly { @include recolor-icon(var(--p-icon)); - margin: -0.5 * ($min-height - icon-size()); + margin: calc(-0.5 * (var(--pc-button-min-height) - icon-size())); &:hover { @include recolor-icon(var(--p-icon-hovered)); @@ -351,14 +358,14 @@ $spinner-size: 20px; } .sizeSlim { - min-height: $slim-min-height; - padding: $slim-vertical-padding var(--p-space-3); + min-height: var(--pc-button-slim-min-height); + padding: var(--pc-button-slim-vertical-padding) var(--p-space-3); } .sizeLarge { - min-height: $large-min-height; - min-width: $large-min-height; - padding: $large-vertical-padding var(--p-space-6); + min-height: var(--pc-button-large-min-height); + min-width: var(--pc-button-large-min-height); + padding: var(--pc-button-large-vertical-padding) var(--p-space-6); .Content { @include text-style-button-large; diff --git a/src/styles/shared/_controls.scss b/src/styles/shared/_controls.scss index fe8043a0504..97941a80c07 100644 --- a/src/styles/shared/_controls.scss +++ b/src/styles/shared/_controls.scss @@ -2,6 +2,10 @@ @return 36px; } +:root { + -p-control-height: var(--p-line-height-5); +} + @function control-slim-height() { @return 28px; } From a27543b0b1bdf06928b4071a1a7c4f2b048ae332 Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 21 Dec 2021 10:04:18 -0800 Subject: [PATCH 11/17] Fix control-height custom property var --- src/components/Button/Button.scss | 2 +- src/styles/shared/_controls.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 122d50ce49d..6a0de4d8c0f 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -1,7 +1,7 @@ @import '../../styles/common'; .Button { - --pc-button-min-height: var(--p-control-height); + --pc-button-min-height: var(--pc-control-height); --pc-button-slim-min-height: var(--p-line-height-3); --pc-button-large-min-height: var(--p-line-height-6); --pc-button-vertical-padding: calc( diff --git a/src/styles/shared/_controls.scss b/src/styles/shared/_controls.scss index 97941a80c07..120c27985da 100644 --- a/src/styles/shared/_controls.scss +++ b/src/styles/shared/_controls.scss @@ -3,7 +3,7 @@ } :root { - -p-control-height: var(--p-line-height-5); + --pc-control-height: var(--p-line-height-5); } @function control-slim-height() { From 9e1d493418072276b5c8ac43f55150846ab26ef9 Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 21 Dec 2021 10:17:09 -0800 Subject: [PATCH 12/17] Fix button iconOnly margin --- src/components/Button/Button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 6a0de4d8c0f..ee53131137d 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -291,7 +291,7 @@ &.iconOnly { @include recolor-icon(var(--p-icon)); - margin: calc(-0.5 * (var(--pc-button-min-height) - icon-size())); + margin: calc(-0.5 * (var(--pc-button-min-height) - #{icon-size()})); &:hover { @include recolor-icon(var(--p-icon-hovered)); From 89759a7abedff55ffe1ef804aef34c58e1db07dd Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 21 Dec 2021 10:30:20 -0800 Subject: [PATCH 13/17] Remove `line-height()` declaration --- src/styles/foundation/_typography.scss | 58 -------------------------- 1 file changed, 58 deletions(-) diff --git a/src/styles/foundation/_typography.scss b/src/styles/foundation/_typography.scss index cc5e686e0bf..941ea0c74da 100644 --- a/src/styles/foundation/_typography.scss +++ b/src/styles/foundation/_typography.scss @@ -17,47 +17,6 @@ $font-family-data: ( monospace}, ); -$line-height-data: ( - caption: ( - base: 20px, - large-screen: 16px, - ), - heading: ( - base: 24px, - ), - subheading: ( - base: 16px, - ), - input: ( - base: 24px, - ), - body: ( - base: 20px, - ), - button: ( - base: 16px, - ), - button-large: ( - base: 20px, - ), - display-x-large: ( - base: 36px, - large-screen: 44px, - ), - display-large: ( - base: 28px, - large-screen: 32px, - ), - display-medium: ( - base: 28px, - large-screen: 32px, - ), - display-small: ( - base: 24px, - large-screen: 28px, - ), -); - $font-size-data: ( caption: ( base: 13px, @@ -120,23 +79,6 @@ $font-size-data: ( } } -/// Returns the line height for a given text style and variant. -/// -/// @param {String} $style - The font style. -/// @param {String} $variant [base] - The variant on the font-size. -/// @return {Number} The line-height for the text-style. -// - -@function line-height($style, $variant: base) { - $fetched-line-height: map-get(map-get($line-height-data, $style), $variant); - - @if type-of($fetched-line-height) { - @return $fetched-line-height; - } @else { - @error 'Line height `#{$style} - #{$variant}` not found. Available line heights: #{available-names($line-height-data)}'; - } -} - /// Returns the font size for a given text style and variant. /// /// @param {String} $style - The font style. From 56b08fb6ba56639bbd647108bb1c10bf90cdd32c Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 21 Dec 2021 11:21:19 -0800 Subject: [PATCH 14/17] Update line-height token scale --- src/components/ActionList/ActionList.scss | 2 +- .../components/MappedAction/MappedAction.scss | 2 +- src/components/Badge/Badge.scss | 2 +- src/components/Banner/Banner.scss | 2 +- src/components/Button/Button.scss | 10 +++--- .../CheckableButton/CheckableButton.scss | 6 ++-- src/components/Page/Page.scss | 2 +- .../SkeletonDisplayText.scss | 20 ++++++------ .../TopBar/components/UserMenu/UserMenu.scss | 2 +- src/styles/shared/_buttons.scss | 6 ++-- src/styles/shared/_controls.scss | 4 +-- src/styles/shared/_typography.scss | 32 +++++++++---------- src/tokens/token-groups/line-height.json | 14 ++++---- 13 files changed, 52 insertions(+), 52 deletions(-) diff --git a/src/components/ActionList/ActionList.scss b/src/components/ActionList/ActionList.scss index 18f7898722d..13c2a604423 100644 --- a/src/components/ActionList/ActionList.scss +++ b/src/components/ActionList/ActionList.scss @@ -4,7 +4,7 @@ --pc-action-list-image-size: 20px; --pc-action-list-item-min-height: var(--p-space-10); --pc-action-list-item-vertical-padding: calc( - (var(--pc-action-list-item-min-height) - var(--p-line-height-1)) / 2 + (var(--pc-action-list-item-min-height) - var(--p-line-height-2)) / 2 ); outline: none; list-style: none; diff --git a/src/components/Autocomplete/components/MappedAction/MappedAction.scss b/src/components/Autocomplete/components/MappedAction/MappedAction.scss index e68019b9340..19bbd2baeb1 100644 --- a/src/components/Autocomplete/components/MappedAction/MappedAction.scss +++ b/src/components/Autocomplete/components/MappedAction/MappedAction.scss @@ -4,7 +4,7 @@ --pc-mapped-actions-image-size: 20px; --pc-mapped-actions-item-min-height: var(--p-space-10); --pc-mapped-actions-item-vertical-padding: calc( - (var(--pc-mapped-actions-item-min-height) - var(--p-line-height-1)) / 2 + (var(--pc-mapped-actions-item-min-height) - var(--p-line-height-2)) / 2 ); margin-bottom: var(--p-space-3); } diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss index 2cd937295b3..fd2a1d9ac50 100644 --- a/src/components/Badge/Badge.scss +++ b/src/components/Badge/Badge.scss @@ -12,7 +12,7 @@ background-color: var(--p-surface-neutral); border-radius: var(--p-border-radius-5); font-size: font-size(caption); - line-height: var(--p-line-height-0); + line-height: var(--p-line-height-1); color: var(--p-text); font-weight: var(--p-font-weight-regular); diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss index 748fe4701e7..026d8de9c98 100644 --- a/src/components/Banner/Banner.scss +++ b/src/components/Banner/Banner.scss @@ -53,7 +53,7 @@ --pc-banner-rgb-text: 33, 43, 54; --pc-banner-secondary-action-horizontal-padding: var(--p-space-3); --pc-banner-secondary-action-vertical-padding: 0.5 * - (#{control-height()} - var(--p-line-height-1)); + (#{control-height()} - var(--p-line-height-2)); position: relative; display: flex; diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index ee53131137d..988594234de 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -2,16 +2,16 @@ .Button { --pc-button-min-height: var(--pc-control-height); - --pc-button-slim-min-height: var(--p-line-height-3); - --pc-button-large-min-height: var(--p-line-height-6); + --pc-button-slim-min-height: var(--p-line-height-4); + --pc-button-large-min-height: var(--p-line-height-7); --pc-button-vertical-padding: calc( - (var(--pc-button-min-height) - var(--p-line-height-1) - 2px) / 2 + (var(--pc-button-min-height) - var(--p-line-height-2) - 2px) / 2 ); --pc-button-slim-vertical-padding: calc( - (var(--pc-button-slim-min-height) - var(--p-line-height-1) - 2px) / 2 + (var(--pc-button-slim-min-height) - var(--p-line-height-2) - 2px) / 2 ); --pc-button-large-vertical-padding: calc( - (var(--pc-button-large-min-height) - var(--p-line-height-1) - 2px) / 2 + (var(--pc-button-large-min-height) - var(--p-line-height-2) - 2px) / 2 ); --pc-button-spinner-size: 20px; --pc-button-segment: 10; diff --git a/src/components/CheckableButton/CheckableButton.scss b/src/components/CheckableButton/CheckableButton.scss index 8bc8947db7a..8a42df1e6d3 100644 --- a/src/components/CheckableButton/CheckableButton.scss +++ b/src/components/CheckableButton/CheckableButton.scss @@ -1,7 +1,7 @@ @import '../../styles/common'; $button-vertical-padding: calc( - (var(--p-line-height-5) - var(--p-line-height-1) - 2px) / 2 + (var(--p-line-height-6) - var(--p-line-height-2) - 2px) / 2 ); .CheckableButton { @@ -9,8 +9,8 @@ $button-vertical-padding: calc( @include recolor-icon(var(--p-icon-on-interactive)); display: flex; align-items: center; - min-height: var(--p-line-height-5); - min-width: var(--p-line-height-5); + min-height: var(--p-line-height-6); + min-width: var(--p-line-height-6); margin: 0; padding: $button-vertical-padding var(--p-space-4); line-height: 1; diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss index 7769a92f5e2..dc9248206db 100644 --- a/src/components/Page/Page.scss +++ b/src/components/Page/Page.scss @@ -1,7 +1,7 @@ @import '../../styles/common'; $navigation-elements-height: 36px; -$title-height: var(--p-line-height-4); +$title-height: var(--p-line-height-5); $stacking-order: ( title: 10, breadcrumbs: 20, diff --git a/src/components/SkeletonDisplayText/SkeletonDisplayText.scss b/src/components/SkeletonDisplayText/SkeletonDisplayText.scss index 437f2c9cd3b..692310fc65f 100644 --- a/src/components/SkeletonDisplayText/SkeletonDisplayText.scss +++ b/src/components/SkeletonDisplayText/SkeletonDisplayText.scss @@ -11,33 +11,33 @@ $skeleton-display-text-max-width: 120px; } .DisplayText { - --pc-skeleton-display-text-height: var(--p-line-height-1); - --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-1); + --pc-skeleton-display-text-height: var(--p-line-height-2); + --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-2); max-width: $skeleton-display-text-max-width; @include skeleton-content; } .sizeSmall { - --pc-skeleton-display-text-height: var(--p-line-height-2); - --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-3); + --pc-skeleton-display-text-height: var(--p-line-height-3); + --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-4); @include skeleton-display-text-height; } .sizeMedium { - --pc-skeleton-display-text-height: var(--p-line-height-3); - --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-4); + --pc-skeleton-display-text-height: var(--p-line-height-4); + --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-5); @include skeleton-display-text-height; } .sizeLarge { - --pc-skeleton-display-text-height: var(--p-line-height-3); - --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-4); + --pc-skeleton-display-text-height: var(--p-line-height-4); + --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-5); @include skeleton-display-text-height; } .sizeExtraLarge { - --pc-skeleton-display-text-height: var(--p-line-height-5); - --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-6); + --pc-skeleton-display-text-height: var(--p-line-height-6); + --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-7); @include skeleton-display-text-height; } diff --git a/src/components/TopBar/components/UserMenu/UserMenu.scss b/src/components/TopBar/components/UserMenu/UserMenu.scss index 8ddfb2d8795..26d859037f1 100644 --- a/src/components/TopBar/components/UserMenu/UserMenu.scss +++ b/src/components/TopBar/components/UserMenu/UserMenu.scss @@ -13,7 +13,7 @@ @include truncate; @include text-style-body; font-weight: var(--p-font-weight-medium); - line-height: var(--p-line-height-0); + line-height: var(--p-line-height-1); color: var(--p-text); text-align: left; } diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss index 3e45293c507..819538b74b3 100644 --- a/src/styles/shared/_buttons.scss +++ b/src/styles/shared/_buttons.scss @@ -6,7 +6,7 @@ @mixin button-base { $vertical-padding: calc( - (var(--p-line-height-5) - var(--p-line-height-1) - 2px) / 2 + (var(--p-line-height-6) - var(--p-line-height-2) - 2px) / 2 ); @include recolor-icon(var(--p-icon)); @@ -15,8 +15,8 @@ display: inline-flex; align-items: center; justify-content: center; - min-height: var(--p-line-height-5); - min-width: var(--p-line-height-5); + min-height: var(--p-line-height-6); + min-width: var(--p-line-height-6); margin: 0; padding: $vertical-padding var(--p-space-4); background: var(--p-surface); diff --git a/src/styles/shared/_controls.scss b/src/styles/shared/_controls.scss index 120c27985da..66067dbc7a9 100644 --- a/src/styles/shared/_controls.scss +++ b/src/styles/shared/_controls.scss @@ -3,7 +3,7 @@ } :root { - --pc-control-height: var(--p-line-height-5); + --pc-control-height: var(--p-line-height-6); } @function control-slim-height() { @@ -11,7 +11,7 @@ } @function control-vertical-padding() { - @return calc((var(--p-line-height-5) - var(--p-line-height-2) - 2px) / 2); + @return calc((var(--p-line-height-6) - var(--p-line-height-3) - 2px) / 2); } @function control-icon-transition() { diff --git a/src/styles/shared/_typography.scss b/src/styles/shared/_typography.scss index f4564c49d71..7b46d26be41 100644 --- a/src/styles/shared/_typography.scss +++ b/src/styles/shared/_typography.scss @@ -15,18 +15,18 @@ $typography-condensed: em(640px); @mixin text-style-caption { font-size: font-size(caption); font-weight: var(--p-font-weight-regular); - line-height: var(--p-line-height-1); + line-height: var(--p-line-height-2); @include when-typography-not-condensed { font-size: font-size(caption, large-screen); - line-height: var(--p-line-height-0); + line-height: var(--p-line-height-1); } } @mixin text-style-heading { font-size: font-size(heading); font-weight: var(--p-font-weight-semibold); - line-height: var(--p-line-height-2); + line-height: var(--p-line-height-3); @include when-typography-not-condensed { font-size: font-size(heading, large-screen); @@ -36,7 +36,7 @@ $typography-condensed: em(640px); @mixin text-style-subheading { font-size: font-size(subheading); font-weight: var(--p-font-weight-semibold); - line-height: var(--p-line-height-0); + line-height: var(--p-line-height-1); text-transform: uppercase; @include when-typography-not-condensed { @@ -47,7 +47,7 @@ $typography-condensed: em(640px); @mixin text-style-input { font-size: font-size(input); font-weight: var(--p-font-weight-regular); - line-height: var(--p-line-height-2); + line-height: var(--p-line-height-3); border: none; text-transform: initial; @@ -61,7 +61,7 @@ $typography-condensed: em(640px); @mixin text-style-body { font-size: font-size(body); font-weight: var(--p-font-weight-regular); - line-height: var(--p-line-height-1); + line-height: var(--p-line-height-2); text-transform: initial; letter-spacing: initial; @@ -74,7 +74,7 @@ $typography-condensed: em(640px); @mixin text-style-button { font-size: font-size(button); font-weight: var(--p-font-weight-medium); - line-height: var(--p-line-height-0); + line-height: var(--p-line-height-1); text-transform: initial; letter-spacing: initial; @@ -87,7 +87,7 @@ $typography-condensed: em(640px); @mixin text-style-button-large { font-size: font-size(button-large); font-weight: var(--p-font-weight-medium); - line-height: var(--p-line-height-1); + line-height: var(--p-line-height-2); text-transform: initial; letter-spacing: initial; @@ -100,44 +100,44 @@ $typography-condensed: em(640px); @mixin text-style-display-x-large { font-size: font-size(display-x-large); font-weight: var(--p-font-weight-semibold); - line-height: var(--p-line-height-5); + line-height: var(--p-line-height-6); @include when-typography-not-condensed { font-size: font-size(display-x-large, large-screen); - line-height: var(--p-line-height-6); + line-height: var(--p-line-height-7); } } @mixin text-style-display-large { font-size: font-size(display-large); font-weight: var(--p-font-weight-semibold); - line-height: var(--p-line-height-3); + line-height: var(--p-line-height-4); @include when-typography-not-condensed { font-size: font-size(display-large, large-screen); - line-height: var(--p-line-height-4); + line-height: var(--p-line-height-5); } } @mixin text-style-display-medium { font-size: font-size(display-medium); font-weight: var(--p-font-weight-regular); - line-height: var(--p-line-height-3); + line-height: var(--p-line-height-4); @include when-typography-not-condensed { font-size: font-size(display-medium, large-screen); - line-height: var(--p-line-height-4); + line-height: var(--p-line-height-5); } } @mixin text-style-display-small { font-size: font-size(display-small); font-weight: var(--p-font-weight-regular); - line-height: var(--p-line-height-2); + line-height: var(--p-line-height-3); @include when-typography-not-condensed { font-size: font-size(display-small, large-screen); - line-height: var(--p-line-height-3); + line-height: var(--p-line-height-4); } } diff --git a/src/tokens/token-groups/line-height.json b/src/tokens/token-groups/line-height.json index a87bc7df72e..15623d86db5 100644 --- a/src/tokens/token-groups/line-height.json +++ b/src/tokens/token-groups/line-height.json @@ -1,9 +1,9 @@ { - "line-height-0": "16px", - "line-height-1": "20px", - "line-height-2": "24px", - "line-height-3": "28px", - "line-height-4": "32px", - "line-height-5": "36px", - "line-height-6": "44px" + "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" } From d7046a7ee3ab71ae0b833165ae82ecea74150a0b Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 21 Dec 2021 12:44:13 -0800 Subject: [PATCH 15/17] Update src/styles/shared/_buttons.scss Co-authored-by: Kyle Durand --- src/styles/shared/_buttons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss index 819538b74b3..a1133e01b32 100644 --- a/src/styles/shared/_buttons.scss +++ b/src/styles/shared/_buttons.scss @@ -6,7 +6,7 @@ @mixin button-base { $vertical-padding: calc( - (var(--p-line-height-6) - var(--p-line-height-2) - 2px) / 2 + (var(--p-line-height-6) - var(--p-line-height-2) - var(--p-space-05)) / 2 ); @include recolor-icon(var(--p-icon)); From 146c6eb1df520de77fb786add980d67674099506 Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 21 Dec 2021 12:44:59 -0800 Subject: [PATCH 16/17] Update src/styles/shared/_controls.scss Co-authored-by: Kyle Durand --- src/styles/shared/_controls.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/shared/_controls.scss b/src/styles/shared/_controls.scss index 66067dbc7a9..1c5c26c987b 100644 --- a/src/styles/shared/_controls.scss +++ b/src/styles/shared/_controls.scss @@ -11,7 +11,7 @@ } @function control-vertical-padding() { - @return calc((var(--p-line-height-6) - var(--p-line-height-3) - 2px) / 2); + @return calc((var(--p-line-height-6) - var(--p-line-height-3) - var(--p-space-05)) / 2); } @function control-icon-transition() { From ecce56bf08dd42d7e4dfcb0a5c7a1cba04619f98 Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 21 Dec 2021 12:55:55 -0800 Subject: [PATCH 17/17] Use control-height token and calc --- src/components/Banner/Banner.scss | 5 +++-- src/styles/shared/_controls.scss | 4 +++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss index 026d8de9c98..6f2c005a40b 100644 --- a/src/components/Banner/Banner.scss +++ b/src/components/Banner/Banner.scss @@ -52,8 +52,9 @@ .Banner { --pc-banner-rgb-text: 33, 43, 54; --pc-banner-secondary-action-horizontal-padding: var(--p-space-3); - --pc-banner-secondary-action-vertical-padding: 0.5 * - (#{control-height()} - var(--p-line-height-2)); + --pc-banner-secondary-action-vertical-padding: calc( + 0.5 * (var(--pc-control-height) - var(--p-line-height-2)) + ); position: relative; display: flex; diff --git a/src/styles/shared/_controls.scss b/src/styles/shared/_controls.scss index 1c5c26c987b..70d741ec5c8 100644 --- a/src/styles/shared/_controls.scss +++ b/src/styles/shared/_controls.scss @@ -11,7 +11,9 @@ } @function control-vertical-padding() { - @return calc((var(--p-line-height-6) - var(--p-line-height-3) - var(--p-space-05)) / 2); + @return calc( + (var(--pc-control-height) - var(--p-line-height-3) - var(--p-space-05)) / 2 + ); } @function control-icon-transition() {