Are we Design Tokens yet?

browser/themes/shared/tabbrowser/tab.tokens.css

Propagation: No Props Found

Back to Home
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* DO NOT EDIT this file directly, instead modify moz-tab.tokens.json
 * and run `mach buildtokens` to see your changes. */

@layer tokens-foundation, tokens-foundation-nova, tokens-prefers-contrast, tokens-prefers-contrast-nova, tokens-forced-colors, tokens-forced-colors-nova;

@layer tokens-foundation {
  :root,
  :host {
    --tab-attention-dot-color: var(--color-accent-attention);
    --tab-block-margin: var(--dimension-4);
    --tab-border-radius: var(--toolbarbutton-border-radius);
    --tab-box-shadow: var(--box-shadow-level-1);
    --tab-close-button-padding: 6px;
    --tab-hover-background-color: color-mix(in srgb, currentColor 11%, transparent);
    --tab-hover-outline-color: transparent;
    --tab-icon-end-margin: 5.5px;
    --tab-inline-padding: var(--dimension-8);
    --tab-inner-inline-margin: var(--space-medium);
    --tab-label-line-height: 1.7;
    --tab-loading-fill: var(--color-blue-50);
    --tab-outline: var(--border-width) solid var(--tab-outline-color);
    --tab-outline-color: transparent;
    --tab-outline-offset: calc(-1 * var(--border-width));
    --tab-overflow-clip-margin: var(--dimension-2);
    --tab-pinned-container-margin-inline-expanded: var(--space-small);
    --tab-pinned-expanded-background-width: var(--dimension-40);
    --tab-pinned-margin-inline-expanded: var(--space-xsmall);
    --tab-selected-bgcolor: var(--toolbar-bgcolor);
    --tab-selected-outline-color: transparent;
    --tab-selected-textcolor: var(--toolbar-color);
    --tab-vertical-block-margin: var(--dimension-2);
    --tab-vertical-inline-padding: var(--space-medium);
  }
}

/* Bug 1879900: Can't nest media queries inside of :host, :root selector
   until Bug 1879349 lands */
@layer tokens-prefers-contrast {
  @media (prefers-contrast) {
    :root,
    :host {
      --tab-hover-outline-color: currentColor;
      --tab-selected-outline-color: currentColor;
    }
  }
}
Back to Home