Skip to content

Commit a4bf4a0

Browse files
ggdouglasggdouglas
authored
Migrate $pt-grid-size values to $pt-spacing (#7541)
1 parent 3029aa2 commit a4bf4a0

File tree

90 files changed

+476
-459
lines changed

Some content is hidden

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

90 files changed

+476
-459
lines changed

‎packages/core/src/_reset.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ body {
2525
}
2626

2727
p {
28-
margin-bottom: $pt-grid-size;
28+
margin-bottom: $pt-spacing * 2.5;
2929
margin-top: 0;
3030
}
3131

‎packages/core/src/_typography.scss‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Styleguide headings
2828

2929
.#{$ns}-heading {
3030
@include heading-typography();
31-
margin: 0 0 $pt-grid-size;
31+
margin: 0 0 ($pt-spacing * 2.5);
3232
padding: 0;
3333
}
3434

@@ -143,19 +143,19 @@ Styleguide running-text
143143
#{$tag} {
144144
@extend %#{$tag};
145145
@include heading-typography();
146-
margin-bottom: $pt-grid-size * 2;
147-
margin-top: $pt-grid-size * 4;
146+
margin-bottom: $pt-spacing * 5;
147+
margin-top: $pt-spacing * 10;
148148
}
149149
}
150150

151151
hr {
152152
border: none;
153153
border-bottom: 1px solid $pt-divider-black;
154-
margin: ($pt-grid-size * 2) 0;
154+
margin: ($pt-spacing * 5) 0;
155155
}
156156

157157
p {
158-
margin: 0 0 $pt-grid-size;
158+
margin: 0 0 ($pt-spacing * 2.5);
159159
padding: 0;
160160
}
161161

@@ -242,7 +242,7 @@ Styleguide preformatted
242242
@include monospace-typography();
243243
border-radius: $pt-border-radius;
244244
font-size: smaller;
245-
padding: 2px 5px;
245+
padding: ($pt-spacing * 0.5) ($pt-spacing * 1.25);
246246
}
247247

248248
%code-block {
@@ -252,8 +252,8 @@ Styleguide preformatted
252252
display: block;
253253
font-size: $pt-font-size - 1px;
254254
line-height: 1.4;
255-
margin: $pt-grid-size 0;
256-
padding: ($pt-grid-size * 1.3) ($pt-grid-size * 1.5) ($pt-grid-size * 1.2);
255+
margin: ($pt-spacing * 2.5) 0;
256+
padding: ($pt-spacing * 3.25) ($pt-spacing * 3.75) ($pt-spacing * 3);
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-grid-size * 0.5;
288+
margin-right: $pt-spacing * 1.25;
289289
}
290290
}
291291

@@ -308,9 +308,9 @@ Styleguide blockquote
308308
*/
309309

310310
%blockquote {
311-
border-left: solid 4px rgba($gray4, 0.5);
312-
margin: 0 0 $pt-grid-size;
313-
padding: 0 ($pt-grid-size * 2);
311+
border-left: solid $pt-spacing rgba($gray4, 0.5);
312+
margin: 0 0 ($pt-spacing * 2.5);
313+
padding: 0 ($pt-spacing * 5);
314314

315315
.#{$ns}-dark & {
316316
border-color: rgba($gray2, 0.5);
@@ -344,17 +344,17 @@ Styleguide lists
344344
*/
345345

346346
%list {
347-
margin: $pt-grid-size 0;
348-
padding-left: $pt-grid-size * 3;
347+
margin: ($pt-spacing * 2.5) 0;
348+
padding-left: $pt-spacing * 7.5;
349349

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

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

‎packages/core/src/common/_mixins.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,10 @@ $pt-dark-intent-text-colors: (
8484
word-wrap: normal;
8585
}
8686

87-
@mixin focus-outline($offset: 2px) {
88-
outline: $pt-focus-indicator-color solid 2px;
87+
@mixin focus-outline($offset: $pt-spacing * 0.5) {
88+
outline: $pt-focus-indicator-color solid ($pt-spacing * 0.5);
8989
outline-offset: $offset;
90-
-moz-outline-radius: 6px;
90+
-moz-outline-radius: $pt-spacing * 1.5;
9191

9292
.#{$ns}-dark & {
9393
outline-color: $pt-dark-focus-indicator-color;

‎packages/core/src/common/_variables.scss‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,25 @@ $ns: bp6;
2020
// Alias for BP users outside this repo
2121
$bp-ns: $ns;
2222

23-
// easily the most important variable, so it comes up top
24-
// (so other variables can use it to define themselves)
23+
// Legacy 10px-based grid size variable, kept for backward compatibility.
24+
// New spacing values should use $pt-spacing instead (multiply by 2.5 to convert).
25+
// This variable will eventually be deprecated in favor of the 4px-based system.
2526
$pt-grid-size: 10px !default;
2627

28+
// Primary spacing unit for Blueprint's 4px-based spacing system.
29+
// This is the most important spacing variable, so it comes up early
30+
// (so other variables can use it to define themselves).
31+
// This replaces $pt-grid-size as the foundation for consistent spacing throughout components.
32+
// Use multiples of this value for all margins, padding, and sizing calculations.
33+
$pt-spacing: 4px !default;
34+
2735
// Icon variables
2836

2937
$icons16-family: "blueprint-icons-16" !default;
3038
$icons20-family: "blueprint-icons-20" !default;
3139

32-
$pt-icon-size-standard: 16px !default;
33-
$pt-icon-size-large: 20px !default;
40+
$pt-icon-size-standard: $pt-spacing * 4 !default;
41+
$pt-icon-size-large: $pt-spacing * 5 !default;
3442

3543
// Typography
3644

@@ -51,32 +59,32 @@ $pt-font-family:
5159

5260
$pt-font-family-monospace: monospace !default;
5361

54-
$pt-font-size: $pt-grid-size * 1.4 !default;
55-
$pt-font-size-large: $pt-grid-size * 1.6 !default;
56-
$pt-font-size-small: $pt-grid-size * 1.2 !default;
62+
$pt-font-size: $pt-spacing * 3.5 !default;
63+
$pt-font-size-large: $pt-spacing * 4 !default;
64+
$pt-font-size-small: $pt-spacing * 3 !default;
5765

5866
// a little bit extra to ensure the height comes out to just over 18px (and browser rounds to 18px)
59-
// equivalent to: math.div($pt-grid-size * 1.8, $pt-font-size) + 0.0001
67+
// equivalent to: math.div($pt-spacing * 4.5, $pt-font-size) + 0.0001
6068
$pt-line-height: 1.28581 !default;
6169

6270
// Grids & dimensions
6371

64-
// equivalent to: floor(math.div($pt-grid-size, 5))
72+
// equivalent to: $pt-spacing * 0.5
6573
$pt-border-radius: 2px !default;
6674

6775
// Buttons
68-
$pt-button-height: $pt-grid-size * 3 !default;
69-
$pt-button-height-small: $pt-grid-size * 2.4 !default;
70-
$pt-button-height-smaller: $pt-grid-size * 2 !default;
71-
$pt-button-height-large: $pt-grid-size * 4 !default;
76+
$pt-button-height: $pt-spacing * 7.5 !default;
77+
$pt-button-height-small: $pt-spacing * 6 !default;
78+
$pt-button-height-smaller: $pt-spacing * 5 !default;
79+
$pt-button-height-large: $pt-spacing * 10 !default;
7280

7381
// Inputs
74-
$pt-input-height: $pt-grid-size * 3 !default;
75-
$pt-input-height-large: $pt-grid-size * 4 !default;
76-
$pt-input-height-small: $pt-grid-size * 2.4 !default;
82+
$pt-input-height: $pt-spacing * 7.5 !default;
83+
$pt-input-height-large: $pt-spacing * 10 !default;
84+
$pt-input-height-small: $pt-spacing * 6 !default;
7785

7886
// Others
79-
$pt-navbar-height: $pt-grid-size * 5 !default;
87+
$pt-navbar-height: $pt-spacing * 12.5 !default;
8088

8189
// Z-indices
8290
$pt-z-index-base: 0 !default;

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

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

66
.#{$ns}-alert {
7-
max-width: $pt-grid-size * 40;
8-
padding: $pt-grid-size * 2;
7+
max-width: $pt-spacing * 100;
8+
padding: $pt-spacing * 5;
99
}
1010

1111
.#{$ns}-alert-body {
1212
display: flex;
1313

1414
.#{$ns}-icon {
1515
font-size: $pt-icon-size-large * 2;
16-
margin-right: $pt-grid-size * 2;
16+
margin-right: $pt-spacing * 5;
1717
margin-top: 0;
1818
}
1919
}
@@ -25,9 +25,9 @@
2525
.#{$ns}-alert-footer {
2626
display: flex;
2727
flex-direction: row-reverse;
28-
margin-top: $pt-grid-size;
28+
margin-top: $pt-spacing * 2.5;
2929

3030
.#{$ns}-button {
31-
margin-left: $pt-grid-size;
31+
margin-left: $pt-spacing * 2.5;
3232
}
3333
}

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

Lines changed: 4 additions & 4 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-grid-size * 0.5);
35+
margin: 0 ($pt-spacing * 1.25);
3636
width: $pt-icon-size-standard;
3737
}
3838

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

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

@@ -86,8 +86,8 @@
8686
border: none;
8787
border-radius: $pt-border-radius;
8888
cursor: pointer;
89-
margin-right: 2px;
90-
padding: 1px ($pt-grid-size * 0.5);
89+
margin-right: $pt-spacing * 0.5;
90+
padding: 1px ($pt-spacing * 1.25);
9191
vertical-align: text-bottom;
9292

9393
&::before {

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

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

99
$button-border-width: 1px !default;
10-
$button-padding: ($pt-grid-size * 0.5) $pt-grid-size !default;
11-
$button-padding-small: 0 ($pt-grid-size * 0.7) !default;
12-
$button-padding-large: ($pt-grid-size * 0.5) ($pt-grid-size * 1.5) !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;
1313
$button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
1414
$button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;
1515

@@ -470,7 +470,7 @@ $dark-minimal-active-text-colors: (
470470
}
471471

472472
@mixin pt-button-minimal-divider() {
473-
$divider-height: $pt-grid-size * 2;
473+
$divider-height: $pt-spacing * 5;
474474
background: $pt-divider-black;
475475

476476
margin: ($pt-button-height - $divider-height) * 0.5;

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

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

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

6-
$callout-padding: $pt-grid-size * 1.5;
7-
$callout-header-margin-top: $pt-grid-size * 0.2;
8-
$callout-padding-compact: $pt-grid-size;
6+
$callout-padding: $pt-spacing * 3.75;
7+
$callout-header-margin-top: $pt-spacing * 0.5;
8+
$callout-padding-compact: $pt-spacing * 2.5;
99

1010
.#{$ns}-callout {
1111
@include running-typography();
@@ -20,7 +20,7 @@ $callout-padding-compact: $pt-grid-size;
2020

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

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

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

4242
> .#{$ns}-icon:first-child {
4343
color: $pt-icon-color;
@@ -63,7 +63,7 @@ $callout-padding-compact: $pt-grid-size;
6363
padding: $callout-padding-compact;
6464

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

6868
> .#{$ns}-icon:first-child {
6969
left: $callout-padding-compact;
@@ -136,6 +136,6 @@ $callout-padding-compact: $pt-grid-size;
136136
}
137137

138138
.#{$ns}-running-text & {
139-
margin: ($pt-grid-size * 2) 0;
139+
margin: ($pt-spacing * 5) 0;
140140
}
141141
}

‎packages/core/src/components/card-list/card-list.scss‎

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

6666
.#{$ns}-dark & {
6767
margin: 1px;
68-
width: calc(100% - 2px);
68+
width: calc(100% - ($pt-spacing * 0.5));
6969
}
7070
}
7171
}

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

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

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

6-
$card-padding: $pt-grid-size * 2 !default;
7-
$card-padding-compact: $pt-grid-size * 1.5 !default;
6+
$card-padding: $pt-spacing * 5 !default;
7+
$card-padding-compact: $pt-spacing * 3.75 !default;
88

99
$card-background-color: $white !default;
1010
$dark-card-background-color: $pt-dark-app-elevated-background-color !default;
@@ -13,12 +13,12 @@ $card-list-border-width: 1px !default;
1313

1414
// CardList Card item min-height is calculated as height of a button + vertical padding.
1515
// We need to add an extra pixel to account for the bottom border.
16-
$card-list-item-padding-vertical: $pt-grid-size !default;
16+
$card-list-item-padding-vertical: $pt-spacing * 2.5 !default;
1717
// prettier-ignore
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: 7px !default;
21+
$card-list-item-padding-vertical-compact: $pt-spacing * 1.75 !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;

0 commit comments

Comments
 (0)