Skip to content

Commit 7d00fab

Browse files
tobiasahlintobiasahlin
committed
Merge branch 'main' into tobiasahlin/marketing-new-typescale
2 parents 5e4f54b + c1ed343 commit 7d00fab

File tree

20 files changed

+252
-242
lines changed

20 files changed

+252
-242
lines changed

‎.changeset/wild-bottles-tap.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": major
3+
---
4+
5+
Merge overlapping marketing spacing utilities into primer core

‎deprecations.js‎

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,41 @@ const versionDeprecations = {
1313
],
1414
message: `This selector is deprecated, please refer to the Marketing Typography documentation.`
1515
},
16+
{
17+
selectors: [
18+
'.p-7',
19+
'.p-8',
20+
'.p-9',
21+
'.p-10',
22+
'.p-11',
23+
'.p-12',
24+
'.p-sm-7',
25+
'.p-sm-8',
26+
'.p-sm-9',
27+
'.p-sm-10',
28+
'.p-sm-11',
29+
'.p-sm-12',
30+
'.p-md-7',
31+
'.p-md-8',
32+
'.p-md-9',
33+
'.p-md-10',
34+
'.p-md-11',
35+
'.p-md-12',
36+
'.p-lg-7',
37+
'.p-lg-8',
38+
'.p-lg-9',
39+
'.p-lg-10',
40+
'.p-lg-11',
41+
'.p-lg-12',
42+
'.p-xl-7',
43+
'.p-xl-8',
44+
'.p-xl-9',
45+
'.p-xl-10',
46+
'.p-xl-11',
47+
'.p-xl-12'
48+
],
49+
message: `This selector is deprecated, please use pt-X, pr-X, pb-X, and pl-X to set paddings on all sides above spacing level 6.`
50+
},
1651
{
1752
selectors: [
1853
'.top-n0',
@@ -26,9 +61,19 @@ const versionDeprecations = {
2661
'.top-lg-n0',
2762
'.right-lg-n0',
2863
'.bottom-lg-n0',
29-
'.left-lg-n0'
64+
'.left-lg-n0',
65+
'.mt-n0',
66+
'.mb-n0',
67+
'.mt-sm-n0',
68+
'.mb-sm-n0',
69+
'.mt-md-n0',
70+
'.mb-md-n0',
71+
'.mt-lg-n0',
72+
'.mb-lg-n0',
73+
'.mt-xl-n0',
74+
'.mb-xl-n0'
3075
],
31-
message: `This selector is deprecated, please use a non-negative selector to set the value to 0 (e.g. top-md-0)".`
76+
message: `This selector is deprecated, please use a non-negative selector to set the value to 0 (e.g. top-md-0).`
3277
},
3378
{
3479
selectors: ['.bg-shade-gradient'],

‎docs/content/support/marketing-variables.md‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎docs/content/support/spacing.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,20 @@ The spacing scale is a **base-8** scale. We chose a base-8 scale because eight i
2424

2525
These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](/utilities/margin) and [padding](/utilities/padding) utilities.
2626

27-
See [primer-marketing-support](/support/marketing-variables) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](/utilities/marketing-margin) and [padding](/utilities/marketing-padding).
27+
### Extended spacing scale
28+
29+
These are primarily useful for achieving bigger vertical spacing between sections. This scale first steps up with `8px` for spacer 7, then steps in increments of `16px` from spacer 8 up to 12.
30+
31+
| Variable | Scale | Value |
32+
| ------------ |-------|-------|
33+
| `$spacer-7` | 7 | 48px |
34+
| `$spacer-8` | 8 | 64px |
35+
| `$spacer-9` | 9 | 80px |
36+
| `$spacer-10` | 10 | 96px |
37+
| `$spacer-11` | 11 | 112px |
38+
| `$spacer-12` | 12 | 128px |
39+
40+
The extended spacing scale is used for [margin](/utilities/margin) and [padding](/utilities/padding) utilities along the Y-axis, as well as for single side spacing utilities (top, right, bottom, left).
2841

2942
## Em-based spacing
3043

‎docs/content/utilities/margin.md‎

Lines changed: 68 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,43 +9,47 @@ bundle: utilities
99
Margin utilities are based on a global [spacing scale](/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
1010

1111

12-
1312
## Naming convention
1413

1514
Since margin utilities have many variations and will be used in many places, we use a shorthand naming convention to help keep class names succinct.
1615

1716

1817
| Shorthand | Description |
1918
| --- | --- |
20-
| m | margin |
21-
| t | top |
22-
| r | right |
23-
| b | bottom |
24-
| l | left |
25-
| x | horizontal, left & right |
26-
| y | vertical, top & bottom |
27-
| 0 | 0 |
28-
| 1 | 4px |
29-
| 2 | 8px |
30-
| 3 | 16px |
31-
| 4 | 24px |
32-
| 5 | 32px |
33-
| 6 | 40px |
34-
19+
| m | margin |
20+
| t | top |
21+
| r | right |
22+
| b | bottom |
23+
| l | left |
24+
| x | horizontal, left & right |
25+
| y | vertical, top & bottom |
26+
| 0 | 0 |
27+
| 1 | 4px |
28+
| 2 | 8px |
29+
| 3 | 16px |
30+
| 4 | 24px |
31+
| 5 | 32px |
32+
| 6 | 40px |
33+
| 7 | 48px |
34+
| 8 | 64px |
35+
| 9 | 80px |
36+
| 10 | 96px |
37+
| 11 | 112px |
38+
| 12 | 128px |
3539

3640
## Uniform margins
3741

3842
Use uniform spacing utilities to apply equal margin to all sides of an element. These utilities can change or override default margins, and can be used with a spacing scale from 0-6.
3943

4044
```html live
4145
<div class="d-flex flex-items-baseline flex-justify-around">
42-
<div class="bg-yellow"><div class="m-0 p-1 bg-gray">.m-0</div></div>
43-
<div class="bg-yellow"><div class="m-1 p-1 bg-gray">.m-1</div></div>
44-
<div class="bg-yellow"><div class="m-2 p-1 bg-gray">.m-2</div></div>
45-
<div class="bg-yellow"><div class="m-3 p-1 bg-gray">.m-3</div></div>
46-
<div class="bg-yellow"><div class="m-4 p-1 bg-gray">.m-4</div></div>
47-
<div class="bg-yellow"><div class="m-5 p-1 bg-gray">.m-5</div></div>
48-
<div class="bg-yellow"><div class="m-6 p-1 bg-gray">.m-6</div></div>
46+
<div class="bg-yellow"><div class="m-0 p-1 color-bg-secondary">.m-0</div></div>
47+
<div class="bg-yellow"><div class="m-1 p-1 color-bg-secondary">.m-1</div></div>
48+
<div class="bg-yellow"><div class="m-2 p-1 color-bg-secondary">.m-2</div></div>
49+
<div class="bg-yellow"><div class="m-3 p-1 color-bg-secondary">.m-3</div></div>
50+
<div class="bg-yellow"><div class="m-4 p-1 color-bg-secondary">.m-4</div></div>
51+
<div class="bg-yellow"><div class="m-5 p-1 color-bg-secondary">.m-5</div></div>
52+
<div class="bg-yellow"><div class="m-6 p-1 color-bg-secondary">.m-6</div></div>
4953
</div>
5054
```
5155

@@ -55,31 +59,44 @@ Use directional utilities to apply margin to an individual side, or the X and Y
5559

5660
```html live
5761
<div class="d-flex flex-items-baseline flex-justify-around">
58-
<div class="bg-yellow"><div class="mt-3 p-1 bg-gray">.mt-3</div></div>
59-
<div class="bg-yellow"><div class="mr-3 p-1 bg-gray">.mr-3</div></div>
60-
<div class="bg-yellow"><div class="mb-3 p-1 bg-gray">.mb-3</div></div>
61-
<div class="bg-yellow"><div class="ml-3 p-1 bg-gray">.ml-3</div></div>
62-
<div class="bg-yellow"><div class="mx-3 p-1 bg-gray">.mx-3</div></div>
63-
<div class="bg-yellow"><div class="my-3 p-1 bg-gray">.my-3</div></div>
62+
<div class="bg-yellow"><div class="mt-3 p-1 color-bg-secondary">.mt-3</div></div>
63+
<div class="bg-yellow"><div class="mr-3 p-1 color-bg-secondary">.mr-3</div></div>
64+
<div class="bg-yellow"><div class="mb-3 p-1 color-bg-secondary">.mb-3</div></div>
65+
<div class="bg-yellow"><div class="ml-3 p-1 color-bg-secondary">.ml-3</div></div>
66+
<div class="bg-yellow"><div class="mx-3 p-1 color-bg-secondary">.mx-3</div></div>
67+
<div class="bg-yellow"><div class="my-3 p-1 color-bg-secondary">.my-3</div></div>
6468
</div>
6569
```
6670

71+
## Extended vertical margins
72+
73+
The extended scale starts from spacer `7` up to `12`. **Note**: Only the y-axis (`mt`, `mb` and `my`) and its responsive variants are supported.
74+
75+
```html live
76+
<div class="bg-yellow d-inline-block"><div class="mt-7 p-1 color-bg-secondary">.mb-7</div></div>
77+
<div class="bg-yellow d-inline-block"><div class="mt-8 p-1 color-bg-secondary">.mb-8</div></div>
78+
<div class="bg-yellow d-inline-block"><div class="mt-9 p-1 color-bg-secondary">.mb-9</div></div>
79+
<div class="bg-yellow d-inline-block"><div class="mt-10 p-1 color-bg-secondary">.mb-10</div></div>
80+
<div class="bg-yellow d-inline-block"><div class="mt-11 p-1 color-bg-secondary">.mb-11</div></div>
81+
<div class="bg-yellow d-inline-block"><div class="mt-12 p-1 color-bg-secondary">.mb-12</div></div>
82+
```
83+
6784
## Center elements
6885

6986
Use `mx-auto`to center block elements with a set width.
7087

7188
```html live
7289
<div class="bg-yellow">
73-
<div class="mx-auto bg-gray text-center" style="max-width: 500px;">.mx-auto</div>
90+
<div class="mx-auto color-bg-secondary text-center" style="max-width: 500px;">.mx-auto</div>
7491
</div>
7592
```
7693

7794
## Reset margins
7895
Reset margins built into typography elements or other components with `m-0`, `mt-0`, `mr-0`, `mb-0`, `ml-0`, `mx-0`, and `my-0`.
7996

8097
```html live
81-
<div class="bg-yellow border">
82-
<p class="mb-0 bg-gray p-1">No bottom margin on this paragraph.</p>
98+
<div class="color-bg-warning border">
99+
<p class="mb-0 color-bg-secondary p-1">No bottom margin on this paragraph.</p>
83100
</div>
84101
```
85102

@@ -88,23 +105,37 @@ Reset margins built into typography elements or other components with `m-0`, `mt
88105
All margin utilities can be adjusted per [breakpoint](/objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
89106

90107
```html live
91-
<div class="bg-yellow d-inline-block">
92-
<div class="mx-sm-2 mx-md-4 bg-gray p-1">
108+
<div class="color-bg-warning d-inline-block">
109+
<div class="mx-sm-2 mx-md-4 color-bg-secondary p-1">
93110
.mx-sm-2 .mx-md-4
94111
</div>
95112
</div>
96113
```
97114

98115
## Negative margins
99116

100-
You can add negative margins to the top, right, bottom, or left of an item by adding a negative margin utility. The formula for this is: `m[direction]-n[spacer]`. This also works responsively, with the following formula: `m[direction]-[breakpoint]-n[spacer]`.
117+
You can add negative margins to the top, right, bottom, or left of an item by adding a negative margin utility. The formula for this is: `m[direction]-n[spacer]`, where `spacer` runs from `1` to `6`. This also works responsively, with the following formula: `m[direction]-[breakpoint]-n[spacer]`.
101118

102119
```html live
103120
<div class="d-flex flex-justify-center">
104-
<div class="bg-yellow">
105-
<div class="m-3 ml-n4 ml-md-n6 border-left border-red bg-gray p-2">
121+
<div class="color-bg-warning">
122+
<div class="m-3 ml-n4 ml-md-n6 border-left border-red color-bg-secondary p-2">
106123
.m-3 .ml-n4 .ml-md-n6
107124
</div>
108125
</div>
109126
</div>
110127
```
128+
129+
## Extended negative margins
130+
131+
You can use the extended spacing scale for `top` and `bottom` margins, ranging from `1` to `12`.
132+
133+
```html live
134+
<div class="d-flex flex-justify-center">
135+
<div class="py-6 px-3 color-bg-warning">
136+
<div class="mt-n8 border-left border-red color-bg-tertiary p-2">
137+
.mt-n8
138+
</div>
139+
</div>
140+
</div>
141+
```

‎docs/content/utilities/marketing-layout.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ In an effort to reduce the size of our CSS, responsive breakpoints are only supp
2929

3030
## Negative offset columns
3131

32-
Using column offset classes can pull a div over X number of columns to the left. Negative offsets are available in [spacings from 1](../support/spacing/#spacing-scale) [to 7](../support/marketing-variables/).
32+
Using column offset classes can pull a div over X number of columns to the left. Negative offsets are available in [spacings from 1](../support/spacing/#spacing-scale) [to 7](../support/spacing/#extended-spacing-scale).
3333

3434
```html live
3535
<div class="mx-auto border" style="width: 300px">

‎docs/content/utilities/marketing-margin.md‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎docs/content/utilities/marketing-padding.md‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎docs/content/utilities/padding.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,12 @@ Since padding utilities have many variations and will be used in many places, we
3030
| 4 | 24px |
3131
| 5 | 32px |
3232
| 6 | 40px |
33+
| 7 | 48px |
34+
| 8 | 64px |
35+
| 9 | 80px |
36+
| 10 | 96px |
37+
| 11 | 112px |
38+
| 12 | 128px |
3339

3440
_**Note:** The blue in the examples below represents the element, and the green represents the padding._
3541

@@ -60,6 +66,20 @@ Use directional utilities to apply padding to an individual side, or the X and Y
6066
<div class="px-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.px-3</div></div>
6167
```
6268

69+
## Extended directional padding
70+
71+
The extended directional padding scale starts from spacer `7` and goes up to `12`. All directions and their responsive variants are supported, except for `px`.
72+
73+
```html live
74+
<div class="pt-7 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-7</div></div>
75+
<div class="pt-8 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-8</div></div>
76+
<div class="pt-9 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-9</div></div>
77+
<div class="pt-10 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-10</div></div>
78+
<div class="pt-11 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-11</div></div>
79+
<div class="pt-12 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-12</div></div>
80+
```
81+
82+
6383
## Responsive padding
6484

6585
All padding utilities can be adjusted per [breakpoint](/support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.

‎docs/src/@primer/gatsby-theme-doctocat/nav.yml‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@
1616
url: /support/spacing
1717
- title: Typography
1818
url: /support/typography
19-
- title: Marketing support
20-
url: /support/marketing-variables
2119
- title: Variables
2220
url: /support/variables
2321
- title: Utilities
@@ -41,14 +39,10 @@
4139
url: /utilities/marketing-layout
4240
- title: Margin
4341
url: /utilities/margin
44-
- title: Marketing margin
45-
url: /utilities/marketing-margin
4642
- title: Marketing filters
4743
url: /utilities/marketing-filters
4844
- title: Padding
4945
url: /utilities/padding
50-
- title: Marketing padding
51-
url: /utilities/marketing-padding
5246
- title: Typography
5347
url: /utilities/typography
5448
- title: Marketing typography

0 commit comments

Comments
 (0)