Increased color contrast when buttons overlap selected rows (#9880)

packages/replay-next/components/elements/ElementsListItem.module.css

@@ -19,7 +19,7 @@
   color: var(--color-default);
 }
 .Node[data-selected] {
-  background-color: var(--theme-selection-background);
+  background-color: var(--primary-accent-dimmed);
 }
 .Node[data-selected],
 .Node[data-selected] .HtmlAttributeName,
@@ -29,7 +29,6 @@
 .Node[data-selected] .HTMLTag,
 .Node[data-selected] .Separator,
 .Node[data-selected] .Icon {
-  color: var(--theme-selection-color);
   fill: var(--theme-selection-color);
 }
 .Node[data-loading] {

packages/replay-next/pages/variables.css

@@ -34,7 +34,6 @@
 
   --primary-accent: #01acfd;
   --primary-accent-hover: #0194ff;
-  --primary-accent-foreground-text: #fff;
 
   --secondary-accent: #f02d5e;
   --secondary-accent-hover: #d72451;
@@ -145,6 +144,10 @@
 :root,
 :root.theme-dark {
   --color-transparent: rgba(0, 0, 0, 0);
+  --primary-accent-foreground-text: #fff;
+
+  --primary-accent-dimmed: #163e58;
+  --primary-accent-dimmed-foreground-text: var(--body-color);
 
   /* Color ramp (Dark) */
   --theme-base-100: #000; /* background chrome */
@@ -187,7 +190,9 @@
   --theme-text-field-bgcolor: var(--theme-base-85);
   --theme-text-field-color: #fff;
   --theme-text-field-placeholder-color: #babbbc;
-  --team-row-active: var(--theme-text-field-bgcolor);
+  --team-row-active: var(--primary-accent-dimmed);
+  --timing-container: var(--theme-base-85);
+  --timing-container-selected-row: #175e88;
   --tooltip-bgcolor: var(--theme-base-100);
   --tooltip-color: #fff;
   --tooltip-border: 1px solid rgba(43, 46, 49, 1);
@@ -668,6 +673,10 @@
 
 :root.theme-light {
   --color-transparent: rgba(255, 255, 255, 0);
+  --primary-accent-foreground-text: #fff;
+
+  --primary-accent-dimmed: #cceeff;
+  --primary-accent-dimmed-foreground-text: var(--body-color);
 
   /* Color ramp (Light) */
   --theme-base-100: hsl(0, 0%, 100%);
@@ -710,7 +719,9 @@
   --theme-text-field-bgcolor: #f6f6f6;
   --theme-text-field-color: var(--body-color);
   --theme-text-field-placeholder-color: #a9a9b1;
-  --team-row-active: #3f434a;
+  --team-row-active: #163e58; /* the dark version of --primary-accent-dimmed */
+  --timing-container: var(--theme-base-85);
+  --timing-container-selected-row: #94d9fd;
   --tooltip-bgcolor: #38383d;
   --tooltip-color: white;
   --tooltip-border: 1px solid transparent;

src/ui/components/Library/Library.module.css

@@ -19,11 +19,11 @@
 }
 
 :root:global(.theme-dark) .libraryRowSelected {
-  background-color: #14243e;
+  background-color: var(--primary-accent-dimmed);
 }
 
 :root:global(.theme-dark) .libraryRowSelected:hover {
-  background-color: #162641;
+  background-color: var(--primary-accent-dimmed);
 }
 
 :root:global(.theme-dark) .teamRow:hover,

src/ui/components/Library/Navigation/TeamButton.tsx

@@ -47,7 +47,7 @@ export function TeamButton({
       href={url}
       className={classNames(
         `${styles.teamRow} group flex flex-row justify-between space-x-2 px-4 py-2 text-left transition duration-200 hover:text-white focus:outline-none`,
-        isSelected ? `${styles.teamRowActive} cursor-auto font-bold` : "cursor-pointer"
+        isSelected ? `${styles.teamRowActive} cursor-auto` : "cursor-pointer"
       )}
       onClick={onClick}
     >

src/ui/components/NetworkMonitor/NetworkMonitorListRow.module.css

@@ -35,10 +35,10 @@
 .Row[data-selected],
 .Row[data-selected]:focus,
 .Row[data-selected]:hover {
-  background: var(--primary-accent-hover);
-  color: var(--primary-accent-foreground-text);
+  background: var(--primary-accent-dimmed);
+  color: var(--primary-accent-dimmed-foreground-text);
 
-  --status-color: var(--primary-accent-foreground-text);
+  --status-color: var(--primary-accent-dimmed-foreground-text);
 }
 
 /* These styles should stay in sync with NetworkMonitorListHeader */
@@ -87,7 +87,7 @@
   align-items: center;
   gap: 1ch;
 
-  background: linear-gradient(0deg, var(--primary-accent) 0, var(--primary-accent) 100%);
+  background: var(--background-color-primary-button);
   color: #fff;
   font-weight: bold;
 }
@@ -97,11 +97,6 @@
 }
 .SeekButton:focus,
 .SeekButton:hover {
-  background: linear-gradient(
-    0deg,
-    var(--primary-accent-hover) 0,
-    var(--primary-accent-hover) 100%
-  );
   outline: none;
 }
 
@@ -126,10 +121,11 @@
   position: relative;
   height: 0.8rem;
   border-radius: 3px;
-  background-color: var(--chrome);
+  background-color: var(--timing-container);
   margin-right: 1ch;
   overflow: hidden;
 }
+
 .TimingContainer[data-incomplete] {
   opacity: 0.65;
 }
@@ -141,6 +137,8 @@
   min-width: 1px;
 }
 
-.Row:hover .TimingContainer {
-  background-color: var(--body-bgcolor);
+.Row[data-selected] .TimingContainer,
+.Row[data-selected]:focus .TimingContainer,
+.Row[data-selected]:hover .TimingContainer {
+  background-color: var(--timing-container-selected-row);
 }

src/ui/components/SecondaryToolbox/react-devtools/components/ReactDevToolsListItem.module.css

@@ -5,14 +5,10 @@
   padding-left: calc(var(--data-depth) * var(--indentation-size));
 }
 .Row[data-selected] {
-  background-color: var(--theme-selection-background);
-}
-.Row[data-selected] .ElementKey,
-.Row[data-selected] .ElementName,
-.Row[data-selected] .Icon {
-  color: var(--theme-selection-color);
-  fill: var(--theme-selection-color);
+  background-color: var(--primary-accent-dimmed);
+  color: var(--value-type-html-tag);
 }
+
 .Row[data-selected] .ElementKey {
   background: var(--background-color-current-execution-point-column);
 }

src/ui/components/SecondaryToolbox/redux-devtools/ReduxDevToolsListItem.module.css

@@ -18,8 +18,8 @@
   opacity: 1;
 }
 .ListItem[data-selected] {
-  background-color: var(--theme-selection-background);
-  color: var(--theme-selection-color);
+  background-color: var(--primary-accent-dimmed);
+  color: var(--body-color);
   opacity: 1;
 }