firefox-css-variables.md

FX CSS Variables

Source

Main Window

• --arrowpanel-background
• --arrowpanel-border-color
• --arrowpanel-color
• --arrowpanel-dimmed
• --arrowpanel-dimmed-even-further
• --arrowpanel-dimmed-further
• --arrowpanel-padding
• --autocomplete-popup-background
• --autocomplete-popup-color
• --autocomplete-popup-highlight-background
• --autocomplete-popup-highlight-color
• --avatar-image-url
• --backbutton-active-background
• --backbutton-background
• --backbutton-border-color
• --backbutton-hover-background
• --cfr-active-color
• --cfr-animation-duration
• --cfr-button-addons-icon
• --cfr-button-features-icon
• --chrome-content-separator-color
• --default-arrowpanel-background
• --default-arrowpanel-border-color
• --default-arrowpanel-color
• --downloads-item-details-opacity
• --downloads-item-font-size-factor
• --downloads-item-height
• --drag-drop-transition-duration
• --in-content-button-background
• --in-content-button-background-active
• --in-content-button-background-hover
• --in-content-primary-button-background
• --in-content-primary-button-background-active
• --in-content-primary-button-background-hover

Navigator Toolbox

• --tabs-border-color

Tabs Toolbar

• --tabs-top-border-width
• --toolbarbutton-active-background
• --toolbarbutton-hover-background

Toolbar

• --backbutton-background
• --backbutton-active-background
• --backbutton-hover-background
• --toolbarbutton-icon-fill-attention

Tabbrowser Tabs

• --tab-line-color
• --tab-loading-fill
• --tab-loader-size
• --tabs-top-border-width
• --tab-min-width

Sidebar

• --sidebar-background-color
• --sidebar-text-color
• --sidebar-border-color

Newtab Page

• --newtab-search-icon
• --newtab-background-color
• --newtab-text-primary-color
• --lwt-sidebar-background-color
• --lwt-sidebar-text-color
• --newtab-background-color
• --newtab-border-primary-color
• --newtab-border-secondary-color
• --newtab-button-primary-color
• --newtab-button-secondary-color
• --newtab-element-active-color
• --newtab-element-hover-color
• --newtab-icon-primary-color
• --newtab-icon-secondary-color
• --newtab-icon-tertiary-color
• --newtab-inner-box-shadow-color
• --newtab-link-primary-color
• --newtab-link-secondary-color
• --newtab-text-conditional-color
• --newtab-text-primary-color
• --newtab-text-secondary-color
• --newtab-textbox-background-color
• --newtab-textbox-border
• --newtab-textbox-focus-color
• --newtab-textbox-focus-boxshadow
• --newtab-feed-button-background
• --newtab-feed-button-text
• --newtab-feed-button-background-faded
• --newtab-feed-button-text-faded
• --newtab-feed-button-spinner
• --newtab-contextmenu-background-color
• --newtab-contextmenu-button-color
• --newtab-modal-color
• --newtab-overlay-color
• --newtab-section-header-text-color
• --newtab-section-navigation-text-color
• --newtab-section-active-contextmenu-color
• --newtab-search-border-color
• --newtab-search-dropdown-color
• --newtab-search-dropdown-header-color
• --newtab-search-header-background-color
• --newtab-search-icon-color
• --newtab-search-wordmark-color
• --newtab-topsites-background-color
• --newtab-topsites-icon-shadow
• --newtab-topsites-label-color
• --newtab-card-active-outline-color
• --newtab-card-background-color
• --newtab-card-hairline-color
• --newtab-card-placeholder-color
• --newtab-card-shadow
• --newtab-snippets-background-color
• --newtab-snippets-hairline-color
• --trailhead-header-text-color
• --trailhead-cards-background-color
• --trailhead-card-button-background-color
• --trailhead-card-button-background-hover-color
• --trailhead-card-button-background-active-color

In-Content UI (Options, Addons Manager, etc.)

• --animation-curve
• --arrowpanel-background
• --arrowpanel-border-color
• --arrowpanel-color
• --arrowpanel-padding
• --blue-40
• --blue-40-a10
• --blue-50
• --blue-50-a30
• --blue-60
• --blue-70
• --blue-80
• --card-outline-color
• --card-padding
• --card-shadow
• --card-shadow-focus
• --card-shadow-hover
• --default-arrowpanel-background
• --default-arrowpanel-border-color
• --default-arrowpanel-color
• --green-50
• --green-60
• --green-70
• --green-80
• --green-90
• --grey-20
• --grey-30
• --grey-40
• --grey-60
• --grey-90
• --grey-90-a10
• --grey-90-a20
• --grey-90-a30
• --grey-90-a50
• --grey-90-a60
• --in-content-border-active
• --in-content-border-active-shadow
• --in-content-border-color
• --in-content-border-focus
• --in-content-border-highlight
• --in-content-border-hover
• --in-content-border-invalid
• --in-content-border-invalid-shadow
• --in-content-box-background
• --in-content-box-background-active
• --in-content-box-background-hover
• --in-content-box-background-odd
• --in-content-box-border-color
• --in-content-box-info-background
• --in-content-button-background
• --in-content-button-background-active
• --in-content-button-background-hover
• --in-content-category-background-active
• --in-content-category-background-hover
• --in-content-category-background-selected-active
• --in-content-category-background-selected-hover
• --in-content-category-outline-focus
• --in-content-category-text-selected
• --in-content-category-text-selected-active
• --in-content-deemphasized-text
• --in-content-dialog-header-background
• --in-content-item-hover
• --in-content-item-selected
• --in-content-link-color
• --in-content-link-color-active
• --in-content-link-color-hover
• --in-content-link-color-visited
• --in-content-page-background
• --in-content-page-color
• --in-content-primary-button-background
• --in-content-primary-button-background-active
• --in-content-primary-button-background-hover
• --in-content-selected-text
• --in-content-tab-color
• --in-content-table-background
• --in-content-table-border-dark-color
• --in-content-table-header-background
• --in-content-text-color
• --in-content-warning-container
• --orange-50
• --panel-border-radius
• --panel-disabled-color
• --purple-70
• --red-50
• --red-50-a30
• --red-60
• --red-70
• --red-80
• --red-90
• --shadow-10
• --shadow-30
• --yellow-10
• --yellow-50
• --yellow-60
• --yellow-60-a30
• --yellow-70
• --yellow-80
• --yellow-90