Source code
Revision control
Copy as Markdown
Other Tools
/* 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
/* DO NOT EDIT this file directly, instead modify 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;
:root,
:host {
@layer tokens-foundation {
--tab-attention-dot-color: var(--color-accent-attention);
--tab-background-color: transparent;
--tab-background-color-hover: color-mix(in srgb, currentColor 11%, transparent);
--tab-background-color-selected: var(--toolbar-background-color);
--tab-background-width-pinned-expanded: 40px;
--tab-border: var(--border-width) solid var(--tab-border-color);
--tab-border-color: var(--toolbarbutton-outline-color);
--tab-border-color-hover: var(--toolbarbutton-outline-color-hover);
--tab-border-color-selected: var(--toolbarbutton-outline-color-selected);
--tab-border-radius: var(--toolbarbutton-border-radius);
--tab-box-shadow-selected: var(--box-shadow-level-1);
--tab-close-button-background-color: var(--button-background-color-ghost);
--tab-close-button-background-color-hover: var(--toolbarbutton-background-color-hover);
--tab-close-button-background-color-active: var(--toolbarbutton-background-color-active);
--tab-close-button-border-color: var(--tab-border-color);
--tab-close-button-border-color-hover: var(--tab-border-color);
--tab-close-button-border-color-active: var(--tab-border-color);
--tab-close-button-padding: 6px;
--tab-close-button-text-color: var(--tab-text-color);
--tab-close-button-text-color-hover: var(--tab-text-color);
--tab-close-button-text-color-active: var(--tab-text-color);
--tab-container-margin-inline-pinned-expanded: var(--space-small);
--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-40));
--tab-group-gray-hover: light-dark(var(--color-gray-65), var(--color-gray-50));
--tab-group-gray-invert: light-dark(var(--color-gray-40), var(--color-gray-55));
--tab-group-gray-text: light-dark(var(--color-white), var(--color-gray-90));
--tab-group-gray-text-invert: light-dark(var(--color-gray-90), 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-icon-fill-loading: var(--color-blue-50);
--tab-icon-margin-inline-end: 5.5px;
--tab-label-line-height: 1.7;
--tab-margin-block: 4px;
--tab-margin-block-vertical: 2px;
--tab-margin-inline-inner: var(--space-medium);
--tab-margin-inline-pinned-expanded: var(--space-xsmall);
--tab-margin-overflow-clip: 2px;
--tab-outline-offset: calc(-1 * var(--border-width));
--tab-padding-inline: 8px;
--tab-padding-inline-vertical: var(--space-medium);
--tab-text-color: var(--toolbox-text-color-current);
--tab-text-color-hover: var(--toolbox-text-color-current);
--tab-text-color-selected: var(--toolbar-text-color);
}
@layer tokens-prefers-contrast {
@media (prefers-contrast) {
--tab-close-button-border-color-hover: var(--button-border-color-hover);
--tab-close-button-border-color-active: var(--button-border-color-active);
}
}
@layer tokens-forced-colors {
@media (forced-colors) {
--tab-background-color: var(--button-background-color);
--tab-background-color-hover: var(--button-background-color-hover);
--tab-background-color-selected: SelectedItem;
--tab-close-button-text-color-hover: var(--button-text-color-hover);
--tab-close-button-text-color-active: var(--button-text-color-active);
--tab-text-color: var(--button-text-color);
--tab-text-color-hover: var(--button-text-color-hover);
--tab-text-color-selected: SelectedItemText;
}
}
@media -moz-pref("browser.nova.enabled") {
@layer tokens-foundation-nova {
--tab-background-color: transparent;
--tab-background-color-hover: color-mix(in srgb, currentColor 17%, transparent);
--tab-background-color-selected: var(--toolbar-background-color);
--tab-border-color: transparent;
--tab-border-color-hover: transparent;
--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: var(--color-orange-30);
--tab-box-shadow-selected: none;
--tab-container-margin-inline-pinned-expanded: 4px;
--tab-group-blue: light-dark(var(--color-blue-50), var(--color-blue-30));
--tab-group-blue-hover: light-dark(var(--color-blue-60), var(--color-blue-40));
--tab-group-blue-text: light-dark(var(--color-white), var(--color-blue-90));
--tab-group-cyan: light-dark(var(--color-cyan-50), var(--color-cyan-30));
--tab-group-cyan-hover: light-dark(var(--color-cyan-60), var(--color-cyan-40));
--tab-group-cyan-text: light-dark(var(--color-white), var(--color-cyan-90));
--tab-group-green: light-dark(var(--color-green-50), var(--color-green-30));
--tab-group-green-hover: light-dark(var(--color-green-60), var(--color-green-40));
--tab-group-green-text: light-dark(var(--color-white), var(--color-green-90));
--tab-group-orange: light-dark(var(--color-orange-50), var(--color-orange-30));
--tab-group-orange-hover: light-dark(var(--color-orange-60), var(--color-orange-40));
--tab-group-orange-text: light-dark(var(--color-white), var(--color-orange-90));
--tab-group-pink: light-dark(var(--color-pink-50), var(--color-pink-30));
--tab-group-pink-hover: light-dark(var(--color-pink-60), var(--color-pink-40));
--tab-group-pink-text: light-dark(var(--color-white), var(--color-pink-90));
--tab-group-purple: light-dark(var(--color-purple-50), var(--color-purple-30));
--tab-group-purple-hover: light-dark(var(--color-purple-60), var(--color-purple-40));
--tab-group-purple-text: light-dark(var(--color-white), var(--color-purple-90));
--tab-group-red: light-dark(var(--color-red-50), var(--color-red-30));
--tab-group-red-hover: light-dark(var(--color-red-60), var(--color-red-40));
--tab-group-red-text: light-dark(var(--color-white), var(--color-red-90));
--tab-group-yellow: light-dark(var(--color-yellow-50), var(--color-yellow-30));
--tab-group-yellow-hover: light-dark(var(--color-yellow-60), var(--color-yellow-40));
--tab-group-yellow-text: light-dark(var(--color-white), var(--color-yellow-90));
--tab-icon-fill-loading: var(--color-accent-primary);
--tab-margin-block: 6px;
--tab-outline-offset: -1px;
--tab-text-color-selected: var(--toolbar-text-color);
}
@layer tokens-forced-colors-nova {
@media (forced-colors) {
--tab-background-color-selected: var(--button-background-color-selected);
--tab-border-color: var(--button-border-color);
--tab-border-color-hover: var(--button-border-color-hover);
--tab-border-color-selected-leading: var(--tab-border-color-selected);
--tab-border-color-selected-trailing: var(--tab-border-color-selected);
}
}
}
}
:root:is([theme-in-app], :not([lwtheme])),
:host {
@layer tokens-browser-theme {
@media not ((forced-colors) or (-moz-native-theme)) {
--tab-background-color: transparent;
--tab-background-color-selected: light-dark(var(--color-white), rgba(106, 106, 120, 0.7));
--tab-text-color-selected: light-dark(rgb(21, 20, 26), var(--color-white));
}
}
@media -moz-pref("browser.nova.enabled") {
@layer tokens-browser-theme-nova {
@media not ((forced-colors) or (-moz-native-theme)) {
--tab-background-color: var(--button-background-color);
--tab-background-color-hover: var(--toolbarbutton-background-color-hover);
--tab-background-color-selected: var(--background-color-box);
--tab-text-color-selected: var(--toolbox-text-color);
}
}
}
}