diff --git a/packages/kanban/src/components/Kanban.svelte b/packages/kanban/src/components/Kanban.svelte
index 09a35e8688..3741b8a67e 100644
--- a/packages/kanban/src/components/Kanban.svelte
+++ b/packages/kanban/src/components/Kanban.svelte
@@ -390,7 +390,7 @@
         padding: 0 0.5rem 0 1rem;
         height: 100%;
         font-weight: 500;
-        color: var(--theme-caption-color);
+        color: var(--caption-color);
       }
     }
   }
diff --git a/packages/kanban/src/components/KanbanCardEmpty.svelte b/packages/kanban/src/components/KanbanCardEmpty.svelte
index 0223aae6a4..2d251133fb 100644
--- a/packages/kanban/src/components/KanbanCardEmpty.svelte
+++ b/packages/kanban/src/components/KanbanCardEmpty.svelte
@@ -24,14 +24,14 @@
     justify-content: center;
     align-items: center;
     padding: 0.75rem 1.5rem;
-    color: var(--theme-content-dark-color);
-    background-color: var(--theme-button-bg-hovered);
-    border: 1px dotted var(--theme-bg-accent-color);
+    color: var(--dark-color);
+    background-color: var(--board-card-bg-color);
+    border: 1px dotted var(--divider-color);
     border-radius: 0.75rem;
     cursor: pointer;
 
     &:hover {
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
   }
 </style>
diff --git a/packages/presentation/src/components/Avatar.svelte b/packages/presentation/src/components/Avatar.svelte
index 295eaac241..21764c15f5 100644
--- a/packages/presentation/src/components/Avatar.svelte
+++ b/packages/presentation/src/components/Avatar.svelte
@@ -104,7 +104,7 @@
 
     img {
       object-fit: cover;
-      border: 2px solid var(--theme-avatar-border);
+      border: 2px solid var(--avatar-border-color);
     }
     &.no-img {
       border-color: transparent;
@@ -148,7 +148,7 @@
   }
   .ava-mask {
     position: absolute;
-    border: 2px solid var(--theme-avatar-border);
+    border: 2px solid var(--avatar-border-color);
     border-radius: 50%;
   }
 
diff --git a/packages/presentation/src/components/EditAvatarPopup.svelte b/packages/presentation/src/components/EditAvatarPopup.svelte
index 68257b9a23..ef7c5ea79f 100644
--- a/packages/presentation/src/components/EditAvatarPopup.svelte
+++ b/packages/presentation/src/components/EditAvatarPopup.svelte
@@ -53,6 +53,7 @@
 </script>
 
 <input style="display: none;" type="file" bind:this={inputRef} on:change={onSelect} accept={targetMimes.join(',')} />
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="overlay"
   on:click={() => {
@@ -86,8 +87,8 @@
     bottom: 0;
     right: 0;
 
-    background: var(--theme-menu-color);
-    opacity: 0.7;
+    background: var(--card-overlay-color);
+    touch-action: none;
   }
 
   .root {
@@ -104,7 +105,7 @@
 
     transform: translate(-50%, -50%);
 
-    background: var(--theme-bg-color);
+    background: var(--popup-bg-color);
     border-radius: 1.25rem;
     box-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
 
diff --git a/packages/presentation/src/components/Members.svelte b/packages/presentation/src/components/Members.svelte
index c81700e6a5..d21dd85820 100644
--- a/packages/presentation/src/components/Members.svelte
+++ b/packages/presentation/src/components/Members.svelte
@@ -155,11 +155,11 @@
 
 <style lang="scss">
   .notIn {
-    background-color: var(--theme-bg-accent-color);
+    background-color: var(--body-accent);
   }
 
   .divider {
-    background-color: var(--theme-dialog-divider);
+    background-color: var(--divider-color);
     height: 1px;
   }
 
diff --git a/packages/presentation/src/components/MessageBox.svelte b/packages/presentation/src/components/MessageBox.svelte
index 76fe8f1a32..6e8a88f745 100644
--- a/packages/presentation/src/components/MessageBox.svelte
+++ b/packages/presentation/src/components/MessageBox.svelte
@@ -71,14 +71,14 @@
     padding: 2rem 1.75rem 1.75rem;
     width: 30rem;
     max-width: 40rem;
-    background: var(--theme-msgbox-bg);
+    background: var(--popup-bg-color);
     border-radius: 1.25rem;
     user-select: none;
-    box-shadow: var(--theme-msgbox-shadow);
+    box-shadow: var(--popup-shadow);
 
     .message {
       margin-bottom: 1.75rem;
-      color: var(--theme-content-accent-color);
+      color: var(--accent-color);
     }
     .footer {
       flex-shrink: 0;
diff --git a/packages/presentation/src/components/PDFViewer.svelte b/packages/presentation/src/components/PDFViewer.svelte
index fe64abf567..7ef2d48340 100644
--- a/packages/presentation/src/components/PDFViewer.svelte
+++ b/packages/presentation/src/components/PDFViewer.svelte
@@ -145,7 +145,7 @@
     overflow: auto;
     border-style: none;
     border-radius: 0.5rem;
-    background-color: var(--theme-menu-color);
+    background-color: var(--board-bg-color);
   }
   .img-horizontal-fit,
   .img-vertical-fit,
diff --git a/packages/presentation/src/components/icons/Avatar.svelte b/packages/presentation/src/components/icons/Avatar.svelte
index 41a1cee14e..48ec07c1f2 100644
--- a/packages/presentation/src/components/icons/Avatar.svelte
+++ b/packages/presentation/src/components/icons/Avatar.svelte
@@ -18,7 +18,7 @@
 
   export let size: IconSize
 
-  export let fill: string = 'var(--theme-caption-color)'
+  export let fill: string = 'var(--caption-color)'
 </script>
 
 <svg class="svg-avatar {size}" {fill} viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
diff --git a/packages/text-editor/src/components/CollaborationDiffViewer.svelte b/packages/text-editor/src/components/CollaborationDiffViewer.svelte
index 501acaf1d9..57476c88e1 100644
--- a/packages/text-editor/src/components/CollaborationDiffViewer.svelte
+++ b/packages/text-editor/src/components/CollaborationDiffViewer.svelte
@@ -152,10 +152,13 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background-color: var(--theme-bg-accent-hover);
+      background-color: var(--scrollbar-bar-color);
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: var(--scrollbar-bar-hover);
     }
     &::-webkit-scrollbar-corner {
-      background-color: var(--theme-bg-accent-hover);
+      background-color: var(--scrollbar-bar-color);
     }
     &::-webkit-scrollbar-track {
       margin: 0;
diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index b540ca96f6..30b7c37555 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -641,10 +641,13 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background-color: var(--theme-bg-accent-hover);
+      background-color: var(--scrollbar-bar-color);
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: var(--scrollbar-bar-hover);
     }
     &::-webkit-scrollbar-corner {
-      background-color: var(--theme-bg-accent-hover);
+      background-color: var(--scrollbar-bar-color);
     }
     &::-webkit-scrollbar-track {
       margin: 0;
diff --git a/packages/text-editor/src/components/ReferenceInput.svelte b/packages/text-editor/src/components/ReferenceInput.svelte
index c277897130..a16c560424 100644
--- a/packages/text-editor/src/components/ReferenceInput.svelte
+++ b/packages/text-editor/src/components/ReferenceInput.svelte
@@ -408,7 +408,7 @@
         align-items: center;
         width: 100%;
         height: 100%;
-        color: var(--theme-content-color);
+        color: var(--content-color);
         background-color: transparent;
         border: none;
         outline: none;
@@ -458,11 +458,11 @@
         .icon {
           width: 1.25rem;
           height: 1.25rem;
-          color: var(--theme-content-dark-color);
+          color: var(--dark-color);
           cursor: pointer;
 
           &:hover {
-            color: var(--theme-caption-color);
+            color: var(--caption-color);
           }
         }
         &:focus {
@@ -470,7 +470,7 @@
           box-shadow: 0 0 0 3px var(--primary-button-outline);
 
           & > .icon {
-            color: var(--theme-caption-color);
+            color: var(--caption-color);
           }
         }
 
diff --git a/packages/text-editor/src/components/StyleButton.svelte b/packages/text-editor/src/components/StyleButton.svelte
index 7dfc3c42b9..de2578427b 100644
--- a/packages/text-editor/src/components/StyleButton.svelte
+++ b/packages/text-editor/src/components/StyleButton.svelte
@@ -49,7 +49,7 @@
       color: var(--accent-color);
     }
     &:focus {
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
       border: 1px solid var(--primary-button-focused-border);
       box-shadow: 0 0 0 3px var(--primary-button-outline);
     }
diff --git a/packages/text-editor/src/components/StyledTextBox.svelte b/packages/text-editor/src/components/StyledTextBox.svelte
index f1ac85fe9e..5ee491b894 100644
--- a/packages/text-editor/src/components/StyledTextBox.svelte
+++ b/packages/text-editor/src/components/StyledTextBox.svelte
@@ -195,7 +195,7 @@
     .label {
       padding-bottom: 0.25rem;
       font-size: 0.75rem;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
       opacity: 0.3;
       transition: top 200ms;
       pointer-events: none;
diff --git a/packages/text-editor/src/components/TextEditor.svelte b/packages/text-editor/src/components/TextEditor.svelte
index d5bb16e1ee..758788f8fc 100644
--- a/packages/text-editor/src/components/TextEditor.svelte
+++ b/packages/text-editor/src/components/TextEditor.svelte
@@ -266,10 +266,13 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background-color: var(--theme-bg-accent-hover);
+      background-color: var(--scrollbar-bar-color);
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: var(--scrollbar-bar-hover);
     }
     &::-webkit-scrollbar-corner {
-      background-color: var(--theme-bg-accent-hover);
+      background-color: var(--scrollbar-bar-color);
     }
     &::-webkit-scrollbar-track {
       margin: 0;
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 7511dd04c4..7ae264ccbd 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -83,6 +83,7 @@
 
   --divider-color: #303236;
   --menu-bg-select: #2d2f36;
+  --menu-bg-select-trans: #2d2f3665;
   --menu-icon-hover: #f3f3f8;
   --header-bg-color: linear-gradient(0deg, var(--accent-bg-color), #2d2e31);
   --popup-bg-color: linear-gradient(136.61deg, var(--accent-bg-color) 13.72%, #2d2e31 74.3%);
@@ -94,6 +95,7 @@
   --card-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
   --card-overlay-color: rgba(28, 29, 31, .5);
   --avatar-bg-color: #4f5358;
+  --avatar-border-color: rgba(255, 255, 255, .1);
   --tooltip-bg-color: #1f2023f0;
 
   --button-bg-color: #303236;
@@ -124,6 +126,7 @@
 
   --trans-content-05: rgba(138, 143, 152, .05);
   --trans-content-10: rgba(138, 143, 152, .1);
+  --trans-content-20: rgba(138, 143, 152, .2);
 
   --theme-bg-color: #18181e;
   --theme-bg-selection: #282830;
@@ -132,7 +135,6 @@
   --theme-menu-color: #111117;
   --theme-menu-selection: #1D1D23;
   --theme-menu-divider: rgba(255, 255, 255, .05);
-  --theme-scroll-bar: #2C2C34;
   // --theme-dialog-bg: rgba(31, 31, 37, .8);
   --theme-dialog-accent: rgba(255, 255, 255, .03);
   --theme-dialog-divider: rgba(255, 255, 255, .1);
@@ -146,7 +148,6 @@
   --theme-card-bg-dark: rgba(222, 222, 240, .1);
   --theme-card-divider: rgba(255, 255, 255, .1);
   --theme-card-shadow: 0px 15px 60px rgba(24, 25, 28, .8);
-  --theme-avatar-border: rgba(255, 255, 255, .1);
   --theme-msgbox-bg: #26262B;
   --theme-msgbox-shadow: 0px 20px 70px rgba(0, 0, 0, .4);
   --theme-zone-bg: rgba(255, 255, 255, .05);
@@ -239,6 +240,7 @@
 
   --divider-color: #e0e0e0;
   --menu-bg-select: #f0f3f9;
+  --menu-bg-select-trans: #f0f3f965;
   --menu-icon-hover: #282a30;
   --header-bg-color: linear-gradient(0deg, #eee, #f6f6f6);
   --popup-bg-color: linear-gradient(136.61deg, #fff 13.72%, #f8f8f8 74.3%);
@@ -250,6 +252,7 @@
   --card-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
   --card-overlay-color: rgba(144, 149, 157, .4);
   --avatar-bg-color: #e0e0e0;  // HZ
+  --avatar-border-color: transparent;
   --tooltip-bg-color: #fffffff0;
 
   --button-bg-color: #fff;
@@ -280,13 +283,13 @@
 
   --trans-content-05: rgba(60, 65, 73, .05);
   --trans-content-10: rgba(60, 65, 73, .1);
+  --trans-content-20: rgba(60, 65, 73, .2);
 
   --theme-bg-color: #FFFFFF;
   --theme-bg-selection: #F1F1F4;
   --theme-menu-color: #E7E7E7;
   --theme-menu-selection: #DBDBDB;
   --theme-menu-divider: rgba(0, 0, 0, .08);
-  --theme-scroll-bar: #CBCBCB;
   // --theme-dialog-bg: rgba(255, 255, 255, .4);
   --theme-dialog-accent: rgba(31, 33, 43, .03);
   --theme-dialog-divider: rgba(31, 33, 43, .06);
@@ -300,7 +303,6 @@
   --theme-card-bg-dark: rgba(255, 255, 255, .3);
   --theme-card-divider: rgba(0, 0, 0, .1);
   --theme-card-shadow: 0px 15px 60px rgba(24, 25, 28, .2);
-  --theme-avatar-border: transparent;
   --theme-msgbox-bg: #F2F2F2;
   --theme-msgbox-shadow: 0px 20px 70px rgba(0, 0, 0, .2);
   --theme-zone-bg: rgba(0, 0, 0, .05);
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 9c8cf5bba1..29860c0005 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -18,17 +18,17 @@ a {
   font: inherit;
   font-weight: 500;
   text-decoration: none;
-  color: var(--theme-content-accent-color);
+  color: var(--accent-color);
   outline: none;
   &:hover {
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
     text-decoration: underline;
   }
   &:active {
-    color: var(--theme-content-accent-color);
+    color: var(--accent-color);
     text-decoration: underline;
   }
-  &:visited { color: var(--theme-caption-color); }
+  &:visited { color: var(--accent-color); }
 
   &.stealth,
   &.no-underline {
@@ -76,7 +76,7 @@ textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
-  -webkit-text-fill-color: var(--theme-caption-color);
+  -webkit-text-fill-color: var(--caption-color);
   transition: background-color 5000s ease-in-out 0s;
   background: transparent;
 }
@@ -320,6 +320,7 @@ input.search {
 .buttons-group {
   display: grid;
   grid-auto-flow: column;
+  grid-auto-columns: max-content;
   justify-content: flex-start;
   align-items: center;
   gap: .75rem;
@@ -424,6 +425,7 @@ input.search {
 .mb-3 { margin-bottom: .75rem; }
 .mb-4 { margin-bottom: 1rem; }
 .mb-6 { margin-bottom: 1.5rem; }
+.mb-8 { margin-bottom: 2rem; }
 .mb-9 { margin-bottom: 2.25rem; }
 .mb-10 { margin-bottom: 2.5rem; }
 .mx-1 { margin: 0 .25rem; }
@@ -627,19 +629,19 @@ input.search {
 }
 
 .hover-trans {
-  color: var(--theme-content-trans-color);
+  color: var(--dark-color);
   cursor: pointer;
-  &:hover { color: var(--theme-caption-color); }
-  &:active { color: var(--theme-content-accent-color); }
+  &:hover { color: var(--caption-color); }
+  &:active { color: var(--accent-color); }
 }
 
 /* Link */
 a.no-line {
   text-decoration: none;
-  color: var(--theme-caption-color);
-  &:hover { color: var(--theme-caption-color); }
-  &:active { color: var(--theme-content-accent-color); }
-  &:visited { color: var(--theme-caption-color); }
+  color: var(--accent-color);
+  &:hover { color: var(--caption-color); }
+  &:active { color: var(--accent-color); }
+  &:visited { color: var(--accent-color); }
 }
 .cursor-pointer { cursor: pointer; }
 .cursor-default { cursor: default; }
@@ -723,27 +725,26 @@ a.no-line {
 }
 
 .focused-button {
-  background-color: var(--theme-button-bg-focused);
+  background-color: var(--button-bg-color);
   border: 1px solid transparent;
 
-  & > .icon { color: var(--theme-content-trans-color); }
+  & > .icon { color: var(--accent-color); }
   &.selected {
-    background-color: var(--theme-button-bg-focused);
-    border: 1px solid var(--theme-bg-accent-color);
+    background-color: var(--button-bg-hover);
+    border: 1px solid var(--button-border-hover);
   }
   &:hover {
-    background-color: var(--theme-button-bg-pressed);
-    border: 1px solid var(--theme-bg-accent-color);
-    & > .icon { color: var(--theme-caption-color); }
+    background-color: var(--button-bg-hover);
+    border: 1px solid var(--button-border-hover);
+    & > .icon { color: var(--caption-color); }
   }
   &:focus {
     border: 1px solid var(--primary-button-focused-border);
     box-shadow: 0 0 0 3px var(--primary-button-outline);
-    & > .icon { color: var(--theme-caption-color); }
+    & > .icon { color: var(--caption-color); }
   }
 
-  &.bordered,
-  &.bordered:hover { border-color: var(--theme-button-border-pressed); }
+  &.bordered { border-color: var(--button-border-color); }
 }
 
 .overflow-x-auto { overflow-x: auto; }
@@ -755,8 +756,8 @@ a.no-line {
 .scroll-m-10::-webkit-scrollbar-track { margin: 2.5rem; }
 
 .scroll-bg-accent-color::-webkit-scrollbar-thumb {
-  background-color: var(--theme-bg-accent-color);
-  &:hover { background-color: var(--theme-menu-divider); }
+  background-color: var(--scrollbar-bar-color);
+  &:hover { background-color: var(--scrollbar-bar-hover); }
 }
 .scroll-divider-color::-webkit-scrollbar-thumb {
   background-color: var(--divider-color);
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 697a8e9086..1fa19adecf 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -127,7 +127,7 @@
     }
     &.bold {
       font-weight: 600;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
   }
   .an-element__icon-arrow {
@@ -216,8 +216,8 @@
 
   &::-webkit-scrollbar-track { margin: 0; }
   &::-webkit-scrollbar-thumb {
-    background-color: var(--theme-bg-accent-color);
-    &:hover { background-color: var(--theme-menu-divider); }
+    background-color: var(--scrollbar-bar-color);
+    &:hover { background-color: var(--scrollbar-bar-hover); }
   }
 }
 .antiNav-box {
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index d028df7c1c..67cdee18d8 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -20,7 +20,7 @@
   height: 100%;
 
   .ac-header {
-    padding: 0.5rem 1.5rem 0.5rem 2.25rem;
+    padding: 0.5rem 1.5rem 0.5rem 2.5rem;
     // height: 3.5rem;
     // min-height: 2.5rem;
 
@@ -112,20 +112,20 @@
     align-items: center;
     width: 2rem;
     height: 2rem;
-    color: var(--theme-content-trans-color);
+    color: var(--dark-color);
     background-color: transparent;
     border-radius: .25rem;
     cursor: pointer;
 
     &:hover {
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
     &.selected {
-      color: var(--theme-content-accent-color);
+      color: var(--accent-color);
       background-color: var(--menu-bg-select);
       cursor: default;
       &:hover {
-        color: var(--theme-caption-color);
+        color: var(--caption-color);
       }
     }
   }
@@ -138,7 +138,7 @@
     margin: 0 2.5rem;
     min-height: 0;
     height: 3.5rem;
-    border-bottom: 1px solid var(--theme-zone-bg);
+    border-bottom: 1px solid var(--divider-color);
 
     &::-webkit-scrollbar:horizontal {
       height: 0.25rem;
@@ -147,10 +147,10 @@
       margin: 0;
     }
     &::-webkit-scrollbar-thumb {
-      background-color: var(--theme-menu-divider);
+      background-color: var(--scrollbar-bar-color);
       border-radius: 0.25rem;
       &:hover {
-        background-color: var(--theme-card-divider);
+        background-color: var(--scrollbar-bar-hover);
       }
     }
 
@@ -171,7 +171,7 @@
     margin: 0 2.5rem;
     min-width: 0;
     height: 4.5rem;
-    border-bottom: 1px solid var(--theme-menu-divider);
+    border-bottom: 1px solid var(--divider-color);
 
     &__tab {
       display: flex;
@@ -179,14 +179,14 @@
       min-width: 0;
       height: 4.5rem;
       font-weight: 500;
-      color: var(--theme-content-trans-color);
+      color: var(--dark-color);
       cursor: pointer;
       user-select: none;
 
       &.selected {
         border-top: .125rem solid transparent;
-        border-bottom: .125rem solid var(--theme-caption-color);
-        color: var(--theme-caption-color);
+        border-bottom: .125rem solid var(--caption-color);
+        color: var(--caption-color);
         cursor: default;
       }
     }
@@ -226,10 +226,10 @@
       flex-direction: column;
       overflow-y: auto;
       padding: 0.75rem 0.5rem;
-      min-width: 15rem;
-      max-width: 25rem;
+      min-width: 17rem;
+      max-width: 30rem;
       height: 100%;
-      border-right: 1px solid var(--theme-menu-divider);
+      border-right: 1px solid var(--divider-color);
 
       &.max {
         flex-grow: 1;
@@ -249,11 +249,11 @@
         cursor: pointer;
 
         &:hover {
-          background-color: var(--theme-bg-accent-color);
+          background-color: var(--button-bg-color);
         }
         &.selected {
-          background-color: var(--theme-button-bg-enabled);
-          border-color: var(--theme-bg-accent-color);
+          background-color: var(--button-bg-hover);
+          border-color: var(--button-border-color);
           cursor: auto;
         }
       }
@@ -288,7 +288,7 @@
 
   &::-webkit-scrollbar:horizontal { height: 0; }
   &::-webkit-scrollbar-track { margin: 0.25rem; }
-  &::-webkit-scrollbar-thumb { background-color: var(--theme-bg-accent-color); }
+  &::-webkit-scrollbar-thumb { background-color: var(--scrollbar-bar-color); }
 
   &.mask-none { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 1); }  
   &.mask-left { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem); }
@@ -487,12 +487,12 @@
 // Basic component view.
 .antiComponentBox {
   padding: 0.5rem;
-  background-color: var(--theme-bg-accent-color);
-  border: 1px solid var(--theme-button-border-enabled);
+  background-color: var(--board-card-bg-color);
+  border: 1px solid var(--divider-color);
   border-radius: .75rem;
 
   &.antiComponentBoxFocused {
-    background-color: var(--theme-button-bg-focused);
+    background-color: var(--board-card-bg-hover);
   }
 }
 
@@ -543,26 +543,26 @@
     width: 2.25rem;
     height: 2.25rem;
     background-color: transparent;
-    border: 1px solid var(--theme-card-divider);
+    border: 1px solid var(--divider-color);
 
     &.circle { border-radius: 50%; }
     &.round-2 { border-radius: .5rem; }
   
-    & > .icon { color: var(--theme-content-trans-color); }
+    & > .icon { color: var(--dark-color); }
     &.selected {
-      background-color: var(--theme-button-bg-focused);
-      border: none;
+      background-color: var(--button-bg-color);
+      border-color: transparent;
     }
     &:focus {
-      border: 1px solid var(--primary-button-focused-border);
+      border-color: var(--primary-button-focused-border);
       box-shadow: 0 0 0 3px var(--primary-button-outline);
-      & > .icon { color: var(--theme-caption-color); }
+      & > .icon { color: var(--caption-color); }
     }
   }
   &:hover .button {
-    background-color: var(--theme-button-bg-pressed);
-    border: 1px solid var(--theme-bg-accent-color);
-    & > .icon { color: var(--theme-caption-color); }
+    background-color: var(--button-bg-hover);
+    border-color: var(--button-border-hover);
+    & > .icon { color: var(--caption-color); }
   }
   
   .label {
@@ -574,7 +574,7 @@
     min-width: 0;  
     font-size: .75rem;
     font-weight: 500;
-    color: var(--theme-content-accent-color);
+    color: var(--accent-color);
   }
 
   .group {
@@ -623,8 +623,8 @@
     user-select: none;
     min-width: 0;  
 
-    &.selected { color: var(--theme-caption-color); }
-    &.not-selected { color: var(--theme-content-dark-color); }
+    &.selected { color: var(--caption-color); }
+    &.not-selected { color: var(--dark-color); }
     &.highlight {
       font-weight: 500;
       font-size: 1rem;
@@ -634,7 +634,7 @@
   .divider {
     font-weight: 500;
     font-size: .75em;
-    color: var(--theme-content-dark-color);
+    color: var(--dark-color);
 
     &.inter { font-size: 1em; }
   }
diff --git a/packages/theme/styles/dialogs.scss b/packages/theme/styles/dialogs.scss
index b827aea51f..025db1f473 100644
--- a/packages/theme/styles/dialogs.scss
+++ b/packages/theme/styles/dialogs.scss
@@ -83,13 +83,13 @@
     display: flex;
     flex-direction: column;
     margin: 0 1rem .75rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
     flex-wrap: wrap;
 
     &__separator {
       margin: 1rem 0;
       height: 1px;
-      background-color: var(--theme-card-divider);
+      background-color: var(--divider-color);
     }
   }
 
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index 4c5c406e9c..ff8ba946bd 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -63,7 +63,7 @@
 * {
   box-sizing: border-box;
   touch-action: manipulation;
-  scrollbar-color: var(--theme-menu-color) var(--theme-bg-color);
+  scrollbar-color: var(--body-accent) var(--board-bg-color);
   scrollbar-width: none;
   --body-font-size: .875rem;
   --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
@@ -84,18 +84,18 @@
 }
 ::-webkit-scrollbar-track, .panel-container .scroll .scroll::-webkit-scrollbar-track {
   margin: 6px;
-  // background-color: var(--theme-scroll-bar);
+  // background-color: var(--scrollbar-bar-color);
 }
 ::-webkit-scrollbar-thumb {
-  background-color: var(--theme-scroll-bar);
+  background-color: var(--scrollbar-bar-color);
   border-radius: .25rem;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background-color: var(--theme-scroll-bar);
+  background-color: var(--scrollbar-bar-hover);
   border-radius: .25rem;
 }
 ::-webkit-scrollbar-corner {
-  background-color: var(--theme-scroll-bar);
+  background-color: var(--scrollbar-bar-color);
   border-radius: .25rem;
 }
 .kanban-container .scroll::-webkit-scrollbar-track {
diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
index d75b265a5b..acb80eb01a 100644
--- a/packages/theme/styles/panel.scss
+++ b/packages/theme/styles/panel.scss
@@ -27,7 +27,7 @@
 
   .ac-header {
     &.highlight { background-color: var(--accent-bg-color); }
-    &.divide { border-bottom: 1px solid var(--theme-card-divider); }
+    &.divide { border-bottom: 1px solid var(--divider-color); }
   }
 
   .ad-section-50 {
@@ -37,7 +37,7 @@
     min-height: 0;
     width: 50%;
 
-    &.divide { border-right: 1px solid var(--theme-card-divider); }
+    &.divide { border-right: 1px solid var(--divider-color); }
   }
 
   .ad-tools {
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index da8bd916ca..c708b93e2e 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -219,8 +219,8 @@
     overflow-y: auto;
     &::-webkit-scrollbar-track { margin: 0; }
     &::-webkit-scrollbar-thumb {
-      background-color: var(--theme-bg-accent-color);
-      &:hover { background-color: var(--theme-menu-divider); }
+      background-color: var(--scrollbar-bar-color);
+      &:hover { background-color: var(--scrollbar-bar-hover); }
     }
   }
   .ap-box {
@@ -243,11 +243,11 @@
       display: flex;
       justify-content: center;
       font-style: italic;
-      color: var(--theme-content-trans-color);
+      color: var(--dark-color);
       cursor: default;
 
       &:hover {
-        color: var(--theme-content-trans-color);
+        color: var(--dark-color);
         background-color: transparent;
       }
     }
@@ -324,7 +324,7 @@
       flex-shrink: 0;
       margin: 1rem 1rem .25rem;
       font-weight: 500;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
     .ap-header {
       margin: .25rem 1rem 0;
@@ -343,19 +343,19 @@
 
       .ap-categoryItem {
         margin: .25rem;
-        color: var(--theme-content-trans-color);
+        color: var(--dark-color);
         cursor: pointer;
 
         &.selected { 
-          color: var(--theme-content-accent-color) !important; 
+          color: var(--accent-color) !important; 
         }
         &:hover { 
-          color: var(--theme-content-accent-color); 
+          color: var(--accent-color); 
         }
       }
 
       &::-webkit-scrollbar:horizontal { height: .125rem; }
-      &::-webkit-scrollbar-thumb { background-color: var(--theme-button-bg-hovered); }
+      &::-webkit-scrollbar-thumb { background-color: var(--scrollbar-bar-color); }
     }
     .ap-header {
       margin: .25rem 1rem 0;
diff --git a/packages/ui/src/components/ActionIcon.svelte b/packages/ui/src/components/ActionIcon.svelte
index 9199f93302..07488d08f9 100644
--- a/packages/ui/src/components/ActionIcon.svelte
+++ b/packages/ui/src/components/ActionIcon.svelte
@@ -60,7 +60,7 @@
       border: 1px solid var(--primary-button-focused-border);
       box-shadow: 0 0 0 3px var(--primary-button-outline);
       .icon {
-        color: var(--theme-caption-color);
+        color: var(--caption-color);
         opacity: 1;
       }
     }
diff --git a/packages/ui/src/components/CheckBoxList.svelte.txt b/packages/ui/src/components/CheckBoxList.svelte.txt
index 750b315cae..533e68d6b9 100644
--- a/packages/ui/src/components/CheckBoxList.svelte.txt
+++ b/packages/ui/src/components/CheckBoxList.svelte.txt
@@ -77,11 +77,11 @@
       .icon { opacity: .6; }
       .label {
         margin-left: 1rem;
-        color: var(--theme-content-color);
+        color: var(--content-color);
       }
       &:hover {
         .icon { opacity: 1; }
-        .label { color: var(--theme-caption-color); }
+        .label { color: var(--caption-color); }
       }
     }
   }
diff --git a/packages/ui/src/components/CheckBoxWithLabel.svelte.txt b/packages/ui/src/components/CheckBoxWithLabel.svelte.txt
index 23a70ca3f2..23f3528a5e 100644
--- a/packages/ui/src/components/CheckBoxWithLabel.svelte.txt
+++ b/packages/ui/src/components/CheckBoxWithLabel.svelte.txt
@@ -99,7 +99,7 @@
     position: relative;
     margin-left: 1rem;
     width: 100%;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
 
     .edit-item {
       width: 100%;
@@ -109,7 +109,7 @@
       padding: .125rem;
       font-family: inherit;
       font-size: inherit;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
       background-color: transparent;
       border: .125rem solid transparent;
       border-radius: .125rem;
@@ -140,7 +140,7 @@
 
       &.checked {
         text-decoration: line-through;
-        color: var(--theme-content-dark-color);
+        color: var(--dark-color);
       }
     }
   }
diff --git a/packages/ui/src/components/CircleButton.svelte b/packages/ui/src/components/CircleButton.svelte
index 06605747e6..c300a87d72 100644
--- a/packages/ui/src/components/CircleButton.svelte
+++ b/packages/ui/src/components/CircleButton.svelte
@@ -47,19 +47,26 @@
 <style lang="scss">
   .icon-button {
     flex-shrink: 0;
-    color: var(--theme-caption-color);
-    border: 1px solid var(--theme-circle-border);
+    color: var(--caption-color);
+    border: 1px solid var(--trans-content-20);
     border-radius: 50%;
     cursor: pointer;
 
+    &:hover {
+      border-color: var(--button-border-hover);
+    }
     .content {
       pointer-events: none;
     }
     &.selected {
-      background-color: var(--theme-circle-select);
+      background-color: var(--menu-bg-select);
     }
     &.transparent {
-      background-color: var(--theme-circle-trans);
+      background-color: var(--menu-bg-select-trans);
+
+      &:hover {
+        background-color: var(--menu-bg-select);
+      }
     }
     &.primary {
       color: var(--primary-button-color);
diff --git a/packages/ui/src/components/Dialog.svelte b/packages/ui/src/components/Dialog.svelte
index a74529a336..e8a01f060d 100644
--- a/packages/ui/src/components/Dialog.svelte
+++ b/packages/ui/src/components/Dialog.svelte
@@ -74,7 +74,7 @@
     height: 100vh;
     min-height: 100vh;
     max-height: 100vh;
-    background-color: var(--theme-bg-color);
+    background-color: var(--body-color);
     border-radius: 1.875rem 0 0 1.875rem;
     box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, 0.4);
 
@@ -87,7 +87,7 @@
         flex-grow: 1;
         font-weight: 500;
         font-size: 1.125rem;
-        color: var(--theme-caption-color);
+        color: var(--caption-color);
         user-select: none;
       }
 
diff --git a/packages/ui/src/components/EditWithIcon.svelte b/packages/ui/src/components/EditWithIcon.svelte
index b441e0d9c1..54de3a4df2 100644
--- a/packages/ui/src/components/EditWithIcon.svelte
+++ b/packages/ui/src/components/EditWithIcon.svelte
@@ -43,6 +43,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="flex-between editbox {size}" style={width ? 'width: ' + width : ''} on:click={() => textHTML.focus()}>
   <div class="mr-2 icon"><Icon {icon} size={'small'} /></div>
   <input bind:this={textHTML} type="text" bind:value placeholder={phTraslate} on:change on:input on:keydown />
diff --git a/packages/ui/src/components/ListView.svelte b/packages/ui/src/components/ListView.svelte
index b114942bad..8eee49c7d5 100644
--- a/packages/ui/src/components/ListView.svelte
+++ b/packages/ui/src/components/ListView.svelte
@@ -19,6 +19,7 @@
   export let selection: number = 0
   export let count: number
   export let addClass: string | undefined = undefined
+  export let noScroll: boolean = false
 
   const refs: HTMLElement[] = []
 
@@ -60,7 +61,7 @@
 {#if count}
   <div
     class="list-container flex-col flex-grow"
-    style:overflow={'auto'}
+    style:overflow={noScroll ? 'visible' : 'auto'}
     use:resizeObserver={() => {
       dispatch('changeContent')
     }}
diff --git a/packages/ui/src/components/MultiProgress.svelte b/packages/ui/src/components/MultiProgress.svelte
index 68aed8379b..91c19b9970 100644
--- a/packages/ui/src/components/MultiProgress.svelte
+++ b/packages/ui/src/components/MultiProgress.svelte
@@ -71,16 +71,18 @@
     position: relative;
     width: 100%;
     height: 1.5rem;
-    background-color: var(--theme-bg-accent-hover);
+    background-color: var(--board-bg-color);
+    border: 1px solid var(--accent-bg-color);
     border-radius: 0.25rem;
 
     .bar {
       position: absolute;
+      display: flex;
+      align-items: center;
       top: 0;
       left: 0;
       height: 100%;
       padding-left: 0.5rem;
-      padding-top: 0.125rem;
       &.first {
         border-top-left-radius: 0.25rem;
         border-bottom-left-radius: 0.25rem;
diff --git a/packages/ui/src/components/PopupMenu.svelte b/packages/ui/src/components/PopupMenu.svelte
index 0b87cc12df..9dac8fd5fb 100644
--- a/packages/ui/src/components/PopupMenu.svelte
+++ b/packages/ui/src/components/PopupMenu.svelte
@@ -107,11 +107,10 @@
     display: flex;
     flex-direction: column;
     padding: 1rem;
-    color: var(--theme-caption-color);
-    background-color: var(--theme-button-bg-hovered);
-    border: 1px solid var(--theme-button-border-enabled);
+    color: var(--caption-color);
+    background-color: var(--popup-bg-color);
     border-radius: 0.75rem;
-    box-shadow: 0px 1.25rem 3.75rem rgba(0, 0, 0, 0.6);
+    box-shadow: var(--popup-shadow);
     user-select: none;
     z-index: 10;
   }
diff --git a/packages/ui/src/components/Progress.svelte b/packages/ui/src/components/Progress.svelte
index c4687a386d..8478a984d3 100644
--- a/packages/ui/src/components/Progress.svelte
+++ b/packages/ui/src/components/Progress.svelte
@@ -47,7 +47,7 @@
     position: relative;
     width: 100%;
     height: 0.25rem;
-    background-color: var(--theme-bg-accent-hover);
+    background-color: var(--trans-content-10);
     border-radius: 0.125rem;
 
     .bar {
diff --git a/packages/ui/src/components/Section.svelte b/packages/ui/src/components/Section.svelte
index d2fc020c7e..74cf26f91f 100644
--- a/packages/ui/src/components/Section.svelte
+++ b/packages/ui/src/components/Section.svelte
@@ -25,6 +25,7 @@
   export let closed: boolean = false
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="flex-row-center section-container"
   on:click|preventDefault={() => {
@@ -52,7 +53,7 @@
       flex-grow: 1;
       margin-left: 0.75rem;
       font-weight: 500;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
     .arrow {
       margin: 0.5rem;
@@ -64,6 +65,6 @@
   }
   :global(.section-container + .section-container),
   :global(.section-content + .section-container) {
-    border-top: 1px solid var(--theme-menu-divider);
+    border-top: 1px solid var(--divider-color);
   }
 </style>
diff --git a/packages/ui/src/components/Status.svelte b/packages/ui/src/components/Status.svelte
index 1ee35ab273..7e985b8c0c 100644
--- a/packages/ui/src/components/Status.svelte
+++ b/packages/ui/src/components/Status.svelte
@@ -22,7 +22,7 @@
   .container {
     user-select: none;
     font-size: 14px;
-    color: var(--theme-content-color);
+    color: var(--content-color);
     &.WARNING {
       color: yellow;
     }
diff --git a/packages/ui/src/components/StepsDialog.svelte b/packages/ui/src/components/StepsDialog.svelte
index 8465f93c6a..003e37d181 100644
--- a/packages/ui/src/components/StepsDialog.svelte
+++ b/packages/ui/src/components/StepsDialog.svelte
@@ -92,7 +92,7 @@
   <svelte:fragment slot="title">
     {@const additionalStepInfo = currentStepModel?.additionalInfo}
 
-    <div class="popupPanel-title__content-container antiTitle">
+    <div class="popupPanel-title__content-container antiTitle" style:min-height={'2.5rem'}>
       <div class="icon-wrapper">
         {#if icon}<div class="wrapped-icon"><Icon {icon} size="medium" /></div>{/if}
         <div class="title-wrapper">
@@ -217,30 +217,31 @@
     }
 
     &.selected {
-      color: var(--theme-content-accent-color);
+      color: var(--accent-color);
       background-color: var(--noborder-bg-color);
       cursor: default;
 
       &::before {
-        color: var(--theme-content-accent-color);
+        color: var(--accent-color);
         background-color: var(--primary-bg-color);
       }
     }
 
     &.fulfilled {
-      background-color: var(--theme-bg-accent-color);
+      background-color: var(--accent-bg-color);
 
       &::before {
-        background-color: #5e6ad255;
+        background-color: var(--primary-button-outline);
       }
     }
 
     &.disabled {
-      color: var(--theme-content-trans-color);
+      color: var(--dark-color);
       cursor: not-allowed;
 
       &::before {
-        color: var(--theme-content-trans-color);
+        color: var(--dark-color);
+        background-color: var(--trans-content-05);
       }
 
       &:hover {
@@ -255,8 +256,8 @@
       align-items: center;
       margin-right: 1rem;
       content: counter(item);
-      color: var(--theme-content-color);
-      background-color: var(--theme-bg-focused-color);
+      color: var(--content-color);
+      background-color: var(--trans-content-10);
       border-radius: 100%;
       width: 2rem;
       height: 2rem;
diff --git a/packages/ui/src/components/StylishEdit.svelte b/packages/ui/src/components/StylishEdit.svelte
index c9832f9493..dfa1529fe0 100644
--- a/packages/ui/src/components/StylishEdit.svelte
+++ b/packages/ui/src/components/StylishEdit.svelte
@@ -72,12 +72,14 @@
     padding: 0;
     min-width: 3rem;
     height: 3.25rem;
-    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-bg-accent-hover);
+    background-color: var(--accent-bg-color);
+    border: 1px solid var(--button-border-color);
     border-radius: 0.75rem;
+    caret-color: var(--caret-color);
+
     &:focus-within {
-      background-color: var(--theme-bg-focused-color);
-      border-color: var(--theme-bg-focused-border);
+      background-color: var(--body-accent);
+      border-color: var(--button-border-hover);
     }
     input {
       height: 3.25rem;
@@ -96,7 +98,7 @@
       top: 1rem;
       left: 1.25rem;
       font-size: 0.75rem;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
       opacity: 0.3;
       transition: top 200ms;
       pointer-events: none;
diff --git a/packages/ui/src/components/Tabs.svelte b/packages/ui/src/components/Tabs.svelte
index 3ce5fe9b4f..b1ec659b0c 100644
--- a/packages/ui/src/components/Tabs.svelte
+++ b/packages/ui/src/components/Tabs.svelte
@@ -59,20 +59,23 @@
     margin-bottom: 0.5rem;
     width: 100%;
     height: 4.5rem;
-    border-bottom: 1px solid var(--theme-menu-divider);
+    border-bottom: 1px solid var(--divider-color);
 
     .tab {
       height: 4.5rem;
-      color: var(--theme-content-trans-color);
+      color: var(--dark-color);
       cursor: pointer;
       user-select: none;
 
       &.selected {
         border-top: 0.125rem solid transparent;
-        border-bottom: 0.125rem solid var(--theme-caption-color);
-        color: var(--theme-caption-color);
+        border-bottom: 0.125rem solid var(--caption-color);
+        color: var(--caption-color);
         cursor: default;
       }
+      &:not(.selected):hover {
+        color: var(--accent-color);
+      }
     }
     .tab + .tab {
       margin-left: 2.5rem;
diff --git a/packages/ui/src/components/TextArea.svelte b/packages/ui/src/components/TextArea.svelte
index 4fa8812216..645acd1126 100644
--- a/packages/ui/src/components/TextArea.svelte
+++ b/packages/ui/src/components/TextArea.svelte
@@ -65,7 +65,7 @@
       margin-bottom: 0.25rem;
       font-size: 0.75rem;
       font-weight: 500;
-      color: var(--theme-content-accent-color);
+      color: var(--accent-color);
       pointer-events: none;
       user-select: none;
     }
@@ -78,7 +78,7 @@
       font-family: inherit;
       font-size: inherit;
       line-height: 150%;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
       background-color: transparent;
       border: 2px solid transparent;
       border-radius: 0.125rem;
@@ -90,7 +90,7 @@
         border-color: var(--primary-button-enabled);
       }
       &::placeholder {
-        color: var(--theme-content-dark-color);
+        color: var(--dark-color);
       }
     }
   }
diff --git a/packages/ui/src/components/ToggleWithLabel.svelte b/packages/ui/src/components/ToggleWithLabel.svelte
index 2180d02ec7..e21e7a69a6 100644
--- a/packages/ui/src/components/ToggleWithLabel.svelte
+++ b/packages/ui/src/components/ToggleWithLabel.svelte
@@ -47,12 +47,12 @@
 <style lang="scss">
   .caption {
     margin-right: 1rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
     user-select: none;
     span {
       display: block;
       font-size: 0.75rem;
-      color: var(--theme-content-trans-color);
+      color: var(--dark-color);
     }
   }
 </style>
diff --git a/packages/ui/src/components/calendar/DatePopup.svelte b/packages/ui/src/components/calendar/DatePopup.svelte
index a622ee6a0c..67944a9ecc 100644
--- a/packages/ui/src/components/calendar/DatePopup.svelte
+++ b/packages/ui/src/components/calendar/DatePopup.svelte
@@ -365,7 +365,7 @@
     max-height: calc(100vh - 2rem);
     width: max-content;
     height: max-content;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
     background: var(--board-card-bg-color);
     border: 1px solid var(--divider-color);
     border-radius: 0.5rem;
diff --git a/packages/ui/src/components/calendar/DateRangePopup.svelte b/packages/ui/src/components/calendar/DateRangePopup.svelte
index 2ab3730e0d..543d07d21e 100644
--- a/packages/ui/src/components/calendar/DateRangePopup.svelte
+++ b/packages/ui/src/components/calendar/DateRangePopup.svelte
@@ -82,6 +82,7 @@
       <Scroller>
         {#each shiftValues as value}
           {#if typeof value === 'number'}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
             <div
               class="btn"
               on:click={() => {
@@ -115,7 +116,7 @@
       top: 1rem;
       right: calc(100% - 0.5rem);
       bottom: 1rem;
-      height: fit-content;
+      // height: fit-content;
       width: fit-content;
       width: 12rem;
       min-width: 12rem;
diff --git a/packages/ui/src/components/calendar/Month.svelte b/packages/ui/src/components/calendar/Month.svelte
index 38d4bda3d2..c4edd4e728 100644
--- a/packages/ui/src/components/calendar/Month.svelte
+++ b/packages/ui/src/components/calendar/Month.svelte
@@ -126,7 +126,7 @@
     min-height: 0;
     width: 100%;
     height: 100%;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
 
     .header {
       display: flex;
diff --git a/packages/ui/src/components/calendar/MonthCalendar.svelte b/packages/ui/src/components/calendar/MonthCalendar.svelte
index dbdf6f63c0..b6aad71757 100644
--- a/packages/ui/src/components/calendar/MonthCalendar.svelte
+++ b/packages/ui/src/components/calendar/MonthCalendar.svelte
@@ -46,6 +46,7 @@
         {@const date = weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek)}
         <div style={`grid-column-start: ${dayOfWeek + 1}; grid-row-start: ${weekIndex + 1}`}>
           <div style={`display: flex; width: 100%; height: ${cellHeight ? `${cellHeight};` : '100%;'}`}>
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
             <div
               class="cell flex-center"
               class:weekend={isWeekend(date)}
@@ -87,7 +88,7 @@
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
   .weekend {
-    background-color: var(--theme-bg-accent-color);
+    background-color: var(--button-bg-color);
   }
   .cell {
     height: calc(100% - 5px);
diff --git a/packages/ui/src/components/calendar/MonthSquare.svelte b/packages/ui/src/components/calendar/MonthSquare.svelte
index 32205dacae..c65146307a 100644
--- a/packages/ui/src/components/calendar/MonthSquare.svelte
+++ b/packages/ui/src/components/calendar/MonthSquare.svelte
@@ -118,7 +118,7 @@
     min-height: 0;
     width: 100%;
     height: 100%;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
 
     .header {
       display: flex;
diff --git a/packages/ui/src/components/icons/Calendar.svelte b/packages/ui/src/components/icons/Calendar.svelte
index c3f48e19ed..00d172a262 100644
--- a/packages/ui/src/components/icons/Calendar.svelte
+++ b/packages/ui/src/components/icons/Calendar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'var(--caption-color)'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
diff --git a/packages/ui/src/components/wizard/Wizard.svelte b/packages/ui/src/components/wizard/Wizard.svelte
index 1a4c05c576..c1e45c63f3 100644
--- a/packages/ui/src/components/wizard/Wizard.svelte
+++ b/packages/ui/src/components/wizard/Wizard.svelte
@@ -45,7 +45,7 @@
       positionState={selected === i ? 'current' : i < selected ? 'prev' : 'next'}
       prevColor={getPlatformColor(COLOR)}
       currentColor={getPlatformColor(COLOR)}
-      nextColor="var(--theme-bg-focused-color)"
+      nextColor="var(--trans-content-10)"
     />
   {/each}
 </ScrollerBar>
diff --git a/packages/ui/src/components/wizard/WizardStep.svelte b/packages/ui/src/components/wizard/WizardStep.svelte
index 2918a72241..0b5a67c07b 100644
--- a/packages/ui/src/components/wizard/WizardStep.svelte
+++ b/packages/ui/src/components/wizard/WizardStep.svelte
@@ -21,9 +21,9 @@
   export let label: IntlString
   export let position: WizardItemPosition
   export let positionState: WizardItemPositionState
-  export let currentColor = 'var(--theme-bg-focused-color)'
-  export let prevColor = 'var(--theme-bg-focused-color)'
-  export let nextColor = 'var(--theme-bg-accent-color)'
+  export let currentColor = 'var(--trans-content-10)'
+  export let prevColor = 'var(--trans-content-10)'
+  export let nextColor = 'var(--trans-content-05)'
 
   let lenght: number = 0
   let text: HTMLElement
diff --git a/plugins/activity-resources/src/components/TxViewTx.svelte b/plugins/activity-resources/src/components/TxViewTx.svelte
index 192ac103d8..8ed429c0c1 100644
--- a/plugins/activity-resources/src/components/TxViewTx.svelte
+++ b/plugins/activity-resources/src/components/TxViewTx.svelte
@@ -53,8 +53,8 @@
     padding: 0.5rem;
     min-width: 0;
     color: var(--accent-color);
-    background: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-bg-accent-color);
+    background: var(--accent-bg-color);
+    border: 1px solid var(--divider-color);
     border-radius: 0.75rem;
   }
 </style>
diff --git a/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
index e520ceb68b..55400f753c 100644
--- a/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentGalleryPresenter.svelte
@@ -49,12 +49,14 @@
 <div class="gridCellOverlay">
   <div class="gridCell">
     {#if isImage(value.type)}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div class="cellImagePreview" on:click={openAttachment}>
         <img class={'img-fit'} src={getFileUrl(value.file)} alt={value.name} />
       </div>
     {:else}
       <div class="cellMiscPreview">
         {#if isPDF(value.type)}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div class="flex-center extensionIcon" on:click={openAttachment}>
             {extensionIconLabel(value.name)}
           </div>
@@ -68,6 +70,7 @@
 
     <div class="cellInfo">
       {#if isEmbedded(value.type)}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class="flex-center extensionIcon" on:click={openAttachment}>
           {extensionIconLabel(value.name)}
         </div>
@@ -78,6 +81,7 @@
       {/if}
       <div class="eCellInfoData">
         {#if isEmbedded(value.type)}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div class="eCellInfoFilename" on:click={openAttachment}>
             {trimFilename(value.name)}
           </div>
@@ -96,7 +100,7 @@
 <style lang="scss">
   .gridCellOverlay {
     position: relative;
-    padding: 0.25rem;
+    padding: 0.5rem;
   }
 
   .gridCell {
@@ -107,7 +111,7 @@
     border-radius: 0.75rem;
     justify-content: space-between;
     overflow: hidden;
-    border: 1px solid var(--theme-button-border-hovered);
+    border: 1px solid var(--divider-color);
   }
 
   .cellImagePreview {
@@ -115,7 +119,7 @@
     justify-content: center;
     height: 10rem;
     overflow: hidden;
-    background-color: var(--theme-menu-color);
+    background-color: var(--body-color);
     cursor: pointer;
   }
 
@@ -135,7 +139,7 @@
   .cellInfo {
     display: flex;
     flex-direction: row;
-    border: 1px solid var(--theme-button-border-hovered);
+    border-top: 1px solid var(--divider-color);
     padding: 0.75rem;
     height: 4rem;
     align-items: center;
@@ -155,14 +159,14 @@
 
     .eCellInfoFilename {
       font-weight: 500;
-      color: var(--theme-content-accent-color);
+      color: var(--accent-color);
       white-space: nowrap;
       cursor: pointer;
     }
 
     .eCellInfoFilesize {
       font-size: 0.75rem;
-      color: var(--theme-content-dark-color);
+      color: var(--dark-color);
     }
   }
 
@@ -187,7 +191,7 @@
   .cellMiscPreview:hover + .cellInfo .eCellInfoFilename a // not embedded on preview hover
   {
     text-decoration: underline;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
   }
   .eCellInfoFilename:active,
   .extensionIcon:active + .eCellInfoData > .eCellInfoFilename, // embedded on extension hover
@@ -197,6 +201,6 @@
   .cellMiscPreview:active + .cellInfo .eCellInfoFilename a // not embedded on preview hover
   {
     text-decoration: underline;
-    color: var(--theme-content-accent-color);
+    color: var(--accent-color);
   }
 </style>
diff --git a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
index 1176058d98..3bfca46267 100644
--- a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
@@ -144,26 +144,26 @@
   .name {
     white-space: nowrap;
     font-weight: 500;
-    color: var(--theme-content-accent-color);
+    color: var(--accent-color);
     cursor: pointer;
   }
 
   .type {
     white-space: nowrap;
     font-size: 0.75rem;
-    color: var(--theme-content-dark-color);
+    color: var(--dark-color);
   }
 
   .name:hover,
   .icon:hover + .info > .name,
   .no-line:hover + .info > .name a {
     text-decoration: underline;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
   }
   .name:active,
   .icon:active + .info > .name,
   .no-line:active + .info > .name a {
     text-decoration: underline;
-    color: var(--theme-content-accent-color);
+    color: var(--accent-color);
   }
 </style>
diff --git a/plugins/attachment-resources/src/components/AttachmentRefInput.svelte b/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
index 100bd28953..8b4a9cbb7a 100644
--- a/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
@@ -301,7 +301,7 @@
 <style lang="scss">
   .list {
     padding: 0.5rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
     overflow-x: auto;
     overflow-y: hidden;
     background-color: var(--accent-bg-color);
diff --git a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
index d83855af35..afabb824d2 100644
--- a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
@@ -331,7 +331,7 @@
     margin-top: 0.5rem;
     padding: 0.5rem;
     min-width: 0;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
     overflow-x: auto;
     overflow-y: hidden;
     background-color: var(--accent-bg-color);
diff --git a/plugins/attachment-resources/src/components/AttachmentsGalleryView.svelte b/plugins/attachment-resources/src/components/AttachmentsGalleryView.svelte
index 5c054698e4..130dfba26d 100644
--- a/plugins/attachment-resources/src/components/AttachmentsGalleryView.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentsGalleryView.svelte
@@ -52,6 +52,7 @@
 <div class="galleryGrid">
   {#each attachments as attachment, i}
     <div class="attachmentCell" class:fixed={i === selectedFileNumber}>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <AttachmentGalleryPresenter value={attachment}>
         <svelte:fragment slot="rowMenu">
           <div class="eAttachmentCellActions" class:fixed={i === selectedFileNumber}>
@@ -80,7 +81,7 @@
       display: flex;
       visibility: hidden;
       padding: 0.5rem;
-      border: 1px solid var(--theme-button-border-hovered);
+      border: 1px solid var(--divider-color);
       border-radius: 0.25rem;
       background-color: var(--board-bg-color);
     }
diff --git a/plugins/attachment-resources/src/components/AttachmentsListView.svelte b/plugins/attachment-resources/src/components/AttachmentsListView.svelte
index e60e93ac28..2be032d69f 100644
--- a/plugins/attachment-resources/src/components/AttachmentsListView.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentsListView.svelte
@@ -59,6 +59,7 @@
         <a href={getFileUrl(attachment.file)} download={attachment.name}>
           <Icon icon={FileDownload} size={'small'} />
         </a>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class="eAttachmentRowMenu" on:click={(event) => showFileMenu(event, attachment, i)}>
           <IconMoreV size={'small'} />
         </div>
@@ -73,7 +74,7 @@
     align-items: center;
     margin: 0.5rem 1.5rem;
     padding: 0.5rem;
-    border: 1px solid var(--theme-button-border-hovered);
+    border: 1px solid var(--divider-color);
     border-radius: 0.5rem;
 
     .eAttachmentRowActions {
diff --git a/plugins/attachment-resources/src/components/AudioPlayer.svelte b/plugins/attachment-resources/src/components/AudioPlayer.svelte
index e5e97463ba..9c4179656b 100644
--- a/plugins/attachment-resources/src/components/AudioPlayer.svelte
+++ b/plugins/attachment-resources/src/components/AudioPlayer.svelte
@@ -46,10 +46,10 @@
 
 <style lang="scss">
   .container {
-    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-bg-accent-color);
-    border-radius: 0.75rem;
-    width: 20rem;
     padding: 0.5rem;
+    width: 20rem;
+    background-color: var(--accent-bg-color);
+    border: 1px solid var(--divider-color);
+    border-radius: 0.75rem;
   }
 </style>
diff --git a/plugins/attachment-resources/src/components/FileBrowser.svelte b/plugins/attachment-resources/src/components/FileBrowser.svelte
index 08a6c7fac6..334bf60166 100644
--- a/plugins/attachment-resources/src/components/FileBrowser.svelte
+++ b/plugins/attachment-resources/src/components/FileBrowser.svelte
@@ -179,7 +179,7 @@
 
     .eGroupHeaderCount {
       font-size: 0.75rem;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
   }
 </style>
diff --git a/plugins/attachment-resources/src/components/Photos.svelte b/plugins/attachment-resources/src/components/Photos.svelte
index acd84515a0..19c864a50a 100644
--- a/plugins/attachment-resources/src/components/Photos.svelte
+++ b/plugins/attachment-resources/src/components/Photos.svelte
@@ -135,6 +135,7 @@
     on:drop|preventDefault|stopPropagation={fileDrop}
   >
     {#each images as image (image._id)}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
         class="item flex-center"
         on:click={(ev) => {
@@ -144,6 +145,7 @@
         <img src={getFileUrl(image.file)} alt={image.name} />
       </div>
     {/each}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div class="flex-center item new-item" on:click={click}>
       <UploadDuo size={'large'} />
     </div>
@@ -156,6 +158,7 @@
     min-width: 5rem;
     height: 5rem;
     color: var(--accent-color);
+    border: 1px solid var(--dark-color);
     border-radius: 0.5rem;
     overflow: hidden;
     cursor: pointer;
@@ -170,7 +173,7 @@
   }
 
   .new-item {
-    background: var(--theme-bg-accent-color);
-    border: 1px dashed var(--theme-zone-border-lite);
+    background: var(--accent-bg-color);
+    border: 1px dashed var(--dark-color);
   }
 </style>
diff --git a/plugins/chunter-resources/src/components/ChannelSeparator.svelte b/plugins/chunter-resources/src/components/ChannelSeparator.svelte
index b6b9537813..c8f1d71b75 100644
--- a/plugins/chunter-resources/src/components/ChannelSeparator.svelte
+++ b/plugins/chunter-resources/src/components/ChannelSeparator.svelte
@@ -33,7 +33,7 @@
     position: relative;
     width: 100%;
     height: 1px;
-    background-color: var(--theme-dialog-divider);
+    background-color: var(--divider-color);
   }
   .new {
     .line {
diff --git a/plugins/chunter-resources/src/components/Comment.svelte b/plugins/chunter-resources/src/components/Comment.svelte
index 96d54a94a9..916bc95f6c 100644
--- a/plugins/chunter-resources/src/components/Comment.svelte
+++ b/plugins/chunter-resources/src/components/Comment.svelte
@@ -45,19 +45,19 @@
       font-weight: 500;
       font-size: 1rem;
       line-height: 150%;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
 
       span {
         margin-left: 0.5rem;
         font-weight: 400;
         font-size: 0.875rem;
-        color: var(--theme-content-dark-color);
+        color: var(--dark-color);
       }
     }
 
     .text {
       line-height: 150%;
-      color: var(--theme-content-color);
+      color: var(--content-color);
     }
   }
 </style>
diff --git a/plugins/chunter-resources/src/components/DateSeparator.svelte b/plugins/chunter-resources/src/components/DateSeparator.svelte
index ea4216f0b4..637d3fb353 100644
--- a/plugins/chunter-resources/src/components/DateSeparator.svelte
+++ b/plugins/chunter-resources/src/components/DateSeparator.svelte
@@ -48,7 +48,7 @@
       font-size: 0.75rem;
       letter-spacing: 0.5;
       text-transform: uppercase;
-      color: var(--theme-content-trans-color);
+      color: var(--dark-color);
       z-index: 1;
 
       &::before {
@@ -59,7 +59,7 @@
         width: 100%;
         height: 100%;
         border-radius: 1.25rem;
-        background-color: var(--theme-chat-divider);
+        background-color: var(--divider-color);
         z-index: -1;
       }
     }
@@ -74,7 +74,7 @@
         left: 0;
         width: 100%;
         height: 1px;
-        background-color: var(--theme-chat-divider);
+        background-color: var(--divider-color);
       }
     }
   }
diff --git a/plugins/chunter-resources/src/components/EditChannelDescriptionAttachments.svelte b/plugins/chunter-resources/src/components/EditChannelDescriptionAttachments.svelte
index 3a2ce0d862..067754003c 100644
--- a/plugins/chunter-resources/src/components/EditChannelDescriptionAttachments.svelte
+++ b/plugins/chunter-resources/src/components/EditChannelDescriptionAttachments.svelte
@@ -85,6 +85,7 @@
             <a href={getFileUrl(attachment.file)} download={attachment.name}>
               <Icon icon={FileDownload} size={'small'} />
             </a>
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
             <div id="context-menu" class="eAttachmentRowMenu" on:click={(event) => showMenu(event, attachment, i)}>
               <IconMoreV size={'small'} />
             </div>
@@ -92,6 +93,7 @@
         </div>
       {/each}
       {#if visibleAttachments.length < totalAttachments}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
           class="showMoreAttachmentsButton"
           on:click={() => {
@@ -114,24 +116,24 @@
 
 <style lang="scss">
   .group {
-    border: 1px solid var(--theme-button-border-hovered);
-    border-radius: 12px;
-    padding: 16px 0;
+    padding: 1rem 0;
+    border: 1px solid var(--divider-color);
+    border-radius: 0.75rem;
   }
 
   .eGroupTitle {
-    margin: 0 20px 8px 20px;
+    margin: 0 1.25rem 0.5rem;
     display: flex;
     font-weight: 500;
     font-size: 1rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
     justify-content: space-between;
   }
 
   .showMoreAttachmentsButton {
-    margin-left: 20px;
-    margin-top: 8px;
-    color: var(--theme-caption-color);
+    margin-left: 1.5rem;
+    margin-top: 0.5rem;
+    color: var(--caption-color);
     cursor: pointer;
     &:hover {
       text-decoration: underline;
@@ -142,13 +144,13 @@
     display: flex;
     align-items: center;
     padding-right: 1rem;
-    margin: 0 20px;
-    padding: 5px 0;
+    margin: 0 1.5rem;
+    padding: 0.375rem 0;
 
     .eAttachmentRowActions {
       display: flex;
       visibility: hidden;
-      border: 1px solid var(--theme-bg-focused-border);
+      border: 1px solid var(--divider-color);
       padding: 0.2rem;
       border-radius: 0.375em;
     }
diff --git a/plugins/chunter-resources/src/components/JumpToDateSelector.svelte b/plugins/chunter-resources/src/components/JumpToDateSelector.svelte
index a529e1891f..bba7303a38 100644
--- a/plugins/chunter-resources/src/components/JumpToDateSelector.svelte
+++ b/plugins/chunter-resources/src/components/JumpToDateSelector.svelte
@@ -16,6 +16,7 @@
 </script>
 
 <div id={fixed ? '' : time?.toString()} class="flex justify-center mt-5 pr-1 dateSelector">
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     bind:this={div}
     class="mb-1 p-1 border-radius-2 over-underline dateSelectorButton"
@@ -44,13 +45,13 @@
 <style lang="scss">
   .dateSelector {
     &:not(:first-child) {
-      border-top: 1px solid var(--theme-dialog-divider);
+      border-top: 1px solid var(--divider-color);
     }
   }
 
   .dateSelectorButton {
     margin-top: -1rem;
-    border: 1px solid var(--theme-dialog-divider);
     background-color: var(--body-color);
+    border: 1px solid var(--divider-color);
   }
 </style>
diff --git a/plugins/chunter-resources/src/components/Message.svelte b/plugins/chunter-resources/src/components/Message.svelte
index 99433ba0b8..114650fcf9 100644
--- a/plugins/chunter-resources/src/components/Message.svelte
+++ b/plugins/chunter-resources/src/components/Message.svelte
@@ -360,7 +360,7 @@
         font-weight: 500;
         font-size: 1rem;
         line-height: 150%;
-        color: var(--theme-caption-color);
+        color: var(--caption-color);
         margin-bottom: 0.25rem;
 
         span {
diff --git a/plugins/chunter-resources/src/components/PinnedMessagesPopup.svelte b/plugins/chunter-resources/src/components/PinnedMessagesPopup.svelte
index a6eeb0913f..7aeb83cfe8 100644
--- a/plugins/chunter-resources/src/components/PinnedMessagesPopup.svelte
+++ b/plugins/chunter-resources/src/components/PinnedMessagesPopup.svelte
@@ -84,7 +84,7 @@
   .popup {
     padding: 1.25rem 1.25rem 1.25rem;
     max-height: 20rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
   }
 
   .message {
diff --git a/plugins/chunter-resources/src/components/Replies.svelte b/plugins/chunter-resources/src/components/Replies.svelte
index 9d41b7cfa3..3519959039 100644
--- a/plugins/chunter-resources/src/components/Replies.svelte
+++ b/plugins/chunter-resources/src/components/Replies.svelte
@@ -47,6 +47,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="flex-row-center container cursor-pointer" on:click>
   <div class="flex-row-center">
     {#each showReplies as reply}
@@ -78,7 +79,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      background-color: var(--theme-bg-color);
+      background-color: var(--body-color);
       border-radius: 50%;
 
       span {
@@ -90,8 +91,8 @@
         font-size: 0.75rem;
         font-weight: 500;
         line-height: 0.5;
-        color: var(--theme-caption-color);
-        background-color: var(--theme-bg-selection);
+        color: var(--caption-color);
+        background-color: var(--body-accent);
         border-radius: 50%;
       }
     }
@@ -101,8 +102,8 @@
     }
 
     &:hover {
-      border: 1px solid var(--theme-button-border-hovered);
-      background-color: var(--theme-bg-color);
+      border: 1px solid var(--button-border-hover);
+      background-color: var(--body-color);
     }
   }
 </style>
diff --git a/plugins/chunter-resources/src/components/Thread.svelte b/plugins/chunter-resources/src/components/Thread.svelte
index 3687a6f6f6..c2439c2e51 100644
--- a/plugins/chunter-resources/src/components/Thread.svelte
+++ b/plugins/chunter-resources/src/components/Thread.svelte
@@ -186,6 +186,7 @@
   {#if parent}
     <MsgView message={parent} thread {savedAttachmentsIds} />
     {#if total > comments.length}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
         class="label pb-2 pt-2 pl-8 over-underline"
         on:click={() => {
@@ -214,9 +215,9 @@
   .content {
     overflow: hidden;
     margin: 1rem 1rem 0px;
-    background-color: var(--theme-border-modal);
+    background-color: var(--board-bg-color);
+    border: 1px solid var(--divider-color);
     border-radius: 0.75rem;
-    border: 1px solid var(--theme-zone-border);
   }
 
   .label:hover {
diff --git a/plugins/chunter-resources/src/components/ThreadView.svelte b/plugins/chunter-resources/src/components/ThreadView.svelte
index 3a055c7b52..c01a007949 100644
--- a/plugins/chunter-resources/src/components/ThreadView.svelte
+++ b/plugins/chunter-resources/src/components/ThreadView.svelte
@@ -181,6 +181,7 @@
 
 <div class="header">
   <div class="title"><Label label={chunter.string.Thread} /></div>
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     class="tool"
     on:click={() => {
@@ -234,7 +235,7 @@
       flex-grow: 1;
       font-weight: 500;
       font-size: 1.25rem;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
       user-select: none;
     }
     .tool {
diff --git a/plugins/chunter-resources/src/components/icons/Close.svelte b/plugins/chunter-resources/src/components/icons/Close.svelte
index dc02ef42df..a9bcef47b5 100644
--- a/plugins/chunter-resources/src/components/icons/Close.svelte
+++ b/plugins/chunter-resources/src/components/icons/Close.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'var(--caption-color)'
 </script>
 
 <svg class="svg-{size}" viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
diff --git a/plugins/contact-resources/src/components/ChannelsPopup.svelte b/plugins/contact-resources/src/components/ChannelsPopup.svelte
index 2e2f9ef4b3..c22f98ee23 100644
--- a/plugins/contact-resources/src/components/ChannelsPopup.svelte
+++ b/plugins/contact-resources/src/components/ChannelsPopup.svelte
@@ -39,6 +39,7 @@
     <div class="text-sm font-medium"><Label label={value.label} /></div>
     <div class="overflow-label">{value.value}</div>
   </div>
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div class="button" on:click|preventDefault={copyLink}>
     <IconCopy size={'small'} />
   </div>
@@ -48,10 +49,10 @@
   .button {
     flex-shrink: 0;
     margin-left: 1.5rem;
-    color: var(--theme-content-dark-color);
+    color: var(--dark-color);
     cursor: pointer;
     &:hover {
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
   }
 </style>
diff --git a/plugins/contact-resources/src/components/EditEmployee.svelte b/plugins/contact-resources/src/components/EditEmployee.svelte
index 5e14a2257b..ccf714043d 100644
--- a/plugins/contact-resources/src/components/EditEmployee.svelte
+++ b/plugins/contact-resources/src/components/EditEmployee.svelte
@@ -182,7 +182,7 @@
   .name {
     font-weight: 500;
     font-size: 1.25rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
   }
   .location {
     margin-top: 0.25rem;
diff --git a/plugins/contact-resources/src/components/EditOrganization.svelte b/plugins/contact-resources/src/components/EditOrganization.svelte
index 2fa6dc95a6..c5fd1b679a 100644
--- a/plugins/contact-resources/src/components/EditOrganization.svelte
+++ b/plugins/contact-resources/src/components/EditOrganization.svelte
@@ -89,7 +89,7 @@
   .name {
     font-weight: 500;
     font-size: 1.25rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
   }
   .separator {
     margin: 1rem 0;
diff --git a/plugins/contact-resources/src/components/EditPerson.svelte b/plugins/contact-resources/src/components/EditPerson.svelte
index d7e4c08f65..0802022504 100644
--- a/plugins/contact-resources/src/components/EditPerson.svelte
+++ b/plugins/contact-resources/src/components/EditPerson.svelte
@@ -136,7 +136,7 @@
   .name {
     font-weight: 500;
     font-size: 1.25rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
   }
   .location {
     margin-top: 0.25rem;
diff --git a/plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte b/plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte
index 900734fd54..fd87a80b72 100644
--- a/plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte
+++ b/plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte
@@ -38,6 +38,7 @@
 </script>
 
 {#if value}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div class="flex-row-center" class:user-container={employee !== undefined} on:click={onClick}>
     {#if employee}
       <Avatar size={'x-small'} avatar={employee.avatar} />
@@ -56,11 +57,11 @@
       margin-left: 0.5rem;
       font-weight: 500;
       text-align: left;
-      color: var(--theme-content-accent-color);
+      color: var(--accent-color);
     }
     &:hover .user {
       text-decoration: underline;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
   }
 </style>
diff --git a/plugins/contact-resources/src/components/OrganizationCard.svelte b/plugins/contact-resources/src/components/OrganizationCard.svelte
index 73d6f1cbc5..ca84afe1a3 100644
--- a/plugins/contact-resources/src/components/OrganizationCard.svelte
+++ b/plugins/contact-resources/src/components/OrganizationCard.svelte
@@ -28,6 +28,7 @@
     <Avatar avatar={organization.avatar} size={'large'} icon={contact.icon.Company} />
   </div>
   {#if organization}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
       class="name lines-limit-2"
       class:over-underline={!disabled}
@@ -79,13 +80,13 @@
       margin-bottom: 1.75rem;
       font-weight: 500;
       font-size: 0.625rem;
-      color: var(--theme-content-dark-color);
+      color: var(--dark-color);
     }
     .name {
       margin: 1rem 0 0.25rem;
       font-weight: 500;
       font-size: 1rem;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
   }
 </style>
diff --git a/plugins/contact-resources/src/components/PersonCard.svelte b/plugins/contact-resources/src/components/PersonCard.svelte
index 81477abc84..f45dce26a9 100644
--- a/plugins/contact-resources/src/components/PersonCard.svelte
+++ b/plugins/contact-resources/src/components/PersonCard.svelte
@@ -96,17 +96,17 @@
       margin-bottom: 1.75rem;
       font-weight: 500;
       font-size: 0.625rem;
-      color: var(--theme-content-dark-color);
+      color: var(--dark-color);
     }
     .name {
       margin: 1rem 0 0.25rem;
       font-weight: 500;
       font-size: 1rem;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
     .description {
       font-size: 0.75rem;
-      color: var(--theme-content-dark-color);
+      color: var(--dark-color);
     }
     .footer {
       margin-top: 1.5rem;
diff --git a/plugins/contact-resources/src/components/SocialEditor.svelte b/plugins/contact-resources/src/components/SocialEditor.svelte
index 896b9becbf..826d506b51 100644
--- a/plugins/contact-resources/src/components/SocialEditor.svelte
+++ b/plugins/contact-resources/src/components/SocialEditor.svelte
@@ -84,11 +84,10 @@
     width: 17rem;
     max-width: 17rem;
     height: 22rem;
-    color: var(--theme-caption-color);
-    background-color: var(--theme-button-bg-hovered);
-    border: 1px solid var(--theme-button-border-enabled);
+    color: var(--caption-color);
+    background-color: var(--popup-bg-color);
     border-radius: 0.75rem;
-    box-shadow: 0px 1.25rem 3.75rem rgba(0, 0, 0, 0.6);
+    box-shadow: var(--popup-shadow);
 
     &-block {
       display: grid;
@@ -98,7 +97,7 @@
       span {
         font-weight: 600;
         font-size: 0.625rem;
-        color: var(--theme-caption-color);
+        color: var(--caption-color);
         text-transform: uppercase;
       }
     }
diff --git a/plugins/contact-resources/src/components/icons/Edit.svelte b/plugins/contact-resources/src/components/icons/Edit.svelte
index 66f1cd20c8..82ef9b9910 100644
--- a/plugins/contact-resources/src/components/icons/Edit.svelte
+++ b/plugins/contact-resources/src/components/icons/Edit.svelte
@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'var(--caption-color)'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
diff --git a/plugins/contact-resources/src/components/icons/ExpandRightDouble.svelte b/plugins/contact-resources/src/components/icons/ExpandRightDouble.svelte
index 2ba9362025..d01f5a5d2b 100644
--- a/plugins/contact-resources/src/components/icons/ExpandRightDouble.svelte
+++ b/plugins/contact-resources/src/components/icons/ExpandRightDouble.svelte
@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  const fill: string = 'var(--theme-content-dark-color)'
+  const fill: string = 'var(--dark-color)'
 </script>
 
 <svg class="svg-expand" {fill} viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
diff --git a/plugins/devmodel-resources/src/components/ModelView.svelte b/plugins/devmodel-resources/src/components/ModelView.svelte
index 632b100db0..e34f2e5867 100644
--- a/plugins/devmodel-resources/src/components/ModelView.svelte
+++ b/plugins/devmodel-resources/src/components/ModelView.svelte
@@ -76,14 +76,14 @@
     height: 2.5rem;
     font-weight: 500;
     font-size: 0.75rem;
-    color: var(--theme-content-dark-color);
-    box-shadow: inset 0 -1px 0 0 var(--theme-bg-focused-color);
+    color: var(--dark-color);
+    box-shadow: inset 0 -1px 0 0 var(--trans-content-10);
     user-select: none;
   }
 
   .tr-body {
     height: 3.25rem;
-    color: var(--theme-caption-color);
-    border-bottom: 1px solid var(--theme-button-border-hovered);
+    color: var(--caption-color);
+    border-bottom: 1px solid var(--divider-color);
   }
 </style>
diff --git a/plugins/document-resources/src/components/EditDoc.svelte b/plugins/document-resources/src/components/EditDoc.svelte
index fdb6229d37..340957d309 100644
--- a/plugins/document-resources/src/components/EditDoc.svelte
+++ b/plugins/document-resources/src/components/EditDoc.svelte
@@ -552,7 +552,7 @@
 
 <style lang="scss">
   .description-preview {
-    color: var(--theme-content-color);
+    color: var(--content-color);
     line-height: 150%;
     // overflow: auto;
   }
@@ -579,8 +579,14 @@
   }
   .emphasized {
     padding: 1rem;
-    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-bg-accent-hover);
+    background-color: var(--body-color);
+    border: 1px solid var(--divider-color);
     border-radius: 0.5rem;
+    transition: border-color 0.1s var(--timing-main), box-shadow 0.1s var(--timing-main);
+
+    &:focus-within {
+      border-color: var(--primary-button-focused-border);
+      box-shadow: 0 0 0 3px var(--primary-button-outline);
+    }
   }
 </style>
diff --git a/plugins/document-resources/src/components/icons/Edit.svelte b/plugins/document-resources/src/components/icons/Edit.svelte
index 66f1cd20c8..82ef9b9910 100644
--- a/plugins/document-resources/src/components/icons/Edit.svelte
+++ b/plugins/document-resources/src/components/icons/Edit.svelte
@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'var(--caption-color)'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
diff --git a/plugins/gmail-resources/src/components/Connect.svelte b/plugins/gmail-resources/src/components/Connect.svelte
index 9b4fa2e80d..521e1e48b1 100644
--- a/plugins/gmail-resources/src/components/Connect.svelte
+++ b/plugins/gmail-resources/src/components/Connect.svelte
@@ -49,6 +49,7 @@
 <div class="card">
   <div class="flex-between header">
     <div class="overflow-label fs-title"><Label label={gmail.string.ConnectGmai} /></div>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
       class="tool"
       on:click={() => {
@@ -74,10 +75,9 @@
     width: 20rem;
     min-width: 20rem;
     max-width: 20rem;
-    background-color: var(--theme-tooltip-color);
-    border: 1px solid var(--theme-bg-accent-color);
+    background-color: var(--popup-bg-hover);
     border-radius: 0.75rem;
-    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--popup-shadow);
 
     .header {
       flex-shrink: 0;
@@ -86,10 +86,10 @@
       .tool {
         cursor: pointer;
         &:hover {
-          color: var(--theme-caption-color);
+          color: var(--caption-color);
         }
         &:active {
-          color: var(--theme-content-accent-color);
+          color: var(--accent-color);
         }
       }
     }
diff --git a/plugins/gmail-resources/src/components/FullMessage.svelte b/plugins/gmail-resources/src/components/FullMessage.svelte
index f9bc4d992c..7191810b1f 100644
--- a/plugins/gmail-resources/src/components/FullMessage.svelte
+++ b/plugins/gmail-resources/src/components/FullMessage.svelte
@@ -103,7 +103,7 @@
 <style lang="scss">
   .list {
     padding: 0.5rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
     overflow-x: auto;
     overflow-y: hidden;
     background-color: var(--accent-bg-color);
diff --git a/plugins/gmail-resources/src/components/FullMessagePopup.svelte b/plugins/gmail-resources/src/components/FullMessagePopup.svelte
index 13e3250f54..ca9a1d2dfd 100644
--- a/plugins/gmail-resources/src/components/FullMessagePopup.svelte
+++ b/plugins/gmail-resources/src/components/FullMessagePopup.svelte
@@ -73,9 +73,8 @@
   .popup {
     padding: 1rem;
     max-height: calc(100vh - 4rem);
-    background-color: var(--theme-button-bg-focused);
-    border: 1px solid var(--theme-button-border-enabled);
+    background-color: var(--popup-bg-hover);
     border-radius: 0.75rem;
-    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--popup-shadow);
   }
 </style>
diff --git a/plugins/gmail-resources/src/components/NewMessage.svelte b/plugins/gmail-resources/src/components/NewMessage.svelte
index 394ccf90cf..bf016ae215 100644
--- a/plugins/gmail-resources/src/components/NewMessage.svelte
+++ b/plugins/gmail-resources/src/components/NewMessage.svelte
@@ -224,7 +224,7 @@
 <style lang="scss">
   .list {
     padding: 0.5rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
     overflow-x: auto;
     overflow-y: hidden;
     background-color: var(--accent-bg-color);
diff --git a/plugins/gmail-resources/src/components/NewMessages.svelte b/plugins/gmail-resources/src/components/NewMessages.svelte
index 4b3265cc06..d1ff3d0aac 100644
--- a/plugins/gmail-resources/src/components/NewMessages.svelte
+++ b/plugins/gmail-resources/src/components/NewMessages.svelte
@@ -329,7 +329,7 @@
 <style lang="scss">
   .list {
     padding: 0.5rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
     overflow-x: auto;
     overflow-y: hidden;
     background-color: var(--accent-bg-color);
diff --git a/plugins/gmail-resources/src/components/SharedMessages.svelte b/plugins/gmail-resources/src/components/SharedMessages.svelte
index 71fa55bf24..ef25062e79 100644
--- a/plugins/gmail-resources/src/components/SharedMessages.svelte
+++ b/plugins/gmail-resources/src/components/SharedMessages.svelte
@@ -36,8 +36,8 @@
 <style lang="scss">
   .container {
     padding: 1rem;
-    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-bg-accent-color);
+    background-color: var(--accent-bg-color);
+    border: 1px solid var(--divider-color);
     border-radius: 0.75rem;
   }
 </style>
diff --git a/plugins/hr-resources/src/components/DepartmentCard.svelte b/plugins/hr-resources/src/components/DepartmentCard.svelte
index aa1895ada1..149d47f1be 100644
--- a/plugins/hr-resources/src/components/DepartmentCard.svelte
+++ b/plugins/hr-resources/src/components/DepartmentCard.svelte
@@ -97,6 +97,7 @@
 </script>
 
 <div class="flex-center w-full px-4">
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     class="w-full mt-2 mb-2 container flex"
     class:cursor-pointer={currentDescendants.length}
@@ -123,10 +124,10 @@
     >
       <div class="flex-center">
         <div class="mr-2">
-          <Button icon={IconAdd} kind={'link-bordered'} on:click={createChild} />
+          <Button icon={IconAdd} kind={'list'} on:click={createChild} />
         </div>
         <Avatar size={'medium'} avatar={value.avatar} icon={hr.icon.Department} />
-        <div class="flex-row ml-2">
+        <div class="flex-row ml-2 mr-4">
           <div class="fs-title">
             {value.name}
           </div>
@@ -161,15 +162,16 @@
 
 <style lang="scss">
   .container {
-    background-color: var(--board-card-bg-color);
+    background-color: var(--noborder-bg-color);
     border: 1px solid transparent;
+    border-radius: 0.5rem;
 
     &:hover {
-      background-color: var(--board-card-bg-hover);
+      background-color: var(--noborder-bg-hover);
       cursor: pointer;
     }
     &.dragging {
-      border: 1px solid var(--theme-bg-focused-color);
+      border-color: var(--divider-color);
     }
   }
 </style>
diff --git a/plugins/hr-resources/src/components/EditDepartment.svelte b/plugins/hr-resources/src/components/EditDepartment.svelte
index fc8e0def51..3a7264f0c5 100644
--- a/plugins/hr-resources/src/components/EditDepartment.svelte
+++ b/plugins/hr-resources/src/components/EditDepartment.svelte
@@ -102,7 +102,7 @@
   .name {
     font-weight: 500;
     font-size: 1.25rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
   }
   .separator {
     margin: 1rem 0;
diff --git a/plugins/hr-resources/src/components/schedule/MonthView.svelte b/plugins/hr-resources/src/components/schedule/MonthView.svelte
index 04c0d77b79..ea4e4e10fb 100644
--- a/plugins/hr-resources/src/components/schedule/MonthView.svelte
+++ b/plugins/hr-resources/src/components/schedule/MonthView.svelte
@@ -321,20 +321,21 @@
       border: none;
       color: var(--caption-color);
       &.today {
-        background-color: var(--theme-bg-accent-hover);
+        background-color: var(--primary-button-disabled);
       }
       &.summary {
         font-weight: 600;
       }
       &.weekend:not(.today) {
-        background-color: var(--theme-bg-accent-color);
+        background-color: var(--accent-bg-color);
       }
     }
     td:not(:last-child) {
       border-right: 1px solid var(--divider-color);
     }
 
-    tbody {
+    tbody,
+    tfoot {
       tr {
         border-bottom: 1px solid var(--divider-color);
       }
diff --git a/plugins/hr-resources/src/components/schedule/YearView.svelte b/plugins/hr-resources/src/components/schedule/YearView.svelte
index cf4acaaca0..b0b3c4d7ab 100644
--- a/plugins/hr-resources/src/components/schedule/YearView.svelte
+++ b/plugins/hr-resources/src/components/schedule/YearView.svelte
@@ -184,7 +184,7 @@
       border: none;
       color: var(--caption-color);
       &.today {
-        background-color: var(--theme-bg-accent-hover);
+        background-color: var(--primary-button-disabled);
       }
       &.summary {
         font-weight: 600;
diff --git a/plugins/inventory-resources/src/components/HierarchyElement.svelte b/plugins/inventory-resources/src/components/HierarchyElement.svelte
index 9802154ba8..704476a56f 100644
--- a/plugins/inventory-resources/src/components/HierarchyElement.svelte
+++ b/plugins/inventory-resources/src/components/HierarchyElement.svelte
@@ -53,6 +53,7 @@
         <td>
           <div class="firstCell" {style}>
             {#if descendants.has(object._id)}
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
               <div class="expand" on:click={() => click(object._id)}>
                 {#if expanded.has(object._id)}
                   <Expand size={'small'} />
@@ -66,6 +67,7 @@
               value={getObjectValue(attribute.key, object) ?? ''}
               {...attribute.props}
             />
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
             <div class="menuRow" on:click={(ev) => showMenu(ev, object)}><IconMoreV size={'small'} /></div>
           </div>
         </td>
@@ -119,8 +121,8 @@
 
   .tr-body {
     height: 3.25rem;
-    color: var(--theme-caption-color);
-    border-bottom: 1px solid var(--theme-button-border-hovered);
+    color: var(--caption-color);
+    border-bottom: 1px solid var(--divider-color);
     &:hover .firstCell .menuRow {
       visibility: visible;
     }
@@ -128,7 +130,7 @@
       border-bottom: none;
     }
     &:hover {
-      background-color: var(--theme-table-bg-hover);
+      background-color: var(--highlight-hover);
     }
   }
 </style>
diff --git a/plugins/inventory-resources/src/components/HierarchyView.svelte b/plugins/inventory-resources/src/components/HierarchyView.svelte
index bd621bab09..446d7fc53a 100644
--- a/plugins/inventory-resources/src/components/HierarchyView.svelte
+++ b/plugins/inventory-resources/src/components/HierarchyView.svelte
@@ -96,8 +96,8 @@
     height: 2.5rem;
     font-weight: 500;
     font-size: 0.75rem;
-    color: var(--theme-content-dark-color);
-    box-shadow: inset 0 -1px 0 0 var(--theme-bg-focused-color);
+    color: var(--dark-color);
+    box-shadow: inset 0 -1px 0 0 var(--divider-color);
     user-select: none;
     z-index: 5;
     padding: 0.5rem 1.5rem;
diff --git a/plugins/login-resources/src/components/Form.svelte b/plugins/login-resources/src/components/Form.svelte
index 0b0ab4ce67..c30b456bec 100644
--- a/plugins/login-resources/src/components/Form.svelte
+++ b/plugins/login-resources/src/components/Form.svelte
@@ -182,7 +182,7 @@
     .title {
       font-weight: 600;
       font-size: 1.5rem;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
     .status {
       min-height: 7.5rem;
@@ -210,13 +210,13 @@
     .footer {
       margin-top: 3.5rem;
       font-size: 0.8rem;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
       span {
         opacity: 0.3;
       }
       a {
         text-decoration: none;
-        color: var(--theme-caption-color);
+        color: var(--caption-color);
         opacity: 0.8;
         &:hover {
           opacity: 1;
diff --git a/plugins/login-resources/src/components/Intro.svelte b/plugins/login-resources/src/components/Intro.svelte
index a6e1d076a3..b7bdb5fe21 100644
--- a/plugins/login-resources/src/components/Intro.svelte
+++ b/plugins/login-resources/src/components/Intro.svelte
@@ -81,7 +81,7 @@
         font-weight: 400;
         font-size: 0.8rem;
         text-align: center;
-        color: var(--theme-caption-color);
+        color: var(--caption-color);
         opacity: 0.8;
       }
     }
diff --git a/plugins/login-resources/src/components/InviteLink.svelte b/plugins/login-resources/src/components/InviteLink.svelte
index b636070044..c5b782f6d6 100644
--- a/plugins/login-resources/src/components/InviteLink.svelte
+++ b/plugins/login-resources/src/components/InviteLink.svelte
@@ -25,7 +25,8 @@
     Loading,
     locationToUrl,
     MiniToggle,
-    ticker
+    ticker,
+    Grid
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import login from '../plugin'
@@ -115,60 +116,50 @@
 </script>
 
 <div class="antiPopup popup">
-  <div class="flex-between fs-title mb-2">
+  <div class="flex-between fs-title mb-9">
     <Label label={login.string.InviteDescription} />
-    <InviteWorkspace size="large" />
+    <InviteWorkspace size={'large'} />
   </div>
   {#if isOwnerOrMaintainer}
-    <div class="mb-2">
+    <Grid column={1} rowGap={1.5}>
       <MiniToggle
         bind:on={useDefault}
         label={login.string.UseWorkspaceInviteSettings}
         on:click={() => setToDefault()}
       />
       {#if !useDefault}
-        <div class="mt-2">
+        <EditBox
+          label={login.string.LinkValidHours}
+          bind:value={expHours}
+          format={'number'}
+          on:keypress={() => (link = undefined)}
+          disabled={useDefault || !isOwnerOrMaintainer}
+        />
+        <EditBox
+          label={login.string.EmailMask}
+          bind:value={emailMask}
+          on:keypress={() => (link = undefined)}
+          disabled={useDefault || !isOwnerOrMaintainer}
+        />
+        <MiniToggle bind:on={noLimit} label={login.string.NoLimit} on:change={() => noLimit && (limit = -1)} />
+        {#if !noLimit}
           <EditBox
-            label={login.string.LinkValidHours}
-            bind:value={expHours}
+            label={login.string.InviteLimit}
+            bind:value={limit}
             format={'number'}
             on:keypress={() => (link = undefined)}
             disabled={useDefault || !isOwnerOrMaintainer}
           />
-        </div>
-        <div class="mt-2">
-          <EditBox
-            label={login.string.EmailMask}
-            bind:value={emailMask}
-            on:keypress={() => (link = undefined)}
-            disabled={useDefault || !isOwnerOrMaintainer}
-          />
-        </div>
-
-        <div class="mt-2">
-          <MiniToggle bind:on={noLimit} label={login.string.NoLimit} on:change={() => noLimit && (limit = -1)} />
-        </div>
-        {#if !noLimit}
-          <div class="mt-2">
-            <EditBox
-              label={login.string.InviteLimit}
-              bind:value={limit}
-              format={'number'}
-              on:keypress={() => (link = undefined)}
-              disabled={useDefault || !isOwnerOrMaintainer}
-            />
-          </div>
         {/if}
       {/if}
-    </div>
+    </Grid>
   {/if}
   {#if loading}
     <Loading />
   {:else if link !== undefined}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div class="over-underline link" on:click={copy}>{link}</div>
-    <div class="buttons flex">
-      <Button label={copied ? login.string.Copied : login.string.Copy} size={'medium'} on:click={copy} />
+    <div class="buttons">
       <Button
         label={login.string.Close}
         size={'medium'}
@@ -177,9 +168,10 @@
           dispatch('close')
         }}
       />
+      <Button label={copied ? login.string.Copied : login.string.Copy} size={'medium'} on:click={copy} />
     </div>
   {:else}
-    <div class="buttons flex">
+    <div class="buttons">
       <Button
         label={login.string.GetLink}
         size={'medium'}
@@ -196,23 +188,28 @@
   .popup {
     display: flex;
     flex-direction: column;
-    padding: 1rem;
-    color: var(--theme-caption-color);
-    background-color: var(--theme-button-bg-hovered);
-    border: 1px solid var(--theme-button-border-enabled);
-    border-radius: 0.75rem;
-    min-width: 30rem;
-    filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, 0.35));
+    padding: 1.75rem;
+    width: 30rem;
+    max-width: 40rem;
+    background: var(--popup-bg-color);
+    border-radius: 1.25rem;
+    user-select: none;
+    box-shadow: var(--popup-shadow);
 
     .link {
-      margin-top: 2rem;
-      margin-bottom: 2rem;
+      margin: 1.75rem 0 0;
       overflow-wrap: break-word;
     }
 
     .buttons {
-      justify-content: space-around;
+      margin-top: 1.75rem;
+      flex-shrink: 0;
+      display: grid;
+      grid-auto-flow: column;
+      direction: rtl;
+      justify-content: flex-start;
       align-items: center;
+      column-gap: 0.5rem;
     }
   }
 </style>
diff --git a/plugins/login-resources/src/components/SelectWorkspace.svelte b/plugins/login-resources/src/components/SelectWorkspace.svelte
index e2f704a593..028719e5c9 100644
--- a/plugins/login-resources/src/components/SelectWorkspace.svelte
+++ b/plugins/login-resources/src/components/SelectWorkspace.svelte
@@ -119,7 +119,7 @@
     .title {
       font-weight: 600;
       font-size: 1.5rem;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
     .status {
       min-height: 7.5rem;
@@ -149,13 +149,13 @@
     .footer {
       margin-top: 3.5rem;
       font-size: 0.8rem;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
       span {
         opacity: 0.3;
       }
       a {
         text-decoration: none;
-        color: var(--theme-caption-color);
+        color: var(--caption-color);
         opacity: 0.8;
         &:hover {
           opacity: 1;
diff --git a/plugins/login-resources/src/components/StatusControl.svelte b/plugins/login-resources/src/components/StatusControl.svelte
index 3d6fa7fad5..7bc77cd063 100644
--- a/plugins/login-resources/src/components/StatusControl.svelte
+++ b/plugins/login-resources/src/components/StatusControl.svelte
@@ -30,15 +30,15 @@
 <style lang="scss">
   .container {
     padding: 0.75rem 1rem;
-    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-bg-accent-hover);
+    background-color: var(--accent-bg-color);
+    border: 1px solid var(--divider-color);
     border-radius: 0.5rem;
   }
 
   .error {
     color: var(--system-error-color);
     fill: var(--system-error-color);
-    background-color: var(--theme-button-bg-error);
+    background-color: var(--accent-bg-color);
     border-color: var(--system-error-60-color);
   }
 </style>
diff --git a/plugins/recruit-resources/src/components/CandidateCard.svelte b/plugins/recruit-resources/src/components/CandidateCard.svelte
index 0308aa373e..bd09fea327 100644
--- a/plugins/recruit-resources/src/components/CandidateCard.svelte
+++ b/plugins/recruit-resources/src/components/CandidateCard.svelte
@@ -113,17 +113,17 @@
       margin-bottom: 1.75rem;
       font-weight: 500;
       font-size: 0.625rem;
-      color: var(--theme-content-dark-color);
+      color: var(--dark-color);
     }
     .name {
       margin: 1rem 0 0.25rem;
       font-weight: 500;
       font-size: 1rem;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
     .description {
       font-size: 0.75rem;
-      color: var(--theme-content-dark-color);
+      color: var(--dark-color);
     }
     .footer {
       margin-top: 1.5rem;
diff --git a/plugins/recruit-resources/src/components/VacancyCard.svelte b/plugins/recruit-resources/src/components/VacancyCard.svelte
index 6a36299919..18828efb4d 100644
--- a/plugins/recruit-resources/src/components/VacancyCard.svelte
+++ b/plugins/recruit-resources/src/components/VacancyCard.svelte
@@ -171,17 +171,17 @@
       margin-bottom: 1.75rem;
       font-weight: 500;
       font-size: 0.625rem;
-      color: var(--theme-content-dark-color);
+      color: var(--dark-color);
     }
     .name {
       margin: 1rem 0 0.25rem;
       font-weight: 500;
       font-size: 1rem;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
     .description {
       font-size: 0.75rem;
-      color: var(--theme-content-dark-color);
+      color: var(--dark-color);
     }
 
     &.inline {
diff --git a/plugins/recruit-resources/src/components/icons/Avatar.svelte b/plugins/recruit-resources/src/components/icons/Avatar.svelte
index 88d17937c5..91fe79463b 100644
--- a/plugins/recruit-resources/src/components/icons/Avatar.svelte
+++ b/plugins/recruit-resources/src/components/icons/Avatar.svelte
@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'var(--caption-color)'
 </script>
 
 <svg class="svg-avatar" {fill} viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
@@ -31,7 +31,7 @@
   .svg-avatar {
     width: 2.5rem;
     height: 2.5rem;
-    fill: var(--theme-caption-color);
+    fill: var(--caption-color);
     .op {
       opacity: 0.05;
     }
diff --git a/plugins/recruit-resources/src/components/icons/ExpandRightDouble.svelte b/plugins/recruit-resources/src/components/icons/ExpandRightDouble.svelte
index 2ba9362025..baa052b90d 100644
--- a/plugins/recruit-resources/src/components/icons/ExpandRightDouble.svelte
+++ b/plugins/recruit-resources/src/components/icons/ExpandRightDouble.svelte
@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  const fill: string = 'var(--theme-content-dark-color)'
+  const fill: string = 'var(--divider-color)'
 </script>
 
 <svg class="svg-expand" {fill} viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
diff --git a/plugins/recruit-resources/src/components/review/EditOpinion.svelte b/plugins/recruit-resources/src/components/review/EditOpinion.svelte
index e6da4d9629..977544bed6 100644
--- a/plugins/recruit-resources/src/components/review/EditOpinion.svelte
+++ b/plugins/recruit-resources/src/components/review/EditOpinion.svelte
@@ -16,8 +16,8 @@
   import type { DocumentUpdate, Ref } from '@hcengineering/core'
   import { Card, getClient } from '@hcengineering/presentation'
   import { Opinion } from '@hcengineering/recruit'
-  import { StyledTextEditor } from '@hcengineering/text-editor'
-  import { EditBox, Grid, Label } from '@hcengineering/ui'
+  import { StyledTextArea } from '@hcengineering/text-editor'
+  import { EditBox } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import recruit from '../../plugin'
 
@@ -67,28 +67,12 @@
   }}
   okLabel={recruit.string.OpinionSave}
 >
-  <Grid column={1} rowGap={1.75}>
-    <EditBox
-      label={recruit.string.OpinionValue}
-      bind:value
-      icon={recruit.icon.Application}
-      placeholder={recruit.string.OpinionValue}
-      focus
-    />
-    <div class="mt-1 mb-1">
-      <Label label={recruit.string.Description} />:
-    </div>
-    <div class="description flex">
-      <StyledTextEditor bind:content={description} placeholder={recruit.string.Description} />
-    </div>
-  </Grid>
+  <EditBox
+    label={recruit.string.OpinionValue}
+    bind:value
+    icon={recruit.icon.Application}
+    placeholder={recruit.string.OpinionValue}
+    focus
+  />
+  <StyledTextArea placeholder={recruit.string.Description} bind:content={description} emphasized />
 </Card>
-
-<style lang="scss">
-  .description {
-    height: 10rem;
-    padding: 0.5rem;
-    border: 1px solid var(--theme-menu-divider);
-    border-radius: 8px;
-  }
-</style>
diff --git a/plugins/request-resources/src/components/RequestStatusPresenter.svelte b/plugins/request-resources/src/components/RequestStatusPresenter.svelte
index 23a04e3c14..0a7111aa15 100644
--- a/plugins/request-resources/src/components/RequestStatusPresenter.svelte
+++ b/plugins/request-resources/src/components/RequestStatusPresenter.svelte
@@ -45,7 +45,7 @@
       white-space: nowrap;
       text-transform: capitalize;
       font-weight: 500;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
   }
 </style>
diff --git a/plugins/setting-resources/src/components/PluginCard.svelte b/plugins/setting-resources/src/components/PluginCard.svelte
index c6bce9579b..88bb331627 100644
--- a/plugins/setting-resources/src/components/PluginCard.svelte
+++ b/plugins/setting-resources/src/components/PluginCard.svelte
@@ -122,8 +122,8 @@
 
 <style lang="scss">
   .plugin-container {
-    background-color: var(--theme-button-bg-enabled);
-    border: 1px solid var(--theme-bg-accent-color);
+    background-color: var(--accent-bg-color);
+    border: 1px solid var(--divider-color);
     border-radius: 0.75rem;
   }
   .header {
@@ -138,8 +138,9 @@
     min-height: 2.25rem;
   }
   .content {
+    flex-grow: 1;
     margin: 0 1.5rem 0.25rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
   }
   .footer {
     flex-shrink: 0;
diff --git a/plugins/setting-resources/src/components/Profile.svelte b/plugins/setting-resources/src/components/Profile.svelte
index c877b284af..b7acfa7e09 100644
--- a/plugins/setting-resources/src/components/Profile.svelte
+++ b/plugins/setting-resources/src/components/Profile.svelte
@@ -176,7 +176,7 @@
   .separator {
     margin: 1rem 0;
     height: 1px;
-    background-color: var(--theme-card-divider);
+    background-color: var(--divider-color);
   }
 
   .footer {
diff --git a/plugins/setting-resources/src/components/statuses/Folders.svelte b/plugins/setting-resources/src/components/statuses/Folders.svelte
index d07b044ad1..1d76a1110d 100644
--- a/plugins/setting-resources/src/components/statuses/Folders.svelte
+++ b/plugins/setting-resources/src/components/statuses/Folders.svelte
@@ -67,17 +67,17 @@
   }
   .item {
     padding: 1.25rem 1rem 1.25rem 1.25rem;
-    background-color: var(--theme-button-bg-enabled);
-    border: 1px solid var(--theme-bg-accent-color);
+    background-color: var(--board-card-bg-color);
+    border: 1px solid var(--button-border-color);
     border-radius: 0.75rem;
     cursor: pointer;
 
     &:hover {
-      background-color: var(--theme-button-bg-hovered);
+      background-color: var(--board-card-bg-hover);
     }
     &.selected {
-      background-color: var(--theme-button-bg-pressed);
-      border-color: var(--theme-bg-accent-color);
+      background-color: var(--button-bg-hover);
+      border-color: var(--button-border-hover);
       cursor: auto;
     }
   }
diff --git a/plugins/tags-resources/src/components/CategoryBar.svelte b/plugins/tags-resources/src/components/CategoryBar.svelte
index 9f02b83a73..268a51e5b2 100644
--- a/plugins/tags-resources/src/components/CategoryBar.svelte
+++ b/plugins/tags-resources/src/components/CategoryBar.svelte
@@ -155,7 +155,7 @@
 
 {#if visibleCategories.length > 0}
   <div class="flex-between header">
-    <div class="flex-row-center buttons">
+    <div class="buttons-group small-gap">
       <Button
         label={tags.string.AllCategories}
         kind={'transparent'}
@@ -201,7 +201,7 @@
     padding: 0.375rem 0.75rem;
     // height: 2.5rem;
     white-space: nowrap;
-    border: 1px solid var(--theme-button-border-enabled);
+    border: 1px solid var(--divider-color);
     border-radius: 0.25rem;
     cursor: pointer;
   }
@@ -210,31 +210,12 @@
   }
 
   .header {
-    padding: 0 1.75rem 1rem 2.5rem;
-    border-bottom: 1px solid var(--divider-color);
-    .buttons {
-      padding: 0.125rem 0;
-    }
+    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
+    background-color: var(--board-bg-color);
+    border-top: 1px solid var(--divider-color);
+
     .states {
       max-width: 75%;
     }
-
-    .button {
-      height: 2.5rem;
-      padding: 0.5rem 0.75rem;
-      border: 1px solid transparent;
-      border-radius: 0.5rem;
-      cursor: pointer;
-
-      &:hover {
-        background-color: var(--theme-button-bg-enabled);
-        border-color: var(--theme-button-border-enabled);
-      }
-      &.active {
-        background-color: var(--theme-button-bg-enabled);
-        color: var(--theme-caption-color);
-        border-color: var(--theme-button-border-enabled);
-      }
-    }
   }
 </style>
diff --git a/plugins/tags-resources/src/components/CreateTagElement.svelte b/plugins/tags-resources/src/components/CreateTagElement.svelte
index 7d78a0f2c4..e550b3f57d 100644
--- a/plugins/tags-resources/src/components/CreateTagElement.svelte
+++ b/plugins/tags-resources/src/components/CreateTagElement.svelte
@@ -90,7 +90,7 @@
     dispatch('close')
   }
   const showColorPopup = (evt: MouseEvent) => {
-    showPopup(ColorsPopup, {}, eventToHTMLElement(evt), (col) => {
+    showPopup(ColorsPopup, { selected: getPlatformColor(color) }, eventToHTMLElement(evt), (col) => {
       if (col != null) {
         color = col
         colorSet = true
diff --git a/plugins/tags-resources/src/components/EditTagElement.svelte b/plugins/tags-resources/src/components/EditTagElement.svelte
index 3c364bc89e..14a06d029d 100644
--- a/plugins/tags-resources/src/components/EditTagElement.svelte
+++ b/plugins/tags-resources/src/components/EditTagElement.svelte
@@ -107,7 +107,7 @@
           class="color"
           style={getTagStyle(getPlatformColor(data.color))}
           on:click={(evt) => {
-            showPopup(ColorsPopup, {}, eventToHTMLElement(evt), (col) => {
+            showPopup(ColorsPopup, { selected: getPlatformColor(data.color) }, eventToHTMLElement(evt), (col) => {
               if (col != null) {
                 data.color = col
               }
diff --git a/plugins/task-resources/src/components/EditIssue.svelte b/plugins/task-resources/src/components/EditIssue.svelte
index 05b978f929..49eec382c7 100644
--- a/plugins/task-resources/src/components/EditIssue.svelte
+++ b/plugins/task-resources/src/components/EditIssue.svelte
@@ -72,7 +72,7 @@
     padding: 1rem;
     height: 12rem;
     border-radius: 0.25rem;
-    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-bg-accent-color);
+    background-color: var(--accent-bg-color);
+    border: 1px solid var(--divider-color);
   }
 </style>
diff --git a/plugins/task-resources/src/components/TaskHeader.svelte b/plugins/task-resources/src/components/TaskHeader.svelte
index 91dba94590..fd5aa0fd07 100644
--- a/plugins/task-resources/src/components/TaskHeader.svelte
+++ b/plugins/task-resources/src/components/TaskHeader.svelte
@@ -100,7 +100,7 @@
         bottom: 0;
         left: -1.5rem;
         width: 1px;
-        background-color: var(--theme-bg-accent-hover);
+        background-color: var(--accent-bg-color);
       }
     }
   }
diff --git a/plugins/task-resources/src/components/kanban/KanbanDragDone.svelte b/plugins/task-resources/src/components/kanban/KanbanDragDone.svelte
index 2508a8b039..ffe10a6a69 100644
--- a/plugins/task-resources/src/components/kanban/KanbanDragDone.svelte
+++ b/plugins/task-resources/src/components/kanban/KanbanDragDone.svelte
@@ -96,21 +96,20 @@
     align-items: center;
     justify-content: stretch;
     padding: 0.5rem 2.5rem;
-    background-color: var(--theme-bg-color);
-    border-top: 1px solid var(--theme-dialog-divider);
-    border-radius: 0 0 1.25rem 1.25rem;
+    background-color: var(--board-bg-color);
+    border-top: 1px solid var(--divider-color);
   }
 
   .done-item {
     height: 3rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
     border: 1px dashed transparent;
     border-radius: 0.75rem;
     padding: 0.5rem;
 
     &.hovered {
-      background-color: var(--theme-button-bg-enabled);
-      border-color: var(--theme-dialog-divider);
+      background-color: var(--body-color);
+      border-color: var(--divider-color);
     }
   }
 </style>
diff --git a/plugins/task-resources/src/components/state/Circles.svelte b/plugins/task-resources/src/components/state/Circles.svelte
index 4cb9010e01..c3c88cac17 100644
--- a/plugins/task-resources/src/components/state/Circles.svelte
+++ b/plugins/task-resources/src/components/state/Circles.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'var(--caption-color)'
 </script>
 
 <svg {fill} viewBox="0 0 6 16" xmlns="http://www.w3.org/2000/svg">
diff --git a/plugins/task-resources/src/components/state/PopupDialog.svelte b/plugins/task-resources/src/components/state/PopupDialog.svelte
index 7092392277..dc70c6636e 100644
--- a/plugins/task-resources/src/components/state/PopupDialog.svelte
+++ b/plugins/task-resources/src/components/state/PopupDialog.svelte
@@ -21,7 +21,6 @@
 </script>
 
 <div class="card-container">
-  <div class="card-bg" />
   <div class="overflow-label label"><Label {label} /></div>
   <div class="content"><slot /></div>
 </div>
@@ -31,8 +30,10 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    padding: 32px 1.5rem 1.25rem;
+    padding: 2rem 1.75rem 1.75rem;
     border-radius: 0.75rem;
+    background: var(--popup-bg-color);
+    box-shadow: var(--popup-shadow);
 
     .label {
       flex-shrink: 0;
@@ -40,7 +41,7 @@
       text-transform: uppercase;
       font-weight: 600;
       font-size: 0.75rem;
-      color: var(--theme-content-trans-color);
+      color: var(--dark-color);
     }
 
     .content {
@@ -48,18 +49,5 @@
       flex-grow: 1;
       height: fit-content;
     }
-
-    .card-bg {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: var(--theme-card-bg);
-      border-radius: 0.75rem;
-      backdrop-filter: blur(24px);
-      box-shadow: var(--theme-card-shadow);
-      z-index: -1;
-    }
   }
 </style>
diff --git a/plugins/task-resources/src/components/state/StatesBarElement.svelte b/plugins/task-resources/src/components/state/StatesBarElement.svelte
index c363f85aa0..9b62d569d2 100644
--- a/plugins/task-resources/src/components/state/StatesBarElement.svelte
+++ b/plugins/task-resources/src/components/state/StatesBarElement.svelte
@@ -20,7 +20,7 @@
   export let label: string
   export let position: StatesBarPosition = undefined
   export let selected: boolean = false
-  export let color: string = 'var(--theme-button-bg-enabled)'
+  export let color: string = 'var(--body-color)'
 
   let lenght: number = 0
   let text: HTMLElement
@@ -34,6 +34,7 @@
 
 <div class="hidden-text text-md font-medium" bind:this={text}>{label}</div>
 {#if lenght > 0}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     bind:this={divBar}
     class="asb-bar"
diff --git a/plugins/task-resources/src/components/state/StatesEditor.svelte b/plugins/task-resources/src/components/state/StatesEditor.svelte
index b6baeacf78..951d2db8da 100644
--- a/plugins/task-resources/src/components/state/StatesEditor.svelte
+++ b/plugins/task-resources/src/components/state/StatesEditor.svelte
@@ -123,17 +123,19 @@
         }}
       >
         <div class="bar"><Circles /></div>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
           class="color"
           style="background-color: {getPlatformColor(state.color)}"
           on:click={() => {
-            showPopup(ColorsPopup, {}, elements[i], onColorChange(state))
+            showPopup(ColorsPopup, { selected: getPlatformColor(state.color) }, elements[i], onColorChange(state))
           }}
         />
         <div class="flex-grow caption-color">
           <AttributeEditor maxWidth={'20rem'} _class={state._class} object={state} key="title" />
         </div>
         {#if states.length > 1}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div
             class="tool hover-trans"
             on:click={(ev) => {
@@ -175,6 +177,7 @@
             <AttributeEditor maxWidth={'13rem'} _class={state._class} object={state} key="title" />
           </div>
           {#if wonStates.length > 1}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
             <div
               class="tool hover-trans"
               on:click={(ev) => {
@@ -217,6 +220,7 @@
             <AttributeEditor maxWidth={'13rem'} _class={state._class} object={state} key="title" />
           </div>
           {#if lostStates.length > 1}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
             <div
               class="tool hover-trans"
               on:click={(ev) => {
diff --git a/plugins/telegram-resources/src/components/Chat.svelte b/plugins/telegram-resources/src/components/Chat.svelte
index 1b57195597..eeb53e50dc 100644
--- a/plugins/telegram-resources/src/components/Chat.svelte
+++ b/plugins/telegram-resources/src/components/Chat.svelte
@@ -299,7 +299,7 @@
 
     &.selectable {
       padding: 1rem;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
       border-top: 1px solid var(--divider-color);
     }
   }
diff --git a/plugins/telegram-resources/src/components/Connect.svelte b/plugins/telegram-resources/src/components/Connect.svelte
index e0d0f419d1..6d522dd6a5 100644
--- a/plugins/telegram-resources/src/components/Connect.svelte
+++ b/plugins/telegram-resources/src/components/Connect.svelte
@@ -127,6 +127,7 @@
 <div class="card">
   <div class="flex-between header">
     <div class="overflow-label fs-title"><Label label={telegram.string.ConnectFull} /></div>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
       class="tool"
       on:click={() => {
@@ -155,6 +156,7 @@
     <div class="footer">
       <Button {label} kind={'primary'} {disabled} on:click={click} />
       {#if requested || secondFactor}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class="link over-underline" on:click={back}><Label label={telegram.string.Back} /></div>
       {/if}
     </div>
@@ -169,10 +171,9 @@
     width: 20rem;
     min-width: 20rem;
     max-width: 20rem;
-    background-color: var(--theme-tooltip-color);
-    border: 1px solid var(--theme-bg-accent-color);
+    background: var(--popup-bg-color);
     border-radius: 0.75rem;
-    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--popup-shadow);
 
     .header {
       flex-shrink: 0;
@@ -181,10 +182,10 @@
       .tool {
         cursor: pointer;
         &:hover {
-          color: var(--theme-caption-color);
+          color: var(--caption-color);
         }
         &:active {
-          color: var(--theme-content-accent-color);
+          color: var(--accent-color);
         }
       }
     }
@@ -206,12 +207,12 @@
         padding: 1rem 0rem;
 
         .link {
-          color: var(--theme-content-dark-color);
+          color: var(--accent-color);
           &:hover {
-            color: var(--theme-caption-color);
+            color: var(--caption-color);
           }
           &:active {
-            color: var(--theme-content-accent-color);
+            color: var(--accent-color);
           }
         }
       }
diff --git a/plugins/telegram-resources/src/components/PinPad.svelte b/plugins/telegram-resources/src/components/PinPad.svelte
index d593b04672..e0c2e4780d 100644
--- a/plugins/telegram-resources/src/components/PinPad.svelte
+++ b/plugins/telegram-resources/src/components/PinPad.svelte
@@ -105,7 +105,7 @@
     width: 2.5rem;
     height: 3rem;
     text-align: center;
-    background-color: var(--theme-card-bg-dark);
+    background-color: var(--popup-bg-hover);
     border: 1px solid transparent;
     border-style: none;
     border-radius: 0.5rem;
diff --git a/plugins/telegram-resources/src/components/Reconnect.svelte b/plugins/telegram-resources/src/components/Reconnect.svelte
index 3bfb1f2be7..7096852c1d 100644
--- a/plugins/telegram-resources/src/components/Reconnect.svelte
+++ b/plugins/telegram-resources/src/components/Reconnect.svelte
@@ -139,6 +139,7 @@
 <div class="card">
   <div class="flex-between header">
     <div class="overflow-label fs-title"><Label label={telegram.string.ConnectFull} /></div>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
       class="tool"
       on:click={() => {
@@ -169,6 +170,7 @@
     <div class="footer">
       <Button {label} kind={'primary'} {disabled} on:click={click} />
       {#if requested || secondFactor}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class="link over-underline" on:click={back}><Label label={telegram.string.Back} /></div>
       {/if}
     </div>
@@ -183,10 +185,9 @@
     width: 20rem;
     min-width: 20rem;
     max-width: 20rem;
-    background-color: var(--theme-tooltip-color);
-    border: 1px solid var(--theme-bg-accent-color);
+    background-color: var(--popup-bg-color);
     border-radius: 0.75rem;
-    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--popup-shadow);
 
     .header {
       flex-shrink: 0;
@@ -195,10 +196,10 @@
       .tool {
         cursor: pointer;
         &:hover {
-          color: var(--theme-caption-color);
+          color: var(--caption-color);
         }
         &:active {
-          color: var(--theme-content-accent-color);
+          color: var(--accent-color);
         }
       }
     }
@@ -220,12 +221,12 @@
         padding: 1rem 0rem;
 
         .link {
-          color: var(--theme-content-dark-color);
+          color: var(--accent-color);
           &:hover {
-            color: var(--theme-caption-color);
+            color: var(--caption-color);
           }
           &:active {
-            color: var(--theme-content-accent-color);
+            color: var(--accent-color);
           }
         }
       }
diff --git a/plugins/telegram-resources/src/components/SharedMessages.svelte b/plugins/telegram-resources/src/components/SharedMessages.svelte
index 03d8345a92..5bad824821 100644
--- a/plugins/telegram-resources/src/components/SharedMessages.svelte
+++ b/plugins/telegram-resources/src/components/SharedMessages.svelte
@@ -27,8 +27,8 @@
 <style lang="scss">
   .container {
     padding: 1rem;
-    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-bg-accent-color);
+    background-color: var(--accent-bg-color);
+    border: 1px solid var(--divider-color);
     border-radius: 0.75rem;
   }
 </style>
diff --git a/plugins/templates-resources/src/components/TemplatePopup.svelte b/plugins/templates-resources/src/components/TemplatePopup.svelte
index dfac135388..05fa89d35c 100644
--- a/plugins/templates-resources/src/components/TemplatePopup.svelte
+++ b/plugins/templates-resources/src/components/TemplatePopup.svelte
@@ -105,6 +105,7 @@
       {#if templates?.length}
         <b>{group.name}</b>
         {#each templates as item, i}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div
             class="item"
             class:selected={initIndex + i === selected}
@@ -131,10 +132,10 @@
     width: 19.75rem;
     height: 18.5rem;
     padding: 16px;
-    background-color: var(--theme-button-bg-hovered);
+    background: var(--popup-bg-color);
 
     .selected {
-      background-color: var(--theme-button-bg-focused);
+      background: var(--popup-bg-hover);
     }
 
     .scroll {
diff --git a/plugins/templates-resources/src/components/Templates.svelte b/plugins/templates-resources/src/components/Templates.svelte
index d6387cda03..90eb6c539e 100644
--- a/plugins/templates-resources/src/components/Templates.svelte
+++ b/plugins/templates-resources/src/components/Templates.svelte
@@ -271,7 +271,7 @@
     flex-shrink: 0;
     margin: 1.5rem 0;
     height: 1px;
-    background-color: var(--theme-menu-divider);
+    background-color: var(--divider-color);
   }
   .text {
     flex-grow: 1;
diff --git a/plugins/tracker-resources/src/components/AppItem.svelte b/plugins/tracker-resources/src/components/AppItem.svelte
index 1b1356ac32..c73c080884 100644
--- a/plugins/tracker-resources/src/components/AppItem.svelte
+++ b/plugins/tracker-resources/src/components/AppItem.svelte
@@ -46,7 +46,7 @@
     .icon-container {
       width: 3.25rem;
       height: 3.25rem;
-      color: var(--theme-content-trans-color);
+      color: var(--dark-color);
 
       .normal-font &.noty {
         clip-path: url(#notify-normal);
@@ -57,20 +57,20 @@
     }
 
     &:hover .icon-container {
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
     &:focus {
       border: 1px solid var(--primary-button-focused-border);
       box-shadow: 0 0 0 3px var(--primary-button-outline);
       .icon-container {
-        color: var(--theme-caption-color);
+        color: var(--caption-color);
       }
     }
 
     &.selected {
-      background-color: var(--theme-menu-selection);
+      background-color: var(--menu-bg-select);
       .icon-container {
-        color: var(--theme-caption-color);
+        color: var(--caption-color);
       }
     }
   }
diff --git a/plugins/tracker-resources/src/components/DueDatePopup.svelte b/plugins/tracker-resources/src/components/DueDatePopup.svelte
index ad17cfdea2..7329d59eb0 100644
--- a/plugins/tracker-resources/src/components/DueDatePopup.svelte
+++ b/plugins/tracker-resources/src/components/DueDatePopup.svelte
@@ -74,12 +74,12 @@
   }
 
   .title {
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
     font-weight: 500;
   }
 
   .description {
     margin-top: 0.25rem;
-    color: var(--theme-content-dark-color);
+    color: var(--dark-color);
   }
 </style>
diff --git a/plugins/tracker-resources/src/components/ModeSelector.svelte b/plugins/tracker-resources/src/components/ModeSelector.svelte
index 2c5a80a770..20b70fa2ab 100644
--- a/plugins/tracker-resources/src/components/ModeSelector.svelte
+++ b/plugins/tracker-resources/src/components/ModeSelector.svelte
@@ -20,29 +20,26 @@
 </script>
 
 <div class="itemsContainer">
-  <div class="flex-center">
-    {#each config as [_mode, label, params], i}
-      <div class="buttonWrapper">
-        <Button
-          {label}
-          labelParams={params}
-          size="small"
-          on:click={() => onChange(_mode)}
-          selected={_mode === mode}
-          shape={getButtonShape(i)}
-        />
-      </div>
-    {/each}
-  </div>
+  {#each config as [_mode, label, params], i}
+    <div class="buttonWrapper">
+      <Button
+        {label}
+        labelParams={params}
+        size="small"
+        on:click={() => onChange(_mode)}
+        selected={_mode === mode}
+        shape={getButtonShape(i)}
+      />
+    </div>
+  {/each}
 </div>
 
 <style lang="scss">
   .itemsContainer {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     padding: 0.65rem 1.35rem 0.65rem 2.25rem;
-    border-top: 1px solid var(--theme-button-border-hovered);
+    border-top: 1px solid var(--divider-color);
   }
   .buttonWrapper {
     margin-right: 1px;
diff --git a/plugins/tracker-resources/src/components/SetParentIssueActionPopup.svelte b/plugins/tracker-resources/src/components/SetParentIssueActionPopup.svelte
index 8c5b1105b8..d0ab4b5af4 100644
--- a/plugins/tracker-resources/src/components/SetParentIssueActionPopup.svelte
+++ b/plugins/tracker-resources/src/components/SetParentIssueActionPopup.svelte
@@ -109,14 +109,8 @@
           </div>
         {/if}
         <span class="overflow-label flex-no-shrink mr-3">{issueId}</span>
-        <span class="overflow-label w-full issue-title">{issue.title}</span>
+        <span class="overflow-label w-full content-color">{issue.title}</span>
       </div>
     {/if}
   </svelte:fragment>
 </ObjectPopup>
-
-<style lang="scss">
-  .issue-title {
-    color: var(--theme-content-color);
-  }
-</style>
diff --git a/plugins/tracker-resources/src/components/icons/Mention.svelte b/plugins/tracker-resources/src/components/icons/Mention.svelte
index 12caec2c9c..b70b9d987d 100644
--- a/plugins/tracker-resources/src/components/icons/Mention.svelte
+++ b/plugins/tracker-resources/src/components/icons/Mention.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'var(--caption-color)'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
diff --git a/plugins/tracker-resources/src/components/issues/ParentIssue.svelte b/plugins/tracker-resources/src/components/issues/ParentIssue.svelte
index 9736103b06..2595db86bb 100644
--- a/plugins/tracker-resources/src/components/issues/ParentIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/ParentIssue.svelte
@@ -55,13 +55,13 @@
     max-width: fit-content;
     border: 1px solid var(--button-border-color);
     border-radius: 0.25rem;
-    box-shadow: var(--primary-shadow);
+    box-shadow: var(--button-shadow);
   }
 
   .issue-title {
     margin: 0 0.75rem 0 0.5rem;
     padding-right: 0.75rem;
-    color: var(--theme-content-accent-color);
+    color: var(--accent-color);
     border-right: 1px solid var(--button-border-color);
   }
 
@@ -72,10 +72,10 @@
     transition: color 0.15s;
 
     &:hover {
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
     &:active {
-      color: var(--theme-content-accent-color);
+      color: var(--accent-color);
     }
     &::before {
       position: absolute;
diff --git a/plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte b/plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte
index 03de8dbf95..0a02e30177 100644
--- a/plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte
@@ -259,9 +259,9 @@
 
 <style lang="scss">
   .root {
-    padding: 0.5rem 1.5rem;
-    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-button-border-enabled);
+    padding: 0.75rem;
+    background-color: var(--accent-bg-color);
+    border: 1px solid var(--button-border-color);
     border-radius: 0.5rem;
     overflow: hidden;
 
diff --git a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
index fcc0165f5e..fae8572742 100644
--- a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
@@ -320,7 +320,7 @@
   .title {
     font-weight: 500;
     font-size: 1.125rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
   }
 
   .content {
@@ -328,11 +328,11 @@
   }
 
   .description-preview {
-    color: var(--theme-content-color);
+    color: var(--content-color);
     line-height: 150%;
 
     .placeholder {
-      color: var(--theme-content-trans-color);
+      color: var(--dark-color);
     }
   }
   .divider {
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
index 31af729f6b..3df38c0acd 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
@@ -190,32 +190,28 @@
     padding: $padding;
 
     .issue-title {
-      color: var(--theme-content-accent-color);
+      color: var(--accent-color);
       transition: color 0.15s;
-    }
 
-    &:hover {
-      .issue-title {
-        color: var(--theme-caption-color);
+      &:hover {
+        color: var(--caption-color);
       }
-    }
-    &:active {
-      .issue-title {
-        color: var(--theme-content-accent-color);
+      &:active {
+        color: var(--accent-color);
       }
     }
   }
 
   .sub-issues {
     padding: $padding;
-    color: var(--theme-content-color);
+    color: var(--content-color);
     transition: color 0.15s;
 
     &:hover {
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
     &:active {
-      color: var(--theme-content-accent-color);
+      color: var(--accent-color);
     }
   }
 </style>
diff --git a/plugins/tracker-resources/src/components/projects/ProjectsList.svelte b/plugins/tracker-resources/src/components/projects/ProjectsList.svelte
index 4e9e3e5249..bfb0b673e1 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectsList.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectsList.svelte
@@ -184,11 +184,12 @@
   .listGrid {
     width: 100%;
     height: 3.25rem;
-    color: var(--theme-caption-color);
-    border-bottom: 1px solid var(--theme-button-border-hovered);
+    color: var(--caption-color);
+    border-bottom: 1px solid var(--divider-color);
 
     &.mListGridChecked {
-      background-color: var(--theme-table-bg-hover);
+      background-color: var(--highlight-select);
+      border-bottom-color: var(--highlight-select-border);
 
       .eListGridCheckBox {
         opacity: 1;
@@ -196,7 +197,10 @@
     }
 
     &.mListGridSelected {
-      background-color: var(--menu-bg-select);
+      background-color: var(--highlight-hover);
+    }
+    &.mListGridChecked.mListGridSelected {
+      background-color: var(--highlight-select-hover);
     }
 
     .eListGridCheckBox {
diff --git a/plugins/tracker-resources/src/components/scrums/ScrumPresenter.svelte b/plugins/tracker-resources/src/components/scrums/ScrumPresenter.svelte
index 6133d2e291..2ab47915e9 100644
--- a/plugins/tracker-resources/src/components/scrums/ScrumPresenter.svelte
+++ b/plugins/tracker-resources/src/components/scrums/ScrumPresenter.svelte
@@ -36,7 +36,7 @@
     min-width: 0;
     font-weight: 500;
     text-align: left;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
diff --git a/plugins/tracker-resources/src/components/scrums/ScrumRecordPresenter.svelte b/plugins/tracker-resources/src/components/scrums/ScrumRecordPresenter.svelte
index 425c772052..4456a0d836 100644
--- a/plugins/tracker-resources/src/components/scrums/ScrumRecordPresenter.svelte
+++ b/plugins/tracker-resources/src/components/scrums/ScrumRecordPresenter.svelte
@@ -35,7 +35,7 @@
     min-width: 0;
     font-weight: 500;
     text-align: left;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
diff --git a/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte b/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
index 173b72f911..8c1834bb13 100644
--- a/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
+++ b/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
@@ -195,8 +195,10 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.65rem 1.35rem 0.65rem 2.25rem;
-    border-bottom: 1px solid var(--theme-button-border-hovered);
+    padding: 0.65rem 0.75rem 0.65rem 2.25rem;
+    background-color: var(--board-bg-color);
+    border-top: 1px solid var(--divider-color);
+    border-bottom: 1px solid var(--divider-color);
   }
 
   .buttonWrapper {
diff --git a/plugins/tracker-resources/src/components/templates/DraftIssueChildList.svelte b/plugins/tracker-resources/src/components/templates/DraftIssueChildList.svelte
index 6e7227be76..9c91a57971 100644
--- a/plugins/tracker-resources/src/components/templates/DraftIssueChildList.svelte
+++ b/plugins/tracker-resources/src/components/templates/DraftIssueChildList.svelte
@@ -243,22 +243,22 @@
     &.is-dragging::before {
       position: absolute;
       content: '';
-      background-color: var(--theme-bg-color);
-      opacity: 0.4;
+      background-color: var(--divider-color);
       inset: 0;
+      z-index: -1;
     }
 
     &.is-dragged-over-up::before {
       position: absolute;
       content: '';
       inset: 0;
-      border-top: 1px solid var(--theme-bg-check);
+      border-top: 1px solid var(--caret-color);
     }
     &.is-dragged-over-down::before {
       position: absolute;
       content: '';
       inset: 0;
-      border-bottom: 1px solid var(--theme-bg-check);
+      border-bottom: 1px solid var(--caret-color);
     }
   }
 </style>
diff --git a/plugins/tracker-resources/src/components/templates/EditIssueTemplate.svelte b/plugins/tracker-resources/src/components/templates/EditIssueTemplate.svelte
index 202a7ff3a2..821cceced3 100644
--- a/plugins/tracker-resources/src/components/templates/EditIssueTemplate.svelte
+++ b/plugins/tracker-resources/src/components/templates/EditIssueTemplate.svelte
@@ -306,7 +306,7 @@
   .title {
     font-weight: 500;
     font-size: 1.125rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
   }
 
   .content {
@@ -314,11 +314,11 @@
   }
 
   .description-preview {
-    color: var(--theme-content-color);
+    color: var(--content-color);
     line-height: 150%;
 
     .placeholder {
-      color: var(--theme-content-trans-color);
+      color: var(--dark-color);
     }
   }
   .divider {
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
index 91de7be618..fbf9d2a60d 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
@@ -225,22 +225,22 @@
     &.is-dragging::before {
       position: absolute;
       content: '';
-      background-color: var(--theme-bg-color);
-      opacity: 0.4;
+      background-color: var(--divider-color);
       inset: 0;
+      z-index: -1;
     }
 
     &.is-dragged-over-up::before {
       position: absolute;
       content: '';
       inset: 0;
-      border-top: 1px solid var(--theme-bg-check);
+      border-top: 1px solid var(--caret-color);
     }
     &.is-dragged-over-down::before {
       position: absolute;
       content: '';
       inset: 0;
-      border-bottom: 1px solid var(--theme-bg-check);
+      border-bottom: 1px solid var(--caret-color);
     }
   }
 </style>
diff --git a/plugins/tracker-resources/src/components/workflow/StatusEditor.svelte b/plugins/tracker-resources/src/components/workflow/StatusEditor.svelte
index 36c5ab4aa0..7fd47626b3 100644
--- a/plugins/tracker-resources/src/components/workflow/StatusEditor.svelte
+++ b/plugins/tracker-resources/src/components/workflow/StatusEditor.svelte
@@ -30,7 +30,12 @@
   const dispatch = createEventDispatcher()
 
   function pickColor (evt: MouseEvent) {
-    showPopup(ColorsPopup, {}, eventToHTMLElement(evt), (newColor) => (value.color = newColor))
+    showPopup(
+      ColorsPopup,
+      { selected: value.color ? getPlatformColor(value.color) : undefined },
+      eventToHTMLElement(evt),
+      (newColor) => (value.color = newColor)
+    )
   }
 
   $: canSave = !isSaving && (value.name ?? '').length > 0
diff --git a/plugins/tracker-resources/src/components/workflow/Statuses.svelte b/plugins/tracker-resources/src/components/workflow/Statuses.svelte
index e8357a280e..f4f544cf6c 100644
--- a/plugins/tracker-resources/src/components/workflow/Statuses.svelte
+++ b/plugins/tracker-resources/src/components/workflow/Statuses.svelte
@@ -321,14 +321,14 @@
       position: absolute;
       content: '';
       inset: 0;
-      border-top: 1px solid var(--theme-bg-check);
+      border-top: 1px solid var(--caret-color);
     }
 
     &.is-dragged-over-down::before {
       position: absolute;
       content: '';
       inset: 0;
-      border-bottom: 1px solid var(--theme-bg-check);
+      border-bottom: 1px solid var(--caret-color);
     }
   }
 
diff --git a/plugins/view-resources/src/components/BooleanPresenter.svelte b/plugins/view-resources/src/components/BooleanPresenter.svelte
index 6f321babd3..6041e34027 100644
--- a/plugins/view-resources/src/components/BooleanPresenter.svelte
+++ b/plugins/view-resources/src/components/BooleanPresenter.svelte
@@ -36,7 +36,7 @@
       white-space: nowrap;
       text-transform: capitalize;
       font-weight: 500;
-      color: var(--theme-caption-color);
+      color: var(--caption-color);
     }
   }
 </style>
diff --git a/plugins/view-resources/src/components/ColorsPopup.svelte b/plugins/view-resources/src/components/ColorsPopup.svelte
index a6071ab3b1..9be24cedc3 100644
--- a/plugins/view-resources/src/components/ColorsPopup.svelte
+++ b/plugins/view-resources/src/components/ColorsPopup.svelte
@@ -21,6 +21,7 @@
 
   export let colors: readonly string[] = getPlatformColors()
   export let columns: number = 5
+  export let selected: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
 </script>
@@ -28,8 +29,10 @@
 <PopupDialog label={view.string.ChooseAColor}>
   <div class="color-grid" style="grid-template-columns: repeat({columns}, 1.5rem)">
     {#each colors as color, i}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
         class="color"
+        class:selected={selected === color}
         style="background-color: {color}"
         on:click={() => {
           dispatch('close', i)
@@ -51,7 +54,17 @@
       cursor: pointer;
 
       &:hover {
-        border-color: var(--theme-button-border-focused);
+        border-color: var(--primary-button-focused-border);
+        box-shadow: 0 0 0 3px var(--primary-button-outline);
+      }
+      &.selected {
+        border-color: var(--caption-color);
+        box-shadow: 0 0 0 3px var(--trans-content-20);
+
+        &:hover {
+          border-color: var(--system-error-color);
+          box-shadow: 0 0 0 3px var(--trans-content-20);
+        }
       }
     }
   }
diff --git a/plugins/view-resources/src/components/Move.svelte b/plugins/view-resources/src/components/Move.svelte
index 89e2d9276a..701326fc1a 100644
--- a/plugins/view-resources/src/components/Move.svelte
+++ b/plugins/view-resources/src/components/Move.svelte
@@ -139,15 +139,15 @@
     padding: 2rem 1.75rem 1.75rem;
     width: 25rem;
     max-width: 40rem;
-    background: var(--theme-msgbox-bg);
+    background: var(--popup-bg-color);
     border-radius: 1.25rem;
     user-select: none;
-    box-shadow: var(--theme-msgbox-shadow);
+    box-shadow: var(--popup-shadow);
 
     .spaceSelect {
-      padding: 1rem 1.25rem;
-      background-color: var(--theme-button-bg-enabled);
-      border: 1px solid var(--theme-bg-accent-color);
+      padding: 0.75rem;
+      background-color: var(--body-color);
+      border: 1px solid var(--popup-divider);
       border-radius: 0.75rem;
     }
 
diff --git a/plugins/view-resources/src/components/PopupDialog.svelte b/plugins/view-resources/src/components/PopupDialog.svelte
index 7092392277..dc70c6636e 100644
--- a/plugins/view-resources/src/components/PopupDialog.svelte
+++ b/plugins/view-resources/src/components/PopupDialog.svelte
@@ -21,7 +21,6 @@
 </script>
 
 <div class="card-container">
-  <div class="card-bg" />
   <div class="overflow-label label"><Label {label} /></div>
   <div class="content"><slot /></div>
 </div>
@@ -31,8 +30,10 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    padding: 32px 1.5rem 1.25rem;
+    padding: 2rem 1.75rem 1.75rem;
     border-radius: 0.75rem;
+    background: var(--popup-bg-color);
+    box-shadow: var(--popup-shadow);
 
     .label {
       flex-shrink: 0;
@@ -40,7 +41,7 @@
       text-transform: uppercase;
       font-weight: 600;
       font-size: 0.75rem;
-      color: var(--theme-content-trans-color);
+      color: var(--dark-color);
     }
 
     .content {
@@ -48,18 +49,5 @@
       flex-grow: 1;
       height: fit-content;
     }
-
-    .card-bg {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: var(--theme-card-bg);
-      border-radius: 0.75rem;
-      backdrop-filter: blur(24px);
-      box-shadow: var(--theme-card-shadow);
-      z-index: -1;
-    }
   }
 </style>
diff --git a/plugins/view-resources/src/components/icons/Circles.svelte b/plugins/view-resources/src/components/icons/Circles.svelte
index 4cb9010e01..c3c88cac17 100644
--- a/plugins/view-resources/src/components/icons/Circles.svelte
+++ b/plugins/view-resources/src/components/icons/Circles.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'var(--caption-color)'
 </script>
 
 <svg {fill} viewBox="0 0 6 16" xmlns="http://www.w3.org/2000/svg">
diff --git a/plugins/view-resources/src/components/list/ListItem.svelte b/plugins/view-resources/src/components/list/ListItem.svelte
index b8a0b4c922..0f5de1b4bd 100644
--- a/plugins/view-resources/src/components/list/ListItem.svelte
+++ b/plugins/view-resources/src/components/list/ListItem.svelte
@@ -184,7 +184,7 @@
     width: 100%;
     height: 2.75rem;
     min-height: 2.75rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
 
     &.checking {
       background-color: var(--highlight-select);
diff --git a/plugins/view-resources/src/components/list/SortableList.svelte b/plugins/view-resources/src/components/list/SortableList.svelte
index 30b334477d..0e15e852d8 100644
--- a/plugins/view-resources/src/components/list/SortableList.svelte
+++ b/plugins/view-resources/src/components/list/SortableList.svelte
@@ -243,16 +243,16 @@
     }
 
     &.column.is-dragged-over-before::before {
-      border-top: 1px solid var(--theme-bg-check);
+      border-top: 1px solid var(--caret-color);
     }
     &.column.is-dragged-over-after::before {
-      border-bottom: 1px solid var(--theme-bg-check);
+      border-bottom: 1px solid var(--caret-color);
     }
     &.row.is-dragged-over-before::before {
-      border-left: 1px solid var(--theme-bg-check);
+      border-left: 1px solid var(--caret-color);
     }
     &.row.is-dragged-over-after::before {
-      border-right: 1px solid var(--theme-bg-check);
+      border-right: 1px solid var(--caret-color);
     }
   }
 </style>
diff --git a/plugins/view-resources/src/utils.ts b/plugins/view-resources/src/utils.ts
index 1a89502ce6..0fb4291ff3 100644
--- a/plugins/view-resources/src/utils.ts
+++ b/plugins/view-resources/src/utils.ts
@@ -336,7 +336,7 @@ export async function deleteObjects (client: TxOperations, objects: Doc[]): Prom
 export function getMixinStyle (id: Ref<Class<Doc>>, selected: boolean): string {
   const color = getPlatformColorForText(id as string)
   return `
-    color: ${selected ? '#fff' : 'var(--theme-caption-color)'};
+    color: ${selected ? '#fff' : 'var(--caption-color)'};
     background: ${color + (selected ? 'ff' : '33')};
     border: 1px solid ${color + (selected ? '0f' : '66')};
   `
diff --git a/plugins/workbench-resources/src/components/App.svelte b/plugins/workbench-resources/src/components/App.svelte
index cae9edbe47..c1d618625f 100644
--- a/plugins/workbench-resources/src/components/App.svelte
+++ b/plugins/workbench-resources/src/components/App.svelte
@@ -34,6 +34,7 @@
   </div>
   {#if notify}<div class="marker" />{/if}
   {#if editable}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
       class="starButton"
       class:hidden
@@ -69,7 +70,7 @@
     .icon-container {
       width: 3.25rem;
       height: 3.25rem;
-      color: var(--theme-content-trans-color);
+      color: var(--dark-color);
 
       .normal-font &.noty {
         clip-path: url(#notify-normal);
diff --git a/plugins/workbench-resources/src/components/AppItem.svelte b/plugins/workbench-resources/src/components/AppItem.svelte
index c7f923a47c..bc05a3b550 100644
--- a/plugins/workbench-resources/src/components/AppItem.svelte
+++ b/plugins/workbench-resources/src/components/AppItem.svelte
@@ -64,7 +64,7 @@
     .icon-container {
       width: 3.25rem;
       height: 3.25rem;
-      color: var(--theme-content-trans-color);
+      color: var(--dark-color);
 
       .normal-font &.noty {
         clip-path: url(#notify-normal);
diff --git a/plugins/workbench-resources/src/components/AsideHeader.svelte b/plugins/workbench-resources/src/components/AsideHeader.svelte
index 3871d6b8c1..08d2106803 100644
--- a/plugins/workbench-resources/src/components/AsideHeader.svelte
+++ b/plugins/workbench-resources/src/components/AsideHeader.svelte
@@ -43,7 +43,7 @@
       height: 28px;
       padding: 6px 8px;
       border-radius: 0.5rem;
-      background-color: var(--theme-menu-divider);
+      background-color: var(--trans-content-10);
       span {
         font-weight: 600;
         font-size: 12px;
diff --git a/plugins/workbench-resources/src/components/HelpAndSupport.svelte b/plugins/workbench-resources/src/components/HelpAndSupport.svelte
index f66d75c750..ddd8b7ea2a 100644
--- a/plugins/workbench-resources/src/components/HelpAndSupport.svelte
+++ b/plugins/workbench-resources/src/components/HelpAndSupport.svelte
@@ -105,6 +105,7 @@
 <div class="helpAndSupportPopup">
   <div class="header">
     {#if shortcuts}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div class="mr-4 cursor-pointer" on:click={() => (shortcuts = !shortcuts)}>
         <Icon icon={IconArrowLeft} size={'medium'} fill={'var(--content-color)'} />
       </div>
@@ -116,6 +117,7 @@
   {#if !shortcuts}
     {#each cards as card}
       <div class="clear-mins card {!card.disabled ? 'cursor-pointer focused-button' : ''}">
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class="container" on:click={card.onClick}>
           <Icon icon={card.icon} size={'small'} fill={'var(--content-color)'} />
           <div class="content">
@@ -132,15 +134,15 @@
     {/each}
   {:else}
     <!-- Keyboard shortcuts -->
-    <Scroller>
-      <ListView count={actions.length}>
+    <Scroller padding={'0 .5rem'} fade={{ offset: { top: true }, multipler: { top: 2.5, bottom: 0 } }}>
+      <ListView count={actions.length} noScroll>
         <svelte:fragment slot="category" let:item>
           {@const action = actions[item]}
           {#if item === 0 || (item > 0 && actions[item - 1].category !== action.category)}
             {#if action.category}
               {@const category = categories.find((cat) => cat._id === action.category)}
               {#if category?.label && category.label !== categories.find((cat) => cat._id === actions[item - 1]?.category)?.label}
-                <div class="category-box">
+                <div class="category-box font-semi-bold text-base categoryHeader clear-mins">
                   <Label label={category.label} />
                 </div>
               {/if}
@@ -149,7 +151,7 @@
         </svelte:fragment>
         <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">
+          <div class="flex-row-center flex-between flex-grow ml-2 p-3 text-base clear-mins">
             <div class="mr-4">
               <Icon icon={action.icon ?? IconArrowLeft} size={'small'} />
             </div>
@@ -195,14 +197,14 @@
 
 <style lang="scss">
   .card {
-    border: 1px solid var(--theme-bg-accent-color);
+    border: 1px solid var(--button-border-color);
     border-radius: 0.75rem;
     margin: 16px 1rem 0 1rem;
   }
   .container {
     display: flex;
     flex-direction: row;
-    padding: 16px;
+    padding: 1rem;
     width: 100%;
   }
   .content {
@@ -214,7 +216,6 @@
   }
   .footer {
     align-items: flex-end;
-    border-top: 1px solid var(--popup-divider);
     display: flex;
     flex: 1;
     justify-content: flex-end;
@@ -233,9 +234,12 @@
     margin-left: 0.5rem;
   }
   .category-box {
-    display: inline-block;
+    position: sticky;
+    padding: 0.5rem 1rem;
+    top: 0;
+    min-height: 2.5rem;
     background-color: var(--divider-color);
     color: var(--caption-color);
-    padding: 0.5rem;
+    border-radius: 0.25rem;
   }
 </style>
diff --git a/plugins/workbench-resources/src/components/SpaceBrowser.svelte b/plugins/workbench-resources/src/components/SpaceBrowser.svelte
index b1240161cb..bfed33ee21 100644
--- a/plugins/workbench-resources/src/components/SpaceBrowser.svelte
+++ b/plugins/workbench-resources/src/components/SpaceBrowser.svelte
@@ -183,7 +183,7 @@
 
 <style lang="scss">
   .divider {
-    background-color: var(--theme-dialog-divider);
+    background-color: var(--divider-color);
     height: 1px;
   }
 
diff --git a/plugins/workbench-resources/src/components/icons/Documentation.svelte b/plugins/workbench-resources/src/components/icons/Documentation.svelte
index e1960bc03d..3d1fd600cd 100644
--- a/plugins/workbench-resources/src/components/icons/Documentation.svelte
+++ b/plugins/workbench-resources/src/components/icons/Documentation.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  export let fill: string = 'var(--theme-caption-color)'
+  export let fill: string = 'var(--caption-color)'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
diff --git a/plugins/workbench-resources/src/components/icons/Keyboard.svelte b/plugins/workbench-resources/src/components/icons/Keyboard.svelte
index ca40462892..2b7baa26c9 100644
--- a/plugins/workbench-resources/src/components/icons/Keyboard.svelte
+++ b/plugins/workbench-resources/src/components/icons/Keyboard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  export let fill: string = 'var(--theme-caption-color)'
+  export let fill: string = 'var(--caption-color)'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
diff --git a/plugins/workbench-resources/src/components/icons/Mention.svelte b/plugins/workbench-resources/src/components/icons/Mention.svelte
index 12caec2c9c..b70b9d987d 100644
--- a/plugins/workbench-resources/src/components/icons/Mention.svelte
+++ b/plugins/workbench-resources/src/components/icons/Mention.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'var(--caption-color)'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">