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 moz-message-bar.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 {
--message-bar-actions-button-padding: var(--space-xsmall) var(--space-large);
--message-bar-actions-gap: var(--space-small);
--message-bar-background-color: var(--background-color-information);
--message-bar-background-color-critical: var(--background-color-critical);
--message-bar-background-color-success: var(--background-color-success);
--message-bar-background-color-warning: var(--background-color-warning);
--message-bar-border-color: oklch(from var(--message-bar-icon-color) l c h / 20%);
--message-bar-border-radius: var(--border-radius-medium);
--message-bar-border-width: var(--border-width);
--message-bar-close-margin-block-start: 0px;
--message-bar-close-margin-inline-end: 0px;
--message-bar-container-gap: var(--space-small);
--message-bar-container-min-height: var(--size-item-large);
--message-bar-container-padding-block: var(--space-small);
--message-bar-container-padding-inline: var(--space-medium) var(--space-small);
--message-bar-content-gap: var(--space-small) var(--space-medium);
--message-bar-content-padding-block: 0;
--message-bar-content-padding-inline: 0;
--message-bar-icon-background-color: var(--background-color-information);
--message-bar-icon-background-color-critical: var(--background-color-critical);
--message-bar-icon-background-color-success: var(--background-color-success);
--message-bar-icon-background-color-warning: var(--background-color-warning);
--message-bar-icon-color: var(--icon-color-information);
--message-bar-icon-container-align-items: center;
--message-bar-icon-container-border: none;
--message-bar-icon-container-border-color: transparent;
--message-bar-icon-container-border-radius: var(--border-radius-circle);
--message-bar-icon-container-border-radius-end-end: var(--message-bar-icon-container-border-radius);
--message-bar-icon-container-border-radius-end-start: var(--message-bar-icon-container-border-radius);
--message-bar-icon-container-border-radius-start-end: var(--message-bar-icon-container-border-radius);
--message-bar-icon-container-border-radius-start-start: var(--message-bar-icon-container-border-radius);
--message-bar-icon-container-height: min-content;
--message-bar-icon-container-margin-block-start: var(--space-small);
--message-bar-icon-container-margin-block-start-offset: 2px;
--message-bar-icon-container-padding: 0px;
--message-bar-icon-container-padding-block-start: var(--message-bar-icon-container-padding);
--message-bar-icon-container-padding-offset: 0px;
--message-bar-icon-size: var(--icon-size);
--message-bar-message-margin-inline-end: var(--space-xsmall);
--message-bar-text-color: var(--text-color);
--message-bar-text-container-gap: var(--space-xsmall) var(--space-small);
--message-bar-text-container-padding-block: calc((var(--message-bar-container-min-height) - var(--message-bar-icon-size)) / 2);
--message-bar-text-content-gap: var(--space-xsmall) var(--space-small);
}
@layer tokens-prefers-contrast {
@media (prefers-contrast) {
--message-bar-border-color: var(--border-color);
}
}
@media -moz-pref("browser.nova.enabled") {
@layer tokens-foundation-nova {
--message-bar-background-color: var(--background-color-box);
--message-bar-background-color-critical: var(--background-color-box);
--message-bar-background-color-success: var(--background-color-box);
--message-bar-background-color-warning: var(--background-color-box);
--message-bar-border-color: oklch(from var(--message-bar-icon-color) l c h / 12%);
--message-bar-close-margin-block-start: var(--space-small);
--message-bar-close-margin-inline-end: 8px;
--message-bar-container-padding-block: 0;
--message-bar-container-padding-inline: 0;
--message-bar-content-padding-block: var(--space-small);
--message-bar-content-padding-inline: 8px;
--message-bar-icon-container-align-items: flex-start;
--message-bar-icon-container-border: 1px solid var(--message-bar-icon-container-border-color);
--message-bar-icon-container-border-color: transparent;
--message-bar-icon-container-border-radius: calc(var(--message-bar-border-radius) - 1px);
--message-bar-icon-container-border-radius-end-end: 0;
--message-bar-icon-container-border-radius-end-start: var(--message-bar-icon-container-border-radius);
--message-bar-icon-container-border-radius-start-end: 0;
--message-bar-icon-container-border-radius-start-start: var(--message-bar-icon-container-border-radius);
--message-bar-icon-container-height: auto;
--message-bar-icon-container-margin-block-start: 0px;
--message-bar-icon-container-margin-block-start-offset: 0px;
--message-bar-icon-container-padding: var(--space-small);
--message-bar-icon-container-padding-block-start: calc(var(--space-small) + var(--space-small));
--message-bar-icon-container-padding-offset: 1px;
--message-bar-text-container-padding-block: 0;
}
@layer tokens-forced-colors-nova {
@media (forced-colors) {
--message-bar-icon-container-border-color: var(--message-bar-icon-color);
}
}
}
}