Skip to content

Commit 3b397d9

Browse files
langermankactions-user
langermank
and
actions-user
authored
Convert margin utilities to rem units with fallbacks (#2311)
* add rem units * Stylelint auto-fixes * Create beige-dragons-appear.md * fix negative utils Co-authored-by: Actions Auto Build <actions@github.com>
1 parent 8c532bd commit 3b397d9

File tree

3 files changed

+89
-62
lines changed

3 files changed

+89
-62
lines changed

‎.changeset/beige-dragons-appear.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": minor
3+
---
4+
5+
[WIP] Convert margin utilities to rem units with fallbacks

‎src/support/variables/layout.scss‎

Lines changed: 75 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,14 @@ $display-values: (
99
inline-flex,
1010
none,
1111
table,
12-
table-cell
13-
) !default;
12+
table-cell) !default;
1413

1514
// maps edges to respective corners for border-radius
1615
$edges: (
1716
top: (top-left, top-right),
1817
right: (top-right, bottom-right),
1918
bottom: (bottom-right, bottom-left),
20-
left: (bottom-left, top-left)
21-
) !default;
19+
left: (bottom-left, top-left)) !default;
2220

2321
// These are our margin and padding utility spacers. The default step size we
2422
// use is 8px. This gives us a key of:
@@ -32,13 +30,13 @@ $edges: (
3230
$spacer: 8px !default;
3331

3432
// Our spacing scale
35-
$spacer-0: 0 !default; // 0
36-
$spacer-1: $spacer * 0.5 !default; // 4px
37-
$spacer-2: $spacer !default; // 8px
38-
$spacer-3: $spacer * 2 !default; // 16px
39-
$spacer-4: $spacer * 3 !default; // 24px
40-
$spacer-5: $spacer * 4 !default; // 32px
41-
$spacer-6: $spacer * 5 !default; // 40px
33+
$spacer-0: 0 !default; // 0
34+
$spacer-1: $spacer * 0.5 !default; // 4px
35+
$spacer-2: $spacer !default; // 8px
36+
$spacer-3: $spacer * 2 !default; // 16px
37+
$spacer-4: $spacer * 3 !default; // 24px
38+
$spacer-5: $spacer * 4 !default; // 32px
39+
$spacer-6: $spacer * 5 !default; // 40px
4240

4341
// The list of spacer values
4442
$spacers: (
@@ -66,9 +64,9 @@ $spacer-map: (
6664
// Increases the core spacing scale first by 8px for $spacer-7, then by 16px
6765
// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,
6866
// 80, 96, etc.
69-
$spacer-7: $spacer * 6 !default; // 48px
70-
$spacer-8: $spacer * 8 !default; // 64px
71-
$spacer-9: $spacer * 10 !default; // 80px
67+
$spacer-7: $spacer * 6 !default; // 48px
68+
$spacer-8: $spacer * 8 !default; // 64px
69+
$spacer-9: $spacer * 10 !default; // 80px
7270
$spacer-10: $spacer * 12 !default; // 96px
7371
$spacer-11: $spacer * 14 !default; // 112px
7472
$spacer-12: $spacer * 16 !default; // 128px
@@ -83,43 +81,42 @@ $spacers-large: (
8381
) !default;
8482

8583
$spacer-map-extended: map-merge(
86-
(
87-
0: 0,
88-
1: $spacer-1,
89-
2: $spacer-2,
90-
3: $spacer-3,
91-
4: $spacer-4,
92-
5: $spacer-5,
93-
6: $spacer-6,
94-
),
95-
$spacers-large,
84+
(0: 0,
85+
1: $spacer-1,
86+
2: $spacer-2,
87+
3: $spacer-3,
88+
4: $spacer-4,
89+
5: $spacer-5,
90+
6: $spacer-6,
91+
),
92+
$spacers-large,
9693
) !default;
9794

9895
// Em spacer variables
9996
$em-spacer-1: 0.0625em !default; // 1/16
100-
$em-spacer-2: 0.125em !default; // 1/8
101-
$em-spacer-3: 0.25em !default; // 1/4
102-
$em-spacer-4: 0.375em !default; // 3/8
103-
$em-spacer-5: 0.5em !default; // 1/2
104-
$em-spacer-6: 0.75em !default; // 3/4
97+
$em-spacer-2: 0.125em !default; // 1/8
98+
$em-spacer-3: 0.25em !default; // 1/4
99+
$em-spacer-4: 0.375em !default; // 3/8
100+
$em-spacer-5: 0.5em !default; // 1/2
101+
$em-spacer-6: 0.75em !default; // 3/4
105102

106103
// Size scale
107104
// Used for buttons, inputs, labels, avatars etc.
108105
$size: 16px !default;
109106

110107
$size-0: 0 !default;
111-
$size-1: $size !default; // 16px
112-
$size-2: $size-1 + 4px !default; // 20px
113-
$size-3: $size-2 + 4px !default; // 24px
114-
$size-4: $size-3 + 4px !default; // 28px
115-
$size-5: $size-4 + 4px !default; // 32px
116-
$size-6: $size-5 + 8px !default; // 40px
117-
$size-7: $size-6 + 8px !default; // 48px
118-
$size-8: $size-7 + 16px !default; // 64px
108+
$size-1: $size !default; // 16px
109+
$size-2: $size-1 + 4px !default; // 20px
110+
$size-3: $size-2 + 4px !default; // 24px
111+
$size-4: $size-3 + 4px !default; // 28px
112+
$size-5: $size-4 + 4px !default; // 32px
113+
$size-6: $size-5 + 8px !default; // 40px
114+
$size-7: $size-6 + 8px !default; // 48px
115+
$size-8: $size-7 + 16px !default; // 64px
119116

120117
// Fixed-width container variables
121118
$container-width: 980px !default;
122-
$grid-gutter: 10px !default;
119+
$grid-gutter: 10px !default;
123120

124121
// Breakpoint widths
125122
$width-xs: 0 !default;
@@ -143,8 +140,7 @@ $breakpoints: (
143140
sm: $width-sm,
144141
md: $width-md,
145142
lg: $width-lg,
146-
xl: $width-xl
147-
) !default;
143+
xl: $width-xl) !default;
148144

149145
// Viewport ranges
150146
// Soon to be provided by Primer Primitives directly
@@ -170,39 +166,65 @@ $responsive-positions: (
170166
relative,
171167
absolute,
172168
fixed,
173-
sticky
174-
) !default;
169+
sticky) !default;
175170

176171
$sidebar-width: (
177172
sm: 220px,
178173
md: 256px,
179-
lg: 296px
180-
) !default;
174+
lg: 296px) !default;
181175

182176
$sidebar-narrow-width: (
183177
md: 240px,
184-
lg: 256px
185-
) !default;
178+
lg: 256px) !default;
186179

187180
$sidebar-wide-width: (
188181
lg: 320px,
189-
xl: 336px
190-
) !default;
182+
xl: 336px) !default;
191183

192184
$gutter: (
193185
md: $spacer-3,
194186
lg: $spacer-4,
195-
xl: $spacer-5
196-
) !default;
187+
xl: $spacer-5) !default;
197188

198189
$gutter-condensed: (
199190
md: $spacer-3,
200191
lg: $spacer-3,
201-
xl: $spacer-4
202-
) !default;
192+
xl: $spacer-4) !default;
203193

204194
$gutter-spacious: (
205195
md: $spacer-4,
206196
lg: $spacer-5,
207-
xl: $spacer-6
197+
xl: $spacer-6) !default;
198+
199+
// rem unit support
200+
201+
$spacer-map-rem: (
202+
0: 0,
203+
1: var(--base-size-4, 4px),
204+
2: var(--base-size-8, 8px),
205+
3: var(--base-size-16, 16px),
206+
4: var(--base-size-24, 24px),
207+
5: var(--base-size-32, 32px),
208+
6: var(--base-size-40, 40px),
209+
) !default;
210+
211+
$spacers-large-rem: (
212+
7: var(--base-size-48, 48px),
213+
8: var(--base-size-64, 64px),
214+
9: var(--base-size-80, 80px),
215+
10: var(--base-size-96, 96px),
216+
11: var(--base-size-112, 112px),
217+
12: var(--base-size-128, 128px),
218+
) !default;
219+
220+
$spacer-map-rem-extended: map-merge(
221+
(0: 0,
222+
1: var(--base-size-4, 4px),
223+
2: var(--base-size-8, 8px),
224+
3: var(--base-size-16, 16px),
225+
4: var(--base-size-24, 24px),
226+
5: var(--base-size-32, 32px),
227+
6: var(--base-size-40, 40px),
228+
),
229+
$spacers-large-rem,
208230
) !default;

‎src/utilities/margin.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
@each $breakpoint, $variant in $responsive-variants {
99
@include breakpoint($breakpoint) {
1010
// Loop through the spacer values
11-
@each $scale, $size in $spacer-map-extended {
12-
@if ($scale < length($spacer-map)) {
11+
@each $scale, $size in $spacer-map-rem-extended {
12+
@if ($scale < length($spacer-map-rem)) {
1313
/* Set a $size margin to all sides at $breakpoint */
1414
.m#{$variant}-#{$scale} { margin: $size !important; }
1515
}
@@ -19,7 +19,7 @@
1919
/* Set a $size margin on the bottom at $breakpoint */
2020
.mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
2121

22-
@if ($scale < length($spacer-map)) {
22+
@if ($scale < length($spacer-map-rem)) {
2323
/* Set a $size margin on the right at $breakpoint */
2424
.mr#{$variant}-#{$scale} { margin-right: $size !important; }
2525
/* Set a $size margin on the left at $breakpoint */
@@ -28,19 +28,19 @@
2828

2929
@if ($size != 0) {
3030
/* Set a negative $size margin on top at $breakpoint */
31-
.mt#{$variant}-n#{$scale} { margin-top: -$size !important; }
31+
.mt#{$variant}-n#{$scale} { margin-top: calc(-1 * $size) !important; }
3232
/* Set a negative $size margin on the bottom at $breakpoint */
33-
.mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
33+
.mb#{$variant}-n#{$scale} { margin-bottom: calc(-1 * $size) !important; }
3434

35-
@if ($scale < length($spacer-map)) {
35+
@if ($scale < length($spacer-map-rem)) {
3636
/* Set a negative $size margin on the right at $breakpoint */
37-
.mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
37+
.mr#{$variant}-n#{$scale} { margin-right : calc(-1 * $size) !important; }
3838
/* Set a negative $size margin on the left at $breakpoint */
39-
.ml#{$variant}-n#{$scale} { margin-left : -$size !important; }
39+
.ml#{$variant}-n#{$scale} { margin-left : calc(-1 * $size) !important; }
4040
}
4141
}
4242

43-
@if ($scale < length($spacer-map)) {
43+
@if ($scale < length($spacer-map-rem)) {
4444
/* Set a $size margin on the left & right at $breakpoint */
4545
.mx#{$variant}-#{$scale} {
4646
margin-right: $size !important;

0 commit comments

Comments
 (0)