From 6d7b2f4bf63a5d4ce56eab1ca0ad9d426e40abed Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Fri, 5 May 2023 08:21:40 +0300
Subject: [PATCH] TSK-1324. Update popups and colors (#3145)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/DocPopup.svelte            | 33 ++++++++-------
 .../src/components/DraggableList.svelte       |  6 ++-
 .../src/components/MessageBox.svelte          |  6 +--
 .../src/components/SpaceInfo.svelte           |  2 +-
 .../src/components/SpaceSelect.svelte         |  6 ++-
 .../src/components/SpacesPopup.svelte         |  2 +-
 packages/theme/styles/_colors.scss            | 10 ++---
 packages/theme/styles/_layouts.scss           | 19 +++++----
 packages/theme/styles/common.scss             | 20 +++++-----
 packages/theme/styles/components.scss         |  2 +-
 packages/theme/styles/global.scss             |  3 ++
 packages/theme/styles/popups.scss             | 24 +++++------
 packages/ui/src/components/Button.svelte      |  7 +++-
 packages/ui/src/components/EditBox.svelte     |  2 +-
 packages/ui/src/components/EmojiPopup.svelte  |  4 +-
 packages/ui/src/components/Expandable.svelte  |  4 +-
 packages/ui/src/components/Like.svelte        |  4 +-
 packages/ui/src/components/ListView.svelte    |  5 ++-
 .../ui/src/components/PopupInstance.svelte    |  2 +
 packages/ui/src/components/StepsDialog.svelte |  2 +-
 packages/ui/src/components/StylishEdit.svelte |  2 +-
 packages/ui/src/components/TimeSince.svelte   |  2 +-
 .../ui/src/components/TooltipInstance.svelte  | 24 +++++------
 .../src/components/calendar/DatePopup.svelte  | 40 +++++++++----------
 .../components/calendar/DatePresenter.svelte  | 17 +++++++-
 .../calendar/DateRangePresenter.svelte        | 10 ++++-
 .../ui/src/components/calendar/Shifts.svelte  | 12 +++---
 packages/ui/src/components/icons/Check.svelte |  9 ++++-
 .../ui/src/components/icons/Folder.svelte     |  7 ++--
 packages/ui/src/popups.ts                     |  5 +++
 packages/ui/src/types.ts                      |  4 +-
 .../src/components/TxView.svelte              |  6 +--
 .../src/components/TxViewTx.svelte            |  4 +-
 .../src/components/Attachments.svelte         |  6 +--
 .../src/components/CommentPresenter.svelte    |  4 +-
 .../activity/TxCommentCreate.svelte           |  2 +-
 .../src/components/ChannelEditor.svelte       | 17 ++++----
 .../src/components/Members.svelte             |  4 +-
 .../src/components/SpaceMembers.svelte        |  2 +-
 .../src/components/UserInfo.svelte            |  2 +-
 .../src/components/Chats.svelte               |  2 +-
 .../src/components/FullMessage.svelte         |  2 +-
 .../src/components/Message.svelte             | 12 +++---
 .../src/components/NewMessage.svelte          |  4 +-
 .../src/components/NewMessages.svelte         |  4 +-
 .../src/components/DepartmentStaff.svelte     |  4 +-
 .../src/components/Variants.svelte            |  6 +--
 .../src/components/Leads.svelte               |  4 +-
 .../src/components/Applications.svelte        |  4 +-
 .../src/components/VacancyApplications.svelte |  4 +-
 .../src/components/VacancyList.svelte         |  4 +-
 .../src/components/review/Opinions.svelte     |  6 +--
 .../src/components/review/Reviews.svelte      |  4 +-
 .../src/components/ClassHierarchy.svelte      |  4 +-
 .../src/components/TagsEditor.svelte          |  2 +-
 .../src/components/TagsFilter.svelte          |  2 +-
 .../components/state/DoneStateEditor.svelte   |  2 +-
 .../components/state/DoneStatesPopup.svelte   |  2 +-
 .../src/components/ComponentSelector.svelte   |  2 +-
 .../src/components/CreateIssue.svelte         | 16 ++++----
 .../src/components/SpaceInfo.svelte           |  2 +-
 .../components/issues/IssuePresenter.svelte   |  4 +-
 .../src/components/issues/IssuePreview.svelte |  2 +-
 .../src/components/issues/Move.svelte         |  2 +-
 .../issues/NotificationIssuePresenter.svelte  |  2 +-
 .../components/issues/PriorityEditor.svelte   |  4 +-
 .../src/components/issues/StatusEditor.svelte |  4 +-
 .../issues/related/RelatedIssues.svelte       |  6 +--
 .../related/RelatedIssuesSection.svelte       |  2 +-
 .../issues/timereport/EstimationPopup.svelte  |  2 +-
 .../timereport/EstimationSubIssueList.svelte  | 31 +++++++-------
 .../timereport/ReportedTimeEditor.svelte      | 13 +++---
 .../timereport/TimeReportDayDropdown.svelte   |  4 +-
 .../timereport/TimeSpendReportPopup.svelte    |  8 +++-
 .../timereport/TimeSpendReportsList.svelte    |  7 ++--
 .../components/sprints/SprintSelector.svelte  |  2 +-
 .../templates/DraftIssueChildList.svelte      |  4 +-
 .../templates/IssueTemplateChildList.svelte   |  4 +-
 .../templates/IssueTemplatePresenter.svelte   |  5 +--
 .../workflow/StatusPresenter.svelte           |  2 +-
 .../src/components/workflow/Statuses.svelte   |  4 +-
 .../src/components/ActionsPopup.svelte        | 26 ++++++------
 .../src/components/ClassAttributeBar.svelte   |  2 +-
 .../src/components/MarkupEditor.svelte        |  6 +--
 .../view-resources/src/components/Move.svelte |  2 +-
 .../src/components/NumberEditor.svelte        |  4 +-
 .../src/components/ObjectBox.svelte           | 26 +++++++-----
 .../src/components/ObjectBoxPopup.svelte      |  2 +-
 .../src/components/StringEditor.svelte        |  6 +--
 .../src/components/filter/DateFilter.svelte   |  2 +-
 .../src/components/filter/ObjectFilter.svelte |  2 +-
 .../src/components/filter/ValueFilter.svelte  |  2 +-
 .../src/components/list/SortableList.svelte   | 10 ++---
 .../src/components/HelpAndSupport.svelte      | 30 +++++++-------
 94 files changed, 366 insertions(+), 300 deletions(-)

diff --git a/packages/presentation/src/components/DocPopup.svelte b/packages/presentation/src/components/DocPopup.svelte
index 16f4fde3a5..c0b4be4b52 100644
--- a/packages/presentation/src/components/DocPopup.svelte
+++ b/packages/presentation/src/components/DocPopup.svelte
@@ -17,7 +17,6 @@
   import type { IntlString } from '@hcengineering/platform'
   import {
     Button,
-    CheckBox,
     EditBox,
     FocusHandler,
     Icon,
@@ -28,7 +27,8 @@
     deviceOptionsStore,
     resizeObserver,
     showPopup,
-    tooltip
+    tooltip,
+    closeTooltip
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation from '..'
@@ -140,6 +140,7 @@
   let selectedDiv: HTMLElement | undefined
   let scrollDiv: HTMLElement | undefined
   let cHeight = 0
+  let timer: any = null
 
   const updateLocation = (scrollDiv?: HTMLElement, selectedDiv?: HTMLElement, objects?: Doc[], selected?: Ref<Doc>) => {
     const objIt = objects?.find((it) => it._id === selected)
@@ -162,6 +163,13 @@
         }
       }
     }
+    if (!timer) {
+      timer = setTimeout(() => {
+        closeTooltip()
+        clearTimeout(timer)
+        timer = null
+      }, 50)
+    }
   }
 
   $: updateLocation(scrollDiv, selectedDiv, objects, selected)
@@ -206,7 +214,7 @@
     {/if}
   </div>
   {#if cHeight === 1}
-    <div class="background-content-accent-color" style:height={'2px'} />
+    <div class="whereSelected" />
   {/if}
   <div class="scroll" on:scroll={() => updateLocation(scrollDiv, selectedDiv, objects, selected)} bind:this={scrollDiv}>
     <div class="box">
@@ -226,17 +234,15 @@
           {@const obj = objects[item]}
           {@const isDeselectDisabled = selectedElements.has(obj._id) && forbiddenDeselectItemIds.has(obj._id)}
           <button
-            class="menu-item w-full flex-row-center"
-            class:background-button-bg-color={!allowDeselect && obj._id === selected}
-            class:border-radius-1={!allowDeselect && obj._id === selected}
+            class="menu-item withList w-full flex-row-center"
             disabled={readonly || isDeselectDisabled}
             on:click={() => {
               handleSelection(undefined, objects, item)
             }}
           >
-            {#if allowDeselect && selected}
+            {#if (allowDeselect && selected) || multiSelect || selected}
               <div class="icon" class:disabled={readonly}>
-                {#if obj._id === selected}
+                {#if obj._id === selected || selectedElements.has(obj._id)}
                   <div bind:this={selectedDiv}>
                     {#if titleDeselect}
                       <div class="clear-mins" use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
@@ -259,18 +265,13 @@
                 <slot name="item" item={obj} />
               {/if}
             </span>
-            {#if multiSelect}
-              <div class="check-right pointer-events-none">
-                <CheckBox checked={selectedElements.has(obj._id)} primary readonly={readonly || isDeselectDisabled} />
-              </div>
-            {/if}
           </button>
         </svelte:fragment>
       </ListView>
     </div>
   </div>
   {#if cHeight === -1}
-    <div class="background-content-accent-color" style:height={'2px'} />
+    <div class="whereSelected" />
   {/if}
 </div>
 
@@ -282,4 +283,8 @@
     border-radius: 0.25rem;
     box-shadow: none;
   }
+  .whereSelected {
+    height: 2px;
+    background-color: var(--theme-caret-color);
+  }
 </style>
diff --git a/packages/presentation/src/components/DraggableList.svelte b/packages/presentation/src/components/DraggableList.svelte
index 3eb2ae5ef2..08c5a32a0e 100644
--- a/packages/presentation/src/components/DraggableList.svelte
+++ b/packages/presentation/src/components/DraggableList.svelte
@@ -109,8 +109,10 @@
       >
         <div class="draggable-container">
           <div class="caption mb-0 flex flex-grow flex-row-center">
-            <div class="draggable-mark fs-title dark-color whitespace-nowrap mr-2"><IconMoreV size={'small'} /></div>
-            <div class="fs-title dark-color whitespace-nowrap mr-2">
+            <div class="draggable-mark fs-title content-dark-color whitespace-nowrap mr-2">
+              <IconMoreV size={'small'} />
+            </div>
+            <div class="fs-title content-dark-color whitespace-nowrap mr-2">
               {`${index + 1}.`}
             </div>
             <slot name="object" {index} />
diff --git a/packages/presentation/src/components/MessageBox.svelte b/packages/presentation/src/components/MessageBox.svelte
index f46919033d..dc4041bb64 100644
--- a/packages/presentation/src/components/MessageBox.svelte
+++ b/packages/presentation/src/components/MessageBox.svelte
@@ -77,10 +77,10 @@
     padding: 2rem 1.75rem 1.75rem;
     width: 30rem;
     max-width: 40rem;
-    background: var(--theme-bg-color);
-    border-radius: 1.25rem;
+    background: var(--theme-popup-color);
+    border-radius: 0.5rem;
     user-select: none;
-    box-shadow: var(--popup-shadow);
+    box-shadow: var(--theme-popup-shadow);
 
     .message {
       margin-bottom: 1.75rem;
diff --git a/packages/presentation/src/components/SpaceInfo.svelte b/packages/presentation/src/components/SpaceInfo.svelte
index c6b04daf13..5303671999 100644
--- a/packages/presentation/src/components/SpaceInfo.svelte
+++ b/packages/presentation/src/components/SpaceInfo.svelte
@@ -27,7 +27,7 @@
   <div class="flex-center caption-color flex-no-shrink"><IconFolder {size} /></div>
   <div class="flex-col ml-2 min-w-0">
     {#if subtitle}<div class="content-dark-color text-sm">{subtitle}</div>{/if}
-    <div class="content-accent-color overflow-label">
+    <div class="caption-color overflow-label">
       {value.name}
       {#if value.archived}
         <Label label={presentation.string.Archived} />
diff --git a/packages/presentation/src/components/SpaceSelect.svelte b/packages/presentation/src/components/SpaceSelect.svelte
index 82849d46db..a21dbfdb00 100644
--- a/packages/presentation/src/components/SpaceSelect.svelte
+++ b/packages/presentation/src/components/SpaceSelect.svelte
@@ -46,6 +46,7 @@
   export let labelDirection: TooltipAlignment | undefined = undefined
   export let kind: ButtonKind = 'no-border'
   export let size: ButtonSize = 'large'
+  export let itemSize: ButtonSize = 'small'
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = undefined
   export let allowDeselect = false
@@ -84,7 +85,7 @@
       {
         _class,
         label,
-        size,
+        size: itemSize,
         allowDeselect,
         spaceOptions: { ...(spaceOptions ?? {}), sort: { ...(spaceOptions?.sort ?? {}), modifiedOn: -1 } },
         selected: selected?._id,
@@ -121,10 +122,11 @@
     {kind}
     {justify}
     {width}
+    notSelected={value == null}
     showTooltip={{ label, direction: labelDirection }}
     on:click={showSpacesPopup}
   >
-    <span slot="content" class="overflow-label disabled text" class:dark-color={value == null}>
+    <span slot="content" class="overflow-label disabled text">
       {#if selected}{selected.name}{:else}<Label {label} />{/if}
     </span>
   </Button>
diff --git a/packages/presentation/src/components/SpacesPopup.svelte b/packages/presentation/src/components/SpacesPopup.svelte
index 8dc03b5f50..5f475bbb29 100644
--- a/packages/presentation/src/components/SpacesPopup.svelte
+++ b/packages/presentation/src/components/SpacesPopup.svelte
@@ -25,7 +25,7 @@
   export let spaceQuery: DocumentQuery<Space> | undefined = {}
   export let spaceOptions: FindOptions<Space> | undefined = {}
   export let create: ObjectCreate | undefined = undefined
-  export let size: ButtonSize = 'large'
+  export let size: ButtonSize = 'small'
   export let allowDeselect = false
   export let component: AnySvelteComponent | undefined = undefined
   export let componentProps: any | undefined = undefined
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 971bca0552..581a7dc28a 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -99,7 +99,7 @@
   --theme-list-subheader-color: #262634;
   --theme-list-row-color: #21212F;
   --theme-list-divider-color: rgba(255, 255, 255, .09);
-  --theme-list-subheader-divider: transparent;
+  --theme-list-subheader-divider: rgba(255, 255, 255, .06);
   
   --theme-list-button-color: #262633;
   --theme-list-button-hover: #2F2F3A;
@@ -135,6 +135,7 @@
   --theme-error-color: #eb5757;
   --theme-lost-color: #eb5757;
   --theme-won-color: #34DB80;
+  --theme-caret-color: #6e5ed2;
 
   --body-color: #1f2023;
   --body-accent: #222326;
@@ -154,15 +155,12 @@
   --scrollbar-bar-hover: #8a8aa5;
   --scrollbar-track-color: #35354a;
 
-  --trans-color: rgba(255, 255, 255, .3);
-  --darker-color: rgba(255, 255, 255, .4);
   --dark-color: #62666d;
   --content-color: #8a8f98;
   --theme-accent-color: rgba(255, 255, 255, .8);
   --accent-color: #d7d8db;
   --caption-color: #f7f8f8;
   --white-color: #fff;
-  --caret-color: #6e5ed2;
   --warning-color: #f2994a;
 
   --divider-color: #303236;
@@ -298,6 +296,7 @@
   --theme-error-color: #eb5757;  // Dark
   --theme-lost-color: #eb5757;  // Dark
   --theme-won-color: #34DB80;  // Dark
+  --theme-caret-color: #6e5ed2;
 
   --body-color: #fff;
   --body-accent: #fafafa; // HZ
@@ -317,15 +316,12 @@
   --scrollbar-bar-hover: #90959d;
   --scrollbar-track-color: #e0e0e0;
 
-  --trans-color: rgba(0, 0, 0, .3);
-  --darker-color: rgba(0, 0, 0, .4);
   --dark-color: #90959d;
   --content-color: #3c4149;
   --accent-color: #282a30;
   --theme-accent-color: rgba(0, 0, 0, .8);
   --caption-color: #131416;
   --white-color: #fff;
-  --caret-color: #6e5ed2;
   --warning-color: #f2994a;  // Dark
 
   --divider-color: #e0e0e0;
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 2581432962..0f8beb3dc1 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -161,11 +161,14 @@ input.search {
   margin: 0;
   color: var(--accent-color);
   border: none;
-  caret-color: var(--caret-color);
+  caret-color: var(--theme-caret-color);
 
   &.padding { padding: .625rem .75rem; }
 }
 
+.rounded { border-radius: 0.25rem; }
+.rounded-lg { border-radius: 0.5rem; }
+
 /* Flex */
 .flex { display: flex; }
 .inline-flex { display: inline-flex; }
@@ -661,6 +664,10 @@ input.search {
 .square-36 { width: 2.25rem; height: 2.25rem; }
 
 /* --------- */
+.svg-tiny {
+  width: .75rem;
+  height: .75rem;
+}
 .svg-16px {
   width: 16px;
   height: 16px;
@@ -847,12 +854,10 @@ a.no-line {
 .background-content-accent-color { background-color: var(--accent-color); }
 
 .content-trans-color { color: var(--theme-trans-color); }
-
-.dark-color,
-.content-dark-color { color: var(--dark-color); }
-.content-color { color: var(--content-color); }
-.content-accent-color { color: var(--accent-color); }
-.caption-color { color: var(--caption-color); }
+.content-darker-color { color: var(--theme-darker-color); }
+.content-dark-color { color: var(--theme-dark-color); }
+.content-color { color: var(--theme-content-color); }
+.caption-color { color: var(--theme-caption-color); }
 
 .red-color { color: var(--highlight-red); }
 .error-color { color: var(--theme-error-color); }
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index c9edb07227..48e8a2d035 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -97,7 +97,7 @@
 
   .top {
     font-size: .6875rem;
-    color: var(--trans-color);
+    color: var(--theme-trans-color);
   }
   .bottom {
     margin-top: .25rem;
@@ -127,7 +127,7 @@
   .an-element__icon {
     margin-right: .5rem;
     min-width: 1rem;
-    color: var(--darker-color);
+    color: var(--theme-dark-color);
 
     &.indent-2 { margin-left: 1.75rem; }
     &.indent-4 { margin-left: 3.25rem; }
@@ -142,14 +142,14 @@
     user-select: none;
     font-weight: 400;
 
-    &:not(.content-color) { color: var(--caption-color); }
+    &:not(.content-color) { color: var(--theme-caption-color); }
     &.title {
       // font-weight: 500;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
     &.bold {
       font-weight: 600;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
   }
   .an-element__icon-arrow {
@@ -171,13 +171,13 @@
     margin-left: .75rem;
     font-weight: 600;
     font-size: .75rem;
-    color: var(--accent-color);
+    color: var(--theme-content-color);
   }
 
   &:hover, &.hovered, &.selected {
     // background-color: var(--theme-navpanel-hovered);
     .an-element__icon,
-    .an-element__label { color: var(--caption-color); }
+    .an-element__label { color: var(--theme-caption-color); }
     .an-element__icon-arrow { opacity: 1; }
   }
   &:hover, &.hovered { background-color: var(--theme-navpanel-hovered); }
@@ -192,11 +192,11 @@
       font-weight: 500;
       font-size: .625rem;
       line-height: 1.5rem;
-      color: var(--content-color);
+      color: var(--theme-content-color);
     }
     &:hover {
       .an-element__label,
-      .an-element__icon-arrow { color: var(--caption-color); }
+      .an-element__icon-arrow { color: var(--theme-caption-color); }
     }
     &.collapsed .an-element__icon-arrow,
     &:hover .an-element__icon-arrow { opacity: 1; }
@@ -217,7 +217,7 @@
     }
 
     .an-element__label {
-      color: rgb(var(--caption-color) / 40%);
+      color: rgb(var(--theme-caption-color) / 40%);
     }
   }
 }
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 1537b5c221..124defcd46 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -529,7 +529,7 @@
 
 // THead background-color in Tooltip and Popups
 .popup-tooltip .antiTable .scroller-thead,
-.popup .antiTable .scroller-thead { background-color: var(--accent-bg-color); }
+.popup .antiTable .scroller-thead { background-color: var(--theme-table-header-color); }
 
 // Hide row menu in Tooltip
 .popup-tooltip .antiTable .antiTable-body__row:hover .antiTable-cells__firstCell .antiTable-cells__firstCell-menuRow { visibility: hidden; }
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index 4227c011ed..bd9c58ae35 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -71,6 +71,9 @@
   --timing-main: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --timing-rotate: cubic-bezier(.28,1.92,.39,.56);
   // transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  
+  &::after,
+  &::before { box-sizing: border-box; }
 }
 :root {
   --app-height: 100%;
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index 359e4a5863..721dbbcf5a 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -57,7 +57,7 @@
       padding: .625rem .75rem;
       color: #d6d6d6;
       border: none;
-      caret-color: var(--caret-color);
+      caret-color: var(--theme-caret-color);
     }
     .clear-btn {
       display: flex;
@@ -102,8 +102,8 @@
   .menu-item {
     flex-shrink: 0;
     justify-content: flex-start;
-    padding: .25rem .75rem;
-    min-height: 2rem;
+    padding: .25rem .5rem;
+    min-height: 2.25rem;
     text-align: left;
     color: var(--theme-content-color);
     cursor: pointer;
@@ -112,12 +112,12 @@
 
     .icon, .color, .tag {
       flex-shrink: 0;
-      margin-right: .75rem;
+      margin-right: .375rem;
     }
     .icon {
       width: 1rem;
       height: 1rem;
-      color: var(--theme-dark-color);
+      color: var(--theme-caret-color);
     }
     .color {
       width: .875rem;
@@ -137,27 +137,27 @@
       text-overflow: ellipsis;
       overflow: hidden;
     }
-    .check, .check-right {
+    .check {
       display: flex;
       align-items: center;
       margin-right: .75rem;
     }
     .check-right { margin: 0 0 0 2rem; }
-    &:focus,
-    &:hover {
+    &:not(.withList):focus,
+    &:not(.withList):hover {
       color: var(--theme-caption-color);
       background-color: var(--theme-popup-hover);
 
       .icon { color: var(--theme-content-color); }
     }
-    &.no-focus:focus { background-color: var(--theme-popup-hover); }
-    &.no-focus:hover { background-color: var(--theme-popup-hover); }
+    &.no-focus:not(.withList):focus { background-color: var(--theme-popup-hover); }
+    &.no-focus:not(.withList):hover { background-color: var(--theme-popup-hover); }
   }
   .sticky-wrapper {
     display: flex;
     flex-direction: column;
 
-    &:not(:first-child)  { margin-top: 1px; }
+    &:not(:first-child) { margin-top: 1px; }
   }
   .menu-group {
     overflow: hidden;
@@ -294,7 +294,7 @@
     padding: 0 .5rem;
     width: 100%;
     height: 3rem;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
     text-align: left;
     cursor: pointer;
 
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index 08396f03c2..ddf0fa1131 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -426,11 +426,14 @@
     }
 
     &.notSelected {
-      color: var(--content-color);
+      color: var(--theme-dark-color);
 
+      .btn-icon {
+        color: var(--theme-darker-color);
+      }
       &:hover,
       &:hover .btn-icon {
-        color: var(--accent-color);
+        color: var(--theme-content-color);
       }
     }
 
diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte
index cbd2a258e6..cfe4407d3b 100644
--- a/packages/ui/src/components/EditBox.svelte
+++ b/packages/ui/src/components/EditBox.svelte
@@ -136,7 +136,7 @@
   <!-- {focusIndex} -->
   <div class="hidden-text {kind}" bind:this={text} />
   {#if label}
-    <div class="mb-1 text-sm font-medium content-accent-color select-text">
+    <div class="mb-1 text-sm font-medium caption-color select-text">
       <Label {label} />
       {#if required}<span class="error-color">&ast</span>{/if}
     </div>
diff --git a/packages/ui/src/components/EmojiPopup.svelte b/packages/ui/src/components/EmojiPopup.svelte
index 1ff0f1b0a6..26d53f0d43 100644
--- a/packages/ui/src/components/EmojiPopup.svelte
+++ b/packages/ui/src/components/EmojiPopup.svelte
@@ -173,9 +173,11 @@
   }
   .scroll-header {
     position: sticky;
-    top: 0;
+    flex-shrink: 0;
     margin: 0.75rem 0.75rem 0.25rem;
     padding: 0.25rem 0.75rem;
+    top: 0;
+    height: 1.5rem;
     font-size: 0.75rem;
     font-weight: 600;
     text-transform: uppercase;
diff --git a/packages/ui/src/components/Expandable.svelte b/packages/ui/src/components/Expandable.svelte
index 98866f779f..ced63190eb 100644
--- a/packages/ui/src/components/Expandable.svelte
+++ b/packages/ui/src/components/Expandable.svelte
@@ -70,8 +70,8 @@
     }
     &.bordered {
       padding: 0.25rem 0.5rem;
-      background-color: var(--body-accent);
-      border: 1px solid var(--divider-color);
+      background-color: var(--theme-comp-header-color);
+      border: 1px solid var(--theme-divider-color);
       border-radius: 0.25rem;
     }
   }
diff --git a/packages/ui/src/components/Like.svelte b/packages/ui/src/components/Like.svelte
index c34c42cbd5..9051c93854 100644
--- a/packages/ui/src/components/Like.svelte
+++ b/packages/ui/src/components/Like.svelte
@@ -45,14 +45,14 @@
     }
     .icon {
       margin-left: 0.25rem;
-      color: var(--trans-color);
+      color: var(--theme-trans-color);
       cursor: pointer;
 
       &:hover {
         color: var(--dark-color);
       }
       &:active {
-        color: var(--darker-color);
+        color: var(--theme-darker-color);
       }
     }
 
diff --git a/packages/ui/src/components/ListView.svelte b/packages/ui/src/components/ListView.svelte
index ede86e047a..3237e6a9e3 100644
--- a/packages/ui/src/components/ListView.svelte
+++ b/packages/ui/src/components/ListView.svelte
@@ -86,14 +86,15 @@
 
 <style lang="scss">
   .list-container {
+    min-width: 0;
     // border-radius: 0.25rem;
     user-select: none;
 
     .list-item {
-      border-radius: 0.25rem;
+      min-width: 0;
     }
     .selection {
-      background-color: var(--theme-button-focused);
+      background-color: var(--theme-popup-hover);
     }
   }
 </style>
diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte
index 7f44d1b472..919e80b36f 100644
--- a/packages/ui/src/components/PopupInstance.svelte
+++ b/packages/ui/src/components/PopupInstance.svelte
@@ -184,6 +184,8 @@
     display: flex;
     flex-direction: column;
     // justify-content: center;
+    min-width: 0;
+    min-height: 0;
     max-height: calc(100vh - 32px);
     background-color: transparent;
     transform-origin: center;
diff --git a/packages/ui/src/components/StepsDialog.svelte b/packages/ui/src/components/StepsDialog.svelte
index 359da2562a..b59b84a7b9 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="dark-color"><Label label={stepsDescription} /></span>
+          <span class="content-dark-color"><Label label={stepsDescription} /></span>
         {/if}
       </div>
     </Scroller>
diff --git a/packages/ui/src/components/StylishEdit.svelte b/packages/ui/src/components/StylishEdit.svelte
index 40a6b80c85..566c1636bf 100644
--- a/packages/ui/src/components/StylishEdit.svelte
+++ b/packages/ui/src/components/StylishEdit.svelte
@@ -75,7 +75,7 @@
     background-color: var(--theme-button-enabled);
     border: 1px solid var(--theme-button-border);
     border-radius: 0.75rem;
-    caret-color: var(--caret-color);
+    caret-color: var(--theme-caret-color);
 
     &:focus-within {
       background-color: var(--theme-button-focused);
diff --git a/packages/ui/src/components/TimeSince.svelte b/packages/ui/src/components/TimeSince.svelte
index 01156b15a4..2c62d960a0 100644
--- a/packages/ui/src/components/TimeSince.svelte
+++ b/packages/ui/src/components/TimeSince.svelte
@@ -72,6 +72,6 @@
     : undefined
 </script>
 
-<span use:tooltip={{ label: ui.string.TimeTooltip, props: { value: tooltipValue } }} style="white-space: nowrap;">
+<span use:tooltip={{ label: ui.string.TimeTooltip, props: { value: tooltipValue } }} class="overflow-label">
   {time}
 </span>
diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte
index d0f3a9733c..31dcb7df64 100644
--- a/packages/ui/src/components/TooltipInstance.svelte
+++ b/packages/ui/src/components/TooltipInstance.svelte
@@ -257,11 +257,11 @@
     flex-direction: column;
     padding: 0.5rem;
     max-width: 50vw;
-    color: var(--caption-color);
-    background-color: var(--accent-bg-color);
-    border: 1px solid var(--divider-color);
+    color: var(--theme-content-color);
+    background-color: var(--theme-popup-color);
+    border: 1px solid var(--theme-popup-divider);
     border-radius: 0.75rem;
-    box-shadow: var(--popup-aside-shadow);
+    box-shadow: var(--theme-popup-shadow);
     user-select: none;
     z-index: 10000;
 
@@ -284,12 +284,12 @@
       height: 7px;
     }
     &::before {
-      background-color: var(--accent-bg-color);
+      background-color: var(--theme-popup-color);
       clip-path: url('#nub-bg');
       z-index: 1;
     }
     &::after {
-      background-color: var(--divider-color);
+      background-color: var(--theme-popup-divider);
       clip-path: url('#nub-border');
       z-index: 2;
     }
@@ -346,11 +346,11 @@
     position: fixed;
     padding: 0.5rem 0.75rem;
     text-align: center;
-    color: var(--caption-color);
-    background-color: var(--accent-bg-color);
-    border: 1px solid var(--divider-color);
+    color: var(--theme-content-color);
+    background-color: var(--theme-popup-color);
+    border: 1px solid var(--theme-popup-divider);
     border-radius: 0.75rem;
-    box-shadow: var(--popup-aside-shadow);
+    box-shadow: var(--theme-popup-shadow);
     user-select: none;
     z-index: 10000;
 
@@ -362,12 +362,12 @@
       height: 7px;
     }
     &::before {
-      background-color: var(--accent-bg-color);
+      background-color: var(--theme-popup-color);
       clip-path: url('#nub-bg');
       z-index: 1;
     }
     &::after {
-      background-color: var(--divider-color);
+      background-color: var(--theme-popup-divider);
       clip-path: url('#nub-border');
       z-index: 2;
     }
diff --git a/packages/ui/src/components/calendar/DatePopup.svelte b/packages/ui/src/components/calendar/DatePopup.svelte
index 8eb3e877c8..c85cb5dfef 100644
--- a/packages/ui/src/components/calendar/DatePopup.svelte
+++ b/packages/ui/src/components/calendar/DatePopup.svelte
@@ -389,17 +389,16 @@
     width: max-content;
     height: max-content;
     color: var(--caption-color);
-    background: var(--board-card-bg-color);
-    border: 1px solid var(--divider-color);
+    background: var(--theme-popup-color);
     border-radius: 0.5rem;
-    box-shadow: var(--card-shadow);
+    box-shadow: var(--theme-popup-shadow);
 
     .header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 1rem 1.5rem 1rem 2rem;
-      border-bottom: 1px solid var(--divider-color);
+      border-bottom: 1px solid var(--theme-popup-divider);
     }
 
     .content {
@@ -413,16 +412,16 @@
         padding-left: 2px;
         margin-bottom: 0.25rem;
         font-size: 0.8125rem;
-        color: var(--content-color);
+        color: var(--theme-content-color);
 
         .bold {
           font-weight: 500;
-          color: var(--accent-color);
+          color: var(--theme-caption-color);
         }
         .divider {
           margin: 0 0.25rem;
           line-height: 1.4375rem;
-          color: var(--dark-color);
+          color: var(--theme-darker-color);
         }
       }
 
@@ -435,7 +434,7 @@
 
     .footer {
       padding: 1rem 2rem;
-      border-top: 1px solid var(--divider-color);
+      border-top: 1px solid var(--theme-popup-divider);
     }
   }
 
@@ -449,17 +448,17 @@
     height: 3rem;
     font-family: inherit;
     font-size: 1rem;
-    color: var(--content-color);
-    background-color: var(--body-color);
-    border: 1px solid var(--button-border-color);
+    color: var(--theme-content-color);
+    background-color: var(--theme-bg-color);
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.25rem;
     transition: border-color 0.15s ease;
 
     &:hover {
-      border-color: var(--button-border-hover);
+      border-color: var(--theme-button-enabled);
     }
     &:focus-within {
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
       border-color: var(--primary-edit-border-color);
     }
 
@@ -470,15 +469,15 @@
       margin: 0 0.25rem;
       width: 0.75rem;
       height: 0.75rem;
-      color: var(--content-color);
-      background-color: var(--button-bg-color);
+      color: var(--theme-content-color);
+      background-color: var(--theme-button-enabled);
       outline: none;
       border-radius: 50%;
       cursor: pointer;
 
       &:hover {
-        color: var(--accent-color);
-        background-color: var(--button-bg-hover);
+        color: var(--theme-caption-color);
+        background-color: var(--theme-button-hovered);
       }
     }
 
@@ -487,12 +486,13 @@
       padding: 0 0.125rem;
       height: 1.5rem;
       line-height: 1.5rem;
-      color: var(--accent-color);
+      color: var(--theme-caption-color);
       outline: none;
       border-radius: 0.125rem;
 
       &:focus {
-        background-color: var(--primary-bg-color);
+        color: var(--primary-button-color);
+        background-color: var(--primary-button-enabled);
       }
       &::after {
         position: absolute;
@@ -510,7 +510,7 @@
       width: 1px;
       min-width: 1px;
       height: 0.75rem;
-      background-color: var(--button-border-color);
+      background-color: var(--theme-button-border);
     }
     .separator {
       margin: 0 0.1rem;
diff --git a/packages/ui/src/components/calendar/DatePresenter.svelte b/packages/ui/src/components/calendar/DatePresenter.svelte
index fa3506cc07..99e4bb2618 100644
--- a/packages/ui/src/components/calendar/DatePresenter.svelte
+++ b/packages/ui/src/components/calendar/DatePresenter.svelte
@@ -75,7 +75,7 @@
       showPopup(
         DatePopup,
         { currentDate, mondayStart, withTime, label, detail },
-        undefined,
+        'top',
         () => {
           opened = false
         },
@@ -118,6 +118,7 @@
     flex-shrink: 0;
     font-weight: 400;
     width: auto;
+    min-width: 0;
     white-space: nowrap;
     color: var(--theme-content-color);
     cursor: default;
@@ -301,6 +302,20 @@
       //   padding: 0 0.5rem;
       // }
     }
+    &.transparent {
+      padding: 0 0.625rem;
+      border-radius: 0.25rem;
+
+      &:hover {
+        background-color: var(--theme-button-hovered);
+      }
+      &.selected {
+        background-color: var(--highlight-select);
+      }
+      &.selected:hover {
+        background-color: var(--highlight-select-hover);
+      }
+    }
 
     .time-divider {
       flex-shrink: 0;
diff --git a/packages/ui/src/components/calendar/DateRangePresenter.svelte b/packages/ui/src/components/calendar/DateRangePresenter.svelte
index 11dd3a34f8..3a2cbe9805 100644
--- a/packages/ui/src/components/calendar/DateRangePresenter.svelte
+++ b/packages/ui/src/components/calendar/DateRangePresenter.svelte
@@ -30,7 +30,7 @@
   export let editable: boolean = false
   export let icon: 'normal' | 'warning' | 'overdue' = 'normal'
   export let labelNull: IntlString = ui.string.NoDate
-  export let kind: 'no-border' | 'link' | 'secondary' = 'no-border'
+  export let kind: 'default' | 'no-border' | 'link' | 'secondary' = 'default'
   export let size: 'small' | 'medium' | 'large' = 'small'
   export let noShift: boolean = false
 
@@ -466,6 +466,14 @@
       }
     }
 
+    &.default {
+      padding: 0;
+      color: var(--theme-content-color);
+
+      &:hover {
+        color: var(--theme-caption-color);
+      }
+    }
     &.no-border {
       font-weight: 400;
       color: var(--theme-content-color);
diff --git a/packages/ui/src/components/calendar/Shifts.svelte b/packages/ui/src/components/calendar/Shifts.svelte
index 99832a4c41..4c39f775a6 100644
--- a/packages/ui/src/components/calendar/Shifts.svelte
+++ b/packages/ui/src/components/calendar/Shifts.svelte
@@ -85,10 +85,10 @@
     width: fit-content;
     width: 12rem;
     min-width: 12rem;
-    background: var(--popup-bg-color);
-    border: 1px solid var(--divider-color);
+    background: var(--theme-navpanel-color);
+    border: 1px solid var(--theme-divider-color);
     border-radius: 0.5rem;
-    box-shadow: var(--popup-shadow);
+    box-shadow: var(--theme-popup-shadow);
     z-index: -1;
 
     .btn {
@@ -100,8 +100,8 @@
       cursor: pointer;
 
       &:hover {
-        color: var(--caption-color);
-        background-color: var(--button-bg-hover);
+        color: var(--theme-caption-color);
+        background-color: var(--theme-navpanel-hovered);
       }
     }
 
@@ -109,7 +109,7 @@
       margin: 0.25rem 0.75rem 0.25rem 0;
       height: 1px;
       min-height: 1px;
-      background-color: var(--divider-color);
+      background-color: var(--theme-divider-color);
     }
   }
 </style>
diff --git a/packages/ui/src/components/icons/Check.svelte b/packages/ui/src/components/icons/Check.svelte
index bc43055168..cb3c624f28 100644
--- a/packages/ui/src/components/icons/Check.svelte
+++ b/packages/ui/src/components/icons/Check.svelte
@@ -3,6 +3,11 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M2 8.3324L6.65721 13L14 3" stroke={fill} stroke-linecap="round" stroke-linejoin="round" />
+<svg class="svg-{size}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    {fill}
+    d="M29.7071 6.29314C30.0976 6.68366 30.0976 7.31683 29.7071 7.70735L13.7071 23.7074C13.3166 24.0979 12.6834 24.0979 12.2929 23.7074L4.29289 15.7074C3.90237 15.3168 3.90237 14.6837 4.29289 14.2931C4.68342 13.9026 5.31658 13.9026 5.70711 14.2931L13 21.586L28.2929 6.29314C28.6834 5.90261 29.3166 5.90261 29.7071 6.29314Z"
+  />
 </svg>
diff --git a/packages/ui/src/components/icons/Folder.svelte b/packages/ui/src/components/icons/Folder.svelte
index 01f1d22b23..328f3dc5ed 100644
--- a/packages/ui/src/components/icons/Folder.svelte
+++ b/packages/ui/src/components/icons/Folder.svelte
@@ -4,9 +4,10 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
   <path
-    d="M10.7,4.1H9.1C8.8,4.1,8.6,4,8.4,3.8L7.9,3.2C7.5,2.8,7,2.5,6.4,2.5H5.3C3.1,2.5,2,3.7,2,6v4.1c0,2.2,1.4,3.5,3.8,3.5h4.5 c2.3,0,3.8-1.3,3.8-3.5l0-2.6C14,5.2,12.9,4.1,10.7,4.1z M13,10.1C13,10.1,13,10.1,13,10.1c0,1.6-1,2.5-2.8,2.5H5.8 C4,12.7,3,11.8,3,10.1V6c0-1.8,0.7-2.5,2.3-2.5h1.1c0.3,0,0.5,0.1,0.7,0.3l0.5,0.6C8,4.9,8.5,5.1,9.1,5.1h1.6c1.7,0,2.3,0.7,2.3,2.4 L13,10.1z"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2 9C2 6.23858 4.23858 4 7 4H10.6716C11.4672 4 12.2303 4.31607 12.7929 4.87868L15.6213 7.70711C15.8089 7.89464 16.0632 8 16.3284 8H25C27.7614 8 30 10.2386 30 13V23C30 25.7614 27.7614 28 25 28H7C4.23858 28 2 25.7614 2 23V9ZM7 6C5.34315 6 4 7.34315 4 9V23C4 24.6569 5.34315 26 7 26H25C26.6569 26 28 24.6569 28 23V13C28 11.3431 26.6569 10 25 10H16.3284C15.5328 10 14.7697 9.68393 14.2071 9.12132L11.3787 6.29289C11.1911 6.10536 10.9368 6 10.6716 6H7Z"
   />
-  <path d="M10.6,9.1H5.3C5,9.1,4.8,9.3,4.8,9.6s0.2,0.5,0.5,0.5h5.3c0.3,0,0.5-0.2,0.5-0.5S10.8,9.1,10.6,9.1z" />
 </svg>
diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts
index 50a7424e23..6f3f0a4889 100644
--- a/packages/ui/src/popups.ts
+++ b/packages/ui/src/popups.ts
@@ -205,6 +205,11 @@ export function fitPopupElement (
       newProps.left = '60%'
       newProps.right = '4px'
       show = true
+    } else if (element === 'center') {
+      newProps.top = '50%'
+      newProps.left = '50%'
+      newProps.transform = 'translate(-50%, -50%)'
+      show = true
     } else if (element === 'centered') {
       newProps.top = newProps.bottom = '15%'
       newProps.left = newProps.right = '25%'
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index b70ec788e6..6fb281addd 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -151,6 +151,7 @@ export type PopupPosAlignment =
   | 'middle'
   | 'help-center'
   | 'centered'
+  | 'center'
 
 export function isPopupPosAlignment (x: any): x is PopupPosAlignment {
   return (
@@ -163,7 +164,8 @@ export function isPopupPosAlignment (x: any): x is PopupPosAlignment {
       x === 'content' ||
       x === 'middle' ||
       x === 'help-center' ||
-      x === 'centered')
+      x === 'centered' ||
+      x === 'center')
   )
 }
 
diff --git a/plugins/activity-resources/src/components/TxView.svelte b/plugins/activity-resources/src/components/TxView.svelte
index c4fb85e591..d36798eb40 100644
--- a/plugins/activity-resources/src/components/TxView.svelte
+++ b/plugins/activity-resources/src/components/TxView.svelte
@@ -382,14 +382,14 @@
       margin-right: 1rem;
       width: 2.25rem;
       min-width: 2.25rem;
-      color: var(--darker-color);
+      color: var(--theme-darker-color);
     }
     .msgactivity-icon {
       height: 1.75rem;
     }
     .msgactivity-avatar {
       height: 2.25rem;
-      // background-color: var(--darker-color);
+      // background-color: var(--theme-darker-color);
       border: 1px dashed var(--divider-trans-color);
       border-radius: 50%;
     }
@@ -486,7 +486,7 @@
 
   .time {
     font-size: 0.75rem;
-    color: var(--trans-color);
+    color: var(--theme-trans-color);
 
     &.top {
       align-self: flex-start;
diff --git a/plugins/activity-resources/src/components/TxViewTx.svelte b/plugins/activity-resources/src/components/TxViewTx.svelte
index c1b6c6eb2c..070bf2ebc2 100644
--- a/plugins/activity-resources/src/components/TxViewTx.svelte
+++ b/plugins/activity-resources/src/components/TxViewTx.svelte
@@ -24,7 +24,7 @@
 
 {#each filterTx([...tx.txes, tx], core.class.TxCreateDoc) as ctx, i}
   {#if i === 0 && !presentersOnly}
-    <IconAdd size={'x-small'} fill={'var(--trans-color)'} />
+    <IconAdd size={'x-small'} fill={'var(--theme-trans-color)'} />
   {/if}
   {#if typeof viewlet?.component === 'string'}
     <Component is={viewlet?.component} props={getProps(ctx, edit)} inline on:close={onCancelEdit} />
@@ -34,7 +34,7 @@
 {/each}
 {#each filterTx([...tx.txes, tx], core.class.TxRemoveDoc) as ctx, i}
   {#if i === 0 && !presentersOnly}
-    <IconDelete size={'x-small'} fill={'var(--trans-color)'} />
+    <IconDelete size={'x-small'} fill={'var(--theme-trans-color)'} />
   {/if}
   {#if typeof viewlet?.component === 'string'}
     <Component is={viewlet?.component} props={getProps(ctx, edit)} inline on:close={onCancelEdit} />
diff --git a/plugins/attachment-resources/src/components/Attachments.svelte b/plugins/attachment-resources/src/components/Attachments.svelte
index c42bd9c36a..3670bfa50c 100644
--- a/plugins/attachment-resources/src/components/Attachments.svelte
+++ b/plugins/attachment-resources/src/components/Attachments.svelte
@@ -84,15 +84,15 @@
       {attachmentClassOptions}
     >
       <div class="antiSection-empty attachments flex-col mt-3" class:solid={dragover}>
-        <div class="flex-center content-accent-color">
+        <div class="flex-center caption-color">
           <UploadDuo size={'large'} />
         </div>
-        <div class="text-sm dark-color" style:pointer-events="none">
+        <div class="text-sm content-dark-color" style:pointer-events="none">
           <Label label={attachment.string.NoAttachments} />
         </div>
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
-          class="over-underline text-sm content-accent-color"
+          class="over-underline text-sm caption-color"
           style:pointer-events={dragover ? 'none' : 'all'}
           on:click={() => inputFile.click()}
         >
diff --git a/plugins/chunter-resources/src/components/CommentPresenter.svelte b/plugins/chunter-resources/src/components/CommentPresenter.svelte
index 339fbb9a3b..9fac597ee8 100644
--- a/plugins/chunter-resources/src/components/CommentPresenter.svelte
+++ b/plugins/chunter-resources/src/components/CommentPresenter.svelte
@@ -51,7 +51,7 @@
     </div>
     <span class="label nowrap">Message</span>
   </a>
-  &nbsp;<span class="dark-color">#{cutId(value._id.toString())}</span>
+  &nbsp;<span class="content-dark-color">#{cutId(value._id.toString())}</span>
 {:else}
   <div class="flex-row-top">
     {#await getEmployee(value, $employeeByIdStore, $employeeAccountByIdStore) then employee}
@@ -63,7 +63,7 @@
           <div class="fs-title">
             {#if employee}{getName(employee)}{/if}
           </div>
-          <div class="dark-color ml-4"><TimeSince value={value.modifiedOn} /></div>
+          <div class="content-dark-color ml-4"><TimeSince value={value.modifiedOn} /></div>
         </div>
         <ShowMore fixed>
           <MessageViewer message={value.message} />
diff --git a/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte b/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
index d39cfbc50d..2acab60c6a 100644
--- a/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
+++ b/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
@@ -59,7 +59,7 @@
   let loading = false
 </script>
 
-<div class:editing class="content-accent-color">
+<div class:editing class="content-color">
   {#if edit}
     <AttachmentRefInput
       bind:loading
diff --git a/plugins/contact-resources/src/components/ChannelEditor.svelte b/plugins/contact-resources/src/components/ChannelEditor.svelte
index 2c97dd3790..f4b44506a7 100644
--- a/plugins/contact-resources/src/components/ChannelEditor.svelte
+++ b/plugins/contact-resources/src/components/ChannelEditor.svelte
@@ -207,12 +207,13 @@
       left: 0;
       width: 100%;
       height: 100%;
-      background-color: var(--board-bg-color);
+      background-color: var(--theme-popup-hover);
+      border: 1px solid transparent;
       border-radius: 0.25rem;
       opacity: 0.95;
     }
     &.show.copied::before {
-      background-color: var(--body-accent);
+      border-color: var(--theme-divider-color);
     }
     &.show::after {
       content: attr(data-tooltip);
@@ -226,17 +227,17 @@
       width: calc(100% - 0.5rem);
       text-align: center;
       font-size: 0.75rem;
-      color: var(--content-color);
+      color: var(--theme-content-color);
       transform: translate(-50%, -50%);
     }
   }
 
   .editor-container {
     padding: 0.5rem;
-    background-color: var(--accent-bg-color);
-    border: 1px solid var(--divider-color);
+    background-color: var(--theme-popup-color);
+    border: 1px solid var(--theme-popup-divider);
     border-radius: 0.75rem;
-    box-shadow: var(--popup-aside-shadow);
+    box-shadow: var(--theme-popup-shadow);
 
     &.top {
       transform: translate(calc(-50% + 0.75rem), -0.5rem);
@@ -258,13 +259,13 @@
     }
     &.top::before,
     &.bottom::before {
-      background-color: var(--accent-bg-color);
+      background-color: var(--theme-popup-color);
       clip-path: url('#nub-bg');
       z-index: 1;
     }
     &.top::after,
     &.bottom::after {
-      background-color: var(--divider-color);
+      background-color: var(--theme-popup-divider);
       clip-path: url('#nub-border');
       z-index: 2;
     }
diff --git a/plugins/contact-resources/src/components/Members.svelte b/plugins/contact-resources/src/components/Members.svelte
index c01dd2e698..ced0d72911 100644
--- a/plugins/contact-resources/src/components/Members.svelte
+++ b/plugins/contact-resources/src/components/Members.svelte
@@ -125,11 +125,11 @@
     />
   {:else}
     <div class="antiSection-empty solid flex-col mt-3">
-      <span class="dark-color">
+      <span class="content-dark-color">
         <Label label={contact.string.NoMembers} />
       </span>
       <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <span class="over-underline content-accent-color" on:click={createApp}>
+      <span class="over-underline content-color" on:click={createApp}>
         <Label label={contact.string.AddMember} />
       </span>
     </div>
diff --git a/plugins/contact-resources/src/components/SpaceMembers.svelte b/plugins/contact-resources/src/components/SpaceMembers.svelte
index d30d479411..8137f27722 100644
--- a/plugins/contact-resources/src/components/SpaceMembers.svelte
+++ b/plugins/contact-resources/src/components/SpaceMembers.svelte
@@ -106,7 +106,7 @@
       <div class="item fs-title">
         <div class="flex-row-center" on:click={openAddMembersPopup}>
           <div class="flex-center ml-1 mr-1"><IconAdd size={'large'} /></div>
-          <div class="flex-col ml-2 min-w-0 content-accent-color">
+          <div class="flex-col ml-2 min-w-0 content-color">
             <Label label={presentation.string.Add} />
           </div>
         </div>
diff --git a/plugins/contact-resources/src/components/UserInfo.svelte b/plugins/contact-resources/src/components/UserInfo.svelte
index dd84f2ab0a..c9db642186 100644
--- a/plugins/contact-resources/src/components/UserInfo.svelte
+++ b/plugins/contact-resources/src/components/UserInfo.svelte
@@ -30,6 +30,6 @@
   <Avatar avatar={value.avatar} {size} {icon} on:accent-color />
   <div class="flex-col min-w-0 {size === 'tiny' || size === 'inline' ? 'ml-1' : 'ml-2'}">
     {#if subtitle}<div class="content-dark-color text-sm">{subtitle}</div>{/if}
-    <div class="content-accent-color overflow-label text-left">{getName(value)}</div>
+    <div class="content-color overflow-label text-left">{getName(value)}</div>
   </div>
 </div>
diff --git a/plugins/gmail-resources/src/components/Chats.svelte b/plugins/gmail-resources/src/components/Chats.svelte
index 2c0c798f99..b43496bf2c 100644
--- a/plugins/gmail-resources/src/components/Chats.svelte
+++ b/plugins/gmail-resources/src/components/Chats.svelte
@@ -132,7 +132,7 @@
     {:else}
       <div class="flex-col-center justify-center h-full">
         <Icon icon={IconInbox} size={'full'} />
-        <div class="mt-4 fs-bold dark-color"><Label label={plugin.string.Incoming} /></div>
+        <div class="mt-4 fs-bold content-dark-color"><Label label={plugin.string.Incoming} /></div>
       </div>
     {/if}
   </div>
diff --git a/plugins/gmail-resources/src/components/FullMessage.svelte b/plugins/gmail-resources/src/components/FullMessage.svelte
index 11ce7d84bd..afb6d8a9e1 100644
--- a/plugins/gmail-resources/src/components/FullMessage.svelte
+++ b/plugins/gmail-resources/src/components/FullMessage.svelte
@@ -63,7 +63,7 @@
         <div class="overflow-label" use:tooltip={{ label: getEmbeddedLabel(currentMessage.subject) }}>
           {currentMessage.subject}
         </div>
-        <span class="content-accent-color">
+        <span class="content-color">
           <Label label={currentMessage.incoming ? gmail.string.From : gmail.string.To} />
           <b>{title}</b>
         </span>
diff --git a/plugins/gmail-resources/src/components/Message.svelte b/plugins/gmail-resources/src/components/Message.svelte
index 9b7bd0a949..94bd0b0d61 100644
--- a/plugins/gmail-resources/src/components/Message.svelte
+++ b/plugins/gmail-resources/src/components/Message.svelte
@@ -36,18 +36,18 @@
 >
   <div class="flex-col message" class:selected>
     <div class="flex-between text-sm mb-1">
-      <div class="dark-color overflow-label mr-4">
+      <div class="content-dark-color overflow-label mr-4">
         <Label label={gmail.string.From} />
-        <span class="content-accent-color">{message.sender}</span>
+        <span class="content-color">{message.sender}</span>
       </div>
-      <div class="dark-color flex">
+      <div class="content-dark-color flex">
         <AttachmentsPresenter value={message.attachments} object={message} />
-        <span class="content-accent-color">{getTime(message.sendOn)}</span>
+        <span class="content-color">{getTime(message.sendOn)}</span>
       </div>
     </div>
-    <div class="dark-color text-sm overflow-label mr-4 mb-4">
+    <div class="content-dark-color text-sm overflow-label mr-4 mb-4">
       <Label label={gmail.string.To} />
-      <span class="content-accent-color">{message.receiver}</span>
+      <span class="content-color">{message.receiver}</span>
     </div>
     <div class="fs-title overflow-label mb-1">
       {message.subject}
diff --git a/plugins/gmail-resources/src/components/NewMessage.svelte b/plugins/gmail-resources/src/components/NewMessage.svelte
index 2bd2c2f06e..8d12cd475c 100644
--- a/plugins/gmail-resources/src/components/NewMessage.svelte
+++ b/plugins/gmail-resources/src/components/NewMessage.svelte
@@ -179,7 +179,7 @@
       />
       <div class="flex-grow flex-col">
         <Label label={plugin.string.NewMessage} />
-        <span class="content-accent-color"><b>{getName(object)} ({channel.value})</b></span>
+        <span class="content-color"><b>{getName(object)} ({channel.value})</b></span>
       </div>
     </div>
     <div class="buttons-group small-gap">
@@ -249,7 +249,7 @@
     padding: 1rem;
     background-color: var(--outcoming-msg);
     color: #d6d6d6;
-    caret-color: var(--caret-color);
+    caret-color: var(--theme-caret-color);
     min-height: 0;
     margin-bottom: 2rem;
     height: 100%;
diff --git a/plugins/gmail-resources/src/components/NewMessages.svelte b/plugins/gmail-resources/src/components/NewMessages.svelte
index e8c62d1b8a..e3a8697139 100644
--- a/plugins/gmail-resources/src/components/NewMessages.svelte
+++ b/plugins/gmail-resources/src/components/NewMessages.svelte
@@ -272,7 +272,7 @@
       <div class="buttons-group">
         <div class="flex-grow flex-col">
           <Label label={plugin.string.NewMessage} />
-          <div class="content-accent-color targets">
+          <div class="caption-color targets">
             <b>
               {#each channels as channel, i}
                 <div>
@@ -365,7 +365,7 @@
     padding: 1rem;
     background-color: var(--outcoming-msg);
     color: #d6d6d6;
-    caret-color: var(--caret-color);
+    caret-color: var(--theme-caret-color);
     min-height: 0;
     height: 100%;
     margin-bottom: 2rem;
diff --git a/plugins/hr-resources/src/components/DepartmentStaff.svelte b/plugins/hr-resources/src/components/DepartmentStaff.svelte
index 2a9ba2b35b..7e7f14c089 100644
--- a/plugins/hr-resources/src/components/DepartmentStaff.svelte
+++ b/plugins/hr-resources/src/components/DepartmentStaff.svelte
@@ -125,10 +125,10 @@
     </Scroller>
   {:else}
     <div class="antiSection-empty solid flex-col-center mt-3">
-      <span class="text-sm dark-color">
+      <span class="text-sm content-dark-color">
         <Label label={hr.string.NoMembers} />
       </span>
-      <span class="text-sm content-accent-color over-underline" on:click={add}>
+      <span class="text-sm content-color over-underline" on:click={add}>
         <Label label={hr.string.AddMember} />
       </span>
     </div>
diff --git a/plugins/inventory-resources/src/components/Variants.svelte b/plugins/inventory-resources/src/components/Variants.svelte
index c6f8cd515c..a6b2bed58b 100644
--- a/plugins/inventory-resources/src/components/Variants.svelte
+++ b/plugins/inventory-resources/src/components/Variants.svelte
@@ -45,13 +45,13 @@
     />
   {:else}
     <div class="antiSection-empty solid flex-col-center mt-3">
-      <div class="content-accent-color">
+      <div class="content-color">
         <Icon size={'large'} icon={inventory.icon.Variant} />
       </div>
-      <span class="text-sm dark-color mt-2">
+      <span class="text-sm content-dark-color mt-2">
         <Label label={inventory.string.NoVariantsForProduct} />
       </span>
-      <span class="text-sm content-accent-color over-underline" on:click={create}>
+      <span class="text-sm content-color over-underline" on:click={create}>
         <Label label={inventory.string.CreateVariant} />
       </span>
     </div>
diff --git a/plugins/lead-resources/src/components/Leads.svelte b/plugins/lead-resources/src/components/Leads.svelte
index 54826b27a9..5ad6b0875c 100644
--- a/plugins/lead-resources/src/components/Leads.svelte
+++ b/plugins/lead-resources/src/components/Leads.svelte
@@ -57,10 +57,10 @@
     {/if}
   {:else}
     <div class="antiSection-empty solid flex-col-center mt-3">
-      <span class="text-sm dark-color">
+      <span class="text-sm content-dark-color">
         <Label label={lead.string.NoLeadsForDocument} />
       </span>
-      <span class="text-sm content-accent-color over-underline" on:click={createLead}>
+      <span class="text-sm content-color over-underline" on:click={createLead}>
         <Label label={lead.string.CreateLead} />
       </span>
     </div>
diff --git a/plugins/recruit-resources/src/components/Applications.svelte b/plugins/recruit-resources/src/components/Applications.svelte
index 7ae4c305b5..d2bf8d0cb8 100644
--- a/plugins/recruit-resources/src/components/Applications.svelte
+++ b/plugins/recruit-resources/src/components/Applications.svelte
@@ -85,11 +85,11 @@
       <div class="caption-color">
         <FileDuo size={'large'} />
       </div>
-      <span class="dark-color">
+      <span class="content-dark-color">
         <Label label={recruit.string.NoApplicationsForTalent} />
       </span>
       <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <span class="over-underline content-accent-color" on:click={createApp}>
+      <span class="over-underline content-color" on:click={createApp}>
         <Label label={recruit.string.CreateAnApplication} />
       </span>
     </div>
diff --git a/plugins/recruit-resources/src/components/VacancyApplications.svelte b/plugins/recruit-resources/src/components/VacancyApplications.svelte
index 27788faf54..20d75fbc01 100644
--- a/plugins/recruit-resources/src/components/VacancyApplications.svelte
+++ b/plugins/recruit-resources/src/components/VacancyApplications.svelte
@@ -97,10 +97,10 @@
       <div class="caption-color">
         <FileDuo size={'large'} />
       </div>
-      <span class="dark-color">
+      <span class="content-dark-color">
         <Label label={recruit.string.NoApplicationsForVacany} />
       </span>
-      <span class="over-underline content-accent-color" on:click={createApp}>
+      <span class="over-underline content-color" on:click={createApp}>
         <Label label={recruit.string.CreateAnApplication} />
       </span>
     </div>
diff --git a/plugins/recruit-resources/src/components/VacancyList.svelte b/plugins/recruit-resources/src/components/VacancyList.svelte
index 163a0103cf..f64912ea59 100644
--- a/plugins/recruit-resources/src/components/VacancyList.svelte
+++ b/plugins/recruit-resources/src/components/VacancyList.svelte
@@ -68,10 +68,10 @@
       <div class="caption-color">
         <FileDuo size={'large'} />
       </div>
-      <span class="dark-color">
+      <span class="content-dark-color">
         <Label label={getEmbeddedLabel('No Vacancies')} />
       </span>
-      <span class="over-underline content-accent-color" on:click={createApp}>
+      <span class="over-underline content-color" on:click={createApp}>
         <Label label={recruit.string.CreateVacancy} />
       </span>
     </div>
diff --git a/plugins/recruit-resources/src/components/review/Opinions.svelte b/plugins/recruit-resources/src/components/review/Opinions.svelte
index 28ef40e07b..46983b01e1 100644
--- a/plugins/recruit-resources/src/components/review/Opinions.svelte
+++ b/plugins/recruit-resources/src/components/review/Opinions.svelte
@@ -45,13 +45,13 @@
     />
   {:else}
     <div class="antiSection-empty solid flex-col-center mt-3">
-      <div class="content-accent-color">
+      <div class="content-color">
         <FileDuo size={'large'} />
       </div>
-      <div class="text-sm dark-color mt-2">
+      <div class="text-sm content-dark-color mt-2">
         <Label label={recruit.string.NoReviewForCandidate} />
       </div>
-      <span class="text-sm content-accent-color over-underline" on:click={createApp}>
+      <span class="text-sm content-color over-underline" on:click={createApp}>
         <Label label={recruit.string.CreateAnReview} />
       </span>
     </div>
diff --git a/plugins/recruit-resources/src/components/review/Reviews.svelte b/plugins/recruit-resources/src/components/review/Reviews.svelte
index 109ed2c91e..2224197132 100644
--- a/plugins/recruit-resources/src/components/review/Reviews.svelte
+++ b/plugins/recruit-resources/src/components/review/Reviews.svelte
@@ -92,11 +92,11 @@
       <div class="caption-color">
         <FileDuo size={'large'} />
       </div>
-      <span class="dark-color mt-2">
+      <span class="content-dark-color mt-2">
         <Label label={recruit.string.NoReviewForCandidate} />
       </span>
       <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <span class="over-underline content-accent-color" on:click={createApp}>
+      <span class="over-underline content-color" on:click={createApp}>
         <Label label={recruit.string.CreateAnReview} />
       </span>
     </div>
diff --git a/plugins/setting-resources/src/components/ClassHierarchy.svelte b/plugins/setting-resources/src/components/ClassHierarchy.svelte
index 7cab6350b6..2d8a674ac0 100644
--- a/plugins/setting-resources/src/components/ClassHierarchy.svelte
+++ b/plugins/setting-resources/src/components/ClassHierarchy.svelte
@@ -71,11 +71,11 @@
         <div class="mr-2 flex">
           <Icon icon={clazz.icon} size={'medium'} />
           {#if clazz.kind === ClassifierKind.MIXIN && hierarchy.hasMixin(clazz, settings.mixin.UserMixin)}
-            <Icon icon={IconAdd} size={'x-small'} />
+            <Icon icon={IconAdd} size={'x-small'} fill={'var(--theme-dark-color)'} />
           {/if}
         </div>
       {/if}
-      <span class="overflow-label content-accent-color"><Label label={clazz.label} /></span>
+      <span class="overflow-label caption-color"><Label label={clazz.label} /></span>
     </div>
   </div>
   {#if desc.length}
diff --git a/plugins/tags-resources/src/components/TagsEditor.svelte b/plugins/tags-resources/src/components/TagsEditor.svelte
index 1fd09f03da..55bffd8c95 100644
--- a/plugins/tags-resources/src/components/TagsEditor.svelte
+++ b/plugins/tags-resources/src/components/TagsEditor.svelte
@@ -116,7 +116,7 @@
       <div class="flex flex-grow flex-col" class:tag-items-scroll={!showTitle}>
         {#if items.length === 0}
           {#if keyLabel}
-            <div class="text-sm dark-color w-full flex-center">
+            <div class="text-sm content-dark-color w-full flex-center">
               <Label label={tags.string.NoItems} params={{ word: keyLabel }} />
             </div>
           {/if}
diff --git a/plugins/tags-resources/src/components/TagsFilter.svelte b/plugins/tags-resources/src/components/TagsFilter.svelte
index 4ae06355df..153dd959f1 100644
--- a/plugins/tags-resources/src/components/TagsFilter.svelte
+++ b/plugins/tags-resources/src/components/TagsFilter.svelte
@@ -196,7 +196,7 @@
                         <div class="tag" style="background-color: {getPlatformColor(element.color)};" />
                         {element.title}
                       </div>
-                      <div class="dark-color ml-2">
+                      <div class="content-dark-color ml-2">
                         {element.refCount ?? 0}
                       </div>
                     </div>
diff --git a/plugins/task-resources/src/components/state/DoneStateEditor.svelte b/plugins/task-resources/src/components/state/DoneStateEditor.svelte
index e93b5f5ccd..b593898061 100644
--- a/plugins/task-resources/src/components/state/DoneStateEditor.svelte
+++ b/plugins/task-resources/src/components/state/DoneStateEditor.svelte
@@ -80,7 +80,7 @@
       <div class="pointer-events-none"><DoneStatePresenter value={state} showTitle /></div>
     {:else}
       <div class="flex-row-center pointer-events-none">
-        <div class="dark-color mr-2"><Unknown size={'small'} /></div>
+        <div class="content-dark-color mr-2"><Unknown size={'small'} /></div>
         <span class="overflow-label"><Label label={task.string.NoDoneState} /></span>
       </div>
     {/if}
diff --git a/plugins/task-resources/src/components/state/DoneStatesPopup.svelte b/plugins/task-resources/src/components/state/DoneStatesPopup.svelte
index ad28fe1dc8..a1e64b9a7f 100644
--- a/plugins/task-resources/src/components/state/DoneStatesPopup.svelte
+++ b/plugins/task-resources/src/components/state/DoneStatesPopup.svelte
@@ -68,7 +68,7 @@
           dispatch('close', null)
         }}
       >
-        <div class="dark-color mr-2"><Unknown size={'small'} /></div>
+        <div class="content-dark-color mr-2"><Unknown size={'small'} /></div>
         <span class="overflow-label"><Label label={task.string.NoDoneState} /></span>
       </button>
     </div>
diff --git a/plugins/tracker-resources/src/components/ComponentSelector.svelte b/plugins/tracker-resources/src/components/ComponentSelector.svelte
index 7654a4a830..3a2836eeeb 100644
--- a/plugins/tracker-resources/src/components/ComponentSelector.svelte
+++ b/plugins/tracker-resources/src/components/ComponentSelector.svelte
@@ -128,7 +128,7 @@
       <span
         class="{enlargedText ? 'ml-1 text-base fs-bold' : 'text-md'} overflow-label {!value
           ? 'content-color'
-          : 'content-accent-color'} pointer-events-none"
+          : 'caption-color'} pointer-events-none"
       >
         <Label label={getEmbeddedLabel(componentText)} />
       </span>
diff --git a/plugins/tracker-resources/src/components/CreateIssue.svelte b/plugins/tracker-resources/src/components/CreateIssue.svelte
index d4cc5d44e8..9e3b4b0961 100644
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@@ -544,15 +544,13 @@
   on:changeContent
 >
   <svelte:fragment slot="header">
-    <div class="flex-row-center">
-      <SpaceSelector
-        _class={tracker.class.Project}
-        label={tracker.string.Project}
-        bind:space={_space}
-        kind={'secondary'}
-        size={'large'}
-      />
-    </div>
+    <SpaceSelector
+      _class={tracker.class.Project}
+      label={tracker.string.Project}
+      bind:space={_space}
+      kind={'secondary'}
+      size={'large'}
+    />
     <ObjectBox
       _class={tracker.class.IssueTemplate}
       value={templateId}
diff --git a/plugins/tracker-resources/src/components/SpaceInfo.svelte b/plugins/tracker-resources/src/components/SpaceInfo.svelte
index 0aea6d0d49..c1d5c958dd 100644
--- a/plugins/tracker-resources/src/components/SpaceInfo.svelte
+++ b/plugins/tracker-resources/src/components/SpaceInfo.svelte
@@ -26,7 +26,7 @@
   <div class="flex-center {size} caption-color flex-no-shrink"><IconFolder size={'small'} /></div>
   <div class="flex-col ml-2 min-w-0">
     {#if subtitle}<div class="content-dark-color text-sm">{subtitle}</div>{/if}
-    <div class="content-accent-color overflow-label">{value.name}</div>
+    <div class="content-color overflow-label">{value.name}</div>
   </div>
 </div>
 
diff --git a/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte b/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
index 514b830e60..3475f0f242 100644
--- a/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
@@ -81,7 +81,7 @@
     }
     .icon {
       margin-right: 0.5rem;
-      color: var(--dark-color);
+      color: var(--theme-dark-color);
     }
 
     &.inline {
@@ -93,7 +93,7 @@
       }
       .select-text {
         font-weight: 500;
-        color: var(--accent-color);
+        color: var(--theme-caption-color);
       }
     }
   }
diff --git a/plugins/tracker-resources/src/components/issues/IssuePreview.svelte b/plugins/tracker-resources/src/components/issues/IssuePreview.svelte
index 5ce6f3ad9e..d68b58713c 100644
--- a/plugins/tracker-resources/src/components/issues/IssuePreview.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuePreview.svelte
@@ -97,7 +97,7 @@
             <MessageViewer message={issue.description} />
           </div>
         {:else}
-          <div class="ml-2 dark-color">
+          <div class="ml-2 content-dark-color">
             <Label label={tracker.string.NoDescription} />
           </div>
         {/if}
diff --git a/plugins/tracker-resources/src/components/issues/Move.svelte b/plugins/tracker-resources/src/components/issues/Move.svelte
index 988745d575..94e89bdc35 100644
--- a/plugins/tracker-resources/src/components/issues/Move.svelte
+++ b/plugins/tracker-resources/src/components/issues/Move.svelte
@@ -60,7 +60,7 @@
   <div class="overflow-label fs-title">
     <Label label={tracker.string.MoveIssues} />
   </div>
-  <div class="content-accent-color mt-4 mb-4">
+  <div class="caption-color mt-4 mb-4">
     <Label label={tracker.string.MoveIssuesDescription} />
   </div>
   <div class="spaceSelect">
diff --git a/plugins/tracker-resources/src/components/issues/NotificationIssuePresenter.svelte b/plugins/tracker-resources/src/components/issues/NotificationIssuePresenter.svelte
index aae0960750..344136a03a 100644
--- a/plugins/tracker-resources/src/components/issues/NotificationIssuePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/NotificationIssuePresenter.svelte
@@ -42,7 +42,7 @@
         </span>
       {/if}
       <span class="overflow-label ml-2">
-        <span class="content-accent-color">{title}</span>
+        <span class="caption-color">{title}</span>
         {value.title}
       </span>
     </div>
diff --git a/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte b/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte
index 0721e43d00..f9d66343ae 100644
--- a/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte
@@ -81,9 +81,7 @@
       </div>
       {#if shouldShowLabel}
         <span
-          class="{kind === 'list'
-            ? 'ml-2 text-md'
-            : 'ml-3 text-base'} overflow-label disabled fs-bold content-accent-color"
+          class="{kind === 'list' ? 'ml-2 text-md' : 'ml-3 text-base'} overflow-label disabled fs-bold content-color"
         >
           <Label label={issuePriorities[value.priority]?.label} />
         </span>
diff --git a/plugins/tracker-resources/src/components/issues/StatusEditor.svelte b/plugins/tracker-resources/src/components/issues/StatusEditor.svelte
index c8c9109034..741ae5ae5b 100644
--- a/plugins/tracker-resources/src/components/issues/StatusEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/StatusEditor.svelte
@@ -121,9 +121,7 @@
       </div>
       {#if selectedStatusLabel}
         <span
-          class="{kind === 'list'
-            ? 'ml-1 text-md'
-            : 'ml-2 text-base'} overflow-label disabled fs-bold content-accent-color"
+          class="{kind === 'list' ? 'ml-1 text-md' : 'ml-2 text-base'} overflow-label disabled fs-bold content-color"
         >
           {selectedStatusLabel}
         </span>
diff --git a/plugins/tracker-resources/src/components/issues/related/RelatedIssues.svelte b/plugins/tracker-resources/src/components/issues/related/RelatedIssues.svelte
index 2a24b080b1..1777fd05c1 100644
--- a/plugins/tracker-resources/src/components/issues/related/RelatedIssues.svelte
+++ b/plugins/tracker-resources/src/components/issues/related/RelatedIssues.svelte
@@ -55,14 +55,14 @@
     <SubIssueList bind:viewOptions {viewlet} issues={subIssues} {projects} {disableHeader} />
   {:else}
     <div class="antiSection-empty solid flex-col mt-3">
-      <div class="flex-center content-accent-color">
+      <div class="flex-center content-color">
         <AddIssueDuo size={'large'} />
       </div>
-      <div class="text-sm dark-color" style:pointer-events="none">
+      <div class="text-sm content-dark-color" style:pointer-events="none">
         <Label label={tracker.string.RelatedIssuesNotFound} />
       </div>
       <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div class="over-underline text-sm content-accent-color" on:click={() => dispatch('add-issue')}>
+      <div class="over-underline text-sm content-color" on:click={() => dispatch('add-issue')}>
         <Label label={tracker.string.NewRelatedIssue} />
       </div>
     </div>
diff --git a/plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte b/plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte
index cc844f6d6c..6d85c9cf78 100644
--- a/plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte
+++ b/plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte
@@ -51,7 +51,7 @@
       </span>
       {#if headerRemoval}
         <div in:fade|local={{ duration: 150 }} class="antiSection-header__header flex-between">
-          <span class="dark-color"><Label label={viewplg.string.NoGrouping} /></span>
+          <span class="content-dark-color"><Label label={viewplg.string.NoGrouping} /></span>
           <div class="buttons-group font-normal text-normal">
             {#if extraHeaders}
               {#each extraHeaders as extra}
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationPopup.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationPopup.svelte
index 00646c8fb4..9bf86895b2 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationPopup.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationPopup.svelte
@@ -124,7 +124,7 @@
   <svelte:fragment slot="buttons">
     <Button
       icon={IconAdd}
-      size={'small'}
+      size={'large'}
       on:click={() => {
         showPopup(
           TimeSpendReportPopup,
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte
index c08e9052a1..db380d985e 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte
@@ -40,7 +40,7 @@
     {@const issue = issues[item]}
     {@const currentProject = projects.get(issue.space)}
     <div
-      class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2"
+      class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2 clear-mins"
       on:contextmenu|preventDefault={(ev) => showContextMenu(ev, issue)}
       on:mouseover={() => {
         listProvider.updateFocus(issue)
@@ -60,19 +60,22 @@
         </span>
       </div>
 
-      <FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
-        <AssigneeBox
-          width={'100%'}
-          label={tracker.string.Assignee}
-          _class={contact.class.Employee}
-          value={issue.assignee}
-          readonly
-          showNavigate={false}
-        />
-      </FixedColumn>
-      <FixedColumn key={'estimation'} justify={'left'}>
-        <EstimationEditor value={issue} kind={'list'} />
-      </FixedColumn>
+      <div class="flex-row-center clear-mins gap-2 self-end flex-no-shrink" class:p-text={twoRows}>
+        <FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
+          <AssigneeBox
+            width={'100%'}
+            kind={'transparent'}
+            label={tracker.string.Assignee}
+            _class={contact.class.Employee}
+            value={issue.assignee}
+            readonly
+            showNavigate={false}
+          />
+        </FixedColumn>
+        <FixedColumn key={'estimation'} justify={'left'}>
+          <EstimationEditor value={issue} kind={'list'} />
+        </FixedColumn>
+      </div>
     </div>
   </svelte:fragment>
 </ListView>
diff --git a/plugins/tracker-resources/src/components/issues/timereport/ReportedTimeEditor.svelte b/plugins/tracker-resources/src/components/issues/timereport/ReportedTimeEditor.svelte
index 887ad85f5f..f06350ff5f 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/ReportedTimeEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/ReportedTimeEditor.svelte
@@ -75,7 +75,7 @@
         {/if}
       </span>
     {:else}
-      <span class="dark-color"><Label label={placeholder} /></span>
+      <span class="content-dark-color"><Label label={placeholder} /></span>
     {/if}
     <div class="add-action">
       <ActionIcon icon={IconAdd} size={'small'} action={addTimeReport} />
@@ -89,7 +89,7 @@
     {/if}
   </span>
 {:else}
-  <span class="dark-color"><Label label={placeholder} /></span>
+  <span class="content-dark-color"><Label label={placeholder} /></span>
 {/if}
 
 <style lang="scss">
@@ -98,7 +98,8 @@
     align-items: center;
     padding: 0 0.875rem;
     width: 100%;
-    height: 2rem;
+    height: 2.25rem;
+    color: var(--theme-caption-color);
     border: 1px solid transparent;
     border-radius: 0.25rem;
     cursor: pointer;
@@ -108,9 +109,9 @@
     }
 
     &:hover {
-      color: var(--caption-color);
-      background-color: var(--body-color);
-      border-color: var(--divider-color);
+      background-color: var(--theme-bg-color);
+      border-color: var(--theme-divider-color);
+
       .add-action {
         visibility: visible;
       }
diff --git a/plugins/tracker-resources/src/components/issues/timereport/TimeReportDayDropdown.svelte b/plugins/tracker-resources/src/components/issues/timereport/TimeReportDayDropdown.svelte
index fccde324e3..e5e31264d1 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/TimeReportDayDropdown.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimeReportDayDropdown.svelte
@@ -15,13 +15,14 @@
 <script lang="ts">
   import { TimeReportDayType } from '@hcengineering/tracker'
   import { DropdownIntlItem, DropdownLabelsIntl } from '@hcengineering/ui'
-  import type { ButtonKind } from '@hcengineering/ui'
+  import type { ButtonKind, ButtonSize } from '@hcengineering/ui'
   import tracker from '../../../plugin'
   import TimeReportDayIcon from './TimeReportDayIcon.svelte'
 
   export let label = tracker.string.TimeReportDayTypeLabel
   export let selected: TimeReportDayType | undefined
   export let kind: ButtonKind = 'link-bordered'
+  export let size: ButtonSize = 'small'
 
   const workDaysDropdownItems: DropdownIntlItem[] = [
     {
@@ -37,6 +38,7 @@
 
 <DropdownLabelsIntl
   {kind}
+  {size}
   icon={TimeReportDayIcon}
   shouldUpdateUndefined={false}
   {label}
diff --git a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte
index 18bc9a70cd..20a02601aa 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte
@@ -132,18 +132,22 @@
     <UserBox
       _class={contact.class.Employee}
       label={contact.string.Employee}
-      kind={'no-border'}
+      kind={'secondary'}
+      size={'large'}
       bind:value={data.employee}
       showNavigate={false}
     />
     <TimeReportDayDropdown
-      kind={'no-border'}
+      kind={'secondary'}
+      size={'large'}
       bind:selected={selectedTimeReportDay}
       on:selected={({ detail }) => (data.date = getTimeReportDate(detail))}
     />
     <DatePresenter
       bind:value={data.date}
       editable
+      kind={'secondary'}
+      size={'large'}
       on:change={({ detail }) => (selectedTimeReportDay = getTimeReportDayType(detail))}
     />
   </svelte:fragment>
diff --git a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
index 3222db4a07..2fe550c95e 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
@@ -70,7 +70,7 @@
     {@const report = reports[item]}
     {@const currentProject = projects.get(toProjectId(report.space))}
     <div
-      class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2"
+      class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2 clear-mins"
       on:contextmenu|preventDefault={(ev) => showContextMenu(ev, report)}
       on:mouseenter={() => {
         listProvider.updateFocus(report)
@@ -92,10 +92,11 @@
           </span>
         {/if}
       </div>
-      <div class="flex-row-center clear-mins gap-2 self-end" class:p-text={twoRows}>
+      <div class="flex-row-center clear-mins gap-2 self-end flex-no-shrink" class:p-text={twoRows}>
         <FixedColumn key={'timespend_assignee'} justify={'left'}>
           <UserBox
             width={'100%'}
+            kind={'transparent'}
             label={tracker.string.Assignee}
             _class={contact.class.Employee}
             value={report.employee}
@@ -107,7 +108,7 @@
           <TimePresenter value={report.value} />
         </FixedColumn>
         <FixedColumn key={'timespend_date'} justify={'left'}>
-          <DatePresenter value={report.date} />
+          <DatePresenter value={report.date} kind={'transparent'} size={'small'} />
         </FixedColumn>
       </div>
     </div></svelte:fragment
diff --git a/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte b/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
index 6c43073366..6a687c611d 100644
--- a/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
+++ b/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
@@ -145,7 +145,7 @@
       <span
         class="{enlargedText ? 'text-base' : 'text-md'} fs-bold overflow-label {!value
           ? 'content-color'
-          : 'content-accent-color'} pointer-events-none"
+          : 'caption-color'} pointer-events-none"
       >
         <Label label={getEmbeddedLabel(sprintText)} />
       </span>
diff --git a/plugins/tracker-resources/src/components/templates/DraftIssueChildList.svelte b/plugins/tracker-resources/src/components/templates/DraftIssueChildList.svelte
index 74cf592523..e7dd2ead0c 100644
--- a/plugins/tracker-resources/src/components/templates/DraftIssueChildList.svelte
+++ b/plugins/tracker-resources/src/components/templates/DraftIssueChildList.svelte
@@ -241,13 +241,13 @@
       position: absolute;
       content: '';
       inset: 0;
-      border-top: 1px solid var(--caret-color);
+      border-top: 1px solid var(--theme-caret-color);
     }
     &.is-dragged-over-down::before {
       position: absolute;
       content: '';
       inset: 0;
-      border-bottom: 1px solid var(--caret-color);
+      border-bottom: 1px solid var(--theme-caret-color);
     }
   }
 </style>
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
index 36b20bfe6d..70d725940d 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
@@ -236,13 +236,13 @@
       position: absolute;
       content: '';
       inset: 0;
-      border-top: 1px solid var(--caret-color);
+      border-top: 1px solid var(--theme-caret-color);
     }
     &.is-dragged-over-down::before {
       position: absolute;
       content: '';
       inset: 0;
-      border-bottom: 1px solid var(--caret-color);
+      border-bottom: 1px solid var(--theme-caret-color);
     }
   }
 </style>
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplatePresenter.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplatePresenter.svelte
index 4bda414361..acc386e59b 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplatePresenter.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplatePresenter.svelte
@@ -60,10 +60,9 @@
     max-width: 15rem;
     font-size: 0.8125rem;
     color: var(--content-color);
-    cursor: pointer;
 
-    &.noPointer {
-      cursor: default;
+    &:not(.noPointer) {
+      cursor: pointer;
     }
 
     &.noUnderline {
diff --git a/plugins/tracker-resources/src/components/workflow/StatusPresenter.svelte b/plugins/tracker-resources/src/components/workflow/StatusPresenter.svelte
index f590e6acfb..9e7199b976 100644
--- a/plugins/tracker-resources/src/components/workflow/StatusPresenter.svelte
+++ b/plugins/tracker-resources/src/components/workflow/StatusPresenter.svelte
@@ -38,7 +38,7 @@
     <div class="flex-no-shrink ml-2">
       <IssueStatusIcon {value} size="small" />
     </div>
-    <span class="content-accent-color ml-2">{value.name}</span>
+    <span class="caption-color ml-2">{value.name}</span>
     {#if value.description}
       <span>&nbsp;·&nbsp;{value.description}</span>
     {/if}
diff --git a/plugins/tracker-resources/src/components/workflow/Statuses.svelte b/plugins/tracker-resources/src/components/workflow/Statuses.svelte
index 30a90c021f..0f38becba5 100644
--- a/plugins/tracker-resources/src/components/workflow/Statuses.svelte
+++ b/plugins/tracker-resources/src/components/workflow/Statuses.svelte
@@ -316,14 +316,14 @@
       position: absolute;
       content: '';
       inset: 0;
-      border-top: 1px solid var(--caret-color);
+      border-top: 1px solid var(--theme-caret-color);
     }
 
     &.is-dragged-over-down::before {
       position: absolute;
       content: '';
       inset: 0;
-      border-bottom: 1px solid var(--caret-color);
+      border-bottom: 1px solid var(--theme-caret-color);
     }
   }
 
diff --git a/plugins/view-resources/src/components/ActionsPopup.svelte b/plugins/view-resources/src/components/ActionsPopup.svelte
index 17f55a6440..792aaa1254 100644
--- a/plugins/view-resources/src/components/ActionsPopup.svelte
+++ b/plugins/view-resources/src/components/ActionsPopup.svelte
@@ -271,11 +271,11 @@
           </svelte:fragment>
           <svelte:fragment slot="item" let:item>
             {@const action = filteredActions[item]}
-            <div class="flex-row-center flex-between flex-grow ml-2 p-3 text-base">
-              <div class="mr-4">
+            <div class="flex-row-center flex-between flex-grow ml-2 p-3 text-base cursor-pointer">
+              <div class="mr-4 {selection === item ? 'caption-color' : 'content-dark-color'}">
                 <Icon icon={action.icon ?? IconArrowLeft} size={'small'} />
               </div>
-              <div class="flex-grow">
+              <div class="flex-grow {selection === item ? 'caption-color' : 'content-color'}">
                 <Label label={action.label} />
               </div>
               <div class="mr-2 text-md flex-row-center">
@@ -309,11 +309,11 @@
 
 <style lang="scss">
   .key-box {
-    background-color: var(--button-bg-color);
-    color: var(--caption-color);
-    min-width: 1.5rem;
     padding: 0 0.5rem;
-    border: 1px solid var(--button-border-color);
+    min-width: 1.5rem;
+    color: var(--theme-caption-color);
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-divider-color);
     border-radius: 0.25rem;
   }
   .key-box + .key-box {
@@ -321,15 +321,15 @@
   }
   .item-box {
     display: inline-block;
-    background-color: var(--divider-color);
-    color: var(--caption-color);
-    border-radius: 0.5rem;
-    padding: 0.5rem;
+    padding: 0.25rem 0.5rem;
+    color: var(--theme-caption-color);
+    background-color: var(--theme-divider-color);
+    border-radius: 0.25rem;
   }
   .category-box {
     display: inline-block;
-    background-color: var(--divider-color);
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
+    background-color: var(--theme-comp-header-color);
     padding: 0.5rem;
   }
 </style>
diff --git a/plugins/view-resources/src/components/ClassAttributeBar.svelte b/plugins/view-resources/src/components/ClassAttributeBar.svelte
index 27dbd55ea6..6753a3aebc 100644
--- a/plugins/view-resources/src/components/ClassAttributeBar.svelte
+++ b/plugins/view-resources/src/components/ClassAttributeBar.svelte
@@ -67,7 +67,7 @@
         <Label {label} />
       </span>
       <div class="icon-arrow">
-        <svg fill="var(--dark-color)" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+        <svg fill="var(--theme-dark-color)" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
           <path d="M0,0L6,3L0,6Z" />
         </svg>
       </div>
diff --git a/plugins/view-resources/src/components/MarkupEditor.svelte b/plugins/view-resources/src/components/MarkupEditor.svelte
index f3acb99e20..0b99121f39 100644
--- a/plugins/view-resources/src/components/MarkupEditor.svelte
+++ b/plugins/view-resources/src/components/MarkupEditor.svelte
@@ -53,11 +53,11 @@
     }}
   >
     <svelte:fragment slot="content">
-      <div class="lines-limit-4" style:text-align={'left'} class:dark-color={readonly}>
+      <div class="lines-limit-4" style:text-align={'left'} class:content-dark-color={readonly}>
         {#if value}
           <MessageViewer message={value} />
         {:else}
-          <span class="dark-color"><Label label={placeholder} /></span>
+          <span class="content-dark-color"><Label label={placeholder} /></span>
         {/if}
       </div>
     </svelte:fragment>
@@ -66,6 +66,6 @@
   {#if value}
     <span class="overflow-label">{value}</span>
   {:else}
-    <span class="dark-color"><Label label={placeholder} /></span>
+    <span class="content-dark-color"><Label label={placeholder} /></span>
   {/if}
 {/if}
diff --git a/plugins/view-resources/src/components/Move.svelte b/plugins/view-resources/src/components/Move.svelte
index fa48aeee7e..5b1160d450 100644
--- a/plugins/view-resources/src/components/Move.svelte
+++ b/plugins/view-resources/src/components/Move.svelte
@@ -104,7 +104,7 @@
     <Label label={view.string.MoveClass} params={{ class: label }} />
   </div>
   <StatusControl {status} />
-  <div class="content-accent-color mt-4 mb-4">
+  <div class="caption-color mt-4 mb-4">
     <Label label={view.string.SelectToMove} params={{ class: label, classLabel }} />
   </div>
   <div class="spaceSelect">
diff --git a/plugins/view-resources/src/components/NumberEditor.svelte b/plugins/view-resources/src/components/NumberEditor.svelte
index 2f403e58ca..6276fecd4c 100644
--- a/plugins/view-resources/src/components/NumberEditor.svelte
+++ b/plugins/view-resources/src/components/NumberEditor.svelte
@@ -63,7 +63,7 @@
       {#if value !== undefined}
         <span class="overflow-label">{value}</span>
       {:else}
-        <span class="dark-color"><Label label={placeholder} /></span>
+        <span class="content-dark-color"><Label label={placeholder} /></span>
       {/if}
     </svelte:fragment>
   </Button>
@@ -71,7 +71,7 @@
   {#if value !== undefined}
     <span class="overflow-label">{value}</span>
   {:else}
-    <span class="dark-color"><Label label={placeholder} /></span>
+    <span class="content-dark-color"><Label label={placeholder} /></span>
   {/if}
 {:else}
   <EditBox {placeholder} bind:value format={'number'} {focus} on:change={_onchange} />
diff --git a/plugins/view-resources/src/components/ObjectBox.svelte b/plugins/view-resources/src/components/ObjectBox.svelte
index f8c199e7ae..7ce57e27a8 100644
--- a/plugins/view-resources/src/components/ObjectBox.svelte
+++ b/plugins/view-resources/src/components/ObjectBox.svelte
@@ -25,7 +25,6 @@
     ButtonSize,
     getEventPositionElement,
     getFocusManager,
-    Icon,
     IconOpen,
     Label,
     LabelAndProps,
@@ -115,11 +114,23 @@
 
 <div {id} bind:this={container} class="min-w-0" class:w-full={width === '100%'} class:h-full={$$slots.content}>
   {#if $$slots.content}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div class="w-full h-full flex-streatch" on:click={_click}>
       <slot name="content" />
     </div>
   {:else}
-    <Button {focusIndex} width={width ?? 'min-content'} {size} {kind} {justify} {showTooltip} on:click={_click}>
+    <Button
+      {focusIndex}
+      width={width ?? 'min-content'}
+      {icon}
+      iconProps={{ size: kind === 'link' || kind === 'secondary' ? 'small' : size }}
+      {size}
+      {kind}
+      {justify}
+      {showTooltip}
+      on:click={_click}
+      notSelected={!selected}
+    >
       <span slot="content" class="overflow-label flex-grow" class:flex-between={showNavigate && selected}>
         <div
           class="disabled flex-row-center"
@@ -132,17 +143,10 @@
               objectId={selected._id}
               _class={selected._class}
               value={selected}
-              props={{ ...docProps, disabled: true, inline: true, size: 'x-small' }}
+              props={{ ...docProps, disabled: true, noUnderline: true, size: 'x-small' }}
             />
           {:else}
-            <div class="flex-row-center">
-              {#if icon}
-                <Icon {icon} size={kind === 'link' || kind === 'secondary' ? 'small' : size} />
-              {/if}
-              <div class="ml-2">
-                <Label {label} />
-              </div>
-            </div>
+            <Label {label} />
           {/if}
         </div>
         {#if selected && showNavigate}
diff --git a/plugins/view-resources/src/components/ObjectBoxPopup.svelte b/plugins/view-resources/src/components/ObjectBoxPopup.svelte
index bdadcd5d55..34af5bc589 100644
--- a/plugins/view-resources/src/components/ObjectBoxPopup.svelte
+++ b/plugins/view-resources/src/components/ObjectBoxPopup.svelte
@@ -61,7 +61,7 @@
         objectId={doc._id}
         _class={doc._class}
         value={doc}
-        props={{ ...docProps, disabled: true, inline: true, size: 'x-small' }}
+        props={{ ...docProps, disabled: true, noUnderline: true, size: 'x-small' }}
       />
     </div>
   </svelte:fragment>
diff --git a/plugins/view-resources/src/components/StringEditor.svelte b/plugins/view-resources/src/components/StringEditor.svelte
index cc5a19e162..c0ce18722c 100644
--- a/plugins/view-resources/src/components/StringEditor.svelte
+++ b/plugins/view-resources/src/components/StringEditor.svelte
@@ -57,9 +57,9 @@
   >
     <svelte:fragment slot="content">
       {#if value}
-        <span class="overflow-label">{value}</span>
+        <span class="overflow-label pointer-events-none">{value}</span>
       {:else}
-        <span class="dark-color"><Label label={placeholder} /></span>
+        <span class="content-dark-color pointer-events-none"><Label label={placeholder} /></span>
       {/if}
     </svelte:fragment>
   </Button>
@@ -67,7 +67,7 @@
   {#if value}
     <span class="overflow-label">{value}</span>
   {:else}
-    <span class="dark-color"><Label label={placeholder} /></span>
+    <span class="content-dark-color"><Label label={placeholder} /></span>
   {/if}
 {:else}
   <EditBox {placeholder} bind:value {focus} on:change={_onchange} />
diff --git a/plugins/view-resources/src/components/filter/DateFilter.svelte b/plugins/view-resources/src/components/filter/DateFilter.svelte
index 19652e3639..13ed6e6927 100644
--- a/plugins/view-resources/src/components/filter/DateFilter.svelte
+++ b/plugins/view-resources/src/components/filter/DateFilter.svelte
@@ -126,7 +126,7 @@
                     <Label label={ui.string.NotSelected} />
                   {/if}
                 </div>
-                <div class="dark-color ml-2">
+                <div class="content-dark-color ml-2">
                   {values.get(value)}
                 </div>
               </div>
diff --git a/plugins/view-resources/src/components/filter/ObjectFilter.svelte b/plugins/view-resources/src/components/filter/ObjectFilter.svelte
index f847b2200d..9434ea0bc4 100644
--- a/plugins/view-resources/src/components/filter/ObjectFilter.svelte
+++ b/plugins/view-resources/src/components/filter/ObjectFilter.svelte
@@ -199,7 +199,7 @@
                     <Label label={ui.string.NotSelected} />
                   {/if}
                 </div>
-                <div class="dark-color ml-2">
+                <div class="content-dark-color ml-2">
                   {#if isStatus && value}
                     {getStatusCount(value)}
                   {:else}
diff --git a/plugins/view-resources/src/components/filter/ValueFilter.svelte b/plugins/view-resources/src/components/filter/ValueFilter.svelte
index d9a07ae761..a7133a9aab 100644
--- a/plugins/view-resources/src/components/filter/ValueFilter.svelte
+++ b/plugins/view-resources/src/components/filter/ValueFilter.svelte
@@ -164,7 +164,7 @@
                     <Label label={ui.string.NotSelected} />
                   {/if}
                 </div>
-                <div class="dark-color ml-2">
+                <div class="content-dark-color ml-2">
                   {values.get(value)}
                 </div>
               </div>
diff --git a/plugins/view-resources/src/components/list/SortableList.svelte b/plugins/view-resources/src/components/list/SortableList.svelte
index 0e15e852d8..f1e8ca04bf 100644
--- a/plugins/view-resources/src/components/list/SortableList.svelte
+++ b/plugins/view-resources/src/components/list/SortableList.svelte
@@ -174,7 +174,7 @@
       {/if}
       {#if label}
         <div class="title-wrapper">
-          <span class="wrapped-title text-base content-accent-color">
+          <span class="wrapped-title text-base caption-color">
             <Label {label} />
           </span>
         </div>
@@ -243,16 +243,16 @@
     }
 
     &.column.is-dragged-over-before::before {
-      border-top: 1px solid var(--caret-color);
+      border-top: 1px solid var(--theme-caret-color);
     }
     &.column.is-dragged-over-after::before {
-      border-bottom: 1px solid var(--caret-color);
+      border-bottom: 1px solid var(--theme-caret-color);
     }
     &.row.is-dragged-over-before::before {
-      border-left: 1px solid var(--caret-color);
+      border-left: 1px solid var(--theme-caret-color);
     }
     &.row.is-dragged-over-after::before {
-      border-right: 1px solid var(--caret-color);
+      border-right: 1px solid var(--theme-caret-color);
     }
   }
 </style>
diff --git a/plugins/workbench-resources/src/components/HelpAndSupport.svelte b/plugins/workbench-resources/src/components/HelpAndSupport.svelte
index 3d4a779656..dc328cee52 100644
--- a/plugins/workbench-resources/src/components/HelpAndSupport.svelte
+++ b/plugins/workbench-resources/src/components/HelpAndSupport.svelte
@@ -22,6 +22,7 @@
   let shortcuts = false
   let actions: Action[] = []
   let categories: ActionCategory[] = []
+  let selection: number = 0
 
   const client = getClient()
 
@@ -136,7 +137,7 @@
   {:else}
     <!-- Keyboard shortcuts -->
     <Scroller padding={'0 .5rem'} fade={topSP}>
-      <ListView count={actions.length} noScroll>
+      <ListView count={actions.length} noScroll addClass={'rounded'} bind:selection>
         <svelte:fragment slot="category" let:item>
           {@const action = actions[item]}
           {#if item === 0 || (item > 0 && actions[item - 1].category !== action.category)}
@@ -153,10 +154,10 @@
         <svelte:fragment slot="item" let:item>
           {@const action = actions[item]}
           <div class="flex-row-center flex-between flex-grow ml-2 p-3 text-base clear-mins">
-            <div class="mr-4">
+            <div class="mr-4 {selection === item ? 'caption-color' : 'dark-color'}">
               <Icon icon={action.icon ?? IconArrowLeft} size={'small'} />
             </div>
-            <div class="flex-grow">
+            <div class="flex-grow {selection === item ? 'caption-color' : 'content-color'}">
               <Label label={action.label} />
             </div>
             <div class="mr-2 text-md flex-row-center">
@@ -198,9 +199,9 @@
 
 <style lang="scss">
   .card {
-    border: 1px solid var(--button-border-color);
+    margin: 1rem 1rem 0 1rem;
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.75rem;
-    margin: 16px 1rem 0 1rem;
   }
   .container {
     display: flex;
@@ -216,19 +217,18 @@
     align-self: center;
   }
   .footer {
-    align-items: flex-end;
     display: flex;
-    flex: 1;
     justify-content: flex-end;
-    margin: 0 16px;
-    padding-top: 10px;
+    align-items: flex-end;
+    margin: 0 1rem;
+    padding-top: 0.625rem;
   }
   .key-box {
-    background-color: var(--button-bg-color);
-    color: var(--caption-color);
-    min-width: 1.5rem;
     padding: 0 0.5rem;
-    border: 1px solid var(--button-border-color);
+    min-width: 1.5rem;
+    color: var(--theme-caption-color);
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-divider-color);
     border-radius: 0.25rem;
   }
   .key-box + .key-box {
@@ -239,8 +239,8 @@
     padding: 0.5rem 1rem;
     top: 0;
     min-height: 2.5rem;
-    background-color: var(--divider-color);
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
+    background-color: var(--theme-comp-header-color);
     border-radius: 0.25rem;
   }
 </style>