Are we Design Tokens yet?

browser/themes/shared/urlbar/urlbar.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-urlbar.tokens.json
 * and run `mach buildtokens` to see your changes. */

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

@layer tokens-foundation {
  :root,
  :host {
    --urlbar-border-radius: var(--button-border-radius);
    --urlbar-box-background-color: light-dark(var(--button-background-color-hover), color-mix(in srgb, currentColor 16%, transparent));
    --urlbar-box-background-color-hover: light-dark(var(--button-background-color-hover), color-mix(in srgb, currentColor 22%, transparent));
    --urlbar-box-background-color-active: var(--button-background-color-active);
    --urlbar-box-background-color-focus: light-dark(var(--button-background-color), color-mix(in srgb, currentColor 16%, transparent));
    --urlbar-box-text-color: inherit;
    --urlbar-box-text-color-hover: var(--urlbar-box-text-color);
    --urlbar-icon-fill-opacity: 0.9;
    --urlbar-margin-inline: 5px;
    --urlbar-padding-block: 4px;
  }
}

/* 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 {
      --urlbar-icon-fill-opacity: 1;
    }
  }
}

/* Bug 1879900: Can't nest media queries inside of :host, :root selector
   until Bug 1879349 lands */
@layer tokens-browser-theme {
  @media not ((forced-colors) or (-moz-native-theme)) {
    :root:not([lwtheme]),
    :host(.anonymous-content-host) {
      --urlbar-box-background-color: light-dark(white, rgb(66, 65, 77));
      --urlbar-icon-fill-opacity: 0.72;
    }
  }
}
Back to Home