--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -845,18 +845,18 @@
                          tooltiptext="&urlbar.microphoneBlocked.tooltip;"/>
                   <image data-permission-id="screen" class="blocked-permission-icon screen-icon" role="button"
                          tooltiptext="&urlbar.screenBlocked.tooltip;"/>
                   <image data-permission-id="persistent-storage" class="blocked-permission-icon persistent-storage-icon" role="button"
                          tooltiptext="&urlbar.persistentStorageBlocked.tooltip;"/>
                 </box>
                 <box id="notification-popup-box"
                      hidden="true"
-                     onmouseover="document.getElementById('identity-icon').classList.add('no-hover');"
-                     onmouseout="document.getElementById('identity-icon').classList.remove('no-hover');"
+                     onmouseover="document.getElementById('identity-box').classList.add('no-hover');"
+                     onmouseout="document.getElementById('identity-box').classList.remove('no-hover');"
                      align="center">
                   <image id="default-notification-icon" class="notification-anchor-icon" role="button"
                          tooltiptext="&urlbar.defaultNotificationAnchor.tooltip;"/>
                   <image id="geo-notification-icon" class="notification-anchor-icon geo-icon" role="button"
                          tooltiptext="&urlbar.geolocationNotificationAnchor.tooltip;"/>
                   <image id="addons-notification-icon" class="notification-anchor-icon install-icon" role="button"
                          tooltiptext="&urlbar.addonsNotificationAnchor.tooltip;"/>
                   <image id="indexedDB-notification-icon" class="notification-anchor-icon indexedDB-icon" role="button"

--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -38,16 +38,17 @@
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
 
   --panel-separator-color: ThreeDShadow;
   --arrowpanel-dimmed: hsla(0,0%,80%,.3);
   --arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
   --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
 
   --urlbar-separator-color: ThreeDShadow;
+  --urlbar-light-separator-color: ThreeDShadow;
 }
 
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
 }
 
 #main-menubar {
   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
@@ -327,24 +328,16 @@ menuitem.bookmark-item {
   -moz-appearance: none;
   -moz-box-align: stretch;
 }
 
 .urlbar-input-box {
   margin: 0;
 }
 
-.urlbar-input-box,
-#urlbar-display-box {
-  padding-inline-start: 4px;
-  border-inline-start: 1px solid var(--urlbar-separator-color);
-  border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
-  border-image-slice: 1;
-}
-
 .urlbar-history-dropmarker {
   -moz-appearance: toolbarbutton-dropdown;
   transition: opacity 0.15s ease;
 }
 
 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
   transition: none;
 }

--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -52,16 +52,17 @@
   --urlbar-dropmarker-active-2x-region: rect(0, 44px, 28px, 22px);
 
   --panel-separator-color: hsla(210,4%,10%,.14);
   --arrowpanel-dimmed: hsla(210,4%,10%,.07);
   --arrowpanel-dimmed-further: hsla(210,4%,10%,.12);
   --arrowpanel-dimmed-even-further: hsla(210,4%,10%,.17);
 
   --urlbar-separator-color: hsla(0,0%,16%,.2);
+  --urlbar-light-separator-color: hsla(0,0%,16%,.2);
 }
 
 %ifndef MOZ_PHOTON_THEME
 toolbar:-moz-lwtheme {
   --backbutton-background: linear-gradient(rgba(255,255,255,0.5),
                               rgba(255,255,255,0.2) 50%,
                               rgba(255,255,255,0.1) 50%,
                               rgba(255,255,255,0.2)) repeat-x;
@@ -662,24 +663,16 @@ toolbarpaletteitem[place="palette"] > #p
   padding-inline-end: 5px;
 }
 
 .urlbar-input-box {
   margin: 0;
   padding: 3px 0 2px;
 }
 
-.urlbar-input-box,
-#urlbar-display-box {
-  padding-inline-start: 4px;
-  border-inline-start: 1px solid var(--urlbar-separator-color);
-  border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
-  border-image-slice: 1;
-}
-
 .urlbar-history-dropmarker {
   padding: 0 3px;
   list-style-image: var(--urlbar-dropmarker-url);
   -moz-image-region: var(--urlbar-dropmarker-region);
   transition: opacity 0.15s ease;
 }
 
 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {

--- a/browser/themes/shared/controlcenter/connection.svg
+++ b/browser/themes/shared/controlcenter/connection.svg
@@ -4,20 +4,16 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      width="24" height="24" viewBox="0 0 24 24">
 #include ../icon-colors.inc.svg
   <style>
     svg > rect:not(:target) {
       display: none;
     }
-
-    #connection-secure {
-      fill: #4d9a26;
-    }
   </style>
 
   <defs>
     <rect id="shape-lock-clasp-outer" x="5" y="1" width="14" height="20" rx="7" ry="7" />
     <rect id="shape-lock-clasp-inner" x="8" y="4" width="8" height="14" rx="4" ry="4" />
     <rect id="shape-lock-base" x="3" y="10" width="18" height="13" rx="1.5" ry="1.5" />
 
     <mask id="mask-clasp-cutout">
@@ -28,10 +24,10 @@
 
     <mask id="mask-lock">
       <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" fill="#fff"/>
       <use xlink:href="#shape-lock-base" fill="#fff"/>
     </mask>
   </defs>
 
   <rect id="connection-degraded" class="fieldtext" width="24" height="24" mask="url(#mask-lock)"/>
-  <rect id="connection-secure" width="24" height="24" mask="url(#mask-lock)"/>
+  <rect id="connection-secure" width="24" height="24" mask="url(#mask-lock)" fill="context-fill" />
 </svg>

--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -203,17 +203,21 @@
 .identity-popup-warning-gray:-moz-locale-dir(rtl),
 .identity-popup-warning-yellow:-moz-locale-dir(rtl) {
   background-position: 100% 50%;
 }
 
 /* SECURITY */
 
 .identity-popup-connection-secure {
+%ifdef MOZ_PHOTON_THEME
+  color: #058B00;
+%else
   color: #418220;
+%endif
 }
 
 .identity-popup-connection-not-secure {
   color: #d74345;
 }
 
 #identity-popup-securityView {
   overflow: hidden;
@@ -227,16 +231,22 @@
 #identity-popup[connection=chrome] #identity-popup-securityView,
 #identity-popup[connection=chrome] #identity-popup-security-content {
   background-image: url(chrome://branding/content/icon48.png);
 }
 
 #identity-popup[connection^=secure] #identity-popup-securityView,
 #identity-popup[connection^=secure] #identity-popup-security-content {
   background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-secure);
+  -moz-context-properties: fill;
+%ifdef MOZ_PHOTON_THEME
+  fill: #12BC00;
+%else
+  fill: #4d9a26;
+%endif
 }
 
 /* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */
 #identity-popup[ciphers=weak] #identity-popup-securityView,
 #identity-popup[ciphers=weak] #identity-popup-security-content,
 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-securityView,
 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-security-content {
   background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-degraded);

--- a/browser/themes/shared/identity-block/connection-secure.svg
+++ b/browser/themes/shared/identity-block/connection-secure.svg
@@ -1,27 +1,21 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - 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/. -->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      width="16" height="16" viewBox="0 0 16 16">
-  <style>
-    .icon-default {
-      fill: #4d9a26;
-    }
-  </style>
-
   <defs>
     <rect id="shape-lock-clasp-outer" x="4" y="2" width="8" height="10" rx="4" ry="4" />
     <rect id="shape-lock-clasp-inner" x="6" y="4" width="4" height="6" rx="2" ry="2" />
     <rect id="shape-lock-base" x="3" y="7" width="10" height="7" rx="1" ry="1" />
 
     <mask id="mask-clasp-cutout">
       <rect width="16" height="16" fill="#000" />
       <use xlink:href="#shape-lock-clasp-outer" fill="#fff" />
       <use xlink:href="#shape-lock-clasp-inner" fill="#000" />
     </mask>
   </defs>
 
-  <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default" />
-  <use xlink:href="#shape-lock-base" class="icon-default" />
+  <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default" fill="context-fill" />
+  <use xlink:href="#shape-lock-base" class="icon-default" fill="context-fill" />
 </svg>

--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -13,18 +13,31 @@
   /* The padding-left and padding-right transitions handle the delayed hiding of
      the forward button when hovered. */
   transition: padding-left, padding-right;
 %endif
   /* This is for tracking-protection-icon's slide-in animation. */
   overflow: hidden;
 }
 
+
+%ifdef MOZ_PHOTON_THEME
+#identity-box:hover:not(.no-hover),
+#identity-box[open=true],
+#identity-box.grantedPermissions[open=true] {
+  background-color: hsla(240, 5%, 5%, .05);
+}
+%endif
+
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
+%ifdef MOZ_PHOTON_THEME
+  color: #058B00;
+%else
   color: hsl(92,100%,30%);
+%endif
 }
 
 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
 %ifdef MOZ_OFFICIAL_BRANDING
   color: rgb(229,115,0);
 %else
   color: inherit;
 %endif
@@ -33,16 +46,53 @@
 #identity-icon-labels:-moz-locale-dir(ltr) {
   padding-left: 2px;
 }
 
 #identity-icon-labels:-moz-locale-dir(rtl) {
   padding-right: 2px;
 }
 
+%ifdef MOZ_PHOTON_THEME
+#identity-box:not(#identity-box.chromeUI) {
+  --urlbar-separator-color: transparent;
+}
+#urlbar[pageproxystate=valid] #identity-box.chromeUI {
+  --urlbar-separator-color: var(--urlbar-light-separator-color);
+}
+#urlbar[pageproxystate=valid] #identity-box.verifiedIdentity {
+  --urlbar-separator-color: rgba(18, 188, 0, .5);
+}
+%endif
+
+#identity-box {
+  padding-inline-end: 2px;
+  margin-inline-end: 2px;
+}
+
+#urlbar[pageproxystate=valid] #identity-box.verifiedIdentity,
+#urlbar[pageproxystate=valid] #identity-box.chromeUI {
+  padding-inline-end: 4px;
+  margin-inline-end: 4px;
+  border-inline-end: 1px solid var(--urlbar-separator-color);
+  border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
+  border-image-slice: 1;
+}
+
+#urlbar-display-box {
+  margin-inline-end: 4px;
+  border-inline-end: 1px solid var(--urlbar-light-separator-color);
+  border-image: linear-gradient(transparent 15%, var(--urlbar-light-separator-color) 15%, var(--urlbar-light-separator-color) 85%, transparent 85%);
+  border-image-slice: 1;
+}
+
+#urlbar-display-box label {
+  margin-inline-start: 2px;
+}
+
 %ifndef MOZ_PHOTON_THEME
 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #identity-box {
   padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 5px);
 }
 
 @conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
   /* Forward button hiding is delayed when hovered, so we should use the same
      delay for the identity box. We handle both horizontal paddings (for LTR and
@@ -80,30 +130,32 @@
 
 /* MAIN IDENTITY ICON */
 
 #identity-icon {
   margin-inline-start: 0;
   list-style-image: url(chrome://browser/skin/identity-icon.svg);
 }
 
-#identity-box:hover > #identity-icon:not(.no-hover),
+%ifndef MOZ_PHOTON_THEME
+#identity-box:not(.no-hover):hover > #identity-icon,
 #identity-box[open=true] > #identity-icon {
   list-style-image: url(chrome://browser/skin/identity-icon-hover.svg);
 }
 
+#identity-box.grantedPermissions:not(.no-hover):hover > #identity-icon,
+#identity-box.grantedPermissions[open=true] > #identity-icon {
+  list-style-image: url(chrome://browser/skin/identity-icon-notice-hover.svg);
+}
+%endif
+
 #identity-box.grantedPermissions > #identity-icon {
   list-style-image: url(chrome://browser/skin/identity-icon-notice.svg);
 }
 
-#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
-#identity-box.grantedPermissions[open=true] > #identity-icon {
-  list-style-image: url(chrome://browser/skin/identity-icon-notice-hover.svg);
-}
-
 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
   list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
 }
 
 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
   opacity: .3;
 }
 
@@ -194,16 +246,21 @@
   visibility: collapse;
 }
 
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
   list-style-image: url(chrome://browser/skin/connection-secure.svg);
   visibility: visible;
+%ifdef MOZ_PHOTON_THEME
+  fill: #12BC00;
+%else
+  fill: #4d9a26;
+%endif
 }
 
 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
   list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg);
   visibility: visible;

--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -51,16 +51,17 @@
   --urlbar-dropmarker-active-2x-region: rect(0, 66px, 28px, 44px);
 
   --panel-separator-color: ThreeDLightShadow;
   --arrowpanel-dimmed: hsla(0,0%,80%,.3);
   --arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
   --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
 
   --urlbar-separator-color: ThreeDLightShadow;
+  --urlbar-light-separator-color: ThreeDLightShadow;
 }
 
 @media (-moz-windows-default-theme) {
   :root {
     --panel-separator-color: hsla(210,4%,10%,.14);
   }
 }
 
@@ -825,24 +826,16 @@ html|*.urlbar-input:-moz-lwtheme::placeh
 .urlbar-textbox-container {
   -moz-box-align: stretch;
 }
 
 .urlbar-input-box {
   margin: 0;
 }
 
-.urlbar-input-box,
-#urlbar-display-box {
-  padding-inline-start: 4px;
-  border-inline-start: 1px solid var(--urlbar-separator-color);
-  border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
-  border-image-slice: 1;
-}
-
 #urlbar-icons {
   -moz-box-align: center;
 }
 
 .urlbar-icon {
   padding: 0 3px;
   /* 16x16 icon with border-box sizing */
   width: 22px;