Sync the viewer chrome with the Firefox design system

The chrome is now authored against Firefox design-token names with the shipped
value as a fallback `var(--fx-token, <literal>)` so colors, borders and radii
follow Firefox instead of having to be re-synced by hand.

In MOZCENTRAL viewer.css imports chrome://global/skin/design-system/tokens-brand.css,
gated on the new pdfjs.enableNova pref (default false, read straight from CSS via -moz-pref()).
With the pref off the sheet isn't applied, every fallback resolves, and the
viewer renders as before, as it also does in the GENERIC and components builds,
which never see the chrome sheet.

Consuming a token means never declaring its name in an unlayered rule, which
would shadow Firefox's for the whole subtree; --focus-outline, --border-color and
--text-color/--button-border-color are therefore renamed to
--editor-selection-outline, --signature-border-color and --views-*. In forced
colors each state reads a matching background/foreground/border triple so it
can't collapse to a single system color.

The dialog button styling also moves out of `.dialog .mainContainer button` into
a shared .primaryButton/.secondaryButton primitive (buttons.css, imported from
pdf_viewer.css so the components build gets it too). The password,
document-properties, print and undo-bar buttons use it in place of .dialogButton,
and the custom radio appearance gives way to native controls tinted with
accent-color.

web/annotation_editor_layer_builder.css

@@ -21,15 +21,18 @@
 :root {
   --editor-toolbar-vert-offset: 6px;
   --outline-width: 2px;
-  --outline-color: #0060df;
+  /* Palette primitives, not the semantic light-dark tokens: these are drawn on
+     the always-light PDF page, where --color-accent-primary and friends would
+     resolve to their dark value. */
+  --outline-color: var(--color-blue-60, #0060df);
   --outline-around-width: 1px;
-  --outline-around-color: #f0f0f4;
+  --outline-around-color: var(--color-gray-20, #f0f0f4);
   --hover-outline-around-color: var(--outline-around-color);
-  --focus-outline: solid var(--outline-width) var(--outline-color);
+  --editor-selection-outline: solid var(--outline-width) var(--outline-color);
   --unfocus-outline: solid var(--outline-width) transparent;
   --focus-outline-around: solid var(--outline-around-width)
     var(--outline-around-color);
-  --hover-outline-color: #8f8f9d;
+  --hover-outline-color: var(--color-gray-60, #8f8f9d);
   --hover-outline: solid var(--outline-width) var(--hover-outline-color);
   --hover-outline-around: solid var(--outline-around-width)
     var(--hover-outline-around-color);
@@ -95,7 +98,7 @@
     --outline-color: CanvasText;
     --outline-around-color: ButtonFace;
     --resizer-bg-color: ButtonText;
-    --hover-outline-color: Highlight;
+    --hover-outline-color: var(--color-accent-primary-hover, Highlight);
     --hover-outline-around-color: SelectedItemText;
   }
 }
@@ -188,7 +191,7 @@
   }
 
   &.selectedEditor {
-    border: var(--focus-outline);
+    border: var(--editor-selection-outline);
     outline: var(--focus-outline-around);
 
     &::before {
@@ -244,30 +247,51 @@
     --editor-toolbar-bg-color: light-dark(#f0f0f4, #2b2a33);
     --editor-toolbar-highlight-image: url(images/toolbarButton-editorHighlight.svg);
     --editor-toolbar-fg-color: light-dark(#2e2e56, #fbfbfe);
-    --editor-toolbar-border-color: #8f8f9d;
+    --editor-toolbar-border-color: var(--border-color-interactive, #8f8f9d);
     --editor-toolbar-hover-border-color: var(--editor-toolbar-border-color);
     --editor-toolbar-hover-bg-color: light-dark(#e0e0e6, #52525e);
     --editor-toolbar-hover-fg-color: var(--editor-toolbar-fg-color);
     --editor-toolbar-hover-outline: none;
-    --editor-toolbar-focus-outline-color: light-dark(#0060df, #0df);
+    --editor-toolbar-focus-outline-color: var(
+      --focus-outline-color,
+      light-dark(#0060df, #0df)
+    );
     --editor-toolbar-shadow: 0 2px 6px 0 rgb(58 57 68 / 0.2);
     --editor-toolbar-height: 28px;
     --editor-toolbar-padding: 2px;
-    --alt-text-done-color: light-dark(#2ac3a2, #54ffbd);
+    --alt-text-done-color: var(
+      --color-accent-attention,
+      light-dark(#2ac3a2, #54ffbd)
+    );
     --alt-text-warning-color: light-dark(#0090ed, #80ebff);
     --alt-text-hover-done-color: var(--alt-text-done-color);
     --alt-text-hover-warning-color: var(--alt-text-warning-color);
 
     @media screen and (forced-colors: active) {
-      --editor-toolbar-bg-color: ButtonFace;
+      --editor-toolbar-bg-color: var(--button-background-color, ButtonFace);
-      --editor-toolbar-fg-color: ButtonText;
+      --editor-toolbar-fg-color: var(--button-text-color, ButtonText);
-      --editor-toolbar-border-color: ButtonText;
+      --editor-toolbar-border-color: var(--button-border-color, ButtonText);
-      --editor-toolbar-hover-border-color: AccentColor;
+      --editor-toolbar-hover-border-color: var(
-      --editor-toolbar-hover-bg-color: ButtonFace;
+        --button-border-color-hover,
-      --editor-toolbar-hover-fg-color: AccentColor;
+        AccentColor
+      );
+      --editor-toolbar-hover-bg-color: var(
+        --button-background-color-hover,
+        ButtonFace
+      );
+      --editor-toolbar-hover-fg-color: var(
+        --button-text-color-hover,
+        AccentColor
+      );
       --editor-toolbar-hover-outline: 2px solid
         var(--editor-toolbar-hover-border-color);
-      --editor-toolbar-focus-outline-color: ButtonBorder;
+      /* --button-border-color, not --focus-outline-color: the ring is painted
+         on the toolbar's own ButtonFace surface, and --focus-outline-color is
+         CanvasText in Firefox HCM. */
+      --editor-toolbar-focus-outline-color: var(
+        --button-border-color,
+        ButtonBorder
+      );
       --editor-toolbar-shadow: none;
       --alt-text-done-color: var(--editor-toolbar-fg-color);
       --alt-text-warning-color: var(--editor-toolbar-fg-color);
@@ -461,15 +485,18 @@
 
           &.show {
             --alt-text-tooltip-bg: light-dark(#f0f0f4, #1c1b22);
-            --alt-text-tooltip-fg: light-dark(#15141a, #fbfbfe);
+            --alt-text-tooltip-fg: var(
-            --alt-text-tooltip-border: #8f8f9d;
+              --text-color,
+              light-dark(#15141a, #fbfbfe)
+            );
+            --alt-text-tooltip-border: var(--border-color-interactive, #8f8f9d);
             --alt-text-tooltip-shadow: 0 2px 6px 0
               light-dark(rgb(58 57 68 / 0.2), #15141a);
 
             @media screen and (forced-colors: active) {
               --alt-text-tooltip-bg: Canvas;
-              --alt-text-tooltip-fg: CanvasText;
+              --alt-text-tooltip-fg: var(--text-color, CanvasText);
-              --alt-text-tooltip-border: CanvasText;
+              --alt-text-tooltip-border: var(--border-color, CanvasText);
               --alt-text-tooltip-shadow: none;
             }
 
@@ -1055,7 +1082,10 @@
 }
 
 .colorPicker {
-  --hover-outline-color: light-dark(#0250bb, #80ebff);
+  --hover-outline-color: var(
+    --color-accent-primary-hover,
+    light-dark(#0250bb, #80ebff)
+  );
   --selected-outline-color: light-dark(#0060df, #aaf2ff);
   --swatch-border-color: light-dark(#cfcfd8, #52525e);
 

web/app_options.js

@@ -416,6 +416,18 @@ const defaultOptions = new Map([
       kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
     },
   ],
+  [
+    // 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.
+    "enableNova",
+    {
+      /** @type {boolean} */
+      value: true,
+      kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
+    },
+  ],
   [
     "enableOptimizedPartialRendering",
     {

web/buttons.css

@@ -0,0 +1,247 @@
+/* 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.
+ */
+
+/*
+ * Shared button primitive: .primaryButton / .secondaryButton, for any button in
+ * the viewer and not only those inside a .dialog. The colors consume Firefox
+ * design tokens with the shipped literal as a fallback (see pdf_viewer.css).
+ */
+
+:root {
+  --button-primary-bg-color: var(
+    --button-background-color-primary,
+    light-dark(#0060df, #0df)
+  );
+  --button-primary-fg-color: var(
+    --button-text-color-primary,
+    light-dark(#fbfbfe, #15141a)
+  );
+  --button-primary-border-color: var(--button-primary-bg-color);
+  --button-primary-active-bg-color: var(
+    --button-background-color-primary-active,
+    light-dark(#054096, #aaf2ff)
+  );
+  --button-primary-active-fg-color: var(--button-primary-fg-color);
+  --button-primary-active-border-color: var(--button-primary-active-bg-color);
+  --button-primary-hover-bg-color: var(
+    --button-background-color-primary-hover,
+    light-dark(#0250bb, #80ebff)
+  );
+  --button-primary-hover-fg-color: var(--button-primary-fg-color);
+  --button-primary-hover-border-color: var(--button-primary-hover-bg-color);
+  --button-primary-disabled-bg-color: var(--button-primary-bg-color);
+  --button-primary-disabled-border-color: var(--button-primary-border-color);
+  --button-primary-disabled-fg-color: var(--button-primary-fg-color);
+
+  --button-secondary-bg-color: var(
+    --button-background-color,
+    light-dark(rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07))
+  );
+  --button-secondary-fg-color: var(--text-color, light-dark(#15141a, #fbfbfe));
+  /* Firefox's outline-style secondary button has a transparent fill and carries
+     the edge on --button-border-color; the fallback matches the fill instead,
+     since the shipped one is a translucent overlay. */
+  --button-secondary-border-color: var(
+    --button-border-color,
+    var(--button-secondary-bg-color)
+  );
+  --button-secondary-active-bg-color: var(
+    --button-background-color-active,
+    light-dark(rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21))
+  );
+  --button-secondary-active-fg-color: var(--button-secondary-fg-color);
+  --button-secondary-active-border-color: var(--button-secondary-bg-color);
+  --button-secondary-hover-bg-color: var(
+    --button-background-color-hover,
+    light-dark(rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14))
+  );
+  --button-secondary-hover-fg-color: var(--button-secondary-fg-color);
+  --button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);
+  --button-secondary-disabled-bg-color: var(--button-secondary-bg-color);
+  --button-secondary-disabled-border-color: var(
+    --button-secondary-border-color
+  );
+  --button-secondary-disabled-fg-color: var(--button-secondary-fg-color);
+  --button-disabled-opacity: 0.4;
+  --hover-filter: brightness(0.9);
+
+  @media (prefers-color-scheme: dark) {
+    --button-disabled-opacity: 0.6;
+    --hover-filter: brightness(1.4);
+  }
+
+  @media screen and (forced-colors: active) {
+    --button-primary-bg-color: var(
+      --button-background-color-primary,
+      ButtonText
+    );
+    --button-primary-fg-color: var(--button-text-color-primary, ButtonFace);
+    --button-primary-border-color: var(
+      --button-border-color-primary,
+      ButtonText
+    );
+    --button-primary-active-bg-color: var(
+      --button-background-color-primary-active,
+      SelectedItem
+    );
+    --button-primary-active-fg-color: var(
+      --button-text-color-primary-active,
+      HighlightText
+    );
+    --button-primary-active-border-color: var(
+      --button-border-color-primary-active,
+      ButtonText
+    );
+    --button-primary-hover-bg-color: var(
+      --button-background-color-primary-hover,
+      SelectedItem
+    );
+    --button-primary-hover-fg-color: var(
+      --button-text-color-primary-hover,
+      HighlightText
+    );
+    --button-primary-hover-border-color: var(
+      --button-border-color-primary-hover,
+      SelectedItem
+    );
+    --button-primary-disabled-bg-color: var(
+      --button-background-color-primary-disabled,
+      GrayText
+    );
+    --button-primary-disabled-fg-color: var(
+      --button-text-color-primary-disabled,
+      ButtonFace
+    );
+    --button-primary-disabled-border-color: var(
+      --button-border-color-primary-disabled,
+      GrayText
+    );
+
+    --button-secondary-bg-color: var(--button-background-color, ButtonFace);
+    --button-secondary-fg-color: var(--button-text-color, ButtonText);
+    --button-secondary-border-color: var(--button-border-color, ButtonText);
+    --button-secondary-active-bg-color: var(
+      --button-background-color-active,
+      HighlightText
+    );
+    --button-secondary-active-fg-color: var(
+      --button-text-color-active,
+      SelectedItem
+    );
+    --button-secondary-active-border-color: var(
+      --button-border-color-active,
+      ButtonText
+    );
+    --button-secondary-hover-bg-color: var(
+      --button-background-color-hover,
+      HighlightText
+    );
+    --button-secondary-hover-fg-color: var(
+      --button-text-color-hover,
+      SelectedItem
+    );
+    --button-secondary-hover-border-color: var(
+      --button-border-color-hover,
+      SelectedItem
+    );
+    --button-secondary-disabled-fg-color: var(
+      --button-text-color-disabled,
+      GrayText
+    );
+    --button-secondary-disabled-border-color: var(
+      --button-border-color-disabled,
+      GrayText
+    );
+    --button-disabled-opacity: 1;
+    --hover-filter: none;
+  }
+}
+
+.primaryButton,
+.secondaryButton {
+  border-radius: var(--button-border-radius, 4px);
+  border: 1px solid;
+  font: menu;
+  font-weight: var(--button-font-weight, 590);
+  font-size: var(--button-font-size, 13px);
+  padding: var(--button-padding, 4px 16px);
+  width: auto;
+  min-height: var(--button-min-height, 32px);
+
+  &:hover {
+    cursor: pointer;
+    filter: var(--hover-filter);
+  }
+
+  > span {
+    color: inherit;
+    font: inherit;
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+}
+
+.primaryButton {
+  color: var(--button-primary-fg-color);
+  background-color: var(--button-primary-bg-color);
+  border-color: var(--button-primary-border-color);
+  opacity: 1;
+
+  &:hover {
+    color: var(--button-primary-hover-fg-color);
+    background-color: var(--button-primary-hover-bg-color);
+    border-color: var(--button-primary-hover-border-color);
+  }
+
+  &:active {
+    color: var(--button-primary-active-fg-color);
+    background-color: var(--button-primary-active-bg-color);
+    border-color: var(--button-primary-active-border-color);
+  }
+
+  &:disabled {
+    background-color: var(--button-primary-disabled-bg-color);
+    border-color: var(--button-primary-disabled-border-color);
+    color: var(--button-primary-disabled-fg-color);
+    opacity: var(--button-disabled-opacity);
+  }
+}
+
+.secondaryButton {
+  color: var(--button-secondary-fg-color);
+  background-color: var(--button-secondary-bg-color);
+  border-color: var(--button-secondary-border-color);
+
+  &:hover {
+    color: var(--button-secondary-hover-fg-color);
+    background-color: var(--button-secondary-hover-bg-color);
+    border-color: var(--button-secondary-hover-border-color);
+  }
+
+  &:active {
+    color: var(--button-secondary-active-fg-color);
+    background-color: var(--button-secondary-active-bg-color);
+    border-color: var(--button-secondary-active-border-color);
+  }
+
+  &:disabled {
+    background-color: var(--button-secondary-disabled-bg-color);
+    border-color: var(--button-secondary-disabled-border-color);
+    color: var(--button-secondary-disabled-fg-color);
+    opacity: var(--button-disabled-opacity);
+  }
+}

web/comment_manager.css

@@ -65,39 +65,86 @@
 :is(.annotationLayer, .annotationEditorLayer) {
   .annotationCommentButton {
     color-scheme: light dark;
-    --comment-button-bg: light-dark(white, #1c1b22);
+    --comment-button-bg: var(
+      --background-color-canvas,
+      light-dark(white, #1c1b22)
+    );
     --comment-button-fg: light-dark(#5b5b66, #fbfbfe);
     --comment-button-active-bg: light-dark(#0041a4, #a6ecf4);
-    --comment-button-active-fg: light-dark(white, #15141a);
+    --comment-button-active-fg: var(
-    --comment-button-hover-bg: light-dark(#0053cb, #61dce9);
+      --button-text-color-primary,
-    --comment-button-hover-fg: light-dark(white, #15141a);
+      light-dark(white, #15141a)
-    --comment-button-selected-bg: light-dark(#0062fa, #00cadb);
+    );
-    --comment-button-border-color: light-dark(#8f8f9d, #bfbfc9);
+    --comment-button-hover-bg: var(
+      --color-accent-primary-hover,
+      light-dark(#0053cb, #61dce9)
+    );
+    --comment-button-hover-fg: var(
+      --button-text-color-primary,
+      light-dark(white, #15141a)
+    );
+    --comment-button-selected-bg: var(
+      --color-accent-primary,
+      light-dark(#0062fa, #00cadb)
+    );
+    --comment-button-border-color: var(
+      --border-color-interactive,
+      light-dark(#8f8f9d, #bfbfc9)
+    );
     --comment-button-active-border-color: var(--comment-button-active-bg);
     --comment-button-focus-border-color: light-dark(#cfcfd8, #3a3944);
     --comment-button-hover-border-color: var(--comment-button-hover-bg);
     --comment-button-selected-border-color: var(--comment-button-selected-bg);
-    --comment-button-selected-fg: light-dark(white, #15141a);
+    --comment-button-selected-fg: var(
+      --button-text-color-primary,
+      light-dark(white, #15141a)
+    );
     --comment-button-dim: 24px;
     --comment-button-box-shadow:
       0 0.25px 0.75px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)),
       0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4));
-    --comment-button-focus-outline-color: light-dark(#0062fa, #00cadb);
+    --comment-button-focus-outline-color: var(
+      --focus-outline-color,
+      light-dark(#0062fa, #00cadb)
+    );
 
+    /* Each state reads the *matching* pair of Firefox button tokens, so the
+       background and the icon can never resolve to the same system colour. */
     @media screen and (forced-colors: active) {
-      --comment-button-bg: ButtonFace;
+      --comment-button-bg: var(--button-background-color, ButtonFace);
-      --comment-button-fg: ButtonText;
+      --comment-button-fg: var(--button-text-color, ButtonText);
-      --comment-button-hover-bg: SelectedItemText;
+      --comment-button-hover-bg: var(
-      --comment-button-hover-fg: SelectedItem;
+        --button-background-color-hover,
-      --comment-button-active-bg: SelectedItemText;
+        SelectedItemText
-      --comment-button-active-fg: SelectedItem;
+      );
-      --comment-button-border-color: ButtonBorder;
+      --comment-button-hover-fg: var(--button-text-color-hover, SelectedItem);
-      --comment-button-active-border-color: ButtonBorder;
+      --comment-button-active-bg: var(
-      --comment-button-hover-border-color: SelectedItem;
+        --button-background-color-active,
+        SelectedItemText
+      );
+      --comment-button-active-fg: var(--button-text-color-active, SelectedItem);
+      --comment-button-border-color: var(--button-border-color, ButtonBorder);
+      --comment-button-active-border-color: var(
+        --button-border-color-active,
+        ButtonBorder
+      );
+      --comment-button-hover-border-color: var(
+        --button-border-color-hover,
+        SelectedItem
+      );
       --comment-button-box-shadow: none;
-      --comment-button-focus-outline-color: CanvasText;
+      --comment-button-focus-outline-color: var(
-      --comment-button-selected-bg: ButtonBorder;
+        --focus-outline-color,
-      --comment-button-selected-fg: ButtonFace;
+        CanvasText
+      );
+      --comment-button-selected-bg: var(
+        --button-background-color-primary,
+        ButtonBorder
+      );
+      --comment-button-selected-fg: var(
+        --button-text-color-primary,
+        ButtonFace
+      );
     }
 
     position: absolute;
@@ -185,19 +232,28 @@
   --comment-active-brightness: 0.825;
   --comment-active-filter: brightness(var(--comment-active-brightness));
   --comment-border-color: light-dark(#f0f0f4, #52525e);
-  --comment-focus-outline-color: light-dark(#0062fa, #00cadb);
+  --comment-focus-outline-color: var(
-  --comment-fg-color: light-dark(#15141a, #fbfbfe);
+    --focus-outline-color,
+    light-dark(#0062fa, #00cadb)
+  );
+  --comment-fg-color: var(--text-color, light-dark(#15141a, #fbfbfe));
   --comment-count-bg-color: light-dark(#e2f7ff, #00317e);
   --comment-indicator-active-fg-color: light-dark(#0041a4, #a6ecf4);
   --comment-indicator-active-filter: brightness(
     calc(1 / var(--comment-active-brightness))
   );
   --comment-indicator-focus-fg-color: light-dark(#5b5b66, #fbfbfe);
-  --comment-indicator-hover-fg-color: light-dark(#0053cb, #61dce9);
+  --comment-indicator-hover-fg-color: var(
+    --color-accent-primary-hover,
+    light-dark(#0053cb, #61dce9)
+  );
   --comment-indicator-hover-filter: brightness(
     calc(1 / var(--comment-hover-brightness))
   );
-  --comment-indicator-selected-fg-color: light-dark(#0062fa, #00cadb);
+  --comment-indicator-selected-fg-color: var(
+    --color-accent-primary,
+    light-dark(#0062fa, #00cadb)
+  );
 
   --button-comment-bg: transparent;
   --button-comment-color: var(--main-color);
@@ -208,9 +264,6 @@
   --button-comment-hover-bg: light-dark(#e0e0e6, #52525e);
   --button-comment-hover-color: var(--button-comment-color);
 
-  --link-fg-color: light-dark(#0060df, #0df);
-  --link-hover-fg-color: light-dark(#0250bb, #80ebff);
-
   @media screen and (forced-colors: active) {
     --comment-date-fg-color: CanvasText;
     --comment-bg-color: Canvas;
@@ -219,11 +272,13 @@
     --comment-active-bg-color: Canvas;
     --comment-active-filter: none;
     --comment-border-color: CanvasText;
-    --comment-fg-color: CanvasText;
+    --comment-fg-color: var(--text-color, CanvasText);
     --comment-count-bg-color: Canvas;
     --comment-indicator-active-fg-color: SelectedItem;
-    --comment-indicator-focus-fg-color: CanvasText;
+    --comment-indicator-focus-fg-color: var(--text-color, CanvasText);
-    --comment-indicator-hover-fg-color: CanvasText;
+    /* On the Canvas comment surface, so paired with --text-color rather than a
+       button/accent token. */
+    --comment-indicator-hover-fg-color: var(--text-color, CanvasText);
     --comment-indicator-selected-fg-color: SelectedItem;
     --button-comment-bg: ButtonFace;
     --button-comment-color: ButtonText;
@@ -232,8 +287,6 @@
     --button-comment-border: 1px solid ButtonText;
     --button-comment-hover-bg: Highlight;
     --button-comment-hover-color: HighlightText;
-    --link-fg-color: LinkText;
-    --link-hover-fg-color: LinkText;
   }
 }
 

web/dialog.css

@@ -14,117 +14,42 @@
  */
 
 .dialog {
-  --dialog-bg-color: light-dark(white, #1c1b22);
+  --dialog-bg-color: var(--background-color-canvas, light-dark(white, #1c1b22));
-  --dialog-border-color: light-dark(white, #1c1b22);
+  --dialog-border-color: var(
+    --background-color-canvas,
+    light-dark(white, #1c1b22)
+  );
   --dialog-shadow: 0 2px 14px 0 light-dark(rgb(58 57 68 / 0.2), #15141a);
-  --text-primary-color: light-dark(#15141a, #fbfbfe);
   --text-secondary-color: light-dark(#5b5b66, #cfcfd8);
-  --hover-filter: brightness(0.9);
-  --link-fg-color: light-dark(#0060df, #0df);
-  --link-hover-fg-color: light-dark(#0250bb, #80ebff);
   --separator-color: light-dark(#f0f0f4, #52525e);
 
-  --textarea-border-color: #8f8f9d;
+  /* A textarea is an interactive control, so it takes the interactive border
+     token (whose light value is the shipped literal) and not --border-color,
+     which is the low-contrast decorative one. */
+  --textarea-border-color: var(--border-color-interactive, #8f8f9d);
   --textarea-bg-color: light-dark(white, #42414d);
   --textarea-fg-color: var(--text-secondary-color);
 
-  --radio-bg-color: light-dark(#f0f0f4, #2b2a33);
+  /* .primaryButton / .secondaryButton button tokens are defined once, at :root
-  --radio-checked-bg-color: light-dark(#fbfbfe, #15141a);
+     in buttons.css (the shared primitive), and inherit into dialogs. */
-  --radio-border-color: #8f8f9d;
-  --radio-checked-border-color: light-dark(#0060df, #0df);
-
-  --button-secondary-bg-color: light-dark(
-    rgb(21 20 26 / 0.07),
-    rgb(251 251 254 / 0.07)
-  );
-  --button-secondary-fg-color: var(--text-primary-color);
-  --button-secondary-border-color: var(--button-secondary-bg-color);
-  --button-secondary-active-bg-color: light-dark(
-    rgb(21 20 26 / 0.21),
-    rgb(251 251 254 / 0.21)
-  );
-  --button-secondary-active-fg-color: var(--button-secondary-fg-color);
-  --button-secondary-active-border-color: var(--button-secondary-bg-color);
-  --button-secondary-hover-bg-color: light-dark(
-    rgb(21 20 26 / 0.14),
-    rgb(251 251 254 / 0.14)
-  );
-  --button-secondary-hover-fg-color: var(--button-secondary-fg-color);
-  --button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);
-  --button-secondary-disabled-bg-color: var(--button-secondary-bg-color);
-  --button-secondary-disabled-border-color: var(
-    --button-secondary-border-color
-  );
-  --button-secondary-disabled-fg-color: var(--button-secondary-fg-color);
-
-  --button-primary-bg-color: light-dark(#0060df, #0df);
-  --button-primary-fg-color: light-dark(#fbfbfe, #15141a);
-  --button-primary-border-color: var(--button-primary-bg-color);
-  --button-primary-active-bg-color: light-dark(#054096, #aaf2ff);
-  --button-primary-active-fg-color: var(--button-primary-fg-color);
-  --button-primary-active-border-color: var(--button-primary-active-bg-color);
-  --button-primary-hover-bg-color: light-dark(#0250bb, #80ebff);
-  --button-primary-hover-fg-color: var(--button-primary-fg-color);
-  --button-primary-hover-border-color: var(--button-primary-hover-bg-color);
-  --button-primary-disabled-bg-color: var(--button-primary-bg-color);
-  --button-primary-disabled-border-color: var(--button-primary-border-color);
-  --button-primary-disabled-fg-color: var(--button-primary-fg-color);
-  --button-disabled-opacity: 0.4;
 
   --input-text-bg-color: light-dark(white, #42414d);
   --input-text-fg-color: var(--text-primary-color);
 
-  @media (prefers-color-scheme: dark) {
-    --hover-filter: brightness(1.4);
-    --button-disabled-opacity: 0.6;
-  }
-
   @media screen and (forced-colors: active) {
-    --dialog-bg-color: Canvas;
+    --dialog-bg-color: var(--background-color-canvas, Canvas);
-    --dialog-border-color: CanvasText;
+    /* border-only: --background-color-canvas would resolve to Canvas in FF HCM
+       (= the dialog bg) and the shadow is none here, leaving no boundary; route
+       through --border-color (CanvasText in HCM) to keep a visible border. */
+    --dialog-border-color: var(--border-color, CanvasText);
     --dialog-shadow: none;
-    --text-primary-color: CanvasText;
     --text-secondary-color: CanvasText;
-    --hover-filter: none;
-    --link-fg-color: LinkText;
-    --link-hover-fg-color: LinkText;
     --separator-color: CanvasText;
 
     --textarea-border-color: ButtonBorder;
     --textarea-bg-color: Field;
     --textarea-fg-color: ButtonText;
 
-    --radio-bg-color: ButtonFace;
-    --radio-checked-bg-color: ButtonFace;
-    --radio-border-color: ButtonText;
-    --radio-checked-border-color: ButtonText;
-
-    --button-secondary-bg-color: ButtonFace;
-    --button-secondary-fg-color: ButtonText;
-    --button-secondary-border-color: ButtonText;
-    --button-secondary-active-bg-color: HighlightText;
-    --button-secondary-active-fg-color: SelectedItem;
-    --button-secondary-active-border-color: ButtonText;
-    --button-secondary-hover-bg-color: HighlightText;
-    --button-secondary-hover-fg-color: SelectedItem;
-    --button-secondary-hover-border-color: SelectedItem;
-    --button-secondary-disabled-fg-color: GrayText;
-    --button-secondary-disabled-border-color: GrayText;
-
-    --button-primary-bg-color: ButtonText;
-    --button-primary-fg-color: ButtonFace;
-    --button-primary-border-color: ButtonText;
-    --button-primary-active-bg-color: SelectedItem;
-    --button-primary-active-fg-color: HighlightText;
-    --button-primary-active-border-color: ButtonText;
-    --button-primary-hover-bg-color: SelectedItem;
-    --button-primary-hover-fg-color: HighlightText;
-    --button-primary-hover-border-color: SelectedItem;
-    --button-primary-disabled-bg-color: GrayText;
-    --button-primary-disabled-fg-color: ButtonFace;
-    --button-primary-disabled-border-color: GrayText;
-    --button-disabled-opacity: 1;
-
     --input-text-bg-color: Field;
     --input-text-fg-color: FieldText;
   }
@@ -133,7 +58,7 @@
   font-size: 13px;
   font-weight: 400;
   line-height: 150%;
-  border-radius: 4px;
+  border-radius: var(--border-radius-medium, 4px);
   padding: 12px 16px;
   border: 1px solid var(--dialog-border-color);
   background: var(--dialog-bg-color);
@@ -176,6 +101,15 @@
       align-self: flex-end;
     }
 
+    /* Native checkbox/radio tinted with the accent at Firefox's control size,
+       matching Firefox's default form controls (the custom appearance is
+       Nova-only in Firefox, so the default look is native + accent-color). */
+    input:is([type="checkbox"], [type="radio"]) {
+      accent-color: var(--color-accent-primary, light-dark(#0060df, #0df));
+      width: var(--checkbox-size, 16px);
+      height: var(--checkbox-size, 16px);
+    }
+
     .radio {
       display: flex;
       flex-direction: column;
@@ -187,25 +121,6 @@
         gap: 8px;
         align-self: stretch;
         align-items: center;
-
-        input {
-          appearance: none;
-          box-sizing: border-box;
-          width: 16px;
-          height: 16px;
-          border-radius: 50%;
-          background-color: var(--radio-bg-color);
-          border: 1px solid var(--radio-border-color);
-
-          &:hover {
-            filter: var(--hover-filter);
-          }
-
-          &:checked {
-            background-color: var(--radio-checked-bg-color);
-            border: 4px solid var(--radio-checked-border-color);
-          }
-        }
       }
 
       > .radioLabel {
@@ -224,14 +139,15 @@
     }
 
     button:not(:is(.toggle-button, .closeButton, .clearInputButton)) {
-      border-radius: 4px;
+      border-radius: var(--button-border-radius, 4px);
-      border: 1px solid;
+      border-width: 1px;
+      border-style: solid;
       font: menu;
-      font-weight: 590;
+      font-weight: var(--button-font-weight, 590);
-      font-size: 13px;
+      font-size: var(--button-font-size, 13px);
-      padding: 4px 16px;
+      padding: var(--button-padding, 4px 16px);
       width: auto;
-      height: 32px;
+      min-height: var(--button-min-height, 32px);
 
       &:hover {
         cursor: pointer;
@@ -243,57 +159,9 @@
         font: inherit;
       }
 
-      &.secondaryButton {
+      /* .primaryButton / .secondaryButton colours and states come from the
-        color: var(--button-secondary-fg-color);
+         shared buttons.css primitive; only the dialog-specific base geometry
-        background-color: var(--button-secondary-bg-color);
+         (above) lives here, so it also covers unclassed dialog buttons. */
-        border-color: var(--button-secondary-border-color);
-
-        &:hover {
-          color: var(--button-secondary-hover-fg-color);
-          background-color: var(--button-secondary-hover-bg-color);
-          border-color: var(--button-secondary-hover-border-color);
-        }
-
-        &:active {
-          color: var(--button-secondary-active-fg-color);
-          background-color: var(--button-secondary-active-bg-color);
-          border-color: var(--button-secondary-active-border-color);
-        }
-
-        &:disabled {
-          background-color: var(--button-secondary-disabled-bg-color);
-          border-color: var(--button-secondary-disabled-border-color);
-          color: var(--button-secondary-disabled-fg-color);
-          opacity: var(--button-disabled-opacity);
-        }
-      }
-
-      &.primaryButton {
-        color: var(--button-primary-fg-color);
-        background-color: var(--button-primary-bg-color);
-        border-color: var(--button-primary-border-color);
-        opacity: 1;
-
-        &:hover {
-          color: var(--button-primary-hover-fg-color);
-          background-color: var(--button-primary-hover-bg-color);
-          border-color: var(--button-primary-hover-border-color);
-        }
-
-        &:active {
-          color: var(--button-primary-active-fg-color);
-          background-color: var(--button-primary-active-bg-color);
-          border-color: var(--button-primary-active-border-color);
-        }
-
-        &:disabled {
-          background-color: var(--button-primary-disabled-bg-color);
-          border-color: var(--button-primary-disabled-border-color);
-          color: var(--button-primary-disabled-fg-color);
-          opacity: var(--button-disabled-opacity);
-        }
-      }
-
       &:disabled {
         pointer-events: none;
       }
@@ -313,7 +181,7 @@
       resize: none;
       margin: 0;
       box-sizing: border-box;
-      border-radius: 4px;
+      border-radius: var(--border-radius-small, 4px);
       border: 1px solid var(--textarea-border-color);
       background: var(--textarea-bg-color);
       color: var(--textarea-fg-color);

web/digital_signature_properties.css

@@ -28,16 +28,28 @@
   --sig-detail-color: light-dark(rgb(96 96 96), rgb(180 180 184));
   --sig-divider-color: light-dark(rgb(228 228 232), rgb(82 82 86));
   --sig-summary-hover-color: light-dark(rgb(28 67 138), rgb(126 169 255));
-  --sig-link-color: light-dark(rgb(28 113 216), rgb(126 169 255));
+  --sig-link-color: var(
+    --link-color,
+    light-dark(rgb(28 113 216), rgb(126 169 255))
+  );
   --sig-link-hover-bg: light-dark(
     rgb(28 113 216 / 0.1),
     rgb(126 169 255 / 0.15)
   );
-  --sig-banner-verified-bg: light-dark(rgb(228 247 235), rgb(28 84 49));
+  --sig-banner-verified-bg: var(
+    --background-color-success,
+    light-dark(rgb(228 247 235), rgb(28 84 49))
+  );
   --sig-banner-verified-color: light-dark(rgb(16 92 47), rgb(176 232 196));
-  --sig-banner-warn-bg: light-dark(rgb(255 247 217), rgb(95 67 9));
+  --sig-banner-warn-bg: var(
+    --background-color-warning,
+    light-dark(rgb(255 247 217), rgb(95 67 9))
+  );
   --sig-banner-warn-color: light-dark(rgb(124 84 9), rgb(255 222 153));
-  --sig-banner-error-bg: light-dark(rgb(254 226 235), rgb(122 21 51));
+  --sig-banner-error-bg: var(
+    --background-color-critical,
+    light-dark(rgb(254 226 235), rgb(122 21 51))
+  );
   --sig-banner-error-color: light-dark(rgb(167 26 70), rgb(255 188 207));
 
   /* Tint colours for the row / toolbar icons. These are paired with
@@ -48,9 +60,18 @@
    * verified = green (only used for the top-level "everything fine"
    * row and the toolbar's verified badge). */
   --sig-icon-default: light-dark(rgb(150 150 150), rgb(180 180 184));
-  --sig-icon-warn: light-dark(rgb(217 142 27), rgb(255 178 77));
+  --sig-icon-warn: var(
-  --sig-icon-error: light-dark(rgb(196 31 71), rgb(255 117 145));
+    --icon-color-warning,
-  --sig-icon-verified: light-dark(rgb(29 142 61), rgb(106 210 126));
+    light-dark(rgb(217 142 27), rgb(255 178 77))
+  );
+  --sig-icon-error: var(
+    --icon-color-critical,
+    light-dark(rgb(196 31 71), rgb(255 117 145))
+  );
+  --sig-icon-verified: var(
+    --icon-color-success,
+    light-dark(rgb(29 142 61), rgb(106 210 126))
+  );
 
   @media screen and (forced-colors: active) {
     /* HCM keywords are picked by *semantic role*, not by hue — the
@@ -77,23 +98,26 @@
     --sig-detail-color: GrayText;
     --sig-divider-color: GrayText;
     --sig-summary-hover-color: AccentColor;
-    --sig-link-color: LinkText;
+    --sig-link-color: var(--link-color, LinkText);
     --sig-link-hover-bg: transparent;
-    --sig-banner-verified-bg: ButtonFace;
+    /* Firefox collapses the status backgrounds onto --background-color-canvas
-    --sig-banner-verified-color: ButtonText;
+       in HCM, so the foregrounds have to follow --text-color to stay a pair
-    --sig-banner-warn-bg: ButtonFace;
+       (ButtonText over that Canvas surface is not guaranteed to contrast). */
-    --sig-banner-warn-color: ButtonText;
+    --sig-banner-verified-bg: var(--background-color-success, ButtonFace);
-    --sig-banner-error-bg: ButtonFace;
+    --sig-banner-verified-color: var(--text-color, ButtonText);
-    --sig-banner-error-color: ButtonText;
+    --sig-banner-warn-bg: var(--background-color-warning, ButtonFace);
+    --sig-banner-warn-color: var(--text-color, ButtonText);
+    --sig-banner-error-bg: var(--background-color-critical, ButtonFace);
+    --sig-banner-error-color: var(--text-color, ButtonText);
     /* Severities collapse to the same emphasis keyword (AccentColor)
      * in HCM — same trick as alt-text where `done` and `warning`
      * share their hover colour. The glyph shape (check vs `!` vs `✕`)
      * carries the remaining distinction. The neutral "row crypto
      * verified" check stays muted (GrayText). */
     --sig-icon-default: GrayText;
-    --sig-icon-warn: AccentColor;
+    --sig-icon-warn: var(--icon-color-warning, AccentColor);
-    --sig-icon-error: AccentColor;
+    --sig-icon-error: var(--icon-color-critical, AccentColor);
-    --sig-icon-verified: AccentColor;
+    --sig-icon-verified: var(--icon-color-success, AccentColor);
   }
 }
 

web/menu.css

@@ -41,10 +41,13 @@ button.hasPopupMenu {
     var(--menu-text-color),
     transparent 93%
   );
-  --menuitem-focus-outline-color: light-dark(#0062fa, #00cadb);
+  --menuitem-focus-outline-color: var(
+    --focus-outline-color,
+    light-dark(#0062fa, #00cadb)
+  );
   --menuitem-focus-border-color: light-dark(white, black);
 
-  --menu-bg: light-dark(white, #23222b);
+  --menu-bg: var(--background-color-box, light-dark(white, #23222b));
   --menu-background-blend-mode: normal;
   --menu-box-shadow:
     0 0.375px 1.5px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)),
@@ -52,7 +55,7 @@ button.hasPopupMenu {
   --menu-border-color: light-dark(rgb(21 20 26 / 0.1), rgb(251 251 254 / 0.1));
   --menuitem-border-radius: 8px;
   --menu-backdrop-filter: none;
-  --menu-text-color: light-dark(#15141a, #fbfbfe);
+  --menu-text-color: var(--text-color, light-dark(#15141a, #fbfbfe));
   --menu-text-disabled-color: var(--menu-text-color);
   --menuitem-text-hover-fg: var(--menu-text-color);
   --menuitem-hover-bg: color-mix(
@@ -64,11 +67,11 @@ button.hasPopupMenu {
   --disabled-opacity: 0.62;
 
   @media screen and (forced-colors: active) {
-    --menu-bg: Canvas;
+    --menu-bg: var(--background-color-box, Canvas);
     --menu-background-blend-mode: normal;
     --menu-box-shadow: none;
     --menu-backdrop-filter: none;
-    --menu-text-color: ButtonText;
+    --menu-text-color: var(--text-color, ButtonText);
     --menu-text-disabled-color: GrayText;
     --menu-border-color: CanvasText;
     --menuitem-border-color: none;
@@ -78,7 +81,7 @@ button.hasPopupMenu {
     --menuitem-active-border-color: ButtonText;
     --menuitem-text-active-fg: SelectedItem;
     --menuitem-focus-bg: ButtonFace;
-    --menuitem-focus-outline-color: CanvasText;
+    --menuitem-focus-outline-color: var(--focus-outline-color, CanvasText);
     --menuitem-focus-border-color: none;
     --disabled-opacity: 1;
   }

web/message_bar.css

@@ -17,28 +17,46 @@
   --closing-button-icon: url(images/messageBar_closingButton.svg);
   --message-bar-close-button-color: var(--text-primary-color);
   --message-bar-close-button-color-hover: var(--text-primary-color);
-  --message-bar-close-button-border-radius: 4px;
+  --message-bar-close-button-border-radius: var(--border-radius-small, 4px);
   --message-bar-close-button-border: none;
-  --message-bar-close-button-hover-bg-color: light-dark(
+  --message-bar-close-button-hover-bg-color: var(
-    rgb(21 20 26 / 0.14),
+    --button-background-color-hover,
-    rgb(251 251 254 / 0.14)
+    light-dark(rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14))
   );
-  --message-bar-close-button-active-bg-color: light-dark(
+  --message-bar-close-button-active-bg-color: var(
-    rgb(21 20 26 / 0.21),
+    --button-background-color-active,
-    rgb(251 251 254 / 0.21)
+    light-dark(rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21))
   );
-  --message-bar-close-button-focus-bg-color: light-dark(
+  --message-bar-close-button-focus-bg-color: var(
-    rgb(21 20 26 / 0.07),
+    --button-background-color,
-    rgb(251 251 254 / 0.07)
+    light-dark(rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07))
   );
 
   @media screen and (forced-colors: active) {
-    --message-bar-close-button-color: ButtonText;
+    --message-bar-close-button-color: var(--button-text-color, ButtonText);
-    --message-bar-close-button-border: 1px solid ButtonText;
+    --message-bar-close-button-border: 1px solid
-    --message-bar-close-button-hover-bg-color: ButtonText;
+      var(--button-border-color, ButtonText);
-    --message-bar-close-button-active-bg-color: ButtonText;
+    /* One icon colour is shared by hover/active/focus, so all three backgrounds
-    --message-bar-close-button-focus-bg-color: ButtonText;
+       read the -hover token and pair with --button-text-color-hover. The
-    --message-bar-close-button-color-hover: HighlightText;
+       fallbacks are SelectedItemText/SelectedItem for the same reason: the
+       previous ButtonText-behind-HighlightText hid the icon outright in any
+       theme whose button ink and highlight text are both light. */
+    --message-bar-close-button-hover-bg-color: var(
+      --button-background-color-hover,
+      SelectedItemText
+    );
+    --message-bar-close-button-active-bg-color: var(
+      --button-background-color-hover,
+      SelectedItemText
+    );
+    --message-bar-close-button-focus-bg-color: var(
+      --button-background-color-hover,
+      SelectedItemText
+    );
+    --message-bar-close-button-color-hover: var(
+      --button-text-color-hover,
+      SelectedItem
+    );
   }
 
   display: flex;
@@ -50,7 +68,9 @@
   gap: 8px;
   user-select: none;
 
-  border-radius: 4px;
+  /* Nests inside .dialog, whose radius is --border-radius-medium, so it has to
+     scale with it to keep the inner corner tighter than the outer one. */
+  border-radius: var(--border-radius-small, 4px);
 
   border: 1px solid var(--message-bar-border-color);
   background: var(--message-bar-bg-color);
@@ -130,8 +150,6 @@
 }
 
 #editorUndoBar {
-  --text-primary-color: light-dark(#15141a, #fbfbfe);
-
   --message-bar-icon: url(images/messageBar_info.svg);
   --message-bar-icon-color: light-dark(#0060df, #73a7f3);
   --message-bar-bg-color: light-dark(#deeafc, #003070);
@@ -141,41 +159,10 @@
     rgb(255 255 255 / 0.08)
   );
 
-  --undo-button-bg-color: light-dark(
-    rgb(21 20 26 / 0.07),
-    rgb(255 255 255 / 0.08)
-  );
-  --undo-button-bg-color-hover: light-dark(
-    rgb(21 20 26 / 0.14),
-    rgb(255 255 255 / 0.14)
-  );
-  --undo-button-bg-color-active: light-dark(
-    rgb(21 20 26 / 0.21),
-    rgb(255 255 255 / 0.21)
-  );
-
-  --undo-button-border: 1px solid light-dark(#0060df, #0df);
-
-  --undo-button-fg-color: var(--message-bar-fg-color);
-  --undo-button-fg-color-hover: var(--undo-button-fg-color);
-  --undo-button-fg-color-active: var(--undo-button-fg-color);
-
   @media screen and (forced-colors: active) {
-    --text-primary-color: CanvasText;
-
     --message-bar-icon-color: CanvasText;
     --message-bar-bg-color: Canvas;
     --message-bar-border-color: CanvasText;
-
-    --undo-button-bg-color: ButtonText;
-    --undo-button-bg-color-hover: SelectedItem;
-    --undo-button-bg-color-active: SelectedItem;
-
-    --undo-button-fg-color: ButtonFace;
-    --undo-button-fg-color-hover: SelectedItemText;
-    --undo-button-fg-color-active: SelectedItemText;
-
-    --undo-button-border: none;
   }
 
   position: fixed;
@@ -197,26 +184,10 @@
   }
 
   #editorUndoBarUndoButton {
-    border-radius: 4px;
-    font-weight: 590;
-    line-height: 19.5px;
-    color: var(--undo-button-fg-color);
-    border: var(--undo-button-border);
-    padding: 4px 16px;
     margin-inline-start: 8px;
-    height: 32px;
+    /* The generic secondary border is the same translucent wash as its fill,
-
+       which disappears on the tinted bar, so keep an explicit accent edge. */
-    background-color: var(--undo-button-bg-color);
+    border-color: var(--color-accent-primary, light-dark(#0060df, #0df));
-
-    &:hover {
-      background-color: var(--undo-button-bg-color-hover);
-      color: var(--undo-button-fg-color-hover);
-    }
-
-    &:active {
-      background-color: var(--undo-button-bg-color-active);
-      color: var(--undo-button-fg-color-active);
-    }
   }
 
   > div {

web/pdf_viewer.css

@@ -12,6 +12,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/*
+ * Firefox design-system bridge.
+ *
+ * The viewer chrome is authored against Firefox design-token names with the
+ * shipped literal as the fallback: `var(--fx-token, <literal>)`. GENERIC and
+ * the components build resolve the fallback and stay self-contained; the
+ * MOZCENTRAL build imports tokens-brand.css when pdfjs.enableNova is set (see
+ * viewer.css), so those names resolve to live Firefox values and the theme
+ * never has to be re-synced by hand.
+ *
+ * Firefox declares its tokens inside `@layer tokens-foundation-brand`, so any
+ * unlayered declaration wins over them. To *consume* a Firefox value,
+ * reference it through var() (with a fallback) and do NOT redeclare the same
+ * name: that would shadow Firefox's for the whole subtree.
+ */
+@import url(buttons.css);
 @import url(message_bar.css);
 @import url(dialog.css);
 @import url(text_layer_builder.css);
@@ -34,8 +50,12 @@
   --page-border: 9px solid transparent;
   --spreadHorizontalWrapped-margin-LR: -3.5px;
   --loading-icon-delay: 400ms;
-  --focus-ring-color: light-dark(#0060df, #0df);
+  --focus-ring-color: var(--focus-outline-color, light-dark(#0060df, #0df));
-  --focus-ring-outline: 2px solid var(--focus-ring-color);
+  --focus-ring-outline: var(--focus-outline-width, 2px) solid
+    var(--focus-ring-color);
+  --text-primary-color: var(--text-color, light-dark(#15141a, #fbfbfe));
+  --link-fg-color: var(--link-color, light-dark(#0060df, #0df));
+  --link-hover-fg-color: var(--link-color-hover, light-dark(#0250bb, #80ebff));
   --new-badge-bg: light-dark(#070, #37b847);
   --new-badge-color: light-dark(#fff, #15141a);
   --new-badge-border-color: light-dark(#fbfbfe / 40%, #15141a / 40%);
@@ -45,7 +65,10 @@
     --page-margin: 8px auto -1px;
     --page-border: 1px solid CanvasText;
     --spreadHorizontalWrapped-margin-LR: 3.5px;
-    --focus-ring-color: CanvasText;
+    --focus-ring-color: var(--focus-outline-color, CanvasText);
+    --text-primary-color: var(--text-color, CanvasText);
+    --link-fg-color: var(--link-color, LinkText);
+    --link-hover-fg-color: var(--link-color-hover, LinkText);
     --new-badge-bg: AccentColor;
     --new-badge-color: ButtonFace;
     --new-badge-border-color: CanvasText;

web/sidebar.css

@@ -14,7 +14,7 @@
  */
 
 .sidebar {
-  --sidebar-bg-color: light-dark(#fff, #23222b);
+  --sidebar-bg-color: var(--background-color-box, light-dark(#fff, #23222b));
   --sidebar-border-color: light-dark(
     rgb(21 20 26 / 0.1),
     rgb(251 251 254 / 0.1)
@@ -30,13 +30,18 @@
   --sidebar-width: 239px;
   --resizer-width: 4px;
   --resizer-shift: calc(0px - var(--resizer-width) - 2px);
-  --resizer-hover-bg-color: light-dark(#0062fa, #00cadb);
+  --resizer-hover-bg-color: var(
+    --color-accent-primary,
+    light-dark(#0062fa, #00cadb)
+  );
 
   @media screen and (forced-colors: active) {
-    --sidebar-bg-color: Canvas;
+    --sidebar-bg-color: var(--background-color-box, Canvas);
     --sidebar-border-color: CanvasText;
     --sidebar-box-shadow: none;
-    --resizer-hover-bg-color: CanvasText;
+    /* Painted on the Canvas sidebar, so --text-color rather than the accent
+       (which is ButtonText in Firefox HCM). */
+    --resizer-hover-bg-color: var(--text-color, CanvasText);
   }
 
   border-radius: var(--sidebar-border-radius);

web/signature_manager.css

@@ -15,8 +15,16 @@
 
 :root {
   --clear-signature-button-icon: url(images/editor-toolbar-delete.svg);
-  --signature-bg: light-dark(#f9f9fb, #2b2a33);
+  /* The signature wells are boxes nested in the dialog, i.e. Firefox's
-  --signature-hover-bg: light-dark(#f0f0f4, var(--signature-bg));
+     .info-box-container pattern. */
+  --signature-bg: var(
+    --background-color-box-info,
+    light-dark(#f9f9fb, #2b2a33)
+  );
+  --signature-hover-bg: var(
+    --button-background-color-hover,
+    light-dark(#f0f0f4, var(--signature-bg))
+  );
   --button-signature-bg: transparent;
   --button-signature-color: var(--main-color);
   --button-signature-active-bg: light-dark(#cfcfd8, #5b5b66);
@@ -41,13 +49,13 @@
 
 .signatureDialog {
   --primary-color: var(--text-primary-color);
-  --border-color: #8f8f9d;
+  --signature-border-color: var(--border-color-interactive, #8f8f9d);
   --open-link-fg: var(--link-fg-color);
   --open-link-hover-fg: var(--link-hover-fg-color);
 
   @media screen and (forced-colors: active) {
     --primary-color: ButtonText;
-    --border-color: ButtonText;
+    --signature-border-color: var(--border-color-interactive, ButtonText);
     --open-link-fg: ButtonText;
     --open-link-hover-fg: ButtonText;
   }
@@ -88,11 +96,11 @@
 
     > input {
       width: 100%;
-      height: 32px;
+      height: var(--size-item-large, 32px);
       padding-inline: 8px calc(4px + var(--button-dimension));
       box-sizing: border-box;
-      border-radius: 4px;
+      border-radius: var(--border-radius-small, 4px);
-      border: 1px solid var(--border-color);
+      border: 1px solid var(--signature-border-color);
     }
 
     .clearInputButton {
@@ -113,11 +121,17 @@
 
 #addSignatureDialog {
   --secondary-color: var(--text-secondary-color);
-  --bg-hover: #e0e0e6;
+  --bg-hover: var(
-  --tab-top-line-active-color: #0060df;
+    --button-background-color-hover,
+    light-dark(#e0e0e6, #52525e)
+  );
+  --tab-top-line-active-color: var(
+    --color-accent-primary,
+    light-dark(#0060df, #0df)
+  );
   --tab-top-line-active-hover-color: var(--tab-text-hover-color);
-  --tab-top-line-hover-color: #8f8f9d;
+  --tab-top-line-hover-color: var(--border-color-interactive, #8f8f9d);
-  --tab-top-line-inactive-color: #cfcfd8;
+  --tab-top-line-inactive-color: light-dark(#cfcfd8, #8f8f9d);
   --tab-bottom-line-active-color: var(--tab-top-line-inactive-color);
   --tab-bottom-line-hover-color: var(--tab-top-line-inactive-color);
   --tab-bottom-line-inactive-color: var(--tab-top-line-inactive-color);
@@ -126,7 +140,7 @@
   --tab-bg-active-hover-color: var(--bg-hover);
   --tab-bg-hover: var(--bg-hover);
   --tab-panel-border: none;
-  --tab-panel-border-radius: 4px;
+  --tab-panel-border-radius: var(--border-radius-small, 4px);
   --tab-text-color: var(--primary-color);
   --tab-text-active-color: var(--tab-top-line-active-color);
   --tab-text-active-hover-color: var(--tab-text-hover-color);
@@ -134,24 +148,6 @@
   --signature-placeholder-color: var(--secondary-color);
   --signature-draw-placeholder-color: var(--primary-color);
   --signature-color: var(--primary-color);
-  --clear-signature-button-border-width: 0;
-  --clear-signature-button-border-style: solid;
-  --clear-signature-button-border-color: transparent;
-  --clear-signature-button-border-disabled-color: transparent;
-  --clear-signature-button-color: var(--primary-color);
-  --clear-signature-button-hover-color: var(--clear-signature-button-color);
-  --clear-signature-button-active-color: var(--clear-signature-button-color);
-  --clear-signature-button-disabled-color: var(--clear-signature-button-color);
-  --clear-signature-button-focus-color: var(--clear-signature-button-color);
-  --clear-signature-button-bg: var(--dialog-bg-color);
-  --clear-signature-button-bg-hover: var(--bg-hover);
-  --clear-signature-button-bg-active: #cfcfd8;
-  --clear-signature-button-bg-focus: #f0f0f4;
-  --clear-signature-button-bg-disabled: color-mix(
-    in srgb,
-    #f0f0f4,
-    transparent 40%
-  );
   --save-warning-color: var(--secondary-color);
   --thickness-bg: var(--dialog-bg-color);
   --thickness-label-color: var(--primary-color);
@@ -159,30 +155,13 @@
   --thickness-border: none;
   --draw-cursor: url(images/cursor-editorInk.svg) 0 16, pointer;
 
-  @media (prefers-color-scheme: dark) {
-    /* TODO: Update the dialog colors for dark mode but in dialog.css */
-    --dialog-bg-color: #42414d;
-    --bg-hover: #52525e;
-    --primary-color: #fbfbfe;
-    --secondary-color: #cfcfd8;
-    --tab-top-line-active-color: #0df;
-    --tab-top-line-inactive-color: #8f8f9d;
-    --clear-signature-button-bg-active: #5b5b66;
-    --clear-signature-button-bg-focus: #2b2a33;
-    --clear-signature-button-bg-disabled: color-mix(
-      in srgb,
-      #2b2a33,
-      transparent 40%
-    );
-  }
-
   @media screen and (forced-colors: active) {
     --secondary-color: ButtonText;
     --bg: HighlightText;
     --bg-hover: var(--bg);
-    --tab-top-line-active-color: ButtonText;
+    --tab-top-line-active-color: var(--color-accent-primary, ButtonText);
     --tab-top-line-active-hover-color: HighlightText;
-    --tab-top-line-hover-color: SelectedItem;
+    --tab-top-line-hover-color: var(--border-color-interactive, SelectedItem);
     --tab-top-line-inactive-color: ButtonText;
     --tab-bottom-line-active-color: var(--tab-top-line-active-color);
     --tab-bottom-line-hover-color: var(--tab-top-line-hover-color);
@@ -196,24 +175,10 @@
     --tab-text-active-hover-color: HighlightText;
     --tab-text-hover-color: SelectedItem;
     --signature-color: ButtonText;
-    --clear-signature-button-border-width: 1px;
-    --clear-signature-button-border-style: solid;
-    --clear-signature-button-border-color: ButtonText;
-    --clear-signature-button-border-disabled-color: GrayText;
-    --clear-signature-button-color: ButtonText;
-    --clear-signature-button-hover-color: HighlightText;
-    --clear-signature-button-active-color: SelectedItem;
-    --clear-signature-button-focus-color: CanvasText;
-    --clear-signature-button-disabled-color: GrayText;
-    --clear-signature-button-bg: var(--bg);
-    --clear-signature-button-bg-hover: SelectedItem;
-    --clear-signature-button-bg-active: var(--bg);
-    --clear-signature-button-bg-focus: var(--bg);
-    --clear-signature-button-bg-disabled: var(--bg);
     --thickness-bg: Canvas;
     --thickness-label-color: CanvasText;
     --thickness-slider-color: ButtonText;
-    --thickness-border: 1px solid var(--border-color);
+    --thickness-border: 1px solid var(--signature-border-color);
   }
 
   #addSignatureDialogLabel {
@@ -533,14 +498,7 @@
 
           #clearSignatureButton {
             display: flex;
-            height: 32px;
-            padding: 4px 8px;
             align-items: center;
-            background-color: var(--clear-signature-button-bg);
-            border-width: var(--clear-signature-button-border-width);
-            border-style: var(--clear-signature-button-border-style);
-            border-color: var(--clear-signature-button-border-color);
-            border-radius: 4px;
 
             > span {
               display: flex;
@@ -549,8 +507,6 @@
               gap: 4px;
               flex-shrink: 0;
 
-              color: var(--clear-signature-button-color);
-
               &::after {
                 content: "";
                 display: inline-block;
@@ -558,57 +514,10 @@
                 height: 16px;
                 mask-image: var(--clear-signature-button-icon);
                 mask-size: cover;
-                background-color: var(--clear-signature-button-color);
+                background-color: currentColor;
                 flex-shrink: 0;
               }
             }
-
-            &:hover {
-              background-color: var(--clear-signature-button-bg-hover);
-
-              > span {
-                color: var(--clear-signature-button-hover-color);
-                &::after {
-                  background-color: var(--clear-signature-button-hover-color);
-                }
-              }
-            }
-
-            &:active {
-              background-color: var(--clear-signature-button-bg-active);
-
-              > span {
-                color: var(--clear-signature-button-active-color);
-                &::after {
-                  background-color: var(--clear-signature-button-active-color);
-                }
-              }
-            }
-
-            &:focus-visible {
-              background-color: var(--clear-signature-button-bg-focus);
-
-              > span {
-                color: var(--clear-signature-button-focus-color);
-                &::after {
-                  background-color: var(--clear-signature-button-focus-color);
-                }
-              }
-            }
-
-            &:disabled {
-              background-color: var(--clear-signature-button-bg-disabled);
-              border-color: var(--clear-signature-button-border-disabled-color);
-
-              > span {
-                color: var(--clear-signature-button-disabled-color);
-                &::after {
-                  background-color: var(
-                    --clear-signature-button-disabled-color
-                  );
-                }
-              }
-            }
           }
         }
 

web/toggle_button.css

@@ -2,44 +2,13 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-.toggle-button {
+/* The Firefox foundation tokens below are read with the shipped literal as the
-  --button-background-color: color-mix(in srgb, currentColor 7%, transparent);
+   fallback, so MOZCENTRAL tracks the design system (tokens-brand.css, linked
-  --button-background-color-hover: color-mix(
+   from viewer.html) while every other build keeps this self-contained
-    in srgb,
+   moz-toggle copy. Declaring those token names here instead would shadow
-    currentColor 14%,
+   Firefox's (unlayered beats @layer), and a bare var() would both trip
-    transparent
+   stylelint's no-unknown-custom-properties and collapse the toggle to a
-  );
+   zero-size transparent element if the chrome sheet ever failed to load. */
-  --button-background-color-active: color-mix(
-    in srgb,
-    currentColor 21%,
-    transparent
-  );
-  --color-accent-primary: light-dark(#0060df, #0df);
-  --color-accent-primary-hover: light-dark(#0250bb, #80ebff);
-  --color-accent-primary-active: light-dark(#054096, #aaf2ff);
-  --border-radius-circle: 9999px;
-  --border-width: 1px;
-  --size-item-small: 16px;
-  --size-item-large: 32px;
-  --color-canvas: light-dark(white, #1c1b22);
-  --background-color-canvas: var(--color-canvas);
-  --border-color-interactive: light-dark(#8f8f9d, #f9f9fa);
-  --border-color-interactive-hover: var(--border-color-interactive);
-  --border-color-interactive-active: var(--border-color-interactive);
-  --focus-outline-offset: 2px;
-
-  @media (forced-colors: active) {
-    --color-accent-primary: ButtonText;
-    --color-accent-primary-hover: SelectedItem;
-    --color-accent-primary-active: SelectedItem;
-    --button-background-color: ButtonFace;
-    --border-color-interactive: ButtonText;
-    --border-color-interactive-hover: SelectedItem;
-    --border-color-interactive-active: ButtonText;
-    --color-canvas: ButtonText;
-    --background-color-canvas: Canvas;
-  }
-}
 
 /*
     The original file is located at:
@@ -55,23 +24,47 @@
 */
 
 .toggle-button {
-  --toggle-background-color: var(--button-background-color);
+  --toggle-background-color: var(
-  --toggle-background-color-hover: var(--button-background-color-hover);
+    --button-background-color,
-  --toggle-background-color-active: var(--button-background-color-active);
+    color-mix(in srgb, currentColor 7%, transparent)
-  --toggle-background-color-pressed: var(--color-accent-primary);
+  );
-  --toggle-background-color-pressed-hover: var(--color-accent-primary-hover);
+  --toggle-background-color-hover: var(
-  --toggle-background-color-pressed-active: var(--color-accent-primary-active);
+    --button-background-color-hover,
-  --toggle-border-color: var(--border-color-interactive);
+    color-mix(in srgb, currentColor 14%, transparent)
+  );
+  --toggle-background-color-active: var(
+    --button-background-color-active,
+    color-mix(in srgb, currentColor 21%, transparent)
+  );
+  --toggle-background-color-pressed: var(
+    --color-accent-primary,
+    light-dark(#0060df, #0df)
+  );
+  --toggle-background-color-pressed-hover: var(
+    --color-accent-primary-hover,
+    light-dark(#0250bb, #80ebff)
+  );
+  --toggle-background-color-pressed-active: var(
+    --color-accent-primary-active,
+    light-dark(#054096, #aaf2ff)
+  );
+  --toggle-border-color: var(
+    --border-color-interactive,
+    light-dark(#8f8f9d, #f9f9fa)
+  );
   --toggle-border-color-hover: var(--toggle-border-color);
   --toggle-border-color-active: var(--toggle-border-color);
-  --toggle-border-radius: var(--border-radius-circle);
+  --toggle-border-radius: var(--border-radius-circle, 9999px);
-  --toggle-border-width: var(--border-width);
+  --toggle-border-width: var(--border-width, 1px);
-  --toggle-height: var(--size-item-small);
+  --toggle-height: var(--size-item-small, 16px);
-  --toggle-width: var(--size-item-large);
+  --toggle-width: var(--size-item-large, 32px);
   --toggle-dot-background-color: var(--toggle-border-color);
   --toggle-dot-background-color-hover: var(--toggle-dot-background-color);
   --toggle-dot-background-color-active: var(--toggle-dot-background-color);
-  --toggle-dot-background-color-on-pressed: var(--background-color-canvas);
+  --toggle-dot-background-color-on-pressed: var(
+    --background-color-canvas,
+    light-dark(white, #1c1b22)
+  );
   --toggle-dot-margin: 1px;
   --toggle-dot-height: calc(
     var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 *
@@ -93,8 +86,8 @@
   box-sizing: border-box;
 
   &:focus-visible {
-    outline: var(--focus-outline);
+    outline: var(--focus-ring-outline);
-    outline-offset: var(--focus-outline-offset);
+    outline-offset: var(--focus-outline-offset, 2px);
   }
 
   &:enabled:hover {
@@ -186,16 +179,42 @@
 
 @media (forced-colors) {
   .toggle-button {
-    --toggle-dot-background-color: var(--color-accent-primary);
+    --toggle-background-color: var(--button-background-color, ButtonFace);
-    --toggle-dot-background-color-hover: var(--color-accent-primary-hover);
+    --toggle-background-color-pressed: var(--color-accent-primary, ButtonText);
-    --toggle-dot-background-color-active: var(--color-accent-primary-active);
+    --toggle-background-color-pressed-hover: var(
-    --toggle-dot-background-color-on-pressed: var(--button-background-color);
+      --color-accent-primary-hover,
-    --toggle-border-color-hover: var(--border-color-interactive-hover);
+      SelectedItem
-    --toggle-border-color-active: var(--border-color-interactive-active);
+    );
+    --toggle-background-color-pressed-active: var(
+      --color-accent-primary-active,
+      SelectedItem
+    );
+    --toggle-border-color: var(--border-color-interactive, ButtonText);
+    --toggle-dot-background-color: var(--color-accent-primary, ButtonText);
+    --toggle-dot-background-color-hover: var(
+      --color-accent-primary-hover,
+      SelectedItem
+    );
+    --toggle-dot-background-color-active: var(
+      --color-accent-primary-active,
+      SelectedItem
+    );
+    --toggle-dot-background-color-on-pressed: var(
+      --button-background-color,
+      ButtonFace
+    );
+    --toggle-border-color-hover: var(
+      --border-color-interactive-hover,
+      SelectedItem
+    );
+    --toggle-border-color-active: var(
+      --border-color-interactive-active,
+      ButtonText
+    );
   }
 
   .toggle-button[aria-pressed="true"]:enabled::after {
-    border: 1px solid var(--button-background-color);
+    border: 1px solid var(--button-background-color, ButtonFace);
     content: "";
     position: absolute;
     height: var(--toggle-height);

web/viewer-geckoview.css

@@ -24,12 +24,6 @@
   --field-bg-color: light-dark(rgb(255 255 255), rgb(64 64 68));
   --field-border-color: light-dark(rgb(187 187 188), rgb(115 115 115));
   --doorhanger-bg-color: light-dark(rgb(255 255 255), rgb(74 74 79));
-  --dialog-button-border: none;
-  --dialog-button-bg-color: light-dark(rgb(12 12 13 / 0.1), rgb(92 92 97));
-  --dialog-button-hover-bg-color: light-dark(
-    rgb(12 12 13 / 0.3),
-    rgb(115 115 115)
-  );
 
   --toolbar-bg-color: light-dark(#f9f9fb, #2b2a33);
   --toolbar-divider-color: light-dark(#e0e0e6, #5b5b66);
@@ -42,9 +36,6 @@
 
 @media screen and (forced-colors: active) {
   :root {
-    --dialog-button-border: 1px solid Highlight;
-    --dialog-button-hover-bg-color: Highlight;
-    --dialog-button-hover-color: ButtonFace;
     --field-border-color: ButtonText;
     --main-color: CanvasText;
   }
@@ -94,40 +85,6 @@ body {
   inset-block-start: 0;
 }
 
-.dialogButton {
-  border: none;
-  background: none;
-  width: 28px;
-  height: 28px;
-  outline: none;
-}
-
-.dialogButton:is(:hover, :focus-visible) {
-  background-color: var(--dialog-button-hover-bg-color);
-}
-
-.dialogButton:is(:hover, :focus-visible) > span {
-  color: var(--dialog-button-hover-color);
-}
-
-.dialogButton[disabled] {
-  opacity: 0.5;
-}
-
-.dialogButton {
-  min-width: 16px;
-  margin: 2px 1px;
-  padding: 2px 6px 0;
-  border: none;
-  border-radius: 2px;
-  color: var(--main-color);
-  font-size: 12px;
-  line-height: 14px;
-  user-select: none;
-  cursor: default;
-  box-sizing: border-box;
-}
-
 .toolbarField {
   padding: 4px 7px;
   margin: 3px 0;
@@ -204,19 +161,6 @@ body {
   }
 }
 
-:is(.toolbarButton .dialogButton)[disabled] {
-  opacity: 0.5;
-}
-
-.dialogButton {
-  width: auto;
-  margin: 3px 4px 2px !important;
-  padding: 2px 11px;
-  color: var(--main-color);
-  background-color: var(--dialog-button-bg-color);
-  border: var(--dialog-button-border) !important;
-}
-
 dialog {
   margin: auto;
   padding: 15px;

web/viewer-geckoview.html

@@ -124,10 +124,10 @@ See https://github.com/adobe-type-tools/cmap-resources
             <input type="password" id="password" class="toolbarField" />
           </div>
           <div class="buttonRow">
-            <button id="passwordCancel" class="dialogButton" type="button">
+            <button id="passwordCancel" class="secondaryButton" type="button">
               <span data-l10n-id="pdfjs-password-cancel-button"></span>
             </button>
-            <button id="passwordSubmit" class="dialogButton" type="button">
+            <button id="passwordSubmit" class="primaryButton" type="button">
               <span data-l10n-id="pdfjs-password-ok-button"></span>
             </button>
           </div>

web/viewer.css

@@ -13,6 +13,16 @@
  * limitations under the License.
  */
 
+/* Pref-gated, so the Firefox tokens are opt-in (and with them the Nova theme,
+   which tokens-brand.css gates on browser.nova.enabled): with the pref off
+   every var() falls back to its shipped literal. -moz-pref() works here
+   because chrome rules are enabled for a resource:// stylesheet, and it only
+   sees pdfjs.* prefs. */
+/*#if MOZCENTRAL*/
+@import url(chrome://global/skin/design-system/tokens-brand.css) -moz-pref(
+    "pdfjs.enableNova"
+  );
+/*#endif*/
 @import url(pdf_viewer.css);
 @import url(digital_signature_properties.css);
 
@@ -55,7 +65,10 @@
     inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25),
     0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
   --toolbarSidebar-border-bottom: none;
-  --button-hover-color: color-mix(in srgb, currentColor 17%, transparent);
+  --button-hover-color: var(
+    --button-background-color-toolbar-hover,
+    color-mix(in srgb, currentColor 17%, transparent)
+  );
   --toggled-btn-color: light-dark(rgb(0 0 0), rgb(255 255 255));
   --toggled-btn-bg-color: rgb(0 0 0 / 0.3);
   --toggled-hover-active-btn-color: rgb(0 0 0 / 0.4);
@@ -70,12 +83,6 @@
   --doorhanger-border-color: light-dark(rgb(12 12 13 / 0.2), rgb(39 39 43));
   --doorhanger-hover-color: light-dark(rgb(12 12 13), rgb(249 249 250));
   --doorhanger-separator-color: light-dark(rgb(222 222 222), rgb(92 92 97));
-  --dialog-button-border: none;
-  --dialog-button-bg-color: light-dark(rgb(12 12 13 / 0.1), rgb(92 92 97));
-  --dialog-button-hover-bg-color: light-dark(
-    rgb(12 12 13 / 0.3),
-    rgb(115 115 115)
-  );
 
   --loading-icon: url(images/loading.svg);
   --toolbarButton-editorComment-icon: url(images/comment-editButton.svg);
@@ -136,6 +143,10 @@
 
 @media screen and (forced-colors: active) {
   :root {
+    /* Must stay a system color in HCM: --button-background-color-toolbar-hover
+       is NOT overridden in the dist's forced-colors layer (it stays a
+       color-mix(currentColor 17%, transparent)), which would make the hover
+       background a faint translucent overlay and hide the ButtonFace icon. */
     --button-hover-color: Highlight;
     --toolbar-icon-opacity: 1;
     --toolbar-icon-bg-color: ButtonText;
@@ -150,9 +161,6 @@
     --doorhanger-hover-color: ButtonFace;
     --doorhanger-border-color-whcm: 1px solid ButtonText;
     --doorhanger-triangle-opacity-whcm: 0;
-    --dialog-button-border: 1px solid Highlight;
-    --dialog-button-hover-bg-color: Highlight;
-    --dialog-button-hover-color: ButtonFace;
     --dropdown-btn-border: 1px solid ButtonText;
     --field-border-color: ButtonText;
     --main-color: CanvasText;
@@ -413,22 +421,6 @@ body {
   }
 }
 
-.dialogButton {
-  border: none;
-  background: none;
-  width: 28px;
-  height: 28px;
-  outline: none;
-}
-
-.dialogButton:is(:hover, :focus-visible) {
-  background-color: var(--dialog-button-hover-bg-color);
-}
-
-.dialogButton:is(:hover, :focus-visible) > span {
-  color: var(--dialog-button-hover-color);
-}
-
 .splitToolbarButtonSeparator {
   float: inline-start;
   width: 0;
@@ -437,20 +429,6 @@ body {
   border-right: none;
 }
 
-.dialogButton {
-  min-width: 16px;
-  margin: 2px 1px;
-  padding: 2px 6px 0;
-  border: none;
-  border-radius: 2px;
-  color: var(--main-color);
-  font-size: 12px;
-  line-height: 14px;
-  user-select: none;
-  cursor: default;
-  box-sizing: border-box;
-}
-
 #viewsManagerToggleButton::before {
   mask-image: var(--toolbarButton-viewsManagerToggle-icon);
   transform: scaleX(var(--dir-factor));
@@ -646,15 +624,6 @@ body {
   }
 }
 
-.dialogButton {
-  width: auto;
-  margin: 3px 4px 2px !important;
-  padding: 2px 11px;
-  color: var(--main-color);
-  background-color: var(--dialog-button-bg-color);
-  border: var(--dialog-button-border) !important;
-}
-
 dialog {
   margin: auto;
   padding: 15px;
@@ -665,7 +634,7 @@ dialog {
   line-height: 14px;
   background-color: var(--doorhanger-bg-color);
   border: 1px solid rgb(0 0 0 / 0.5);
-  border-radius: 4px;
+  border-radius: var(--border-radius-medium, 4px);
   box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
 }
 
@@ -695,8 +664,10 @@ dialog .separator {
 }
 
 dialog .buttonRow {
-  text-align: center;
+  display: flex;
-  vertical-align: middle;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
 }
 
 dialog :link {

web/viewer.html

@@ -33,7 +33,7 @@ See https://github.com/adobe-type-tools/cmap-resources
     <!--<link rel="icon" type="image/svg+xml" href="chrome://global/skin/icons/pdf.svg" />-->
     <!--<meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'none'; script-src resource: 'wasm-unsafe-eval'; worker-src resource:; style-src resource:; img-src resource: blob: data:; media-src blob:; font-src resource:; connect-src resource:; base-uri 'none'; form-action 'none';"
+      content="default-src 'none'; script-src resource: 'wasm-unsafe-eval'; worker-src resource:; style-src resource: chrome:; img-src resource: blob: data:; media-src blob:; font-src resource:; connect-src resource:; base-uri 'none'; form-action 'none';"
     />-->
     <!--#elif TESTING-->
     <!--<meta
@@ -901,8 +901,8 @@ See https://github.com/adobe-type-tools/cmap-resources
             <input type="password" id="password" class="toolbarField" />
           </div>
           <div class="buttonRow">
-            <button id="passwordCancel" class="dialogButton" type="button"><span data-l10n-id="pdfjs-password-cancel-button"></span></button>
+            <button id="passwordCancel" class="secondaryButton" type="button"><span data-l10n-id="pdfjs-password-cancel-button"></span></button>
-            <button id="passwordSubmit" class="dialogButton" type="button"><span data-l10n-id="pdfjs-password-ok-button"></span></button>
+            <button id="passwordSubmit" class="primaryButton" type="button"><span data-l10n-id="pdfjs-password-ok-button"></span></button>
           </div>
         </dialog>
         <dialog id="documentPropertiesDialog">
@@ -966,7 +966,9 @@ See https://github.com/adobe-type-tools/cmap-resources
             <p id="linearizedField" aria-labelledby="linearizedLabel">-</p>
           </div>
           <div class="buttonRow">
-            <button id="documentPropertiesClose" class="dialogButton" type="button"><span data-l10n-id="pdfjs-document-properties-close-button"></span></button>
+            <button id="documentPropertiesClose" class="secondaryButton" type="button">
+              <span data-l10n-id="pdfjs-document-properties-close-button"></span>
+            </button>
           </div>
         </dialog>
         <dialog class="dialog altText" id="altTextDialog" aria-labelledby="dialogLabel" aria-describedby="dialogDescription">
@@ -1210,7 +1212,7 @@ See https://github.com/adobe-type-tools/cmap-resources
                       <button class="clearInputButton" type="button" tabindex="0" aria-hidden="true"></button>
                     </span>
                   </div>
-                  <button id="clearSignatureButton" type="button" data-l10n-id="pdfjs-editor-add-signature-clear-button" tabindex="0">
+                  <button id="clearSignatureButton" class="secondaryButton" type="button" data-l10n-id="pdfjs-editor-add-signature-clear-button" tabindex="0">
                     <span data-l10n-id="pdfjs-editor-add-signature-clear-button-label"></span>
                   </button>
                 </div>
@@ -1297,7 +1299,7 @@ See https://github.com/adobe-type-tools/cmap-resources
             <span data-l10n-id="pdfjs-print-progress-percent" data-l10n-args='{ "progress": 0 }' class="relative-progress">0%</span>
           </div>
           <div class="buttonRow">
-            <button id="printCancel" class="dialogButton" type="button"><span data-l10n-id="pdfjs-print-progress-close-button"></span></button>
+            <button id="printCancel" class="secondaryButton" type="button"><span data-l10n-id="pdfjs-print-progress-close-button"></span></button>
           </div>
         </dialog>
         <!--#endif-->
@@ -1312,7 +1314,7 @@ See https://github.com/adobe-type-tools/cmap-resources
           <div>
             <span id="editorUndoBarMessage" class="description"></span>
           </div>
-          <button id="editorUndoBarUndoButton" class="undoButton" type="button" tabindex="0" data-l10n-id="pdfjs-editor-undo-bar-undo-button">
+          <button id="editorUndoBarUndoButton" class="secondaryButton" type="button" tabindex="0" data-l10n-id="pdfjs-editor-undo-bar-undo-button">
             <span data-l10n-id="pdfjs-editor-undo-bar-undo-button-label"></span>
           </button>
           <button id="editorUndoBarCloseButton" class="closeButton" type="button" tabindex="0" data-l10n-id="pdfjs-editor-undo-bar-close-button">

web/views_manager.css

@@ -60,19 +60,35 @@
   --sidebar-max-width: 50vw;
   --sidebar-block-padding: 8px;
 
-  --text-color: light-dark(#15141a, #fbfbfe);
+  --views-text-color: var(--text-color, light-dark(#15141a, #fbfbfe));
-  --button-fg: var(--text-color);
+  --button-fg: var(--views-text-color);
-  --button-no-bg: transparent;
+  --button-no-bg: var(--button-background-color-toolbar, transparent);
-  --button-bg: light-dark(rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07));
+  --button-bg: var(
-  --button-border-color: transparent;
+    --button-background-color,
-  --button-hover-bg: light-dark(rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14));
+    light-dark(rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07))
-  --button-hover-fg: var(--text-color);
+  );
-  --button-hover-border-color: var(--button-border-color);
+  --views-button-border-color: var(--button-border-color, transparent);
-  --button-active-bg: light-dark(rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21));
+  --button-hover-bg: var(
-  --button-active-fg: var(--text-color);
+    --button-background-color-hover,
-  --button-active-border-color: var(--button-border-color);
+    light-dark(rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14))
-  --button-focus-no-bg: color-mix(in srgb, var(--text-color), transparent 93%);
+  );
-  --button-focus-outline-color: light-dark(#0062fa, #00cadb);
+  --button-hover-fg: var(--views-text-color);
+  --button-hover-border-color: var(--views-button-border-color);
+  --button-active-bg: var(
+    --button-background-color-active,
+    light-dark(rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21))
+  );
+  --button-active-fg: var(--views-text-color);
+  --button-active-border-color: var(--views-button-border-color);
+  --button-focus-no-bg: color-mix(
+    in srgb,
+    var(--views-text-color),
+    transparent 93%
+  );
+  --button-focus-outline-color: var(
+    --focus-outline-color,
+    light-dark(#0062fa, #00cadb)
+  );
   --button-focus-border-color: light-dark(white, black);
   --status-border-color: transparent;
   --status-actions-bg: light-dark(
@@ -81,7 +97,7 @@
   );
   --status-undo-bg: light-dark(rgb(0 98 250 / 0.08), rgb(0 202 219 / 0.08));
   --status-waiting-bg: var(--status-undo-bg);
-  --indicator-color: light-dark(#0062fa, #00cadb);
+  --indicator-color: var(--color-accent-primary, light-dark(#0062fa, #00cadb));
   --status-warning-bg: light-dark(#ffe8ea, #6e001f);
   --indicator-warning-color: light-dark(#b20037, #ffa0aa);
   --header-shadow:
@@ -95,7 +111,7 @@
   --image-current-border-color: var(--button-focus-outline-color);
   --image-current-focused-outline-color: var(--image-hover-border-color);
   --image-page-number-bg: light-dark(#f0f0f4, #42414d);
-  --image-page-number-fg: var(--text-color);
+  --image-page-number-fg: var(--views-text-color);
   --image-page-number-border-color: transparent;
   --image-hover-page-number-bg: var(--image-page-number-bg);
   --image-hover-page-number-fg: var(--image-page-number-fg);
@@ -134,23 +150,25 @@
   --multiple-dragging-text-color: light-dark(#fbfbfe, #15141a);
 
   @media screen and (forced-colors: active) {
-    --text-color: CanvasText;
+    --views-text-color: var(--text-color, CanvasText);
-    --button-fg: ButtonText;
+    --button-fg: var(--button-text-color, ButtonText);
-    --button-bg: ButtonFace;
+    --button-bg: var(--button-background-color, ButtonFace);
-    --button-no-bg: ButtonFace;
+    --button-no-bg: var(--button-background-color, ButtonFace);
-    --button-border-color: ButtonText;
+    --views-button-border-color: var(--button-border-color, ButtonText);
-    --button-hover-bg: SelectedItemText;
+    --button-hover-bg: var(--button-background-color-hover, SelectedItemText);
-    --button-hover-fg: SelectedItem;
+    --button-hover-fg: var(--button-text-color-hover, SelectedItem);
-    --button-hover-border-color: SelectedItem;
+    --button-hover-border-color: var(--button-border-color-hover, SelectedItem);
-    --button-active-bg: SelectedItemText;
+    --button-active-bg: var(--button-background-color-active, SelectedItemText);
-    --button-active-fg: SelectedItem;
+    --button-active-fg: var(--button-text-color-active, SelectedItem);
-    --button-active-border-color: ButtonText;
+    --button-active-border-color: var(--button-border-color-active, ButtonText);
-    --button-focus-no-bg: ButtonFace;
+    --button-focus-no-bg: var(--button-background-color, ButtonFace);
-    --button-focus-outline-color: CanvasText;
+    --button-focus-outline-color: var(--focus-outline-color, CanvasText);
     --button-focus-border-color: none;
     --status-border-color: CanvasText;
     --status-undo-bg: none;
-    --indicator-color: CanvasText;
+    /* Painted on Canvas panels, so --text-color rather than the accent (which
+       is ButtonText in Firefox HCM). */
+    --indicator-color: var(--text-color, CanvasText);
     --status-warning-bg: none;
     --indicator-warning-color: CanvasText;
     --header-shadow: none;
@@ -162,7 +180,7 @@
     --image-hover-page-number-fg: SelectedItem;
     --image-current-page-number-bg: ButtonText;
     --image-current-page-number-fg: ButtonFace;
-    --image-current-border-color: ButtonText;
+    --image-current-border-color: var(--border-color, ButtonText);
     --image-current-focused-outline-color: var(--image-hover-border-color);
     --image-current-hover-page-number-bg: SelectedItem;
     --image-current-hover-page-number-fg: SelectedItemText;
@@ -170,7 +188,7 @@
     --image-page-number-fg: ButtonText;
     --image-page-number-border-color: var(--image-page-number-fg);
     --multiple-dragging-bg: Canvas;
-    --multiple-dragging-indicator-bg: ButtonBorder;
+    --multiple-dragging-indicator-bg: var(--text-color, ButtonBorder);
     --multiple-dragging-text-color: Canvas;
     --image-dragging-placeholder-bg: Canvas;
     --image-dragging-placeholder-border: 1px GrayText solid;
@@ -200,8 +218,8 @@
   .viewsManagerButton {
     width: auto;
     color: var(--button-fg);
-    border-radius: 8px;
+    border-radius: var(--button-border-radius, 8px);
-    border: 1px solid var(--button-border-color);
+    border: 1px solid var(--views-button-border-color);
     background: var(--button-bg);
 
     &:hover {
@@ -229,13 +247,17 @@
     }
 
     &.viewsCloseButton {
-      width: 26px;
+      width: var(--size-item-large, 26px);
-      height: 26px;
+      height: var(--size-item-large, 26px);
-      padding: 4px;
+      border-radius: var(--button-border-radius, 8px);
-      border-radius: 8px;
       background: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       &::before {
+        width: 16px;
+        height: 16px;
         mask-image: var(--close-button-icon);
       }
     }
@@ -253,7 +275,7 @@
 
     .viewsManagerLabel {
       flex: 1 1 auto;
-      color: var(--text-color);
+      color: var(--views-text-color);
       text-align: center;
       height: fit-content;
       width: fit-content;