From 78aa090ef55ebdf30fa079625dd959b1e1d23a20 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Mon, 13 Mar 2023 07:19:09 +0300
Subject: [PATCH] Clean theme (#2723)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/AssigneePopup.svelte       |   6 +-
 .../src/components/ObjectPopup.svelte         |   6 +-
 packages/theme/styles/_colors.scss            | 152 ------------------
 packages/theme/styles/_layouts.scss           |  18 +--
 packages/ui/src/components/EditBox.svelte     |   2 +-
 packages/ui/src/components/StepsDialog.svelte |   2 +-
 .../ui/src/components/TextAreaEditor.svelte   |   3 +-
 .../src/components/EditCard.svelte            |   2 +-
 .../src/components/KanbanCard.svelte          |   4 +-
 .../src/components/popups/AddChecklist.svelte |   2 +-
 .../src/components/CommentPresenter.svelte    |   4 +-
 .../src/components/TagsFilter.svelte          |   2 +-
 .../src/components/Templates.svelte           |   2 +-
 .../src/components/issues/IssuePreview.svelte |   2 +-
 .../issues/edit/SubIssueSelector.svelte       |  12 +-
 .../src/components/filter/ObjectFilter.svelte |   2 +-
 .../src/components/filter/ValueFilter.svelte  |   2 +-
 17 files changed, 31 insertions(+), 192 deletions(-)

diff --git a/packages/presentation/src/components/AssigneePopup.svelte b/packages/presentation/src/components/AssigneePopup.svelte
index 8eebe86052..9665d7ee28 100644
--- a/packages/presentation/src/components/AssigneePopup.svelte
+++ b/packages/presentation/src/components/AssigneePopup.svelte
@@ -198,7 +198,7 @@
     <EditBox kind={'search-style'} focusIndex={1} focus bind:value={search} {placeholder} />
   </div>
   {#if cHeight === 1}
-    <div class="background-theme-content-accent" style:height={'1px'} />
+    <div class="background-content-accent-color" style:height={'1px'} />
   {/if}
   <div
     class="scroll"
@@ -233,7 +233,7 @@
           {@const obj = contacts[item]}
           <button
             class="menu-item w-full"
-            class:background-bg-focused={obj._id === selected}
+            class:background-button-bg-color={obj._id === selected}
             class:border-radius-1={obj._id === selected}
             on:click={() => {
               handleSelection(undefined, item)
@@ -274,7 +274,7 @@
     </div>
   </div>
   {#if cHeight === -1}
-    <div class="background-theme-content-accent" style:height={'3px'} />
+    <div class="background-content-accent-color" style:height={'3px'} />
   {/if}
 </div>
 
diff --git a/packages/presentation/src/components/ObjectPopup.svelte b/packages/presentation/src/components/ObjectPopup.svelte
index 1a6b42a2b5..7b64db8c8c 100644
--- a/packages/presentation/src/components/ObjectPopup.svelte
+++ b/packages/presentation/src/components/ObjectPopup.svelte
@@ -228,7 +228,7 @@
     {/if}
   </div>
   {#if cHeight === 1}
-    <div class="background-theme-content-accent" style:height={'2px'} />
+    <div class="background-content-accent-color" style:height={'2px'} />
   {/if}
   <div class="scroll" on:scroll={() => updateLocation(scrollDiv, selectedDiv, objects, selected)} bind:this={scrollDiv}>
     <div class="box">
@@ -248,7 +248,7 @@
           {@const obj = objects[item]}
           <button
             class="menu-item w-full flex-row-center"
-            class:background-bg-focused={!allowDeselect && obj._id === selected}
+            class:background-button-bg-color={!allowDeselect && obj._id === selected}
             class:border-radius-1={!allowDeselect && obj._id === selected}
             disabled={readonly}
             on:click={() => {
@@ -291,7 +291,7 @@
     </div>
   </div>
   {#if cHeight === -1}
-    <div class="background-theme-content-accent" style:height={'2px'} />
+    <div class="background-content-accent-color" style:height={'2px'} />
   {/if}
 </div>
 
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 7ae264ccbd..ee93d9f751 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -127,84 +127,6 @@
   --trans-content-05: rgba(138, 143, 152, .05);
   --trans-content-10: rgba(138, 143, 152, .1);
   --trans-content-20: rgba(138, 143, 152, .2);
-
-  --theme-bg-color: #18181e;
-  --theme-bg-selection: #282830;
-  --theme-bg-checked: #262b39;
-  --theme-bg-checked-hover: #2d3344;
-  --theme-menu-color: #111117;
-  --theme-menu-selection: #1D1D23;
-  --theme-menu-divider: rgba(255, 255, 255, .05);
-  // --theme-dialog-bg: rgba(31, 31, 37, .8);
-  --theme-dialog-accent: rgba(255, 255, 255, .03);
-  --theme-dialog-divider: rgba(255, 255, 255, .1);
-  --theme-dialog-spec: rgba(47, 47, 53, .6);
-  --theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
-  --theme-border-modal: rgba(0, 0, 0, .2);
-  --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
-  --theme-chat-divider: rgb(36, 36, 41);
-
-  --theme-card-bg: #282830;
-  --theme-card-bg-dark: rgba(222, 222, 240, .1);
-  --theme-card-divider: rgba(255, 255, 255, .1);
-  --theme-card-shadow: 0px 15px 60px rgba(24, 25, 28, .8);
-  --theme-msgbox-bg: #26262B;
-  --theme-msgbox-shadow: 0px 20px 70px rgba(0, 0, 0, .4);
-  --theme-zone-bg: rgba(255, 255, 255, .05);
-  --theme-zone-border: rgba(255, 255, 255, .2);
-  --theme-zone-border-lite: rgba(255, 255, 255, .16);
-
-  --theme-bg-accent-normal: #1f1f25;
-  --theme-bg-accent-color: rgba(255, 255, 255, .03);
-  --theme-bg-accent-hover: rgba(255, 255, 255, .06);
-  --theme-bg-accent-press: rgba(255, 255, 255, .07);
-  --theme-bg-focused-color: rgba(255, 255, 255, .1);
-  --theme-bg-focused-border: rgba(255, 255, 255, .4);
-  --theme-bg-accent-error: rgba(251, 158, 158, .06);
-  --theme-on-color: #4474F6;
-  --theme-off-color: #2A2A30;
-  --theme-bg-check: #F2F2F2;
-  --theme-tooltip-color: #2F2F34;
-  --theme-showmore-color: #484850;
-
-  --theme-button-bg-enabled: #1F1F25;
-  --theme-button-bg-hovered: #26262B;
-  --theme-button-bg-pressed: #2A2A30;
-  --theme-button-bg-disabled: #212127;
-  --theme-button-bg-focused: #2F2F34;
-  --theme-button-bg-error: #262026;
-  --theme-button-border-enabled: rgba(255, 255, 255, .06);
-  --theme-button-border-hovered: rgba(255, 255, 255, .08);
-  --theme-button-border-pressed: rgba(255, 255, 255, .12);
-  --theme-button-border-disabled: rgba(255, 255, 255, .06);
-  --theme-button-border-focused: rgba(255, 255, 255, .4);
-  --theme-button-border-error: rgba(205, 104, 104, .1);
-  --theme-button-trans-primary-disabled: rgba(255, 255, 255, .1);
-  --theme-circle-select: #1F1F25;
-  --theme-circle-trans: rgba(31, 31, 37, .3);
-  --theme-circle-border: rgba(255, 255, 255, .2);
-
-  --theme-table-bg-color: rgba(255, 255, 255, .02);
-  --theme-table-bg-hover: rgba(255, 255, 255, .04);
-
-  --theme-popup-bg: rgba(222, 222, 240, .2);
-  --theme-popup-bg-hover: rgba(37, 37, 42, .4);
-  --theme-popup-border: transparent;
-  --theme-popup-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
-
-  --theme-caption-color: #fff;
-  --theme-content-accent-color: rgba(255, 255, 255, 0.8);
-  --theme-content-color: rgba(255, 255, 255, 0.6);
-  --theme-content-dark-color: rgba(255, 255, 255, 0.4);
-  --theme-content-trans-color: rgba(255, 255, 255, 0.3);
-
-  --theme-userlink-color: #b92d52;
-  --theme-userlink-hover: #b92d52;
-  --theme-doclink-color: #2d6ab9;
-  --theme-doclink-hover: #2d6ab9;
-  --theme-status-online: #6cd871;
-  --theme-shadow: 0px 4px 8px rgba(15, 15, 15, 0.5);
-  --theme-text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.25);
 }
 
 /* Light Theme */
@@ -284,78 +206,4 @@
   --trans-content-05: rgba(60, 65, 73, .05);
   --trans-content-10: rgba(60, 65, 73, .1);
   --trans-content-20: rgba(60, 65, 73, .2);
-
-  --theme-bg-color: #FFFFFF;
-  --theme-bg-selection: #F1F1F4;
-  --theme-menu-color: #E7E7E7;
-  --theme-menu-selection: #DBDBDB;
-  --theme-menu-divider: rgba(0, 0, 0, .08);
-  // --theme-dialog-bg: rgba(255, 255, 255, .4);
-  --theme-dialog-accent: rgba(31, 33, 43, .03);
-  --theme-dialog-divider: rgba(31, 33, 43, .06);
-  --theme-dialog-spec: rgba(47, 47, 53, .6);
-  --theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
-  --theme-border-modal: rgba(0, 0, 0, .2);
-  --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
-  --theme-chat-divider: rgb(233, 233, 233);
-
-  --theme-card-bg: #FFF;
-  --theme-card-bg-dark: rgba(255, 255, 255, .3);
-  --theme-card-divider: rgba(0, 0, 0, .1);
-  --theme-card-shadow: 0px 15px 60px rgba(24, 25, 28, .2);
-  --theme-msgbox-bg: #F2F2F2;
-  --theme-msgbox-shadow: 0px 20px 70px rgba(0, 0, 0, .2);
-  --theme-zone-bg: rgba(0, 0, 0, .05);
-  --theme-zone-border: rgba(0, 0, 0, .2);
-  --theme-zone-border-lite: rgba(0, 0, 0, .16);
-
-  --theme-bg-accent-color: rgba(0, 0, 0, .03);
-  --theme-bg-accent-hover: rgba(0, 0, 0, .05);
-  --theme-bg-accent-press: rgba(0, 0, 0, .07);
-  --theme-bg-focused-color: rgba(0, 0, 0, .03);
-  --theme-bg-focused-border: rgba(0, 0, 0, .4);
-  --theme-bg-accent-error: rgba(251, 158, 158, .06);
-  --theme-on-color: #4474F6;
-  --theme-off-color: #DBDBDB;
-  --theme-bg-check: #45444F;
-  --theme-tooltip-color: #F1F1F4;
-  --theme-showmore-color: #484850;
-
-  --theme-button-bg-enabled: #F7F7F7;
-  --theme-button-bg-hovered: #F2F2F2;
-  --theme-button-bg-pressed: #EDEDED;
-  --theme-button-bg-disabled: #F7F7F7;
-  --theme-button-bg-focused: #F7F7F7;
-  --theme-button-bg-error: #FEF2F2;
-  --theme-button-border-enabled: rgba(0, 0, 0, .06);
-  --theme-button-border-hovered: rgba(0, 0, 0, .06);
-  --theme-button-border-pressed: rgba(255, 255, 255, .06);
-  --theme-button-border-disabled: rgba(255, 255, 255, .06);
-  --theme-button-border-focused: rgba(255, 255, 255, .4);
-  --theme-button-border-error: rgba(205, 104, 104, .1);
-  --theme-button-trans-primary-disabled: #E7E7E7;
-  --theme-circle-select: #F7F7F7;
-  --theme-circle-trans: #F7F7F7;
-  --theme-circle-border: rgba(31, 33, 43, .2);
-
-  --theme-table-bg-color: rgba(0, 0, 0, .02);
-  --theme-table-bg-hover: rgba(0, 0, 0, .04);
-
-  --theme-popup-bg: #fff;
-  --theme-popup-bg-hover: #F2F2F2;
-  --theme-popup-border: 1px solid rgba(0, 0, 0, .06);
-  --theme-popup-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
-
-  --theme-caption-color: #1F212B;
-  --theme-content-accent-color: rgba(31, 33, 43, .8);
-  --theme-content-color: rgba(31, 33, 43, .6);
-  --theme-content-dark-color: rgba(31, 33, 43, .4);
-  --theme-content-trans-color: rgba(31, 33, 43, 0.3);
-
-  --theme-userlink-color: #b92d52;
-  --theme-userlink-hover: #b92d52;
-  --theme-doclink-color: #2d6ab9;
-  --theme-doclink-hover: #2d6ab9;
-  --theme-status-online: #4ebc53;
-  --theme-shadow: 0px 4px 8px rgba(155, 155, 155, 0.5);
 }
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 29860c0005..dcf47ef8b2 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -769,25 +769,16 @@ a.no-line {
 .background-body-color { background-color: var(--body-color); }
 .background-accent-bg-color { background-color: var(--accent-bg-color); }
 .background-highlight-select { background-color: var(--highlight-select); }
-
-.background-theme-content-accent { background-color: var(--theme-content-accent-color); }
-.background-theme-bg-color { background-color: var(--theme-bg-color); }
 .background-highlight-red { background-color: var(--highlight-red); }
 .background-button-bg-color { background-color: var(--button-bg-color); }
-.background-button-bg-enabled { background-color: var(--theme-button-bg-enabled); }
 .background-button-noborder-bg-hover { background-color: var(--noborder-bg-hover); }
-.background-menu-divider { background-color: var(--theme-menu-divider); }
-.background-card-divider { background-color: var(--theme-card-divider); }
 .background-primary-color { background-color: var(--primary-button-enabled); }
-.background-bg-accent { background-color: var(--theme-bg-accent-color); }
-.background-bg-focused {background-color: var(--theme-bg-focused-color); }
-.background-bg-accent-normal { background-color: var(--theme-bg-accent-normal); }
+.background-content-accent-color { background-color: var(--accent-color); }
 
-.dark-color { color: var(--dark-color); }
+.dark-color,
+.content-dark-color { color: var(--dark-color); }
 .content-color { color: var(--content-color); }
-.content-trans-color { color: var(--theme-content-trans-color); }
 .content-accent-color { color: var(--accent-color); }
-.content-dark-color { color: var(--theme-content-dark-color); }
 .caption-color { color: var(--caption-color); }
 
 .red-color { color: var(--highlight-red); }
@@ -800,9 +791,8 @@ a.no-line {
 .border-radius-left-1 { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
 .border-radius-right-1 { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
 .border-radius-top-1 { border-top-right-radius: 0.25rem; border-top-left-radius: 0.25rem; }
-.border-bg-accent {border: 1px solid var(--theme-bg-accent-color);}
+.border-divider-color {border: 1px solid var(--divider-color);}
 .border-primary-button { border-color: var(--primary-button-border); }
-.border-button-enabled { border: 1px solid var(--theme-button-border-enabled); }
 
 .top-divider { border-top: 1px solid var(--divider-color); }
 .bottom-divider { border-bottom: 1px solid var(--divider-color); }
diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte
index c868795cd2..74a46f781c 100644
--- a/packages/ui/src/components/EditBox.svelte
+++ b/packages/ui/src/components/EditBox.svelte
@@ -140,7 +140,7 @@
   {/if}
   <div class="{kind} flex-row-center clear-mins" class:focusable>
     {#if icon}
-      <div class="content-trans-color mr-1">
+      <div class="dark-color mr-1">
         <Icon {icon} size={'small'} />
       </div>
     {/if}
diff --git a/packages/ui/src/components/StepsDialog.svelte b/packages/ui/src/components/StepsDialog.svelte
index 003e37d181..359da2562a 100644
--- a/packages/ui/src/components/StepsDialog.svelte
+++ b/packages/ui/src/components/StepsDialog.svelte
@@ -159,7 +159,7 @@
           {/each}
         </ol>
         {#if stepsDescription}
-          <span class="content-trans-color"><Label label={stepsDescription} /></span>
+          <span class="dark-color"><Label label={stepsDescription} /></span>
         {/if}
       </div>
     </Scroller>
diff --git a/packages/ui/src/components/TextAreaEditor.svelte b/packages/ui/src/components/TextAreaEditor.svelte
index 108e356d60..a11da62fe7 100644
--- a/packages/ui/src/components/TextAreaEditor.svelte
+++ b/packages/ui/src/components/TextAreaEditor.svelte
@@ -51,7 +51,7 @@
 <svelte:window on:click={onClickOutside} />
 <div bind:this={openedContainerRef}>
   <div
-    class="flex-col background-bg-accent border-bg-accent border-radius-1 pt-1 pb-1 pr-2 pl-2"
+    class="flex-col background-accent-bg-color border-divider-color border-radius-1 pt-1 pb-1 pr-2 pl-2"
     style:user-select="none"
   >
     <TextArea
@@ -68,6 +68,7 @@
   {#if !disabled}
     <div class="flex-row-center mt-3">
       <Button label={submitLabel} kind="no-border" size="medium" on:click={submit} />
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div class="ml-2" on:click={cancel}>
         <ActionIcon icon={IconClose} size="medium" action={cancel} />
       </div>
diff --git a/plugins/board-resources/src/components/EditCard.svelte b/plugins/board-resources/src/components/EditCard.svelte
index 06765f8a92..a733e3a9c7 100644
--- a/plugins/board-resources/src/components/EditCard.svelte
+++ b/plugins/board-resources/src/components/EditCard.svelte
@@ -140,7 +140,7 @@
       />
     </svelte:fragment>
     <EditBox bind:value={object.title} kind={'large-style'} focus on:change={() => change('title', object?.title)} />
-    <div class="background-bg-accent border-bg-accent border-radius-3 p-4 mt-4 w-full">
+    <div class="background-accent-bg-color border-divider-color border-radius-3 p-4 mt-4 w-full">
       <StyledTextBox
         alwaysEdit={true}
         showButtons={false}
diff --git a/plugins/board-resources/src/components/KanbanCard.svelte b/plugins/board-resources/src/components/KanbanCard.svelte
index b45bb86a0d..cef6c4d425 100644
--- a/plugins/board-resources/src/components/KanbanCard.svelte
+++ b/plugins/board-resources/src/components/KanbanCard.svelte
@@ -91,7 +91,7 @@
         <div
           style:opacity="0.3"
           style:pointer-events="none"
-          class="abs-full-content background-theme-content-accent h-full w-full flex-center fs-title"
+          class="abs-full-content background-content-accent-color h-full w-full flex-center fs-title"
         />
       {/if}
       {#if !isEditMode}
@@ -140,7 +140,7 @@
         <div
           style:opacity="0.3"
           style:pointer-events="none"
-          class="abs-full-content background-theme-content-accent h-full w-full flex-center fs-title"
+          class="abs-full-content background-content-accent-color h-full w-full flex-center fs-title"
         />
       {/if}
       {#if !isEditMode && !object.cover}
diff --git a/plugins/board-resources/src/components/popups/AddChecklist.svelte b/plugins/board-resources/src/components/popups/AddChecklist.svelte
index c6dec3489e..192e59c895 100644
--- a/plugins/board-resources/src/components/popups/AddChecklist.svelte
+++ b/plugins/board-resources/src/components/popups/AddChecklist.svelte
@@ -117,7 +117,7 @@
 >
   <div class="flex-col flex-gap-1">
     <Label label={board.string.Title} />
-    <div class="p-2 mt-1 mb-1 border-bg-accent border-radius-1">
+    <div class="p-2 mt-1 mb-1 border-divider-color border-radius-1">
       <EditBox bind:value={name} focus={true} />
     </div>
   </div>
diff --git a/plugins/chunter-resources/src/components/CommentPresenter.svelte b/plugins/chunter-resources/src/components/CommentPresenter.svelte
index eeb5c44908..43231ff10c 100644
--- a/plugins/chunter-resources/src/components/CommentPresenter.svelte
+++ b/plugins/chunter-resources/src/components/CommentPresenter.svelte
@@ -48,7 +48,7 @@
     </div>
     <span class="label nowrap">Message</span>
   </a>
-  &nbsp;<span class="content-dark-color">#{cutId(value._id.toString())}</span>
+  &nbsp;<span class="dark-color">#{cutId(value._id.toString())}</span>
 {:else}
   <div class="flex-row-top">
     {#await getEmployee(value) then employee}
@@ -60,7 +60,7 @@
           <div class="fs-title">
             {#if employee}{getName(employee)}{/if}
           </div>
-          <div class="content-trans-color ml-4"><TimeSince value={value.modifiedOn} /></div>
+          <div class="dark-color ml-4"><TimeSince value={value.modifiedOn} /></div>
         </div>
         <ShowMore limit={126} fixed>
           <MessageViewer message={value.message} />
diff --git a/plugins/tags-resources/src/components/TagsFilter.svelte b/plugins/tags-resources/src/components/TagsFilter.svelte
index c1aae89be2..538a86ef7a 100644
--- a/plugins/tags-resources/src/components/TagsFilter.svelte
+++ b/plugins/tags-resources/src/components/TagsFilter.svelte
@@ -186,7 +186,7 @@
                         <div class="tag" style="background-color: {getPlatformColor(element.color)};" />
                         {element.title}
                       </div>
-                      <div class="content-trans-color ml-2">
+                      <div class="dark-color ml-2">
                         {element.refCount ?? 0}
                       </div>
                     </div>
diff --git a/plugins/templates-resources/src/components/Templates.svelte b/plugins/templates-resources/src/components/Templates.svelte
index 90eb6c539e..534b33744a 100644
--- a/plugins/templates-resources/src/components/Templates.svelte
+++ b/plugins/templates-resources/src/components/Templates.svelte
@@ -187,7 +187,7 @@
       </div>
     </div>
 
-    <div class="ac-column max background-bg-accent template-container">
+    <div class="ac-column max background-accent-bg-color template-container">
       {#if newTemplate}
         <div class="flex-between mr-4">
           <span class="trans-title mb-3">
diff --git a/plugins/tracker-resources/src/components/issues/IssuePreview.svelte b/plugins/tracker-resources/src/components/issues/IssuePreview.svelte
index b3158c1c47..8aeb7062a5 100644
--- a/plugins/tracker-resources/src/components/issues/IssuePreview.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuePreview.svelte
@@ -110,7 +110,7 @@
             <MessageViewer message={issue.description} />
           </div>
         {:else}
-          <div class="ml-2 content-trans-color">
+          <div class="ml-2 dark-color">
             <Label label={tracker.string.NoDescription} />
           </div>
         {/if}
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
index 3df38c0acd..c0b2a4e22d 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
@@ -192,13 +192,13 @@
     .issue-title {
       color: var(--accent-color);
       transition: color 0.15s;
+    }
 
-      &:hover {
-        color: var(--caption-color);
-      }
-      &:active {
-        color: var(--accent-color);
-      }
+    &:hover .issue-title {
+      color: var(--caption-color);
+    }
+    &:active .issue-title {
+      color: var(--accent-color);
     }
   }
 
diff --git a/plugins/view-resources/src/components/filter/ObjectFilter.svelte b/plugins/view-resources/src/components/filter/ObjectFilter.svelte
index 06e5aabd9b..3454211065 100644
--- a/plugins/view-resources/src/components/filter/ObjectFilter.svelte
+++ b/plugins/view-resources/src/components/filter/ObjectFilter.svelte
@@ -175,7 +175,7 @@
                     <Label label={ui.string.NotSelected} />
                   {/if}
                 </div>
-                <div class="content-trans-color ml-2">
+                <div class="dark-color ml-2">
                   {#if isState}{statesCount[i]}{:else}{targets.get(value?._id)}{/if}
                 </div>
               </div>
diff --git a/plugins/view-resources/src/components/filter/ValueFilter.svelte b/plugins/view-resources/src/components/filter/ValueFilter.svelte
index 8f5f882290..011f7b7aca 100644
--- a/plugins/view-resources/src/components/filter/ValueFilter.svelte
+++ b/plugins/view-resources/src/components/filter/ValueFilter.svelte
@@ -161,7 +161,7 @@
                     <Label label={ui.string.NotSelected} />
                   {/if}
                 </div>
-                <div class="content-trans-color ml-2">
+                <div class="dark-color ml-2">
                   {values.get(value)}
                 </div>
               </div>