1988809 - Convert tab variables into 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 tabs are 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
d. Add documentation on how it is intended to be used (where do we put docs?)
e. Replace all uses with the token

Tab related tokens start with the prefixes "tab", "vertical-tabs".

Tab (found in tabs.css)

  --tab-min-height
  --tab-collapsed-background-width
  --tab-collapsed-width
  --tab-inner-inline-margin
  --tab-inline-padding: 8px;
  --tab-pinned-expanded-background-width
  --tab-pinned-margin-inline-expanded
  --tab-pinned-min-width-expanded
  --tab-pinned-container-margin-inline-expanded
  --tab-border-radius
  --tab-overflow-clip-margin
  --tab-close-button-padding
  --tab-block-margin
  --tab-icon-end-margin
  --tab-label-line-height
  --tab-loading-fill
  --tab-hover-background-color
  --tab-selected-textcolor
  --tab-selected-bgcolor
  --tab-selected-color-scheme

  /** all the way down at line 456 **/
  --tab-sharing-icon-animation

Vertical tabs

 --vertical-tabs-scrollbar-color

Please note differences across vertical tabs through its pref query here.

@media -moz-pref("sidebar.verticalTabs") {
  :root {
    --tab-min-height: max(32px, calc(var(--tab-label-line-height) * 1em));
    --tab-block-margin: 2px;
    --tab-inline-padding: var(--space-medium);
  }
}

And expand on hover differences here

  :root:not([sidebar-expand-on-hover]) & {
    --tab-inline-padding: calc((var(--tab-collapsed-background-width) + 2 * var(--tab-pinned-margin-inline-expanded) - var(--icon-size)) / 2);

And here

 @media not -moz-pref("sidebar.visibility", "expand-on-hover") {
    /* We need these rules to apply at all times when the sidebar.visibility
    pref is not set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
    has not been added to root. There are certain scenarios when that attribute is temporarily
    removed from root such as when toggling the sidebar to expand with the toolbar button. */
    &:is([muted], [soundplaying], [activemedia-blocked]) {
      --tab-icon-end-margin: 2px;
   ...
}

Comment 1

[Jon Oliver]

Attachment: Bug 1988809 - extract tab tokens for use in design system r=#desktop-theme-reviewers

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/7ce1db3144e1
https://hg.mozilla.org/integration/autoland/rev/adfca5554cf4
extract tab tokens for use in design system r=desktop-theme-reviewers,tabbrowser-reviewers,jules,jswinarton,mstriemer

Comment 3

[amarc]

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