Cleaning up the old theme. (#2720)

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>

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);
       }
     }
   }

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>

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">

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>

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"

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) => {