Merge pull request #28123 from overleaf/dp-file-outline-hover

Use themed variables to fix hover color in dark mode for file outline header

GitOrigin-RevId: e6045ab74d0afe6429c2e1b3caf04ae0eb0b857b
This commit is contained in:
David
2025-08-28 08:06:14 +00:00
committed by Copybot
parent e94ef818b8
commit 7337ee7a8b
@@ -26,36 +26,30 @@
--outline-item-carat-color: var(--content-disabled); --outline-item-carat-color: var(--content-disabled);
.ide-redesign-main { .ide-redesign-main {
--outline-bg-color: var(--bg-light-primary);
--outline-item-hover-bg: var(--bg-light-secondary);
--outline-header-hover-bg: var(--bg-light-secondary);
--outline-content-color: var(--content-primary);
--outline-item-highlight-bg: var(--bg-accent-03); --outline-item-highlight-bg: var(--bg-accent-03);
--outline-item-highlight-color: var(--green-70); --outline-item-highlight-color: var(--green-70);
--outline-item-highlight-font-weight: bold; --outline-item-highlight-font-weight: bold;
--outline-item-carat-color: var(--content-primary);
--outline-line-guide-color: color-mix( --outline-line-guide-color: color-mix(
in srgb, in srgb,
var(--border-primary) 24%, var(--border-primary) 24%,
transparent transparent
); );
--outline-container-color-bg: var(--bg-light-primary);
} }
} }
// TODO ide-redesign-cleanup: Replace the existing styling with these overrides. // TODO ide-redesign-cleanup: Replace the existing styling with these overrides.
.ide-redesign-main { .ide-redesign-main {
--outline-bg-color: var(--bg-dark-primary); --outline-bg-color: var(--bg-primary-themed);
--outline-border-color: var(--border-disabled-dark); --outline-border-color: var(--border-disabled-themed);
--outline-header-hover-bg: var(--bg-dark-primary); --outline-header-hover-bg: var(--bg-secondary-themed);
--outline-item-hover-bg: var(--bg-dark-secondary); --outline-item-hover-bg: var(--bg-secondary-themed);
--outline-line-guide-color: var(--border-primary); --outline-line-guide-color: var(--border-primary);
--outline-container-color-bg: var(--bg-dark-primary); --outline-container-color-bg: var(--bg-primary-themed);
--outline-content-color: var(--content-primary-dark); --outline-content-color: var(--content-primary-themed);
--outline-item-highlight-bg: var(--green-70); --outline-item-highlight-bg: var(--green-70);
--outline-item-highlight-color: var(--green-10); --outline-item-highlight-color: var(--green-10);
--outline-item-highlight-font-weight: bold; --outline-item-highlight-font-weight: bold;
--outline-item-carat-color: var(--content-disabled); --outline-item-carat-color: var(--content-primary-themed);
.file-outline-panel { .file-outline-panel {
min-height: 36px; min-height: 36px;
@@ -73,6 +67,7 @@
.outline-header-expand-collapse-btn { .outline-header-expand-collapse-btn {
border-radius: var(--border-radius-base); border-radius: var(--border-radius-base);
padding: var(--spacing-02); padding: var(--spacing-02);
box-shadow: none;
} }
.outline-header-name { .outline-header-name {