Line height tokens

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-2)) / 2
   );
   outline: none;
   list-style: none;

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-2)) / 2
   );
   margin-bottom: var(--p-space-3);
 }

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-1);
   color: var(--p-text);
   font-weight: var(--p-font-weight-regular);
 

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() - line-height(body)});
+  --pc-banner-secondary-action-vertical-padding: calc(
+    0.5 * (var(--pc-control-height) - var(--p-line-height-2))
+  );
   position: relative;
   display: flex;
 

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(--pc-control-height);
+  --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-2) - 2px) / 2
+  );
+  --pc-button-slim-vertical-padding: calc(
+    (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-2) - 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;

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-6) - var(--p-line-height-2) - 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-6);
+  min-width: var(--p-line-height-6);
   margin: 0;
   padding: $button-vertical-padding var(--p-space-4);
   line-height: 1;

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: {},

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;

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-5);
 $stacking-order: (
   title: 10,
   breadcrumbs: 20,

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-2);
+  --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-2);
   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-3);
+  --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-4);
+  @include skeleton-display-text-height;
 }
 
 .sizeMedium {
-  @include skeleton-display-text-height('display-medium');
+  --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 {
-  @include skeleton-display-text-height('display-large');
+  --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 {
-  @include skeleton-display-text-height('display-x-large');
+  --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;
 }

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-1);
   color: var(--p-text);
   text-align: left;
 }

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,22 +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.

src/styles/shared/_buttons.scss

@@ -5,17 +5,18 @@
 }
 
 @mixin button-base {
-  $min-height: control-height();
-  $vertical-padding: ($min-height - line-height(body) - 2px) / 2;
+  $vertical-padding: calc(
+    (var(--p-line-height-6) - var(--p-line-height-2) - var(--p-space-05)) / 2
+  );
 
   @include recolor-icon(var(--p-icon));
   @include focus-ring($border-width: border-width('base'));
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: $min-height;
-  min-width: $min-height;
+  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);

src/styles/shared/_controls.scss

@@ -2,12 +2,18 @@
   @return 36px;
 }
 
+:root {
+  --pc-control-height: var(--p-line-height-6);
+}
+
 @function control-slim-height() {
   @return 28px;
 }
 
 @function control-vertical-padding() {
-  @return (control-height() - line-height(input) - 2px) / 2;
+  @return calc(
+    (var(--pc-control-height) - var(--p-line-height-3) - var(--p-space-05)) / 2
+  );
 }
 
 @function control-icon-transition() {