Skip to content

Commit fcf9016

Browse files
stephaniehobsonclaude
stephaniehobson
and
claude
authored
Refactor spacing to use CSS custom properties (#982) (#1114)
* Refactor spacing to use CSS custom properties (#982) Refactor spacing system to use CSS custom properties. This is the third PR in a refactor of how we use CSS variables (#982), following the typography (#1107) and color refactors. Introduces --theme-spacing-between-block and --theme-spacing-between-inline for responsive layout spacing while retaining Sass $spacing-* variables for component-internal spacing. Modernization: Default to CSS vars for layout spacing (block and inline) Responsive breakpoints defined in root/_spacing.scss Updated components to use new spacing vars: containers, card, callout, split, breadcrumb, navigation, newsletter-form, section-heading, card-layout, multi-column Reorganization: Removed includes/_themes-sass.scss (no longer needed) Removed bidi-grid-spacing() mixin Removed deprecated grid-gap from stylelint ignored shorthands Simplification: Simplified split component (removed pop and overflow options in separate PR) Simplified card-layout and multi-column templates Reduced newsletter-form complexity Documentation: Added section-heading mzp-t-section-heading-nospace theme class Added spacing migration guide to docs/02-usage/migration.md Updated CHANGELOG with spacing system changes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * review fixes --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 531a628 commit fcf9016

File tree

29 files changed

+273
-566
lines changed

29 files changed

+273
-566
lines changed

‎.stylelintrc.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
"ignoreShorthands": [
2323
"grid-area",
2424
"grid-column",
25-
"grid-gap",
2625
"grid-row",
2726
"grid-template",
2827
"inset"

‎CHANGELOG.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,25 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust
5050
* Added status color variables (`--theme-color-success-*`, `--theme-color-error-*`, `--theme-color-warning-*`, `--theme-color-info-*`)
5151
* Removed Sass color variables from `_themes-sass.scss` (use CSS variables instead)
5252

53+
## Section Heading Component
54+
55+
* **component:** (breaking) Updated spacing around Section Heading component. Review your usage to ensure the new spacing works with your layout.
56+
* **component:** Added `mzp-t-section-heading-nospace` theme class to remove padding from Section Heading.
57+
58+
## Card Component
59+
60+
* **component:** (breaking) Renamed `mzp-c-card-extra-small` to `mzp-c-card-small`
61+
* **component:** (breaking) Removed `mzp-c-card-medium` class (medium is now the default)
62+
* Card size modifiers now only affect typography, not card width
63+
* Card sizes are now:
64+
* Small: `mzp-c-card-small` (smaller text)
65+
* Medium: The default, no modifier class
66+
* Large: `mzp-c-card-large` (larger text)
67+
* Image size recommendations are now based on column layout rather than card size:
68+
* 4-column layout: 450px (low-res), 900px (high-res)
69+
* 3-column layout: 600px (low-res), 1200px (high-res)
70+
* 2-column layout: 930px (low-res), 1860px (high-res)
71+
5372
## Migration Tips
5473

5574
See the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for automated scripts (VS Code find/replace and terminal commands) to help with these changes.
@@ -115,6 +134,9 @@ See the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for
115134
* `forms.$(field-border-color|field-border|field-focus-ring)(-*)` → `var(--theme-$1$2)`
116135
* `forms.$button-border-color-focus` → `var(--theme-button-border-color-focus)`
117136
* You can remove `@supports (--css: variables)` blocks that only contain color declarations, as CSS custom properties are now required.
137+
* Card component class renames:
138+
* `mzp-c-card-extra-small` → `mzp-c-card-small`
139+
* `mzp-c-card-medium` → remove (medium is now the default, no class needed)
118140

119141
# 22.0.0
120142

‎assets/sass/protocol/base/elements/_common.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,5 @@ code {
2121
hr {
2222
border: 0 solid $color-marketing-gray-20;
2323
border-top-width: 4px;
24-
margin: $layout-md 0;
25-
26-
@media #{$mq-lg} {
27-
margin: $layout-lg 0;
28-
}
24+
margin: var(--theme-spacing-between-block) 0;
2925
}

‎assets/sass/protocol/base/elements/_containers.scss‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,9 @@
1010
margin: 0 auto;
1111
max-width: $content-max;
1212
min-width: $content-xs - ($layout-xs * 2);
13-
padding: $v-grid-xs $h-grid-xs;
13+
padding: var(--theme-spacing-between-block) var(--theme-spacing-between-inline);
1414
position: relative;
1515

16-
@media #{$mq-md} {
17-
padding: $v-grid-md $h-grid-md;
18-
}
19-
20-
@media #{$mq-xl} {
21-
padding: $v-grid-xl $h-grid-xl;
22-
}
23-
24-
@supports (--css: variable) {
25-
padding: var(--v-grid-xs) var(--h-grid-xs);
26-
27-
@media #{$mq-md} {
28-
padding: var(--v-grid-md) var(--h-grid-md);
29-
}
30-
31-
@media #{$mq-xl} {
32-
padding: var(--v-grid-xl) var(--h-grid-xl);
33-
}
34-
}
35-
3616
&.mzp-t-content-sm {
3717
max-width: $content-sm;
3818
}

‎assets/sass/protocol/components/_breadcrumb.scss‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,10 @@
1111
.mzp-c-breadcrumb-list {
1212
margin: 0 auto;
1313
max-width: $content-max;
14-
padding: 0 $h-grid-xs;
14+
padding: 0 $layout-xs;
1515

1616
@media #{$mq-md} {
17-
padding: 0 $h-grid-md;
18-
}
19-
20-
@media #{$mq-xl} {
21-
padding: 0 $h-grid-xl;
17+
padding: 0 var(--theme-spacing-between-inline);
2218
}
2319
}
2420

‎assets/sass/protocol/components/_callout.scss‎

Lines changed: 16 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -44,49 +44,33 @@
4444
}
4545

4646
@media #{$mq-md} {
47-
@include clearfix;
48-
49-
.mzp-c-callout-title,
50-
.mzp-c-callout-desc {
51-
margin-bottom: 0;
52-
}
53-
54-
.mzp-c-callout-title + .mzp-c-callout-desc {
55-
margin-top: $spacing-sm;
47+
.mzp-l-content {
48+
display: grid;
49+
column-gap: var(--theme-spacing-between-inline);
50+
grid-template-columns: 2fr 1fr;
5651
}
5752

5853
.mzp-c-callout-content {
59-
@include bidi(((float, left, right),));
60-
width: calc(66.6% - #{$spacing-lg});
54+
width: auto;
55+
align-items: center;
6156
}
6257

6358
.mzp-c-callout-cta {
64-
@include bidi(((float, right, left),));
59+
align-items: center;
60+
display: flex;
61+
justify-content: flex-end;
6562
margin: 0;
6663
position: relative;
67-
width: calc(33.3% - #{$spacing-lg});
64+
width: auto;
6865
}
69-
}
70-
71-
@supports (display: grid) {
72-
@media #{$mq-md} {
73-
.mzp-l-content {
74-
grid-column-gap: $spacing-xl;
75-
display: grid;
76-
grid-template-columns: 2fr 1fr;
77-
}
7866

79-
.mzp-c-callout-content {
80-
width: auto;
81-
align-items: center;
82-
}
67+
.mzp-c-callout-title,
68+
.mzp-c-callout-desc {
69+
margin-bottom: 0;
70+
}
8371

84-
.mzp-c-callout-cta {
85-
display: flex;
86-
align-items: center;
87-
justify-content: flex-end;
88-
width: auto;
89-
}
72+
.mzp-c-callout-title + .mzp-c-callout-desc {
73+
margin-top: $spacing-sm;
9074
}
9175
}
9276
}

‎assets/sass/protocol/components/_card.scss‎

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -120,10 +120,6 @@
120120
@include text-body-xs;
121121
}
122122

123-
@media #{$mq-sm} {
124-
max-width: $content-sm;
125-
}
126-
127123
@media #{$mq-md} {
128124
margin-bottom: $spacing-xl;
129125
}
@@ -157,15 +153,6 @@
157153
}
158154
}
159155

160-
// * -------------------------------------------------------------------------- */
161-
// Medium sized card
162-
163-
.mzp-c-card.mzp-c-card-medium {
164-
@media #{$mq-sm} {
165-
max-width: $content-md;
166-
}
167-
}
168-
169156
// * -------------------------------------------------------------------------- */
170157
// Card with larger title
171158

@@ -177,16 +164,12 @@
177164
.mzp-c-card-desc {
178165
@include text-body-lg;
179166
}
180-
181-
@media #{$mq-sm} {
182-
max-width: $content-lg;
183-
}
184167
}
185168

186169
// * -------------------------------------------------------------------------- */
187-
// Card with extra small title and text
170+
// Card with small title and text
188171

189-
.mzp-c-card.mzp-c-card-extra-small {
172+
.mzp-c-card.mzp-c-card-small {
190173
.mzp-c-card-tag,
191174
.mzp-c-card-cta {
192175
@include text-body-xs;
@@ -204,8 +187,4 @@
204187
border-radius: $border-radius-xs;
205188
height: 100%;
206189
}
207-
208-
@media #{$mq-lg} {
209-
max-width: $content-xs;
210-
}
211190
}

‎assets/sass/protocol/components/_navigation.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,7 @@
1717
position: relative;
1818

1919
@media #{$mq-md} {
20-
padding: 0 $layout-lg;
21-
}
22-
23-
@media #{$mq-lg} {
24-
padding: 0 $layout-xl;
20+
padding: 0 var(--theme-spacing-between-inline);
2521
}
2622
}
2723

‎assets/sass/protocol/components/_newsletter-form.scss‎

Lines changed: 7 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -68,72 +68,20 @@
6868
}
6969

7070
@media #{$mq-md} {
71-
@include clearfix;
72-
padding: $h-grid-md $v-grid-lg;
73-
max-width: none;
71+
display: grid;
72+
grid-template-columns: repeat(2, 1fr);
73+
column-gap: var(--theme-spacing-between-inline);
74+
max-width: $content-xl;
75+
padding: $layout-md;
7476

7577
.mzp-c-newsletter-image {
76-
@include grid-half;
77-
float: left;
78+
grid-column: 1;
7879
}
7980

8081
.mzp-c-newsletter-form,
8182
.mzp-c-newsletter-thanks {
82-
@include grid-half;
83-
float: right;
83+
grid-column: 2;
8484
padding-top: $layout-md;
8585
}
86-
87-
@supports (display: grid) {
88-
display: grid;
89-
grid-template-columns: repeat(2, 1fr);
90-
91-
&::after { // Remove the clearfix
92-
display: none;
93-
}
94-
95-
.mzp-c-newsletter-image,
96-
.mzp-c-newsletter-form,
97-
.mzp-c-newsletter-thanks {
98-
width: auto;
99-
float: none;
100-
}
101-
102-
.mzp-c-newsletter-image {
103-
grid-column: 1;
104-
}
105-
106-
.mzp-c-newsletter-form,
107-
.mzp-c-newsletter-thanks {
108-
grid-column: 2;
109-
}
110-
}
111-
}
112-
113-
@media #{$mq-lg} {
114-
padding: $h-grid-lg $layout-2xl;
115-
116-
.mzp-c-newsletter-form,
117-
.mzp-c-newsletter-thanks {
118-
padding-top: $layout-lg;
119-
}
120-
}
121-
122-
@media #{$mq-xl} {
123-
padding: $h-grid-xl $layout-2xl;
124-
}
125-
126-
@supports (--css: variables) {
127-
@media #{$mq-md} {
128-
padding: var(--h-grid-md) var(--v-grid-lg);
129-
}
130-
131-
@media #{$mq-lg} {
132-
padding: var(--h-grid-lg) $layout-2xl;
133-
}
134-
135-
@media #{$mq-xl} {
136-
padding: var(--h-grid-xl) $layout-2xl;
137-
}
13886
}
13987
}

‎assets/sass/protocol/components/_section-heading.scss‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,11 @@
88
// section heading
99

1010
.mzp-c-section-heading {
11-
@include text-heading-md;
1211
margin: 0 auto;
13-
padding: $h-grid-xs $layout-xs;
12+
padding: var(--theme-spacing-between-block) var(--theme-spacing-between-inline);
1413
max-width: $content-lg;
1514
text-align: center;
16-
17-
@media #{$mq-md} {
18-
padding: $h-grid-md $v-grid-md;
19-
}
20-
21-
@media #{$mq-xl} {
22-
padding: $h-grid-xl $v-grid-xl;
23-
}
15+
@include text-heading-md;
2416

2517
// rely on l-content for padding if nested
2618
.mzp-l-content & {
@@ -32,15 +24,8 @@
3224
}
3325
}
3426

35-
@supports (--css: variables) {
36-
padding: var(--h-grid-xs) $layout-xs;
37-
38-
@media #{$mq-md} {
39-
padding: var(--h-grid-md) var(--v-grid-md);
40-
}
41-
42-
@media #{$mq-xl} {
43-
padding: var(--h-grid-xl) var(--v-grid-xl);
44-
}
27+
&.mzp-t-section-heading-nospace {
28+
padding-top: 0;
29+
padding-bottom: 0;
4530
}
4631
}

0 commit comments

Comments
 (0)