2008598 - Convert urlbar variables to design tokens

Status: RESOLVED FIXED

(Toolkit :: Themes, task, P3)

Description

[Jules Simplicio [:jules]]

We're beginning to add more design tokens for the chrome, and url bar is a good candidate. Through tokens, we can handle their mode and theming and begin to integrate more with chrome styles per our meta 1987677.

To turn some of these into tokens, we need to, per our plan:

a. Identify all locations that variable is used
b. Identify its purpose
c. Integrate it into the design tokens system (and alias off of existing colors if possible)
d. Add documentation on how it is intended to be used (where do we put docs?)
e. Replace all uses with the token

Note: any sort of custom component or feature overrides of tokens should remain in their place. For example, whatever we do uniquely for Windows should stay in its corresponding browser.css file. For example
Note: leave any custom media queries in their place. For example

Here's where urlbar variables show up today:

browser-colors.css

  --urlbarView-action-color: light-dark(rgb(91, 91, 102), rgb(191, 191, 201));
  --urlbarView-separator-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94));
  --urlbarView-highlight-background: light-dark(#e0e0e6, rgb(43, 42, 51));
  --urlbarView-highlight-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
  --urlbarView-hover-background: light-dark(rgb(240, 240, 244), var(--arrowpanel-dimmed));

  --urlbar-box-bgcolor: light-dark(white, rgb(66, 65, 77));  
  --urlbar-icon-fill-opacity: 0.72;
  @media (prefers-color-scheme: dark) {
    --urlbar-icon-fill-opacity: 1;
  }

urlbar-searchbar.css

 --urlbar-container-min-width: 310px;
  /* Usually we wouldn't need snapping border widths manually, but we use this
   * for other layout calculations too */
  --urlbar-container-border-width: max(env(hairline), round(down, 1px, env(hairline)));
  --urlbar-container-padding: round(up, 1px, env(hairline));
  --urlbar-container-border-padding: calc(var(--urlbar-container-border-width) + var(--urlbar-container-padding));
  --urlbar-margin-inline: 5px;
  --urlbar-padding-block: 4px;

Comment 1

[oarnesto]

Attachment: Bug 2008598 - Extract urlbar variables to `urlbar.css` r=#reusable-components-reviewers-rotation,#urlbar

Comment 2

[oarnesto]

To avoid rounding errors, we will incorporate the added non-relative dimension tokens from 1988871.

Comment 3

[Chris Peterson [:cpeterson]]

Drew says these new design tokens block urlbar theming bug 2026859.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/28f0d28d26ee
https://hg.mozilla.org/integration/autoland/rev/13c03735b177
Extract urlbar variables to `urlbar.css` r=desktop-theme-reviewers,urlbar-reviewers,mstriemer,accessibility-frontend-reviewers,dao,ayeddi,adw

Comment 5

[amarc]

https://hg.mozilla.org/mozilla-central/rev/13c03735b177