Additional 4px-based spacing component changes (#7576)

Author: ggdouglas

packages/core/src/_reset.scss

@@ -25,7 +25,7 @@ body {
 }
 
 p {
-  margin-bottom: $pt-spacing * 2.5;
+  margin-bottom: $pt-spacing * 2;
   margin-top: 0;
 }
 

packages/core/src/_typography.scss

@@ -28,7 +28,7 @@ Styleguide headings
 
 .#{$ns}-heading {
   @include heading-typography();
-  margin: 0 0 ($pt-spacing * 2.5);
+  margin: 0 0 ($pt-spacing * 3);
   padding: 0;
 }
 
@@ -155,7 +155,7 @@ Styleguide running-text
   }
 
   p {
-    margin: 0 0 ($pt-spacing * 2.5);
+    margin: 0 0 ($pt-spacing * 3);
     padding: 0;
   }
 
@@ -252,7 +252,7 @@ Styleguide preformatted
   display: block;
   font-size: $pt-font-size - 1px;
   line-height: 1.4;
-  margin: ($pt-spacing * 2.5) 0;
+  margin: ($pt-spacing * 2) 0;
   padding: ($pt-spacing * 3) ($pt-spacing * 4);
   word-break: break-all;
   word-wrap: break-word;
@@ -309,7 +309,7 @@ Styleguide blockquote
 
 %blockquote {
   border-left: solid $pt-spacing rgba($gray4, 0.5);
-  margin: 0 0 ($pt-spacing * 2.5);
+  margin: 0 0 ($pt-spacing * 2);
   padding: 0 ($pt-spacing * 5);
 
   .#{$ns}-dark & {
@@ -344,7 +344,7 @@ Styleguide lists
 */
 
 %list {
-  margin: ($pt-spacing * 2.5) 0;
+  margin: ($pt-spacing * 2) 0;
   padding-left: $pt-spacing * 7.5;
 
   li:not(:last-child) {

packages/core/src/components/alert/_alert.scss

@@ -25,9 +25,9 @@
 .#{$ns}-alert-footer {
   display: flex;
   flex-direction: row-reverse;
-  margin-top: $pt-spacing * 2.5;
+  margin-top: $pt-spacing * 3;
 
   .#{$ns}-button {
-    margin-left: $pt-spacing * 2.5;
+    margin-left: $pt-spacing * 2;
   }
 }

packages/core/src/components/button/_common.scss

@@ -7,11 +7,11 @@
 @import "../progress-bar/common";
 
 $button-border-width: 1px !default;
-$button-padding: $pt-spacing ($pt-spacing * 2.5) !default;
+$button-padding: $pt-spacing ($pt-spacing * 2) !default;
 $button-padding-small: 0 ($pt-spacing * 2) !default;
 $button-padding-large: $pt-spacing ($pt-spacing * 4) !default;
 $button-icon-spacing: $pt-spacing * 2 !default;
-$button-icon-spacing-large: $pt-spacing * 2.5 !default;
+$button-icon-spacing-large: $pt-spacing * 2 !default;
 
 /*
 CSS `border` property issues:

packages/core/src/components/callout/_callout.scss

@@ -5,7 +5,7 @@
 
 $callout-padding: $pt-spacing * 4;
 $callout-header-margin-top: $pt-spacing * 0.5;
-$callout-padding-compact: $pt-spacing * 2.5;
+$callout-padding-compact: $pt-spacing * 2;
 
 .#{$ns}-callout {
   @include running-typography();

packages/core/src/components/card/_card-variables.scss

@@ -13,7 +13,7 @@ $card-list-border-width: 1px !default;
 
 // CardList Card item min-height is calculated as height of a button + vertical padding.
 // We need to add an extra pixel to account for the bottom border.
-$card-list-item-padding-vertical: $pt-spacing * 2.5 !default;
+$card-list-item-padding-vertical: $pt-spacing * 2 !default;
 // prettier-ignore
 $card-list-item-min-height: $pt-button-height + ($card-list-item-padding-vertical * 2) + $card-list-border-width !default;
 $card-list-item-padding: $card-list-item-padding-vertical $card-padding !default;

packages/core/src/components/control-card/_control-card.scss

@@ -21,7 +21,7 @@
     // control indicators should be top-aligned
     align-items: flex-start;
     display: flex;
-    gap: $pt-spacing * 2.5;
+    gap: $pt-spacing * 2;
     margin: 0;
     padding: $card-padding;
     width: calc(100%);

packages/core/src/components/dialog/_dialog-footer.scss

@@ -18,7 +18,7 @@
   gap: $dialog-padding;
   justify-content: space-between;
   margin: 0;
-  padding: ($pt-spacing * 2.5) ($pt-spacing * 2.5) ($pt-spacing * 2.5) $dialog-padding;
+  padding: ($pt-spacing * 2) ($pt-spacing * 2) ($pt-spacing * 2) $dialog-padding;
 
   .#{$ns}-dark & {
     background: $dark-gray4;
@@ -35,6 +35,6 @@
   justify-content: flex-end;
 
   .#{$ns}-button {
-    margin-left: $pt-spacing * 2.5;
+    margin-left: $pt-spacing * 2;
   }
 }

packages/core/src/components/dialog/_multistep-dialog.scss

@@ -205,7 +205,7 @@ $step-radius: $pt-border-radius * 2 !default;
 .#{$ns}-dialog-step-title {
   color: $pt-text-color-disabled;
   flex: 1;
-  padding-left: $pt-spacing * 2.5;
+  padding-left: $pt-spacing * 2;
 
   .#{$ns}-dark & {
     color: $pt-dark-text-color-disabled;

packages/core/src/components/entity-title/_entity-title.scss

@@ -81,10 +81,6 @@
   &-heading-h3 {
     gap: $pt-spacing * 4;
 
-    .#{$ns}-entity-title-status-tag {
-      margin-left: $pt-spacing * 2.5;
-    }
-
     .#{$ns}-entity-title-subtitle {
       font-size: $pt-font-size;
     }
@@ -93,7 +89,7 @@
   &-heading-h4,
   &-heading-h5,
   &-heading-h6 {
-    gap: $pt-spacing * 2.5;
+    gap: $pt-spacing * 2;
 
     .#{$ns}-entity-title-subtitle {
       font-size: $pt-font-size-small;