Nova-ify the viewer (bug 2063405)

external/stylelint/mozcentral-tokens.css

@@ -0,0 +1,91 @@
+/* Copyright 2026 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:root {
+  --background-color-box: initial;
+  --background-color-box-info: initial;
+  --background-color-canvas: initial;
+  --background-color-critical: initial;
+  --background-color-information: initial;
+  --background-color-success: initial;
+  --border-color: initial;
+  --border-color-deemphasized: initial;
+  --border-color-interactive: initial;
+  --border-color-interactive-hover: initial;
+  --border-radius-circle: initial;
+  --border-radius-large: initial;
+  --border-radius-medium: initial;
+  --border-radius-small: initial;
+  --border-radius-xsmall: initial;
+  --box-shadow-level-2: initial;
+  --box-shadow-level-3: initial;
+  --button-background-color: initial;
+  --button-background-color-active: initial;
+  --button-background-color-ghost-hover: initial;
+  --button-background-color-hover: initial;
+  --button-background-color-menu-active: initial;
+  --button-background-color-menu-hover: initial;
+  --button-border: initial;
+  --button-border-color: initial;
+  --button-border-color-active: initial;
+  --button-border-color-hover: initial;
+  --button-border-radius: initial;
+  --button-font-weight: initial;
+  --button-min-height: initial;
+  --button-opacity-disabled: initial;
+  --button-padding-block: initial;
+  --button-padding-inline: initial;
+  --button-text-color: initial;
+  --button-text-color-hover: initial;
+  --button-text-color-menu-active: initial;
+  --button-text-color-menu-hover: initial;
+  --button-text-color-primary: initial;
+  --color-accent-attention: initial;
+  --color-accent-primary: initial;
+  --color-accent-primary-active: initial;
+  --color-gray-15: initial;
+  --color-gray-85: initial;
+  --focus-outline: initial;
+  --focus-outline-inset: initial;
+  --focus-outline-offset: initial;
+  --font-size-root: initial;
+  --font-size-small: initial;
+  --font-weight: initial;
+  --icon-color: initial;
+  --icon-color-critical: initial;
+  --icon-color-information: initial;
+  --input-search-border-radius: initial;
+  --link-color: initial;
+  --link-color-hover: initial;
+  --panel-border-radius: initial;
+  --panel-menuitem-border-radius: initial;
+  --panel-menuitem-margin: initial;
+  --panel-menuitem-margin-inline: initial;
+  --panel-menuitem-padding: initial;
+  --panel-menuitem-padding-inline: initial;
+  --size-item-large: initial;
+  --size-item-medium: initial;
+  --space-large: initial;
+  --space-medium: initial;
+  --space-small: initial;
+  --space-xsmall: initial;
+  --space-xxsmall: initial;
+  --text-color: initial;
+  --text-color-deemphasized: initial;
+  --toolbar-background-color: initial;
+  --toolbarbutton-background-color-active: initial;
+  --toolbarbutton-background-color-hover: initial;
+  --toolbarbutton-icon-fill: initial;
+}

stylelint-mozcentral.json

@@ -1,5 +1,6 @@
 {
   "plugins": ["./external/stylelint/no-unused-custom-properties.mjs"],
+  "referenceFiles": ["./external/stylelint/mozcentral-tokens.css"],
   "rules": {
     "no-unknown-custom-properties": true,
     "pdfjs/no-unused-custom-properties": [

web/annotation_editor_layer_builder.css

@@ -267,6 +267,21 @@
     --alt-text-hover-done-color: var(--alt-text-done-color);
     --alt-text-hover-warning-color: var(--alt-text-warning-color);
 
+    /* Match Nova's panel surface and 32px toolbar controls. */
+    /*#if MOZCENTRAL*/
+    @media -moz-pref("pdfjs.enableNova") and -moz-pref("browser.nova.enabled") {
+      --editor-toolbar-bg-color: var(--background-color-box);
+      --editor-toolbar-fg-color: var(--toolbarbutton-icon-fill);
+      --editor-toolbar-border-color: var(--border-color-deemphasized);
+      --editor-toolbar-hover-bg-color: var(
+        --toolbarbutton-background-color-hover
+      );
+      --editor-toolbar-shadow: var(--box-shadow-level-2);
+      --editor-toolbar-height: var(--size-item-large);
+      --alt-text-warning-color: var(--icon-color-information);
+    }
+    /*#endif*/
+
     @media screen and (forced-colors: active) {
       --editor-toolbar-bg-color: var(--button-background-color, ButtonFace);
       --editor-toolbar-fg-color: var(--button-text-color, ButtonText);
@@ -320,6 +335,12 @@
     border: 1px solid var(--editor-toolbar-border-color);
     box-shadow: var(--editor-toolbar-shadow);
 
+    /*#if MOZCENTRAL*/
+    @media -moz-pref("pdfjs.enableNova") and -moz-pref("browser.nova.enabled") {
+      border-radius: var(--panel-border-radius);
+    }
+    /*#endif*/
+
     &.hidden {
       display: none;
     }
@@ -413,6 +434,15 @@
           border-radius: 2px;
           outline: 2px solid var(--editor-toolbar-focus-outline-color);
         }
+
+        /* Match the radius of hovered and focused Nova buttons. */
+        /*#if MOZCENTRAL*/
+        @media -moz-pref("pdfjs.enableNova") and -moz-pref("browser.nova.enabled") {
+          &:is(:hover, :focus-visible) {
+            border-radius: var(--button-border-radius);
+          }
+        }
+        /*#endif*/
       }
 
       .altText {
@@ -493,6 +523,17 @@
             --alt-text-tooltip-shadow: 0 2px 6px 0
               light-dark(rgb(58 57 68 / 0.2), #15141a);
 
+            /* Use Nova's box surface and compact radius. */
+            /*#if MOZCENTRAL*/
+            @media -moz-pref("pdfjs.enableNova") and -moz-pref("browser.nova.enabled") {
+              --alt-text-tooltip-bg: var(--background-color-box);
+              --alt-text-tooltip-border: var(--border-color-deemphasized);
+              --alt-text-tooltip-shadow: var(--box-shadow-level-2);
+
+              border-radius: var(--border-radius-xsmall);
+            }
+            /*#endif*/
+
             @media screen and (forced-colors: active) {
               --alt-text-tooltip-bg: Canvas;
               --alt-text-tooltip-fg: var(--text-color, CanvasText);
@@ -619,6 +660,15 @@
     --no-alt-text-badge-bg-color: light-dark(#cfcfd8, #fbfbfe);
     --no-alt-text-badge-fg-color: light-dark(#5b5b66, #15141a);
 
+    /* Use Nova's neutral badge colors. */
+    /*#if MOZCENTRAL*/
+    @media -moz-pref("pdfjs.enableNova") and -moz-pref("browser.nova.enabled") {
+      --no-alt-text-badge-border-color: var(--border-color-deemphasized);
+      --no-alt-text-badge-bg-color: var(--background-color-box);
+      --no-alt-text-badge-fg-color: var(--icon-color);
+    }
+    /*#endif*/
+
     @media screen and (forced-colors: active) {
       --no-alt-text-badge-border-color: ButtonText;
       --no-alt-text-badge-bg-color: ButtonFace;
@@ -641,6 +691,12 @@
     border: 1px solid var(--no-alt-text-badge-border-color);
     background: var(--no-alt-text-badge-bg-color);
 
+    /*#if MOZCENTRAL*/
+    @media -moz-pref("pdfjs.enableNova") and -moz-pref("browser.nova.enabled") {
+      border-radius: var(--border-radius-xsmall);
+    }
+    /*#endif*/
+
     &::before {
       content: "";
       display: inline-block;
@@ -906,6 +962,13 @@
   --preview-image-bg-color: light-dark(#f0f0f4, #2b2a33);
   --preview-image-border: none;
 
+  /* Use Nova's secondary box surface for the preview. */
+  /*#if MOZCENTRAL*/
+  @media -moz-pref("pdfjs.enableNova") and -moz-pref("browser.nova.enabled") {
+    --preview-image-bg-color: var(--background-color-box-info);
+  }
+  /*#endif*/
+
   @media screen and (forced-colors: active) {
     --preview-image-bg-color: ButtonFace;
     --preview-image-border: 1px solid ButtonText;
@@ -1089,6 +1152,14 @@
   --selected-outline-color: light-dark(#0060df, #aaf2ff);
   --swatch-border-color: light-dark(#cfcfd8, #52525e);
 
+  /* Use Nova selection and border colors for the swatches. */
+  /*#if MOZCENTRAL*/
+  @media -moz-pref("pdfjs.enableNova") and -moz-pref("browser.nova.enabled") {
+    --selected-outline-color: var(--color-accent-primary);
+    --swatch-border-color: var(--border-color-deemphasized);
+  }
+  /*#endif*/
+
   @media screen and (forced-colors: active) {
     --hover-outline-color: Highlight;
     --selected-outline-color: var(--hover-outline-color);
@@ -1113,6 +1184,15 @@
 .basicColorPicker {
   width: 28px;
 
+  /* Keep the swatch square when the row height changes. */
+  /*#if MOZCENTRAL*/
+  @media -moz-pref("pdfjs.enableNova") and -moz-pref("browser.nova.enabled") {
+    width: auto;
+    aspect-ratio: 1;
+    padding: var(--space-small);
+  }
+  /*#endif*/
+
   &::-moz-color-swatch {
     border-radius: 100%;
     margin: 0;
@@ -1219,6 +1299,14 @@
           &:has(.dropdown:not(.hidden)) {
             background-color: var(--editor-toolbar-hover-bg-color);
 
+            /* Match the active toolbar-button state while the menu is open. */
+            /*#if MOZCENTRAL*/
+            @media -moz-pref("pdfjs.enableNova") and -moz-pref("browser.nova.enabled") {
+              background-color: var(--toolbarbutton-background-color-active);
+              border-radius: var(--button-border-radius);
+            }
+            /*#endif*/
+
             &::after {
               scale: -1;
             }
@@ -1265,6 +1353,30 @@
                 outline: 2px solid var(--hover-outline-color);
               }
             }
+
+            /* Match Firefox's horizontal visual picker. Keep this after the
+               button rule to override its width: 100%. */
+            /*#if MOZCENTRAL*/
+            @media -moz-pref("pdfjs.enableNova") and -moz-pref("browser.nova.enabled") {
+              flex-direction: row;
+              gap: var(--space-small);
+              padding: var(--space-small);
+              width: max-content;
+              inset-inline-start: 50%;
+              translate: calc(-50% * var(--dir-factor));
+              border-radius: var(--border-radius-medium);
+
+              button {
+                width: auto;
+                flex: 0 0 auto;
+
+                > .swatch {
+                  width: var(--size-item-medium);
+                  height: var(--size-item-medium);
+                }
+              }
+            }
+            /*#endif*/
           }
         }
       }

web/app_options.js

@@ -417,10 +417,8 @@ const defaultOptions = new Map([
     },
   ],
   [
-    // Whether the viewer follows the Firefox design system (see the pref-gated
-    // @import of tokens-brand.css in viewer.css). Read from CSS via
-    // -moz-pref(), not from JS, so it is Firefox-only and has no effect
-    // elsewhere.
+    // Import Firefox design-system tokens and enable Nova viewer styles. The
+    // Nova overrides also require browser.nova.enabled.
     "enableNova",
     {
       /** @type {boolean} */

web/buttons.css

@@ -82,6 +82,16 @@
     --hover-filter: brightness(1.4);
   }
 
+  /* Nova supplies state colors; preserve its border and disabled opacity. */
+  /*#if MOZCENTRAL && !GECKOVIEW*/
+  @media -moz-pref("pdfjs.enableNova") and -moz-pref("browser.nova.enabled") {
+    --hover-filter: none;
+    --button-disabled-opacity: var(--button-opacity-disabled);
+    --button-secondary-hover-border-color: var(--button-border-color-hover);
+    --button-secondary-active-border-color: var(--button-border-color-active);
+  }
+  /*#endif*/
+
   @media screen and (forced-colors: active) {
     --button-primary-bg-color: var(
       --button-background-color-primary,