1826829 - Update link styling to use design tokens

Status: RESOLVED FIXED

(Toolkit :: Themes, enhancement, P3)

Description

[Mark Striemer [:mstriemer]]

Bug 1806747 is adding design tokens files that could be used to define our link styling. Once that lands we should look to update our link styling to be backed by our design tokens.

This would likely affect common-shared.css [0] and global-shared.css [1]. It may perhaps make sense to combine some of these styles into something that could be loaded in both cases and supports handling the differences between the two at the token level.

[0] https://searchfox.org/mozilla-central/rev/3424c000a7ff304b2d1efb8561a924232f7f12fc/toolkit/themes/shared/in-content/common-shared.css#703
[1] https://searchfox.org/mozilla-central/rev/3424c000a7ff304b2d1efb8561a924232f7f12fc/toolkit/themes/shared/global-shared.css#144

Comment 1

[Mark Striemer [:mstriemer]]

Bug 1837458 has some related discussion around HCM styling, which should be incorporated here

Comment 2

[Hanna Jones [:hjones]]

Attachment: Bug 1826829 - update link styles to use tokens r=mstriemer,jules

Decided to save the work of creating link utility classes/shared styles for when we have a clearer sense of what that should look like. Instead I went down the path of trying to remove/replace all references to --in-content-link-color-* vars to see how that process goes.

Comment 3

[Hanna Jones [:hjones]]

Attachment: Bug 1826829 - remove --in-content-link-color-* references from login-item.css r=mstriemer,jules

Depends on D182254

Comment 4

[Hanna Jones [:hjones]]

Attachment: Bug 1826829 - remove --in-content-link-color-* reference from aboutSessionRestore.css r=mstriemer,jules

Depends on D182255

Comment 5

[Hanna Jones [:hjones]]

Attachment: Bug 1826829 - remove --in-content-link-color-* reference from preferences.css r=mstriemer,jules

Depends on D182256

Comment 6

[Hanna Jones [:hjones]]

Attachment: Bug 1826829 - remove --in-content-link-color-* references from aboutaddons.css r=mstriemer,jules

Depends on D182257

Comment 7

[Hanna Jones [:hjones]]

Attachment: Bug 1826829 - remove --in-content-link-color-* references from aboutwelcome CSS r=mstriemer,jules

I could be missing something here since I'm not super familiar with this code, but it seems like we pull in in-content/common.css in aboutwelcome.html so we should have access to the token values.

Depends on D182258

Comment 8

[Hanna Jones [:hjones]]

Attachment: Bug 1826829 - remove --in-content-link-color-* references from aboutPrivateBrowsing.css r=mstriemer,jules

Not sure how we feel about changing the token values to white for this specific use case. I'm down to try other approaches if setting token values from other stylesheets is something we always want to avoid.

Depends on D182259

Comment 9

[Hanna Jones [:hjones]]

Attachment: Bug 1826829 - remove --in-content-link-color-* variables from common-shared.css r=mstriemer,jules

Depends on D182260

Comment 10

[Hanna Jones [:hjones]]

Attachment: Bug 1826829 - remove --in-content-link-color-* reference from login-alert.css r=mstriemer

Depends on D182260

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f0db697e9a48
update link styles to use tokens r=mstriemer,jules,desktop-theme-reviewers,dao
https://hg.mozilla.org/integration/autoland/rev/662f91b6eb9c
remove --in-content-link-color-* references from login-item.css r=desktop-theme-reviewers,credential-management-reviewers,sgalich,dao
https://hg.mozilla.org/integration/autoland/rev/1616cebc8db0
remove --in-content-link-color-* reference from aboutSessionRestore.css r=mstriemer,desktop-theme-reviewers,dao
https://hg.mozilla.org/integration/autoland/rev/068b7cd404a3
remove --in-content-link-color-* reference from preferences.css r=mstriemer,desktop-theme-reviewers,dao
https://hg.mozilla.org/integration/autoland/rev/1bb91028544e
remove --in-content-link-color-* references from aboutaddons.css r=mstriemer,desktop-theme-reviewers,dao
https://hg.mozilla.org/integration/autoland/rev/9d98996b9895
remove --in-content-link-color-* references from aboutwelcome CSS r=desktop-theme-reviewers,omc-reviewers,dao,aminomancer
https://hg.mozilla.org/integration/autoland/rev/07ae37d05047
remove --in-content-link-color-* references from aboutPrivateBrowsing.css r=mstriemer,desktop-theme-reviewers,dao
https://hg.mozilla.org/integration/autoland/rev/a283d52fcb09
remove --in-content-link-color-* reference from login-alert.css r=desktop-theme-reviewers,credential-management-reviewers,dao,mtigley
https://hg.mozilla.org/integration/autoland/rev/494a7011f528
remove --in-content-link-color-* variables from common-shared.css r=mstriemer,desktop-theme-reviewers,dao

Comment 12

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/f0db697e9a48
https://hg.mozilla.org/mozilla-central/rev/662f91b6eb9c
https://hg.mozilla.org/mozilla-central/rev/1616cebc8db0
https://hg.mozilla.org/mozilla-central/rev/068b7cd404a3
https://hg.mozilla.org/mozilla-central/rev/1bb91028544e
https://hg.mozilla.org/mozilla-central/rev/9d98996b9895
https://hg.mozilla.org/mozilla-central/rev/07ae37d05047
https://hg.mozilla.org/mozilla-central/rev/a283d52fcb09
https://hg.mozilla.org/mozilla-central/rev/494a7011f528