userContent.css
/* ============================================================
Firefox Nova — Purple/Lilac → Yellow
userContent.css
============================================================ */
/* ============================================================
Firefox Home / New Tab
Activity Stream's self-contained Nova foundation tokens
============================================================ */
:root.nova-tokens {
--color-violet-0: #f9f5e6 !important;
--color-violet-10: #fde8b5 !important;
--color-violet-20: #fbcc77 !important;
--color-violet-30: #fbcc77 !important;
--color-violet-40: #db820e !important;
--color-violet-50: #f3a81e !important;
--color-violet-60: #b26100 !important;
--color-violet-70: #854800 !important;
--color-violet-80: #5f3100 !important;
--color-violet-90: #3e1d00 !important;
--color-violet-desaturated-0: #f9f5e6 !important;
--color-violet-desaturated-10: #fde8b5 !important;
--color-violet-desaturated-20: #fbcc77 !important;
--color-violet-desaturated-30: #fbcc77 !important;
--color-violet-desaturated-40: #db820e !important;
--color-violet-desaturated-50: #f3a81e !important;
--color-violet-desaturated-60: #b26100 !important;
--color-violet-desaturated-70: #854800 !important;
--color-violet-desaturated-80: #5f3100 !important;
--color-violet-desaturated-90: #3e1d00 !important;
}
@-moz-document url-prefix("about:") {
/* ============================================================
NOVA FOUNDATION TOKENS — replace remaining violet
============================================================ */
:root.nova-tokens {
--color-violet-desaturated-0: #f9f5e6;
--color-violet-desaturated-10: #fde8b5;
--color-violet-desaturated-20: #fbcc77;
--color-violet-desaturated-30: #fbcc77;
--color-violet-desaturated-40: #db820e;
--color-violet-desaturated-50: #f3a81e;
--color-violet-desaturated-60: #b26100;
--color-violet-desaturated-70: #854800;
--color-violet-desaturated-80: #5f3100;
--color-violet-desaturated-90: #3e1d00;
}
:root {
/* Main accent */
--color-accent-primary: #f3a81e !important;
--color-accent-primary-hover: #db820e !important;
--color-accent-primary-active: #b26100 !important;
--color-accent-primary-selected: #b26100 !important;
/* Preferences navigation */
--page-nav-button-background-color-selected: #f3a81e !important;
--page-nav-button-background-color-hover: #383428 !important;
--page-nav-button-background-color-active: #fbcc77 !important;
/* Focus */
--focus-outline-color: #f3a81e !important;
--focus-outline: 2px solid #f3a81e !important;
/* Information/accent colors */
--icon-color-information: #f3a81e !important;
/* Links */
--link-color: #f3a81e !important;
--link-color-hover: #db820e !important;
--link-color-active: #b26100 !important;
--link-color-visited: #f3a81e !important;
/* Selected borders */
--border-color-selected: #f3a81e !important;
}
}
@-moz-document url-prefix("about:preferences") {
/* ============================================================
NOVA FOUNDATION TOKENS — replace remaining violet
============================================================ */
:root.nova-tokens {
--color-violet-desaturated-0: #f9f5e6;
--color-violet-desaturated-10: #fde8b5;
--color-violet-desaturated-20: #fbcc77;
--color-violet-desaturated-30: #fbcc77;
--color-violet-desaturated-40: #db820e;
--color-violet-desaturated-50: #f3a81e;
--color-violet-desaturated-60: #b26100;
--color-violet-desaturated-70: #854800;
--color-violet-desaturated-80: #5f3100;
--color-violet-desaturated-90: #3e1d00;
}
:root,
moz-page-nav,
moz-page-nav-button {
/* ========================================================
NOVA VIOLET PALETTE → YELLOW PALETTE
======================================================== */
--color-violet-0: #f9f5e6 !important;
--color-violet-10: #fde8b5 !important;
--color-violet-20: #fbcc77 !important;
--color-violet-30: #fbcc77 !important;
--color-violet-40: #db820e !important;
--color-violet-50: #f3a81e !important;
--color-violet-60: #b26100 !important;
--color-violet-70: #854800 !important;
--color-violet-80: #5f3100 !important;
--color-violet-90: #3e1d00 !important;
/* ========================================================
DESATURATED VIOLET → YELLOW
These values are used by buttons, cards and secondary
UI states.
======================================================== */
--color-violet-desaturated-0: #f9f5e6 !important;
--color-violet-desaturated-10: #fde8b5 !important;
--color-violet-desaturated-20: #fbcc77 !important;
--color-violet-desaturated-30: #fbcc77 !important;
--color-violet-desaturated-40: #db820e !important;
--color-violet-desaturated-50: #b26100 !important;
--color-violet-desaturated-60: #854800 !important;
--color-violet-desaturated-70: #5f3100 !important;
--color-violet-desaturated-80: #3e1d00 !important;
--color-violet-desaturated-90: #270f00 !important;
/* ========================================================
SEMANTIC ACCENT TOKENS
These are fallbacks for places that reference the
semantic accent variables directly.
======================================================== */
--color-accent-primary:
light-dark(#f3a81e, #fbcc77) !important;
--color-accent-primary-hover:
light-dark(#db820e, #fde8b5) !important;
--color-accent-primary-active:
light-dark(#b26100, #fde8b5) !important;
--color-accent-primary-selected:
light-dark(#b26100, #fde8b5) !important;
/* ========================================================
GENERAL PURPLE BACKGROUNDS
======================================================== */
--background-color-information:
light-dark(#fde8b5, #5f3100) !important;
--background-color-list-item-hover:
color-mix(
in srgb,
light-dark(#f3a81e, #fbcc77) 20%,
transparent
) !important;
--lists-button-background:
light-dark(#fde8b5, #5f3100) !important;
/* ========================================================
SELECTION / FOCUS
======================================================== */
--border-color-selected:
light-dark(#f3a81e, #b26100) !important;
--focus-outline:
2px solid light-dark(#f3a81e, #b26100) !important;
--focus-outline-color:
light-dark(#f3a81e, #b26100) !important;
--card-focus-outline:
2px solid light-dark(#f3a81e, #b26100) !important;
/* ========================================================
BUTTON BACKGROUNDS
Most of these should now resolve through the palette,
but these explicit semantic fallbacks catch components
that define their own button tokens.
======================================================== */
--button-background-color-primary:
light-dark(#f3a81e, #fbcc77) !important;
--button-background-color-primary-hover:
light-dark(#db820e, #fde8b5) !important;
--button-background-color-primary-active:
light-dark(#b26100, #fde8b5) !important;
--button-background-color-primary-selected:
light-dark(#b26100, #fde8b5) !important;
--button-background-color-primary-disabled:
light-dark(#5f3100, #854800) !important;
--button-background-color-selected:
light-dark(#fbcc77, #854800) !important;
--button-background-color-hover:
light-dark(#fde8b5, #5f3100) !important;
--button-background-color-active:
light-dark(#fbcc77, #854800) !important;
/* Ghost buttons */
--button-background-color-ghost-active:
light-dark(#fbcc77, #854800) !important;
--button-background-color-ghost-hover:
light-dark(#fde8b5, #5f3100) !important;
--button-background-color-ghost-selected:
light-dark(#fbcc77, #854800) !important;
--button-background-color-ghost-disabled:
transparent !important;
/* Menu buttons */
--button-background-color-menu:
transparent !important;
--button-background-color-menu-active:
light-dark(#fbcc77, #854800) !important;
--button-background-color-menu-hover:
light-dark(#fde8b5, #5f3100) !important;
--button-background-color-menu-selected:
light-dark(#fbcc77, #854800) !important;
--button-background-color-menu-disabled:
transparent !important;
/* Toolbar buttons */
--button-background-color-toolbar-selected:
light-dark(#fbcc77, #854800) !important;
--button-background-color-toolbar-active:
light-dark(
rgba(95, 49, 0, 0.4),
rgba(251, 204, 119, 0.4)
) !important;
--button-background-color-toolbar-hover:
light-dark(
rgba(95, 49, 0, 0.25),
rgba(251, 204, 119, 0.25)
) !important;
/* ========================================================
BUTTON BORDERS
======================================================== */
--button-border:
1px solid light-dark(#f3a81e, #b26100) !important;
--button-border-color:
light-dark(#f3a81e, #b26100) !important;
--button-border-color-active:
light-dark(#f3a81e, #b26100) !important;
--button-border-color-disabled:
light-dark(#f3a81e, #b26100) !important;
--button-border-color-hover:
light-dark(#f3a81e, #b26100) !important;
--button-border-color-selected:
light-dark(#f3a81e, #b26100) !important;
--button-border-color-toolbar-disabled:
light-dark(#f3a81e, #b26100) !important;
--button-split-separator-background-color:
light-dark(#f3a81e, #b26100) !important;
/* ========================================================
CARDS
======================================================== */
--card-header-background-color-active:
light-dark(#fbcc77, #854800) !important;
--card-header-background-color-hover:
light-dark(#fde8b5, #5f3100) !important;
/* ========================================================
ICONS
======================================================== */
--icon-color:
light-dark(#3e1d00, #f9f5e6) !important;
--icon-color-accent-primary-desaturated:
light-dark(#854800, #fbcc77) !important;
--icon-color-information:
light-dark(#f3a81e, #fbcc77) !important;
/* ========================================================
LINKS
======================================================== */
--link-color:
light-dark(#f3a81e, #fbcc77) !important;
--link-color-hover:
light-dark(#db820e, #fde8b5) !important;
--link-color-active:
light-dark(#b26100, #fde8b5) !important;
--link-color-visited:
light-dark(#f3a81e, #fbcc77) !important;
/* ========================================================
PAGE NAVIGATION / SHADOW DOM
======================================================== */
--page-nav-button-background-color-active:
light-dark(#fbcc77, #854800) !important;
--page-nav-button-background-color-hover:
light-dark(#fde8b5, #5f3100) !important;
--page-nav-button-background-color-selected:
light-dark(#f3a81e, #b26100) !important;
--page-nav-button-text-color-selected:
light-dark(#ffffff, #252428) !important;
/* ========================================================
TABLES
======================================================== */
--table-header-background-color:
light-dark(#f3a81e, #b26100) !important;
/* ========================================================
TOOLBAR / TOOLBOX
======================================================== */
--toolbar-field-border-color-focus:
light-dark(#f3a81e, #b26100) !important;
--toolbarbutton-background-color-active:
light-dark(
rgba(95, 49, 0, 0.4),
rgba(251, 204, 119, 0.4)
) !important;
--toolbarbutton-background-color-hover:
light-dark(
rgba(95, 49, 0, 0.25),
rgba(251, 204, 119, 0.25)
) !important;
--toolbarbutton-icon-fill:
light-dark(#854800, #fde8b5) !important;
--toolbarbutton-icon-fill-attention:
light-dark(#f3a81e, #fbcc77) !important;
/* ========================================================
TOOLBOX GRADIENT
======================================================== */
--toolbox-background-color-gradient-leading:
light-dark(#fde8b5, #5f3100) !important;
/* ========================================================
PURPLE-TINTED TEXT
Keep normal text neutral rather than turning it yellow.
======================================================== */
--text-color:
light-dark(#252428, #fcfbff) !important;
--panel-text-color:
light-dark(#252428, #fcfbff) !important;
--input-text-color:
light-dark(#252428, #fcfbff) !important;
--input-text-color-disabled:
light-dark(#252428, #fcfbff) !important;
}
}