Merge pull request #21665 from calixteman/sync_firefox_css

Sync the viewer chrome with the Firefox design system

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;