mozilla / mozilla/protocol

Go all-in on CSS custom properties for themes, remove Sass variables

Open
#982 2 comments 3 reactions 1 assignee View on GitHub

@stephaniehobson is already working on this.

Since Mar 13, 2025.

Dominant language
SCSS
Stars
298
Forks
83
Avg merge
16h 48m
Merged PRs (30d)
1

Description

Much of the preliminary work we've done in bedrock for the new Mozilla branding has hinged on custom properties and eschewed Sass variables. And frankly it simplified SO MUCH. It makes theme-switching and color modes much easier to implement without worrying about Sass compile errors or importing things in the right order.

We semi-recently converted Protocol to use custom properties for theming but preserved the Sass variables as fallbacks for older browsers. But looking at support levels and browser usage stats, I've been thinking it's time to embrace the future of CSS and remove those legacy Sass variables (at least for all the theme-level properties; some things can/should remain as Sass variables and mixins).

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.