3 colors Colors

Backgrounds for the page and the things on it. --color-inverse-bg is the dark ink surface of inverse cards and banners; in the dark theme --surface-inverse-image adds a gradient on top of it (none in light). In the dark theme, surfaces that pass their background to an elevation mixin are painted with --surface-elevated-image (graphite-06 to graphite-05) over --surface-elevated-bg (--card-bg); both are initial in light, so those surfaces keep their own background.

Text colors, including text on inverse surfaces (--color-inverse) and on accent fills (--color-text-on-accent). The --color-moz-* tokens are Mozilla brand text.

Link colors for the default, hover, and visited states, and the inverse variants for links on inverse surfaces. --color-click and --color-link have the same value.

Fills for primary actions, such as primary buttons. Text on these fills is --color-text-on-accent.

Dividers, control borders, and the states of form fields.

Feedback colors. The --status-*-bg and --status-*-text tokens are used in pairs. In the light theme the -bg tokens are translucent over the page and the -text tokens are opaque.

The tinted card used by the scam banner and by KB warnings. The callout mixin composes its background gradient from the three --callout-warning-bg-* stops, with --callout-warning-bg-mid-at placing the middle one, so text is checked against each stop. The ring and shadow can't be shown as swatches, so they appear only in the theme maps.

The product and article cards. Only the text and divider colors can be shown as swatches; the logo plate, the highlight layer, and the hover ring and shadow appear in the theme maps only.

The topic cards on product pages and in the AAQ topic step. The title, article link, and divider colors, the card border, and the icon plate can be shown as swatches; the shadow appears in the theme maps only.

KB article content in #doc-content: the table of contents rule, the metadata rule, notes, Firefox UI label chips, and keycaps. Forum posts share the parser's classes and keep the menu label colors. The keycap edge is a shadow, so it appears in the theme maps only.

The topics sidebar nav, the contributors list, and the helpful survey. The survey arrow shadow appears in the theme maps only.

The home and product landing heroes that carry has-aurora. Links in the hero use --hero-link so they stay readable over the glow. The --hero-art-* tokens are for a hero drawn over product art, which keeps white text in both themes, with a translucent link hover and underline, and lifts its searchbox with a shadow; in the dark theme the searchbox takes the field surface. No hero uses them yet. The aurora background, the hero bottom edge, and the searchbox shadow can't be shown as swatches, so they appear only in the theme maps.

The support callout ("Still need help?"), built by the brand-callout mixin. It looks the same in both themes except for its shadow. The theme maps compose the surface from the three stop colors and the glow, so text is checked against each stop. The gradients, rim, shadows, and chip ring can't be shown as swatches, so they appear only in the theme maps. The Enterprise theme's base and icon-side glow (--enterprise-callout-base, --enterprise-callout-glow) are lighter in light.

The site header: its bar, menu titles and their active underline, the mobile menu separators, the "Download Firefox" and "Sign In/Up" buttons, and the unread message badge. The light values are Protocol's and the buttons' own. "Download Firefox" uses --header-button-text on --header-cta-bg, and both buttons use --header-button-hover-bg and --header-button-active-bg when hovered and pressed. The menu icons use --color-icon, and the logo stays an image that --icon-image-filter recolors in dark. The bottom shadow and the button highlight appear in the theme maps only.

The header's menu panels and the mzp-c-menu-list menus (the "more options" menus on posts). Panel links use --dropdown-link, item titles keep --color-heading and turn --dropdown-title-hover when hovered, and "View all" links keep --color-link. Below the medium breakpoint a panel opens inside the mobile menu on --header-bg. The mzp-c-menu-list menus sit on --color-surface with a --color-link-active-bg hover. The panel edge is its top border. The shadows and the item hover ring appear in the theme maps only.

The footer is a dark surface in both themes: Protocol paints it black with white text, and in the dark theme it takes graphite-01 under a faint top edge (--footer-edge, in the theme maps only). The text keeps Protocol's colors on both surfaces, and the divider under the link sections is graphite-08 in dark.

The Protocol notification bar behind flash messages and page notices. A bar with no variant or with mzp-t-info uses the plain tokens, and the dismiss strip beside the text uses the -button-bg and -button-hover-bg tokens. In the dark theme the variants use the status colors and the strip is a translucent white overlay on the bar. The dismiss icon (--notification-close-icon) is a white image in the dark theme and appears in the theme maps only, and the lighter red (--notification-error-soft-bg) is the report abuse modal's error.

Text fields, selects, checkboxes, radios, toggles, and range inputs. A field's validation color draws its ring and its error text, and its icon is drawn in the same color. The validation icons, the select chevron, and the checkbox and radio marks are images drawn in each theme's colors; they, the validation rings, the dark field inset, and the dark-only native control accent (--control-accent) and placeholder color (--field-placeholder, graphite-10 at full opacity) appear in the theme maps only.

The default, secondary, and warning buttons; primary buttons use the accent tokens. The icon-only buttons show Protocol's black icons in light and light-gray-02 copies in dark (--search-icon, --menu-icon, --close-icon, --more-options-icon); they, the primary button's dark highlight, and its hover glow appear in the theme maps only.

The destructive "close account" link, form error lists, the KB survey's "Required" note, and the topics section heading. In the dark theme, underlined links get a thin underline in a 35% tint of their own color with more offset; those tokens are initial in light and appear only in the theme maps.

Highlighted table cells on revision and dashboard tables (the yellow cells use --color-warning) and the .light-grey-bg utility.

Tabs, breadcrumbs, the sidebar navigation, the progress bar, and the product picker. Tabs use --tabs-text-active when hovered, pressed, or selected. The chevrons, the progress check, and the sidebar's related-content icons are images drawn in each theme's colors, and the "Show more" caret is recolored by a filter; they appear in the theme maps only.

The icons that templates draw through the icon macro, the header's menu icons, and the expand markers of collapsible sections use --color-icon; the "linked in product" info icon uses --color-icon-info, the info status color. Content images in KB articles and forum posts take --media-content-image-filter, a radius, and a rim; the vertical gap moves from padding to margin in dark so the rim hugs the image. Question and answer images take the filter, radius, and rim only. The collapsible KB sections' "+" is an image drawn in each theme's color (--kb-section-icon). The logo and the search suggestions that instant_search.js renders keep their images, which --icon-image-filter recolors in dark. Everything but the colors below appears in the theme maps only.

The tag, group, related-document, and recipient pickers built on Tom Select: the control, its items, and the dropdown. Light keeps Tom Select's default theme, in which items and the single-select control are gradients (--tom-select-item-image, --tom-select-item-active-image, --tom-select-single-image), so the item swatches show the color under the gradient. Dark is flat: the gradients are none and items are accent pills. The -disabled-active- colors show on an active item of a disabled control. The recipient autocomplete keeps its grey chips (--user-autocomplete-item-*). The gradients and shadows appear in the theme maps only.

The KB editing and review pages: the summary and message character counters (is-over-limit marks a counter past its limit), the draft-saving bars, the revision lists of the history and recent revisions pages, the preview and review panels, the translation source fields, and the editor toolbar's link type-ahead and media picker. The draft bars keep their Bootstrap colors and striped image in light and use the status colors, flat, in dark. The history icons are images drawn in each theme's colors, as is the toolbar sprite (--markup-toolbar-image, a light-gray-02 copy in dark). These images, the striped image, and the shadows appear in the theme maps only.

The KB editor's wiki-markup editor and its hint list. The editor keeps CodeMirror's default theme, and SUMO's rules under #editor color its surface, gutter, cursor, selections, and the classes of the SUMO markup mode: --codemirror-syntax colors the markup's delimiters and tag names. Italic, underlined, and struck-through text keep --codemirror-text. The hint list's shadow appears in the theme maps only.

The line diffs on the compare, review, and translate pages and in the editor's changes preview. Changed lines are tinted (--diff-removed-line-bg, --diff-added-line-bg), and the text that changed within them is marked more strongly (--diff-removed-bg, --diff-added-bg).

The support and contributor forums and the Ask a Question flow: the questions list's tag filter, tag chips, the borders and dividers of question lists, threads and answers, the "Chosen Solution" and "Solved" labels (--solution-label-bg under heading text; --color-success stays the accent and text color), the chosen answer's card, the upload thumbnails, the support-channel badges, and the support switcher. The thread and question dividers keep their light colors (body text and heading) and are graphite-08 in dark. A Tom Select tag link takes its item's color, so a disabled control dims its tags. The chosen answer's card is a 5% mix of --color-success into --color-shade-bg in each theme. The focus ring and shadows appear in the theme maps only.

Group pages and their tickets and avatar pages, the "My questions" company tickets widget, the private-messages table, the moderation queue, the top-contributors select, and the KBox dialogs. In the dark theme group cards and sections and KBox dialogs use the elevated surface, and member cards sit transparent on it; the leader cards keep their light gradient and are elevated surfaces in dark with a sage tint. The avatar preview overlay sits on the image and keeps its colors. Remove links, required marks, and the avatar form's error edge are --group-error-text; the error messages take --status-error-text. The select's check mark is an image drawn in each theme's color (--community-select-check-icon). The gradients, shadows, and the check mark appear in the theme maps only.

The KB and localization dashboards (readout tables, progress bars, status glyphs and readout mode tabs), the Chart.js charts on the KPI, metrics and article history pages, and the retention grid. sumo/js/charts/theme.js reads the --chart-* tokens into Chart.js (text, grid, tooltip and series colors) and redraws live charts on sumo:themechange. --chart-1 to --chart-11 are the categorical series, cycled in order; the vote tokens color the article history chart. The retention grid's cells use --chart-heat-1 (0–9%) to --chart-heat-10 (90% and up). The dark ramp inverts the light one: the ends are vivid and the middle is dark and muted, as the light middle is pale.

The Svelte contribute pages: their text, the step and link tiles, the pink step numbers, and the fact panel. In the dark theme the tiles are cards and the fact panel is the inverse surface, with --surface-inverse-image on top. The tile shadow appears in the theme maps only.

The wizard in KB articles and its reminder dialog. Its shadow-DOM sheets compile Protocol's form and button styles, which the wizard overrides with these tokens and the field, button and focus tokens; in the dark theme the wizard and the dialog are elevated surfaces. The step marker and the select caret are images drawn in each theme's color. The black icons take --icon-image-filter, and the blue info icon --wizard-info-icon-filter, which recolors it to about azure-03 in dark. The shadows, focus ring, images, and filters appear in the theme maps only.

The pro-support masthead, the Get help cards, and the Firefox Professional Support banner, in the Firefox for Enterprise palette. The masthead shows a bubbles image over its color: cream in light, a dark purple version of the image in dark. The cards are cream in light and a purple-10 tint over the page in dark. The badges look the same in both themes, except Contact support, which brightens in dark to stand out on the card. The dark banner gradient is built from three stop tokens and a faint warm glow, which are initial in light because the light gradient is one value. The image, gradients, glow and searchbox shadow appear in the theme maps only.

A violet wash for panels that hold cards. The cards on it keep --card-bg and take --accent-border; number and icon tiles use --accent-tile with --accent-ink on top. Text on the wash is --color-heading and --color-text.

The blue variant of the callout, used for "Good to know" notes. It has the same tokens as the warning callout, so its stops, ring, and shadow work the same way and are described there. Heading, body text, and links are checked against each stop.