Improve unpushed branch indicator style

- Use darker color in light mode to provide enough contrast
- Change color to white when selected, to match other UI elements
- Also make name bold so we're not relying on just color

Author: pol-rivero

app/styles/_variables.scss

@@ -547,6 +547,8 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
   --pr-commented-icon-color: var(--md-fg-muted-color);
   --pr-commented-icon-background-color: #eaeef2;
 
+  --unpushed-branch-color: #{$yellow-900};
+
   --call-to-action-bubble-border-color: #{$green};
   --call-to-action-bubble-color: #{$green};
 

app/styles/themes/_dark.scss

@@ -430,6 +430,8 @@ body.theme-dark {
   --pr-commented-icon-color: #8b949e;
   --pr-commented-icon-background-color: #{$gray-700};
 
+  --unpushed-branch-color: #{$yellow-600};
+
   --call-to-action-bubble-background-color: #{$blue};
   --call-to-action-bubble-color: #{$white};
 

app/styles/ui/_branches.scss

@@ -189,7 +189,10 @@
     }
 
     &.local-only {
-      color: var(--dialog-warning-color);
+      color: var(--unpushed-branch-color);
+      .name {
+        font-weight: var(--font-weight-semibold);
+      }
     }
 
     &.disabled {

app/styles/ui/_list.scss

@@ -79,6 +79,7 @@
   &.focus-within .list-item.selected:not(.in-keyboard-insertion-mode) {
     --text-color: var(--box-selected-active-text-color);
     --text-secondary-color: var(--box-selected-active-text-color);
+    --unpushed-branch-color: var(--box-selected-active-text-color);
 
     color: var(--text-color);
     background-color: var(--box-selected-active-background-color);