1983938 - Update usage of border-radius to use design token values

Status: RESOLVED FIXED

(Developer Infrastructure :: Lint and Formatting, task)

Description

[Jon Oliver]

A stylelint rule has been added to enforce usage of design tokens for border-radius properties (Bug 1979115). As part of that work, a rollout file (stylelint-rollouts.config.js) was implemented to ignore existing rule violations.

For this bug, we should update existing violations of the border-radius rule to use accepted design tokens. See existing border-radius design tokens:

--border-radius-circle: 9999px;
--border-radius-small: 4px;
--border-radius-medium: 8px;
--border-radius-large: 12px;

This work will also include adding new design tokens to capture missing values, for example:

--border-radius-xsmall: 2px;

Introducing border-radius-xsmall has already been discussed with and accepted by the Acorn team. However, additional tokens should be discussed/approved before introducing. Existing border-radius values that do not match an existing token value and do not warrant a new token (e.g. 3px, 5px, etc) should be normalized to match existing token values.

Steps to reproduce

1. In stylelint-rollouts.config.js, locate the rollout-use-border-radius-tokens and remove the associated files array
2. Run ./mach lint --linter stylelint ** to see the existing violations

Guidelines to fix

These guidelines will help streamline the review process for this fix:

• Due to the number of existing violations, the fix should be broken into multiple patches, grouped by appropriate review groups.
• Do not update stylelint-rollouts.config.js as part of each patch. Instead, follow up with patch that updates the rollouts config after all fixes have been made. This will prevent the frontend-codestyle-reviewers from needing to review and approve every single patch.

Comment 1

[Jon Oliver]

Attachment: Bug 1983938 - update devtools aboutdebugging to use border-radius design tokens errors r=#devtools-reviewers

Comment 2

[Jon Oliver]

Attachment: Bug 1983938 - update permanent exclusions for stylelint border-radius rule r=#frontend-codestyle-reviewers

• only devtools aboutdebugging can use design tokens currently
• webcompat interventions for extensions are intended to override existing styles, so should not enforce design token usage

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/b0fefbd3c2e0
https://hg.mozilla.org/integration/autoland/rev/4c7d37b3f6e7
update devtools aboutdebugging to use border-radius design tokens errors r=devtools-reviewers,jdescottes
https://github.com/mozilla-firefox/firefox/commit/9b6190b7cd57
https://hg.mozilla.org/integration/autoland/rev/b265072050a1
update permanent exclusions for stylelint border-radius rule r=frontend-codestyle-reviewers,Standard8

Comment 4

[amarc]

https://hg.mozilla.org/mozilla-central/rev/4c7d37b3f6e7
https://hg.mozilla.org/mozilla-central/rev/b265072050a1

Comment 5

[Jon Oliver]

Attachment: Bug 1983938 - update permanent stylelint exclusions for border-radius design tokens r=#frontend-codestyle-reviewers

Comment 6

[Jon Oliver]

Attachment: Bug 1983938 - update browser/themes css to use --border-radius-xsmall token r=#desktop-theme-reviewers

Comment 7

[Jon Oliver]

Attachment: Bug 1983938 - add inline ignore for aboutlogins use-border-radius-tokens false positives r=#credential-management-reviewers

Comment 8

[Jon Oliver]

Attachment: Bug 1983938 - update firefoxview to use --border-radius-xsmall token r=#fxview-reviewers

• updates 2px values to use --border-radius-xsmall token
• normalize 1px values to use closest border radius token (2px --border-radius-xsmall)

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/401ac74bd3d6
https://hg.mozilla.org/integration/autoland/rev/05b3965d2421
update browser/themes css to use --border-radius-xsmall token r=desktop-theme-reviewers,urlbar-reviewers,emilio,dao

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/daf6d6b62e71
https://hg.mozilla.org/integration/autoland/rev/36b33a4ae07a
update firefoxview to use --border-radius-xsmall token r=fxview-reviewers,desktop-theme-reviewers,dao

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/37ff7639a073
https://hg.mozilla.org/integration/autoland/rev/ac3c07979dad
Revert "Bug 1983938 - update browser/themes css to use --border-radius-xsmall token r=desktop-theme-reviewers,urlbar-reviewers,emilio,dao" for causing bc failures @ browser_parsable_css.js
https://github.com/mozilla-firefox/firefox/commit/e761f2459094
https://hg.mozilla.org/integration/autoland/rev/eddb6f3597dc
Revert "Bug 1983938 - update firefoxview to use --border-radius-xsmall token r=fxview-reviewers,desktop-theme-reviewers,dao" for causing bc failures @ browser_parsable_css.js

Comment 12

[Sandor Molnar[:smolnar]]

Backed out for causing bc failures @ browser_parsable_css.js

Backout link: https://hg.mozilla.org/integration/autoland/rev/ac3c07979dad66c3899b90b23fc8e3390857cca6
https://hg-edge.mozilla.org/integration/autoland/rev/eddb6f3597dc831c1166bd619cd4671edd03e55d

Push with failures

Failure log -> TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_parsable_css.js | Unused allowlist item: {"propName":"--border-radius-xsmall","isFromDevTools":false}

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/d90e2026faf3
https://hg.mozilla.org/integration/autoland/rev/49202e59b0ba
update browser/themes css to use --border-radius-xsmall token r=desktop-theme-reviewers,urlbar-reviewers,emilio,dao
https://github.com/mozilla-firefox/firefox/commit/aec8fda70325
https://hg.mozilla.org/integration/autoland/rev/f59fd63c3b15
update firefoxview to use --border-radius-xsmall token r=fxview-reviewers,desktop-theme-reviewers,dao

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/87e2171a56d2
https://hg.mozilla.org/integration/autoland/rev/0fe4c431eb9d
add inline ignore for aboutlogins use-border-radius-tokens false positives r=credential-management-reviewers,mtigley

Comment 15

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/49202e59b0ba
https://hg.mozilla.org/mozilla-central/rev/f59fd63c3b15
https://hg.mozilla.org/mozilla-central/rev/0fe4c431eb9d

Comment 16

[Jon Oliver]

Attachment: Bug 1983938 - fix border-radius linting errors in aboutwelcome r=#omc-reviewers

Comment 17

[Jon Oliver]

Attachment: Bug 1983938 - fix border-radius stylelint violations in toolkit/themes/shared r=#desktop-theme-reviewers

Comment 18

[Jon Oliver]

Attachment: Bug 1983938 - update design token usage in shared toolkit theme files r=#desktop-theme-reviewers

Comment 19

[Jon Oliver]

Attachment: Bug 1983938 - use border-radius tokens for toolkit/themes/shared about pages r=#desktop-theme-reviewers

Comment 20

[Jon Oliver]

Attachment: Bug 1983938 - fix border-radius stylelint violations for browser/themes/shared r=#desktop-theme-reviewers

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/1900bc2742d6
https://hg.mozilla.org/integration/autoland/rev/ceb6f7f974a3
use border-radius tokens for toolkit/themes/shared about pages r=desktop-theme-reviewers,emilio

Comment 22

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/e68a30ce5304
https://hg.mozilla.org/integration/autoland/rev/7d5d308b0319
fix border-radius stylelint violations in toolkit/themes/shared r=desktop-theme-reviewers,emilio

Comment 23

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/d02a08834fae
https://hg.mozilla.org/integration/autoland/rev/9495bd953b0c
update design token usage in shared toolkit theme files r=desktop-theme-reviewers,emilio

Comment 24

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/f7552f46c5d1
https://hg.mozilla.org/integration/autoland/rev/7b2a4c2c427d
fix border-radius linting errors in aboutwelcome r=omc-reviewers,emcminn,aminomancer

Comment 25

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/ceb6f7f974a3
https://hg.mozilla.org/mozilla-central/rev/7d5d308b0319
https://hg.mozilla.org/mozilla-central/rev/9495bd953b0c
https://hg.mozilla.org/mozilla-central/rev/7b2a4c2c427d

Comment 26

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/aed9b75e5d96
https://hg.mozilla.org/integration/autoland/rev/c3a3c2e8e9b7
fix border-radius stylelint violations for browser/themes/shared r=desktop-theme-reviewers,tabbrowser-reviewers,nsharpley,emilio

Comment 27

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/c3a3c2e8e9b7

Comment 28

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/e4a1f00ccbbc
https://hg.mozilla.org/integration/autoland/rev/4e521d2c71db
update permanent stylelint exclusions for border-radius design tokens r=frontend-codestyle-reviewers,Standard8

Comment 29

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/4e521d2c71db