Skip to content

Refactor spacing to use CSS custom properties (#982) #1114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
stephaniehobson merged 2 commits into from
Jan 23, 2026
Merged

Refactor spacing to use CSS custom properties (#982) #1114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f566a57
Refactor spacing to use CSS custom properties (#982)
stephaniehobson Jan 21, 2026
50a11e1
review fixes
stephaniehobson Jan 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .stylelintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
"ignoreShorthands": [
"grid-area",
"grid-column",
"grid-gap",
"grid-row",
"grid-template",
"inset"
Expand Down
22 changes: 22 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,25 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust
* Added status color variables (`--theme-color-success-*`, `--theme-color-error-*`, `--theme-color-warning-*`, `--theme-color-info-*`)
* Removed Sass color variables from `_themes-sass.scss` (use CSS variables instead)

## Section Heading Component

* **component:** (breaking) Updated spacing around Section Heading component. Review your usage to ensure the new spacing works with your layout.
* **component:** Added `mzp-t-section-heading-nospace` theme class to remove padding from Section Heading.

## Card Component

* **component:** (breaking) Renamed `mzp-c-card-extra-small` to `mzp-c-card-small`
* **component:** (breaking) Removed `mzp-c-card-medium` class (medium is now the default)
* Card size modifiers now only affect typography, not card width
* Card sizes are now:
* Small: `mzp-c-card-small` (smaller text)
* Medium: The default, no modifier class
* Large: `mzp-c-card-large` (larger text)
* Image size recommendations are now based on column layout rather than card size:
* 4-column layout: 450px (low-res), 900px (high-res)
* 3-column layout: 600px (low-res), 1200px (high-res)
* 2-column layout: 930px (low-res), 1860px (high-res)

## Migration Tips

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.
Expand Down Expand Up @@ -115,6 +134,9 @@ See the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for
* `forms.$(field-border-color|field-border|field-focus-ring)(-*)` → `var(--theme-$1$2)`
* `forms.$button-border-color-focus` → `var(--theme-button-border-color-focus)`
* You can remove `@supports (--css: variables)` blocks that only contain color declarations, as CSS custom properties are now required.
* Card component class renames:
* `mzp-c-card-extra-small` → `mzp-c-card-small`
* `mzp-c-card-medium` → remove (medium is now the default, no class needed)

# 22.0.0

Expand Down
6 changes: 1 addition & 5 deletions assets/sass/protocol/base/elements/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,5 @@ code {
hr {
border: 0 solid $color-marketing-gray-20;
border-top-width: 4px;
margin: $layout-md 0;

@media #{$mq-lg} {
margin: $layout-lg 0;
}
margin: var(--theme-spacing-between-block) 0;
}
22 changes: 1 addition & 21 deletions assets/sass/protocol/base/elements/_containers.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,9 @@
margin: 0 auto;
max-width: $content-max;
min-width: $content-xs - ($layout-xs * 2);
padding: $v-grid-xs $h-grid-xs;
padding: var(--theme-spacing-between-block) var(--theme-spacing-between-inline);
position: relative;

@media #{$mq-md} {
Copy link
Collaborator

@maureenlholland maureenlholland Jan 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 🧹 🧹

padding: $v-grid-md $h-grid-md;
}

@media #{$mq-xl} {
padding: $v-grid-xl $h-grid-xl;
}

@supports (--css: variable) {
padding: var(--v-grid-xs) var(--h-grid-xs);

@media #{$mq-md} {
padding: var(--v-grid-md) var(--h-grid-md);
}

@media #{$mq-xl} {
padding: var(--v-grid-xl) var(--h-grid-xl);
}
}

&.mzp-t-content-sm {
max-width: $content-sm;
}
Expand Down
8 changes: 2 additions & 6 deletions assets/sass/protocol/components/_breadcrumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,10 @@
.mzp-c-breadcrumb-list {
margin: 0 auto;
max-width: $content-max;
padding: 0 $h-grid-xs;
padding: 0 $layout-xs;
Copy link
Contributor Author

@stephaniehobson stephaniehobson Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❄️ 🤷‍♀️


@media #{$mq-md} {
padding: 0 $h-grid-md;
}

@media #{$mq-xl} {
padding: 0 $h-grid-xl;
padding: 0 var(--theme-spacing-between-inline);
}
}

Expand Down
48 changes: 16 additions & 32 deletions assets/sass/protocol/components/_callout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,49 +44,33 @@
}

@media #{$mq-md} {
@include clearfix;

.mzp-c-callout-title,
.mzp-c-callout-desc {
margin-bottom: 0;
}

.mzp-c-callout-title + .mzp-c-callout-desc {
margin-top: $spacing-sm;
.mzp-l-content {
display: grid;
column-gap: var(--theme-spacing-between-inline);
grid-template-columns: 2fr 1fr;
}

.mzp-c-callout-content {
@include bidi(((float, left, right),));
width: calc(66.6% - #{$spacing-lg});
width: auto;
align-items: center;
}

.mzp-c-callout-cta {
@include bidi(((float, right, left),));
align-items: center;
display: flex;
justify-content: flex-end;
margin: 0;
position: relative;
width: calc(33.3% - #{$spacing-lg});
width: auto;
}
}

@supports (display: grid) {
@media #{$mq-md} {
.mzp-l-content {
grid-column-gap: $spacing-xl;
display: grid;
grid-template-columns: 2fr 1fr;
}

.mzp-c-callout-content {
width: auto;
align-items: center;
}
.mzp-c-callout-title,
.mzp-c-callout-desc {
margin-bottom: 0;
}

.mzp-c-callout-cta {
display: flex;
align-items: center;
justify-content: flex-end;
width: auto;
}
.mzp-c-callout-title + .mzp-c-callout-desc {
margin-top: $spacing-sm;
}
}
}
25 changes: 2 additions & 23 deletions assets/sass/protocol/components/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,10 +120,6 @@
@include text-body-xs;
}

@media #{$mq-sm} {
max-width: $content-sm;
}

@media #{$mq-md} {
margin-bottom: $spacing-xl;
}
Expand Down Expand Up @@ -157,15 +153,6 @@
}
}

// * -------------------------------------------------------------------------- */
// Medium sized card

.mzp-c-card.mzp-c-card-medium {
@media #{$mq-sm} {
max-width: $content-md;
}
}

// * -------------------------------------------------------------------------- */
// Card with larger title

Expand All @@ -177,16 +164,12 @@
.mzp-c-card-desc {
@include text-body-lg;
}

@media #{$mq-sm} {
max-width: $content-lg;
}
}

// * -------------------------------------------------------------------------- */
// Card with extra small title and text
// Card with small title and text

.mzp-c-card.mzp-c-card-extra-small {
.mzp-c-card.mzp-c-card-small {
.mzp-c-card-tag,
.mzp-c-card-cta {
@include text-body-xs;
Expand All @@ -204,8 +187,4 @@
border-radius: $border-radius-xs;
height: 100%;
}

@media #{$mq-lg} {
max-width: $content-xs;
}
}
6 changes: 1 addition & 5 deletions assets/sass/protocol/components/_navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,7 @@
position: relative;

@media #{$mq-md} {
padding: 0 $layout-lg;
}

@media #{$mq-lg} {
padding: 0 $layout-xl;
padding: 0 var(--theme-spacing-between-inline);
}
}

Expand Down
66 changes: 7 additions & 59 deletions assets/sass/protocol/components/_newsletter-form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,72 +68,20 @@
}

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

.mzp-c-newsletter-image {
@include grid-half;
float: left;
grid-column: 1;
}

.mzp-c-newsletter-form,
.mzp-c-newsletter-thanks {
@include grid-half;
float: right;
grid-column: 2;
padding-top: $layout-md;
}

@supports (display: grid) {
display: grid;
grid-template-columns: repeat(2, 1fr);

&::after { // Remove the clearfix
display: none;
}

.mzp-c-newsletter-image,
.mzp-c-newsletter-form,
.mzp-c-newsletter-thanks {
width: auto;
float: none;
}

.mzp-c-newsletter-image {
grid-column: 1;
}

.mzp-c-newsletter-form,
.mzp-c-newsletter-thanks {
grid-column: 2;
}
}
}

@media #{$mq-lg} {
padding: $h-grid-lg $layout-2xl;

.mzp-c-newsletter-form,
.mzp-c-newsletter-thanks {
padding-top: $layout-lg;
}
}

@media #{$mq-xl} {
padding: $h-grid-xl $layout-2xl;
}

@supports (--css: variables) {
@media #{$mq-md} {
padding: var(--h-grid-md) var(--v-grid-lg);
}

@media #{$mq-lg} {
padding: var(--h-grid-lg) $layout-2xl;
}

@media #{$mq-xl} {
padding: var(--h-grid-xl) $layout-2xl;
}
}
}
25 changes: 5 additions & 20 deletions assets/sass/protocol/components/_section-heading.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,11 @@
// section heading

.mzp-c-section-heading {
@include text-heading-md;
margin: 0 auto;
padding: $h-grid-xs $layout-xs;
padding: var(--theme-spacing-between-block) var(--theme-spacing-between-inline);
max-width: $content-lg;
text-align: center;

@media #{$mq-md} {
padding: $h-grid-md $v-grid-md;
}

@media #{$mq-xl} {
padding: $h-grid-xl $v-grid-xl;
}
@include text-heading-md;

// rely on l-content for padding if nested
.mzp-l-content & {
Expand All @@ -32,15 +24,8 @@
}
}

@supports (--css: variables) {
padding: var(--h-grid-xs) $layout-xs;

@media #{$mq-md} {
padding: var(--h-grid-md) var(--v-grid-md);
}

@media #{$mq-xl} {
padding: var(--h-grid-xl) var(--v-grid-xl);
}
&.mzp-t-section-heading-nospace {
padding-top: 0;
padding-bottom: 0;
}
}
Loading