--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -143,37 +143,38 @@
 #webauthn-notification-icon,
 .popup-notification-icon[popupid^="webauthn-prompt-"] {
   list-style-image: url(chrome://browser/skin/notification-icons/webauthn.svg);
 }
 
 #webRTC-preview:not([hidden]) {
   display: -moz-stack;
   border-radius: 4px;
-  border: 1px solid GrayText;
+  border: 1px solid var(--panel-separator-color);
   overflow: hidden;
   min-width: 300px;
   min-height: 10em;
 }
 
 html|*#webRTC-previewVideo {
   width: 300px;
   /* If we don't set the min-width, width is ignored. */
   min-width: 300px;
   max-height: 200px;
 }
 
 #webRTC-previewWarning {
   background: rgba(255,217,99,.8) url("chrome://browser/skin/warning.svg") no-repeat .75em .75em;
+  color: #000;
   -moz-context-properties: fill;
-  fill: #fff;
+  fill: currentColor;
   margin: 0;
   padding: .5em;
   padding-inline-start: calc(1.5em + 16px);
-  border-top: 1px solid GrayText;
+  border-top: 1px solid var(--panel-separator-color);
 }
 
 #webRTC-previewWarning > .text-link {
   margin-inline-start: 0;
 }
 
 /* This icon has a block sign in it, so we don't need a blocked version. */
 .popup-icon {

--- a/toolkit/themes/shared/popupnotification.inc.css
+++ b/toolkit/themes/shared/popupnotification.inc.css
@@ -70,17 +70,17 @@
 
 .popup-notification-button:hover:active:not([disabled]) {
   background-color: var(--arrowpanel-dimmed-further);
   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 }
 
 .popup-notification-button[disabled] {
   background-color: var(--arrowpanel-dimmed-further);
-  color: graytext;
+  color: var(--panel-disabled-color);
 }
 
 .popup-notification-button[default]:not([alone]) {
   flex: 0 50%;
 }
 
 .popup-notification-button[default][highlight="true"]:not([disabled]) {
   background-color: #0996f8;