Quelle  tab.tokens.css   Sprache: unbekannt

/* 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-browser-theme, tokens-foundation-brand, tokens-foundation-nova, tokens-browser-theme-nova, tokens-foundation-brand-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-background-color-hover: color-mix(in srgb, currentColor 11%, transparent);
    --tab-background-color-selected: var(--toolbar-background-color);
    --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-group-blue: light-dark(var(--color-blue-50), var(--color-blue-10));
    --tab-group-blue-hover: light-dark(var(--color-blue-60), var(--color-blue-20));
    --tab-group-blue-invert: light-dark(var(--color-blue-10), var(--color-blue-50));
    --tab-group-blue-text: light-dark(var(--color-white), var(--color-blue-60));
    --tab-group-blue-text-invert: light-dark(var(--color-blue-60), var(--color-white));
    --tab-group-cyan: light-dark(var(--color-cyan-50), var(--color-cyan-10));
    --tab-group-cyan-hover: light-dark(var(--color-cyan-60), var(--color-cyan-20));
    --tab-group-cyan-invert: light-dark(var(--color-cyan-10), var(--color-cyan-50));
    --tab-group-cyan-text: light-dark(var(--color-white), var(--color-cyan-60));
    --tab-group-cyan-text-invert: light-dark(var(--color-cyan-60), var(--color-white));
    --tab-group-gray: light-dark(var(--color-gray-55), var(--color-gray-0));
    --tab-group-gray-hover: light-dark(var(--color-gray-65), var(--color-gray-10));
    --tab-group-gray-invert: light-dark(var(--color-gray-0), var(--color-gray-55));
    --tab-group-gray-text: light-dark(var(--color-white), var(--color-gray-65));
    --tab-group-gray-text-invert: light-dark(var(--color-gray-65), var(--color-white));
    --tab-group-green: light-dark(var(--color-green-50), var(--color-green-10));
    --tab-group-green-hover: light-dark(var(--color-green-60), var(--color-green-20));
    --tab-group-green-invert: light-dark(var(--color-green-10), var(--color-green-50));
    --tab-group-green-text: light-dark(var(--color-white), var(--color-green-60));
    --tab-group-green-text-invert: light-dark(var(--color-green-60), var(--color-white));
    --tab-group-orange: light-dark(var(--color-orange-50), var(--color-orange-10));
    --tab-group-orange-hover: light-dark(var(--color-orange-60), var(--color-orange-20));
    --tab-group-orange-invert: light-dark(var(--color-orange-10), var(--color-orange-50));
    --tab-group-orange-text: light-dark(var(--color-white), var(--color-orange-60));
    --tab-group-orange-text-invert: light-dark(var(--color-orange-60), var(--color-white));
    --tab-group-pink: light-dark(var(--color-pink-50), var(--color-pink-10));
    --tab-group-pink-hover: light-dark(var(--color-pink-60), var(--color-pink-20));
    --tab-group-pink-invert: light-dark(var(--color-pink-10), var(--color-pink-50));
    --tab-group-pink-text: light-dark(var(--color-white), var(--color-pink-60));
    --tab-group-pink-text-invert: light-dark(var(--color-pink-60), var(--color-white));
    --tab-group-purple: light-dark(var(--color-purple-50), var(--color-purple-10));
    --tab-group-purple-hover: light-dark(var(--color-purple-60), var(--color-purple-20));
    --tab-group-purple-invert: light-dark(var(--color-purple-10), var(--color-purple-50));
    --tab-group-purple-text: light-dark(var(--color-white), var(--color-purple-60));
    --tab-group-purple-text-invert: light-dark(var(--color-purple-60), var(--color-white));
    --tab-group-red: light-dark(var(--color-red-50), var(--color-red-10));
    --tab-group-red-hover: light-dark(var(--color-red-60), var(--color-red-20));
    --tab-group-red-invert: light-dark(var(--color-red-10), var(--color-red-50));
    --tab-group-red-text: light-dark(var(--color-white), var(--color-red-60));
    --tab-group-red-text-invert: light-dark(var(--color-red-60), var(--color-white));
    --tab-group-yellow: light-dark(var(--color-yellow-50), var(--color-yellow-10));
    --tab-group-yellow-hover: light-dark(var(--color-yellow-60), var(--color-yellow-20));
    --tab-group-yellow-invert: light-dark(var(--color-yellow-10), var(--color-yellow-50));
    --tab-group-yellow-text: light-dark(var(--color-white), var(--color-yellow-60));
    --tab-group-yellow-text-invert: light-dark(var(--color-yellow-60), var(--color-white));
    --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-outline-color: transparent;
    --tab-selected-textcolor: var(--toolbar-text-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;
    }
  }
}

/* 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) {
      --tab-background-color-selected: light-dark(var(--color-white), rgba(106, 106, 120, 0.7));
      --tab-selected-textcolor: light-dark(rgb(21, 20, 26), var(--color-white));
    }
  }
}

@media -moz-pref("browser.nova.enabled") {
  @layer tokens-foundation-nova {
    :root,
    :host {
      --tab-background-color-hover: color-mix(in srgb, currentColor 11%, transparent);
      --tab-block-margin: 6px;
      --tab-border-color-accent: linear-gradient(96deg, var(--tab-border-color-selected-leading) 20.68%, var(--tab-border-color-selected-trailing) 79.34%);
      --tab-border-color-selected-leading: var(--color-violet-30);
      --tab-border-color-selected-trailing: light-dark(var(--color-orange-30), var(--color-violet-50));
      --tab-border-radius: var(--border-radius-circle);
      --tab-selected-shadow: none;
    }
  }

  /* Bug 1879900: Can't nest media queries inside of :host, :root selector
   until Bug 1879349 lands */
  @layer tokens-browser-theme-nova {
    @media not ((forced-colors) or (-moz-native-theme)) {
      :root:not([lwtheme]),
      :host(.anonymous-content-host) {
        --tab-background-color-hover: light-dark(
          color-mix(in lch, var(--color-violet-desaturated-50) 25%, transparent),
          color-mix(in lch, var(--color-violet-desaturated-30) 40%, transparent)
        );
      }
    }
  }
}