From d61a0a989e7cb15a9c6a7d01727562234cbb350d Mon Sep 17 00:00:00 2001 From: Jon Bell Date: Tue, 14 Nov 2023 13:30:05 +1300 Subject: [PATCH] Increased color contrast when buttons overlap selected rows (#9880) --- .../elements/ElementsListItem.module.css | 3 +-- packages/replay-next/pages/variables.css | 17 +++++++++++--- src/ui/components/Library/Library.module.css | 4 ++-- .../Library/Navigation/TeamButton.tsx | 2 +- .../NetworkMonitorListRow.module.css | 22 +++++++++---------- .../ReactDevToolsListItem.module.css | 10 +++------ .../ReduxDevToolsListItem.module.css | 4 ++-- 7 files changed, 33 insertions(+), 29 deletions(-) diff --git a/packages/replay-next/components/elements/ElementsListItem.module.css b/packages/replay-next/components/elements/ElementsListItem.module.css index b223c0d9163..a3639ebb783 100644 --- a/packages/replay-next/components/elements/ElementsListItem.module.css +++ b/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] { diff --git a/packages/replay-next/pages/variables.css b/packages/replay-next/pages/variables.css index d9726c77504..2c3a945b9be 100644 --- a/packages/replay-next/pages/variables.css +++ b/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; diff --git a/src/ui/components/Library/Library.module.css b/src/ui/components/Library/Library.module.css index af7197c44c4..e58d292559a 100644 --- a/src/ui/components/Library/Library.module.css +++ b/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, diff --git a/src/ui/components/Library/Navigation/TeamButton.tsx b/src/ui/components/Library/Navigation/TeamButton.tsx index de25ea88a60..11959275751 100644 --- a/src/ui/components/Library/Navigation/TeamButton.tsx +++ b/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} > diff --git a/src/ui/components/NetworkMonitor/NetworkMonitorListRow.module.css b/src/ui/components/NetworkMonitor/NetworkMonitorListRow.module.css index 61206bd21c8..0a2dd1d7362 100644 --- a/src/ui/components/NetworkMonitor/NetworkMonitorListRow.module.css +++ b/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); } diff --git a/src/ui/components/SecondaryToolbox/react-devtools/components/ReactDevToolsListItem.module.css b/src/ui/components/SecondaryToolbox/react-devtools/components/ReactDevToolsListItem.module.css index 459c2de3ceb..0f6a7e26e41 100644 --- a/src/ui/components/SecondaryToolbox/react-devtools/components/ReactDevToolsListItem.module.css +++ b/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); } diff --git a/src/ui/components/SecondaryToolbox/redux-devtools/ReduxDevToolsListItem.module.css b/src/ui/components/SecondaryToolbox/redux-devtools/ReduxDevToolsListItem.module.css index 792065e0f43..994035f13ad 100644 --- a/src/ui/components/SecondaryToolbox/redux-devtools/ReduxDevToolsListItem.module.css +++ b/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; }