After I used the buttons in Nightly for a while, I realized the light mode colors that I specified before seemed too intense. (Sorry about this!)

I tested out new between-states that are one step lighter, and I think this fits into the rest of DevTools much better. This also involves making the normal/hover color the same for the Copy Rule buttons because the double hover effect seemed distracting. The Invision mockup has been updated to reflect these new colors.

Just for fun, here's the test code for light mode (with opaque hex values that you probably don't want + more examples of the background: ; bug) :)

.changes__copy-all-changes-button:hover {
  background: ;
  background-color: #F3F3F3;
}

.changes__copy-rule-button:hover {
  /* background-color: var(--changes-button-copy-rule-background-color--hover); */
}

.changes__copy-rule-button {
  /* background-blend-mode: overlay; */
  /* background-color: var(--changes-button-copy-rule-background-color); */
  /* background-image: linear-gradient(var(--theme-sidebar-background), var(--theme-sidebar-background)); */
  background-color: #F3F3F3;
}

.changes__copy-all-changes-button:active {
  background: ;
  background-color: #E6E6E6;
}

.changes__copy-rule-button:active {
  /* background-color: #tile-search > a:nth-child(1) > span:nth-child(1) \{ align-content: center; */
  background-color: #e6e6e6;
}```

Reflecting latest UI changes: https://mozilla.invisionapp.com/share/VFQC7MQSD9W#/screens

https://hg.mozilla.org/mozilla-central/rev/a649b71a797e