Skip to content

Commit 39f5410

Browse files
ggdouglasggdouglas
authored
Migrate components to use 4px-based spacing values (#7542)
1 parent 135e7e9 commit 39f5410

File tree

46 files changed

+140
-135
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+140
-135
lines changed

‎packages/core/src/_typography.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ Styleguide preformatted
242242
@include monospace-typography();
243243
border-radius: $pt-border-radius;
244244
font-size: smaller;
245-
padding: ($pt-spacing * 0.5) ($pt-spacing * 1.25);
245+
padding: ($pt-spacing * 0.5) $pt-spacing;
246246
}
247247

248248
%code-block {
@@ -253,7 +253,7 @@ Styleguide preformatted
253253
font-size: $pt-font-size - 1px;
254254
line-height: 1.4;
255255
margin: ($pt-spacing * 2.5) 0;
256-
padding: ($pt-spacing * 3.25) ($pt-spacing * 3.75) ($pt-spacing * 3);
256+
padding: ($pt-spacing * 3) ($pt-spacing * 4);
257257
word-break: break-all;
258258
word-wrap: break-word;
259259

@@ -285,7 +285,7 @@ Styleguide preformatted
285285
vertical-align: middle;
286286

287287
#{$icon-classes} {
288-
margin-right: $pt-spacing * 1.25;
288+
margin-right: $pt-spacing;
289289
}
290290
}
291291

@@ -348,13 +348,13 @@ Styleguide lists
348348
padding-left: $pt-spacing * 7.5;
349349

350350
li:not(:last-child) {
351-
margin-bottom: $pt-spacing * 1.25;
351+
margin-bottom: $pt-spacing;
352352
}
353353

354354
// nested lists
355355
ol,
356356
ul {
357-
margin-top: $pt-spacing * 1.25;
357+
margin-top: $pt-spacing;
358358
}
359359
}
360360

‎packages/core/src/components/breadcrumbs/_breadcrumbs.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
content: "";
3333
display: block;
3434
height: $pt-icon-size-standard;
35-
margin: 0 ($pt-spacing * 1.25);
35+
margin: 0 $pt-spacing;
3636
width: $pt-icon-size-standard;
3737
}
3838

@@ -66,7 +66,7 @@
6666
}
6767

6868
.#{$ns}-icon {
69-
margin-right: $pt-spacing * 1.25;
69+
margin-right: $pt-spacing;
7070
}
7171
}
7272

@@ -87,7 +87,7 @@
8787
border-radius: $pt-border-radius;
8888
cursor: pointer;
8989
margin-right: $pt-spacing * 0.5;
90-
padding: 1px ($pt-spacing * 1.25);
90+
padding: 1px $pt-spacing;
9191
vertical-align: text-bottom;
9292

9393
&::before {

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
@import "../progress-bar/common";
88

99
$button-border-width: 1px !default;
10-
$button-padding: ($pt-spacing * 1.25) ($pt-spacing * 2.5) !default;
11-
$button-padding-small: 0 ($pt-spacing * 1.75) !default;
12-
$button-padding-large: ($pt-spacing * 1.25) ($pt-spacing * 3.75) !default;
13-
$button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
14-
$button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;
10+
$button-padding: $pt-spacing ($pt-spacing * 2.5) !default;
11+
$button-padding-small: 0 ($pt-spacing * 2) !default;
12+
$button-padding-large: $pt-spacing ($pt-spacing * 4) !default;
13+
$button-icon-spacing: $pt-spacing * 2 !default;
14+
$button-icon-spacing-large: $pt-spacing * 2.5 !default;
1515

1616
/*
1717
CSS `border` property issues:

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
@import "../../common/variables-extended";
55

6-
$callout-padding: $pt-spacing * 3.75;
6+
$callout-padding: $pt-spacing * 4;
77
$callout-header-margin-top: $pt-spacing * 0.5;
88
$callout-padding-compact: $pt-spacing * 2.5;
99

@@ -20,7 +20,7 @@ $callout-padding-compact: $pt-spacing * 2.5;
2020

2121
// CSS API support
2222
&[class*="#{$ns}-icon-"] {
23-
padding-left: $callout-padding + $pt-icon-size-standard + ($pt-spacing * 1.75);
23+
padding-left: $callout-padding + $pt-icon-size-standard + ($pt-spacing * 2);
2424

2525
&::before {
2626
@include pt-icon($pt-icon-size-standard);
@@ -37,7 +37,7 @@ $callout-padding-compact: $pt-spacing * 2.5;
3737
}
3838

3939
&.#{$ns}-callout-icon {
40-
padding-left: $callout-padding + $pt-icon-size-standard + ($pt-spacing * 1.75);
40+
padding-left: $callout-padding + $pt-icon-size-standard + ($pt-spacing * 2);
4141

4242
> .#{$ns}-icon:first-child {
4343
color: $pt-icon-color;
@@ -55,15 +55,15 @@ $callout-padding-compact: $pt-spacing * 2.5;
5555

5656
&.#{$ns}-callout-has-body-content {
5757
.#{$ns}-heading {
58-
margin-bottom: $half-grid-size;
58+
margin-bottom: $pt-spacing;
5959
}
6060
}
6161

6262
&.#{$ns}-compact {
6363
padding: $callout-padding-compact;
6464

6565
&.#{$ns}-callout-icon {
66-
padding-left: $callout-padding-compact + $pt-icon-size-standard + ($pt-spacing * 1.75);
66+
padding-left: $callout-padding-compact + $pt-icon-size-standard + ($pt-spacing * 2);
6767

6868
> .#{$ns}-icon:first-child {
6969
left: $callout-padding-compact;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@import "../../common/variables-extended";
55

66
$card-padding: $pt-spacing * 5 !default;
7-
$card-padding-compact: $pt-spacing * 3.75 !default;
7+
$card-padding-compact: $pt-spacing * 4 !default;
88

99
$card-background-color: $white !default;
1010
$dark-card-background-color: $pt-dark-app-elevated-background-color !default;
@@ -18,7 +18,7 @@ $card-list-item-padding-vertical: $pt-spacing * 2.5 !default;
1818
$card-list-item-min-height: $pt-button-height + ($card-list-item-padding-vertical * 2) + $card-list-border-width !default;
1919
$card-list-item-padding: $card-list-item-padding-vertical $card-padding !default;
2020

21-
$card-list-item-padding-vertical-compact: $pt-spacing * 1.75 !default;
21+
$card-list-item-padding-vertical-compact: $pt-spacing * 2 !default;
2222
// prettier-ignore
2323
$card-list-item-min-height-compact: $pt-button-height + ($card-list-item-padding-vertical-compact * 2) + $card-list-border-width !default;
2424
$card-list-item-padding-compact: $card-list-item-padding-vertical-compact $card-padding-compact !default;

‎packages/core/src/components/dialog/_dialog.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99

1010
$dialog-background-color: $light-gray5 !default;
1111
$dialog-border-radius: $pt-border-radius * 2 !default;
12-
$dialog-margin: ($pt-spacing * 7.5) 0 !default;
13-
$dialog-padding: $pt-spacing * 3.75 !default;
12+
$dialog-margin: ($pt-spacing * 8) 0 !default;
13+
$dialog-padding: $pt-spacing * 4 !default;
1414

1515
.#{$ns}-dialog-container {
1616
$dialog-transition-props: (
@@ -68,7 +68,7 @@ $dialog-padding: $pt-spacing * 3.75 !default;
6868
}
6969
}
7070

71-
$dialog-header-padding: $pt-spacing * 1.25;
71+
$dialog-header-padding: $pt-spacing;
7272

7373
.#{$ns}-dialog-header {
7474
align-items: center;
@@ -85,7 +85,7 @@ $dialog-header-padding: $pt-spacing * 1.25;
8585
.#{$ns}-icon-large,
8686
.#{$ns}-icon {
8787
flex: 0 0 auto;
88-
margin-left: $pt-spacing * -0.75;
88+
margin-left: -$pt-spacing;
8989
margin-right: $dialog-padding * 0.5;
9090

9191
// only apply light color to icons that are not intent-specific

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -185,9 +185,9 @@ $step-radius: $pt-border-radius * 2 !default;
185185
border-radius: 50%;
186186
color: $white;
187187
display: flex;
188-
height: $pt-spacing * 6.25;
188+
height: $pt-spacing * 6;
189189
justify-content: center;
190-
width: $pt-spacing * 6.25;
190+
width: $pt-spacing * 6;
191191

192192
.#{$ns}-dark & {
193193
background-color: $pt-dark-icon-color-disabled;

‎packages/core/src/components/divider/_divider.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
@import "../../common/variables";
55

6-
$divider-margin: $pt-spacing * 1.25 !default;
6+
$divider-margin: $pt-spacing !default;
77

88
.#{$ns}-divider {
99
border-bottom: 1px solid $pt-divider-black;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
.#{$ns}-entity-title {
88
align-items: center;
99
display: flex;
10-
gap: $pt-spacing * 1.75;
10+
gap: $pt-spacing * 2;
1111
min-width: 0;
1212

1313
&.#{$ns}-fill {
@@ -38,13 +38,13 @@
3838
align-items: center;
3939
display: flex;
4040
flex-direction: row;
41-
gap: $pt-spacing * 1.25;
41+
gap: $pt-spacing;
4242
}
4343

4444
&-tags-container {
4545
display: flex;
4646
gap: $pt-spacing * 0.5;
47-
margin-left: $pt-spacing * 1.25;
47+
margin-left: $pt-spacing;
4848
}
4949

5050
&-title {
@@ -79,7 +79,7 @@
7979
&-heading-h1,
8080
&-heading-h2,
8181
&-heading-h3 {
82-
gap: $pt-spacing * 3.75;
82+
gap: $pt-spacing * 4;
8383

8484
.#{$ns}-entity-title-status-tag {
8585
margin-left: $pt-spacing * 2.5;

‎packages/core/src/components/forms/_form-group.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@
88
.#{$ns}-form-group {
99
display: flex;
1010
flex-direction: column;
11-
margin: 0 0 ($pt-spacing * 3.75);
11+
margin: 0 0 ($pt-spacing * 4);
1212

1313
label.#{$ns}-label {
14-
margin-bottom: $pt-spacing * 1.25;
14+
margin-bottom: $pt-spacing;
1515
}
1616

1717
.#{$ns}-control {
18-
margin-top: ($pt-input-height - $control-indicator-size) * 0.5;
18+
margin-top: $pt-spacing * 2;
1919
}
2020

2121
.#{$ns}-form-group-sub-label,
@@ -25,11 +25,11 @@
2525
}
2626

2727
.#{$ns}-form-group-sub-label {
28-
margin-bottom: $pt-spacing * 1.25;
28+
margin-bottom: $pt-spacing;
2929
}
3030

3131
.#{$ns}-form-helper-text {
32-
margin-top: $pt-spacing * 1.25;
32+
margin-top: $pt-spacing;
3333
}
3434

3535
/* stylelint-disable-next-line order/declaration-block-order */

0 commit comments

Comments
 (0)